/* Ninth Door Studio: one stylesheet for every page.
   Layout: one dark page in the studio's night-sky colours. The home page opens on a full-bleed night sky with gold
   script drifting across it, the studio's name low over a dark fade; then four sections on one left-aligned column:
   who we are, what we stand for, our productions (one entry per game) and get in touch, then the footer. Sub-pages
   use the same header, column and footer.
   Gold is kept for things you can press, the section labels and "Episode 1 is free."
   Type scale: Jost 13 (labels), 15 (small text and UI), 17 (buttons, fields), 21 (titles), 30 to 52 (headings);
   Literata 15 (small print), 17 / 18 (body), 18 / 21 (lead paragraphs), 27 (intro and captions). The first screen
   scales with the screen as the mockup did, and the wordmark slots keep their own sizes.
   Corners: 10px for anything you press or type into, 16px for pictures.
   The site is deliberately one dark design, so it reads the same with the system set to light or dark. */
:root {
  --night: #0a0f26;          /* the sky */
  --night-2: #121a3c;        /* raised surfaces: inputs, status tiles */
  --gold: #e8b968;           /* the script's gold */
  --gold-line: rgba(232, 185, 104, .42);
  --ink: #f5ede0;            /* warm white text */
  --ink-dim: #c3bcb2;        /* secondary text, about 10:1 on --night */
  --ink-faint: #9a96a0;      /* footnotes, about 6:1 on --night */
  --rule: rgba(245, 237, 224, .14);
  --rule-strong: rgba(245, 237, 224, .24);
  --sans: "Jost", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --gutter-l: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  --vh: 1vh;
  color-scheme: dark;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.65;
  overflow-x: clip;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
/* the faint drifting script behind every page: one fixed canvas under the content (drawn by site.js) */
.bg-script { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .22; pointer-events: none; }
body > :not(.bg-script) { position: relative; z-index: 1; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--sans); font-weight: 500; line-height: 1.2; letter-spacing: .01em; margin: 0; text-wrap: balance; }
p, ul, ol, figure, h4 { margin: 0; }
p, figcaption, li { text-wrap: pretty; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) { body { font-size: 18px; } }

/* One wrapper for the side gutter and the column; every band and every page uses it. */
.wrap { width: 100%; max-width: 1136px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* ---------- header: logo slot + links (the same on every page) ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-top: env(safe-area-inset-top, 0px); }
/* LOGO SLOTS: the studio logo (the gold arched door and the name, one image). Each slot has a fixed height:
     header (sub-pages)  28px on phones, 32px from 768px up   (.brand; img/logo-28 and logo-32, exported at 2x)
     footer              24px, inside a 44px tap area          (.brand.small; img/logo-24)
     home first screen   the mark sits above the wordmark text (.hero-mark; img/mark-simple.svg, mark-hero-light) */
