/* callingcard: one clay room, one table, one phone. */
@font-face { font-family: "Bricolage"; src: url(/font/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/font/courierprime-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #2E2433; --ink: #F3E2C4; --accent: #F3E2C4;
  --plum: #2E2433; --amber: #C99A62; --wood: #7A5E45; --blue: #3B34C8; --gold: #C9A54A;
  --black: #1E1B1E; --cream: #ECE3D6; --paper-ink: #3A2A22; --lcd-ink: #2F3A1E; --red: #D2352B;
  --font-display: "Bricolage", system-ui, sans-serif;
  --font-body: "Bricolage", system-ui, sans-serif;
  --press: 35ms; --settle: 600ms cubic-bezier(.2,.9,.25,1);
}
html, body { overflow-x: clip; }
body { background: var(--plum); font-variant-numeric: tabular-nums; }
h1, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- keys: a generated key picture with the words set on it ---------- */
.key {
  position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none;
  color: var(--ink); font: 800 var(--key-fs, 18px)/1.1 var(--font-body); cursor: pointer;
  min-height: 48px; -webkit-tap-highlight-color: transparent;
  transition: transform var(--settle), filter 250ms ease-out;
}
.key > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.key > span { position: relative; display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: .45em; padding: .3em 1em .45em; text-align: center; }
.key .mark { width: 1.2em; height: 1.2em; flex: none; }
.key:hover { transform: translateY(-2px); filter: brightness(1.08); transition: transform 250ms cubic-bezier(.3,1.5,.5,1), filter 250ms; }
.key:active { transform: translateY(4px) scale(.98); filter: brightness(.9); transition: transform var(--press), filter var(--press); }
.key.is-off { opacity: .5; filter: saturate(.4); cursor: not-allowed; transform: none; }
.key-call > span { padding-inline: .4em; color: #FFF4E6; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 0 #7E1A14; }
.key-buy > span, .key-answer > span { color: #FFFBEF; text-shadow: 0 2px 0 #1F5A26; }
.key-decline > span { color: #FFF4E6; text-shadow: 0 2px 0 #7E1A14; }
.key-copy > span { color: var(--cream); }
.key-sd > span { color: var(--paper-ink); }

/* ---------- desktop: one screen, the room is the page ---------- */
.stage { position: relative; height: 100svh; min-height: 600px; overflow: hidden; container-type: size; }
.scene { position: absolute; inset: 0; }
.room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.stage {
  --H: max(100cqh, 56.25cqw);                 /* drawn height of the room picture */
  --phone-w: min(46cqw, 76cqh);
  --phone-left: calc(96cqw - var(--phone-w));
  --card-h: min(47cqh, 26.5cqw);
  --card-w: calc(var(--card-h) * 1.2224);
}

.title { position: absolute; left: 4cqw; top: 5cqh; width: min(29.5cqw, 52cqh); }
.wordmark { width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(243,226,196,.35)); }
.tag { margin-top: .2em; padding-left: 4%; font-size: clamp(18px, 1.35cqw, 26px); line-height: 1.35; font-weight: 500; color: var(--ink); max-width: 22em; text-shadow: 0 1px 2px rgba(30,20,30,.6); }
.tag [data-ticker] { font-weight: 800; }

.card { position: absolute; z-index: 3; left: calc(var(--phone-left) + var(--phone-w) * .07 - var(--card-w) * .8); bottom: calc(var(--H) * .155); width: var(--card-w); aspect-ratio: 760 / 622; }
.card-move { position: absolute; inset: 0; transform-origin: 50% 100%; }
.card .f { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; filter: drop-shadow(0 10px 8px rgba(40,20,20,.35)); }
.card .f.is-on { visibility: visible; }
.stage[data-mode="idle"] .card-move { animation: boil 1.4s steps(1) infinite; }
@keyframes boil { 0% { transform: rotate(0) } 25% { transform: rotate(-.6deg) translateX(1px) } 50% { transform: rotate(.3deg) } 75% { transform: rotate(-.2deg) translateY(1px) } }
.card.is-flinch .card-move { animation: flinch 320ms cubic-bezier(.3,1.6,.5,1); }
@keyframes flinch { 0% { transform: scale(1) } 30% { transform: scale(1.04, .94) translateX(-6px) } 100% { transform: scale(1) } }

.bubble {
  position: absolute; left: 4%; bottom: 96%; min-width: 9em; padding: .7em 1.2em .9em;
  font: 800 clamp(22px, 2cqw, 40px)/1.05 var(--font-body); color: var(--paper-ink); text-align: center; white-space: nowrap;
  background: url(/img/plate.webp) center / 100% 100% no-repeat;
  opacity: 0; transform: scale(.6) rotate(-4deg); transform-origin: 30% 100%;
  transition: opacity 120ms ease-out, transform 120ms ease-out; pointer-events: none;
}
.bubble.is-on { opacity: 1; transform: scale(1) rotate(-3deg); transition: opacity 90ms, transform 260ms cubic-bezier(.3,1.7,.5,1); }
.bubble.is-small { font-size: clamp(17px, 1.25cqw, 24px); white-space: normal; width: 15em; font-weight: 500; font-style: italic; }

.desk { position: absolute; inset: 0; pointer-events: none; }
.phone { position: absolute; left: var(--phone-left); bottom: calc(var(--H) * .085); width: var(--phone-w); aspect-ratio: 1100 / 872; pointer-events: auto; container-type: inline-size; }
.phone-face { position: absolute; inset: 0; container-type: inline-size; }
.phone-body { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 14px rgba(30,15,15,.45)); }
.handset { position: absolute; left: 14%; top: -11%; width: 72%; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 8px 6px rgba(30,15,15,.4)); transition: transform 300ms ease-out, opacity 80ms; }
.phone.is-off-hook .handset { opacity: 0; transform: translateY(-30%) rotate(-8deg); }
.phone.is-ringing .handset { animation: rattle 120ms steps(2) infinite; }
@keyframes rattle { 0% { transform: translateY(-2%) rotate(-1.5deg) } 100% { transform: translateY(-1%) rotate(1.5deg) } }
.phone.is-landing .handset { animation: land 420ms cubic-bezier(.3,1.6,.5,1); }
@keyframes land { 0% { transform: translateY(-40%) } 70% { transform: translateY(3%) } 100% { transform: none } }

/* positions measured from phone.webp (1100 x 872) */
.lcd { position: absolute; left: 31.2%; top: 24%; width: 44.8%; height: 11.6%; display: grid; place-items: center; overflow: hidden;
  font: 800 clamp(17px, 4.1cqw, 34px)/1 var(--font-body); letter-spacing: .06em; color: var(--lcd-ink); text-transform: uppercase; white-space: nowrap; opacity: .85; }
.key-call { position: absolute; left: 28%; top: 37.5%; width: 44%; aspect-ratio: 700 / 176; --key-fs: clamp(18px, 4.6cqw, 34px); }
.number { position: absolute; left: 8.5%; top: 51.5%; width: 83%; height: 28%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25em; padding: 2% 5% 2.4%; color: var(--paper-ink); }
.number-paper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.number > :not(img) { position: relative; }
.number-label { font-weight: 800; font-size: clamp(16px, 2.3cqw, 18px); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.ca { font: 700 clamp(16px, 2.6cqw, 21px)/1.2 "Courier Prime", ui-monospace, monospace; text-align: center; color: var(--paper-ink); max-width: 100%; }
.number-keys { display: flex; gap: 3%; width: 100%; justify-content: center; }
.key-copy { flex: 0 0 25%; height: clamp(48px, 8.6cqw, 62px); --key-fs: clamp(16px, 2.6cqw, 20px); }
.key-buy { flex: 0 0 66%; height: clamp(48px, 8.6cqw, 62px); --key-fs: clamp(16px, 2.45cqw, 20px); }
.key-buy > span { padding-inline: .6em; white-space: normal; }
.key-sd { position: absolute; top: 81%; width: 35%; aspect-ratio: 700 / 236; --key-fs: clamp(16px, 2.8cqw, 22px); }
.key-x { left: 14%; }
.key-chart { left: 51%; }

.note { position: absolute; left: 34.5cqw; top: 3cqh; width: min(21.5cqw, 38cqh); aspect-ratio: 800 / 774; transform: rotate(-2.5deg); }
.note > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-text { position: absolute; inset: 15% 13% 9% 13%; display: flex; flex-direction: column; justify-content: center; gap: .8em; color: var(--paper-ink); }
.note-text p:first-child { font-size: clamp(17px, 1.3cqw, 24px); line-height: 1.3; font-weight: 800; }
.risk { font-size: 16px; line-height: 1.3; font-weight: 500; opacity: .72; }

/* incoming call */
.ring { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5; background: radial-gradient(ellipse at 50% 45%, rgba(46,36,51,0) 30%, rgba(46,36,51,.55)); }
.ring[hidden] { display: none; }
.ring-paper { position: relative; width: min(760px, 94vw); min-height: min(330px, 46vw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 38px 7% 42px; animation: drop 520ms cubic-bezier(.3,1.5,.5,1); }
.ring-paper > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.ring-title { position: relative; font: 800 clamp(30px, 5.4vw, 64px)/1 var(--font-body); color: var(--red); text-transform: uppercase; text-align: center; letter-spacing: -.01em; animation: buzz 140ms steps(2) infinite; }
.ring-keys { position: relative; display: flex; gap: 6%; width: 86%; }
.ring-keys .key { flex: 1 1 0; min-width: 0; height: clamp(52px, 8vw, 76px); --key-fs: clamp(18px, 2.4vw, 28px); text-transform: uppercase; }
.ring-keys .key > span { padding-inline: .3em; }
@keyframes drop { 0% { transform: translateY(-60vh) rotate(-6deg) } 100% { transform: rotate(-1.5deg) } }
@keyframes buzz { 0% { transform: translateX(-1px) } 100% { transform: translateX(1.5px) } }

/* the card comes close to yell at you */
.stage[data-mode="answer"] .card { z-index: 6; transition: transform 300ms cubic-bezier(.3,1.4,.5,1); }

/* ---------- phones and tall screens: recomposed, not shrunk ---------- */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .stage { height: auto; min-height: 0; overflow: visible; container-type: inline-size; }
  .stage { --H: 100%; }
  .scene { position: relative; height: clamp(430px, 60svh, 620px); overflow: hidden; container-type: size; }
  .room { object-position: 47% 100%; }
  .title { left: 50%; top: 4.5%; width: min(88cqw, 540px); transform: translateX(-50%); text-align: center; }
  .tag { padding: 0; margin-inline: auto; font-size: 19px; color: var(--paper-ink); text-shadow: 0 1px 0 rgba(255,236,200,.5); }
  .wordmark { filter: brightness(.2) sepia(.6); }
  .card { left: 50%; bottom: 13%; width: min(80cqw, 40cqh * 1.2224, 520px); transform: translateX(-46%); }
  .title { width: min(80cqw, 34cqh * 2.68, 520px); }
  .bubble { left: 34%; bottom: 74%; min-width: 0; font-size: 26px; }
  .bubble.is-small { font-size: 18px; width: 14em; }

  .desk { position: relative; inset: auto; pointer-events: auto; padding: 15vw 4vw 28px; background: url(/img/table.webp) 50% 0 / cover; }
  .phone { position: relative; left: auto; bottom: auto; width: min(100%, 560px); margin: 0 auto; }
  .lcd { font-size: clamp(16px, 4.6cqw, 26px); }
  .key-call { left: 18%; top: 39%; width: 64%; --key-fs: clamp(18px, 5.6cqw, 30px); }
  .key-sd { top: 63%; width: 43%; --key-fs: clamp(16px, 4.4cqw, 22px); }
  .key-sd > span { padding-inline: .35em; gap: .3em; }
  .key-x { left: 6%; }
  .key-chart { left: 51%; }
  .number { position: relative; left: auto; top: auto; width: 100%; height: auto; margin-top: 4%; padding: 7% 7% 8%; gap: .55em; transform: rotate(-1deg); }
  .number-paper { inset: 0; }
  .ca { font-size: 18px; max-width: 16em; }
  .number-label { font-size: 16px; }
  .number-keys { flex-direction: column; align-items: center; gap: 10px; }
  .key-copy { flex: none; width: 46%; aspect-ratio: auto; height: 52px; }
  .key-buy { flex: none; width: 100%; aspect-ratio: auto; height: 60px; --key-fs: 18px; }
  .phone { aspect-ratio: auto; container-type: normal; }
  .phone-face { position: relative; inset: auto; aspect-ratio: 1100 / 872; }

  .note { position: relative; left: auto; top: auto; width: min(92vw, 460px); margin: 0 auto; transform: rotate(-2deg); }
  .stage > .note { margin-top: -8px; margin-bottom: 0; }
  .note-text p:first-child { font-size: 20px; }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .stage { background: url(/img/table.webp) 50% 100% / cover; padding-bottom: 40px; }
  .desk { background: none; }
}
@media (max-width: 360px) {
  .ca { font-size: 16px; }
  .key-buy { --key-fs: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage[data-mode] .card-move { animation: none; }
  .ring-paper, .ring-title { animation: none; }
}

/* 404: the same room, wrong number */
.lost { position: relative; min-height: 100svh; display: grid; place-items: end center; overflow: hidden; }
.lost .room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.lost-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 16px 9svh; width: min(640px, 100%); }
.lost-card { width: min(320px, 70vw); height: auto; order: 2; }
.lost-paper { position: relative; padding: 26px 34px 30px; order: 1; transform: rotate(-2deg); }
.lost-paper > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.lost-paper h1 { position: relative; font: 800 clamp(22px, 3.4vw, 34px)/1.15 var(--font-body); color: var(--paper-ink); text-align: center; }
.lost-key > span { color: #FFF4E6; text-transform: uppercase; text-shadow: 0 2px 0 #7E1A14; }
.lost-key { order: 3; position: relative; width: min(380px, 88vw); aspect-ratio: 700 / 176; --key-fs: 20px; }

/* ================= the room, filled ================= */
.shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 18%, rgba(46,36,51,0) 40%, rgba(30,22,34,.55) 100%); opacity: .55; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .5 } 50% { opacity: .7 } }
.stage.is-flicker .shade { animation: flick 600ms steps(1) 1; }
@keyframes flick { 0% { opacity: 1 } 15% { opacity: .2 } 30% { opacity: 1 } 45% { opacity: .1 } 60% { opacity: .9 } 75% { opacity: .3 } 100% { opacity: .55 } }

