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

/* LAYOUT CONCEPT
   Same locked system as the homepage and article page. The About page is two columns on desktop:
   a portrait frame on the left, the four prompts from the brief on the right, each under a small ruled label.
   Nothing else. On mobile the portrait leads, then the text in one column.
*/
: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 (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);
}
.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;
  white-space: nowrap;
}

/* ---------- 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__caption {
  font: 400 .8125rem/1.45 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); } }

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

/* =========================================================
   ABOUT PAGE COMPONENTS
   ========================================================= */
.about-head { padding-block: var(--s7) var(--s6); row-gap: var(--s4); }
.about__title {
  grid-column: 1 / span 10;
  font: 400 clamp(3rem, 8vw, 7.5rem)/.95 var(--font-display);
  letter-spacing: -.02em;
}
.about__lede {
  grid-column: 1 / span 7;
  font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.4 var(--font-body);
  text-wrap: pretty;
}

.about-body { padding-bottom: var(--s8); row-gap: var(--s6); }
.about__portrait { grid-column: 1 / span 5; align-self: start; }
.about__portrait .figure__frame { --ratio: 4 / 5; }
.about__text { grid-column: 7 / -1; display: flex; flex-direction: column; gap: var(--s6); }

/* Component: labelled text block */
.block { border-top: 1px solid var(--ink); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.block h2 { font: 600 .75rem/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.block p { font-size: 1.1875rem; line-height: 1.7; max-width: 38rem; text-wrap: pretty; }
.block .ph-line { display: flex; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .about__title, .about__lede { grid-column: 1 / -1; }
  .about__lede { max-width: 38rem; }
  .about__portrait { grid-column: 1 / span 7; }
  .about__text { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .masthead__inner { padding-block: var(--s3); }
  .about-head { padding-block: var(--s6) var(--s5); }
  .about-body { padding-bottom: var(--s7); row-gap: var(--s5); }
  .about__portrait { grid-column: 1 / -1; }
  .about__text { gap: var(--s5); }
  .block p { font-size: 1.125rem; line-height: 1.65; }
  .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; }
  .nav a, .footer__nav a { transition: 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; }