/* ninefathoms.com — the studio sheet (the rebuild, from the Claude Design
   handoff of 2026-09-14). Dark, always: the ground is the catacombs'
   violet-black and the ink is the skull's bone, both sampled from the game.
   The band of nine appears on the door twice (the shafts under the
   header and the footer strip) and once on every other page (the footer strip). Each page
   takes ONE block of the band as its accent, and spends it only in small,
   precise places: the pip before a heading, the current nav item, the dot in
   a button, a link's underline, the focus ring.
   Law of the site: no web fonts, nothing from anyone else, no scripts (the
   CSP is default-src 'none'), no style= attributes (style-src 'self'), no
   border-radius, every pixel mark scaled by whole numbers. The blocks
   between gen: comments are written by tools/build_site.py. */

:root{
  --ground:#0a0810;--ground-mid:#08060e;--ground-deep:#07050c;
  --panel:#0c0a12;--panel-frame:#1b1725;--frame:#3a3340;
  --ink:#f2ebe0;--ink-2:#e4dee6;--ink-3:#cfc8d0;--muted:#a8a2ae;--dim:#8f8a92;
  --stone:#a39a92;--ember:#ff733e;
  --hairline:rgba(242,235,224,.12);--hairline-soft:rgba(242,235,224,.1);
  --board-ground:#060310;--board-cell:#092431;--board-fill:#e7f0e7;--board-clue:#2f9dad;
  --board-grid:rgba(47,157,173,.14);--board-edge:rgba(47,157,173,.22);
  --sans:system-ui,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,"SF Mono",monospace;
  --gutter:clamp(20px,5vw,56px);
  --section:clamp(64px,10vh,110px);
  --accent:#ff733e;--on-accent:#0a0810;
  color-scheme:dark;
}
/* one block of the band per page; the selection's ink keeps it legible */
.p-door{--accent:#ff0044;--on-accent:#0a0810}
.p-game{--accent:#ffea00;--on-accent:#0a0810}
.p-press{--accent:#ff5500;--on-accent:#0a0810}
.p-support{--accent:#ea00ff;--on-accent:#f2ebe0}
.p-privacy{--accent:#0095ff;--on-accent:#f2ebe0}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
p{text-wrap:pretty}
h1{text-wrap:balance}
img,svg{display:block}
a{color:var(--ink)}
a:hover{color:var(--ember)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}

/* the mono label voice: every label, kicker, caption and button */
.eyebrow,.hero-sub,.rule-row h2,.rule-row .trail,.deck,.button,.note,.chips li,.board-col,.board-rowclue,
.mono-link,.honours dt,.studio h2,.top-nav a,.deep-nav a,.deep-head{
  font-family:var(--mono);font-weight:600;text-transform:uppercase}

/* the page descends: it darkens as you go down (longer pages start later) */
.descent{--fall-a:52%;--fall-b:78%;
  background-image:linear-gradient(180deg,var(--ground) 0%,var(--ground) var(--fall-a),var(--ground-mid) var(--fall-b),var(--ground-deep) 100%);overflow-x:hidden}
.p-game .descent{--fall-a:60%;--fall-b:82%}
.p-press .descent{--fall-a:62%;--fall-b:84%}
.p-support .descent,.p-privacy .descent{--fall-a:64%;--fall-b:86%}
.page{max-width:1140px;margin:0 auto;padding:0 var(--gutter)}

/* THE BAND — nine equal blocks, in this order, never restyled, nothing set in it */
.band{display:flex}
.band span{flex:1}
.band span:nth-child(1){background:#ff0044}
.band span:nth-child(2){background:#ff5500}
.band span:nth-child(3){background:#ffea00}
.band span:nth-child(4){background:#aaff00}
.band span:nth-child(5){background:#00ff2a}
.band span:nth-child(6){background:#00ffea}
.band span:nth-child(7){background:#0095ff}
.band span:nth-child(8){background:#2b00ff}
.band span:nth-child(9){background:#ea00ff}

/* -- the header ----------------------------------------------------------- */
.top{max-width:1140px;margin:0 auto;padding:26px var(--gutter) 18px;display:flex;align-items:center;
  justify-content:space-between;gap:28px;flex-wrap:wrap}
.top-mark{display:block;line-height:0;text-decoration:none}
/* markLine 112 × 10 at ×2 */
.top-mark svg{width:224px;height:20px;color:var(--ink)}
.top-nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.top-nav a{position:relative;display:block;padding-bottom:7px;text-decoration:none;white-space:nowrap;
  font-size:11px;line-height:1;letter-spacing:.2em;color:var(--dim)}
.top-nav a:hover,.top-nav a[aria-current="page"]{color:var(--ink)}
/* the current page carries a row of pixels in the accent, not a rule */
.top-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 2px,transparent 2px 4px)}

/* -- the hero: the studio's sentence is the page's heading ---------------- */
.hero{padding:clamp(34px,6vh,72px) 0 clamp(56px,9vh,96px)}
.eyebrow{margin:0 0 clamp(22px,3.4vh,34px);font-size:10px;line-height:1;letter-spacing:.32em;color:var(--dim)}
.hero-lede{margin:0;max-width:32rem;font-size:clamp(22px,2.6vw,31px);font-weight:400;line-height:1.36;
  letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.hero-sub{margin:26px 0 0;font-size:10px;line-height:1.7;letter-spacing:.22em;color:var(--dim)}

/* -- THE SHAFTS (the door's update, 2026-09-14) ----------------------------
   Under the header, full-bleed: the band, nine fathoms of hairline below it
   (one rule per ninth of the field), and a shaft of light hanging from each
   block, breathing on its own slow tempo, fading into the ground. The design
   animates each shaft's height; here a shaft is a glow scaled down from the
   band and an edge translated with it, so the motion is transform-only (no
   layout per frame) and the 2px edge never thickens. Same heights, tempos,
   offsets and curve, per shaft, in the gen:shafts block below. */
.shafts{position:relative;width:100%;overflow:hidden;background:var(--ground);margin-top:clamp(18px,3vh,34px)}
.shafts .band{position:relative;z-index:3;height:10px}
.shafts-field{position:relative;height:clamp(280px,38vh,420px)}
.shafts-field::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(180deg,rgba(242,235,224,.075) 0 1px,transparent 1px 11.1111%)}
.shafts-field::after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 26%,var(--ground) 100%)}
.shaft{position:absolute;top:0;bottom:0;width:4.4445%}
.shaft-glow,.shaft-edge{position:absolute;inset:0;will-change:transform;
  animation-timing-function:cubic-bezier(.42,0,.58,1);animation-iteration-count:infinite}
.shaft-glow{transform-origin:top}
.shaft-edge::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;opacity:.85}
/* gen:shafts */
.shaft-1{left:3.3333%}.shaft-1 .shaft-glow{background-image:linear-gradient(180deg,#ff004473 0%,#ff00440f 46%,transparent 100%);transform:scaleY(0.16);animation-name:sg1;animation-duration:9s;animation-delay:-1.2s}.shaft-1 .shaft-edge{transform:translateY(16%);animation-name:se1;animation-duration:9s;animation-delay:-1.2s}.shaft-1 .shaft-edge::before{background:#ff0044}
@keyframes sg1{0%,100%{transform:scaleY(0.16)}50%{transform:scaleY(0.72)}}@keyframes se1{0%,100%{transform:translateY(16%)}50%{transform:translateY(72%)}}
.shaft-2{left:14.4444%}.shaft-2 .shaft-glow{background-image:linear-gradient(180deg,#ff550073 0%,#ff55000f 46%,transparent 100%);transform:scaleY(0.1);animation-name:sg2;animation-duration:7.5s;animation-delay:-4.4s}.shaft-2 .shaft-edge{transform:translateY(10%);animation-name:se2;animation-duration:7.5s;animation-delay:-4.4s}.shaft-2 .shaft-edge::before{background:#ff5500}
@keyframes sg2{0%,100%{transform:scaleY(0.1)}50%{transform:scaleY(0.54)}}@keyframes se2{0%,100%{transform:translateY(10%)}50%{transform:translateY(54%)}}
.shaft-3{left:25.5555%}.shaft-3 .shaft-glow{background-image:linear-gradient(180deg,#ffea0073 0%,#ffea000f 46%,transparent 100%);transform:scaleY(0.22);animation-name:sg3;animation-duration:11s;animation-delay:-2.1s}.shaft-3 .shaft-edge{transform:translateY(22%);animation-name:se3;animation-duration:11s;animation-delay:-2.1s}.shaft-3 .shaft-edge::before{background:#ffea00}
@keyframes sg3{0%,100%{transform:scaleY(0.22)}50%{transform:scaleY(0.9)}}@keyframes se3{0%,100%{transform:translateY(22%)}50%{transform:translateY(90%)}}
.shaft-4{left:36.6666%}.shaft-4 .shaft-glow{background-image:linear-gradient(180deg,#aaff0073 0%,#aaff000f 46%,transparent 100%);transform:scaleY(0.14);animation-name:sg4;animation-duration:6.5s;animation-delay:-5.3s}.shaft-4 .shaft-edge{transform:translateY(14%);animation-name:se4;animation-duration:6.5s;animation-delay:-5.3s}.shaft-4 .shaft-edge::before{background:#aaff00}
@keyframes sg4{0%,100%{transform:scaleY(0.14)}50%{transform:scaleY(0.46)}}@keyframes se4{0%,100%{transform:translateY(14%)}50%{transform:translateY(46%)}}
.shaft-5{left:47.7777%}.shaft-5 .shaft-glow{background-image:linear-gradient(180deg,#00ff2a73 0%,#00ff2a0f 46%,transparent 100%);transform:scaleY(0.18);animation-name:sg5;animation-duration:12.5s;animation-delay:-0.6s}.shaft-5 .shaft-edge{transform:translateY(18%);animation-name:se5;animation-duration:12.5s;animation-delay:-0.6s}.shaft-5 .shaft-edge::before{background:#00ff2a}
@keyframes sg5{0%,100%{transform:scaleY(0.18)}50%{transform:scaleY(0.8)}}@keyframes se5{0%,100%{transform:translateY(18%)}50%{transform:translateY(80%)}}
.shaft-6{left:58.8889%}.shaft-6 .shaft-glow{background-image:linear-gradient(180deg,#00ffea73 0%,#00ffea0f 46%,transparent 100%);transform:scaleY(0.12);animation-name:sg6;animation-duration:8.5s;animation-delay:-3.7s}.shaft-6 .shaft-edge{transform:translateY(12%);animation-name:se6;animation-duration:8.5s;animation-delay:-3.7s}.shaft-6 .shaft-edge::before{background:#00ffea}
@keyframes sg6{0%,100%{transform:scaleY(0.12)}50%{transform:scaleY(0.62)}}@keyframes se6{0%,100%{transform:translateY(12%)}50%{transform:translateY(62%)}}
.shaft-7{left:70.0000%}.shaft-7 .shaft-glow{background-image:linear-gradient(180deg,#0095ff73 0%,#0095ff0f 46%,transparent 100%);transform:scaleY(0.2);animation-name:sg7;animation-duration:14s;animation-delay:-6.9s}.shaft-7 .shaft-edge{transform:translateY(20%);animation-name:se7;animation-duration:14s;animation-delay:-6.9s}.shaft-7 .shaft-edge::before{background:#0095ff}
@keyframes sg7{0%,100%{transform:scaleY(0.2)}50%{transform:scaleY(0.96)}}@keyframes se7{0%,100%{transform:translateY(20%)}50%{transform:translateY(96%)}}
.shaft-8{left:81.1111%}.shaft-8 .shaft-glow{background-image:linear-gradient(180deg,#2b00ff73 0%,#2b00ff0f 46%,transparent 100%);transform:scaleY(0.09);animation-name:sg8;animation-duration:5.5s;animation-delay:-2.8s}.shaft-8 .shaft-edge{transform:translateY(9%);animation-name:se8;animation-duration:5.5s;animation-delay:-2.8s}.shaft-8 .shaft-edge::before{background:#2b00ff}
@keyframes sg8{0%,100%{transform:scaleY(0.09)}50%{transform:scaleY(0.4)}}@keyframes se8{0%,100%{transform:translateY(9%)}50%{transform:translateY(40%)}}
.shaft-9{left:92.2222%}.shaft-9 .shaft-glow{background-image:linear-gradient(180deg,#ea00ff73 0%,#ea00ff0f 46%,transparent 100%);transform:scaleY(0.16);animation-name:sg9;animation-duration:10s;animation-delay:-8.1s}.shaft-9 .shaft-edge{transform:translateY(16%);animation-name:se9;animation-duration:10s;animation-delay:-8.1s}.shaft-9 .shaft-edge::before{background:#ea00ff}
@keyframes sg9{0%,100%{transform:scaleY(0.16)}50%{transform:scaleY(0.68)}}@keyframes se9{0%,100%{transform:translateY(16%)}50%{transform:translateY(68%)}}
/* /gen:shafts */

/* -- the rule row: every section's header --------------------------------- */
/* It wraps only when a long heading and its trailing label cannot share a
   phone's line (press: "Screenshots · iPhone 6.9″" + "1320 × 2868"); then the
   label takes the next line and the hair keeps at least a short run. */
.rule-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:clamp(32px,5vh,56px)}
.rule-row-close{margin-bottom:clamp(28px,4vh,40px)}
.rule-row .pip{width:7px;height:7px;background:var(--accent);flex:0 0 auto}
.rule-row h2{margin:0;font-size:11px;line-height:1;letter-spacing:.26em;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.rule-row .hair{flex:1 1 auto;min-width:24px;height:1px;background:var(--hairline)}
.rule-row .trail{font-size:10px;line-height:1;letter-spacing:.22em;color:var(--dim);white-space:nowrap}

/* -- the game module ------------------------------------------------------ */
.game{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:clamp(36px,5vw,76px);align-items:center;padding-bottom:var(--section)}
/* the portal's light, flickering like a torch */
.torch{position:absolute;inset:-14% -8%;pointer-events:none;
  background-image:radial-gradient(42% 46% at 72% 42%,rgba(255,115,62,.26) 0%,rgba(255,115,62,.07) 45%,transparent 72%);
  animation:nf-torch 7s ease-in-out infinite}
@keyframes nf-torch{0%,100%{opacity:.88}42%{opacity:1}68%{opacity:.82}}
.game-copy{position:relative}
.title{display:block;line-height:0;text-decoration:none;margin-bottom:26px}
/* the drawn title at whole scales: NONOGRAM 47 × 7 at ×4, DEPTHS 35 × 7 at ×11 */
.title svg{width:100%;height:auto}
.title-word{display:block;width:min(100%,188px);color:var(--stone)}
.title-word svg{aspect-ratio:47/7}
.title-name{display:block;width:min(100%,385px);margin-top:12px;color:var(--ember)}
.title-name svg{aspect-ratio:35/7}
.title:hover .title-word{color:var(--stone)}
.title:hover .title-name{color:var(--ember)}
.deck{margin:0 0 20px;font-size:10px;line-height:1.6;letter-spacing:.22em;color:var(--dim)}
.promo{margin:0 0 28px;max-width:31rem;font-size:18px;line-height:1.62;color:var(--ink-3)}
.cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.note{font-size:10px;line-height:1;letter-spacing:.2em;color:var(--dim);white-space:nowrap}

/* THE BUTTON — bone on the dark, one 3px pixel step at each corner */
.button{display:inline-flex;align-items:center;gap:12px;padding:15px 22px;background:var(--ink);color:var(--ground);
  text-decoration:none;font-size:11px;line-height:1;letter-spacing:.2em;white-space:nowrap;
  clip-path:polygon(3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),
    0 calc(100% - 3px),0 3px,3px 3px)}
.button:hover{background:#fff;color:var(--ground)}
/* the clip-path would cut an outline, so the focus ring is drawn inside */
.button:focus-visible{outline:2px solid var(--ground);outline-offset:-6px}
/* the dot is the page's block; the door's button takes band 2, as drawn */
.button-dot{display:block;width:8px;height:8px;background:var(--accent)}
.p-door .button-dot{background:#ff5500}
/* the press kit's download stands a little taller */
.button-tall{gap:14px;padding:16px 22px}
/* not a link yet (the game's store slot): the button's shape, no hover */
.button-still,.button-still:hover{background:var(--ink);cursor:default}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:30px 0 0}
.chips li{font-size:10px;line-height:1;letter-spacing:.16em;color:var(--dim);border:1px solid rgba(242,235,224,.14);
  padding:8px 10px;white-space:nowrap}

/* THE DEVICE — an iPhone in whole pixels: three 3px steps at each corner */
.device{position:relative;margin:0;justify-self:center;width:min(100%,330px);padding:9px;background:var(--frame);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,calc(100% - 9px) 3px,calc(100% - 6px) 3px,calc(100% - 6px) 6px,
    calc(100% - 3px) 6px,calc(100% - 3px) 9px,100% 9px,100% calc(100% - 9px),calc(100% - 3px) calc(100% - 9px),
    calc(100% - 3px) calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) calc(100% - 3px),
    calc(100% - 9px) calc(100% - 3px),calc(100% - 9px) 100%,9px 100%,9px calc(100% - 3px),6px calc(100% - 3px),
    6px calc(100% - 6px),3px calc(100% - 6px),3px calc(100% - 9px),0 calc(100% - 9px),0 9px,3px 9px,3px 6px,
    6px 6px,6px 3px,9px 3px)}
.device img{width:100%;height:auto;image-rendering:pixelated;background:#0c0301}
/* the island and the home line, in the body's own material */
.device::before,.device::after{content:"";position:absolute;left:50%;transform:translateX(-50%);background:var(--frame);pointer-events:none}
.device::before{top:6px;width:54px;height:12px}
.device::after{bottom:3px;width:78px;height:3px;opacity:.85}

/* -- the board ------------------------------------------------------------ */
.board-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(36px,5vw,72px);align-items:center;padding-bottom:var(--section)}
.board-frame{justify-self:center;background:var(--board-ground);padding:18px;border:1px solid var(--board-edge)}
.board{--cell:17px;display:grid;grid-template-columns:78px repeat(16,var(--cell));grid-template-rows:88px repeat(16,var(--cell))}
.board-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;
  font-size:10px;line-height:1.3;color:var(--board-clue)}
.board-rowclue{display:flex;justify-content:flex-end;align-items:center;gap:5px;padding-right:9px;
  font-size:10px;line-height:1;color:var(--board-clue)}
.board i{display:block;background:var(--board-cell);box-shadow:inset 0 0 0 1px var(--board-grid)}
/* The board is 78 + 16 × 17 wide plus its padding: 388px, which does not fit
   a 390pt phone's 350px column. There the cells step down to 15px and the
   clue gutters with them (so 330px), rather than scaling the board. */
@media (max-width:430px){
  .board-frame{padding:12px}
  .board{--cell:15px;grid-template-columns:64px repeat(16,var(--cell));grid-template-rows:80px repeat(16,var(--cell))}
  .board-rowclue{gap:4px;padding-right:7px}
}
.board-lede{margin:0 0 20px;max-width:30rem;font-size:19px;line-height:1.55;letter-spacing:-.01em;color:var(--ink)}
.board-note{margin:0 0 26px;max-width:30rem;font-size:16px;line-height:1.65;color:var(--dim)}
.mono-link{font-size:11px;line-height:1;letter-spacing:.2em;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}

/* -- the plate: what we don't do ------------------------------------------ */
/* the 1px gap over a hairline ground IS the divider; the cells carry no borders */
/* Six cells: at most three columns, so a wide screen never leaves an empty,
   hairline-grey cell at the end of the second row (3, 2 or 1 across). */
.plate{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(max(232px,calc((100% - 2px) / 3)),100%),1fr));
  gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin:0 0 var(--section)}
.plate li{background:var(--panel);padding:26px 24px 30px}
.plate b{display:block;margin:0 0 9px;font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)}
.plate span{display:block;font-size:14px;line-height:1.6;color:var(--dim)}

/* -- THE HONOURS: the page reading the viewer's system back to them --------
   Every live value is a media query, so the row is the proof and not the
   claim. A value shows only where its query holds. */
.honours-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(28px,4vw,56px);align-items:start;padding-bottom:var(--section)}
.honours{margin:0;border:1px solid var(--hairline);background:var(--panel)}
.honours div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 18px}
.honours div + div{box-shadow:inset 0 1px 0 0 var(--hairline-soft)}
.honours dt{margin:0;white-space:nowrap;font-size:10px;line-height:1.4;letter-spacing:.2em;color:var(--dim)}
.honours dd{margin:0;font-size:14px;line-height:1.4;text-align:right;color:var(--ink)}
.honours dd.quiet{color:var(--dim)}
.honours .alt{display:none}
@media (prefers-reduced-motion:reduce){.r-motion .alt{display:inline}.r-motion .norm{display:none}}
@media (prefers-contrast:more){.r-contrast .alt{display:inline}.r-contrast .norm{display:none}}
@media (any-pointer:coarse){.r-pointer .alt{display:inline}.r-pointer .norm{display:none}}
.honours-note{margin:0;max-width:28rem;font-size:15px;line-height:1.7;color:var(--dim)}

/* ==========================================================================
   THE INNER PAGES — the game, press, support, privacy
   ========================================================================== */
.kicker,.head-note,.facts dt,.file-links,.room-no,.strip-note,.pad-chips a,.marks figcaption,.dated{
  font-family:var(--mono);font-weight:600;text-transform:uppercase}

/* rule-row spacing, per the design's rhythm */
.rule-row-lede{margin-bottom:clamp(28px,4vh,44px)}
.rule-row-tight{margin-bottom:clamp(24px,3vh,34px)}
.rule-row-press{margin-bottom:clamp(24px,3vh,36px)}
.rule-row-shots{margin-bottom:clamp(20px,2.6vh,28px)}
.rule-row-qa{margin-bottom:clamp(20px,2.6vh,30px)}
.rule-row-sub{margin-bottom:26px}
.rule-row-sub-close{margin-bottom:24px}
/* a section heading inside a column: smaller, closer */
.rule-row-mini{gap:16px;margin-bottom:16px}
.rule-row-mini h2{font-size:10px;letter-spacing:.24em}

/* the mat every screenshot sits in; the device frame is kept for the one hero */
.mat{display:block;margin:0;padding:6px;background:var(--panel-frame);border:1px solid var(--hairline-soft)}
.mat img{display:block;width:100%;height:auto;image-rendering:pixelated;background:var(--board-ground)}

/* the page head: kicker in the accent, a sans headline, the lede */
.head{padding:clamp(34px,6vh,70px) 0 clamp(44px,7vh,80px);max-width:44rem}
.p-press .head{padding-bottom:clamp(44px,7vh,76px)}
.kicker{margin:0 0 20px;font-size:10px;line-height:1;letter-spacing:.3em;color:var(--accent)}
.head h1{margin:0 0 24px;font-size:clamp(30px,4.4vw,52px);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--ink)}
.head-lede{margin:0;max-width:33rem;font-size:19px;line-height:1.6;color:var(--ink-3)}
.head-lede-press{margin-bottom:28px;max-width:34rem}
.head-lede a,.facts a,.description a,.qa a,.policy a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:.2em}
.head-lede a:hover,.facts a:hover,.qa a:hover,.policy a:hover{color:var(--ember)}
.head-note{margin:16px 0 0;font-size:10px;line-height:1.7;letter-spacing:.2em;color:var(--dim)}

/* -- the game's page ------------------------------------------------------ */
.game-hero{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  padding:clamp(34px,6vh,66px) 0 clamp(56px,9vh,96px)}
.torch-hero{inset:-12% -8%;
  background-image:radial-gradient(44% 48% at 74% 46%,rgba(255,115,62,.26) 0%,rgba(255,115,62,.07) 46%,transparent 72%)}
/* the drawn title, larger: NONOGRAM ×5, DEPTHS ×12 (the design's 214 and 424 at whole scales) */
.title-lg{margin:0 0 24px}
.title-lg .title-word{width:min(100%,235px)}
.title-lg .title-name{width:min(100%,420px);margin-top:14px}
/* Ashlar Depths' title in the game's own two inks (its og card and title
   screen: ASHLAR #868c83 over DEPTHS #ffb040). ASHLAR 35 × 7 at ×5 on both
   the card and the page; DEPTHS keeps the title's ×11 and ×12. */
.title-ashlar .title-word,.title-lg.title-ashlar .title-word{width:min(100%,175px);color:#868c83}
.title-ashlar .title-word svg{aspect-ratio:35/7}
.title-ashlar .title-name,.title-ashlar:hover .title-name{color:#ffb040}
.title-ashlar:hover .title-word{color:#868c83}
/* its portal light is gold on teal, not the catacombs' ember */
.torch.torch-ashlar{background-image:radial-gradient(42% 46% at 72% 42%,rgba(255,176,64,.2) 0%,rgba(47,157,173,.06) 45%,transparent 72%)}
.deck-hero{margin-bottom:22px}
.promo-hero{margin-bottom:30px;max-width:32rem;font-size:19px;line-height:1.6;color:var(--ink)}
.p-game .note{line-height:1.6}
.device-lg{width:min(100%,352px)}
.device-lg::before{width:56px}
.device-lg::after{width:82px}
.game-lede{margin:0 0 clamp(52px,8vh,88px);max-width:40rem;font-size:clamp(19px,2vw,23px);line-height:1.52;
  letter-spacing:-.012em;color:var(--ink)}
/* the pitch: the plate again, its labels in the page's block */
.plate-pitch{grid-template-columns:repeat(auto-fit,minmax(min(max(252px,calc((100% - 2px) / 3)),100%),1fr))}
.plate-pitch li{padding:28px 26px 32px}
.plate-pitch b{margin:0 0 12px;font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.plate-pitch span{font-size:15px;line-height:1.65;color:var(--ink-3)}
/* the ten rooms: the one horizontal scroller, bleeding to the viewport edge */
.strip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 24px;scroll-padding-inline:var(--gutter)}
.strip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.room{flex:0 0 auto;width:204px;margin:0;scroll-snap-align:start}
.room figcaption{margin-top:12px}
.room-no{display:block;font-size:9px;line-height:1;letter-spacing:.2em;color:var(--dim)}
.room-cap{display:block;margin-top:7px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.strip-note{margin:0 0 var(--section);font-size:10px;line-height:1.7;letter-spacing:.2em;color:var(--dim)}

/* -- the press kit -------------------------------------------------------- */
.facts{margin:0 0 clamp(60px,9vh,100px);border:1px solid var(--hairline);background:var(--panel);max-width:52rem}
.facts div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,3fr);gap:10px 24px;padding:15px 20px}
.facts div + div{box-shadow:inset 0 1px 0 0 var(--hairline-soft)}
.facts dt{margin:0;font-size:10px;line-height:1.6;letter-spacing:.18em;color:var(--dim)}
.facts dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
/* on the smallest phones the address outgrows the value column: stack the row */
@media (max-width:400px){.facts div{grid-template-columns:minmax(0,1fr);gap:4px}}
.press-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(32px,5vw,64px);margin-bottom:clamp(60px,9vh,100px)}
.press-pair-narrow{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.description{margin:0;padding:0 0 0 22px;border-left:2px solid var(--accent)}
.description p{margin:0 0 16px;font-size:16.5px;line-height:1.62;color:var(--ink-3)}
.description p:last-child{margin-bottom:0}
.description p.bright{color:var(--ink)}
.differences{margin:0}
.differences div{padding:16px 0;box-shadow:inset 0 1px 0 0 var(--hairline-soft)}
.differences dt{margin:0 0 7px;font-size:15px;line-height:1.35;font-weight:600;color:var(--ink)}
.differences dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--dim)}
.icon-row{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:clamp(60px,9vh,100px)}
.icon-row img{width:118px;height:118px;image-rendering:pixelated}
.file-links{margin:0;font-size:10px;line-height:2;letter-spacing:.16em;color:var(--dim)}
.file-links a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.25em}
.file-links a:hover{color:var(--ember)}
.file-links-row{margin:0 0 12px;letter-spacing:.14em}
.shots-note{margin:0 0 30px;max-width:34rem;font-size:15px;line-height:1.65;color:var(--dim)}
.shots-note-pad{margin-bottom:20px}
.shots{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:26px 20px;
  padding:0;margin:0 0 clamp(52px,8vh,84px)}
.shots li,.shots figure{margin:0}
.shots .mat{padding:5px;text-decoration:none}
.shots .mat:hover{border-color:var(--accent)}
.shots figcaption{margin-top:11px}
.shots .room-cap{margin-top:6px;font-size:13px}
.pad-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;padding:0;margin:0 0 clamp(60px,9vh,100px)}
.pad-chips li{margin:0}
.pad-chips a{display:block;font-size:10px;line-height:1;letter-spacing:.16em;color:var(--dim);
  border:1px solid rgba(242,235,224,.14);padding:9px 11px;text-decoration:none;white-space:nowrap}
.pad-chips a:hover{color:var(--ink);border-color:var(--accent)}
.reel-note{margin:0 0 22px;max-width:30rem;font-size:15.5px;line-height:1.65;color:var(--ink-3)}
.reel{width:min(100%,182px);padding:5px}
.marks{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-bottom:20px}
.marks figure{margin:0}
.marks img{image-rendering:pixelated;height:auto}
/* the mark at ×3 of its 72 × 32 art (216px); the tile at the design's 86px */
.marks .mark-dark{width:216px}
.marks .mark-tile{width:86px}
.marks figcaption{margin-top:10px;font-size:9px;line-height:1;letter-spacing:.2em;color:var(--dim)}
.mark-rule{margin:0;max-width:26rem;font-size:14px;line-height:1.6;color:var(--dim)}
.studio-wide{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.studio-wide p{max-width:30rem}

/* -- support: questions, each with the page's pip ------------------------- */
.qa{margin:0 0 clamp(60px,9vh,100px);max-width:46rem}
.qa div{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:16px;padding:24px 0;
  box-shadow:inset 0 1px 0 0 var(--hairline)}
.qa div::before{content:"";grid-column:1;grid-row:1;width:7px;height:7px;margin-top:8px;background:var(--accent)}
.qa dt{grid-column:2;grid-row:1;margin:0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.qa dd{grid-column:2;margin:10px 0 0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.qa em{font-style:normal;color:var(--ink)}

/* -- privacy: six sections, two columns ----------------------------------- */
.policy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(30px,4vw,64px) clamp(32px,5vw,72px);margin-bottom:clamp(56px,8vh,92px)}
.policy section p{margin:0;max-width:32rem;font-size:15.5px;line-height:1.72;color:var(--muted)}
.dated{margin:0;font-size:11px;line-height:1.7;letter-spacing:.16em;color:var(--dim)}
.studio p.dated{font-size:11px;color:var(--dim)}

/* -- the studio / write to us --------------------------------------------- */
.studio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(28px,4vw,56px);
  padding:clamp(40px,6vh,64px) 0 clamp(80px,12vh,130px);border-top:1px solid var(--hairline)}
.studio h2{margin:0 0 14px;font-size:10px;line-height:1;letter-spacing:.24em;color:var(--dim)}
.studio p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-3)}
.studio p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em}
.studio p a:hover{color:var(--ember)}

/* -- THE DEEP FOOTER: mostly the darkness, and static --------------------- */
.deep{position:relative;background:var(--ground-deep);border-top:1px solid rgba(242,235,224,.09)}
.band-foot{height:6px}
.deep-inner{max-width:1140px;margin:0 auto;padding:clamp(40px,6vh,64px) var(--gutter) 34px}
.deep-row{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(32px,6vw,72px);flex-wrap:wrap}
.deep-brand{flex:0 1 auto}
/* markBlock 68 × 24 at ×4 */
.deep-mark{display:block;width:min(100%,272px);line-height:0}
.deep-mark svg{width:100%;height:auto;aspect-ratio:68/24;color:var(--ink)}
.deep-nav{display:flex;flex-direction:column;gap:14px;flex:0 0 auto}
.deep-nav a{font-size:10px;line-height:1;letter-spacing:.2em;color:var(--dim);text-decoration:none;white-space:nowrap}
.deep-nav a:hover{color:var(--ink)}
.deep-write{flex:0 0 auto}
.deep-head{margin:0 0 12px;font-size:10px;line-height:1;letter-spacing:.22em;color:var(--dim)}
.deep-mail{margin:0;font-size:15px;line-height:1.6}
.deep-mail a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(242,235,224,.3);text-underline-offset:.2em;white-space:nowrap}
.deep-mail a:hover{color:var(--ember)}
.colophon{margin:clamp(40px,6vh,60px) 0 0;padding-top:22px;border-top:1px solid var(--hairline-soft);
  font-size:12px;line-height:1.7;color:var(--dim);max-width:46rem}


/* -- THE BOARD FILLS ITSELF ------------------------------------------------
   The Eye's 118 stones reveal in reading order, one per 58 ms, hold two
   seconds, clear and go again (a 154-tick cycle, as in the design). Each
   stone has its own keyframes because each is lit for a different share of
   the cycle; each lights over 120 ms, and all clear together. */
.board i.f{animation-timing-function:linear;animation-iteration-count:infinite}
/* gen:board */
.board i.f{animation-duration:8932ms}
@keyframes bf0{0%,0.649%{background-color:var(--board-cell)}1.993%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f0{animation-name:bf0}
@keyframes bf1{0%,1.299%{background-color:var(--board-cell)}2.642%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f1{animation-name:bf1}
@keyframes bf2{0%,1.948%{background-color:var(--board-cell)}3.292%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f2{animation-name:bf2}
@keyframes bf3{0%,2.597%{background-color:var(--board-cell)}3.941%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f3{animation-name:bf3}
@keyframes bf4{0%,3.247%{background-color:var(--board-cell)}4.590%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f4{animation-name:bf4}
@keyframes bf5{0%,3.896%{background-color:var(--board-cell)}5.240%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f5{animation-name:bf5}
@keyframes bf6{0%,4.545%{background-color:var(--board-cell)}5.889%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f6{animation-name:bf6}
@keyframes bf7{0%,5.195%{background-color:var(--board-cell)}6.538%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f7{animation-name:bf7}
@keyframes bf8{0%,5.844%{background-color:var(--board-cell)}7.188%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f8{animation-name:bf8}
@keyframes bf9{0%,6.494%{background-color:var(--board-cell)}7.837%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f9{animation-name:bf9}
@keyframes bf10{0%,7.143%{background-color:var(--board-cell)}8.486%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f10{animation-name:bf10}
@keyframes bf11{0%,7.792%{background-color:var(--board-cell)}9.136%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f11{animation-name:bf11}
@keyframes bf12{0%,8.442%{background-color:var(--board-cell)}9.785%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f12{animation-name:bf12}
@keyframes bf13{0%,9.091%{background-color:var(--board-cell)}10.434%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f13{animation-name:bf13}
@keyframes bf14{0%,9.740%{background-color:var(--board-cell)}11.084%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f14{animation-name:bf14}
@keyframes bf15{0%,10.390%{background-color:var(--board-cell)}11.733%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f15{animation-name:bf15}
@keyframes bf16{0%,11.039%{background-color:var(--board-cell)}12.382%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f16{animation-name:bf16}
@keyframes bf17{0%,11.688%{background-color:var(--board-cell)}13.032%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f17{animation-name:bf17}
@keyframes bf18{0%,12.338%{background-color:var(--board-cell)}13.681%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f18{animation-name:bf18}
@keyframes bf19{0%,12.987%{background-color:var(--board-cell)}14.330%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f19{animation-name:bf19}
@keyframes bf20{0%,13.636%{background-color:var(--board-cell)}14.980%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f20{animation-name:bf20}
@keyframes bf21{0%,14.286%{background-color:var(--board-cell)}15.629%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f21{animation-name:bf21}
@keyframes bf22{0%,14.935%{background-color:var(--board-cell)}16.279%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f22{animation-name:bf22}
@keyframes bf23{0%,15.584%{background-color:var(--board-cell)}16.928%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f23{animation-name:bf23}
@keyframes bf24{0%,16.234%{background-color:var(--board-cell)}17.577%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f24{animation-name:bf24}
@keyframes bf25{0%,16.883%{background-color:var(--board-cell)}18.227%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f25{animation-name:bf25}
@keyframes bf26{0%,17.532%{background-color:var(--board-cell)}18.876%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f26{animation-name:bf26}
@keyframes bf27{0%,18.182%{background-color:var(--board-cell)}19.525%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f27{animation-name:bf27}
@keyframes bf28{0%,18.831%{background-color:var(--board-cell)}20.175%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f28{animation-name:bf28}
@keyframes bf29{0%,19.481%{background-color:var(--board-cell)}20.824%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f29{animation-name:bf29}
@keyframes bf30{0%,20.130%{background-color:var(--board-cell)}21.473%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f30{animation-name:bf30}
@keyframes bf31{0%,20.779%{background-color:var(--board-cell)}22.123%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f31{animation-name:bf31}
@keyframes bf32{0%,21.429%{background-color:var(--board-cell)}22.772%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f32{animation-name:bf32}
@keyframes bf33{0%,22.078%{background-color:var(--board-cell)}23.421%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f33{animation-name:bf33}
@keyframes bf34{0%,22.727%{background-color:var(--board-cell)}24.071%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f34{animation-name:bf34}
@keyframes bf35{0%,23.377%{background-color:var(--board-cell)}24.720%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f35{animation-name:bf35}
@keyframes bf36{0%,24.026%{background-color:var(--board-cell)}25.369%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f36{animation-name:bf36}
@keyframes bf37{0%,24.675%{background-color:var(--board-cell)}26.019%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f37{animation-name:bf37}
@keyframes bf38{0%,25.325%{background-color:var(--board-cell)}26.668%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f38{animation-name:bf38}
@keyframes bf39{0%,25.974%{background-color:var(--board-cell)}27.318%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f39{animation-name:bf39}
@keyframes bf40{0%,26.623%{background-color:var(--board-cell)}27.967%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f40{animation-name:bf40}
@keyframes bf41{0%,27.273%{background-color:var(--board-cell)}28.616%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f41{animation-name:bf41}
@keyframes bf42{0%,27.922%{background-color:var(--board-cell)}29.266%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f42{animation-name:bf42}
@keyframes bf43{0%,28.571%{background-color:var(--board-cell)}29.915%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f43{animation-name:bf43}
@keyframes bf44{0%,29.221%{background-color:var(--board-cell)}30.564%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f44{animation-name:bf44}
@keyframes bf45{0%,29.870%{background-color:var(--board-cell)}31.214%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f45{animation-name:bf45}
@keyframes bf46{0%,30.519%{background-color:var(--board-cell)}31.863%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f46{animation-name:bf46}
@keyframes bf47{0%,31.169%{background-color:var(--board-cell)}32.512%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f47{animation-name:bf47}
@keyframes bf48{0%,31.818%{background-color:var(--board-cell)}33.162%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f48{animation-name:bf48}
@keyframes bf49{0%,32.468%{background-color:var(--board-cell)}33.811%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f49{animation-name:bf49}
@keyframes bf50{0%,33.117%{background-color:var(--board-cell)}34.460%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f50{animation-name:bf50}
@keyframes bf51{0%,33.766%{background-color:var(--board-cell)}35.110%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f51{animation-name:bf51}
@keyframes bf52{0%,34.416%{background-color:var(--board-cell)}35.759%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f52{animation-name:bf52}
@keyframes bf53{0%,35.065%{background-color:var(--board-cell)}36.408%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f53{animation-name:bf53}
@keyframes bf54{0%,35.714%{background-color:var(--board-cell)}37.058%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f54{animation-name:bf54}
@keyframes bf55{0%,36.364%{background-color:var(--board-cell)}37.707%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f55{animation-name:bf55}
@keyframes bf56{0%,37.013%{background-color:var(--board-cell)}38.356%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f56{animation-name:bf56}
@keyframes bf57{0%,37.662%{background-color:var(--board-cell)}39.006%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f57{animation-name:bf57}
@keyframes bf58{0%,38.312%{background-color:var(--board-cell)}39.655%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f58{animation-name:bf58}
@keyframes bf59{0%,38.961%{background-color:var(--board-cell)}40.305%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f59{animation-name:bf59}
@keyframes bf60{0%,39.610%{background-color:var(--board-cell)}40.954%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f60{animation-name:bf60}
@keyframes bf61{0%,40.260%{background-color:var(--board-cell)}41.603%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f61{animation-name:bf61}
@keyframes bf62{0%,40.909%{background-color:var(--board-cell)}42.253%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f62{animation-name:bf62}
@keyframes bf63{0%,41.558%{background-color:var(--board-cell)}42.902%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f63{animation-name:bf63}
@keyframes bf64{0%,42.208%{background-color:var(--board-cell)}43.551%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f64{animation-name:bf64}
@keyframes bf65{0%,42.857%{background-color:var(--board-cell)}44.201%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f65{animation-name:bf65}
@keyframes bf66{0%,43.506%{background-color:var(--board-cell)}44.850%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f66{animation-name:bf66}
@keyframes bf67{0%,44.156%{background-color:var(--board-cell)}45.499%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f67{animation-name:bf67}
@keyframes bf68{0%,44.805%{background-color:var(--board-cell)}46.149%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f68{animation-name:bf68}
@keyframes bf69{0%,45.455%{background-color:var(--board-cell)}46.798%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f69{animation-name:bf69}
@keyframes bf70{0%,46.104%{background-color:var(--board-cell)}47.447%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f70{animation-name:bf70}
@keyframes bf71{0%,46.753%{background-color:var(--board-cell)}48.097%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f71{animation-name:bf71}
@keyframes bf72{0%,47.403%{background-color:var(--board-cell)}48.746%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f72{animation-name:bf72}
@keyframes bf73{0%,48.052%{background-color:var(--board-cell)}49.395%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f73{animation-name:bf73}
@keyframes bf74{0%,48.701%{background-color:var(--board-cell)}50.045%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f74{animation-name:bf74}
@keyframes bf75{0%,49.351%{background-color:var(--board-cell)}50.694%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f75{animation-name:bf75}
@keyframes bf76{0%,50.000%{background-color:var(--board-cell)}51.343%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f76{animation-name:bf76}
@keyframes bf77{0%,50.649%{background-color:var(--board-cell)}51.993%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f77{animation-name:bf77}
@keyframes bf78{0%,51.299%{background-color:var(--board-cell)}52.642%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f78{animation-name:bf78}
@keyframes bf79{0%,51.948%{background-color:var(--board-cell)}53.292%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f79{animation-name:bf79}
@keyframes bf80{0%,52.597%{background-color:var(--board-cell)}53.941%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f80{animation-name:bf80}
@keyframes bf81{0%,53.247%{background-color:var(--board-cell)}54.590%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f81{animation-name:bf81}
@keyframes bf82{0%,53.896%{background-color:var(--board-cell)}55.240%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f82{animation-name:bf82}
@keyframes bf83{0%,54.545%{background-color:var(--board-cell)}55.889%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f83{animation-name:bf83}
@keyframes bf84{0%,55.195%{background-color:var(--board-cell)}56.538%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f84{animation-name:bf84}
@keyframes bf85{0%,55.844%{background-color:var(--board-cell)}57.188%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f85{animation-name:bf85}
@keyframes bf86{0%,56.494%{background-color:var(--board-cell)}57.837%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f86{animation-name:bf86}
@keyframes bf87{0%,57.143%{background-color:var(--board-cell)}58.486%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f87{animation-name:bf87}
@keyframes bf88{0%,57.792%{background-color:var(--board-cell)}59.136%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f88{animation-name:bf88}
@keyframes bf89{0%,58.442%{background-color:var(--board-cell)}59.785%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f89{animation-name:bf89}
@keyframes bf90{0%,59.091%{background-color:var(--board-cell)}60.434%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f90{animation-name:bf90}
@keyframes bf91{0%,59.740%{background-color:var(--board-cell)}61.084%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f91{animation-name:bf91}
@keyframes bf92{0%,60.390%{background-color:var(--board-cell)}61.733%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f92{animation-name:bf92}
@keyframes bf93{0%,61.039%{background-color:var(--board-cell)}62.382%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f93{animation-name:bf93}
@keyframes bf94{0%,61.688%{background-color:var(--board-cell)}63.032%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f94{animation-name:bf94}
@keyframes bf95{0%,62.338%{background-color:var(--board-cell)}63.681%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f95{animation-name:bf95}
@keyframes bf96{0%,62.987%{background-color:var(--board-cell)}64.330%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f96{animation-name:bf96}
@keyframes bf97{0%,63.636%{background-color:var(--board-cell)}64.980%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f97{animation-name:bf97}
@keyframes bf98{0%,64.286%{background-color:var(--board-cell)}65.629%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f98{animation-name:bf98}
@keyframes bf99{0%,64.935%{background-color:var(--board-cell)}66.279%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f99{animation-name:bf99}
@keyframes bf100{0%,65.584%{background-color:var(--board-cell)}66.928%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f100{animation-name:bf100}
@keyframes bf101{0%,66.234%{background-color:var(--board-cell)}67.577%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f101{animation-name:bf101}
@keyframes bf102{0%,66.883%{background-color:var(--board-cell)}68.227%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f102{animation-name:bf102}
@keyframes bf103{0%,67.532%{background-color:var(--board-cell)}68.876%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f103{animation-name:bf103}
@keyframes bf104{0%,68.182%{background-color:var(--board-cell)}69.525%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f104{animation-name:bf104}
@keyframes bf105{0%,68.831%{background-color:var(--board-cell)}70.175%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f105{animation-name:bf105}
@keyframes bf106{0%,69.481%{background-color:var(--board-cell)}70.824%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f106{animation-name:bf106}
@keyframes bf107{0%,70.130%{background-color:var(--board-cell)}71.473%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f107{animation-name:bf107}
@keyframes bf108{0%,70.779%{background-color:var(--board-cell)}72.123%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f108{animation-name:bf108}
@keyframes bf109{0%,71.429%{background-color:var(--board-cell)}72.772%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f109{animation-name:bf109}
@keyframes bf110{0%,72.078%{background-color:var(--board-cell)}73.421%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f110{animation-name:bf110}
@keyframes bf111{0%,72.727%{background-color:var(--board-cell)}74.071%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f111{animation-name:bf111}
@keyframes bf112{0%,73.377%{background-color:var(--board-cell)}74.720%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f112{animation-name:bf112}
@keyframes bf113{0%,74.026%{background-color:var(--board-cell)}75.369%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f113{animation-name:bf113}
@keyframes bf114{0%,74.675%{background-color:var(--board-cell)}76.019%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f114{animation-name:bf114}
@keyframes bf115{0%,75.325%{background-color:var(--board-cell)}76.668%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f115{animation-name:bf115}
@keyframes bf116{0%,75.974%{background-color:var(--board-cell)}77.318%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f116{animation-name:bf116}
@keyframes bf117{0%,76.623%{background-color:var(--board-cell)}77.967%,98.657%{background-color:var(--board-fill)}100%{background-color:var(--board-cell)}}.board .f117{animation-name:bf117}
/* /gen:board */

/* -- THE CARD (his ask 2026-09-06 night) -----------------------------------
   The game's studio card on the studio's door, by CSS alone. The mark is
   struck at the largest integer k (2 to 9) with 72k no more than 55% of
   the shorter edge; img/card.png holds every frame in the mark's 72 × 32 box,
   and the keyframes (generated by Tools/marketing/build_site.py from
   nfmark.py, the Swift's port) step through it at the game's tempo. A tap is
   the game's skip: the still, then the handover, which is never skipped.
   The design skips the card entirely under Reduce Motion. A script could
   show it once a session; this site has none, so it plays at every visit
   to the door. */
.card-skip{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card{--k:2;--fh:calc(32px * var(--k));position:fixed;inset:0;z-index:60;background:var(--ground);cursor:pointer;
  animation:card-out .38s ease-out var(--card-run) forwards}
.card-mark{position:absolute;left:50%;top:52vh;width:calc(72px * var(--k));height:var(--fh);
  margin:calc(-30px * var(--k)) 0 0 calc(-36px * var(--k));
  background:url(/img/card.png) 0 0/calc(72px * var(--k)) auto no-repeat;image-rendering:pixelated;
  animation:card-run var(--card-run) step-end forwards}
.card-skip:checked+.card{animation-delay:var(--card-skip)}
.card-skip:checked+.card .card-mark{animation:card-skip var(--card-skip) step-end forwards}
.card-skip:focus-visible+.card{outline:2px solid var(--ink);outline-offset:-6px}
@keyframes card-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
/* gen:card-scale */
@media (min-width:393px) and (min-height:393px){.card{--k:3}}
@media (min-width:524px) and (min-height:524px){.card{--k:4}}
@media (min-width:655px) and (min-height:655px){.card{--k:5}}
@media (min-width:786px) and (min-height:786px){.card{--k:6}}
@media (min-width:917px) and (min-height:917px){.card{--k:7}}
@media (min-width:1048px) and (min-height:1048px){.card{--k:8}}
@media (min-width:1179px) and (min-height:1179px){.card{--k:9}}
/* /gen:card-scale */
/* gen:card */
/* generated by build_site.py: 29 frames, 10 fps, the portal outro */
@keyframes card-run{0.000%{background-position:0 calc(-0 * var(--fh))}2.364%{background-position:0 calc(-1 * var(--fh))}4.728%{background-position:0 calc(-2 * var(--fh))}7.092%{background-position:0 calc(-3 * var(--fh))}9.456%{background-position:0 calc(-4 * var(--fh))}11.820%{background-position:0 calc(-5 * var(--fh))}14.184%{background-position:0 calc(-6 * var(--fh))}16.548%{background-position:0 calc(-7 * var(--fh))}18.913%{background-position:0 calc(-8 * var(--fh))}21.277%{background-position:0 calc(-9 * var(--fh))}23.641%{background-position:0 calc(-10 * var(--fh))}26.005%{background-position:0 calc(-11 * var(--fh))}28.369%{background-position:0 calc(-12 * var(--fh))}30.733%{background-position:0 calc(-13 * var(--fh))}33.097%{background-position:0 calc(-14 * var(--fh))}35.461%{background-position:0 calc(-15 * var(--fh))}37.825%{background-position:0 calc(-16 * var(--fh))}40.189%{background-position:0 calc(-17 * var(--fh))}42.553%{background-position:0 calc(-18 * var(--fh))}44.917%{background-position:0 calc(-19 * var(--fh))}47.281%{background-position:0 calc(-20 * var(--fh))}68.558%{background-position:0 calc(-21 * var(--fh))}71.158%{background-position:0 calc(-22 * var(--fh))}73.759%{background-position:0 calc(-23 * var(--fh))}76.359%{background-position:0 calc(-24 * var(--fh))}78.960%{background-position:0 calc(-25 * var(--fh))}81.560%{background-position:0 calc(-26 * var(--fh))}84.161%{background-position:0 calc(-27 * var(--fh))}86.761%{background-position:0 calc(-28 * var(--fh))}100%{background-position:0 calc(-28 * var(--fh))}}
@keyframes card-skip{0.000%{background-position:0 calc(-20 * var(--fh))}40.359%{background-position:0 calc(-21 * var(--fh))}45.291%{background-position:0 calc(-22 * var(--fh))}50.224%{background-position:0 calc(-23 * var(--fh))}55.157%{background-position:0 calc(-24 * var(--fh))}60.090%{background-position:0 calc(-25 * var(--fh))}65.022%{background-position:0 calc(-26 * var(--fh))}69.955%{background-position:0 calc(-27 * var(--fh))}74.888%{background-position:0 calc(-28 * var(--fh))}100%{background-position:0 calc(-28 * var(--fh))}}
@keyframes card-reduced{0.000%{background-position:0 calc(-20 * var(--fh))}56.106%{background-position:0 calc(-21 * var(--fh))}59.736%{background-position:0 calc(-22 * var(--fh))}63.366%{background-position:0 calc(-23 * var(--fh))}66.997%{background-position:0 calc(-24 * var(--fh))}70.627%{background-position:0 calc(-25 * var(--fh))}74.257%{background-position:0 calc(-26 * var(--fh))}77.888%{background-position:0 calc(-27 * var(--fh))}81.518%{background-position:0 calc(-28 * var(--fh))}100%{background-position:0 calc(-28 * var(--fh))}}
:root{--card-run:4230ms;--card-skip:2230ms;--card-reduced:3030ms}
/* /gen:card */

/* -- Reduce Motion: a still form for every moment -------------------------
   The card is not shown, the shafts hang still at their resting length, the
   board stands solved, the torch holds its light. */
@media (prefers-reduced-motion:reduce){
  .card,.card-skip{display:none}
  .shaft-glow,.shaft-edge{animation:none}
  .board i.f{animation:none;background:var(--board-fill)}
  .torch{animation:none;opacity:.94}
}