/* eremor.com (docs/website-design.md 14.7), set by the brand guide (October 2026): midnight, lit by the lantern.
   Five colours, about seven parts in ten midnight and deep blue, the light only where it matters; Cinzel's inscribed capitals
   for titles, menus and calls, EB Garamond for everything read. Both SIL Open Font License 1.1, served from this site. The logo
   is always one of the kit's own files (web/images.txt), never set in type. */

@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* The palette (guide 05). */
  --c-midnight: #0b0f1c;
  --c-deep: #1b2a44;
  --c-amber: #f2a93b;
  --c-parchment: #ece4d2;
  --c-ember: #c4572b;
  /* What the guide's pages draw with them: the headings' warm gold, the reading text, the hairlines and raised grounds. */
  --c-gilt: #f3d9a2;
  --c-amber-hi: #f8bf5e;
  --c-text: #d9d1bf;
  --c-dim: #9c968a;
  --c-raised: #10172a;
  --c-panel: #131d33;
  --c-hair: rgba(236, 228, 210, 0.1);
  --c-hair-amber: rgba(242, 169, 59, 0.32);
  --c-ok: #8fcf8a;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-read: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 36em;
  color-scheme: dark;
}

/* ---- ground ------------------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--c-midnight); color: var(--c-text); font: 400 1.1875rem/1.62 var(--f-read); font-kerning: normal; text-rendering: optimizeLegibility; }
@media (max-width: 640px) { body { font-size: 1.125rem; } }
main { flex: 1 0 auto; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-amber-hi); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--c-gilt); }
:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--c-parchment); }
em { font-style: italic; }
code { font: 0.9em ui-monospace, Consolas, monospace; background: var(--c-panel); padding: 0.1em 0.4em; border-radius: 3px; color: var(--c-parchment); }
::selection { background: rgba(242, 169, 59, 0.35); color: #fff; }
h1, h2, h3, h4 { font-family: var(--f-caps); font-weight: 600; color: var(--c-gilt); line-height: 1.18; margin: 0 0 0.55em; letter-spacing: 0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 30; background: var(--c-amber); color: var(--c-midnight); padding: 10px 16px; font: 600 0.8125rem var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.skip:focus { left: 12px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 860px; }
.muted { color: var(--c-dim); }
.small { font-size: 0.95rem; }
.center { text-align: center; }

/* The guide's small capitals over every title: "02 · The world". */
.eyebrow { font: 400 0.8125rem/1.4 var(--f-caps); letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-amber); margin: 0 0 1.1em; }
.lede { font-size: clamp(1.25rem, 2vw, 1.45rem); line-height: 1.5; color: var(--c-parchment); max-width: var(--measure); }

/* The logo's own ornament: a gilt rule each side of a diamond. */
.rule { display: flex; align-items: center; gap: 14px; margin: 0 0 2rem; color: var(--c-amber); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-hair-amber)); }
.rule::after { background: linear-gradient(270deg, transparent, var(--c-hair-amber)); }
.rule span { width: 7px; height: 7px; transform: rotate(45deg); background: var(--c-amber); box-shadow: 0 0 12px rgba(242, 169, 59, 0.7); }
.rule-left { max-width: 280px; }
.rule-left::before { display: none; }
.rule-left::after { background: linear-gradient(90deg, var(--c-hair-amber), transparent); }