.grain { position: absolute; inset: -60px; pointer-events: none; z-index: 8; opacity: .07; background-size: 180px 180px; animation: grain 900ms steps(1) infinite; mix-blend-mode: overlay; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-30px,18px) } 50% { transform: translate(22px,-26px) } 75% { transform: translate(-14px,-34px) } }

/* the bulb hangs over the table, in the middle of its own light */
.bulb { position: absolute; left: 50cqw; top: -2cqh; width: 7.4cqh; height: 29cqh; padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(-50%); z-index: 2; min-height: 0; }
.bulb-swing { position: absolute; inset: 0; transform-origin: 50% 0; animation: swing 6s ease-in-out infinite; }
.bulb img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.glow { position: absolute; left: 50%; top: 86%; width: 340%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,214,140,.55) 0%, rgba(255,190,110,.2) 30%, rgba(255,180,100,0) 62%); mix-blend-mode: screen; animation: hum 2.4s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(1.6deg) } 50% { transform: rotate(-1.6deg) } }
@keyframes hum { 0%, 100% { opacity: .85 } 50% { opacity: 1 } }
.bulb:hover .bulb-swing { animation-duration: 1.6s; }
.stage.is-flicker .glow { animation: flick 600ms steps(1) 1; }

/* a wall clock with your real time */
.clock { position: absolute; right: 3.5cqw; top: 4cqh; width: min(9.5cqw, 17cqh); aspect-ratio: 500 / 512; transform: rotate(3deg); filter: drop-shadow(0 6px 6px rgba(30,15,20,.35)); }
.clock > img:first-child { width: 100%; height: 100%; }
.hand { position: absolute; left: 50%; transform-origin: 50% var(--pivot); transform: translateX(-50%) rotate(var(--a, 0deg)); }
.hand-m { width: 4.2%; height: 43%; --pivot: 94%; top: calc(50.7% - 43% * .94); }
.hand-h { width: 9%; height: 20%; --pivot: 77.5%; top: calc(50.7% - 20% * .775); }
.hand-m.is-tick { transition: transform 160ms cubic-bezier(.3,1.8,.5,1); }

