@import url("/brand/tokens.css?v=67a3a3089adc");
@import url("/brand/logo.css?v=d1437c3f77f9");
/* fantasyquest.gg
   Sunscale Gold (docs/designs/sunscale-gold.md). Every color is a brand role
   from brand/tokens.css (generated from site/brand/palettes.json); translucency
   is color-mix() over a role, never a new literal. One gold (accent) action
   per view; turquoise (accent-2) carries eyebrows, links and dates.

   Type: Pirata One is the wordmark only; LT Museum sets display headings;
   Markazi Text sets prose; the interface face (buttons, nav, labels,
   metadata) is Source Sans 3 when installed, otherwise the system sans.

   Every place, person, item, number and skill named on the page is named in
   packages/content/data (see site/README.md > "Numbers on the page"). */

:root {
  --wordmark: "Pirata One", serif;
  --display: "LT Museum", "Iowan Old Style", Georgia, serif;
  --prose: "Markazi Text", Georgia, "Times New Roman", serif;
  --ui: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shell: 100rem;                         /* 1600 px at 2560 */
  --gutter: clamp(1rem, 4vw, 4rem);        /* 16 px at phone width */
  --band-y: clamp(4.5rem, 7vw, 9rem);
  --measure: 62ch;
  --radius: 3px;
  --mast-h: clamp(4rem, 3rem + 2.4vw, 6.5rem);

  --rule: 1px solid var(--brand-line);
  --veil-90: color-mix(in srgb, var(--brand-veil) 90%, transparent);
  --veil-85: color-mix(in srgb, var(--brand-veil) 85%, transparent);
  --veil-75: color-mix(in srgb, var(--brand-veil) 75%, transparent);
  --veil-55: color-mix(in srgb, var(--brand-veil) 55%, transparent);
  --veil-30: color-mix(in srgb, var(--brand-veil) 30%, transparent);
  --shadow: 0 18px 48px color-mix(in srgb, var(--brand-veil) 70%, transparent);
}

@font-face {
  font-family: "LT Museum";
  src: url("/fonts/LTMuseum-Bold.woff2?v=6359c9e2be3e") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pirata One";
  src: url("/fonts/PirataOne-Regular.woff2?v=27a5c5046dac") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Markazi Text";
  src: url("/fonts/MarkaziText-SemiBold.woff2?v=df601297984b") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: var(--mast-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--brand-ground);
  color: var(--brand-text);
  font-family: var(--prose);
  font-weight: 600;
  font-size: clamp(1.2rem, 0.4vw + 1.05rem, 1.5rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
p, figure, dl, dd { margin: 0; }

a { color: var(--brand-accent-2); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--brand-text); }
:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; border-radius: 2px; }

img { display: block; max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--brand-raised); color: var(--brand-text);
  font: 600 1rem/1 var(--ui); padding: .9rem 1.2rem;
}
.skip:focus { left: var(--gutter); top: .5rem; }

.shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; }

.eyebrow {
  font: 600 clamp(.95rem, .8rem + .25vw, 1.15rem)/1.3 var(--ui);
  letter-spacing: .01em;
  color: var(--brand-accent-2);
  margin-bottom: .8rem;
}

/* ---- buttons: one gold action per view ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1.2 var(--ui);
  padding: .8em 1.4em;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--brand-accent); color: var(--brand-on-accent); border-color: var(--brand-accent); }
.btn-primary:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); color: var(--brand-on-accent); }
.btn-primary:active { background: var(--brand-accent-pressed); border-color: var(--brand-accent-pressed); }
.btn-ghost { color: var(--brand-text); border-color: var(--brand-line); background: var(--veil-30); }
.btn-ghost:hover { color: var(--brand-text); border-color: var(--brand-muted); }
.btn-large { font-size: clamp(1.05rem, .85rem + .4vw, 1.35rem); padding: .95em 1.9em; }
.text-link { font: 600 1rem/1.2 var(--ui); }

/* ---- masthead ------------------------------------------------------------ */
.masthead { position: absolute; inset: 0 0 auto 0; z-index: 30; }
.masthead-row {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 3rem);
  min-height: var(--mast-h);
  padding-block: .5rem;
}
.wordmark {
  font-family: var(--wordmark); font-weight: 400;
  font-size: clamp(2rem, 1.1rem + 1.95vw, 3.75rem);
  line-height: 1; letter-spacing: .02em;
  color: var(--brand-text); text-decoration: none;
  flex-shrink: 0;
}
.wordmark:hover { color: var(--brand-highlight); }
.sections { display: flex; gap: clamp(1rem, 1.8vw, 2.4rem); margin-left: clamp(0rem, 1.5vw, 2rem); }
.sections a, .signin {
  font: 600 clamp(1rem, .8rem + .3vw, 1.2rem)/1 var(--ui);
  color: var(--brand-text); text-decoration: none; white-space: nowrap;
  padding-block: .4rem;
}
.sections a:hover, .signin:hover { color: var(--brand-accent-2); }
.account { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); margin-left: auto; }
.btn-mast { font-size: clamp(.95rem, .8rem + .25vw, 1.15rem); padding: .7em 1.2em; }
@media (max-width: 1080px) { .sections { display: none; } }
@media (max-width: 560px) {
  .masthead-row { gap: .6rem; }
  .wordmark { font-size: 1.6rem; }
  .account { gap: .6rem; }
  .signin { font-size: .9rem; }
  .btn-mast { font-size: .85rem; padding: .55em .75em; }
}
@media (max-width: 389px) { .btn-mast { display: none; } }

