/* Overlooked — the landing page. Made of the app's own materials: felt, bone, brass, Didot,
   the perforated plate, the holo foil and the postmark. */

@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --b { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --wipe { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  --felt: #18231E; --felt-2: #141D19; --baize: #22322B; --deep: #0E1512;
  --bone: #EBE4D3; --bone-dim: #A9B3A6; --bone-faint: rgba(235, 228, 211, .14);
  --brass: #C9A24B; --brass-hi: #F1DA92; --brass-lo: #7E5F1E; --postmark: #2C3E73;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --spring: cubic-bezier(.3, 1.25, .45, 1);
  --rainbow: repeating-linear-gradient(112deg, #ff2d6f 0%, #ffd23d 7%, #3dffb0 14%, #3db8ff 21%, #b13dff 28%, #ff2d6f 35%);
  --pastel: repeating-linear-gradient(112deg, #ffb3c7 0%, #ffe9a3 7%, #b6ffd9 14%, #a9d8ff 21%, #d9b8ff 28%, #ffb3c7 35%);
  --noise: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gutter: clamp(20px, 5vw, 64px);
  --px: .5; --py: .5;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis: none; scroll-behavior: smooth; background: var(--felt); overflow-x: clip; }
body {
  margin: 0; background: var(--felt); color: var(--bone);
  font-family: var(--sans); font-size: 17px; line-height: 1.6; font-weight: 380;
  overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--brass); color: var(--felt); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0 0 22px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.015em; }
em { font-style: italic; }
p { margin: 0; }
.body { color: var(--bone-dim); max-width: 52ch; margin-top: 24px; }
.body.dim { opacity: .75; font-size: 15px; }

/* the paper grain over everything, as the demos */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--noise); opacity: .11; mix-blend-mode: soft-light; }
/* on a phone the grain is laid on, not blended: a blended layer over a scrolling page is re-blended every frame
   in Safari. At .07 it measures the same (mean tone within a level, the same grain) */
@media (pointer: coarse) { .grain { mix-blend-mode: normal; opacity: .07; } }

/* ---------- reveal on scroll (only when JS runs; content is visible otherwise) ---------- */
.js .reveal { opacity: 0; translate: 0 18px; transition: opacity 1s var(--ease), translate 1s var(--ease); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* ---------- pills, links ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: 99px; padding: 12px 20px; border: 1px solid var(--bone); background: var(--bone); color: var(--felt);
  cursor: pointer; transition: transform .15s var(--ease), background .3s, box-shadow .4s var(--ease); white-space: nowrap;
}
.pill:hover { background: #fff8e8; box-shadow: 0 0 0 6px rgba(235, 228, 211, .08); }
.pill:active { transform: scale(.97); }
.pill.big { padding: 17px 28px; font-size: 12.5px; }
.textlink { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--bone-dim); transition: color .3s; }
.textlink:hover { color: var(--bone); }

/* ---------- header: a wordmark that looks back, and two small glyphs ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) calc(var(--gutter) - 10px) 14px; pointer-events: none;
}
.nav::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(rgba(24, 35, 30, .92) 40%, rgba(24, 35, 30, 0)); opacity: 0; transition: opacity .6s; }
.nav.solid::before { opacity: 1; }
.nav > * { pointer-events: auto; }
.nav .sound { justify-self: start; }
.nav .tf { justify-self: end; }

.mark { position: relative; display: inline-block; text-decoration: none; color: var(--bone); font-family: var(--serif); font-size: 31px; line-height: 1; letter-spacing: -.01em; padding: 6px 10px; -webkit-tap-highlight-color: transparent; }
.mk { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* a little more room round the full stop, for a fingertip (it bounces when it's touched) */
.mark::after { content: ""; position: absolute; right: -10px; bottom: -6px; width: 30px; height: calc(100% + 6px); }
.mk-dot { color: var(--brass); transition: color .4s; }
@media (hover: hover) { .mark:hover .mk-dot { color: var(--brass-hi); } }
.mk-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.eyes-hd { display: inline-flex; gap: .015em; margin: 0 .01em; }
/* the o's, drawn: thick at the sides, thin at top and bottom, like the serif's own o.
   main.js moves the pupil (--ex, --ey), sizes it (--ps), lowers the lid (--lid, 0 open … 1 shut) and raises
   the lower lid (--lo). The lids are curved, as lids are (a flat bar across an o would be an e): the upper
   one dips at the middle, the lower one arches, and they slide rather than stretch, so the curve holds. */
.eye-hd { position: relative; display: inline-block; width: .43em; height: .47em; border-radius: 50%; border-style: solid; border-color: currentColor;
  border-width: .034em .062em; translate: 0 .005em; overflow: hidden; background: var(--felt); transition: scale .35s var(--spring); }
.eye-hd .pupil { position: absolute; left: 50%; top: 50%; width: var(--ps, .15em); height: var(--ps, .15em); border-radius: 50%; background: var(--brass-hi);
  translate: calc(-50% + var(--ex, 0px)) calc(-50% + var(--ey, 0px)); box-shadow: 0 0 .18em rgba(241, 218, 146, .45); }
.eye-hd .lid, .eye-hd::after { position: absolute; left: -.02em; right: -.02em; top: -1px; bottom: -1px; z-index: 1; background: var(--felt); }
.eye-hd .lid { border-bottom: .03em solid currentColor; border-radius: 0 0 50% 50% / 0 0 .14em .14em; translate: 0 calc((var(--lid, 0) - 1) * 100%); }
.eye-hd::after { content: ""; border-top: .026em solid currentColor; border-radius: 50% 50% 0 0 / .16em .16em 0 0; translate: 0 calc((1 - var(--lo, 0)) * 100%); }
.mark:active .eye-hd { scale: .9; }