/* ---- calls --------------------------------------------------------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 3px; cursor: pointer; font: 600 0.875rem/1 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; text-decoration: none; color: var(--c-midnight); background: var(--c-amber); box-shadow: 0 0 0 1px rgba(255, 214, 140, 0.35) inset, 0 10px 34px rgba(242, 169, 59, 0.22); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.button:hover { color: var(--c-midnight); background: var(--c-amber-hi); box-shadow: 0 0 0 1px rgba(255, 228, 170, 0.6) inset, 0 12px 44px rgba(242, 169, 59, 0.38); transform: translateY(-1px); }
.button:active { transform: none; }
.button[aria-disabled="true"], .button:disabled { opacity: 0.5; pointer-events: none; }
.button-ghost { color: var(--c-gilt); background: rgba(11, 15, 28, 0.35); box-shadow: 0 0 0 1px var(--c-hair-amber) inset; }
.button-ghost:hover { color: #fff; background: rgba(242, 169, 59, 0.1); box-shadow: 0 0 0 1px var(--c-amber) inset; }
.button-small { min-height: 42px; padding: 0 20px; font-size: 0.8125rem; letter-spacing: 0.22em; }
.calls { display: flex; flex-wrap: wrap; gap: 14px; margin: 2rem 0 1rem; }
.center .calls { justify-content: center; }
.textlink { font: 600 0.8125rem/1.4 var(--f-caps); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--c-amber); }
.textlink::after { content: "  \2192"; letter-spacing: 0; }
.textlink:hover { color: var(--c-gilt); }

/* ---- the masthead: the horizontal logo (never under 280 px wide, guide 07) and the way around -------------------------------- */
.masthead { position: relative; z-index: 20; border-bottom: 1px solid var(--c-hair); background: linear-gradient(180deg, #080b15, rgba(11, 15, 28, 0.94)); }
.page-home .masthead { position: absolute; inset: 0 0 auto; border-bottom: 0; background: linear-gradient(180deg, rgba(8, 11, 21, 0.92), rgba(8, 11, 21, 0.55) 55%, transparent); }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; }
.mark { display: block; flex: none; width: 280px; margin: 4px 0 -2px -10px; }
.mark img { width: 280px; height: auto; }
.page-home .mark { visibility: hidden; }   /* the title screen is the logo: never two at once */
.menu-button { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--c-hair-amber); border-radius: 3px; color: var(--c-gilt); font: 600 0.8125rem var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; }
.menu-button .bars { width: 18px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
.menu-button .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1px solid currentColor; }
.ways { display: flex; align-items: center; gap: 6px 30px; }
.ways a:not(.button) { position: relative; padding: 10px 0; font: 400 0.875rem/1 var(--f-caps); letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-parchment); text-decoration: none; }
.ways a:not(.button)::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--c-amber); transition: left 0.25s ease, right 0.25s ease; }
.ways a:not(.button):hover, .ways a[aria-current="page"]:not(.button) { color: var(--c-gilt); }
.ways a:not(.button):hover::after, .ways a[aria-current="page"]:not(.button)::after { left: 0; right: 0; }
.ways .button { margin-left: 6px; }
@media (max-width: 1080px) {
  .js .menu-button { display: inline-flex; }
  .masthead-row { flex-wrap: wrap; min-height: 84px; }
  .ways { width: 100%; flex-wrap: wrap; justify-content: center; padding: 0 0 14px; }
  .js .ways { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 22px; background: rgba(11, 15, 28, 0.98); border-bottom: 1px solid var(--c-hair-amber); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
  .js .masthead.open .ways { display: flex; }
  .js .ways a:not(.button) { padding: 16px 0; border-bottom: 1px solid var(--c-hair); }
  .js .ways a:not(.button)::after { display: none; }
  .js .ways .button { margin: 18px 0 0; }
  .js .page-home .masthead.open { background: rgba(8, 11, 21, 0.98); }
}
@media (max-width: 560px) {   /* below the horizontal's 280 px floor the lantern leads (guide 07), never under 48 px tall */
  .mark { width: auto; margin: 6px 0 0 -8px; }
  .mark img { width: 64px; height: 64px; }
  .masthead-row { flex-wrap: nowrap; min-height: 76px; }
}

/* ---- the title screen (home): the key art, or the story on a tall screen, the call at its foot -------------------------------- */
.title-screen { position: relative; isolation: isolate; overflow: hidden; background: var(--c-midnight); }
/* The art extended past its own edges on a screen wider than it: its own colours, blurred, behind it. */
.title-screen::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: url("/img/art/keyart-960.jpg") center 30% / cover no-repeat; filter: blur(48px) saturate(1.1); opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 78%); mask-image: linear-gradient(180deg, #000 40%, transparent 78%); }
.title-art { display: flex; justify-content: center; }
.title-art img { width: 100%; max-width: calc((100svh - 10rem) * 16 / 9); aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%); mask-image: linear-gradient(180deg, #000 74%, transparent 99%); }
@media (min-aspect-ratio: 16/9) {
  .title-art img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, #000 74%, transparent 99%);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, #000 74%, transparent 99%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.title-call { position: relative; text-align: center; margin-top: calc(-1 * clamp(20px, 3vw, 56px));   /* the logo keeps half its letters' height clear (guide 07) */ padding-bottom: clamp(56px, 8vw, 110px); }
.title-call h1 { font-size: clamp(1.9rem, 4vw, 3.3rem); letter-spacing: 0.14em; margin: 0 0 0.35em; text-shadow: 0 0 40px rgba(242, 169, 59, 0.28), 0 2px 18px rgba(0, 0, 0, 0.8); }
.title-call .lede { margin: 0 auto; max-width: 30em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9); }
.title-call .calls { justify-content: center; }
.title-note { font: 400 0.8125rem/1.5 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-dim); margin: 0; }
@media (max-aspect-ratio: 4/5) {
  .title-screen::before { background-image: url("/img/art/story-720.jpg"); }
  .title-art img { max-width: none; aspect-ratio: 9 / 16; max-height: 100svh; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%); mask-image: linear-gradient(180deg, #000 60%, transparent 98%); }
  .title-call { margin-top: -44vw; }
}

/* ---- chapters: the guide's numbered spreads ---------------------------------------------------------------------------------- */
.chapter { padding: clamp(72px, 10vw, 140px) 0; position: relative; }
.chapter + .chapter { border-top: 1px solid var(--c-hair); }
.chapter-deep { background: linear-gradient(180deg, var(--c-raised), var(--c-midnight)); }
.chapter-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.chapter-head.center { margin-inline: auto; }
.chapter-head p:not(.eyebrow) { color: var(--c-text); }
.band { padding: clamp(56px, 7vw, 96px) 0; }

/* Text beside pictures, the guide's page 2. */
.spread { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 980px) { .spread { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .spread-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .spread-flip > :first-child { order: 2; } }
.spread-text p { max-width: var(--measure); }
.traits { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--c-hair); }
.traits p { margin: 0; color: var(--c-parchment); font-size: 1.25rem; }

/* Paintings: framed in a hairline, captioned in small capitals inside their lower edge. */
.paintings { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 0; }
.painting { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair), 0 30px 70px rgba(0, 0, 0, 0.5); }
.painting img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.painting:hover img { transform: scale(1.025); }
.painting figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font: 400 0.75rem/1.3 var(--f-caps); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-parchment); background: linear-gradient(180deg, transparent, rgba(6, 8, 15, 0.82)); }
.painting-wide { grid-column: 1 / -1; aspect-ratio: 1584 / 880; }
.painting-half { aspect-ratio: 775 / 500; }
@media (max-width: 560px) { .painting-half { grid-column: 1 / -1; } }

