/* Big Toe Coin: a moonlit bedroom from floor level. One unit, --u, scales the hero. */
@font-face { font-family: "Bowlby One"; src: url("/fonts/bowlby.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 600; src: url("/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 800; src: url("/fonts/figtree-latin-800-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #173A73; --ink: #3B1D08; --accent: #F2C230;
  --font-display: "Bowlby One", "Arial Black", sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --u: min(1vw, 1.778vh);
  --container: min(1500px, 100% - 2 * var(--s3));
}
html, body { overflow-x: clip; }
img { height: auto; }
body { background: var(--bg); }
main { position: relative; }
main.hit { animation: shake .58s steps(1) both; }
@keyframes shake {
  0% { transform: translate(-22px, 12px) rotate(-.6deg); } 14% { transform: translate(20px, -14px) rotate(.6deg); }
  28% { transform: translate(-16px, -9px) rotate(-.35deg); } 42% { transform: translate(13px, 10px) rotate(.3deg); }
  57% { transform: translate(-8px, 6px); } 71% { transform: translate(6px, -4px); } 85% { transform: translate(-3px, 2px); } 100% { transform: none; }
}

/* ---------- hero ---------- */
.scene { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.world { position: absolute; inset: 0; overflow: hidden; }
.room { position: absolute; left: 50%; top: 0; width: max(100%, 177.8vh); max-width: none; height: auto; min-height: 100%; object-fit: cover; transform: translateX(-50%); }
.curtains { position: absolute; left: 50%; top: 0; width: max(46%, 82vh); max-width: none; height: auto; transform-origin: top center; transform: translateX(-50%); animation: sway 3.2s steps(8) infinite alternate; }
@keyframes sway { from { transform: translateX(-50%) skewX(-.8deg) scaleX(1); } to { transform: translateX(-50%) skewX(.8deg) scaleX(1.012); } }
.nightglow { position: absolute; right: 21.5%; top: 26%; width: calc(9 * var(--u)); aspect-ratio: 1; margin: calc(-4.5 * var(--u)); border-radius: 50%; background: radial-gradient(#ffc56b66, #ffc56b00 70%); animation: glow 2.4s steps(6) infinite alternate; }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }

.logo { position: absolute; z-index: 6; left: calc(2 * var(--u)); top: calc(1 * var(--u)); width: calc(31 * var(--u)); margin: 0; animation: dropin .5s steps(6) both; }
@keyframes dropin { from { transform: translateY(-120%) rotate(-5deg); } 70% { transform: translateY(4%); } to { transform: none; } }

.always { position: absolute; z-index: 6; left: calc(3 * var(--u)); top: calc(25.5 * var(--u)); width: calc(25 * var(--u)); min-width: 300px; margin: 0; display: grid; place-items: center; }
.always img { grid-area: 1/1; width: 100%; height: auto; }
.always span { grid-area: 1/1; position: relative; padding: .5em 1.2em; font: 800 clamp(16px, 1.25 * var(--u), 24px)/1.2 var(--font-body); color: var(--ink); text-align: center; }

.toe { position: absolute; z-index: 3; left: calc(-2 * var(--u)); bottom: calc(-12 * var(--u)); width: calc(76 * var(--u)); aspect-ratio: 1; transform-origin: 0 100%; pointer-events: none; }
.toe img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.toe img.on { opacity: 1; }

.piece { position: absolute; z-index: 2; left: 0; bottom: calc(5 * var(--u)); width: auto; height: var(--ph, 44vw); aspect-ratio: var(--ar, .77); padding: 0; margin: 0; background: none; border: 0; cursor: grab; touch-action: none; }
.piece:active { cursor: grabbing; }
.piece > img { width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.hint { position: absolute; left: 12%; bottom: 40%; width: clamp(150px, 15 * var(--u), 240px); display: grid; place-items: center; transition: opacity .2s; animation: nudge 1s steps(3) infinite alternate; }
.hint img { grid-area: 1/1; width: 100%; height: auto; }
.hint span { grid-area: 1/1; position: relative; font: 400 clamp(16px, 1.5 * var(--u), 26px)/1 var(--font-display); color: var(--ink); }
.hint.gone { opacity: 0; }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(-12px); } }

.rope { position: absolute; z-index: 4; left: 0; top: 0; height: max(16px, 1.5 * var(--u)); background: url("/img/s/rope.webp") 0 50%/auto 100% repeat-x; transform-origin: 0 50%; pointer-events: none; }

.rays { position: absolute; z-index: 5; width: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u)); opacity: 0; pointer-events: none; }
.rays.pop { animation: rays .5s steps(5) both; }
@keyframes rays { 0% { opacity: 1; transform: scale(.45); } 40% { opacity: 1; transform: scale(1.1); } 80% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.3); } }

