:root{color-scheme:light}
body{margin:0}

/* LAYOUT CONCEPT
   Same system as the approved homepage (tokens, masthead, meta, image frame, section heads, footer are unchanged).
   New here: a named-line article grid. Text sits in a ~66 character column; figures and pull quotes may break
   out to the "wide" lines; nothing else ever sits beside the words.

   READING SCALE: headline ~6rem / deck ~1.6rem / h2 ~2.5rem / body 1.1875rem at 1.7 / caption .8125rem / meta .75rem
*/
:root {
  --paper: #F8F7F4;
  --ink: #0A0A0A;
  --mute: #595853;
  --rule: #D8D6D0;
  --frame-1: #121212;
  --frame-2: #34332F;
  --frame-3: #77756F;
  --frame-ink: #EDEBE6;

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2.5rem; --s6: 4rem; --s7: 6rem; --s8: 10rem;

  --margin: clamp(16px, 4vw, 56px);
  --gutter: clamp(12px, 2vw, 28px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0A0A; --ink: #F3F1EC; --mute: #A8A6A0; --rule: #2A2A28;
    --frame-1: #1B1B1A; --frame-2: #2E2D2A; --frame-3: #555450; --frame-ink: #EDEBE6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A0A0A; --ink: #F3F1EC; --mute: #A8A6A0; --rule: #2A2A28;
  --frame-1: #1B1B1A; --frame-2: #2E2D2A; --frame-3: #555450; --frame-ink: #EDEBE6;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--margin); top: var(--s2);
  background: var(--ink); color: var(--paper);
  font: 500 .875rem/1 var(--font-ui); padding: var(--s3);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Layout primitives (locked) ---------- */
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid > * { min-width: 0; }

/* ---------- Metadata (locked) ---------- */
.meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font: 500 .75rem/1.4 var(--font-ui);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mute);
}
.meta__cat { color: var(--ink); }
.ph-tag {
  font: 500 .6875rem/1 var(--font-ui);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--rule);
  padding: .25rem .4rem;
  align-self: center;
}

/* ---------- Masthead + navigation (locked) ---------- */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding-block: var(--s4);
}
.wordmark {
  font: 600 .875rem/1 var(--font-ui);
  letter-spacing: .24em; text-transform: uppercase;
}
.nav ul { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.nav a {
  font: 500 .9375rem/1 var(--font-ui);
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--ink); }

/* ---------- Image frame (locked) ---------- */
.figure { position: relative; }
.figure__frame {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, 3 / 2);
  background: var(--tone, var(--frame-1));
  color: var(--frame-ink);
  display: flex; align-items: flex-end;
  padding: var(--s3);
  animation: reveal 1s var(--ease) both;
}
.figure__frame > span {
  font: 500 .6875rem/1.4 var(--font-ui);
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}
.figure--1 { --tone: var(--frame-1); }
.figure--2 { --tone: var(--frame-2); }
.figure--3 { --tone: var(--frame-3); }
.figure__caption {
  font: 400 .8125rem/1.45 var(--font-ui);
  color: var(--mute); margin-top: var(--s2);
  max-width: 46rem;
}
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Section header (locked) ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: var(--s3); margin-bottom: var(--s5);
}
.section-head h2 { font: 600 .75rem/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.section-head a {
  font: 500 .875rem/1.4 var(--font-ui);
  border-bottom: 1px solid var(--rule);
  transition: border-color .25s var(--ease);
}
.section-head a:hover { border-bottom-color: var(--ink); }

/* ---------- Footer (locked) ---------- */
.footer { border-top: 1px solid var(--ink); padding-block: var(--s5) var(--s6); }
.footer .brand { grid-column: 1 / span 5; }
.footer__nav { grid-column: 7 / -1; }
.footer__nav ul { display: flex; gap: clamp(1rem, 3vw, 2.5rem); justify-content: flex-end; flex-wrap: wrap; }
.footer__nav a { font: 500 .9375rem/1 var(--font-ui); border-bottom: 1px solid transparent; padding-block: var(--s2); transition: border-color .25s var(--ease); }
.footer__nav a:hover { border-bottom-color: var(--ink); }
.footer__note { grid-column: 1 / -1; margin-top: var(--s6); font: 400 .8125rem/1.4 var(--font-ui); color: var(--mute); }

/* =========================================================
   ARTICLE PAGE COMPONENTS
   ========================================================= */

/* ---------- Component: article header ---------- */
.article-head { padding-block: var(--s7) var(--s5); row-gap: var(--s4); }
.article-head__context { grid-column: 1 / -1; }
.article-head__context a { border-bottom: 1px solid var(--ink); }
.article__title {
  grid-column: 1 / span 10;
  font: 400 clamp(2.5rem, 6.4vw, 6rem)/.98 var(--font-display);
  letter-spacing: -.015em; text-wrap: balance;
}
.article__deck {
  grid-column: 1 / span 7;
  font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.4 var(--font-body);
  color: var(--ink);
  text-wrap: pretty;
}
.article__byline {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  margin-top: var(--s2);
}

/* ---------- Component: hero ---------- */
.hero { padding-bottom: var(--s7); }
.hero .figure__frame { --ratio: 21 / 9; }

/* ---------- Component: reading body ---------- */
/* Named lines: text = reading column; wide = figures and quotes; full = widest breakout. */
.article-body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [wide-start] minmax(0, 8rem)
    [text-start] min(41rem, 100%) [text-end]
    minmax(0, 8rem) [wide-end]
    minmax(0, 1fr) [full-end];
  padding-bottom: var(--s7);
}
.article-body > * { grid-column: text; min-width: 0; }
.article-body > .wide { grid-column: wide; }
.article-body > .full { grid-column: full; }