/* sticky notes: every number it dialled */
.wall { position: absolute; inset: 0; pointer-events: none; }
.sticky { position: absolute; width: min(8.2cqw, 14.5cqh); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
  color: var(--paper-ink); text-align: center; transform: rotate(var(--r)); animation: slap 380ms cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 4px 4px rgba(30,15,20,.3)); }
.sticky > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticky b, .sticky i { position: relative; }
.sticky b { font: 800 clamp(16px, 1.15cqw, 22px)/1 var(--font-body); text-decoration: line-through 3px rgba(178,40,30,.85); }
.sticky i { font: italic 500 clamp(16px, 1.05cqw, 20px)/1 var(--font-body); opacity: .75; }
.sticky.is-falling { animation: fall 900ms cubic-bezier(.5,0,.9,.5) forwards; }
@keyframes slap { 0% { transform: translate(0, -40px) scale(1.5) rotate(0); opacity: 0 } 60% { opacity: 1 } 100% { transform: rotate(var(--r)) } }
@keyframes fall { 0% { transform: rotate(var(--r)) } 100% { transform: translateY(80cqh) rotate(calc(var(--r) * 6)); opacity: 0 } }

/* answering machine and mug on the table, left of the card */
.machine { position: absolute; left: 4.5cqw; bottom: calc(var(--H) * .175); width: min(14.5cqw, 25cqh); aspect-ratio: 700 / 422; z-index: 4; }
.machine-btn { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; min-height: 0; transition: transform var(--settle); filter: drop-shadow(0 10px 8px rgba(30,15,15,.4)); }
.machine-btn > img { width: 100%; height: 100%; }
.machine-btn:hover { transform: translateY(-2px); transition: transform 250ms cubic-bezier(.3,1.5,.5,1); }
.machine-btn:active { transform: translateY(3px) scale(.98); transition: transform var(--press); }
.led { position: absolute; left: 31.9%; top: 65.5%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,90,70,.95) 0 22%, rgba(255,60,40,.45) 34%, rgba(255,60,40,0) 70%); opacity: 0; }
.led.is-new { animation: led 1.1s steps(1) infinite; }
@keyframes led { 0% { opacity: 1 } 50% { opacity: 0 } }
.machine-say { position: absolute; left: 10%; bottom: 102%; width: max-content; max-width: 15em; padding: .7em 1.1em .85em; font: italic 500 17px/1.25 var(--font-body); color: var(--paper-ink);
  background: url(/img/plate.webp) center / 100% 100% no-repeat; opacity: 0; transform: scale(.7) rotate(2deg); transform-origin: 20% 100%; transition: opacity 120ms, transform 120ms; pointer-events: none; }
