/* Relentless Forge — site styles.
   Tokens follow the Website & Brand Brief's Forge palette. Light (Bone) is the
   default; dark (Forge Black) follows the visitor's system setting unless they
   pick one with the sun/moon toggle (data-theme on <html>). The creed page is
   always dark. */

:root {
  --bone: #FAF7F2;
  --forge-black: #0E0D0C;
  --iron: #1C1A18;
  --ember: #E8590C;
  --molten: #F2A93B;
  --ash: #D9D4CC;

  --bg: var(--bone);
  --surface: #FFFFFF;
  --ink: var(--forge-black);
  --ink-soft: rgba(14, 13, 12, 0.68);
  --ink-faint: rgba(14, 13, 12, 0.48);
  --hairline: rgba(14, 13, 12, 0.12);
  /* Ember darkened for text and buttons so it passes WCAG AA on Bone. */
  --accent: #B4460A;
  --accent-ink: #FFFFFF;
  --mark: var(--forge-black);
  --field: #FFFFFF;
  --shadow: 0 1px 2px rgba(14, 13, 12, 0.04), 0 8px 24px rgba(14, 13, 12, 0.06);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --page: 1120px;
  --gutter: 16px;
  --radius: 18px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--forge-black);
    --surface: var(--iron);
    --ink: #F4EFE7;
    --ink-soft: rgba(244, 239, 231, 0.72);
    --ink-faint: rgba(244, 239, 231, 0.5);
    --hairline: rgba(217, 212, 204, 0.14);
    --accent: var(--molten);
    --accent-ink: var(--forge-black);
    --mark: #F4EFE7;
    --field: #141311;
    --shadow: none;
    color-scheme: dark;
  }
}

/* The visitor chose dark with the toggle. */
:root[data-theme="dark"] {
  --bg: var(--forge-black);
  --surface: var(--iron);
  --ink: #F4EFE7;
  --ink-soft: rgba(244, 239, 231, 0.72);
  --ink-faint: rgba(244, 239, 231, 0.5);
  --hairline: rgba(217, 212, 204, 0.14);
  --accent: var(--molten);
  --accent-ink: var(--forge-black);
  --mark: #F4EFE7;
  --field: #141311;
  --shadow: none;
  color-scheme: dark;
}

/* The forge: always-dark surfaces (creed page, dark bands). */
.forge {
  --bg: var(--forge-black);
  --surface: var(--iron);
  --ink: #F4EFE7;
  --ink-soft: rgba(244, 239, 231, 0.72);
  --ink-faint: rgba(244, 239, 231, 0.5);
  --hairline: rgba(217, 212, 204, 0.14);
  --accent: var(--molten);
  --accent-ink: var(--forge-black);
  --mark: #F4EFE7;
  --field: #141311;
  --shadow: none;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Keep anchor targets (#apply, #waitlist) clear of the sticky header. */
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 10;
}
.skip:focus { left: 8px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.4em;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.6rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 36em; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* ---------- The lion mark (an SVG mask, so it takes the text colour) ---------- */

.lion {
  display: inline-block;
  aspect-ratio: 831 / 928;
  background-color: var(--mark);
  -webkit-mask: url("/images/lion.svg") center / contain no-repeat;
          mask: url("/images/lion.svg") center / contain no-repeat;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.forge .site-header { background: color-mix(in srgb, var(--forge-black) 88%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .lion { width: 26px; }
.brand-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }

.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav-links a {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  text-decoration: none; font-size: 0.95rem; color: var(--ink-soft);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: var(--hairline); }

.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; padding: 8px 14px; border: 1px solid var(--hairline);
  border-radius: 999px; font-size: 0.95rem;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; display: grid;
}
.menu-panel a { padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.menu-panel a:hover { background: var(--hairline); }

@media (max-width: 719px) {
  .nav-links { display: none; }
  .menu { display: block; }
}

.nav-end { display: flex; align-items: center; gap: 8px; }

/* Sun/moon toggle: shows the moon in light mode (tap for dark) and the sun in
   dark mode (tap for light). The icon follows the same rules as the colours,
   so it is right before any script runs. */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--hairline); border-radius: 999px; background: transparent;
  color: var(--ink); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.theme-toggle:hover { border-color: var(--ink-faint); background: var(--hairline); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
/* Without JavaScript the toggle can't work, so it isn't shown. The creed page
   is always dark, so the toggle has nothing to change there either. */
html:not(.js) .theme-toggle, .forge .theme-toggle { display: none; }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 0.98rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, background-color .15s ease;
}
.button:active { transform: translateY(1px); }
.button-primary { background: var(--ink); color: var(--bg); }
.button-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--accent)); }
.button-accent { background: var(--accent); color: var(--accent-ink); }
.button-accent:hover { filter: brightness(1.06); }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--hairline); }
.button-quiet:hover { border-color: var(--ink-faint); }
.text-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.badge-link img { height: 48px; width: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-link img { outline: 1px solid #A6A6A6; border-radius: 9px; } }
:root[data-theme="dark"] .badge-link img { outline: 1px solid #A6A6A6; border-radius: 9px; }

/* ---------- Sections ---------- */

.section { padding: clamp(56px, 9vw, 112px) 0; }
.section + .section { border-top: 1px solid var(--hairline); }
.section-head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { margin-bottom: 0.3em; }

/* ---------- Hero ---------- */

.hero { padding: clamp(48px, 9vw, 120px) 0 clamp(56px, 9vw, 112px); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero .lion { width: min(70%, 360px); justify-self: center; }
.hero h1 { max-width: 11em; }
.hero .lede { margin-bottom: 2rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.35fr 1fr; gap: 64px; }
  .hero .lion { width: 100%; max-width: 400px; justify-self: end; }
}

/* ---------- App cards ---------- */

.cards { display: grid; gap: 20px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.card-top { display: flex; align-items: center; gap: 14px; }
.app-icon {
  width: 64px; height: 64px; border-radius: 22.5%; flex: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.app-icon.large { width: 112px; height: 112px; }
.card h3 { margin: 0; font-size: 1.35rem; }
.card .category { font-size: 0.82rem; color: var(--ink-faint); margin: 2px 0 0; }
.card .promise { font-family: var(--serif); font-size: 1.15rem; line-height: 1.35; margin: 0; flex: 1; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-actions .badge-link img { height: 40px; }
a.card { text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--ink-faint); }

.soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.soon-list li { border-top: 1px solid var(--hairline); }
.soon-list li:last-child { border-bottom: 1px solid var(--hairline); }
.soon-list a { display: flex; align-items: center; gap: 16px; padding: 18px 0; text-decoration: none; }
.soon-list .app-icon { width: 52px; height: 52px; }
.soon-list strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; display: block; }
.soon-list span { color: var(--ink-soft); }
.soon-list .arrow { margin-left: auto; color: var(--ink-faint); }

.status-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-soft);
}
.status-pill.live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }

/* ---------- Promises / features ---------- */

.trio { display: grid; gap: 28px; }
@media (min-width: 720px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.trio h3 { font-size: 1.3rem; margin-bottom: 0.4em; }
.trio p { color: var(--ink-soft); margin: 0; }
.trio .num { font-family: var(--serif); color: var(--accent); font-size: 1rem; display: block; margin-bottom: 10px; }

/* ---------- Tiers ---------- */

.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier { border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; background: var(--surface); }
.tier .name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 600; }
.tier .amount { font-family: var(--serif); font-size: 2rem; line-height: 1.1; margin: 6px 0 4px; }
.tier .amount small { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); }
.tier p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.facts { display: grid; gap: 0; margin: 0; }
.facts div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) { .facts div { grid-template-columns: 220px 1fr; gap: 24px; } }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-soft); }

