/* ============================================================================
   prism.css, the shared CHROME layer
   Loaded by every page (the self-contained full-viewport cover excepted).
   Holds only what is truly common: design tokens, reset, the page frame,
   masthead, footer, scroll-progress, view transitions. Page-specific and
   prose styling live elsewhere:
     · prism-doc.css  , the reading/prose layer (practice pages)
     · each template  , its own unique components (edition cards, story blocks)
   Class-based by design: no bare h1/h2/p rules here, so nothing leaks onto
   the edition or story templates that don't want them.
   ========================================================================= */

:root {
  /* palette, warm paper, iron ink */
  --paper: #faf6ee;
  --ink: #26221a;
  --ink-soft: #55503f;
  --ink-hedged: #8a8375;
  --hairline: #d8d0bf;
  --apparatus: #6d6759;
  --accent: #7a5c3e;

  /* the political spectrum ramp, the instrument's one use of colour */
  --left: #3b6ea5;
  --lean-left: #82a0c4;
  --center: #a8a294;
  --lean-right: #c49a82;
  --right: #a5563b;

  /* type */
  --serif: "Newsreader", Charter, "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* motion, one house easing, one house duration */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--paper); }
body {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 19px;
  line-height: 1.66;
  padding: 0 clamp(18px, 3vw, 32px) 12vh;
}

/* the house voice down to the smallest interactions */
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--apparatus);
}

/* the page frame, reading column by default; the feed and briefing widen it */
#page { max-width: 720px; margin: 0 auto; }

/* ---- masthead ---- */
.masthead {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  padding: 30px 0 14px; border-bottom: 1px solid var(--hairline);
}
.wordmark {
  font-size: 14px; letter-spacing: 0.36em; font-weight: 600;
  text-decoration: none; color: inherit; white-space: nowrap;
}
.masthead nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--mono); font-size: 12px; color: var(--apparatus);
  text-decoration: none; transition: color var(--dur) var(--ease);
}
.masthead nav a:hover, .masthead nav a.here { color: var(--accent); }

/* ---- footer ---- */
footer {
  border-top: 1px solid var(--hairline); margin-top: 26px; padding-top: 16px;
  display: flex; gap: 18px; flex-wrap: wrap;
}

/* the colophon: the fuller footer of the product pages (practice pages keep the plain one) */
footer.colophon { display: block; }
.colophon .frow { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; padding: 5px 0; }
.colophon .frow a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
  color: var(--apparatus); text-decoration: none; transition: color var(--dur) var(--ease);
}
.colophon .frow a:hover { color: var(--accent); }
.colophon .fmark { margin-left: auto; font-family: var(--mono); font-size: 12px;
                   letter-spacing: 0.05em; color: var(--apparatus); }

/* ---- page transitions + scroll progress ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); z-index: 50;
  background: linear-gradient(90deg, var(--left), var(--lean-left), var(--center), var(--lean-right), var(--right));
}

/* --------------------------------------------------------------------------
   Compact reading modes

   A narrow window is not treated as a shrunken desktop. The shared chrome
   becomes a two-line publication masthead, keeps the primary destinations in
   one horizontally scrollable row, and gives the page back its vertical room.
   Page templates decide how their editorial objects recompose inside it.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 18px; line-height: 1.62; }
  .masthead { align-items: center; padding: 24px 0 12px; gap: 12px 20px; }
  .masthead nav {
    order: 2; width: 100%; margin-left: 0; flex-wrap: nowrap; gap: 20px;
    overflow-x: auto; padding: 2px 2px 7px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .masthead nav::-webkit-scrollbar { display: none; }
  .masthead nav a { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; }
  .colophon .fmark { width: 100%; margin-left: 0; }
}

@media (max-width: 520px) {
  body { padding-inline: 16px; padding-bottom: 8vh; }
  .masthead { padding-top: 19px; }
  .wordmark { font-size: 13px; letter-spacing: 0.32em; }
  .masthead nav { gap: 17px; margin-right: -16px; padding-right: 16px; }
  .masthead nav a { font-size: 11px; }
  footer, .colophon .frow { gap: 10px 16px; }
  .colophon .frow a, .colophon .fmark { font-size: 10.5px; }
}

/* Short laptop and split-screen windows need compact chrome even when their
   width would otherwise qualify as desktop. */
@media (min-width: 901px) and (max-height: 760px) {
  body { padding-bottom: 8vh; }
  .masthead { padding-top: 20px; }
}