.brand { display: flex; align-items: center; height: 28px; color: var(--ink); text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand { gap: 10px; }
.brand .logo, .brand .logo img { display: block; height: 100%; width: auto; max-width: none; flex: none; }
.hero-mark, .hero-mark img { display: block; height: 56px; width: auto; }
.brand.small { height: 44px; padding-block: 10px; }
.brand.hero { gap: 0; }
.wordmark { font-family: var(--sans); font-weight: 400; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.brand.small .wordmark { font-size: 11.5px; }
.nav { display: flex; list-style: none; padding: 0; gap: 4px; margin-right: -8px; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding-inline: 8px;
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
  transition: color .15s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (min-width: 768px) {
  .top { min-height: 80px; }
  .brand { height: 32px; }
  .brand.small { height: 44px; }
  .wordmark { font-size: 14px; letter-spacing: .3em; }
  .brand.small .wordmark { font-size: 11.5px; }
  .nav { gap: 14px; }
}
.page-head { border-bottom: 1px solid var(--rule); }
/* every other page carries a thin band of the studio sky, its gold script painted in (no animation) */
.page-sky { position: relative; height: 112px; overflow: hidden; background: var(--night); }
.page-sky img, .page-sky .sky-script { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.page-sky img { object-fit: cover; object-position: 50% 30%; }
.page-sky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 15, 38, .35), rgba(10, 15, 38, 0) 40%, rgba(10, 15, 38, .2) 70%, var(--night)); }
@media (min-width: 768px) { .page-sky { height: 160px; } }
/* phones: the wordmark and the links don't fit on one line, so the links take a row of their own */
@media (max-width: 599px) {
  .page-head .top { flex-direction: column; align-items: flex-start; gap: 0; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .page-head .nav { margin-left: -8px; margin-right: 0; }
}

/* ---------- home: the sky ----------
   Matches the chosen mockup frames (Direction C): phone 390 x 844 with cover2 (also used on portrait tablets),
   desktop 1200 x 720 with the library hero (landscape screens from 768px). On those, the offsets and type scale
   with the screen width, as they did in the 1200-wide frame; the corner insets mirror each other. */
.sky { position: relative; height: calc(var(--vh) * 100); min-height: 560px; max-height: 1100px; overflow: hidden; background: var(--night); }
.sky-img, .sky-img img, .sky-script { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-img img { object-fit: cover; object-position: 50% 100%; max-width: none; }
/* phones and portrait tablets (banner tall): the picture is lifted so the boy stands just above the text, and its
   lower edge fades into the night the text sits on */
@media (max-aspect-ratio: 1/1) {
  .sky-img img { transform: translateY(-10%); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
}
.sky-script { pointer-events: none; }
.sky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 11, 30, .96) 0%, rgba(8, 11, 30, .72) 22%, rgba(8, 11, 30, 0) 52%),
    linear-gradient(to bottom, rgba(8, 11, 30, .75) 0%, rgba(8, 11, 30, 0) 15%);
}
.sky > .top {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; justify-content: flex-end; min-height: 56px;
  max-width: none; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.sky .nav { gap: 0; }
.sky-low { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.sky-low .wrap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  max-width: none; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.brand.hero { font-size: min(22px, 5.65vw); height: 1.35em; }
.brand.hero .wordmark { font-size: 1em; letter-spacing: .26em; }
.sky-low .studio-line { max-width: 460px; font-size: 16px; line-height: 1.55; color: rgba(245, 237, 224, .74); text-wrap: balance; }
.down {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 0;
  font-family: var(--sans); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); text-decoration: none;
}
.down svg { width: .9em; height: .9em; }
/* landscape screens 768px and wider follow the desktop frame and show the library hero; portrait tablets keep the
   phone frame and cover2 */
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .sky-img img { object-position: 50% 30%; }
  .sky > .top { min-height: 64px; padding-left: max(6vw, calc((100vw - 1088px) / 2)); padding-right: max(6vw, calc((100vw - 1088px) / 2)); }
  .sky .nav { gap: 14px; }
  .sky .nav a, .down { font-size: clamp(14px, 1vw, 17px); }
  /* the mockup's text sat 72px from the left and its studio line ended 64px above the bottom of a 1200 x 720 frame;
     the cue (58px with its gap) sits under the line */
  .sky-low { padding-bottom: max(0px, calc(var(--vh) * 8.89 - 58px)); }
  .sky-low .wrap { padding-left: max(6vw, calc((100vw - 1088px) / 2)); padding-right: max(6vw, calc((100vw - 1088px) / 2)); gap: clamp(14px, 1.1667vw, 24px); }
  .brand.hero { font-size: clamp(22px, 2.3333vw, 44px); }
  .hero-mark, .hero-mark img { height: clamp(56px, 5.8vw, 110px); }
  .sky-low .studio-line { max-width: 25.6em; font-size: clamp(16px, 1.5vw, 28px); }
}
/* portrait tablets keep the phone frame, with the type scaled up for the larger screen */
@media (min-width: 600px) and (max-aspect-ratio: 1/1) {
  .sky > .top, .sky-low .wrap { padding-left: 48px; padding-right: 48px; }
  .sky-low { padding-bottom: 32px; }
  .sky .nav a, .down { font-size: 15px; }
  .brand.hero { font-size: 32px; }
  .hero-mark, .hero-mark img { height: 76px; }
  .sky-low .studio-line { max-width: 25.6em; font-size: 20px; }
}
/* very wide screens use the 3.1 : 1 strip, cropped as in the mockup */
@media (min-width: 768px) and (min-aspect-ratio: 2/1) { .sky-img img { object-position: 34% 30%; } }
/* a phone held sideways: the banner fits the screen so the name and line are in the first view */
@media (max-height: 500px) and (orientation: landscape) {
  .sky { min-height: 0; }
  .sky-low .wrap { gap: 8px; }
}

/* ---------- home: sections ---------- */
.band { padding-block: 72px; }
@media (min-width: 768px) { .band { padding-block: 112px; } }
.band + .band { border-top: 1px solid var(--rule); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.section-head { margin-bottom: 32px; }
@media (min-width: 768px) { .section-head { margin-bottom: 48px; } }
h2.title { font-size: clamp(30px, 3.6vw, 52px); font-weight: 400; letter-spacing: 0; }
.label { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* 1. who we are: the studio's arch mark, drawn in code, above the text on phones and beside it from 900px */
.who { display: grid; grid-template-columns: 1fr; gap: 28px; }
.who-art { color: var(--gold); }
.who-mark { display: block; width: auto; height: 160px; filter: drop-shadow(0 0 6px rgba(232, 185, 104, .35)); }
.who-text { display: flex; flex-direction: column; gap: 20px; }
.who-text p { max-width: 38rem; font-size: 18px; line-height: 1.65; }
.who-text h2 { margin-bottom: 4px; }
.who-lead { font-size: 21px !important; line-height: 1.5 !important; color: var(--ink); }
@media (min-width: 768px) { .who-text p { font-size: 21px; } .who-lead { font-size: 27px !important; } }
@media (min-width: 900px) {
  .who { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; }
  .who-art { order: 2; display: flex; justify-content: center; }
  .who-mark { height: 220px; }
}

/* 2. what we stand for: six values, three by two on desktop, unboxed, a hairline above each */
.values { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 32px; column-gap: 48px; }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--rule-strong); }
.value-icon { display: block; width: 44px; height: 44px; color: var(--gold); filter: drop-shadow(0 0 4px rgba(232, 185, 104, .3)); }
.value-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 1000px) { .value-icon { width: 56px; height: 56px; } }
.value h3 { font-size: 21px; font-weight: 500; color: var(--ink); }
.value p { font-size: 17px; line-height: 1.6; color: var(--ink-dim); }