/* ---- the four laws ------------------------------------------------------------------------------------------------------------ */
.laws { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: law; }
@media (min-width: 720px) { .laws { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .laws { grid-template-columns: repeat(4, 1fr); } }
.law { position: relative; padding: 36px 28px 26px; border-radius: 6px; background: linear-gradient(170deg, rgba(27, 42, 68, 0.72), rgba(16, 23, 42, 0.9)); box-shadow: 0 0 0 1px var(--c-hair) inset; overflow: hidden; }
.law::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, var(--c-amber), transparent); }
.law::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(242, 169, 59, 0.12), transparent 70%); pointer-events: none; }
.law-numeral { display: block; font: 400 1rem/1 var(--f-caps); letter-spacing: 0.3em; color: var(--c-amber); margin-bottom: 1.3rem; }
.law h3 { font-size: 1.28rem; margin-bottom: 0.7em; }
.law p { font-size: 1.06rem; margin: 0; color: var(--c-text); }

/* ---- the lantern's saying ---------------------------------------------------------------------------------------------------- */
.saying { text-align: center; padding: clamp(80px, 11vw, 150px) 0; background: radial-gradient(ellipse 46% 60% at 50% 34%, rgba(242, 169, 59, 0.11), transparent 70%), var(--c-midnight); border-top: 1px solid var(--c-hair); border-bottom: 1px solid var(--c-hair); }
.saying-lantern { width: 132px; height: auto; margin: 0 auto 28px; }
@media (prefers-reduced-motion: no-preference) { .saying-lantern { animation: wick 5.5s ease-in-out infinite alternate; } }
@keyframes wick { 0% { filter: brightness(0.94) drop-shadow(0 0 18px rgba(242, 169, 59, 0.25)); } 45% { filter: brightness(1.04) drop-shadow(0 0 30px rgba(242, 169, 59, 0.45)); } 100% { filter: brightness(0.98) drop-shadow(0 0 22px rgba(242, 169, 59, 0.32)); } }
.saying blockquote { margin: 0 auto; max-width: 24em; font: italic 400 clamp(1.5rem, 3vw, 2.15rem)/1.4 var(--f-read); color: var(--c-amber-hi); text-wrap: balance; }
.saying blockquote p { margin: 0; }
.saying-after { max-width: 34em; margin: 2.2rem auto 0; color: var(--c-text); }

