/* dragonlock.app v2. One stylesheet for every page. The app's Lantern system (docs/design-system.md): the dusk world,
   the parent's study at night, old bronze for fittings, parchment for what you read closely, and lamplight only for good
   things happening. Fonts: Latin subsets of the app's OFL Alegreya and Alegreya Sans (scripts/site/fonts.py).
   No third-party anything; the CSP in _headers forbids inline styles, so every position lives here. */

@font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/fonts/alegreya-sans-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/fonts/alegreya-sans-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Fallbacks sized to Alegreya's metrics (scripts/site/fonts.py notes), so the swap to the web fonts barely moves the page */
@font-face { font-family: "Alegreya fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 900; size-adjust: 80.7%; ascent-override: 125.9%; descent-override: 42.7%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya fallback"; src: local("Georgia"); font-weight: 400 599; size-adjust: 92.4%; ascent-override: 110%; descent-override: 37.3%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Sans fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 85.4%; ascent-override: 105.4%; descent-override: 35.1%; line-gap-override: 0%; }

:root {
  --night: #17110E; --pool: #2B1E16; --surface: #211812; --edge: #3D2E24;
  --bone: #F1E3CC; --muted: #BBA68C; --dim: #8F7B66;
  --core: #FFE4B8; --warm: #F4A961; --hot: #FFF4E2; --ember: #DB7A3E;
  --brass-l: #ECCDA4; --brass: #B5845A; --brass-d: #5E3B24;
  --parch: #F4E9D3; --parch-d: #E6D2AC; --ink: #3B2A1A; --ink-soft: #6B4E33;
  --paper: #FFFDF8; --paper-ink: #17151E; --wax: #B8322A;
  --dusk: #0E1430; --dusk-2: #1F2B52; --wick: #1E4FE0;
  --display: "Alegreya", "Alegreya fallback", Georgia, serif;
  --body: "Alegreya Sans", "Alegreya Sans fallback", system-ui, sans-serif;
  --wrap: 75rem;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --settle: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--bone); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--body); font-kerning: normal; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--core); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--hot); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h3 { font-weight: 700; line-height: 1.15; letter-spacing: 0; }