.machine-say.is-on { opacity: 1; transform: rotate(1.5deg); transition: opacity 90ms, transform 260ms cubic-bezier(.3,1.7,.5,1); }
.mug { position: absolute; left: calc(4.5cqw + min(14.5cqw, 25cqh) + .8cqw); bottom: calc(var(--H) * .165); width: min(4.6cqw, 8cqh); aspect-ratio: 400 / 364; z-index: 2; filter: drop-shadow(0 8px 6px rgba(30,15,15,.35)); }
.mug img { position: relative; width: 100%; height: 100%; }
.steam { position: absolute; left: -40%; bottom: 80%; width: 150%; height: 160%; pointer-events: none; }

/* the lore note moves under the title */
.note { left: 4.5cqw; top: 34cqh; width: min(19.5cqw, 33cqh); transform: rotate(-2deg); }
.note-text { inset: 15% 12% 8% 12%; gap: .6em; }
.note-text p:first-child { font-size: clamp(17px, 1.2cqw, 23px); }

/* first visit: the light comes on, the card runs in */
.stage.is-dark .room, .stage.is-dark .wall, .stage.is-dark .clock, .stage.is-dark .note, .stage.is-dark .machine, .stage.is-dark .mug, .stage.is-dark .desk, .stage.is-dark .title { filter: brightness(.12); }
.stage.is-dark .glow { opacity: 0; animation: none; }
.room, .wall, .clock, .note, .machine, .mug, .desk, .title { transition: filter 500ms ease-out; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .bulb { display: none; }
  .clock { display: none; }
  .note { position: relative; left: auto; top: auto; width: min(92vw, 460px); margin: 0 auto; transform: rotate(-2deg); }
  .note-text { inset: 15% 13% 9% 13%; }
  .note-text p:first-child { font-size: 20px; }
  .machine { left: 3%; bottom: 15%; width: 27%; }
  .mug { left: auto; right: 4%; bottom: 14.5%; width: 12%; }
  .machine-say { left: 0; font-size: 16px; max-width: 13em; }
  .sticky { width: 27cqw; max-width: 124px; }
  .sticky b, .sticky i { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bulb-swing, .glow, .shade, .grain, .led.is-new { animation: none !important; }
  .led.is-new { opacity: 1; }
}