/* ---- the peoples ----------------------------------------------------------------------------------------------------------- */
.peoples { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.people a { display: flex; flex-direction: column; height: 100%; padding: 28px 24px 22px; border-radius: 6px; text-decoration: none; color: var(--c-text); background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair) inset; transition: box-shadow 0.25s ease, background 0.25s ease; }
.people a:hover { color: var(--c-text); background: var(--c-panel); box-shadow: 0 0 0 1px var(--c-hair-amber) inset, 0 20px 50px rgba(0, 0, 0, 0.35); }
.people h3 { font-size: 1.35rem; letter-spacing: 0.08em; margin-bottom: 0.6em; }
.people p { font-size: 1.04rem; margin: 0 0 1.2em; flex: 1; }
.people .textlink { font-size: 0.75rem; }

/* ---- the gate: a darkened painting behind the call (guide 07: darkened artwork) -------------------------------------------- */
.gate { position: relative; isolation: isolate; padding: clamp(90px, 12vw, 170px) 0; overflow: hidden; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -2; background-position: center 40%; background-size: cover; background-repeat: no-repeat; }
.gate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 28, 0.96) 0%, rgba(11, 15, 28, 0.86) 42%, rgba(11, 15, 28, 0.5) 100%), linear-gradient(180deg, var(--c-midnight), transparent 18%, transparent 82%, var(--c-midnight)); }
.gate-lanternhold::before { background-image: url("/img/art/lanternhold-1584.jpg"); }
.gate-camp::before { background-image: url("/img/art/camp-776.jpg"); background-position: right 30%; }
.gate-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .gate-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.gate p { max-width: 32em; }

/* ---- news ----------------------------------------------------------------------------------------------------------------- */
.dispatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dispatch a { display: block; padding: 22px 24px; border-radius: 6px; text-decoration: none; color: var(--c-text); background: rgba(16, 23, 42, 0.86); box-shadow: 0 0 0 1px var(--c-hair) inset; backdrop-filter: blur(6px); transition: box-shadow 0.2s ease; }
.dispatch a:hover { color: var(--c-text); box-shadow: 0 0 0 1px var(--c-hair-amber) inset; }
.dispatch time { font: 400 0.75rem/1 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-amber); }
.dispatch h3 { margin: 0.6em 0 0.35em; font-size: 1.2rem; }
.dispatch p { margin: 0; font-size: 1.04rem; }
.dispatches-large .dispatch a { padding: 30px 32px; }
.dispatches-large .dispatch h3 { font-size: 1.45rem; }