.article-body p {
  font-size: 1.1875rem; line-height: 1.7;
  hanging-punctuation: first;
  text-wrap: pretty;
}
.article-body p + p { margin-top: 1.5em; }
.article-body p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: text-decoration-thickness .2s var(--ease);
}
.article-body p a:hover { text-decoration-thickness: 2px; }
.article-body strong { font-weight: 600; }

.article-body h2 {
  font: 400 clamp(1.875rem, 3.2vw, 2.75rem)/1.08 var(--font-display);
  letter-spacing: -.005em; text-wrap: balance;
  margin-top: var(--s7); margin-bottom: var(--s4);
}
.article-body p + .figure, .article-body p + .pullquote { margin-top: var(--s6); }
.article-body .figure + p, .article-body .pullquote + p { margin-top: var(--s6); }
.article-body .figure .figure__frame { --ratio: 16 / 9; }

.ph-line { margin-bottom: var(--s4); display: flex; }

/* ---------- Component: pull quote ---------- */
.pullquote { border-top: 1px solid var(--ink); padding-top: var(--s4); }
.pullquote__text {
  font: italic 400 clamp(1.875rem, 4.2vw, 3.5rem)/1.1 var(--font-display);
  letter-spacing: -.01em; text-wrap: balance;
  max-width: 28ch;
}
.pullquote .meta { margin-top: var(--s3); }

/* ---------- Component: end of article + author ---------- */
.article-end { padding-bottom: var(--s7); }
.article-end__rule { grid-column: 1 / -1; }
.author { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s2); }
.author__name { font: 400 1.75rem/1.1 var(--font-display); }
.author__bio { color: var(--mute); font-size: 1rem; line-height: 1.5; max-width: 40ch; }

/* ---------- Component: next article ---------- */
.next { padding-bottom: var(--s8); }
.next__item { position: relative; align-items: end; row-gap: var(--s4); }
.next__item a::after { content: ""; position: absolute; inset: 0; }
.next__figure { grid-column: 1 / span 6; overflow: hidden; }
.next__figure .figure__frame { --ratio: 4 / 3; transition: transform .8s var(--ease); }
.next__item:hover .figure__frame { transform: scale(1.015); }
.next__text { grid-column: 8 / -1; display: flex; flex-direction: column; gap: var(--s3); padding-bottom: var(--s1); }
.next__title { font: 400 clamp(2rem, 3.8vw, 3.5rem)/1.02 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.next__dek { color: var(--mute); font-size: 1rem; line-height: 1.5; max-width: 36ch; }
.next__item:hover .next__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1em; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .article__title, .article__deck { grid-column: 1 / -1; }
  .article__deck { max-width: 38rem; }
  .author { grid-column: 1 / -1; }
  .next__figure, .next__text { grid-column: 1 / -1; }
}

/* ---------- Mobile: re-composed, not just stacked ---------- */
@media (max-width: 640px) {
  .masthead__inner { padding-block: var(--s3); }
  .article-head { padding-block: var(--s6) var(--s4); }
  .hero { padding-bottom: var(--s6); }
  .hero .figure__frame { --ratio: 4 / 5; }
  .article-body { padding-bottom: var(--s6); }
  .article-body p { font-size: 1.125rem; line-height: 1.65; }
  .article-body h2 { margin-top: var(--s6); }
  .article-body .figure .figure__frame { --ratio: 4 / 3; }
  .article-body p + .figure, .article-body p + .pullquote,
  .article-body .figure + p, .article-body .pullquote + p { margin-top: var(--s5); }
  .article-end { padding-bottom: var(--s6); }
  .next { padding-bottom: var(--s7); }
  .footer .brand, .footer__nav { grid-column: 1 / -1; }
  .footer__nav { margin-top: var(--s4); }
  .footer__nav ul { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .figure__frame { animation: none; }
  .next__figure .figure__frame, .nav a, .footer__nav a, .section-head a, .article-body p a { transition: none; }
  .next__item:hover .figure__frame { transform: none; }
}

/* ---------- Brand lockup (logo: the pilcrow ¶ + wordmark) ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark { width: 1rem; height: 1.375rem; fill: currentColor; flex: none; }
.brand .wordmark { line-height: 1; }