strong { font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -6rem; z-index: 50; padding: .75rem 1rem; background: var(--parch); color: var(--ink); border-radius: 10px; font-weight: 700; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* The small-cap line under a headline (the App Store screenshots' subline): true small caps from mixed case. */
.sub { font: 500 1.05rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .06em; color: var(--brass-l); margin: .9rem 0 0; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.5; }
.fine { font-size: .95rem; color: var(--muted); }

/* ------------------------------------------------------------------ buttons: the parent's lamp button */
.button { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem .8rem; border: 0; border-radius: 18px;
  font: 700 1.05rem/1 var(--body); color: #2A1608; text-decoration: none; cursor: pointer;
  background: linear-gradient(var(--core), var(--warm)); box-shadow: inset 0 1px 0 var(--hot), 0 4px 0 #A9562A, 0 10px 24px -8px rgba(219,122,62,.6);
  transition: transform .12s, box-shadow .12s; }
.button:hover { color: #2A1608; filter: brightness(1.04); }
.button:active { transform: translateY(4px); box-shadow: inset 0 1px 0 var(--hot), 0 0 0 #A9562A; }
/* an unlit lamp: clearly a button, clearly not ready yet */
.button[disabled] { cursor: not-allowed; color: #CDB79C; background: linear-gradient(#3B2C22, #2C2019); box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.35), 0 4px 0 #1A120D; }
.button[disabled]:hover { filter: none; color: #CDB79C; }
.button.quiet { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.55); }
.button.quiet:hover { box-shadow: inset 0 0 0 1.5px var(--brass-l); color: var(--hot); }

/* ------------------------------------------------------------------ the header */
.site-head { position: relative; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding-block: 1.1rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--bone); text-decoration: none; font: 800 1.55rem/1 var(--display); letter-spacing: -.01em; }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: none; border-radius: 26%; box-shadow: 0 0 0 1px rgba(236,205,164,.4), 0 2px 8px rgba(0,0,0,.35); }
.foot-brand .brand-mark { width: 1.9rem; height: 1.9rem; }
.brand:hover { color: var(--hot); }
.site-nav { display: flex; gap: .25rem 1.4rem; margin-left: auto; }
.site-nav a { color: var(--bone); text-decoration: none; font-weight: 700; font-size: 1rem; padding-block: .5rem; opacity: .86; }
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; color: var(--hot); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: .4em; }
.store-chip { display: inline-grid; padding: .45rem .9rem .45rem; border-radius: 12px; background: #0B0A0D; color: var(--bone);
  text-decoration: none; font: 700 1rem/1.05 var(--body); box-shadow: inset 0 0 0 1px rgba(241,227,204,.45); white-space: nowrap; }
.store-chip span { font-weight: 400; font-size: .72rem; letter-spacing: .02em; color: var(--muted); }
.store-chip:hover { color: var(--hot); box-shadow: inset 0 0 0 1px var(--brass-l); }
@media (max-width: 820px) {
  .site-head { flex-wrap: wrap; gap: .25rem 1rem; padding-block: .85rem .35rem; }
  .store-chip { margin-left: auto; }
  .site-nav { order: 3; width: 100%; margin: 0; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
  .site-nav a { font-size: .95rem; white-space: nowrap; }
}

/* ------------------------------------------------------------------ registered to the world
   A scene is an <img> of a painted world (assets/world/*.svg, object-fit: cover, anchored bottom-centre) with things
   standing in it at the painting's own coordinates. --u is one painting unit in px, the same scale the cover crop
   uses; --cx is half the painting's width and --vh its height. Positions come from scripts/site/world.mjs. */
.scene { position: relative; container-type: size; overflow: hidden; }
.scene > .world, .scene > picture > .world { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.scene { --u: max(100cqw / var(--vbw), 100cqh / var(--vbh)); }
.reg { position: absolute; left: calc(50% + (var(--x) - var(--vbw) / 2) * var(--u)); top: calc(100% - (var(--vbh) - var(--y)) * var(--u)); }

/* ------------------------------------------------------------------ the hero: one dusk scene
   The headline and the launch-news form on the sky at the left; Maya's quests pinned to a board on its posts by the
   trail; Wick on the stones in front of it, the lock (her phone) at the trail's end. On desktop the whole hero is a size
   container and the board stands in the painting like the lock does (its feet at the painting's own coordinates). */
.home .site-head { position: absolute; inset: 0 0 auto; width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; }
.hero { position: relative; background: var(--dusk); isolation: isolate; }
.hero-scene { --vbw: 1600; --vbh: 1000; }
.hero-scene::after { content: ""; position: absolute; inset: auto 0 0; height: 5rem; background: linear-gradient(rgba(23,17,14,0), rgba(23,17,14,.55) 55%, var(--night)); pointer-events: none; z-index: 4; }
.hero-copy { position: relative; z-index: 5; }
.hero h1 { font-size: clamp(3.3rem, min(7.6vw, 11.5vh), 7.4rem); line-height: .9; letter-spacing: -.02em; color: var(--bone);
  text-shadow: 0 4px 30px rgba(10,8,30,.55); }
.hero h1 span { display: block; white-space: nowrap; }
.hero .lede { max-width: 31rem; margin: 1.4rem 0 0; color: #EDE3D6; text-shadow: 0 1px 12px rgba(10,8,30,.6); }

/* launch news: the waitlist form, on the sky under the lede. One glass-and-brass field with the lamp button in it. */
.launch { max-width: 33rem; margin-top: 1.9rem; text-shadow: 0 1px 10px rgba(10,8,30,.8); }
.launch-head { margin: 0; font-size: 1.02rem; line-height: 1.45; color: #E2D6C6; }
.launch-head strong { color: var(--bone); }
.launch form { display: grid; gap: .6rem; margin-top: .85rem; }
.launch-row { display: flex; gap: .3rem; padding: .32rem; border-radius: 21px; background: rgba(9,8,24,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.42), 0 16px 34px -16px rgba(4,4,16,.9); transition: box-shadow .3s; }
.launch-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--brass-l), 0 0 0 4px rgba(244,169,97,.25), 0 16px 34px -16px rgba(4,4,16,.9); }
.launch-row input { flex: 1; min-width: 0; padding: .7rem .85rem; border: 0; border-radius: 16px; background: transparent; color: var(--bone); font: inherit; text-shadow: none; }
.launch-row input::placeholder { color: rgba(241,227,204,.55); }
.launch-row input:focus-visible { outline: none; }
.launch-row input:disabled { cursor: not-allowed; }
.launch-row .button { flex: none; border-radius: 16px; padding: .72rem 1.2rem .68rem; text-shadow: none; }
.launch-row .button[disabled] { box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.3); }
.launch .consent { display: flex; gap: .6rem; align-items: start; font-size: .92rem; line-height: 1.4; color: #D9CCBA; }
.launch .consent input { flex: none; margin: .18rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--warm); }
.launch .consent input:disabled { opacity: .6; }
.launch .consent a { white-space: nowrap; }
.launch .fine { margin: .55rem 0 0; font-size: .88rem; line-height: 1.45; color: #B9AB9A; }
.form-status { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--core); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* arriving from a "Get launch news" link: the field warms once */
.launch:target .launch-row { animation: beckon 1.6s var(--settle) .3s; }
@keyframes beckon { 30% { box-shadow: inset 0 0 0 1.5px var(--brass-l), 0 0 0 6px rgba(244,169,97,.35), 0 0 46px rgba(244,169,97,.45); } }
@media (max-width: 420px) {
  .launch-row .button { padding-inline: .9rem; }
}

@media (min-width: 1200px) {
  /* the hero is the painting's frame: as wide as the window, as tall as the window allows (16:10 at most) */
  .hero { container-type: size; height: max(740px, min(100svh, 62.5vw)); --vbw: 1600; --vbh: 1000;
    --u: max(100cqw / var(--vbw), 100cqh / var(--vbh)); }
  .hero-scene { position: absolute; inset: 0; }
  .hero-copy { position: absolute; top: 0; left: max(var(--gutter), (100cqw - 90rem) / 2); width: clamp(28rem, 560 * var(--u), 36rem);
    padding-top: clamp(6.5rem, 14vh, 10rem); }
  .hero h1 { font-size: clamp(3.6rem, 108 * var(--u), 7rem); }
  .hero .lede, .launch { max-width: none; }
  .hero-copy::before { content: ""; position: absolute; z-index: -1; left: -30vw; top: -10vh; width: 95vw; height: 120%;
    background: radial-gradient(closest-side, rgba(14,18,46,.55), rgba(14,18,46,0)); pointer-events: none; }
  /* the quest board stands in the painting: its sign's left edge and bottom, its posts down to the ground */
  .hero .quest-card { position: absolute; z-index: 2; margin: 0; width: 23em; font-size: clamp(14px, 17.5 * var(--u), 19px);
    left: calc(50% + (var(--x) - var(--vbw) / 2) * var(--u)); bottom: calc((var(--vbh) - var(--y)) * var(--u)); }
  .quest-card .post { display: block; height: calc((var(--ground) - var(--y)) * var(--u) + 1em); }
}
@media (max-width: 1199px) {
  .hero { display: flex; flex-direction: column; padding-top: 7.2rem; background: linear-gradient(var(--dusk), #141C3C 25%, #141C3C 40%, #2C3A22 60%, #1E2418 80%, var(--night)); }
  .hero-copy { display: contents; }
  .hero h1, .hero .lede, .launch { width: min(100% - 2 * var(--gutter), 40rem); max-width: none; margin-inline: auto; }
  .hero .lede { margin-top: 1rem; }
  .launch { margin-top: 1.6rem; }
  .hero-scene { order: 3; width: 100%; aspect-ratio: 1600 / 820; margin-top: 1.2rem; }
  .hero-scene::before { content: ""; position: absolute; inset: 0 0 auto; height: 35%; z-index: 1; pointer-events: none; background: linear-gradient(#141C3C, rgba(20,28,60,0)); }
  .hero-scene::after { background: linear-gradient(rgba(30,36,24,0), #1E2418); }
  .quest-card { order: 4; width: min(100% - 2 * var(--gutter), 30rem); margin: -2.2rem auto 3.5rem; z-index: 6; }
}
@media (max-width: 699px) {
  .hero { padding-top: 6.4rem; }
  .quest-card { margin-top: -.9rem; }
  .hero-scene { --vbw: 800; --vbh: 1000; aspect-ratio: 800 / 880; margin-top: .6rem; }
  .hero h1 { font-size: clamp(3.1rem, 15.5vw, 4.6rem); }
}

/* the quest board: Maya's three quests on parchment, pinned to a walnut board; the page's one interactive moment.
   Sized in em, so on desktop it scales with the painting it stands in. */
.quest-card { position: relative; font-size: 1rem; padding: .5em; border-radius: 1.25em; color: var(--ink);
  background: linear-gradient(#6E4A2E, #4A2F1C 12%, #3A2414 88%, #2A190D);
  box-shadow: inset 0 1px 0 rgba(255,226,180,.35), inset 0 0 0 1px rgba(20,10,4,.6), 0 26px 50px -20px rgba(6,4,18,.85), 0 6px 14px -6px rgba(6,4,18,.6); }
.board { position: relative; z-index: 1; padding: .95em .95em .8em; border-radius: .85em;
  background: linear-gradient(170deg, var(--parch), var(--parch-d)); box-shadow: inset 0 0 0 1px rgba(181,132,90,.55), inset 0 0 0 5px rgba(244,233,211,.6), inset 0 0 0 6px rgba(181,132,90,.3), 0 2px 4px rgba(20,10,4,.45); }
/* the brass pins holding the parchment */
.board::before, .board::after { content: ""; position: absolute; top: .42em; width: .62em; height: .62em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1D6, #C9955F 45%, #5E3B24 100%); box-shadow: 0 1px 2px rgba(30,15,5,.6); }
.board::before { left: .42em; } .board::after { right: .42em; }
.post { display: none; position: absolute; z-index: 0; top: calc(100% - 1em); width: .95em; border-radius: .2em .2em .1em .1em;
  background: linear-gradient(90deg, #2A190D, #5C3D25 40%, #4A2F1C 70%, #24150B); box-shadow: 0 0 0 1px rgba(20,10,4,.35); }
.post::after { content: ""; position: absolute; left: 50%; bottom: -.35em; width: 3.4em; height: .8em; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16,14,6,.55), rgba(16,14,6,0)); }
.post-l { left: 17%; } .post-r { right: 17%; }
.quest-card h2 { font: 700 1.05em/1.2 var(--display); font-variant-caps: small-caps; letter-spacing: .06em; color: var(--ink-soft); margin: .05em .9em .6em; display: flex; justify-content: space-between; gap: 1em; }
.quest-card h2 output { font: inherit; color: var(--ink-soft); }
.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.quest { width: 100%; display: grid; grid-template-columns: 2.3em 1fr auto; align-items: center; gap: .1em .7em; padding: .55em .85em .55em .55em;
  border: 0; border-radius: .85em; background: rgba(255,253,248,.58); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(107,78,51,.22), 0 2px 0 rgba(107,78,51,.18); transition: background .2s, transform .12s, box-shadow .2s; }
.quest:hover { background: rgba(255,253,248,.85); }
.quest:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(107,78,51,.22); }
.quest-name { font: 700 1.2em/1.15 var(--display); }
.quest-proof { font-size: .86em; color: var(--ink-soft); white-space: nowrap; }
.quest .rune { grid-row: span 1; width: 2.3em; height: 2.3em; }
/* the sprite's symbols are styled through inherited custom properties (selectors can't reach into <use>) */
.slab { fill: var(--rune-slab, #B9B4AE); stroke: var(--rune-edge, #6F6A70); stroke-width: 1.5; }
.ring { fill: none; stroke: var(--rune-ring, #6F6A70); stroke-width: 2.5; }
.tick { fill: none; stroke: #2A1608; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: var(--tick, 20); transition: stroke-dashoffset .35s .1s var(--settle); }
.quest[aria-pressed="true"] { background: linear-gradient(90deg, rgba(255,228,184,.95), rgba(255,244,226,.7)); box-shadow: inset 0 0 0 1px rgba(219,122,62,.45), 0 0 22px -4px rgba(244,169,97,.6); }
.quest[aria-pressed="true"] { --rune-slab: url(#rune-lit); --rune-edge: #A9562A; --rune-ring: #FFF4E2; --tick: 0; }
.quest[aria-pressed="true"] .quest-proof { color: #8A4A1E; }
.quest-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2em 1em; margin: .6em .35em 0; font-size: .92em; color: var(--ink-soft); min-height: 1.6em; }
.quest-foot p { margin: 0; }
.quest-reset { border: 0; background: none; padding: .2em 0; white-space: nowrap; color: #8A3B1A; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.quest-reset[hidden], .quest-next[hidden] { display: none; }
.quest-next { color: #8A3B1A; font-weight: 700; white-space: nowrap; }
.quest-next:hover { color: #5E2410; }
.no-js .quest-foot { display: none; }

/* the stones Wick hops along; they light as quests are done */
.stone { width: calc(var(--w) * var(--u)); transform: translate(-50%, -50%); color: #605E68; }
.stone svg { width: 100%; height: auto; overflow: visible; }
.slab-top { fill: url(#stone-top); }
.slab-side { fill: #56535B; }
.carve { fill: none; stroke: currentColor; stroke-width: 3.2; }
.stone::after { content: ""; position: absolute; inset: -60% -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,228,184,.75), rgba(244,169,97,.3) 45%, transparent);
  opacity: 0; transition: opacity .5s; pointer-events: none; }
.stone.lit { color: #FFD896; }
.stone.lit::after { opacity: 1; }

/* the lock: the child's phone as a padlock body, its brass shackle above */
.lock { width: calc(var(--phone) * var(--u)); transform: translate(-50%, -100%); z-index: 2; }
.lock .shackle { position: absolute; z-index: -1; left: 50%; bottom: 100%; width: 80%; margin: 0 0 -24% -40%; transform-origin: 23% 100%;
  transition: transform .55s var(--spring); filter: drop-shadow(0 6px 10px rgba(10,6,20,.45)); }
.lock.open .shackle { transform: perspective(600px) translateY(-26%) rotateY(-38deg); transition: transform .7s var(--spring) .05s; }
/* where the shackle's legs go into the body: two brass collars on the phone's top edge (they stay when it opens) */
.lock::before, .lock::after { content: ""; position: absolute; z-index: 1; top: -1.6%; width: 14.5%; aspect-ratio: 3.4; border-radius: 45% / 60%;
  background: linear-gradient(90deg, #4A2E1B, #B5845A 22%, #ECCDA4 45%, #FFF1D6 55%, #B5845A 78%, #4A2E1B); box-shadow: 0 1px 2px rgba(10,6,4,.6), inset 0 -1px 0 rgba(60,35,20,.5); }
.lock::before { left: 21.9%; } .lock::after { left: 63.5%; }
@media (min-width: 1100px) and (max-height: 820px) { .lock.open .shackle { transform: perspective(600px) translateY(-15%) rotateY(-38deg); } }
/* A phone: a bronze titanium band (the padlock's body, in the hero), black glass bezel, the island, side buttons and a
   faint glare. Sizes inside are in cqw of the phone, so it's the same object at 110 px and at 300 px. */
.phone { position: relative; container-type: inline-size; aspect-ratio: 100 / 209; border: 3px solid transparent; border-radius: 17% / 8.1%;
  background: linear-gradient(#060505, #060505) padding-box,
    linear-gradient(145deg, #F3E0C2 0%, #A9835E 16%, #E2C49C 34%, #7A5A40 58%, #CDA87F 80%, #6B4E36 100%) border-box;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.65), 0 30px 60px -22px rgba(6,4,14,.85), 0 8px 18px -8px rgba(6,4,14,.6); }
.bezel { position: relative; height: 100%; padding: 2.9cqw; border-radius: 15.5cqw; background: #050405; }
.bezel::before { content: ""; position: absolute; z-index: 5; top: 5cqw; left: 50%; width: 30cqw; height: 8.6cqw; transform: translateX(-50%); border-radius: 99px;
  background: radial-gradient(circle at 76% 50%, #2A3550 0 1.3cqw, #0B0E18 1.7cqw, #000 2.2cqw); }
.bezel::after { content: ""; position: absolute; z-index: 6; inset: 2.9cqw; border-radius: 12.6cqw; pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.05) 24%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%); }
.bezel > img, .bezel > .screen { display: block; width: 100%; height: 100%; border-radius: 12.6cqw; overflow: hidden; }
.bezel > img { object-fit: cover; object-position: 50% 0; }
.hw { position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; pointer-events: none; }
.hw::before, .hw::after { content: ""; position: absolute; width: 2.5px; background: linear-gradient(90deg, #5E4430, #E2C49C 55%, #8A6A4C); }
.hw-l::before, .hw-l::after { left: -1.5px; border-radius: 2px 0 0 2px; }
.hw-l::before { top: 37cqw; height: 9cqw; }
.hw-l::after { top: 54cqw; height: 15cqw; box-shadow: 0 19cqw 0 0 #B08B66; }
.hw-r::before, .hw-r::after { right: -1.5px; border-radius: 0 2px 2px 0; }
.hw-r::before { top: 58cqw; height: 24cqw; }
.hw-r::after { top: 112cqw; height: 13cqw; }

/* the hero's phone: a home screen at dusk, the chosen apps dimmed under brass locks */
.home-screen { position: relative; container-type: inline-size; color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; }
.home-screen .wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-screen::after { content: ""; position: absolute; left: 50%; bottom: 1.6cqw; width: 35cqw; height: 1.4cqw; transform: translateX(-50%); border-radius: 99px; background: rgba(255,255,255,.9); }
.statusbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 15.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 1cqw 7cqw 0 10.5cqw; font-size: 4.3cqw; font-weight: 600; }
.statusbar svg { width: 17.5cqw; height: auto; }
.apps { position: absolute; left: 8cqw; right: 8cqw; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 9cqw; row-gap: 6.5cqw; align-items: start; }
.apps-locked { top: 40cqw; }
.apps-open { top: 125cqw; }
.app { position: relative; display: grid; justify-items: center; gap: 1.9cqw; min-width: 0; font-size: 4.2cqw; font-weight: 500; line-height: 1; text-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.55); }
.ico { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.ico > svg, .ico > img { display: block; width: 100%; height: 100%; border-radius: 22.5%; box-shadow: 0 1cqw 2.6cqw rgba(8,4,26,.42); transition: filter .5s; }
.app b { font-weight: 500; white-space: nowrap; }
.dock .app { font-size: 0; }
/* the clear lock over a chosen app: the icon dims, a brass padlock sits on it */
.padlock { position: absolute; inset: 0; border-radius: 22.5%; background: rgba(14,10,26,.22); transition: opacity .35s .3s, background .3s; }
.padlock svg { position: absolute; right: -14%; bottom: -5%; width: 58%; height: 58%; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.6)); }
.pl-shackle { transition: transform .45s var(--spring); }
.lock:not(.open) .app.locked .ico > svg { filter: saturate(.7) brightness(.8); }
.lock.open .padlock { opacity: 0; background: rgba(14,10,26,0); }
.lock.open .pl-shackle { transform: translateY(-18%) rotate(-14deg); transform-origin: 30% 60%; }
.lock.open .app.locked .ico { animation: tile-hop .6s var(--settle) .35s both; }
.lock.open .app.locked:nth-child(2) .ico { animation-delay: .42s; } .lock.open .app.locked:nth-child(3) .ico { animation-delay: .49s; }
.lock.open .app.locked:nth-child(4) .ico { animation-delay: .56s; } .lock.open .app.locked:nth-child(5) .ico { animation-delay: .63s; } .lock.open .app.locked:nth-child(6) .ico { animation-delay: .7s; }
@keyframes tile-hop { 0% { transform: none; } 35% { transform: translateY(-14%) scale(1.07); } 70% { transform: translateY(2%) scale(.98); } 100% { transform: none; } }
.lock.open .app.locked .ico > svg { filter: drop-shadow(0 0 2.6cqw rgba(255,214,160,.8)); }
.dots { position: absolute; left: 0; right: 0; bottom: 31cqw; display: flex; justify-content: center; gap: 2.2cqw; }
.dots i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: rgba(255,255,255,.95); }
.dots i + i { background: rgba(255,255,255,.4); }
.dock { position: absolute; left: 3.6cqw; right: 3.6cqw; bottom: 4cqw; height: 23.5cqw; padding: 0 5.6cqw; border-radius: 9cqw; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 6.3cqw; align-items: center;
  background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(3cqw) saturate(1.5); backdrop-filter: blur(3cqw) saturate(1.5); box-shadow: inset 0 0 0 .3cqw rgba(255,255,255,.12); }
.lock.open 
/* the lamp's light behind the lock when it opens */
.lock-glow { width: calc(900 * var(--u)); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .9s;
  background: radial-gradient(closest-side, rgba(255,214,160,.55), rgba(244,169,97,.22) 35%, rgba(219,122,62,0) 70%); }
.lock-glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,180,0) 0 7deg, rgba(255,226,180,.2) 8deg 10deg, rgba(255,226,180,0) 11deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 85%); mask: radial-gradient(closest-side, #000 20%, transparent 85%); }
.hero.open .lock-glow { opacity: 1; }

/* Wick on the trail */
.wick { width: calc(200 * var(--u)); z-index: 3; transition: transform .62s cubic-bezier(.45, 0, .4, 1); pointer-events: none;
  transform: translate(calc(var(--dx, 0) * var(--u)), calc(var(--dy, 0) * var(--u))); }
.wick-body { position: relative; transform: translate(-45%, -90.5%); }
.wick-body img { width: 100%; transform-origin: 45% 90%; }
.wick-body .cheer { position: absolute; left: 0; bottom: 0; opacity: 0; }
.hero.open .wick-body .rest { opacity: 0; }
.hero.open .wick-body .cheer { opacity: 1; animation: bob .8s ease-in-out 3 .2s; }
.wick.hop .wick-body img { animation: hop .62s cubic-bezier(.3, 0, .4, 1); }
@keyframes hop { 0% { transform: none; } 12% { transform: scale(1.04, .94); } 45% { transform: translateY(-22%); } 82% { transform: translateY(0) scale(1.05, .93); } 100% { transform: none; } }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4%); } }
.bubble { position: absolute; left: 56%; bottom: 92%; width: max-content; max-width: 14rem; margin: 0; padding: .6rem .85rem .55rem; transform-origin: 0 100%;
  border-radius: 16px 16px 16px 4px; background: var(--paper); color: var(--paper-ink); font: 700 1rem/1.25 var(--body); box-shadow: 0 10px 24px -10px rgba(8,6,20,.6); }
.bubble::after { content: ""; position: absolute; left: .9rem; top: 100%; border: .5rem solid transparent; border-top-color: var(--paper); border-left-width: 0; border-bottom-width: 0; }
.bubble.say { animation: say .32s var(--spring); }
@keyframes say { from { transform: scale(.86); opacity: .4; } }
/* the bubble sits right of his head on the way, left of it beside the lock */
.wick[data-at="3"] .bubble { right: 52%; left: auto; border-radius: 16px 16px 4px 16px; }
.wick[data-at="3"] .bubble::after { right: .9rem; left: auto; border-right-width: 0; border-left-width: .5rem; }
@media (max-width: 699px) {
  .bubble { font-size: .85rem; max-width: 11rem; padding: .45rem .65rem .4rem; }
}

/* embers rising when it opens (site.js makes them) */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ember { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFF4E2, #F4A961 45%, rgba(219,122,62,0) 70%);
  animation: rise var(--t, 2.4s) cubic-bezier(.2, .6, .4, 1) var(--d, 0s) both; }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, -220px)) scale(1); } }

/* ------------------------------------------------------------------ sections */
.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
/* nothing may widen the page: a glow or a scene can bleed to the section's edge, never past it (phones would pan sideways) */
.hero, .section, .closer { overflow-x: clip; }
.section-head { max-width: 44rem; }
.section-head h2, .forge-head h2, .closer h2, .pets-head h2, .parent h2 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.section-head > p:not(.sub) { margin-top: 1.4rem; font-size: 1.2rem; color: #E2D4C0; }

/* how it works: the forge first (the parent's sentence becoming quests, the app's own recording, its three beats
   lighting in time with it), then the day on the child's phone, three stones along a trail */
.how { background: radial-gradient(70% 30rem at 50% 14rem, #2A1F18, rgba(23,17,14,0) 70%), var(--night); }
.forge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); grid-template-areas: "head stage" "beats stage" "ai stage";
  grid-template-rows: auto auto 1fr; column-gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.forge-head { grid-area: head; max-width: 40rem; }
.forge-head > p:not(.sub) { margin-top: 1.4rem; font-size: 1.2rem; color: #E2D4C0; max-width: 34rem; }

/* the stage: the parent's phone, whole, in the forge's light */
.forge-stage { grid-area: stage; position: relative; margin: 0; display: grid; justify-items: center; }
.forge-phone { position: relative; z-index: 1; width: min(100%, 20rem); }
.forge-phone .phone { width: 100%; box-shadow: 0 0 0 .5px rgba(0,0,0,.65), 0 34px 60px -24px rgba(0,0,0,.9); }
.forge-screen { position: relative; background: #0D0906; }
.forge-screen > img, .forge-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.forge-clip { opacity: 0; transition: opacity .35s; }
.forge-stage.playing .forge-clip { opacity: 1; }
.forge-glow { position: absolute; z-index: 0; left: 50%; top: 45%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(244,169,97,.3), rgba(219,122,62,.1) 45%, rgba(219,122,62,0)); }
.forge-glow i { position: absolute; bottom: 30%; width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFF4E2, #F4A961 45%, rgba(219,122,62,0) 70%); animation: ember-drift 6s linear infinite; }
.forge-glow i:nth-child(1) { left: 22%; animation-delay: 0s; } .forge-glow i:nth-child(2) { left: 34%; animation-delay: 2.1s; }
.forge-glow i:nth-child(3) { left: 71%; animation-delay: 1.1s; } .forge-glow i:nth-child(4) { left: 79%; animation-delay: 3.6s; }
.forge-glow i:nth-child(5) { left: 28%; animation-delay: 4.4s; } .forge-glow i:nth-child(6) { left: 66%; animation-delay: 5.2s; }
@keyframes ember-drift { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -260px); } }
.forge-stage figcaption { position: relative; z-index: 1; margin-top: 1.1rem; display: flex; align-items: center; gap: 1rem;
  font: 500 1rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .05em; color: var(--brass-l); }
.clip-toggle { border: 0; padding: .3rem .8rem .32rem; border-radius: 99px; background: rgba(236,205,164,.12); color: var(--bone); cursor: pointer;
  font: 700 .85rem/1 var(--body); letter-spacing: 0; font-variant-caps: normal; box-shadow: inset 0 0 0 1px rgba(236,205,164,.35); }
.clip-toggle:hover { background: rgba(236,205,164,.2); color: var(--hot); }
.beat-now { display: none; }
@media (max-width: 1000px) {
  .forge.synced .beat-now { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 0; padding: .45rem .9rem .45rem .5rem;
    border-radius: 99px; background: rgba(23,17,14,.85); box-shadow: inset 0 0 0 1px rgba(236,205,164,.3); font: 700 1.1rem/1.2 var(--display); color: var(--bone); }
  .beat-now b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF1D6, #FFD896 55%, #C9955F); color: #2A1608; font-size: .95rem; }
}

/* the three beats, lit in turn while the clip plays (all lit otherwise) */
.forge-beats { grid-area: beats; position: relative; list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.2rem; max-width: 34rem; }
.forge-beats::before { content: ""; position: absolute; left: 1.4rem; top: 1.6rem; bottom: 1.6rem; width: .8rem; z-index: 0;
  background: url("/assets/world/trail-line-v.svg?v=aa7cac75") center / 100% 100% no-repeat; opacity: .8; }
.beat { position: relative; z-index: 1; display: grid; grid-template-columns: 3.6rem 1fr; grid-template-rows: auto 1fr; column-gap: 1.1rem; }
.beat .step-stone { grid-row: 1 / span 2; width: 3.6rem; height: 3rem; margin: 0; font-size: 1.3rem; color: #FFD896; }
.beat .step-stone b { color: #2A1608; }
.beat .step-stone::after { opacity: 1; }
.beat h3 { margin-top: .35rem; font-size: 1.4rem; transition: color .35s; }
.beat p { margin: .3rem 0 0; font-size: 1.05rem; color: #D9CCBA; transition: color .35s; }
.forge.synced .beat:not(.on) .step-stone { color: #605E68; }
.forge.synced .beat:not(.on) .step-stone b { color: #3B2A1A; }
.forge.synced .beat:not(.on) .step-stone::after { opacity: 0; }
.forge.synced .beat:not(.on) h3 { color: #A8998A; }
.forge.synced .beat:not(.on) p { color: #A8998A; }

/* the AI helper, said plainly */
.forge-ai { grid-area: ai; display: flex; gap: .9rem; align-items: start; max-width: 34rem; margin-top: 2rem; padding: 1.05rem 1.2rem 1.1rem; border-radius: 18px;
  background: radial-gradient(120% 140% at 0 0, rgba(244,169,97,.16), rgba(244,169,97,0) 55%), var(--surface); box-shadow: inset 0 0 0 1px rgba(236,205,164,.28); }
.forge-ai svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem; fill: var(--warm); }
.forge-ai p { margin: 0; font-size: 1rem; line-height: 1.55; color: #D9CCBA; }
.forge-ai strong { color: var(--bone); }

/* then the day on their phone: three stones along a trail */
.trail-head { margin: clamp(4.5rem, 9vw, 7rem) 0 0; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.1; }
.steps { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); position: relative; }
.steps::before { content: ""; position: absolute; left: 3%; right: 6%; top: 1.9rem; height: 1.6rem; z-index: 0;
  background: url("/assets/world/trail-line.svg?v=5ce44c82") center / 100% 100% no-repeat; opacity: .9; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; }
.step-stone { position: relative; width: 4.6rem; height: 3.8rem; display: grid; place-items: center; margin-bottom: 1.1rem; font: 800 1.6rem/1 var(--display); color: #3B2A1A; }
.step-stone svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.step-stone b { position: relative; margin-top: -.5rem; font-weight: 800; transition: color .5s, text-shadow .5s; }
.step .step-stone { color: #605E68; transition: color .5s; }
.step.lit .step-stone, .no-js .step .step-stone { color: #FFD896; }
.step.lit .step-stone b, .no-js .step .step-stone b { color: #2A1608; }
.step-stone::after { content: ""; position: absolute; inset: -55% -45%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,228,184,.6), rgba(244,169,97,.2) 50%, transparent); opacity: 0; transition: opacity .6s; }
.step.lit .step-stone::after, .no-js .step .step-stone::after { opacity: 1; }
.step h3 { font-size: 1.45rem; }
.step p { margin: .5rem 0 1.4rem; color: #D9CCBA; font-size: 1.05rem; max-width: 22rem; }
.step figure { margin: auto 0 0; }
.step .phone { width: min(100%, 15.5rem); }
.step figcaption { margin-top: .8rem; font: 500 1rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .05em; color: var(--brass-l); }
@media (max-width: 1000px) {
  .forge { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "beats" "ai"; grid-template-rows: none; }
  .forge-stage { margin-top: 2.4rem; }
  .forge-phone { width: min(78vw, 20rem); }
  .steps { grid-template-columns: 1fr; gap: 2.8rem; max-width: 40rem; }
  .steps::before { left: 2.05rem; right: auto; top: 2rem; bottom: 2rem; width: 1rem; height: auto; background: url("/assets/world/trail-line-v.svg?v=aa7cac75") center / 100% 100% no-repeat; }
  .step { display: grid; grid-template-columns: 4.6rem 1fr minmax(0, 9.5rem); grid-template-rows: auto 1fr; gap: 0 1.1rem; align-items: start; }
  .step .step-stone { grid-row: 1 / span 2; }
  .step h3 { grid-column: 2; margin-top: .5rem; }
  .step figure { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .step p { grid-column: 2; grid-row: 2; margin-bottom: 0; }
  .step .phone { width: 100%; }
  .step .hw { display: none; }
  .step figcaption { font-size: .9rem; }
}
@media (max-width: 520px) {
  .step { grid-template-columns: 3.6rem 1fr 6.6rem; gap: 0 .85rem; }
  .step .step-stone { width: 3.6rem; height: 3rem; font-size: 1.3rem; }
  .steps::before { left: 1.55rem; }
  .step h3 { font-size: 1.25rem; margin-top: .3rem; }
  .step p { font-size: 1rem; }
  .beat h3 { font-size: 1.25rem; }
  .beat p { font-size: 1rem; }
}

/* the parent's side: the lamplit castle at night */
.parent { background: var(--night); padding-top: 0; overflow: hidden; }
.parent-sky { position: relative; aspect-ratio: 1600 / 560; min-height: 15rem; margin-bottom: clamp(-6rem, -6vw, -2rem); }
.parent-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* the night comes out of the page's dark: the sky fades up from it, the first stars twinkle in the fade, and now and
   then one falls */
.parent-sky::before { content: ""; position: absolute; inset: 0 0 auto; height: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--night), rgba(23,17,14,.85) 22%, rgba(18,20,40,.35) 62%, rgba(8,11,28,0)); }
.parent-sky .tw { position: absolute; z-index: 2; width: 3px; height: 3px; border-radius: 50%; background: #FFF4E4;
  box-shadow: 0 0 6px 1px rgba(255,241,220,.7); animation: twinkle 3.6s ease-in-out infinite; }
.parent-sky .tw:nth-of-type(1) { left: 6%; top: 4%; animation-delay: .2s; } .parent-sky .tw:nth-of-type(2) { left: 17%; top: 15%; animation-delay: 1.9s; width: 2px; height: 2px; }
.parent-sky .tw:nth-of-type(3) { left: 29%; top: 7%; animation-delay: 3.1s; } .parent-sky .tw:nth-of-type(4) { left: 43%; top: 19%; animation-delay: .9s; width: 2px; height: 2px; }
.parent-sky .tw:nth-of-type(5) { left: 55%; top: 3%; animation-delay: 2.6s; } .parent-sky .tw:nth-of-type(6) { left: 64%; top: 13%; animation-delay: 1.3s; }
.parent-sky .tw:nth-of-type(7) { left: 78%; top: 6%; animation-delay: 3.4s; width: 2px; height: 2px; } .parent-sky .tw:nth-of-type(8) { left: 88%; top: 17%; animation-delay: .5s; }
.parent-sky .tw:nth-of-type(9) { left: 95%; top: 2%; animation-delay: 2.2s; width: 2px; height: 2px; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.parent-sky .shoot { position: absolute; z-index: 2; left: 18%; top: 6%; width: 120px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,244,228,0), rgba(255,244,228,.9)); transform: rotate(14deg); transform-origin: 100% 50%;
  animation: falling 9s ease-in 2s infinite; }
@keyframes falling { 0%, 88% { opacity: 0; translate: 0 0; } 90% { opacity: 1; } 97% { opacity: 0; translate: 240px 60px; } 100% { opacity: 0; translate: 240px 60px; } }
.parent-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.parent-copy > p:not(.sub) { margin-top: 1.4rem; font-size: 1.2rem; color: #E2D4C0; max-width: 34rem; }
.ledger { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; max-width: 36rem; }
.ledger li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .1rem 1rem; }
.ledger svg { grid-row: span 2; width: 3.2rem; height: 3.2rem; }
.ledger h3 { font-size: 1.35rem; align-self: end; }
.ledger p { margin: .25rem 0 0; color: #D9CCBA; }
.rim { fill: url(#medal-rim); }
.face { fill: #241A14; }
.glyph { fill: none; stroke: var(--core); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.parent-phone { margin: 0; justify-self: center; text-align: center; }
.parent-phone .phone { width: min(19rem, 70vw); margin-inline: auto; }
.phone.lit { box-shadow: 0 0 0 .5px rgba(0,0,0,.65), 0 0 70px rgba(244,169,97,.42), 0 30px 60px -20px #000; }
.parent-phone figcaption { margin-top: 1.1rem; font: 500 1.05rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .05em; color: var(--brass-l); }
@media (max-width: 860px) {
  .parent-grid { grid-template-columns: 1fr; }
  .parent-phone { order: 2; }
}

/* the pets at dawn */
.pets { background: linear-gradient(var(--night), #14183A 16rem); padding-bottom: 0; overflow: hidden; }
.pets-head { position: relative; z-index: 2; text-align: center; max-width: 44rem; margin-inline: auto; }
.pets-head .sub { color: var(--core); }
.pets-head > p:not(.sub) { margin: 1.4rem auto 0; font-size: 1.2rem; color: #EDE3D6; max-width: 38rem; }
.pets-strip { position: relative; margin-top: clamp(-6rem, -6vw, -2rem); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.pets-scene { --vbw: 1600; --vbh: 760; width: max(100%, 64rem); aspect-ratio: 1600 / 760; }
.pet { margin: 0; width: calc(var(--w) * var(--u)); transform: translate(-50%, -91%); text-align: center; }
.pet-art { position: relative; display: block; transform-origin: 50% 92%; cursor: pointer; }
.pet-art img { display: block; width: 100%; }
.pet-art .patch { position: absolute; height: auto; opacity: 0; pointer-events: none; }
.pet-art .patch.on { opacity: 1; }
.pet-art { animation: idle var(--t, 3.8s) ease-in-out var(--d, 0s) infinite; }
.pet:hover .pet-art, .pet.hop .pet-art { animation: hop .62s cubic-bezier(.3, 0, .4, 1); }
@keyframes idle { 0%, 100% { transform: none; } 30% { transform: rotate(-.8deg) scale(1.006, .996); } 50% { transform: scale(1.012, 1.018); } 75% { transform: rotate(.7deg) scale(1.004, .998); } }
.p0 { --t: 3.6s; } .p1 { --t: 4.4s; --d: -1.2s; } .p2 { --t: 3.2s; --d: -2s; } .p3 { --t: 5s; --d: -.6s; } .p4 { --t: 3.9s; --d: -2.7s; } .p5 { --t: 2.8s; --d: -1.6s; }
.pet figcaption { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(14 * var(--u))); white-space: nowrap; padding: .3rem .75rem .35rem; border-radius: 10px;
  color: var(--ink); background: linear-gradient(var(--parch), var(--parch-d)); font: 700 1rem/1.1 var(--display); box-shadow: 0 6px 14px -6px rgba(30,20,10,.6); }
.pets-hint { display: none; margin: 0; padding: .9rem var(--gutter) 1.1rem; text-align: center; font-size: .95rem; font-weight: 700; color: #F4EBD8; background: #56703E; }
@media (max-width: 1023px) { .pets-hint { display: block; } }

/* before you subscribe + the FAQ */
.grownups { background: linear-gradient(#56703E, #2B2A1C 7rem, var(--night) 18rem); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 3rem; }
.ticket { position: sticky; top: 2rem; padding: 1.5rem 1.5rem 1.2rem; border-radius: 22px; color: var(--ink); background: linear-gradient(170deg, var(--parch), var(--parch-d));
  box-shadow: inset 0 0 0 1px rgba(181,132,90,.55), inset 0 0 0 5px rgba(244,233,211,.6), inset 0 0 0 6px rgba(181,132,90,.35), 0 24px 50px -20px #000; }
.ticket h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.ticket ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.ticket li { margin: .35rem 0; }
.ticket li::marker { color: var(--brass); }
.ticket a { color: #8A3B1A; }
.ticket p:last-child { margin-bottom: 0; }
.faq details { border-bottom: 1px solid rgba(181,132,90,.3); }
.faq details:first-child { border-top: 1px solid rgba(181,132,90,.3); }
.faq summary { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; padding: 1.15rem 0; cursor: pointer; list-style: none;
  font: 700 clamp(1.2rem, 1.9vw, 1.45rem)/1.25 var(--display); color: var(--bone); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .75rem; height: .75rem; border-right: 2.5px solid var(--brass-l); border-bottom: 2.5px solid var(--brass-l); transform: translateY(-25%) rotate(45deg); transition: transform .25s var(--settle); }
.faq details[open] summary::after { transform: translateY(15%) rotate(-135deg); }
.faq summary:hover { color: var(--hot); }
.faq details p { margin: -.2rem 0 1.3rem; max-width: 46rem; color: #DCCFBD; }
.faq-more { margin-top: 1.6rem; color: var(--muted); }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
  .ticket { position: static; }
}

/* the closer: Wick on the hoard the quests open (the App Store banner's still, its headline painted out), the page's
   text in the sunburst above him, and one more way back to the launch-news form */
.closer { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding-top: clamp(2.5rem, 5vw, 4.5rem);
  background: radial-gradient(70% 60% at 50% 100%, #4E1E2C, rgba(26,11,19,0) 100%), linear-gradient(var(--night), #1A0B13 45%, #1A0B13); }
.closer-copy { position: relative; z-index: 2; max-width: 40rem; text-shadow: 0 2px 18px rgba(26,8,14,.7); }
.closer .sub { margin-top: .9rem; }
.closer-copy > p:not(.sub) { margin: 1.2rem auto 0; font-size: 1.15rem; color: #F2E6D6; }
.closer .button { margin-top: 1.7rem; text-shadow: none; }
.closer-art { position: relative; z-index: 1; aspect-ratio: 1600 / 820; margin-top: calc(-1 * clamp(6rem, 12.5vw, 13rem)); }
.closer-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.closer-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#1A0B13, rgba(26,11,19,.55) 12%, rgba(26,11,19,0) 30%, rgba(26,11,19,0) 80%, var(--night)),
    linear-gradient(90deg, #1A0B13, rgba(26,11,19,0) 16%, rgba(26,11,19,0) 84%, #1A0B13); }
@media (max-width: 860px) {
  .closer-art { aspect-ratio: 1; margin-top: -2.5rem; }
  .closer-art img { object-position: 57% 0; }
}

/* guides and free tools */
.notes { background: var(--night); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.6rem; }
.note-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.3rem; border-radius: 6px 22px 22px 6px; color: var(--ink);
  background: linear-gradient(170deg, var(--parch), var(--parch-d)); box-shadow: inset 4px 0 0 var(--brass), 0 20px 40px -24px #000; }
.note-card .kind { font: 500 .98rem/1.2 var(--display); font-variant-caps: small-caps; letter-spacing: .05em; color: var(--ink-soft); margin: 0 0 .6rem; }
.note-card h3 { font-size: 1.5rem; }
.note-card h3 a { color: var(--ink); text-decoration: none; }
.note-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.note-card h3 a:hover { color: #8A3B1A; }
.note-card p { margin: .7rem 0 0; color: #4A3826; }
.note-card:focus-within { outline: 3px solid var(--warm); outline-offset: 4px; }
.note-card a:focus-visible { outline: none; }
.note-card.tool { color: var(--bone); background: radial-gradient(120% 90% at 100% 0, #3A2A1E, var(--surface)); box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.4), 0 20px 40px -24px #000; border-radius: 22px; }
.note-card.tool .kind { color: var(--brass-l); }
.note-card.tool h3 a { color: var(--bone); }
.note-card.tool h3 a:hover { color: var(--hot); }
.note-card.tool p { color: #D9CCBA; }
.note-card .more { margin-top: auto; padding-top: 1rem; font-weight: 700; color: #8A3B1A; }
.note-card.tool .more { color: var(--core); }
.mini-chart { display: grid; grid-template-columns: 1.1fr repeat(5, .5fr); gap: 3px; margin-top: 1.1rem; font-size: .7rem; color: var(--ink); }
.mini-chart span { background: var(--parch); padding: .25rem .35rem; border-radius: 3px; }
.mini-chart span.d { display: grid; place-items: center; }
.mini-chart span.d::before { content: ""; width: .7rem; height: .7rem; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: #B9B4AE; }
.mini-chart span.d.on::before { background: var(--warm); }
@media (max-width: 960px) { .notes-grid { grid-template-columns: 1fr; max-width: 40rem; } }

/* ------------------------------------------------------------------ inner pages: a strip of the dusk, then the page */
.page-top { position: relative; background: var(--dusk); overflow: hidden; }
.page-top .band { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.page-top::before { content: ""; position: absolute; inset: 0 0 auto; height: 9rem; z-index: 1; background: linear-gradient(rgba(14,20,48,.75), rgba(14,20,48,0)); pointer-events: none; }
.page-top .site-head { z-index: 20; }
.page-top .site-head { width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; }
.page-title { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(6rem, 12vw, 10rem); }
.page-title h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); max-width: 18ch; text-shadow: 0 4px 30px rgba(10,8,30,.6); }
.page-title .lede { max-width: 40rem; margin: 1.2rem 0 0; color: #EDE3D6; text-shadow: 0 1px 12px rgba(10,8,30,.7); }
.page-title .sub { color: var(--core); }
.crumbs { margin: 0 0 1rem; font-size: .95rem; color: #D8CCBE; }
.crumbs a { color: #D8CCBE; }
.crumbs a:hover { color: var(--hot); }

/* the reading page: parchment, a comfortable measure */
.paper { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), 48rem); margin: clamp(-5rem, -8vw, -3rem) auto 0; padding: clamp(1.6rem, 5vw, 3.4rem) clamp(1.3rem, 5vw, 3.6rem) clamp(2rem, 5vw, 3rem);
  border-radius: 8px; color: var(--ink); background: linear-gradient(var(--parch), #EEDFC2 70%, var(--parch-d));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 30px 60px -24px #000; font-size: 1.15rem; line-height: 1.65; }
.paper a { color: #8A3B1A; }
.paper a:hover { color: #5E2410; }
.paper h1 { font-size: clamp(2.2rem, 5vw, 3rem); color: var(--ink); line-height: 1.02; }
.paper h2 { font-size: clamp(1.55rem, 3vw, 1.9rem); line-height: 1.12; color: var(--ink); margin: 2.4rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid rgba(107,78,51,.28); letter-spacing: -.005em; }
.paper h3 { font-size: 1.3rem; margin: 1.8rem 0 .5rem; color: var(--ink); }
.paper p, .paper ul, .paper ol { margin: 0 0 1.1rem; }
.paper ul, .paper ol { padding-left: 1.35rem; }
.paper li { margin: .35rem 0; }
.paper li::marker { color: var(--brass); }
.paper strong { color: #2B1D10; }
.paper .intro { font-size: 1.3rem; line-height: 1.5; color: #3B2A1A; }
.legal form { margin: 1.6rem 0 1.4rem; } /* the confirm / unsubscribe button on /waitlist */
.paper .meta { font: 500 1.02rem/1.4 var(--display); font-variant-caps: small-caps; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 1.4rem; }
.paper .note, .paper .short { background: rgba(255,253,248,.55); border-left: 4px solid var(--brass); padding: 1rem 1.25rem .3rem; border-radius: 0 12px 12px 0; margin: 1.6rem 0; }
.paper .note { padding-bottom: 1rem; }
.paper .lede { font-size: 1.28rem; line-height: 1.5; }
.paper table { width: 100%; border-collapse: collapse; font-size: 1.02rem; line-height: 1.45; margin: 0; }
.paper caption { text-align: left; font: 500 1.02rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .04em; color: var(--ink-soft); padding-bottom: .5rem; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: .65rem .7rem; border-bottom: 1px solid rgba(107,78,51,.25); }
.paper th { font: 700 1rem/1.3 var(--display); color: var(--ink-soft); }
.paper thead th { border-bottom: 2px solid rgba(107,78,51,.4); }
.paper .table-wrap { overflow-x: auto; margin: 0 0 1.4rem; -webkit-overflow-scrolling: touch; }
.paper details { border-bottom: 1px solid rgba(107,78,51,.25); padding: .7rem 0; }
.paper details > summary { cursor: pointer; font: 700 1.15rem/1.35 var(--display); }
.paper .toc { columns: 2 14rem; column-gap: 2rem; padding: 1rem 1.25rem 1rem 2.4rem; border-radius: 14px; background: rgba(255,253,248,.45); font-size: 1.02rem; }
.paper .toc li { break-inside: avoid; }
.paper code { font-size: .92em; background: rgba(107,78,51,.12); padding: .05em .3em; border-radius: 4px; }
.paper hr { border: 0; border-top: 1px solid rgba(107,78,51,.3); margin: 2rem 0; }
.paper img { border-radius: 10px; }
.paper .related { margin-top: 2.6rem; padding: 1.4rem 1.5rem; border-radius: 18px; background: var(--surface); color: var(--bone); display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; }
.paper .related p { margin: 0; }
.paper .related a:not(.button) { color: var(--core); }
.paper .related .button { color: #2A1608; }
.paper .byline { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .98rem; color: var(--ink-soft); margin: -0.4rem 0 1.6rem; }
@media (max-width: 640px) {
  .paper { width: calc(100% - 1.25rem); padding-inline: 1.15rem; font-size: 1.08rem; }
  .paper .note, .paper .short { padding-left: .95rem; padding-right: .9rem; margin-inline: -.2rem; }
  .paper ul, .paper ol { padding-left: 1.15rem; }
}

/* the article's pet, peeking in at the end */
.article-end { display: grid; grid-template-columns: 7rem 1fr; gap: 1.2rem; align-items: end; margin: 2.4rem 0 0; }
.article-end img { width: 7rem; }

/* blog index */
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.post-list li { position: relative; padding: 1.4rem 0 1.4rem; border-bottom: 1px solid rgba(107,78,51,.25); }
.post-list li:first-child { padding-top: .3rem; }
.post-list h2 { margin: 0 0 .5rem; padding: 0; border: 0; font-size: clamp(1.45rem, 3vw, 1.85rem); }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a::after { content: ""; position: absolute; inset: 0; }
.post-list h2 a:hover { color: #8A3B1A; }
.post-list p { margin: 0; }
.post-list .meta { margin: 0 0 .4rem; }
.post-list li:focus-within { outline: 3px solid var(--warm); outline-offset: 6px; border-radius: 6px; }
.post-list a:focus-visible { outline: none; }

/* press assets */
.press-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem; margin: 1.2rem 0 1.6rem; }
.press-assets a { display: grid; gap: .5rem; font-size: .95rem; font-weight: 700; }
.press-assets img { width: 100%; border-radius: 12px; box-shadow: 0 10px 20px -12px rgba(30,20,10,.7); }

/* the legal pages and the field guide: the dusk strip, then the page exactly as written */
.page-top.slim { padding-bottom: clamp(9rem, 15vw, 12rem); }
.paper.legal h1 { margin-top: .2rem; }
.paper.legal > h2:first-of-type { margin-top: 2rem; }
.sub.byline { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; }
.paper .related { grid-template-columns: auto 1fr auto; }
.related-pet { width: 5.5rem; margin: -2.6rem 0 -1.4rem -.4rem; align-self: end; }
@media (max-width: 640px) { .paper .related { grid-template-columns: 4.5rem 1fr; } .related-pet { width: 4.5rem; margin: 0; align-self: center; } .paper .related .button { grid-column: 1 / -1; justify-self: start; } }

/* free tools */
.tools-index { padding: 0 0 6rem; margin-top: clamp(-5rem, -8vw, -3rem); position: relative; z-index: 3; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.4rem; }
.tool-list .note-card { padding-right: 9rem; min-height: 17rem; }
.tool-list h2 { font-size: 1.8rem; }
.tool-list h2 a { color: var(--bone); text-decoration: none; }
.tool-list h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tool-list h2 a:hover { color: var(--hot); }
.tool-pet { position: absolute; right: .6rem; bottom: .6rem; width: 8.5rem; }
@media (max-width: 520px) { .tool-list .note-card { padding-right: 1.5rem; padding-bottom: 8rem; } .tool-pet { width: 7rem; } }

.tool-main { position: relative; z-index: 3; margin-top: clamp(-5rem, -8vw, -3rem); padding-bottom: 5rem; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.tool-form { padding: 1.5rem 1.4rem 1.2rem; border-radius: 22px; background: radial-gradient(120% 70% at 0 0, #33251B, var(--surface)); box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.38), 0 30px 60px -28px #000; }
.field { margin: 0 0 1.2rem; padding: 0; border: 0; display: grid; gap: .45rem; min-width: 0; }
.field > label, .field legend { font: 700 1.12rem/1.2 var(--display); color: var(--bone); padding: 0; margin-bottom: .1rem; }
.tool-form input[type="text"], .tool-form textarea { width: 100%; padding: .75rem .9rem; border-radius: 14px; border: 1.5px solid rgba(236,205,164,.38); background: #120D0A; color: var(--bone); font: inherit; font-size: 1.05rem; line-height: 1.4; resize: vertical; }
.tool-form input[type="text"]:focus-visible, .tool-form textarea:focus-visible { outline: 3px solid var(--warm); outline-offset: 1px; border-color: transparent; }
.help { font-size: .92rem; color: var(--muted); margin: 0; }
.help output { color: var(--core); font-weight: 700; white-space: nowrap; }
.field .help { display: flex; justify-content: space-between; gap: 1rem; }
.days { display: flex; flex-wrap: wrap; gap: .5rem; }
.days legend { width: 100%; }
.days label, .guardians label { cursor: pointer; }
.days label { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 99px; box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.32); font-weight: 700; font-size: .98rem; }
.days input { accent-color: var(--warm); margin: 0; }
.days label:has(:checked) { background: rgba(255,228,184,.12); box-shadow: inset 0 0 0 1.5px var(--brass-l); color: var(--hot); }
.guardians { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.guardians legend { grid-column: 1 / -1; }
.guardians label { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .5rem .3rem .45rem; border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgba(236,205,164,.22); font-size: .9rem; font-weight: 700; color: var(--muted); }
.guardians img { width: 4.2rem; height: 3.8rem; object-fit: contain; }
.guardians input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.guardians label:has(:checked) { background: radial-gradient(closest-side, rgba(255,228,184,.22), rgba(255,228,184,.04)); box-shadow: inset 0 0 0 2px var(--warm); color: var(--hot); }
.guardians label:has(:focus-visible) { outline: 3px solid var(--warm); outline-offset: 2px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.no-js .tool-actions { display: none; }
#tool-status { margin-top: .8rem; overflow-wrap: anywhere; }

/* the sheet: a Letter page in landscape, parchment on screen, ink on paper */
.sheet-wrap { position: sticky; top: 1.5rem; }
.sheet { position: relative; aspect-ratio: 11 / 8.5; container-type: inline-size; padding: 4.5cqw 5cqw 3.6cqw; border-radius: 6px; color: var(--ink);
  background: linear-gradient(170deg, #FBF4E6, var(--parch) 60%, #EBDBBB); box-shadow: 0 30px 60px -24px #000, inset 0 0 0 1px rgba(107,78,51,.25); display: flex; flex-direction: column; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw; margin-bottom: 2cqw; }
.sheet-name { margin: 0; font: 800 6.4cqw/1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.sheet-reward { margin: 1.3cqw 0 0; font-size: 2.1cqw; color: var(--ink-soft); }
.sheet-reward strong { color: var(--ink); }
.sheet-pet { width: 15cqw; margin: -3cqw -1cqw -1.5cqw 0; flex: none; }
.sheet-grid { width: 100%; flex: 1; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 2.1cqw; }
.sheet-grid th, .sheet-grid td { border-bottom: 1px solid rgba(107,78,51,.3); padding: .6cqw .8cqw; text-align: center; vertical-align: middle; }
.sheet-grid thead th { font: 500 1.9cqw/1 var(--display); font-variant-caps: small-caps; letter-spacing: .05em; color: var(--ink-soft); border-bottom: 2px solid rgba(107,78,51,.45); padding-bottom: 1cqw; }
.sheet-grid thead th:first-child { width: 36%; }
.sheet-grid tbody th, .sheet-grid tfoot th { text-align: left; font: 700 2.4cqw/1.15 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.sheet-grid tfoot th { font: 500 1.9cqw/1.15 var(--display); font-variant-caps: small-caps; letter-spacing: .04em; color: var(--ink-soft); }
.sheet-grid tfoot th, .sheet-grid tfoot td { border-bottom: 0; border-top: 2px solid rgba(107,78,51,.45); }
.sheet-grid .cell { width: min(5.4cqw, 100%); margin: auto; color: #8C7458; }
.sheet-grid tfoot .cell { color: #B09A7C; }
.sheet-grid td.off { background: repeating-linear-gradient(135deg, rgba(107,78,51,.07) 0 4px, transparent 4px 9px); }
.sheet-foot { margin: 1.6cqw 0 0; font-size: 1.5cqw; color: var(--ink-soft); display: flex; justify-content: space-between; }
.tool-notes { margin-top: 3.5rem; }
.paper.flat { margin: 0; width: auto; max-width: 48rem; }
.paper > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 960px) {
  .tool-grid { grid-template-columns: 1fr; }
  .sheet-wrap { position: static; order: -1; }
}
@media print {
  @page { size: letter landscape; margin: 10mm; }
  body.tool-page > *:not(main), .tool-form, .tool-notes, .page-top { display: none !important; }
  .tool-main { margin: 0; padding: 0; }
  .tool-grid { display: block; width: auto; }
  .sheet-wrap { position: static; }
  .sheet { box-shadow: none; border-radius: 0; padding: 0; aspect-ratio: auto; height: 185mm; background: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet-grid td.off { background: repeating-linear-gradient(135deg, #EEE6D8 0 4px, transparent 4px 9px); }
}

/* ------------------------------------------------------------------ footer */
.site-foot { position: relative; padding: 4rem 0 2.5rem; background: linear-gradient(var(--night), #0D0A08); color: var(--muted); font-size: .98rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; align-items: start; }
.foot-brand .brand { font-size: 1.7rem; }
.foot-brand p { margin: .8rem 0 0; max-width: 22rem; }
.site-foot nav { display: grid; gap: .1rem; }
.site-foot h2 { font: 500 1rem/1.3 var(--display); font-variant-caps: small-caps; letter-spacing: .06em; color: var(--brass-l); margin: 0 0 .5rem; }
.site-foot nav a { color: var(--bone); text-decoration: none; padding-block: .35rem; justify-self: start; }
.site-foot nav a:hover { color: var(--hot); text-decoration: underline; }
.foot-legal { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(181,132,90,.22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .92rem; }
.foot-legal p { margin: 0; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ motion: the app's springs, only where they answer you */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ember, .forge-glow i, .parent-sky .shoot { display: none; }
  .parent-sky .tw { opacity: .7; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .site-head, .site-foot, .hero-scene, .pets-strip, .closer, .skip { display: none !important; }
  html, body { background: #fff; color: #000; }
  .paper { box-shadow: none; background: none; margin: 0; width: auto; padding: 0; }
  .page-top { background: none; }
  .page-top .band { display: none; }
  .page-title h1, .page-title .lede { color: #000; text-shadow: none; }
}

/* layout:begin (written by scripts/site/world.mjs) */
.hero .quest-card { --x: 790; --y: 650; --ground: 850; }
.hero-scene .lock { --x: 1410; --y: 902; --phone: 210; }
.hero-scene .lock-glow { --x: 1410; --y: 545; }
.hero-scene .s0 { --x: 836; --y: 940; --w: 120; }
.hero-scene .s1 { --x: 948; --y: 929; --w: 110; }
.hero-scene .s2 { --x: 1056; --y: 920; --w: 102; }
.hero-scene .s3 { --x: 1160; --y: 912; --w: 94; }
.hero-scene .wick { --x: 836; --y: 940; }
.hero-scene .wick[data-at="1"] { --dx: 112; --dy: -11; }
.hero-scene .wick[data-at="2"] { --dx: 220; --dy: -20; }
.hero-scene .wick[data-at="3"] { --dx: 324; --dy: -28; }
@media (max-width: 699px) {
  .hero-scene .lock { --x: 618; --y: 858; --phone: 240; }
  .hero-scene .lock-glow { --x: 618; --y: 450; }
  .hero-scene .s0 { --x: 150; --y: 962; --w: 116; }
  .hero-scene .s1 { --x: 248; --y: 912; --w: 102; }
  .hero-scene .s2 { --x: 336; --y: 874; --w: 92; }
  .hero-scene .s3 { --x: 410; --y: 850; --w: 82; }
  .hero-scene .wick { --x: 150; --y: 962; }
  .hero-scene .wick[data-at="1"] { --dx: 98; --dy: -50; }
  .hero-scene .wick[data-at="2"] { --dx: 186; --dy: -88; }
  .hero-scene .wick[data-at="3"] { --dx: 260; --dy: -112; }
}
.pets-scene .p0 { --x: 240; --y: 680; --w: 250; }
.pets-scene .p1 { --x: 462; --y: 676; --w: 196; }
.pets-scene .p2 { --x: 684; --y: 682; --w: 232; }
.pets-scene .p3 { --x: 912; --y: 676; --w: 214; }
.pets-scene .p4 { --x: 1138; --y: 680; --w: 196; }
.pets-scene .p5 { --x: 1362; --y: 676; --w: 220; }
/* layout:end */

/* pets:begin (written by scripts/site/pet_frames.py) */
.patch.wick-lid55 { left: 34.71%; top: 18.44%; width: 18.21%; }
.patch.wick-lid80 { left: 34.64%; top: 18.44%; width: 18.29%; }
.patch.wick-lid100 { left: 34.64%; top: 18.44%; width: 18.29%; }
.patch.wick-look-left { left: 30.50%; top: 15.04%; width: 38.14%; }
.patch.wick-look-right { left: 30.64%; top: 15.04%; width: 39.50%; }
.patch.wick-happy { left: 30.64%; top: 15.04%; width: 28.36%; }
.patch.cat-lid55 { left: 40.43%; top: 14.02%; width: 20.29%; }
.patch.cat-lid80 { left: 40.36%; top: 14.02%; width: 20.43%; }
.patch.cat-lid100 { left: 40.64%; top: 14.02%; width: 19.79%; }
.patch.cat-look-left { left: 36.57%; top: 0.00%; width: 28.57%; }
.patch.cat-look-right { left: 34.50%; top: 9.44%; width: 31.86%; }
.patch.cat-happy { left: 36.21%; top: 9.30%; width: 30.14%; }
.patch.owlbear-lid55 { left: 35.43%; top: 24.88%; width: 29.14%; }
.patch.owlbear-lid80 { left: 35.43%; top: 24.88%; width: 29.14%; }
.patch.owlbear-lid100 { left: 35.43%; top: 24.88%; width: 29.14%; }
.patch.owlbear-look-left { left: 19.07%; top: 0.00%; width: 60.64%; }
.patch.owlbear-look-right { left: 19.07%; top: 0.00%; width: 63.07%; }
.patch.owlbear-happy { left: 34.00%; top: 23.71%; width: 32.00%; }
.patch.golem-lid55 { left: 35.79%; top: 9.81%; width: 38.07%; }
.patch.golem-lid80 { left: 35.79%; top: 9.81%; width: 38.07%; }
.patch.golem-lid100 { left: 35.79%; top: 9.81%; width: 38.07%; }
.patch.golem-look-left { left: 28.43%; top: 4.69%; width: 45.43%; }
.patch.golem-look-right { left: 28.43%; top: 0.00%; width: 45.36%; }
.patch.golem-happy { left: 35.64%; top: 7.21%; width: 38.21%; }
.patch.axolotl-lid55 { left: 36.79%; top: 14.44%; width: 36.79%; }
.patch.axolotl-lid80 { left: 36.79%; top: 14.44%; width: 36.86%; }
.patch.axolotl-lid100 { left: 36.29%; top: 14.44%; width: 37.86%; }
.patch.axolotl-look-left { left: 8.86%; top: 0.00%; width: 82.79%; }
.patch.axolotl-look-right { left: 9.36%; top: 0.00%; width: 81.50%; }
.patch.axolotl-happy { left: 8.29%; top: 0.00%; width: 83.43%; }
.patch.phoenix-lid55 { left: 40.43%; top: 21.36%; width: 32.43%; }
.patch.phoenix-lid80 { left: 40.43%; top: 21.36%; width: 32.57%; }
.patch.phoenix-lid100 { left: 36.79%; top: 21.36%; width: 37.64%; }
.patch.phoenix-look-left { left: 0.00%; top: 0.00%; width: 80.36%; }
.patch.phoenix-look-right { left: 0.00%; top: 0.00%; width: 80.79%; }
.patch.phoenix-happy { left: 7.43%; top: 21.20%; width: 72.93%; }
/* pets:end */