/* the full stop, alive (main.js draws it once the word is measured; until then it is brass type) */
.mk-fx { position: absolute; inset: 0; pointer-events: none; }
.mark.mk-live .mk-dot { color: transparent; }
.mk-bdot { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--brass); visibility: hidden; transition: background-color .4s; }
.mark.mk-live .mk-bdot { visibility: visible; }
@media (hover: hover) { .mark:hover .mk-bdot { background: var(--brass-hi); } }
.mk-feet, .mk-chain { position: absolute; left: 0; top: 0; overflow: visible; }
.mk-feet { color: var(--bone); }
.mk-chain { opacity: 0; }
.mk-chain path { fill: none; stroke-linecap: round; }
.mk-chain .bd { stroke: var(--brass); }
.mk-chain .bh { stroke: #FFF3C9; stroke-opacity: .55; }
.mk-chain .ey { fill: none; stroke: #DDB85F; }
/* the loupe: a brass rim, and glass that shows what the naked eye misses (an iris, the weave of the felt) */
.mk-loupe { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; visibility: hidden; }
.mk-loupe.on { visibility: visible; will-change: transform, opacity; }
.mk-lens { position: absolute; inset: 8.5%; border-radius: 50%; overflow: hidden; background: var(--felt); }
.mk-lens::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--noise); background-size: 70px; opacity: .2; mix-blend-mode: screen; pointer-events: none; }
.mk-zoom { position: absolute; inset: 0; z-index: 1; }
.mk-clone { position: absolute; left: 0; top: 0; }
.mk-clone .eye-hd .pupil { background: radial-gradient(circle closest-side, #0A100D 0 36%, #5b430f 40%, #F1DA92 52%, #DDB85F 70%, #8A6A24 90%, #5b430f 100%); box-shadow: 0 0 .2em rgba(241, 218, 146, .5); }
.mk-clone .eye-hd .pupil::after { content: ""; position: absolute; left: 22%; top: 18%; width: 24%; height: 24%; border-radius: 50%; background: #FFF9E8; opacity: .9; }
.mk-glass { position: absolute; inset: 0; z-index: 3; border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgba(255, 250, 235, .16), rgba(255, 250, 235, 0) 34%), radial-gradient(circle, rgba(0, 0, 0, 0) 58%, rgba(4, 8, 6, .5) 100%);
  box-shadow: inset 0 0 0 .5px rgba(241, 218, 146, .28); }
.mk-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .55)); }

.glyph { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; background: none; border: 0; cursor: pointer; color: var(--bone-dim); text-decoration: none; transition: color .3s; }
.glyph:hover, .glyph:focus-visible { color: var(--bone); }
.glyph .tip { font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: 0; translate: -6px 0; transition: opacity .35s var(--ease), translate .45s var(--ease); pointer-events: none; }
.glyph.tf .tip { translate: 6px 0; order: -1; }
.glyph:hover .tip, .glyph:focus-visible .tip { opacity: 1; translate: 0 0; }
.bars { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.bars i { width: 2px; height: calc(2px + var(--l, 0) * 14px); background: currentColor; border-radius: 1px; transition: height .08s linear; }
.sound[aria-pressed="true"] { color: var(--brass-hi); }
.tf-stamp { display: block; width: 19px; height: 23px; transition: transform .5s var(--spring); }
.tf-stamp svg { width: 100%; height: 100%; overflow: visible; }
.tf-edge { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 0 3.2; stroke-linecap: round; }
.tf-arrow { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring); }
.tf:hover .tf-stamp { transform: translateY(-2px) rotate(-8deg); }
.tf:hover .tf-arrow { transform: translate(1.5px, -1.5px); }
.tf.nudge .tf-stamp { animation: nudge .9s var(--spring); }
@keyframes nudge { 0% { transform: none; } 30% { transform: translateY(-3px) rotate(-10deg); } 60% { transform: translateY(0) rotate(4deg); } 100% { transform: none; } }
@media (max-width: 520px) { .mark { font-size: 27px; } .glyph:not(.hglyph) .tip { display: none; } }

/* ---------- the lens cursor ---------- */
.lens { position: fixed; left: 0; top: 0; z-index: 100; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; border-radius: 50%;
  border: 1px solid rgba(235, 228, 211, .7); mix-blend-mode: difference; opacity: 0; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), border-radius .45s var(--ease), border-color .3s, opacity .3s; }
