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

/* LAYOUT CONCEPT
   12-column grid, max 1440px. Writing leads: one dominant feature (wide image, oversized headline beneath),
   then an asymmetric "latest" block (one image-led piece + two text-only pieces), one pull-quote break,
   then a quiet typographic index. No cards, no boxes; hairline rules and whitespace do the structuring.

   SPACING SYSTEM (8px base): --s1 4 / --s2 8 / --s3 16 / --s4 24 / --s5 40 / --s6 64 / --s7 96 / --s8 160
   TYPE SCALE: meta .75rem / body 1.125rem / item title 1.5rem / lead title ~2.5rem / intro ~2.25rem / display ~7rem
*/
: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 { 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 ---------- */
.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; }

/* ---------- Component: metadata ---------- */
.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;
}

/* ---------- Component: masthead + navigation ---------- */
.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="page"] { border-bottom-color: var(--ink); }

/* ---------- Component: image frame ---------- */
/* Real images replace .figure__frame's contents with <img srcset sizes alt loading>.
   Placeholder frames are flat tones, labelled, never passed off as photography. */
.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.4 var(--font-ui);
  color: var(--mute); margin-top: var(--s2);
}
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Opening ---------- */
.intro { padding-block: var(--s7) var(--s6); }
.intro__text {
  grid-column: 1 / span 8;
  font: 400 clamp(1.5rem, 2.7vw, 2.375rem)/1.25 var(--font-display);
  text-wrap: balance;
}
.intro__tag { grid-column: 1 / -1; margin-top: var(--s4); display: flex; }

/* ---------- Component: featured story ---------- */
.feature { padding-bottom: var(--s8); }
.feature__link { display: block; }
.feature .figure__frame { --ratio: 21 / 9; }
.feature__body { margin-top: var(--s4); row-gap: var(--s3); align-items: end; }
.feature__meta { grid-column: 1 / -1; }
.feature__title {
  grid-column: 1 / span 9;
  font: 400 clamp(2.75rem, 7.4vw, 7rem)/.95 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.feature__deck {
  grid-column: 10 / -1;
  font-size: 1rem; line-height: 1.5; color: var(--mute);
  padding-bottom: .6rem;
}
.feature__link:hover .feature__title {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .08em;
}

/* ---------- Section header ---------- */
.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); }

/* ---------- Component: article preview (three weights) ---------- */
.preview { position: relative; }
.preview a::after { content: ""; position: absolute; inset: 0; }
.preview__title { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }
.preview__dek { color: var(--mute); font-size: 1rem; line-height: 1.5; }
.preview:hover .preview__title {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1em;
}
.preview .figure__frame { transition: transform .8s var(--ease); }
.preview:hover .figure__frame { transform: scale(1.015); }
.preview .figure { overflow: hidden; }

.preview--lead { display: flex; flex-direction: column; gap: var(--s3); }
.preview--lead .figure__frame { --ratio: 4 / 3; }
.preview--lead .preview__title { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.01em; }
.preview--lead .preview__dek { max-width: 46ch; }

.preview--text {
  display: flex; flex-direction: column; gap: var(--s2);
  border-top: 1px solid var(--rule); padding-block: var(--s4) var(--s5);
}
.preview--text .preview__title { font-size: clamp(1.625rem, 2.2vw, 2.125rem); line-height: 1.08; }

.latest__lead { grid-column: 1 / span 7; }
.latest__side { grid-column: 9 / -1; display: flex; flex-direction: column; }
.latest__side .preview--text:first-child { border-top: 0; padding-top: 0; }

/* ---------- Component: pull quote (editorial break) ---------- */
.break { padding-block: var(--s8); }
.pullquote { grid-column: 2 / span 10; }
.pullquote__text {
  font: italic 400 clamp(2rem, 5vw, 4.5rem)/1.08 var(--font-display);
  letter-spacing: -.01em; text-wrap: balance;
}
.pullquote__src { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }

/* ---------- Component: index list ---------- */
.index { padding-bottom: var(--s8); }
.index__list { border-top: 1px solid var(--rule); }
.preview--row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.preview--row .meta { grid-column: 1 / span 2; }
.preview--row .preview__title { grid-column: 3 / span 7; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; }
.preview--row .meta--cat { grid-column: 10 / -1; justify-content: flex-end; }

/* ---------- Component: footer ---------- */
.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); }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .intro__text { grid-column: 1 / -1; }
  .feature__title { grid-column: 1 / -1; }
  .feature__deck { grid-column: 1 / span 8; padding-top: var(--s2); }
  .latest__lead, .latest__side { grid-column: 1 / -1; }
  .latest__side { margin-top: var(--s5); }
  .pullquote { grid-column: 1 / -1; }
}

/* ---------- Mobile: re-composed, not just stacked ---------- */
@media (max-width: 640px) {
  .masthead__inner { padding-block: var(--s3); }
  .intro { padding-block: var(--s6) var(--s5); }
  .feature { padding-bottom: var(--s7); }
  .feature .figure__frame { --ratio: 4 / 5; }       /* taller crop keeps the image's impact on a narrow screen */
  .feature__deck { grid-column: 1 / -1; }
  .preview--lead .figure__frame { --ratio: 1 / 1; }
  .break { padding-block: var(--s7); }
  .index { padding-bottom: var(--s7); }
  .preview--row { display: flex; flex-direction: column; gap: var(--s2); }
  .preview--row .meta--cat { justify-content: flex-start; }
  .preview--row .meta { order: 0; }
  .preview--row .preview__title { order: 1; }
  .preview--row .meta--cat { order: 2; }
  .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; }
  .preview .figure__frame, .nav a, .footer__nav a, .section-head a { transition: none; }
  .preview: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; }