/* ---- inner pages: a head over a darkened painting ------------------------------------------------------------------------- */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 9vw, 130px) 0 clamp(48px, 6vw, 80px); background: radial-gradient(ellipse 55% 120% at 18% 0%, rgba(242, 169, 59, 0.1), transparent 70%); border-bottom: 1px solid var(--c-hair); }
.page-head h1 { margin-bottom: 0.4em; }
.page-head .lede { margin-bottom: 0; }
.page-head[class*="art-"]::before { content: ""; position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat; }
.page-head[class*="art-"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 28, 0.97) 0%, rgba(11, 15, 28, 0.84) 50%, rgba(11, 15, 28, 0.55) 100%), linear-gradient(0deg, var(--c-midnight), transparent 45%); }
.art-lanternhold::before { background-image: url("/img/art/lanternhold-1584.jpg"); background-position: center 45%; }
.art-travellers::before { background-image: url("/img/art/travellers-774.jpg"); background-position: center 60%; }
.art-camp::before { background-image: url("/img/art/camp-776.jpg"); background-position: right 40%; }

/* ---- the world page's chapters -------------------------------------------------------------------------------------------- */
.pillars3 { display: grid; gap: 34px; }
@media (min-width: 860px) { .pillars3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.pillars3 h3 { font-size: 1.2rem; letter-spacing: 0.06em; }
.pillars3 p { font-size: 1.06rem; }
.pillars3 > div { padding-top: 22px; border-top: 1px solid var(--c-hair-amber); }
.chronicle { margin: 2rem 0 0; padding: 22px 26px; border-left: 2px solid var(--c-amber); background: var(--c-raised); border-radius: 0 6px 6px 0; font-style: italic; color: var(--c-parchment); }
.chronicle p { margin: 0; }
.chronicle cite { display: block; margin-top: 0.8em; font: normal 400 0.75rem/1 var(--f-caps); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-amber); }

