/* furgesson · music, humans & sunshine
   Seven in the morning: haze, soft light, film grain. One sun, one record. */

:root {
  --haze: #d9d3e6;      /* lilac morning sky */
  --blush: #ecd6d0;
  --peach: #ffc49a;
  --sun: #ffd36e;
  --rose: #f6a6a0;
  --dust: #a9bcd6;      /* dusty blue */
  --sage: #b9c7a0;
  --mauve: #c98ba6;
  --ink: #2a1f2d;       /* deep plum for text */
  --paper: #fbf6ef;
  --vinyl: #17121b;
  --glass: rgba(251, 246, 239, .55);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --tag: 'Sedgwick Ave Display', 'Marker Felt', cursive;
  --soft: 'SOFT' 100, 'WONK' 1, 'opsz' 144;

  --W: 100vw;
  --H: 100vh;
  --deck: min(78vmin, 720px);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --spring: cubic-bezier(.3, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--haze); color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body { touch-action: none; }
body.has-cursor, body.has-cursor * { cursor: none !important; }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

.ui { font-family: var(--sans); font-weight: 500; font-size: 12.5px; letter-spacing: .05em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 5px; border-radius: 4px; }

/* ---------- layers ---------- */

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#dawn { z-index: 0; }
.haze { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.o-rose { width: 52vmax; height: 52vmax; left: -12vmax; top: 38%; background: var(--rose); animation: drift 26s ease-in-out infinite; }
.o-blue { width: 46vmax; height: 46vmax; right: -14vmax; top: -16vmax; background: var(--dust); animation: drift 32s ease-in-out infinite reverse; }
.o-peach { width: 40vmax; height: 40vmax; right: 6vmax; bottom: -22vmax; background: var(--peach); animation: drift 22s ease-in-out infinite; opacity: .6; }
@keyframes drift { 50% { transform: translate(6vmax, -4vmax) scale(1.12); } }

#sunlight {
  position: fixed; z-index: 2; pointer-events: none; left: 0; top: 0;
  width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 150, .95) 0%, rgba(255, 211, 110, .55) 28%, rgba(255, 196, 154, .15) 52%, transparent 68%);
  transform: translate3d(var(--sx, 50vw), var(--sy, 40vh), 0);
}
body.is-asphalt #sunlight, body.is-44 #sunlight {
  z-index: 9; mix-blend-mode: overlay; width: 900px; height: 900px; margin: -450px 0 0 -450px;
  background: radial-gradient(circle, rgba(255, 226, 174, .6) 0%, rgba(255, 168, 110, .22) 22%, rgba(255, 140, 90, .06) 45%, transparent 62%);
}
#dust { z-index: 3; pointer-events: none; }
#concrete { z-index: 8; transition: opacity .6s; }
body:not(.is-asphalt):not(.is-44) #concrete { opacity: 0; pointer-events: none; }

.grain {
  position: fixed; inset: -50%; z-index: 10; pointer-events: none; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- cursor: a small warm sun ---------- */

@property --cs { syntax: '<number>'; inherits: false; initial-value: 1; }
#cursor {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff6dc; box-shadow: 0 0 0 1px rgba(255, 211, 110, .6), 0 0 18px 6px rgba(255, 211, 110, .75), 0 0 60px 16px rgba(255, 196, 154, .4);
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs));
  transition: --cs .3s;
}
body.has-cursor #cursor { display: block; }
body.is-hot #cursor, body.is-link #cursor { --cs: 2.2; }
body.is-44 #cursor { background: #ff6b6b; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- intro ---------- */