.lens i { position: absolute; width: 9px; height: 9px; border: 1.5px solid #EBE4D3; opacity: 0; transition: opacity .3s; }
.lens i:nth-child(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.lens i:nth-child(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.lens i:nth-child(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.lens i:nth-child(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.lens.on { opacity: 1; }
.lens.on.aim { opacity: 0; transition: opacity .15s; }
.lens.focus { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 4px; border-color: transparent; }
.lens.focus i { opacity: 1; }
.lens.press { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
@media (hover: none), (pointer: coarse) { .lens { display: none; } }
@media (hover: hover) and (pointer: fine) { .has-lens, .has-lens a, .has-lens button, .has-lens [data-lens] { cursor: none; } .has-lens input { cursor: text; } }

/* ---------- fit: fixed-size plates scaled to their column ---------- */
.fit { position: relative; width: 100%; }
.fit > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.tiltbox { perspective: 900px; }
/* main.js writes each plate's tilt as its own transform (a variable here would be inherited by everything in the card) */
.tiltbox > * { transition: transform .1s linear; transform-style: preserve-3d; }

/* =============================== THE PLATE =============================== */
.card {
  position: relative; width: 300px; height: 444px; transform-style: preserve-3d;
  --stock: #BDC4A0; --deep: #232E16; --ink: #1F2A17; --ink2: #4C5A38; --tint: #C9DB9C; --s: 12px;
  -webkit-mask: linear-gradient(#000 0 0) center/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat, radial-gradient(circle calc(var(--s)*.3) at 50% 50%, #0000 96%, #000) calc(var(--s)/-2) calc(var(--s)/-2)/var(--s) var(--s);
  mask: linear-gradient(#000 0 0) center/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat, radial-gradient(circle calc(var(--s)*.3) at 50% 50%, #0000 96%, #000) calc(var(--s)/-2) calc(var(--s)/-2)/var(--s) var(--s);
}
.flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.34, 1.28, .5, 1); }
.card.flipped .flipper { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); }
.surface { position: absolute; inset: 0; isolation: isolate; }
.paper { position: absolute; inset: 0; background: var(--stock); overflow: hidden; }
.back .paper { background: var(--deep); }
.spec { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(-74px) scale(.92); transition: filter .9s ease, transform .12s linear; }
.grain-p { position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .3; pointer-events: none; }
.foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity .9s ease; background: var(--rainbow); background-size: 260% 260%;
  background-position: calc(var(--px)*100%) calc(var(--py)*100%);
  -webkit-mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 68%, #000 100%); mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 68%, #000 100%); }
.sparkle { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(circle, #fff 0 1px, transparent 1.6px) 0 0/14px 14px, radial-gradient(circle, #fff 0 .8px, transparent 1.4px) 7px 5px/22px 22px;
  -webkit-mask: linear-gradient(calc(var(--px)*200deg + 10deg), transparent 34%, #000 50%, transparent 66%); mask: linear-gradient(calc(var(--px)*200deg + 10deg), transparent 34%, #000 50%, transparent 66%); }
.on.tier-holo .front .foil { opacity: .6; }
.on.tier-holo .front .sparkle { opacity: .7; }
.holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; filter: brightness(.6) saturate(1.3); opacity: .55; background: var(--rainbow); background-size: 260% 260%; background-position: calc((1 - var(--px))*100%) calc(var(--py)*100%); }
.tier-gilt .holo { opacity: .6; -webkit-mask: linear-gradient(118deg, transparent 30%, #000 42% 56%, transparent 68%); mask: linear-gradient(118deg, transparent 30%, #000 42% 56%, transparent 68%); }
.tier-matte .holo { display: none; }
.glare { position: absolute; inset: 6px; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at calc(var(--px)*100%) calc(var(--py)*100%), rgba(255, 255, 255, .6), transparent 48%); }
.sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(calc(215deg + (var(--px) - .5)*70deg + (var(--py) - .5)*-50deg), rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 40%, rgba(0, 0, 0, .08) 60%, rgba(0, 0, 0, .5) 100%); }
.cbody { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 28px 28px 24px; color: var(--ink); }
.front .k { color: var(--ink2); }
.top, .foot-row-c, .card .foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; white-space: nowrap; }
.card .foot { margin-top: auto; }
.card .foot > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.card .name { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: .92; letter-spacing: -.012em; margin: 238px 0 0; min-height: 29px; }
.latin { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink2); margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule { height: 1px; background: currentColor; opacity: .25; margin: 13px 0 0; }
.gilt { position: absolute; inset: 16px; border: 1.5px solid; pointer-events: none; opacity: 0; transition: opacity .9s ease;
  border-image: linear-gradient(calc(var(--px)*300deg + var(--py)*120deg), var(--brass-lo), var(--brass-hi) 45%, var(--brass-lo) 60%, var(--brass-hi)) 1; }
.on.tier-gilt .gilt, .on.tier-holo .gilt { opacity: 1; }
.seal { position: absolute; right: 26px; top: 226px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; opacity: 0; scale: .6; transition: opacity .6s ease, scale .8s var(--spring);
  background: conic-gradient(from calc(var(--px)*360deg), var(--brass-lo), var(--brass-hi), #fff6cf, var(--brass), var(--brass-lo), var(--brass-hi), var(--brass), var(--brass-lo));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(126, 95, 30, .55), inset 0 0 0 4px rgba(255, 246, 207, .7); }
.on.tier-gilt .seal { opacity: 1; scale: 1; }
.seal span { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 30px; line-height: 1; color: #5b430f; translate: 0 -3px; }
.postmark { position: absolute; right: -8px; top: 30px; width: 138px; rotate: -13deg; color: var(--postmark); opacity: .78; mix-blend-mode: multiply; pointer-events: none; }
.card .star { color: var(--brass-lo); }

/* the verso: the object's sheet, then your find */
.back .cbody { color: #F1ECDF; }
.back .k { color: var(--tint); }
.scoreline { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.bignum { font-family: var(--serif); font-weight: 600; font-size: 84px; line-height: .78; letter-spacing: -.03em; padding-bottom: 6px;
  background: var(--pastel); background-size: 300% 300%; background-position: calc((1 - var(--px))*100%) calc(var(--py)*100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reason { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.25; padding-bottom: 4px; }
.ctx { display: grid; grid-template-columns: 54px 1fr; gap: 5px 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(241, 236, 223, .2); }
.bar { height: 5px; border-radius: 3px; background: rgba(241, 236, 223, .14); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--v)*100%); border-radius: 3px; background: var(--tint); }
.findrow { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(241, 236, 223, .2); display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; line-height: 1.35; }
.findrow b { font-family: var(--serif); font-weight: 500; font-size: 15px; }
.findrow em { grid-column: 1 / -1; font-family: var(--serif); font-size: 12.5px; opacity: .85; }
.facts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(241, 236, 223, .2); }
.fact { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.36; color: #E4DED0; }
.back .card-foot { display: flex; justify-content: space-between; margin-top: auto; }
.back .card-foot .k { color: rgba(241, 236, 223, .55); }

/* development: the sweep, ghosts, words */
.sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay; z-index: 1; transition: opacity .8s ease;
  background: var(--rainbow); background-size: 260% 260%; background-position: calc(var(--px)*100%) calc(var(--py)*100%);
  -webkit-mask-image: linear-gradient(110deg, transparent 38%, rgba(0, 0, 0, .12) 43%, #000 49% 51%, rgba(0, 0, 0, .12) 57%, transparent 62%);
  mask-image: linear-gradient(110deg, transparent 38%, rgba(0, 0, 0, .12) 43%, #000 49% 51%, rgba(0, 0, 0, .12) 57%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.card .cbody, .card .gilt, .card .seal, .card .postmark:not(.shot .postmark) { transition: opacity .6s var(--ease); }
.card.developing .cbody, .card.developing .gilt, .card.developing .seal { opacity: 0; }
.card.developing:not(.shot .card) .postmark { opacity: 0; }
.card.developing .spec { filter: saturate(.45); }
.developing .sweep { opacity: .72; animation: develop 3.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes develop { 0%, 8% { -webkit-mask-position: 125% 0; mask-position: 125% 0; } 85%, 100% { -webkit-mask-position: -25% 0; mask-position: -25% 0; } }

/* radiance: the subject becomes the light */
.rim, .cast, .pool { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.rim { mix-blend-mode: overlay; filter: saturate(1.4) brightness(1.15); background: var(--rainbow); background-size: 260% 260%; background-position: calc(var(--px)*100%) calc(var(--py)*100%);
  -webkit-mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 57%, #000 64%, #000 69%, transparent 79%); mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 57%, #000 64%, #000 69%, transparent 79%); }
.rim::after { content: ""; position: absolute; inset: 0; background: var(--rainbow); background-size: 260% 260%; background-position: calc((1 - var(--px))*100%) calc(var(--py)*100%); mix-blend-mode: screen; opacity: .55;
  -webkit-mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 60%, #000 65%, transparent 71%); mask: radial-gradient(ellipse 60% 36% at 50% 32%, transparent 60%, #000 65%, transparent 71%); }
.cast { mix-blend-mode: soft-light; background: var(--pastel); background-size: 260% 260%; background-position: calc((1 - var(--px))*100%) calc(var(--py)*100%);
  -webkit-mask: radial-gradient(ellipse 66% 42% at 50% 32%, transparent 64%, #000 78%, transparent 104%); mask: radial-gradient(ellipse 66% 42% at 50% 32%, transparent 64%, #000 78%, transparent 104%); }
.pool { mix-blend-mode: overlay; filter: saturate(1.4) brightness(1.2); background: var(--rainbow); background-size: 260% 260%; background-position: calc(var(--px)*100%) calc(var(--py)*100%); transform: scale(2.6);
  -webkit-mask: radial-gradient(ellipse 60% 36% at 50% 32%, #000 56%, transparent 74%); mask: radial-gradient(ellipse 60% 36% at 50% 32%, #000 56%, transparent 74%); transition: opacity .5s ease, transform 1.3s var(--ease); }
.radiant.on .rim { opacity: 1; }
.radiant.on .cast { opacity: .4; }
.radiant.on .spec { filter: saturate(1.18) brightness(1.06) contrast(1.04); transform: translate(calc((.5 - var(--px))*10px), calc(-74px + (.5 - var(--py))*8px)) scale(.94); }
.radiant.pooling .pool { opacity: .95; transform: scale(1); }

/* =============================== HERO: one card, nothing else =============================== */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 76px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 64px); overflow: hidden; isolation: isolate; }
.hero-backdrop { position: absolute; inset: -40px; z-index: -1; }
.hero-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(.7); opacity: .26; transform: scale(1.1); transition: opacity 1.2s ease; }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 56% at 50% 48%, rgba(34, 50, 43, .1), var(--felt) 82%); }
.hero-stage { display: grid; grid-template-columns: 1fr auto 1fr; justify-items: center; row-gap: 16px; }
.hero-stage > * { grid-column: 2; }
.hero-stage > .cam-label { grid-row: 1; }
.hero-stage > .shot-fit { grid-row: 2; }
.hero-stage > .cam-caption { grid-row: 3; }
.hero-stage > .hero-foot { grid-row: 4; }
/* the note in the margin: a field note beside the card, never an instruction.
   Two lines per find, one before you take it and one after; the one that isn't meant now rests below, unseen. */
.hero-stage > .hero-note { grid-column: 1; grid-row: 2; align-self: center; justify-self: end; margin: 0 clamp(36px, 4.4vw, 72px) 0 0; }
.hero-note { display: grid; max-width: 24ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.36vw, 20px); line-height: 1.32;
  letter-spacing: .004em; color: var(--bone-dim); text-align: right; text-wrap: pretty; transition: opacity .7s var(--ease) .32s, filter .7s var(--ease) .32s; }
.hn > span { display: block; text-wrap: balance; }
.hn { grid-area: 1 / 1; opacity: 0; translate: 0 9px; filter: blur(3px); transition: opacity .35s var(--ease), translate .5s var(--ease), filter .35s var(--ease); }
.hero-note[data-show="before"] .hn[data-when="before"], .hero-note[data-show="after"] .hn[data-when="after"] {
  opacity: 1; translate: 0 0; filter: none; transition: opacity 1.1s var(--ease), translate 1.2s var(--ease), filter 1s var(--ease); }
/* it steps back while the parts are out, and comes back once they've gone home
   (hush: a turn is handing one face's parts to the other's, so it stays back through the turn) */
html[data-callouts] .hero-note, .hero.hush .hero-note { opacity: 0; transition: opacity .2s ease, filter .2s ease; }
.hero.swapping .hero-note { opacity: 0; filter: blur(4px); transition-duration: .3s; transition-delay: 0s; }
@media (max-width: 999px) and (min-height: 501px) {
  .hero-stage { grid-template-columns: auto; }
  .hero-stage > * { grid-column: 1; }
  .hero-stage > .hero-note { grid-column: 1; grid-row: 4; align-self: start; justify-self: center; margin: -6px 0 0; }
  .hero-stage > .hero-foot { grid-row: 5; }
  .hero-note { max-width: min(36ch, 100%); min-height: 2.64em; font-size: 16px; text-align: center; text-wrap: balance; }
  .hn > span { display: inline; }
}
/* the card takes what the screen has left once everything round it is counted (a card is as tall as the
   width over .6757): 250px beside it on a wide screen; under it, the two lines of the note as well */
.shot-fit { width: min(400px, 84vw, calc((100svh - 250px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .6757)); }
@media (max-width: 999px) and (min-height: 501px) { .shot-fit { width: min(400px, 84vw, calc((100svh - 310px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .6757)); } }
/* phones: the foot of the screen is a band kept free for the cue to the next fold (.nextcue), and the card is
   sized to what's left once everything round it is counted: the header and the status bar above it (iOS draws
   the page under the status bar), the label, caption, note, the two glyphs and their labels, and that band */
@media (max-width: 900px) and (min-height: 501px) {
  .hero { --cue-band: 50px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--cue-band)); }
  .shot-fit { width: min(400px, 84vw, calc((100svh - 318px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .6757)); }
}
.shot-fit .shot { cursor: pointer; }
.cam-label { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(235, 228, 211, .65); transition: opacity .6s; }
.cam-caption { margin: 4px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); min-height: 1.4em; text-align: center; transition: opacity .4s, filter .4s; }
.cam-caption b { color: var(--brass-hi); font-weight: 500; }
/* the foot: two small glyphs, only once there is a card. No words until you hover. */
.hero-foot { position: relative; height: 40px; margin-top: -6px; display: flex; align-items: center; justify-content: center; gap: 4px; transition: opacity .3s ease; }
.hero-foot > i { width: 3px; height: 3px; border-radius: 50%; background: var(--bone-dim); opacity: 0; scale: 0; transition: opacity .4s var(--ease), scale .5s var(--spring); }
.hero.ready .hero-foot > i { opacity: .4; scale: 1; transition-delay: .12s; }
.hglyph { height: 40px; min-width: 42px; justify-content: center; padding: 0 9px; opacity: 0; scale: .5; visibility: hidden;
  transition: opacity .25s var(--ease), scale .3s var(--ease), color .3s, visibility 0s linear .3s; }
.hero.ready .hglyph { opacity: 1; scale: 1; visibility: visible; transition: opacity .5s var(--ease), scale .75s var(--spring), color .3s, visibility 0s; }
.hero.ready .hglyph.again { transition-delay: .16s, .16s, 0s, 0s; }
/* both read as buttons before either glyph does: a felt disc lifted a hair off the page, a hairline rim */
.hglyph::before { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%;
  border-radius: 50%; background: rgba(235, 228, 211, .05); border: 1px solid rgba(235, 228, 211, .13);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .05), 0 1px 3px rgba(0, 0, 0, .3);
  transition: background-color .3s, border-color .3s, translate .3s var(--spring); pointer-events: none; }
.hglyph:hover::before, .hglyph:focus-visible::before { background: rgba(235, 228, 211, .09); border-color: rgba(235, 228, 211, .26); translate: -50% calc(-50% - 1px); }
.hglyph:active { scale: .94; }
.hglyph:active::before { translate: -50% -50%; }
.hglyph .tip { position: absolute; top: 50%; white-space: nowrap; }
.hglyph.parts .tip { right: calc(100% - 2px); translate: 6px -50%; }
.hglyph.again .tip { left: calc(100% - 2px); translate: -6px -50%; }
.hglyph:hover .tip, .hglyph:focus-visible .tip { translate: 0 -50%; }
.hglyph .tlabel { display: none; }

/* the parts: a loupe — a brass-rimmed lens on a short handle. Nothing about it echoes the shutter. */
.lp { position: relative; width: 24px; height: 24px; display: block; transition: translate .25s var(--ease); }
.lp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-rim { fill: rgba(235, 228, 211, .04); stroke: var(--brass); stroke-width: 2; transition: stroke .3s, fill .3s; }
.lp-handle { stroke: var(--brass); stroke-width: 2.1; stroke-linecap: round; transition: stroke .3s; }
.parts:hover .lp, .parts:focus-visible .lp { translate: 0 -1px; }
.parts:hover .lp-rim, .parts:focus-visible .lp-rim, .parts[aria-pressed="true"] .lp-rim { stroke: var(--brass-hi); }
.parts:hover .lp-handle, .parts:focus-visible .lp-handle, .parts[aria-pressed="true"] .lp-handle { stroke: var(--brass-hi); }
.parts[aria-pressed="true"] .lp-rim { fill: rgba(241, 218, 146, .14); }
/* a soft glint off the glass, once, the first time the glyphs appear after a capture — never a loop */
.lp-glint { position: absolute; left: 1.5px; top: 1.5px; width: 19.8px; height: 19.8px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 250, 232, .95) 50%, transparent 68%);
  mix-blend-mode: screen; opacity: 0; translate: -70% 0; }
.parts.glint .lp-glint { animation: lensglint 1.1s var(--ease) .1s; }
@keyframes lensglint { 0%, 8% { opacity: 0; translate: -70% 0; } 42% { opacity: .95; } 100% { opacity: 0; translate: 70% 0; } }

/* take another: a shutter release — a bone ring round a filled disc. Nothing about it echoes the loupe. */
.ag { position: relative; width: 24px; height: 24px; display: block; transition: translate .25s var(--ease); }
.ag svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag-ring { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .8; transition: opacity .3s; }
.ag-disc { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: currentColor; transition: translate .16s var(--ease), scale .16s var(--ease), background-color .3s; }
.again:hover .ag, .again:focus-visible .ag { translate: 0 -1px; }
.again:hover .ag-ring, .again:focus-visible .ag-ring { opacity: 1; }
.again:hover .ag-disc, .again:focus-visible .ag-disc { background: var(--brass-hi); }
/* on press, the disc dips */
.again:active .ag-disc { translate: 0 1.5px; scale: .82; }
/* and a tiny flash ring expands — on every press, and once more, soft, the first time the glyphs appear */
.ag-flash { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 1px solid var(--brass-hi); opacity: 0; pointer-events: none; }
.again.glint .ag-flash, .again.flash .ag-flash { animation: shutterflash .55s var(--ease); }
@keyframes shutterflash { 0% { opacity: .85; scale: .4; } 100% { opacity: 0; scale: 1.75; } }
/* touch has no hover: a tiny label sits under each glyph instead of a tooltip */
@media (hover: none) {
  .hglyph .tip { display: none; }
  .hglyph .tlabel { display: block; position: absolute; left: 50%; top: 100%; translate: -50% 5px;
    font-family: var(--mono); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-dim); }
  .hero-stage > .hero-foot { margin-bottom: 14px; }   /* the labels hang below the glyphs: the layout counts them */
}
/* while the parts are out as a key (phones), the key sits where the caption and foot were */
html[data-callouts="key"] .cam-caption, html[data-callouts="key"] .hero-foot { opacity: 0; pointer-events: none; }
/* on a short screen the labels in the gutters come down level with the caption: it steps aside while they're up */
@media (max-height: 560px) { html[data-callouts] .cam-caption, html[data-callouts] .hero-foot { opacity: 0; pointer-events: none; } }
/* taking another: the finished card dissolves, the next viewfinder opens */
/* (opacity and blur only: the callouts own this element's scale and translate while they're up) */
.shot-fit { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.hero.swapping .shot-fit { opacity: 0; filter: blur(8px); transition-duration: .3s; }
.hero.swapping .cam-caption { opacity: 0; filter: blur(4px); transition-duration: .3s; }
.hero.swapping .hero-backdrop img { opacity: 0; transition-duration: .3s; }

/* the shot: a stamp viewfinder that becomes a card */
.shot { position: relative; width: 300px; height: 444px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35));
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.tiltbox > .shot { transition: transform .1s linear, scale .3s var(--spring); }
.tiltbox > .shot.pressed { scale: .985; transition: transform .1s linear, scale .12s var(--ease); }
.shot:focus-visible { outline-offset: 10px; border-radius: 3px; }
html[data-input="pointer"] :is(.shot, .hglyph):focus-visible { outline: none; }
@media (hover: hover) { html[data-input="pointer"] .hglyph:focus-visible:not(:hover) .tip { opacity: 0; } }
/* the printed turn mark: a sign, not an instruction */
.shot .foot .turn { font-family: var(--sans); font-size: 13px; line-height: 1; letter-spacing: 0; }
.shot .card .cbody > *, .shot .card .ghosts { transition: opacity .6s var(--ease), translate .6s var(--ease); }
.photo { position: absolute; inset: 0; }
.live .photo { animation: sway 7s ease-in-out infinite alternate; }
.frozen .photo { animation-play-state: paused; }
@keyframes sway { 0% { transform: scale(1.04) translate(-3px, 2px); } 100% { transform: scale(1.06) translate(3px, -3px); } }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene.gray { transition: filter .28s ease; }
.frozen .scene.gray { filter: grayscale(1) contrast(1.05); }
.scene.color { --b: 0%; -webkit-mask: radial-gradient(ellipse calc(var(--b)*.62) var(--b) at calc(var(--fx, .5)*100%) calc(var(--fy, .52)*100%), #000 72%, transparent 100%); mask: radial-gradient(ellipse calc(var(--b)*.62) var(--b) at calc(var(--fx, .5)*100%) calc(var(--fy, .52)*100%), #000 72%, transparent 100%); transition: --b .5s var(--ease); }
.lifted .scene.color { --b: 44%; }
.cut { --r: 0%; opacity: 0; -webkit-mask: radial-gradient(ellipse calc(var(--r)*.66) var(--r) at calc(var(--fx, .5)*100%) calc(var(--fy, .52)*100%), #000 70%, transparent 100%); mask: radial-gradient(ellipse calc(var(--r)*.66) var(--r) at calc(var(--fx, .5)*100%) calc(var(--fy, .52)*100%), #000 70%, transparent 100%);
  transition: --r .9s cubic-bezier(.5, 0, .2, 1), opacity .3s ease, transform .9s var(--spring); }
.papered .cut { --r: 190%; opacity: 1; }
.arranged .photo img { transform: translateY(var(--lift, -74px)) scale(var(--zoom, .92)); transition: transform .95s var(--spring), --r .9s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
/* once the lift has covered it, the photograph underneath goes, so its edge can't leave a seam on the paper */
.shot.arranged .photo .scene { opacity: 0; transition: transform .95s var(--spring), opacity .2s linear .7s; }
.shot .card .cbody > .top, .shot .card .cbody > .name, .shot .card .cbody > .latin, .shot .card .cbody > .rule, .shot .card .cbody > .foot { opacity: 1; }
/* the rule is itself a word: it stays hidden until its turn (not a blurred smudge on the paper) */
.shot:not(.arranged) .card .cbody > .rule.w, .shot .card .cbody > .rule.w.hide { opacity: 0; }
.shot .w { transition: opacity .5s var(--ease), filter .6s var(--ease); }
.shot:not(.arranged) .w, .shot .w.hide { opacity: 0; filter: blur(4px); }
.shot .ghosts { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.shot.developing .ghosts { opacity: 1; }
.ghosts i { position: absolute; left: 28px; border-radius: 3px; background: var(--ink); opacity: 0; animation: ghost 1.6s ease-in-out infinite alternate; }
.ghosts .g1 { top: 272px; width: 180px; height: 24px; }
.ghosts .g2 { top: 310px; width: 120px; height: 8px; animation-delay: -.5s; }
.ghosts .g3 { top: 406px; width: 96px; height: 7px; animation-delay: -1s; }
.developing .ghosts .g1 { transition: opacity .4s 1.1s; }
.ghosts i.gone { animation: none; opacity: 0 !important; transition: opacity .3s; }
@keyframes ghost { from { opacity: .1; } to { opacity: .22; } }
.shot .perf { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.perf .dots { fill: none; stroke: var(--bone); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 .0066; opacity: 0; transition: opacity .3s; }
.perf .draw { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.punched .perf .dots { opacity: .85; }
.punched .perf .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .38s cubic-bezier(.4, 0, .2, 1); }
.arranged .perf .dots { opacity: 0; transition: opacity .8s ease; }
.shot.reset, .shot.reset * { transition: none !important; }
.shot .corners { position: absolute; left: calc(var(--ax, var(--fx, .5))*100%); top: calc(var(--ay, var(--fy, .52))*100%); width: 84px; height: 84px; translate: -50% -50%; opacity: 0; scale: 1.35; pointer-events: none;
  transition: opacity .25s ease, scale .35s var(--ease), left .5s var(--ease), top .5s var(--ease); }
.shot .corners i { transition: border-color .2s; }
.shot .corners i, .vf-focus i { position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--bone); }
.shot .corners i:nth-child(1), .vf-focus i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.shot .corners i:nth-child(2), .vf-focus i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.shot .corners i:nth-child(3), .vf-focus i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.shot .corners i:nth-child(4), .vf-focus i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
/* a live viewfinder: the corners wait on the subject, breathing, and now and then hunt for focus.
   With a pointer they follow it (the lens steps aside); a click locks them, brass, where you pointed. */
.hero[data-state="waiting"] .shot:not(.aiming) .corners { animation: breathe 2.8s ease-in-out infinite, hunt 5.6s linear 1.4s infinite; }
@keyframes breathe { 0%, 100% { opacity: .42; scale: 1.1; } 50% { opacity: .9; scale: 1; } }
@keyframes hunt { 0%, 86% { transform: none; } 89% { transform: scale(.92); } 92.5% { transform: scale(1.03); } 96%, 100% { transform: none; } }
.has-lens .hero[data-state="waiting"] .shot.aiming .corners { opacity: .95; scale: 1; }
.shot.focused .corners { opacity: 1; scale: .86; transition: opacity .1s ease, scale .2s var(--spring), left .12s var(--ease), top .12s var(--ease); }
.shot.focused .corners i { border-color: var(--brass-hi); }
.shot.frozen .corners { opacity: 0; transition: opacity .15s; }
.shot .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; }
.shot.flashing .flash { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.shot .card .postmark { opacity: 0; scale: 1.35; transform-origin: 30% 50%; transition: opacity .12s ease, scale .38s cubic-bezier(.2, 1.6, .4, 1); }
.shot.struck .card .postmark { opacity: .78; scale: 1; }
.shot .card .glare, .shot .card .sheen { opacity: 0; transition: opacity 1s ease; }
.shot.arranged .card .glare, .shot.arranged .card .sheen { opacity: 1; }
.shot .card .grain-p { opacity: 0; transition: opacity .8s; }
.shot.papered .card .grain-p { opacity: .3; }
.scrollcue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; width: 22px; height: 36px; border: 1px solid rgba(235, 228, 211, .3); border-radius: 12px; }
.scrollcue span { position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--bone-dim); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { translate: 0 0; opacity: 0; } 30% { opacity: 1; } 100% { translate: 0 14px; opacity: 0; } }
@media (max-width: 900px) { .scrollcue { display: none; } }
/* on a phone (or any narrow screen): what's next, in the band kept free at the foot of the first fold, with the
   film's own glyph. It sits above the callouts, so it stays while the card explains itself (their key stops above
   the band), and it bobs, gently, until you go on */
.nextcue { display: none; }
@media (max-width: 900px), (pointer: coarse) { .scrollcue { display: none; } }
@media (max-width: 900px) and (min-height: 501px), (min-width: 901px) and (min-height: 501px) and (pointer: coarse) {
  .nextcue { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); translate: -50% 0; z-index: 46; display: grid; justify-items: center; gap: 5px;
    padding: 8px 16px 4px; color: var(--bone-dim); text-decoration: none; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--ease), visibility 0s .5s; -webkit-tap-highlight-color: transparent; }
  .nextcue .nc-row { display: flex; align-items: center; gap: 9px; }
  .nextcue svg { width: 15px; height: 15px; fill: none; stroke: var(--brass); stroke-width: 1.5; }
  .nextcue svg .fill { fill: var(--brass); stroke: none; }
  .nextcue i { width: 7px; height: 7px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); rotate: 45deg; animation: nextcue 2.2s var(--ease) infinite; }
  .nextcue.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s var(--ease), visibility 0s; }
  .nextcue.on .nc-row { animation: nextcue-in .9s var(--spring) both; }
}
@keyframes nextcue { 0%, 100% { translate: 0 -3px; opacity: .45; } 50% { translate: 0 3px; opacity: 1; } }
@keyframes nextcue-in { from { translate: 0 10px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nextcue i, .nextcue.on .nc-row { animation: none; } }
/* on a short screen the cue would crowd the glyphs; by then you know the page goes on */
@media (max-height: 780px) { .scrollcue { transition: opacity .5s var(--ease); } .hero.ready .scrollcue { opacity: 0; pointer-events: none; } }
/* a phone on its side: less furniture round the card, so the card can be a size you can read */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: calc(env(safe-area-inset-top, 0px) + 66px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .hero-stage { row-gap: 8px; }
  .cam-label { display: none; }
  .shot-fit { width: min(400px, 84vw, calc((100svh - 146px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * .6757)); }
}

/* =============================== THE FILM (fold 2) =============================== */
.film-fold { position: relative; height: 100svh; min-height: 520px; }

/* =============================== PACK =============================== */
.pack { position: relative; height: 100svh; min-height: 560px; overflow: clip; }
.pack-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pack-title { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 84px); left: var(--gutter); right: var(--gutter); margin: 0; text-align: center;
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.05; letter-spacing: -.015em; color: var(--bone);
}
.pack-stage .deck-fit { width: min(450px, 84vw, calc((100svh - 270px) * .72)); margin-top: 26px; }
.pack-end { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pack-end .coda-line { font-size: clamp(34px, 4.4vw, 60px); }
.deck .dcard { transition: none !important; }   /* the pack places every card itself, every frame */
.pack-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.deck-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
.deck-fit { width: min(560px, 96vw); }
.deck { position: relative; width: 372px; height: 600px; perspective: 879px; perspective-origin: 50% calc(50% - 14px); touch-action: pan-y; outline: none; }
/* on a phone the deck takes the finger (main.js turns the ring with it; pulled down at the first card, the page goes up) */
@media (pointer: coarse) { .deck { touch-action: none; } }
.deck .dcard { position: absolute; left: 50%; top: 50%; margin: -236px 0 0 -150px; transform-style: preserve-3d; transition: transform .85s var(--spring), opacity .5s ease; will-change: transform; }
.deck .dcard .card .spec { transition: filter .6s ease; }
.deck .dcard .card { transition: filter .6s ease; }   /* main.js darkens the cards behind (brightness, saturation) */
.deck-shadow { position: absolute; left: 50%; top: 50%; width: 220px; height: 22px; margin: 190px 0 0 -130px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(14px); }
.deck-note { color: var(--bone-dim); margin-top: -10px; }

/* =============================== THE END =============================== */
.coda { min-height: 62svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding-block: 90px calc(env(safe-area-inset-bottom, 0px) + 110px); text-align: center; }
.coda-line { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: 1; letter-spacing: -.02em; color: var(--bone); }
.coda-tf { display: inline-flex; align-items: center; gap: 12px; color: var(--bone-dim); text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding: 10px 14px; transition: color .3s; }
.coda-tf .tf-stamp { width: 26px; height: 31px; }
.coda-tf:hover, .coda-tf:focus-visible { color: var(--bone); }
.coda-tf:hover .tf-stamp { transform: translateY(-2px) rotate(-8deg); }
.coda-tf:hover .tf-arrow { transform: translate(1.5px, -1.5px); }
.coda-tf.nudge .tf-stamp { animation: nudge .9s var(--spring); }

/* =============================== REDUCED MOTION =============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero[data-state="waiting"] .shot .corners { opacity: .7; scale: 1.05; }
}

/* a turned card hides the viewfinder's marks */
#shotCard.flipped ~ .corners, #shotCard.flipped ~ .perf, .hero.ready .shot .corners { opacity: 0 !important; transition: opacity .2s; }

/* over the film's parchment, the header turns to ink on paper: the same tokens, swapped */
.nav.on-paper { --bone: #1B2140; --bone-dim: #4A4F6A; --felt: #F1EBDC; --bone-faint: rgba(27, 33, 64, .16); }
.nav.on-paper::before { background: linear-gradient(rgba(241, 235, 220, .94) 40%, rgba(241, 235, 220, 0)); }
/* over the film there's no band: the header sits on the film itself, in ink on its paper scenes and in bone on its
   dark ones (the film says which, frame by frame), each with a soft halo of that ground, as the film's own words have */
.nav.over-film::before { opacity: 0; }
.nav.over-film { --halo: rgba(8, 12, 18, .55); }
.nav.over-film.on-paper { --halo: rgba(241, 235, 220, .92); }
.nav.over-film .mark, .nav.over-film .glyph { filter: drop-shadow(0 0 7px var(--halo)) drop-shadow(0 0 2px var(--halo)); }
.nav .mark, .nav .glyph { transition: filter .5s var(--ease), color .5s var(--ease); }
.nav { transition: color .4s; }

/* =============================== SNAPPING =============================== */
/* one flick, one step: each fold, each beat of the triptych, each card of the pack, and the end */
@media (pointer: coarse) { html { scroll-snap-type: y mandatory; } }   /* touch: the browser's own snapping; with a mouse or trackpad, main.js steps */
.hero, .film-fold, .tri-fold, .pack { scroll-snap-align: start; }
/* the triptych is played, not scrolled: one screen */
.tri-fold.tri { height: 100svh; min-height: 560px; }

/* =============================== THE RAIL =============================== */
/* a glyph per fold to jump by; under the current one, ticks for where you are inside it — all on one axis */
.rail { position: fixed; right: calc(var(--gutter) - 26px); top: 50%; translate: 0 -50%; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 14px;
  --rc: rgba(235, 228, 211, .42); --ron: var(--brass); --rt: rgba(235, 228, 211, .24); --rtp: rgba(235, 228, 211, .5); --rhov: var(--bone); }
.rail.on-paper { --rc: rgba(27, 33, 64, .45); --ron: #9A7424; --rt: rgba(27, 33, 64, .22); --rtp: rgba(27, 33, 64, .45); --rhov: #1B2140; }
.rail-fold { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-g { display: grid; place-items: center; width: 28px; height: 28px; color: var(--rc); border-radius: 8px; transition: color .3s, transform .45s var(--spring); }
.rail-g svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.rail-g svg .fill { fill: currentColor; stroke: none; }
.rail-g:hover, .rail-g:focus-visible { color: var(--rhov); transform: scale(1.1); }
.rail-fold.on .rail-g { color: var(--ron); }
.rail-ticks { display: flex; flex-direction: column; align-items: center; gap: 0; margin: -8px 0 -4px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .35s; }
.rail-fold.on .rail-ticks { max-height: 180px; opacity: 1; }
.rail-t { display: grid; place-items: center; width: 28px; height: 7.5px; padding: 0; background: none; border: 0; cursor: pointer; }
.rail-t[disabled] { cursor: default; }
.rail-t::after { content: ""; display: block; width: 8px; height: 1.5px; border-radius: 1px; background: var(--rt); transition: width .45s var(--spring), background .3s; }
.rail-t.past::after { background: var(--rtp); }
.rail-t.now::after { width: 18px; background: var(--ron); }
.rail-t:not([disabled]):hover::after { width: 14px; background: var(--rhov); }
.rail-tip { position: absolute; right: 38px; top: 0; width: max-content; max-width: 240px; padding: 10px 13px 11px; border-radius: 10px; pointer-events: none;
  background: rgba(20, 30, 25, .94); border: 1px solid rgba(235, 228, 211, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); color: #EBE4D3;
  opacity: 0; translate: 6px -50%; transition: opacity .2s, translate .3s var(--ease); }
.rail-tip.on { opacity: 1; translate: 0 -50%; }
.rail-tip b { display: block; font: 400 17px/1.15 var(--serif); }
.rail-tip span { display: block; margin-top: 4px; font: 400 12.5px/1.4 var(--sans); color: rgba(235, 228, 211, .66); }
.rail-tip span:empty { display: none; }
@media (max-width: 759.98px), (pointer: coarse) { .rail { display: none; } }

/* the TestFlight glyph: a little propeller in the perforated stamp — it turns a third when you reach for it */
.tf-ring { fill: none; stroke: currentColor; stroke-width: 1.05; opacity: .55; }
.tf-prop { fill: currentColor; transform-box: view-box; transform-origin: 11px 13px; transition: transform .9s var(--spring); }
.tf:hover .tf-prop, .tf:focus-visible .tf-prop, .coda-tf:hover .tf-prop, .coda-tf:focus-visible .tf-prop { transform: rotate(120deg); }
.tf.nudge .tf-prop, .coda-tf.nudge .tf-prop { animation: prop-spin 1.1s cubic-bezier(.3, 1.2, .4, 1); }
@keyframes prop-spin { from { transform: rotate(0deg); } to { transform: rotate(240deg); } }

/* =============================== THE OPENING =============================== */
/* the word first: large, a little below the middle; everything else waits, then the first card is dealt */
html.intro .nav .glyph, html.intro .rail, html.intro .hero-stage, html.intro .hero-backdrop, html.intro .scrollcue, html.intro .nav::before { opacity: 0; pointer-events: none; }
html.intro:not(.intro-on) .mark { opacity: 0; }
html.intro .mark { transition: opacity .5s var(--ease); transform-origin: 50% 50%; will-change: transform; }
html.intro-deal .nav .glyph, html.intro-deal .rail, html.intro-deal .hero-backdrop, html.intro-deal .scrollcue { opacity: 1; transition: opacity .8s var(--ease); }
.nav .glyph, .rail, .hero-backdrop, .scrollcue { transition: opacity .6s var(--ease); }
.hero-stage.deal-in { animation: deal-in 1s cubic-bezier(.3, 1.2, .45, 1) both; }
@keyframes deal-in {
  0% { opacity: 0; transform: translateY(90px) rotate(-5deg) scale(.93); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}