/* Where scroll-driven animation exists the masthead stays pinned: it turns
   solid as soon as the page scrolls, and its button turns gold only once
   the hero's gold button has passed under it, then goes back to ghost when
   the closing band's gold button comes into view. Elsewhere it simply
   scrolls away with the hero and stays a ghost. Nothing here moves on its
   own; every change follows the reader's scroll. */
@supports (timeline-scope: --a) and (animation-timeline: view()) {
  body { timeline-scope: --hero, --hero-action, --closing-action; }
  .hero { view-timeline: --hero block; }
  .hero .btn-primary { view-timeline: --hero-action block; view-timeline-inset: var(--mast-h) 0; }
  .closing .btn-primary { view-timeline: --closing-action block; }
  .masthead {
    position: fixed;
    animation: mast-solid linear both;
    animation-timeline: --hero;
    animation-range: exit 0% exit 12%;
  }
  .btn-mast {
    animation: mast-gold linear both, mast-ghost linear forwards;
    animation-timeline: --hero-action, --closing-action;
    animation-range: exit 60% exit 100%, entry 0% entry 60%;
  }
}
@keyframes mast-solid {
  from { background: transparent; box-shadow: none; }
  to   { background: color-mix(in srgb, var(--brand-raised) 96%, transparent);
         box-shadow: 0 1px 0 var(--brand-line), 0 10px 30px var(--veil-55); }
}
@keyframes mast-gold {
  from { background: var(--veil-30); color: var(--brand-text); border-color: var(--brand-line); }
  to   { background: var(--brand-accent); color: var(--brand-on-accent); border-color: var(--brand-accent); }
}
@keyframes mast-ghost {
  from { background: var(--brand-accent); color: var(--brand-on-accent); border-color: var(--brand-accent); }
  to   { background: var(--veil-30); color: var(--brand-text); border-color: var(--brand-line); }
}

/* ---- hero ---------------------------------------------------------------- */
/* Full-bleed key art. Painted at once: no entrance animation. The height is
   capped (90rem) because tools/site-shot.sh renders one 16000 px tall
   window, where 100svh would be the whole render. */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(100svh, 90rem);
  display: grid; grid-template-rows: 1fr auto;
  padding-top: clamp(6rem, 5rem + 4vw, 10rem);
  background: var(--brand-ground);
}
.hero-art {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 30% 50%;
}
/* Veil. The hero-veil layer darkens a band under the masthead and fades
   the bottom into the page. The copy's own scrim (.hero-copy::before) does
   the real work: it is anchored to the copy box, so however tall the copy
   wraps it stays dense to below the last line, then falls off downward
   toward the beach and lagoon and leftward toward the character. Every
   label keeps >= 4.5:1 on the veiled pixels (measured at 2560, 1440, 1100,
   820 and 390 px wide; see site/README.md). */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--veil-75) 0, var(--veil-30) 9rem, transparent 14rem),
    linear-gradient(to top, var(--brand-ground) 0, transparent 14%);
}
.hero-body { display: grid; align-items: start; }
.hero-copy {
  position: relative;
  justify-self: end;
  width: min(72rem, max(68%, 32rem), 100%);
  padding-block: clamp(1rem, 3vw, 3.5rem) 0;
}
.hero-copy::before {
  content: ""; position: absolute; z-index: -1;
  top: -100vh; bottom: -11rem; left: -18rem; right: -100vw;
  background: linear-gradient(to bottom, var(--veil-85) 0, var(--veil-85) calc(100% - 14rem), var(--veil-55) calc(100% - 7rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--brand-ground) 18rem);
          mask-image: linear-gradient(to right, transparent 0, var(--brand-ground) 18rem);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 4.3vw, 6.9rem);    /* 110 px at 2560, two lines */
  line-height: .98;
  margin-bottom: clamp(1rem, 1.6vw, 1.8rem);
}
.hero-fact {
  max-width: 34ch;
  font-size: clamp(1.25rem, .9rem + .75vw, 2rem);
  line-height: 1.35;
  margin-bottom: clamp(1.6rem, 2.4vw, 2.8rem);
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.4rem, 2vw, 2.4rem); }
.hero-actions .text-link { font-size: clamp(1.05rem, .85rem + .4vw, 1.35rem); }
.hero-credit {
  padding-bottom: 1.2rem;
  font: 400 .85rem/1.4 var(--ui); color: var(--brand-muted);
}