/* 3. productions: one <article class="production"> per game; copy it for the next one.
   Below the cover: the description beside the season facts, then the teaser carousel beside the sign-up. */
.production { display: flex; flex-direction: column; }
.production + .production { margin-top: 96px; }
.cover { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--rule-strong); background: var(--night-2); }
.cover img.cover-art { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 11, 30, .9) 0%, rgba(8, 11, 30, .55) 26%, rgba(8, 11, 30, 0) 50%); }
.cover h3 { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; }
.cover h3 img { width: min(260px, 72%); }
@media (min-width: 768px) {
  .cover img.cover-art { aspect-ratio: 16 / 9; object-position: 50% 40%; }
  .cover h3 { left: 40px; right: auto; bottom: 36px; }
  .cover h3 img { width: 340px; }
}
.prod-body { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; }
.prod-body .lede { max-width: 38rem; font-size: 18px; line-height: 1.6; }
@media (min-width: 768px) { .prod-body .lede { font-size: 21px; } }
.season { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 20px; border-top: 1px solid var(--rule); }
.free { font-family: var(--sans); font-size: 21px; font-weight: 500; color: var(--gold); }
.length { font-family: var(--sans); font-size: 15px; letter-spacing: .04em; color: var(--ink-dim); }
@media (min-width: 1000px) {
  .prod-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 64px; align-items: start; }
  .season { border-top: 0; padding-top: 4px; padding-left: 32px; border-left: 1px solid var(--rule); }
}
.sub-head { margin-top: 64px; }
@media (min-width: 768px) { .sub-head { margin-top: 88px; } }

/* the teaser: one carousel of the four teaser pictures and three sample screens, with the sign-up beside it
   (under it on phones). Each slide is as tall as the phone screen allows; scroll-snap does the swiping. */
.teaser { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 64px; }
@media (min-width: 1000px) { .teaser { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; margin-top: 88px; } }
.carousel { --slide-h: min(calc(var(--vh) * 62), 560px); min-width: 0; }
.car-track {
  list-style: none; margin: 0; padding: 0 var(--gutter-r) 4px var(--gutter-l); display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); scroll-padding-inline: var(--gutter-l);
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.car-slide { flex: none; scroll-snap-align: start; width: min(calc(var(--slide-h) * .75), calc(100vw - 88px)); }  /* on a phone the next slide peeks in */
.car-slide.is-screen { width: calc(var(--slide-h) * 390 / 844); }
.car-slide figure { display: flex; flex-direction: column; gap: 12px; }
.car-slide img { width: 100%; height: var(--slide-h); object-fit: cover; border-radius: 16px; background: var(--night-2); }
.car-slide.is-screen img { border: 1px solid var(--rule); }
.car-slide.pos-tz2 img { object-position: 30% 50%; }
.car-slide.pos-tz3 img { object-position: 20% 50%; }
.car-slide figcaption { font-size: 15px; line-height: 1.5; color: var(--ink-dim); }
@media (min-width: 1000px) { .car-track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.car-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.car-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--gold-line); border-radius: 10px; background: transparent; color: var(--gold); cursor: pointer; transition: border-color .15s, opacity .15s; }
.car-btn svg { width: 16px; height: 16px; }
.car-btn:hover { border-color: var(--gold); }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-dots { display: flex; gap: 2px; }
.car-dot { width: 24px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.car-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); transition: background-color .15s, transform .15s; }
.car-dot[aria-current="true"]::before { background: var(--gold); transform: scale(1.25); }
.teaser-side { display: flex; flex-direction: column; gap: 14px; }
.teaser-side .label { margin-top: 18px; }