/* ---- panels: the sign-up, the download --------------------------------------------------------------------------------------- */
.panel { position: relative; padding: clamp(28px, 4vw, 44px); border-radius: 8px; background: linear-gradient(165deg, rgba(27, 42, 68, 0.9), rgba(16, 23, 42, 0.96)); box-shadow: 0 0 0 1px var(--c-hair) inset, 0 40px 90px rgba(0, 0, 0, 0.5); }
.panel::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-amber), transparent); }
.panel h2 { font-size: 1.7rem; }
.road { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 980px) { .road { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.milestones { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.milestones li { position: relative; padding: 0 0 26px 62px; counter-increment: step; }
.milestones li::before { content: counter(step, upper-roman); position: absolute; left: 0; top: -2px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--c-hair-amber); border-radius: 50%; font: 600 0.85rem/1 var(--f-caps); color: var(--c-amber); letter-spacing: 0.06em; background: var(--c-midnight); }
.milestones li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 4px; width: 1px; background: var(--c-hair-amber); }
.milestones h3 { font-size: 1.08rem; letter-spacing: 0.08em; margin: 0.3em 0 0.35em; }
.milestones p { margin: 0; font-size: 1.04rem; }

.field { display: block; margin: 0 0 18px; }
.field > span { display: block; margin-bottom: 8px; font: 600 0.75rem/1.2 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-gilt); }
.field input { width: 100%; min-height: 56px; padding: 0 18px; border-radius: 4px; border: 1px solid rgba(236, 228, 210, 0.22); background: rgba(6, 9, 18, 0.75); color: var(--c-parchment); font: 400 1.2rem var(--f-read); }
.field input::placeholder { color: #6f6b64; }
.field input:focus { outline: none; border-color: var(--c-amber); box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.2); }
.field input.code { max-width: 280px; text-align: center; letter-spacing: 0.5em; font: 600 1.6rem var(--f-caps); }
.tick { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; font-size: 1.04rem; color: var(--c-text); cursor: pointer; }
.tick input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--c-amber); }
.turnstile { margin: 0 0 18px; }
.step h2 { margin-bottom: 0.4em; }
.step .button { width: 100%; }
@media (min-width: 560px) { .step .button { width: auto; } }
.fineprint { margin: 18px 0 0; font-size: 0.98rem; color: var(--c-dim); }
.plain-button { background: none; border: 0; padding: 0; margin-top: 16px; font: inherit; font-size: 1rem; color: var(--c-amber-hi); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.alert { margin: 20px 0 0; padding: 14px 18px; border-radius: 4px; color: #ffd2c2; background: rgba(196, 87, 43, 0.16); box-shadow: 0 0 0 1px rgba(196, 87, 43, 0.6) inset; }
.busy { opacity: 0.65; pointer-events: none; }

.release { font: 600 1rem/1.4 var(--f-caps); letter-spacing: 0.12em; color: var(--c-gilt); margin: 0 0 0.4em; }
.checksum { margin: 1rem 0 0; font: 0.82rem/1.5 ui-monospace, Consolas, monospace; color: var(--c-dim); overflow-wrap: anywhere; }

/* A ledger: facts in two columns, hairlines between. */
.ledger { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 1.06rem; }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: 13px 0; border-bottom: 1px solid var(--c-hair); }
.ledger th { width: 36%; padding-right: 18px; font: 400 0.78rem/1.6 var(--f-caps); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-dim); }
.columns2 { display: grid; gap: clamp(36px, 5vw, 72px); }
@media (min-width: 900px) { .columns2 { grid-template-columns: 1fr 1fr; } }
.subhead { font-size: 1rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-amber); margin: 2.4em 0 1.1em; }
.subhead:first-child { margin-top: 0; }