.hint {
  position: fixed; z-index: 11; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; justify-items: center; gap: 18px; pointer-events: none; color: var(--paper); transition: opacity .8s;
}
.hint-sun { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff6dc 0 40%, var(--sun) 70%); box-shadow: 0 0 60px 14px rgba(255, 210, 120, .5); animation: breathe 2.6s ease-in-out infinite; }
.hint-text { opacity: .85; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.hint.is-moving .hint-sun { opacity: 0; transform: scale(.4); transition: .6s; }
.hint.is-moving .hint-text { opacity: 0; transition: opacity .6s 1s; }
@keyframes breathe { 50% { transform: scale(1.16); box-shadow: 0 0 90px 26px rgba(255, 210, 120, .35); } }

.skip {
  position: fixed; z-index: 11; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  color: var(--paper); opacity: .5; padding: 10px 14px; transition: opacity .3s;
}
.skip:hover, .skip:focus-visible { opacity: 1; }
body:not(.is-asphalt) .hint, body:not(.is-asphalt) .skip { opacity: 0; pointer-events: none; }

/* ---------- the deck ---------- */

.deck {
  --x: calc(var(--W) / 2);
  --y: calc(var(--H) * .48);
  --s: 1;
  position: fixed; z-index: 6; left: 0; top: 0;
  width: var(--deck); height: var(--deck);
  transform: translate(var(--x), var(--y)) translate(-50%, -50%) scale(var(--s));
  transition: transform 1.1s var(--ease), opacity 1s;
  touch-action: none;
}
body.is-asphalt .deck { --y: calc(var(--H) * 1.1); --s: .55; opacity: 0; pointer-events: none; }
body.is-rising .deck { transition: transform 2.4s cubic-bezier(.2, .8, .2, 1), opacity 1.6s; }
body[data-world] .deck {
  --s: .2;
  --x: calc(24px + var(--deck) * .1);
  --y: calc(var(--H) - 24px - var(--deck) * .1);
}
.deck svg { width: 100%; height: 100%; overflow: visible; display: block; }
.deck .disc { filter: drop-shadow(0 40px 50px rgba(42, 31, 45, .35)) drop-shadow(0 6px 10px rgba(42, 31, 45, .25)); }
.deck .band { fill: transparent; transition: fill .4s; }
.deck .band.is-hover { fill: var(--c); fill-opacity: .16; }
.deck .band.is-active { fill: var(--c); fill-opacity: .08; }
.deck .arm { transition: opacity .5s; }
body[data-world] .deck .arm { opacity: 0; }
body[data-world] .deck:hover { --s: .23; }

.sheen {
  position: absolute; inset: 1.6%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 30deg, transparent 0 6%, rgba(217, 211, 230, .22) 11%, rgba(255, 196, 154, .16) 15%, transparent 20% 50%, rgba(169, 188, 214, .18) 56%, rgba(246, 166, 160, .12) 60%, transparent 65%);
  mask: radial-gradient(circle, transparent 41.5%, #000 42%, #000 69%, transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 41.5%, #000 42%, #000 69%, transparent 70%);
}

.deck-cue {
  position: absolute; left: 50%; top: 100%; translate: -50% 22px; white-space: nowrap;
  font-family: var(--display); font-style: italic; font-variation-settings: var(--soft); font-size: 19px;
  color: var(--ink); opacity: 0; transition: opacity .8s 1.8s;
}
body.is-sand:not([data-world]) .deck-cue { opacity: .75; }
body.is-playing .deck-cue { opacity: 0 !important; transition-delay: 0s; }

.deck-tip {
  position: fixed; z-index: 12; left: 0; top: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0) translate(28px, -50%);
  opacity: 0; transition: opacity .25s;
}
.deck-tip.is-on { opacity: 1; }
.deck-tip span {
  font-family: var(--display); font-style: italic; font-variation-settings: var(--soft); font-size: 26px; color: var(--ink);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 2px 16px 5px; border-radius: 99px; box-shadow: 0 10px 30px rgba(42, 31, 45, .12), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.deck-tip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px 3px var(--c); }

.worlds-nav {
  position: fixed; z-index: 7; left: 50%; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  display: none; gap: 8px; flex-wrap: wrap; justify-content: center; width: calc(100% - 32px);
}
.worlds-nav a { text-decoration: none; padding: 9px 14px; border-radius: 99px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.is-coarse.is-sand:not([data-world]) .worlds-nav { display: flex; }
.worlds-nav:focus-within { display: flex !important; }

/* ---------- worlds ---------- */

#worlds { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.world {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .7s, visibility 0s .7s;
  display: grid; place-items: center; overflow: hidden;
}
.world.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .9s .35s, visibility 0s; }
.world-tag {
  position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 26px; margin: 0;
  font-family: var(--display); font-style: italic; font-variation-settings: var(--soft); font-size: 22px; letter-spacing: 0; font-weight: 500; color: var(--ink);
}