.starbox { position: absolute; z-index: 5; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.starbox.on { opacity: 1; }
.orbit i { position: absolute; left: 0; top: 0; width: calc(5.5 * var(--u)); min-width: 34px; aspect-ratio: 1; margin: calc(-2.75 * var(--u)); background: url("/img/s/stars.webp") 0 50%/300% auto no-repeat; }
.orbit i:nth-child(2) { background-position: 50% 50%; }
.orbit i:nth-child(3) { background-position: 100% 50%; }

/* the tag */
.tag { position: absolute; z-index: 7; left: calc(37 * var(--u)); bottom: calc(1.6 * var(--u)); width: calc(42 * var(--u)); min-width: 480px; aspect-ratio: 1300/595; container-type: inline-size; transform-origin: 11.8% 48%; }
.tag.swing { animation: swing 1.3s steps(16) both; }
@keyframes swing { 0% { transform: rotate(0); } 12% { transform: rotate(-7deg); } 30% { transform: rotate(5deg); } 50% { transform: rotate(-3.2deg); } 70% { transform: rotate(1.8deg); } 86% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
.tagpic { width: 100%; height: 100%; }
.tagbody { position: absolute; inset: 7% 6% 8% 18%; display: flex; flex-direction: column; justify-content: space-between; gap: 2%; }
.carow { display: flex; gap: 2cqw; align-items: center; min-height: 48px; flex: 1 1 auto; }
[data-ca] { flex: 1 1 0; min-width: 0; font: 500 clamp(16px, 2.2cqw, 18px)/1.3 "JetBrains Mono", monospace; color: var(--ink); opacity: 1; text-wrap: balance; }
.b { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .3em 1.1em; border: 0; color: var(--ink); text-decoration: none; font: 800 clamp(16px, 2.7cqw, 20px)/1 var(--font-body); background: none; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .25s; }
.b:hover { transform: translateY(-2px); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.b:active { transform: translateY(2px) scale(.97); transition: transform 35ms; }
.b img { width: 1.15em; height: 1.15em; flex: none; }
.cream { background-image: url("/img/s/btn-cream.webp"); }
.lime { background-image: url("/img/s/btn-lime.webp"); font-size: clamp(18px, 4cqw, 30px); min-height: clamp(52px, 13cqw, 84px); width: 100%; }
.copy { flex: none; min-width: 92px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.pair .b { width: 100%; }
.b.is-off { opacity: 1; filter: grayscale(.85) brightness(.92); }
.b.is-off:hover, .b.is-off:active { transform: none; }

/* the shout */
.shout { position: absolute; z-index: 9; left: 74%; top: 30%; width: calc(44 * var(--u)); margin-left: calc(-22 * var(--u)); transform: translateY(-50%); display: grid; place-items: center; opacity: 0; pointer-events: none; }
.shout img { grid-area: 1/1; width: 100%; height: auto; }
.shout span { grid-area: 1/1; position: relative; padding: 0 12%; text-align: center; font: 400 clamp(26px, 5.2 * var(--u), 92px)/1 var(--font-display); color: #FFF3D6; -webkit-text-stroke: .03em #5a1208; paint-order: stroke fill; }
.shout.pop { animation: shout 1s steps(1) both; }
@keyframes shout { 0% { opacity: 1; transform: translateY(-50%) scale(.5) rotate(-6deg); } 8% { opacity: 1; transform: translateY(-50%) scale(1.15) rotate(-3deg); } 16% { opacity: 1; transform: translateY(-50%) scale(1) rotate(-3deg); } 88% { opacity: 1; transform: translateY(-50%) scale(1.02) rotate(-3deg); } 100% { opacity: 0; } }

.flash { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
.flash.pop { animation: flash .25s steps(3) both; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- the clothesline ---------- */
.line { position: relative; overflow: hidden; padding: var(--s6) 0 var(--s7); background: var(--bg); }
.linebg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); pointer-events: none; }
.line .container { position: relative; }
.head { position: relative; display: grid; place-items: center; width: min(760px, 100%); margin: 0 auto var(--s6); }
.head img { grid-area: 1/1; width: 100%; height: auto; }
.head span { grid-area: 1/1; position: relative; padding: .5em 1em; font: 400 clamp(22px, 3vw, 44px)/1 var(--font-display); color: var(--ink); text-align: center; }
.memes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); }
.memes button { position: relative; display: block; width: 100%; aspect-ratio: 800/896; padding: 0; background: none; border: 0; cursor: zoom-in; transform-origin: 50% 0; transform: rotate(var(--t, 1deg)); filter: drop-shadow(0 10px 0 #0f2a5a66); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.memes li:nth-child(even) button { --t: -1.4deg; }
.memes li:nth-child(3n) button { --t: .6deg; }
.memes button:hover { transform: rotate(0) scale(1.03); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.memes button:active { transform: scale(.98); transition: transform 35ms; }
.memes .fr { position: absolute; inset: 0; width: 100%; height: 100%; }
.memes .me { position: absolute; left: 9%; top: 8.04%; width: 82%; height: 73.21%; object-fit: cover; }
.memes b { position: absolute; left: 6%; right: 6%; top: 82%; bottom: 3%; display: grid; place-items: center; font: 400 clamp(16px, 1.7vw, 30px)/1 var(--font-display); color: #2b1205; text-align: center; }

.head.low { margin: var(--s7) auto var(--s4); }
.suspects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); align-items: end; }
.suspects button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s2); width: 100%; height: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.suspects img { width: auto; max-width: 100%; height: clamp(180px, 19vw, 340px); object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 8px 0 #1c1b3a55); }
.suspects button:hover img { transform: rotate(-3deg) translateX(-6px); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.suspects button:active img { transform: translateX(-12px) scale(.97); transition: transform 35ms; }
.suspects span { display: block; width: 100%; padding: 18px 1.3em; text-align: center; color: var(--ink); background: url("/img/s/btn-cream.webp") center/100% 100% no-repeat; }
.suspects b { display: block; font: 400 clamp(16px, 1.3vw, 22px)/1.1 var(--font-display); }
.suspects i { display: block; margin-top: .2em; text-wrap: balance; font: 600 16px/1.2 var(--font-body); }
.riskplate { position: relative; display: grid; place-items: center; width: min(760px, 100%); margin: var(--s6) auto 0; }
.riskplate img { grid-area: 1/1; width: 100%; height: 100%; min-height: 76px; }
.riskplate .risk { grid-area: 1/1; position: relative; padding: .6em 2.4em; text-align: center; }
.risk { margin: 0; font: 600 16px/1.35 var(--font-body); color: #5f3f22; }

/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s3); background: #102a57f2; }
.viewer[hidden] { display: none; }
.viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-height: 0; }
.viewer figure img { width: auto; height: auto; max-width: 100%; max-height: min(78vh, calc(100vh - 190px)); }
.viewer figcaption { font: 400 clamp(22px, 3vw, 40px)/1 var(--font-display); color: #FFF3D6; }
.vbtns { display: flex; gap: var(--s2); }
.vbtns .b { min-width: 104px; font-size: 16px; }

/* ---------- phones and tall windows: recomposed ---------- */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root { --u: 1vw; }
  .scene { height: auto; min-height: 0; padding: 104vw 0 var(--s4); display: flex; flex-direction: column; }
  .tag { order: 1; } .always { order: 2; }
  .logo { width: 56vw; top: 2vw; left: 2vw; }
  .toe { width: 140vw; left: -50vw; top: 2vw; bottom: auto; }
  .piece { top: auto; bottom: auto; top: calc(108vw - var(--ph)); }
  .hint { width: 130px; left: 4%; bottom: 40%; }
  .curtains { width: 110vw; }
  .room { width: auto; height: 100%; }
  .nightglow { display: none; }
  .rays { width: 40vw; margin: -20vw 0 0 -20vw; }
  .orbit i { width: 9vw; margin: -4.5vw; }
  .tag { position: relative; left: auto; bottom: auto; width: calc(100% - 2 * var(--s2)); max-width: 620px; min-width: 0; margin: 0 auto; aspect-ratio: 1300/1041; transform-origin: 50.8% 16%; }
  .tagbody { inset: 25% 7% 6% 7%; gap: 2.5%; }
  [data-ca] { font-size: clamp(16px, 3.7cqw, 18px); }
  .b { font-size: clamp(16px, 4.2cqw, 22px); }
  .lime { font-size: clamp(18px, 5.4cqw, 28px); min-height: clamp(52px, 15cqw, 84px); padding-inline: .4em; white-space: nowrap; }
  .always { position: relative; left: auto; top: auto; width: calc(100% - 2 * var(--s2)); max-width: 620px; margin: var(--s3) auto 0; min-width: 0; }
  .always span { font-size: clamp(16px, 4.2vw, 22px); padding-inline: 2em; }
  .shout { width: 74vw; margin-left: -37vw; left: 62vw; top: 16vw; }
  .shout span { font-size: clamp(24px, 8vw, 60px); }
  .memes { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s2); }
  .memes b { font-size: clamp(16px, 3.8vw, 26px); }
  .suspects { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); }
  .suspects img { height: clamp(150px, 44vw, 280px); }
  .riskplate .risk { padding-inline: 1.6em; }
}
@media (min-width: 620px) and (max-width: 900px) { .memes, .suspects { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px) { .tag { aspect-ratio: 1300/1230; } .tagbody { inset: 22% 7% 5% 7%; } .copy { min-width: 76px; padding-inline: .6em; } .lime { font-size: 16px; } }
@media (max-width: 340px) { .memes, .suspects { grid-template-columns: 1fr; } .memes b { font-size: 22px; } }
@media (min-width: 901px) and (min-aspect-ratio: 1/1) and (max-width: 1180px) { .memes { grid-template-columns: repeat(3, 1fr); } }

/* 404 */
.gone-page { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.gone-page .toe { z-index: 2; }
.gone-page .gone-piece { position: absolute; right: -8vw; bottom: calc(5 * var(--u)); height: calc(46 * var(--u)); width: auto; z-index: 1; }
.gone-card { position: absolute; z-index: 5; left: 50%; bottom: var(--s4); transform: translateX(-50%); width: min(620px, 100% - 2 * var(--s2)); aspect-ratio: 1300/595; display: grid; place-items: center; container-type: inline-size; }
.gone-card > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gone-card > div { position: relative; padding: 0 7% 0 18%; display: flex; flex-direction: column; gap: 3cqw; align-items: center; text-align: center; color: var(--ink); }
.gone-card h1 { margin: 0; font: 400 clamp(22px, 6cqw, 40px)/1.05 var(--font-display); }
@media (prefers-reduced-motion: reduce) { .curtains { animation: none; } main.hit { animation: none; } }