/* =====================================================================
   Paper and Ink · base.css
   The page, the type scale and the essay layout: a 64ch reading column
   inside an 860px frame, with figures breaking out to the full frame.
   ===================================================================== */

/* ---- reset and page ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.15rem;
  line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* stamps overshoot while they thump in */
}

/* paper grain over the whole page */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background-image: var(--noise); background-size: 180px; opacity: var(--grain);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--life); outline-offset: 3px; border-radius: 2px; }

/* ---- layout --------------------------------------------------------- */
.frame { max-width: 860px; margin-inline: auto; }

.hero { padding-block: clamp(40px, 7vw, 80px) 28px; display: grid; gap: 1.1rem; }
.eyebrow {
  font-family: var(--sans); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); margin: 0;
}
h1 {
  font-weight: 400; font-size: clamp(2.6rem, 7.5vw, 5.4rem); line-height: 1.02;
  letter-spacing: -.025em; max-width: 14ch; text-wrap: balance; margin: 0;
}
h1 em { color: var(--once); font-style: italic; }   /* the last key word, in gold */
.dek {
  font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 1.55rem); line-height: 1.4;
  color: var(--muted); max-width: 44ch; margin: 0;
}
.byline { font-family: var(--sans); font-size: .92rem; color: var(--muted); margin: .4rem 0 0; }
.byline b { font-weight: 600; color: var(--ink); }
.byline .nw { white-space: nowrap; }   /* keep "13 min read" and the title in one piece */

/* ---- prose ---------------------------------------------------------- */
.prose { padding-block: 12px 40px; }
.prose > * { max-width: 64ch; }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  font-weight: 500; font-size: 1.85rem; line-height: 1.15; letter-spacing: -.01em;
  margin: 2.2em 0 .6em; text-wrap: balance;
}
.prose strong { font-weight: 600; }
.lede::first-letter {
  float: left; font-size: 4.2em; line-height: .82; font-weight: 400; padding: .07em .09em 0 0;
}

/* ---- concept highlights: the only color in running text -------------- */
.c-once, .c-life {
  background-repeat: no-repeat; background-size: 100% .42em; background-position: 0 88%;
  animation: sweep 1.1s cubic-bezier(.2, .7, .2, 1) .5s both;
}
.c-once { background-image: linear-gradient(var(--once-soft), var(--once-soft)); box-shadow: inset 0 -2px 0 var(--once); }
.c-life { background-image: linear-gradient(var(--life-soft), var(--life-soft)); box-shadow: inset 0 -2px 0 var(--life); }
@keyframes sweep { from { background-size: 0% .42em; } }

/* ---- figures -------------------------------------------------------- */
figure { margin: 2.6rem 0 2.8rem; max-width: 860px !important; }
figcaption {
  font-family: var(--sans); font-size: .85rem; color: var(--muted); line-height: 1.5;
  margin-top: 1.4rem; max-width: 64ch;
}
figcaption b { color: var(--ink); font-weight: 600; }

/* ---- pull quote and closing list ------------------------------------ */
.pull { margin: 2.6rem 0; padding: 0; border: 0; }
.pull::before { content: ""; display: block; width: 48px; height: 3px; background: var(--life); margin-bottom: 1.1rem; }
.pull p {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.18; letter-spacing: -.015em;
  max-width: 30ch; margin: 0; text-wrap: balance;
}
.asks {
  list-style: none; margin: 0 0 1em; padding: 0 0 0 1.25rem;
  border-left: 1px solid var(--rule); display: grid; gap: 1rem;
}
.asks b { font-family: var(--sans); font-weight: 600; font-size: .98rem; margin-right: .35em; }

/* ---- utility -------------------------------------------------------- */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}

/* everything ends fully visible; with reduced motion, nothing moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}