.elsewhere, .legal { position: fixed; z-index: 7; display: flex; gap: 20px; transition: opacity .8s; }
.elsewhere { right: 26px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.legal { right: 26px; top: calc(22px + env(safe-area-inset-top, 0px)); opacity: .55; }
.elsewhere a, .legal a { text-decoration: none; padding: 6px 0; }
@media (hover: hover) { .elsewhere a:hover, .legal a:hover { text-decoration: underline; text-underline-offset: 4px; } }
body.is-asphalt .elsewhere, body.is-asphalt .legal { opacity: 0; pointer-events: none; }

/* mixes: three films of the sun going down */
.world-mixes { overflow-y: auto; touch-action: pan-y; }
.mixes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px);
  width: min(1180px, calc(100% - 52px)); align-items: start; padding-block: 90px 110px;
}
.mix { display: grid; gap: 14px; min-width: 0; transform: translateY(var(--lift, 0)); }
.mix:nth-child(2) { --lift: 34px; }
.mix:nth-child(3) { --lift: -18px; }
.mix-film {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; display: block; width: 100%; text-align: left;
  box-shadow: 0 30px 60px -24px rgba(42, 31, 45, .45);
}
.mix-film img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.78) sepia(.14) brightness(1.04); transform: scale(1.02); transition: transform 1.4s var(--ease), filter .8s; }
.mix-film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(217, 211, 230, .15), transparent 40%, rgba(255, 196, 154, .5)); mix-blend-mode: soft-light; pointer-events: none; }
.mix-film:hover img, .mix-film:focus-visible img { transform: scale(1.08); filter: saturate(1) sepia(0) brightness(1.02); }
.mix-play {
  position: absolute; left: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 10px; border-radius: 99px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink);
}
.mix-play::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 4px; }
.mix-title { margin: 6px 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: var(--soft); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.mix-meta { display: flex; gap: 14px; flex-wrap: wrap; opacity: .7; }
.mix-links { display: flex; gap: 18px; }
.mix-links a { text-decoration: none; border-bottom: 1px solid rgba(42, 31, 45, .3); padding-bottom: 2px; }
.mix-links a:hover { border-color: var(--ink); }

.player {
  position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; padding: 60px 16px;
  background: rgba(42, 31, 45, .55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.player-frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--vinyl); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-close { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: 26px; color: var(--paper); padding: 8px 4px; }

/* the mirror */
.mirror { width: min(1000px, 100%); height: 100%; position: relative; }
.q {
  position: absolute; left: 50%; top: clamp(76px, 13vh, 140px); translate: -50% 0; width: min(860px, calc(100% - 48px));
  margin: 0; text-align: center; font-family: var(--display); font-style: italic; font-weight: 400;
  font-variation-settings: var(--soft); font-size: clamp(32px, 5.4vw, 68px); line-height: 1; letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance; transition: opacity .6s, transform .8s var(--ease);
}
.q.is-out { opacity: 0; transform: translateY(-20px); }
.q.is-in { opacity: 0; transform: translateY(24px); }
.platter {
  position: absolute; left: 50%; top: 50%; translate: -50% -38%;
  width: clamp(170px, 29vmin, 280px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 246, 239, .5), rgba(251, 246, 239, .12) 70%);
  box-shadow: inset 0 0 0 1px rgba(42, 31, 45, .18), 0 0 0 10px rgba(251, 246, 239, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; transition: transform .4s var(--spring), box-shadow .3s;
}
.platter::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .45; }
.platter.is-near { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 18px rgba(255, 211, 110, .35); }
.platter .placed { position: absolute; inset: 0; animation: spin 1.8s linear infinite; }
.reaction {
  position: absolute; left: 50%; top: calc(50% + clamp(100px, 17vmin, 160px) + 16px); translate: -50% 0; margin: 0; white-space: nowrap;
  font-family: var(--display); font-style: italic; font-variation-settings: var(--soft); font-size: 22px; color: var(--ink); transition: opacity .5s;
}
.answers { position: absolute; left: 50%; bottom: clamp(70px, 11vh, 120px); translate: -50% 0; display: flex; gap: clamp(14px, 4vw, 44px); justify-content: center; }
.answer { display: grid; justify-items: center; gap: 10px; touch-action: none; }
.answer .mini { width: clamp(64px, 11vmin, 104px); aspect-ratio: 1; animation: bob 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); filter: drop-shadow(0 12px 14px rgba(42, 31, 45, .25)); }
.answer:hover .mini, .answer:focus-visible .mini { animation-play-state: paused; transform: scale(1.1); }
.answer .ui { opacity: .8; }
.answer.is-gone { opacity: 0; transform: scale(.6); transition: .4s; pointer-events: none; }
.answers.is-leaving .answer { opacity: 0; transform: translateY(30px); transition: .5s; }
@keyframes bob { 50% { translate: 0 -8px; } }
.ghost { position: fixed; z-index: 25; left: 0; top: 0; pointer-events: none; width: 104px; height: 104px; margin: -52px 0 0 -52px; transform: translate3d(var(--gx), var(--gy), 0) rotate(var(--gr, 0deg)) scale(1.12); }
.ghost.is-flying { transition: transform .55s var(--ease); }
.progress { position: absolute; left: 50%; top: clamp(34px, 6vh, 60px); translate: -50% 0; display: flex; gap: 8px; }
.progress i { width: 24px; height: 2px; border-radius: 2px; background: rgba(42, 31, 45, .2); transition: background .4s; }
.progress i.is-done { background: var(--ink); }
.burst { position: fixed; z-index: 24; pointer-events: none; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; }