/* Narrow screens: the art becomes a block on top (beach, lagoon and the
   character), fading into the page, and the copy follows below it. */
@media (max-width: 900px) {
  .hero { --art-h: min(64svh, 34rem); min-height: 0; padding-top: 0; grid-template-rows: auto auto auto; }
  .hero-art { position: relative; inset: auto; z-index: -2; height: var(--art-h); object-position: 20% 50%; }
  .hero-veil {
    bottom: auto; height: var(--art-h);
    background:
      linear-gradient(to bottom, var(--veil-90) 0, var(--veil-55) 3.5rem, transparent 7rem),
      linear-gradient(to top, var(--brand-ground) 0, var(--veil-55) 22%, transparent 45%);
  }
  .hero-body { margin-top: -3.5rem; }
  .hero-copy { justify-self: start; width: 100%; padding-block: 0 .5rem; }
  .hero-copy::before { content: none; }
  .hero-credit { padding-top: 1.2rem; }
}

/* ---- highlights: large image + text, alternating -------------------------- */
.highlight { padding-block: var(--band-y); }
.highlight + .highlight { padding-top: 0; }
#skills { padding-top: clamp(3rem, 5vw, 6rem); }
.highlight-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6.5rem);
}
.highlight-flip .highlight-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.highlight-flip .highlight-media { order: 2; }
.highlight-media figcaption {
  margin-top: .8rem;
  font: 400 clamp(.9rem, .8rem + .15vw, 1.05rem)/1.4 var(--ui); color: var(--brand-muted);
}
.slot {
  width: 100%; object-fit: cover;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.slot-16x9 { aspect-ratio: 16 / 9; }
.slot-2x1  { aspect-ratio: 2 / 1; }
.focus-center  { object-position: 50% 50%; }
.focus-dragons { object-position: 36% 50%; }   /* lineup spans 18-69% of the width */
.highlight-detail {
  grid-column: 1 / -1; order: 3; container-type: inline-size;
  padding-top: clamp(0rem, 1vw, 1rem);
}
.highlight-copy h2 { font-size: clamp(2.3rem, 1.2rem + 3vw, 5.25rem); margin-bottom: clamp(1rem, 1.5vw, 1.6rem); }
.highlight-copy > p:not(.eyebrow, .detail-note) {
  max-width: var(--measure); color: var(--brand-text);
  font-size: clamp(1.2rem, .95rem + .45vw, 1.75rem); line-height: 1.45;
}
@media (max-width: 900px) {
  .highlight-grid, .highlight-flip .highlight-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .highlight-flip .highlight-media { order: 0; }
}

/* Skills: the level split. Widths follow the levels: 24 of 50, 26 of 50. */
.split {
  display: grid; grid-template-columns: 24fr 26fr; gap: 4px;
  font-family: var(--ui);
}
.split-part { border-top: 6px solid var(--brand-line); padding-top: .7rem; padding-right: 1rem; }
.split-limit { border-top-color: var(--brand-accent-2); }
.split dt { font: 600 clamp(1rem, .85rem + .3vw, 1.25rem)/1.2 var(--ui); color: var(--brand-text); }
.split dd { margin-top: .25rem; font: 400 clamp(.95rem, .8rem + .3vw, 1.25rem)/1.4 var(--ui); color: var(--brand-muted); }
@container (max-width: 26rem) { .split { grid-template-columns: 1fr; gap: 1rem; } }

/* Dragons: growth and travel on one 1-50 level rail. A vertical pair of
   lists when the column is too narrow for the labels to clear. */
.rail { font-family: var(--ui); }
.rail-label { font: 600 clamp(.95rem, .8rem + .25vw, 1.15rem)/1.3 var(--ui); color: var(--brand-muted); margin-bottom: .9rem; }
.rail-row { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rail-row li { font: 400 clamp(1rem, .85rem + .3vw, 1.25rem)/1.25 var(--ui); color: var(--brand-muted); }
.rail-row b { display: inline-block; min-width: 2.2em; font-weight: 600; color: var(--brand-accent-2); }
.rail-stages li { color: var(--brand-text); }
.rail-travel { margin-top: 1rem; padding-top: 1rem; border-top: var(--rule); }
@container (min-width: 40rem) {
  .rail { position: relative; padding-block: 0; }
  .rail-row { position: relative; display: block; height: 3.6em; font-size: clamp(1rem, .85rem + .3vw, 1.25rem); }
  .rail-stages { border-bottom: 2px solid var(--brand-line); }
  .rail-travel { margin: 0; padding: 0; border: 0; }
  .rail-row li { position: absolute; white-space: nowrap; }
  .rail-row b { display: block; min-width: 0; font-size: 1.15em; }
  .rail-stages li { bottom: .55rem; }
  .rail-travel li { top: .55rem; color: var(--brand-muted); }
  /* the tick on the rail */
  .rail-row li::before {
    content: ""; position: absolute; left: 0; width: 2px; height: .55rem;
    background: var(--brand-accent-2);
  }
  .rail-stages li::before { bottom: -.55rem; }
  .rail-travel li::before { top: -.55rem; }
  .rail-row li { padding-left: .45rem; }
  .at-1  { left: 0; }
  .at-15 { left: calc(14 / 49 * 100%); }
  .at-25 { left: calc(24 / 49 * 100%); }
  .at-30 { left: calc(29 / 49 * 100%); }
  .at-45 { left: auto; right: calc(5 / 49 * 100%); padding-left: 0; padding-right: .45rem; text-align: right; }
  .rail-row .at-45::before { left: auto; right: 0; }
}
.detail-note { margin-top: 1.4rem; font: 400 clamp(.95rem, .8rem + .3vw, 1.25rem)/1.45 var(--ui); color: var(--brand-muted); max-width: 60ch; }

/* ---- bands ---------------------------------------------------------------- */
.band { padding-block: var(--band-y); }
.band h2 { font-size: clamp(2rem, 1.1rem + 2.4vw, 4rem); }
.band-features { background: var(--brand-surface); border-block: var(--rule); }
.band-news { background: var(--brand-ground); }
.band-faq { background: var(--brand-surface); border-top: var(--rule); }
.intro { max-width: var(--measure); color: var(--brand-muted); margin-top: 1rem; }
.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.band-head a { font: 600 1.05rem/1.2 var(--ui); }

/* ---- features: compact grid ------------------------------------------------ */
.features {
  list-style: none; margin: clamp(2rem, 3.5vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3.5rem) clamp(1.5rem, 3vw, 4rem);
}
.features li { border-top: var(--rule); padding-top: 1.1rem; }
.features .eyebrow { margin-bottom: .5rem; }
.features h3 { font-size: clamp(1.4rem, 1rem + .9vw, 2.1rem); }
.features p:not(.eyebrow) { margin-top: .6rem; color: var(--brand-muted); line-height: 1.45; max-width: 44ch; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .features { grid-template-columns: 1fr; } }

/* ---- news cards (rendered by news.js) ------------------------------------- */
.news-cards {
  margin-top: clamp(1.8rem, 3vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.news-card {
  background: var(--brand-surface); border: var(--rule); border-radius: var(--radius);
  padding: clamp(1.2rem, 2vw, 2rem);
  display: grid; align-content: start; gap: .6rem;
}
.news-card time { font: 600 .95rem/1.3 var(--ui); color: var(--brand-accent-2); }
.news-card h3 { font-size: clamp(1.4rem, 1rem + .8vw, 2rem); }
.news-card h3 a { color: var(--brand-text); text-decoration: none; }
.news-card h3 a:hover { color: var(--brand-accent-2); text-decoration: underline; }
.news-card p { color: var(--brand-muted); }

/* ---- screenshots ----------------------------------------------------------- */
.gallery {
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
}
.gallery .wide { grid-column: 1 / -1; }
.plate img {
  width: 100%;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line); border-radius: var(--radius);
}
.plate figcaption { margin-top: .8rem; }
.plate .place { display: block; font: 700 clamp(1.15rem, .95rem + .45vw, 1.5rem)/1.2 var(--display); color: var(--brand-text); }
.plate .note { display: block; margin-top: .2rem; max-width: 60ch; font: 400 clamp(.9rem, .8rem + .15vw, 1.05rem)/1.45 var(--ui); color: var(--brand-muted); }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } }

/* ---- faq -------------------------------------------------------------------- */
.faq { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: var(--rule); }
@media (min-width: 1100px) {
  .faq-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: clamp(2rem, 5vw, 6.5rem); align-items: start; }
  .faq-head { position: sticky; top: calc(var(--mast-h) + 2rem); }
  .faq { margin-top: 0; }
}
.faq details { border-bottom: var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.1rem 2.6rem 1.1rem 0;
  font: 700 clamp(1.15rem, 1rem + .4vw, 1.5rem)/1.25 var(--display);
  color: var(--brand-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 14px; height: 2px; margin-top: -1px;
  background: var(--brand-accent-2);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: none; }
.faq summary:hover { color: var(--brand-accent-2); }
.faq p { padding: 0 0 1.3rem; color: var(--brand-muted); max-width: var(--measure); }

/* ---- closing ------------------------------------------------------------------ */
.closing {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(6rem, 12vw, 13rem);
}
.closing-art {
  position: absolute; inset: 0; z-index: -2;
  background: var(--brand-ground) url("/img/plate-closing.jpg?v=27f02203f474") 70% 55% / cover no-repeat;
}
.closing-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--brand-ground) 0, var(--veil-55) 30%, var(--veil-55) 70%, var(--brand-ground) 100%),
    linear-gradient(to right, var(--veil-90) 0%, var(--veil-75) 40%, var(--veil-30) 75%);
}
.closing-body { display: grid; justify-items: start; gap: 1.2rem; }
.closing h2 { font-size: clamp(2.3rem, 1.2rem + 3.2vw, 5.5rem); max-width: 14ch; }
.closing-body > p:not(.closing-actions) { color: var(--brand-text); max-width: 40ch; font-size: clamp(1.2rem, .95rem + .45vw, 1.75rem); }
.closing-actions .text-link { font-size: clamp(1.05rem, .85rem + .4vw, 1.35rem); }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .6rem; }