/* ---- questions ------------------------------------------------------------------------------------------------------------- */
.questions { border-top: 1px solid var(--c-hair); }
.questions details { border-bottom: 1px solid var(--c-hair); }
.questions summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font: 600 1.06rem/1.4 var(--f-caps); letter-spacing: 0.06em; color: var(--c-gilt); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1px solid var(--c-amber); border-bottom: 1px solid var(--c-amber); transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.25s ease; }
.questions details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.questions summary:hover { color: #fff; }
.questions .answer { padding: 0 0 26px; max-width: 44em; }
.questions .answer p:last-child { margin: 0; }

/* ---- the press kit ------------------------------------------------------------------------------------------------------------ */
.lockups { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lockup { margin: 0; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair) inset; }
.lockup .ground { flex: 1; display: grid; place-items: center; min-height: 200px; padding: 28px; background: radial-gradient(ellipse at center, #141c33, var(--c-midnight)); }
.lockup img { max-height: 150px; width: auto; }
.lockup figcaption { padding: 14px 18px; font: 400 0.75rem/1.4 var(--f-caps); letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-dim); border-top: 1px solid var(--c-hair); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.swatch { border-radius: 6px; overflow: hidden; background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair) inset; }
.swatch .chip { height: 96px; }
.swatch .chip-midnight { background: #0b0f1c; box-shadow: 0 -1px 0 var(--c-hair) inset; }
.swatch .chip-deep { background: #1b2a44; }
.swatch .chip-amber { background: #f2a93b; }
.swatch .chip-parchment { background: #ece4d2; }
.swatch .chip-ember { background: #c4572b; }
.swatch p { margin: 0; padding: 12px 16px 14px; font-size: 0.98rem; line-height: 1.45; }
.swatch strong { display: block; font: 600 0.8125rem/1.6 var(--f-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gilt); }
.film { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--c-hair), 0 30px 70px rgba(0, 0, 0, 0.5); background: #000; }
.film video { width: 100%; aspect-ratio: 16 / 9; }
.downloads { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 0; }
.type-specimen { padding: 28px; border-radius: 6px; background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair) inset; }
.type-specimen .caps { font: 600 1.9rem/1.2 var(--f-caps); color: var(--c-gilt); letter-spacing: 0.06em; margin: 0 0 0.3em; }
.type-specimen .read { font-size: 1.9rem; line-height: 1.2; color: var(--c-gilt); margin: 0 0 0.4em; }

/* ---- plain text: privacy, terms, a news post ---------------------------------------------------------------------------------- */
.prose:not(.wrap) { max-width: 44em; }
.prose h2 { font-size: 1.35rem; letter-spacing: 0.06em; margin: 2.2em 0 0.7em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.6em; }
.prose li::marker { color: var(--c-amber); }
.summary { margin: 0 0 3rem; padding: 24px 28px; border-radius: 6px; background: var(--c-raised); box-shadow: 0 0 0 1px var(--c-hair-amber) inset; }
.summary ul { margin: 0; padding-left: 1.2em; }
.summary li { margin-bottom: 0.4em; }
.summary li::marker { color: var(--c-amber); }
.post-head { padding-bottom: 0.5rem; }
.post-head time { display: block; margin-bottom: 1.2em; font: 400 0.8125rem/1 var(--f-caps); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-amber); }
.post-back { display: inline-block; margin-bottom: 2.4rem; }
.post-back::before { content: "\2190"; letter-spacing: 0; margin-right: 0.6em; }
.post-back::after { content: none; }

/* ---- lost ---------------------------------------------------------------------------------------------------------------- */
.lost { text-align: center; padding: clamp(80px, 12vw, 170px) 0; background: radial-gradient(ellipse 40% 50% at 50% 30%, rgba(242, 169, 59, 0.08), transparent 70%); }
.lost img { width: 110px; margin: 0 auto 30px; opacity: 0.55; filter: grayscale(0.4) brightness(0.75); }
.lost .lede { margin-inline: auto; }

/* ---- the colophon -------------------------------------------------------------------------------------------------------- */
.colophon { flex: none; margin-top: 0; padding: clamp(56px, 7vw, 90px) 0 28px; background: #070a13; border-top: 1px solid var(--c-hair); }
.colophon-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .colophon-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.colophon-mark img { width: 240px; margin: -8px 0 14px -12px; }
.colophon-mark p { font-size: 1.02rem; max-width: 22em; }
.colophon nav h2 { font: 600 0.75rem/1 var(--f-caps); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-amber); margin: 6px 0 18px; }
.colophon nav a { display: block; padding: 5px 0; font-size: 1.04rem; color: var(--c-text); text-decoration: none; }
.colophon nav a:hover { color: var(--c-gilt); }
.colophon-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--c-hair); font: 400 0.75rem/1.6 var(--f-caps); letter-spacing: 0.18em; text-transform: uppercase; color: #7d786f; }
.colophon-foot p { margin: 0; }
.beacon { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 7px 14px; border-radius: 999px; font: 400 0.75rem/1 var(--f-caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text); box-shadow: 0 0 0 1px var(--c-hair) inset; }
.beacon .flame { width: 8px; height: 8px; border-radius: 50%; background: var(--c-dim); }
.beacon[data-state="ok"] .flame { background: var(--c-ok); box-shadow: 0 0 10px var(--c-ok); }
.beacon[data-state="down"] .flame { background: var(--c-ember); }
.beacon[data-state="maintenance"] .flame, .beacon[data-state="draining"] .flame { background: var(--c-amber); box-shadow: 0 0 10px var(--c-amber); }

/* ---- arrival: sections rise into the light once, only when the reader allows motion and the script runs -------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
  .js .rise.lit { opacity: 1; transform: none; }
}
.after-list { margin: 20px 0 0; }
.lost .calls, .saying .calls { justify-content: center; }