/* ---------- Dark band ---------- */

.band { border-radius: 28px; padding: clamp(32px, 6vw, 64px); }
.band h2 { max-width: 14em; }

/* ---------- Forms ---------- */

.form { display: grid; gap: 18px; }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } }
label, legend { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 6px; }
.hint { font-weight: 400; color: var(--ink-faint); font-size: 0.85rem; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--field); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 12px 14px; min-height: 48px;
}
textarea { min-height: 112px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
fieldset { border: 0; padding: 0; margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 14px; cursor: pointer; background: var(--field);
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.check:has(input:checked) { border-color: var(--accent); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.inline-form input[type="email"] { flex: 1 1 220px; }
.inline-form .button { flex: none; }

.notice {
  border-radius: 14px; padding: 16px 18px; margin-bottom: 20px;
  border: 1px solid var(--hairline); background: var(--surface);
}
.notice.success { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.notice.error { border-color: #C0392B; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice strong { display: block; }

/* ---------- FAQ ---------- */

.faq details { border-top: 1px solid var(--hairline); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-faint); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--ink-soft); }

/* ---------- App page ---------- */

.app-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.app-hero .app-icon { margin-bottom: 28px; }
.app-hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); max-width: 13em; }
.store-name { color: var(--ink-faint); font-size: 0.95rem; margin: -0.2em 0 1.2em; }
.legal-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }

/* ---------- Prose (legal, about) ---------- */

.prose { max-width: 42em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--accent); }

/* ---------- Creed ---------- */

/* The creed is told like a product page: one print at a time fills the
   screen and stays pinned while the stanzas scroll over it; as each stanza
   reaches the middle, its print fades in over the last. The prints are ink
   on warm paper, so the page takes the paper's colour; in dark mode they are
   inverted into light ink on black paper. */