/* ---- footer ------------------------------------------------------------------- */
.site-footer {
  background: var(--brand-raised); border-top: var(--rule);
  padding-block: clamp(2.5rem, 4vw, 4rem);
  font-family: var(--ui);
}
.footer-grid {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 2rem clamp(2rem, 5vw, 6rem);
}
.wordmark-footer { font-size: clamp(1.9rem, 1.4rem + .9vw, 2.75rem); }
.footer-id p { margin-top: .4rem; font: 400 .95rem/1.4 var(--ui); color: var(--brand-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }
.footer-links a { font: 600 1rem/1.3 var(--ui); color: var(--brand-text); text-decoration: none; }
.footer-links a:hover { color: var(--brand-accent-2); text-decoration: underline; }
.footer-studio { display: flex; align-items: center; gap: 1.2rem; }
.footer-studio .studio-plaque { width: 104px; border-width: 3px; }
.footer-studio p { font: 400 .95rem/1.4 var(--ui); color: var(--brand-muted); }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr; justify-items: start; }
}

/* Public journal and static document pages share the existing brand. */
.document-page .masthead { position: relative; border-bottom: var(--rule); }
.document-nav { display: flex; gap: 1.4rem; font: 600 1rem/1.2 var(--ui); }
.document-nav a { text-decoration: none; }
.journal { max-width: 72rem; min-height: 60vh; padding-block: clamp(2.5rem, 6vw, 6rem); }
.journal h1 { font-size: clamp(2.8rem, 5vw, 5rem); overflow-wrap: anywhere; }
.journal-heading { margin-bottom: 2.5rem; }
.journal-heading > p:last-child { margin-top: 1rem; color: var(--brand-muted); }
.journal-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; border-top: var(--rule); padding-block: 2rem; }
.journal-row h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); overflow-wrap: anywhere; }
.journal-row p { margin: .8rem 0; color: var(--brand-muted); overflow-wrap: anywhere; }
.journal-pagination { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 2rem; font: 600 1rem/1.4 var(--ui); }
.journal-story { max-width: 52rem; }
.journal-story .eyebrow { margin-top: 2rem; }
.journal-summary { margin-block: 1.5rem 2rem; font-size: 1.5em; line-height: 1.25; color: var(--brand-muted); overflow-wrap: anywhere; }
.story-body { font-size: clamp(1.3rem, 1.05rem + .5vw, 1.65rem); }
.story-body p { margin-bottom: 1.25rem; white-space: pre-line; overflow-wrap: anywhere; }
.journal-home { margin-top: 3rem; font: 600 1rem/1.4 var(--ui); }
#news-status { color: var(--brand-muted); }
#news-retry { cursor: pointer; margin-top: 1rem; }
.news-card { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .journal-row { grid-template-columns: 1fr; gap: .5rem; }
  .document-page .masthead-row { flex-wrap: wrap; }
  .document-nav { order: 3; width: 100%; padding-block: .6rem; }
}