/* store tiles: three equal statuses (not links until the store pages exist), in the teaser's side column */
.stores { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.store {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 56px; padding-inline: 8px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--night-2);
  color: var(--ink); font-family: var(--sans); line-height: 1.2; text-align: center;
}
.store-name { font-size: 17px; font-weight: 500; white-space: nowrap; }
.store-state { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* forms */
.notify-form { display: flex; flex-direction: column; gap: 10px; }
.notify-form > label { font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--sans); font-size: 15px; color: var(--ink-dim); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--gold); cursor: pointer; }
.field { display: flex; gap: 8px; }
.field input, .contact-form input, .contact-form select, .contact-form textarea {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 52px; padding: 0 14px;
  border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--night-2); color: var(--ink);
  font: 17px/1.3 var(--serif); transition: border-color .15s;
}
.contact-form textarea { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; }
.contact-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }
.field input:focus, .contact-form :is(input, select, textarea):focus { border-color: var(--gold); outline: none; }
.field input:focus-visible, .contact-form :is(input, select, textarea):focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--gold); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 52px; padding: 0 22px;
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  background: var(--gold); color: var(--night); font: 500 17px/1 var(--sans); letter-spacing: .02em;
  transition: background-color .15s;
}
.btn:hover { background: #f1cb86; color: var(--night); }
.btn:active { transform: translateY(1px); }
.fine { font-size: 15px; color: var(--ink-faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 4. get in touch: the intro, then the form with the email beside it from 900px */
.touch-intro { max-width: 38rem; font-size: 18px; line-height: 1.6; margin-bottom: 32px; }
@media (min-width: 768px) { .touch-intro { font-size: 21px; margin-bottom: 40px; } }
.touch { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .touch { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 64px; align-items: start; } }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form .row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .contact-form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-form .f { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-form label { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink-dim); }
.contact-form .btn { align-self: flex-start; }
.touch-aside { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .touch-aside { padding-top: 0; padding-left: 32px; border-top: 0; border-left: 1px solid var(--rule); } }
.touch-aside p { font-size: 15px; color: var(--ink-dim); }

/* the email with its copy button */
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mail-address { font-family: var(--sans); font-size: 18px; letter-spacing: .01em; color: var(--ink); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.copy {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--gold-line); border-radius: 10px; background: transparent;
  color: var(--gold); font: 500 15px/1 var(--sans); letter-spacing: .04em; cursor: pointer; transition: border-color .15s;
}
.copy:hover { border-color: var(--gold); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.foot .wrap { display: flex; flex-direction: column; gap: 6px; }
.foot-links { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 0 4px; margin-left: -8px; }
.foot-links a { display: flex; align-items: center; min-height: 44px; padding-inline: 8px; font-family: var(--sans); font-size: 15px; color: var(--ink-dim); text-decoration: none; transition: color .15s; }
.foot-links a:hover { color: var(--ink); }
.foot-legal { display: flex; flex-direction: column; gap: 2px; }
.copyright { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-faint); text-wrap: balance; }
.foot .brand { flex: none; align-self: flex-start; }
@media (min-width: 1000px) {
  .foot .wrap { flex-direction: row; align-items: center; gap: 24px; }
  .foot-links { margin-left: auto; margin-right: -8px; }
}

/* ---------- sub-pages: the home page's column, aligned left ---------- */
.page { padding-block: 48px 72px; }
@media (min-width: 768px) { .page { padding-block: 72px 104px; } }
.page h1 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 400; letter-spacing: 0; }
.effective { font-family: var(--sans); font-size: 15px; letter-spacing: .04em; color: var(--ink-faint); }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose > * { max-width: 38rem; }
.prose h2 { font-size: 21px; margin-top: 20px; }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.prose .topics, .topics { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.topics li { display: flex; flex-direction: column; gap: 4px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.topics h2 { font-size: 21px; margin-top: 0; }
.topics p { color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active { transform: none; }
}