/* Four invitations, made from the materials of their rooms. */
.room-invitation {
  display:flex;
  justify-content:flex-end;
  margin-top:clamp(56px,6vw,96px);
}

.room-cta {
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  width:310px;
  max-width:100%;
  min-width:0;
  min-height:94px;
  padding:14px 24px 14px 17px;
  border:1px solid #17291e3b;
  border-radius:2px;
  background:#f1ead7;
  color:var(--ink);
  text-align:left;
  box-shadow:0 3px 0 #17291e12,0 8px 16px #17291e0b;
  transition:translate .3s ease,box-shadow .3s ease;
}
.room-cta-copy {
  position:relative;
  min-width:0;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.09em;
}
.room-cta-copy > span:last-child {
  display:block;
  margin-top:2px;
  font-family:'Instrument Serif',serif;
  font-size:27px;
  line-height:1.05;
  letter-spacing:0;
  white-space:nowrap;
}
.room-cta-prompt { display:block; }
.room-cta-status[hidden] { display:none; }
.room-cta-status {
  position:absolute;
  top:7px;
  right:7px;
  z-index:1;
  padding:4px 6px 3px;
  border:1px solid #a04b31;
  border-radius:2px;
  background:#f1ead7ed;
  color:#8f402a;
  font-size:8px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;
  rotate:-4deg;
  animation:room-stamp-arrive .38s cubic-bezier(.2,.75,.25,1.2) both;
}
.room-cta-footer-status {
  position:relative;
  top:auto;
  right:auto;
  display:inline-block;
  margin-left:10px;
  vertical-align:middle;
}
.room-cta.is-notice { box-shadow:0 2px 0 #17291e12,0 5px 12px #17291e12; }
@keyframes room-stamp-arrive {
  from { opacity:0; scale:.7; translate:5px -3px; }
  to { opacity:1; scale:1; translate:0 0; }
}
.room-cta-art {
  position:relative;
  display:block;
  flex:0 0 64px;
  height:64px;
  pointer-events:none;
}
.room-cta:focus-visible {
  outline:2px solid currentColor;
  outline-offset:5px;
}
.room-cta:active { translate:0 1px; }

/* A strip of the actual Ojeikere photographs, drawn through a film gate. */
.room-cta-photo {
  rotate:5deg;
  background:linear-gradient(115deg,#f7f1e2,#e8dfc9);
  border-bottom-color:#17291e63;
}
.room-film {
  position:absolute;
  top:-2px;
  left:9px;
  width:46px;
  height:70px;
  padding:5px 7px;
  background:#243027;
  box-shadow:2px 3px 4px #17291e30;
  rotate:-7deg;
  transition:translate .5s cubic-bezier(.2,.7,.2,1),rotate .5s;
}
.room-film::before,.room-film::after {
  content:'';
  position:absolute;
  top:4px;
  bottom:4px;
  width:3px;
  background:repeating-linear-gradient(to bottom,#e9e0c7 0 4px,transparent 4px 8px);
}
.room-film::before { left:2px; }
.room-film::after { right:2px; }
.room-film i {
  display:block;
  height:28px;
  background:center / cover url('assets/ojeikere-brush-eko-bridge-1973.jpg');
}
.room-film i + i {
  margin-top:4px;
  background-image:url('assets/ojeikere-fro-fro-1970.jpg');
}

/* A record slipping out of its paper sleeve. */
.room-cta-music {
  rotate:-5deg;
  color:#f1ead7;
  background:#23372c;
  border-color:#13281e;
}
.room-mini-record {
  position:absolute;
  width:54px;
  height:54px;
  top:5px;
  left:11px;
  border-radius:50%;
  background:repeating-radial-gradient(circle,#131a16 0 2px,#394137 2px 3px,#111a15 3px 4px);
  box-shadow:2px 3px 5px #0006;
  transition:translate .6s cubic-bezier(.2,.7,.2,1),rotate 1s cubic-bezier(.2,.7,.2,1);
}
.room-mini-record::after {
  content:'';
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:radial-gradient(circle,#182a20 0 1px,#d9663e 1.5px 100%);
}
.room-mini-sleeve {
  position:absolute;
  inset:6px 21px 5px 0;
  border:1px solid #c7ad74;
  background:linear-gradient(135deg,#ead6a2,#c8ac72);
  box-shadow:1px 2px 3px #0003;
  rotate:-5deg;
}
.room-mini-sleeve::after {
  content:'';
  position:absolute;
  width:23px;
  height:23px;
  top:13px;
  left:9px;
  border:1px solid #28403280;
  border-radius:50%;
  background:#294234;
}

/* Indigo cloth, with a stitched edge and a small resist-dyed rosette. */
.room-cta-fashion {
  rotate:5deg;
  color:#f2ebd7;
  background:#273d55;
  border:1px dashed #d4ddda9c;
  outline:4px solid #273d55;
  outline-offset:0;
}
.room-cta-fashion:focus-visible { outline:2px solid var(--ink); outline-offset:8px; }
.room-cloth {
  position:absolute;
  inset:5px;
  border:1px solid #dfe5d382;
  background:
    radial-gradient(circle,#e1e4c9 0 3px,transparent 3.5px 7px,#e1e4c9 7.5px 9px,transparent 9.5px 16px,#e1e4c98c 16.5px 18px,transparent 18.5px),
    #1e3049;
  box-shadow:3px 4px 0 #10253d;
  rotate:8deg;
  transition:rotate .55s cubic-bezier(.2,.7,.2,1),translate .55s;
}
.room-cloth::after {
  content:'';
  position:absolute;
  inset:4px;
  border:1px dashed #dfe5d34d;
}

/* A pair of movable type blocks, with registration marks. */
.room-cta-design {
  rotate:-5deg;
  background:#dca97e;
  border-color:#6c482f80;
}
.room-type {
  position:absolute;
  display:grid;
  place-items:center;
  width:36px;
  height:47px;
  top:5px;
  left:2px;
  border:1px solid #263a2d80;
  color:#f4e6ce;
  background:#2e4434;
  box-shadow:2px 3px 0 #20332360;
  font-family:'Instrument Serif',serif;
  font-size:39px;
  line-height:1;
  rotate:-8deg;
  transition:rotate .5s,translate .5s;
}
.room-type + .room-type {
  top:15px;
  left:27px;
  color:#2e4434;
  background:#ead6b8;
  font-style:italic;
  rotate:9deg;
}

@media (hover:hover) {
  .room-cta:hover {
    translate:0 -3px;
    box-shadow:0 4px 0 #17291e12,0 12px 22px #17291e16;
  }
  .room-cta-photo:hover .room-film { translate:0 -4px; rotate:0deg; }
  .room-cta-music:hover .room-mini-record { translate:5px 0; rotate:120deg; }
  .room-cta-fashion:hover .room-cloth { rotate:-5deg; translate:0 -2px; }
  .room-cta-design:hover .room-type { rotate:0deg; translate:0 -3px; }
  .room-cta-design:hover .room-type + .room-type { rotate:0deg; translate:0 2px; }
}

@media (max-width:760px) {
  .room-invitation { justify-content:center; margin-top:60px; }
  .room-cta { gap:16px; padding-inline:15px; }
  .room-cta-copy > span:last-child { font-size:26px; }
}
@media (max-width:380px) {
  .room-cta { gap:12px; }
  .room-cta-art { flex-basis:56px; }
  .room-cta-copy > span:last-child { font-size:24px; }
}
body.no-motion .room-cta,
body.no-motion .room-cta * { transition:none; translate:none; }
body.no-motion .room-cta-status { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .room-cta,.room-cta * { transition:none; translate:none; }
  .room-cta-status { animation:none; }
}