.creed-page { --paper: #F7F2EC; --ink-print: #1E1914; }
.creed-page main { background: var(--paper); }

.creed-story { position: relative; }
.creed-stage {
  position: sticky; top: 64px; z-index: 0;
  height: calc(100svh - 64px); margin-bottom: calc(64px - 100svh);
  overflow: hidden; background: var(--paper);
}
.scene-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.9s ease, transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.scene-art.is-active { opacity: 1; transform: none; }

.scene {
  position: relative; z-index: 1;
  min-height: calc(100svh - 64px);
  display: flex; align-items: center;
  padding: clamp(48px, 8vh, 96px) 0;
}
.scene-copy { width: 100%; }
.scene-copy > * { max-width: 34rem; }
.scene-num {
  font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.24em;
  color: var(--accent); margin: 0 0 18px;
}
.scene .stanza {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.42;
  color: color-mix(in srgb, var(--ink) 86%, transparent); margin: 0; text-wrap: pretty;
}
.scene .stanza .lead { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.25em; }

.scene-hero h1 { font-size: clamp(3rem, 7.4vw, 6rem); margin-bottom: 0.15em; }
.scene-hero .byline { color: var(--ink-soft); font-size: 1.1rem; margin-bottom: 36px; }
.scroll-cue {
  display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--ink-faint); padding-bottom: 4px;
}
.scroll-cue:hover { border-color: var(--ink); }

/* Wide screens: the words sit on the print's open paper and the art runs
   full-bleed behind them. */
@media (min-width: 900px) {
  .scene-copy > * { max-width: min(34rem, 36vw); }
}

/* Phones and tablets: the print fills the top and fades into the paper; the
   words sit in front of the lower part of it. */
@media (max-width: 899px) {
  /* Each stanza holds still on the paper under its print for a while, then
     lifts away; the words never travel across the art. */
  .scene { align-items: flex-start; min-height: 120svh; padding: 0; }
  .scene-copy { position: sticky; top: calc(64px + 0.46 * (100svh - 64px)); padding-bottom: 20px; }
  .scene-art { height: 68%; object-position: 76% 50%; }
  .scene-art.is-hero { height: 60%; }
  .creed-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 38%, var(--paper) 66%);
  }
}

/* Where the words cross the art, a paper-coloured halo hugs every letter so
   it reads against ink of any colour. */
.scene-copy {
  text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 28px var(--paper);
}
/* …and a solid paper outline drawn under each glyph, knocking it out of the
   ink like a printer would, so even orange-on-orange keeps a clean edge. */
.scene-copy h1, .scene-copy .stanza, .scene-copy .scene-num, .scene-copy .byline {
  -webkit-text-stroke: 0.16em var(--paper); paint-order: stroke fill;
}
.scene .stanza .lead { color: var(--creed-lead, var(--ink)); }
.scene .stanza { color: var(--creed-body, color-mix(in srgb, var(--ink) 86%, transparent)); }

/* Dark: the prints invert to light ink on black paper. The creed then sets in
   molten orange, heavier, so it never melts into the white ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .creed-page {
    --paper: #0F0B08; --creed-lead: #FFB547; --creed-body: #F5A24A;
  }
  :root:not([data-theme="light"]) .creed-page .scene-art { filter: invert(1) hue-rotate(180deg) saturate(1.15); }
  :root:not([data-theme="light"]) .creed-page .scene .stanza { font-weight: 500; }
  :root:not([data-theme="light"]) .creed-page .scene .stanza .lead { font-weight: 700; }
  :root:not([data-theme="light"]) .creed-page .scene-hero h1 { color: #FFB547; }
}
:root[data-theme="dark"] .creed-page { --paper: #0F0B08; --creed-lead: #FFB547; --creed-body: #F5A24A; }
:root[data-theme="dark"] .creed-page .scene-art { filter: invert(1) hue-rotate(180deg) saturate(1.15); }
:root[data-theme="dark"] .creed-page .scene .stanza { font-weight: 500; }
:root[data-theme="dark"] .creed-page .scene .stanza .lead { font-weight: 700; }
:root[data-theme="dark"] .creed-page .scene-hero h1 { color: #FFB547; }

.creed-credit { padding: clamp(64px, 10vw, 120px) 0; text-align: center; background: var(--paper); }
.creed-credit .lion { width: 48px; margin: 0 auto 20px; }
.creed-credit .signature { font-family: var(--serif); font-style: italic; font-size: 1.5rem; margin-bottom: 8px; }

/* Scroll: each stanza's words rise in as it arrives and fade as it leaves,
   so only one stanza is ever in focus. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scene .scene-copy {
      animation: through linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    /* On phones the words fade in as they settle on the paper and fade out
       as they lift, before they reach the print. */
    @media (max-width: 899px) {
      .scene .scene-copy { animation-name: through-phone; }
    }
  }
}
@keyframes through-phone {
  0%, 4%  { opacity: 0; }
  20%     { opacity: 1; }
  57%     { opacity: 1; }
  62%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-art { transform: none; transition: opacity 0.4s ease; }
}
@keyframes through {
  0%   { opacity: 0; transform: translateY(40px); }
  28%  { opacity: 1; transform: none; }
  72%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ---------- 404 ---------- */

.lost { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 64px 0; }
.lost .lion { width: 72px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; margin-top: 0; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer-grid h4 { font: 600 0.78rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: var(--ink-soft); }
.footer-grid a:hover { color: var(--ink); }
.footer-line { font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; margin: 16px 0 20px; max-width: 14em; }
.footer-line a { text-decoration: none; color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); color: var(--ink-faint); font-size: 0.88rem; }