.result { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; padding: 70px 24px 96px; text-align: center; }
.result-disc { position: relative; width: clamp(220px, 40vmin, 380px); aspect-ratio: 1; animation: spin 3.6s linear infinite; filter: drop-shadow(0 30px 40px rgba(42, 31, 45, .35)); }
.result-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.result-label { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; }
.result-label .blend { position: absolute; inset: -25%; background: conic-gradient(var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)); filter: blur(14px); }
.result-label .mark { position: absolute; width: 22%; aspect-ratio: 1; translate: -50% -50%; fill: var(--ink); opacity: .85; }
.result-label .you { position: absolute; left: 50%; top: 50%; translate: -50% -52%; font-family: var(--display); font-style: italic; font-weight: 600; font-variation-settings: var(--soft); font-size: clamp(20px, 3.6vmin, 34px); color: var(--ink); }
.result-text { margin: 0; max-width: 680px; font-family: var(--display); font-variation-settings: 'SOFT' 100, 'opsz' 48; font-size: clamp(22px, 3vw, 34px); line-height: 1.18; color: var(--ink); text-wrap: balance; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pill { padding: 12px 20px; border-radius: 99px; background: var(--ink); color: var(--paper); text-decoration: none; }
.pill.ghosty { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(42, 31, 45, .15); }

/* manifesto */
.world-manifesto { transition: background-color 1.4s, opacity .7s, visibility 0s .7s; }
.world-manifesto.is-open { transition: background-color 1.4s, opacity .9s .35s, visibility 0s; cursor: pointer; }
.manifesto { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.m-glow { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: var(--glow, var(--sun)); filter: blur(60px); opacity: .7; transition: background 1.4s; }
.m-line { position: absolute; width: min(1100px, calc(100% - 48px)); text-align: center; }
.m-line p { margin: 0; font-family: var(--display); font-weight: 350; font-variation-settings: 'SOFT' 100, 'opsz' 144; font-size: clamp(42px, 8.6vw, 124px); line-height: .96; color: var(--fg); letter-spacing: -.025em; text-wrap: balance; }
.m-line p em { font-style: italic; font-variation-settings: var(--soft); }
.m-word { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(10px); transition: opacity .9s, transform 1.1s var(--spring), filter .9s; transition-delay: calc(var(--w) * 90ms + 200ms); }
.m-line.is-on .m-word { opacity: 1; transform: none; filter: none; }
.m-line.is-off .m-word { opacity: 0; transform: translateY(-.3em); filter: blur(12px); transition-delay: calc(var(--w) * 30ms); }
.m-dots { position: absolute; bottom: clamp(84px, 12vh, 110px); left: 50%; translate: -50% 0; display: flex; gap: 10px; }
.m-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); opacity: .3; transition: opacity .3s, transform .3s; }
.m-dots button.is-on { opacity: 1; transform: scale(1.4); }
.m-next { position: absolute; bottom: clamp(40px, 7vh, 62px); left: 50%; translate: -50% 0; color: var(--fg); opacity: .6; }

/* booking: a postcard from the morning */
.postcard-wrap { perspective: 1400px; display: grid; justify-items: center; gap: 22px; padding: 0 16px; }
.postcard {
  width: min(760px, calc(100vw - 32px)); aspect-ratio: 3 / 2; display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--paper); color: var(--ink); text-decoration: none; border-radius: 6px;
  box-shadow: 0 50px 90px -34px rgba(42, 31, 45, .55), inset 0 0 0 1px rgba(42, 31, 45, .06);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-3deg);
  transition: transform .4s var(--spring); position: relative; overflow: hidden;
}
.postcard::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 0% 100%, rgba(255, 196, 154, .35), transparent 70%); pointer-events: none; }
.postcard::after { content: ''; position: absolute; left: 52.4%; top: 10%; bottom: 10%; width: 1px; background: rgba(42, 31, 45, .2); }
.postcard-left { position: relative; padding: clamp(20px, 4vw, 46px); display: grid; align-content: space-between; }
.postcard-line { margin: 0; font-family: var(--display); font-weight: 350; font-variation-settings: 'SOFT' 100, 'opsz' 144; font-size: clamp(40px, 7vw, 84px); line-height: .9; letter-spacing: -.02em; }
.postcard-line em { font-style: italic; font-variation-settings: var(--soft); color: #d9735f; }
.postcard-small { margin: 0; line-height: 1.7; opacity: .65; font-size: clamp(10px, 1.4vw, 12px); }
.postcard-right { position: relative; padding: clamp(20px, 4vw, 46px); display: grid; align-content: end; }
.stamp {
  position: absolute; top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px);
  width: clamp(64px, 11vw, 104px); aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--haze), var(--peach));
  display: grid; place-items: center; align-content: center; gap: 6px; color: var(--ink);
  outline: 6px dotted var(--paper); outline-offset: -4px; rotate: 4deg;
}
.stamp .ui { font-size: 9px; }
.stamp-sun { width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6dc 0 35%, var(--sun) 75%); box-shadow: 0 0 16px 4px rgba(255, 211, 110, .7); }
.postmark {
  position: absolute; top: clamp(30px, 6vw, 60px); right: clamp(50px, 10vw, 100px);
  width: clamp(80px, 14vw, 130px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(42, 31, 45, .4);
  display: grid; place-items: center; text-align: center; font-size: 8px; line-height: 1.6; color: rgba(42, 31, 45, .55); rotate: -18deg; padding: 14px;
}
.postcard-to { display: grid; gap: clamp(10px, 2vw, 18px); }
.postcard-label { opacity: .5; }
.postcard-mail { font-family: var(--display); font-style: italic; font-variation-settings: var(--soft); font-size: clamp(22px, 3.4vw, 38px); line-height: 1; overflow-wrap: anywhere; transition: color .3s; }
.postcard-rule { height: 1px; background: rgba(42, 31, 45, .2); }
.postcard:hover .postcard-mail { color: #d9735f; }
.copied { margin: 0; min-height: 1em; }

/* ---------- 44 (you know) ---------- */

.tag44 {
  position: fixed; z-index: 12; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
  font-family: var(--tag); font-size: min(50vw, 58vh); line-height: 1; color: #ff5b5b;
  filter: url(#spray) drop-shadow(0 0 22px rgba(255, 91, 91, .45));
  opacity: 0; transform: scale(1.3) rotate(-8deg); transition: opacity .25s, transform .5s var(--spring);
}
body.is-44 .tag44 { opacity: .92; transform: rotate(-8deg); }
body.is-44 .deck, body.is-44 .world.is-open, body.is-44 .elsewhere { filter: grayscale(1); }

.noscript { position: fixed; inset: 0; z-index: 40; margin: 0; display: grid; place-content: center; text-align: center; background: var(--haze); font-family: var(--display); font-size: 28px; padding: 24px; }

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .mixes { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100% - 32px)); padding-block: 80px 160px; }
  .mix:nth-child(n) { --lift: 0; }
}
@media (max-width: 640px) {
  .elsewhere { left: 16px; right: 16px; justify-content: center; gap: 16px; }
  .legal { right: 16px; }
  .world-tag { left: 18px; }
  .deck-tip { display: none; }
  body[data-world] .deck { --x: calc(16px + var(--deck) * .1); --y: calc(var(--H) - 60px - var(--deck) * .1); --s: .22; }
  .answers { gap: 10px; bottom: 150px; }
  .progress { top: 60px; }
  .q { top: 92px; }
  .reaction { white-space: normal; text-align: center; width: calc(100% - 48px); }
  .postmark { display: none; }
  .postcard { grid-template-columns: 1fr; aspect-ratio: auto; }
  .postcard::after { display: none; }
  .postcard-right { min-height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .hint-sun, .answer .mini, .orb { animation: none; }
}