/* about.css — the About modal (Folio.about). Depends on tokens.css.
   Scrim + centred editorial sheet, header row (kicker / close), display title,
   the label→answer ledger, block types (lede, p, rail, verbs, pillars, triad,
   contact) and the colophon. Expandable (.xp) styles are injected by js/expand.js.
   Tunables: --about-pad (sheet inset), --about-row-pad, --about-label-col. */

html.is-locked { overflow: hidden; }

.about {
  --about-pad: clamp(24px, 4vw, 56px);
  --about-row-pad: clamp(24px, 3vh, 40px);
  --about-label-col: minmax(160px, 22%);
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
}
.about[hidden] { display: none; }
.about, .about *, .about *::before, .about *::after { box-sizing: border-box; }
.about-scrim { position: absolute; inset: 0; background: var(--scrim); }

/* ---- sheet ---- */
.about-sheet {
  position: relative;
  width: min(1040px, calc(100vw - 2 * var(--margin)));
  max-height: calc(100vh - 2 * var(--margin));
  max-height: calc(100dvh - 2 * var(--margin));
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0; box-shadow: none;
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: var(--about-pad);
  outline: 0;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.about-sheet ::selection { background: var(--red); color: var(--ground); }

/* ---- head ---- */
.about-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); }
.about-kicker { font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.about-close { margin: -2px -2px -2px 0; }
.about-title {
  margin: 0 0 clamp(20px, 3vh, 40px);
  font: 200 var(--fs-title)/.95 var(--font-sans); letter-spacing: var(--track-display);
  white-space: nowrap; color: var(--ink);
}
.about-head { position: absolute; right: var(--about-pad); top: var(--about-pad); z-index: 2; }
.about-sheet { font-family: var(--font-serif); }

/* ---- ledger ---- */
.about-row {
  display: grid; grid-template-columns: var(--about-label-col) 1fr; column-gap: var(--gutter);
  align-items: baseline; border-top: 1px solid var(--rule-2); padding: var(--about-row-pad) 0;
}
.about-label {
  position: static; margin: 0;
  font: 500 var(--fs-cap)/1.5 var(--font-sans); letter-spacing: var(--track-caps);
  text-transform: uppercase; color: var(--ink-3);
}
.about-body { min-width: 0; }
.about-body > * + * { margin-top: 12px; }
.about-body > .about-lede + .about-p, .about-body > .about-lede + .about-rail { margin-top: 20px; }

.about-lede {
  margin: 0; font-family: var(--font-serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.32; letter-spacing: 0;
  color: var(--ink); max-width: 40ch; text-wrap: pretty;
}
.about-p { margin: 0; font-family: var(--font-serif); font-size: var(--fs-serif); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }

.about-rail { margin: 0; font: 500 var(--fs-cap)/1.6 var(--font-sans); color: var(--ink); letter-spacing: var(--track-caps); text-transform: uppercase; }
.about-rail-sep { display: inline-block; width: 1px; height: .9em; margin: 0 .8em; vertical-align: -.1em; background: var(--ink-3); }

.about-idx { font: 500 var(--fs-micro)/1.6 var(--font-sans); color: var(--ink-3); padding-top: .4em; letter-spacing: var(--track-caps); }
.about-verbs-lead { margin: 0 0 4px; font-family: var(--font-serif); font-size: var(--fs-serif); line-height: 1.45; color: var(--ink); }
.about-vrow, .about-prow {
  display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; padding: 10px 0;
  border-top: 1px solid var(--rule-2);
}
.about-verbs-lead + .about-vrow { border-top: 0; }
.about-vtext { font-family: var(--font-serif); font-size: var(--fs-serif); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.about-verb { font-family: var(--font-sans); font-weight: 500; font-size: 15px; color: var(--ink); }
.about-verb + .about-rest { margin-left: .1em; }

.about-pillars .about-prow:first-child { border-top: 0; padding-top: 0; }
.about-pverb { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--ink); }
.about-prest { margin: 4px 0 0; font-family: var(--font-serif); font-size: var(--fs-serif); line-height: 1.45; color: var(--ink-2); max-width: 58ch; }

.about-triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.about-thead { display: flex; align-items: center; gap: 8px; font: 500 var(--fs-micro)/1.5 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; }
.about-thead .icon { width: 12px; height: 12px; color: var(--ink); }
.about-titem {
  display: grid; grid-template-columns: 24px 1fr; column-gap: 6px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--rule-2); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--ink);
}
.about-tn { font: 500 var(--fs-micro)/1 var(--font-sans); color: var(--red); letter-spacing: var(--track-caps); }

/* ---- contact: ink-flood mailto that copies ---- */
.about-body > .about-contact { margin-top: clamp(20px, 3vh, 32px); }
.about-contact { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.about-mail { font-size: clamp(20px, 1.7vw, 26px); }   /* the hero's ink-flood (.flood in site.css) is the one email hover */
.about-mail-t.is-copied { animation: about-heal 800ms var(--ease-out) forwards; }
@keyframes about-heal { from { background-color: var(--red-soft); } to { background-color: transparent; } }
.about-copied {
  font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red);
  opacity: 0; transform: translateX(-4px); transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out);
}
.about-copied.is-on { opacity: 1; transform: none; }

/* ---- colophon ---- */
.about-colophon {
  margin: var(--about-row-pad) 0 0; padding-top: var(--about-row-pad); border-top: 1px solid var(--rule-2);
  font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--ink-3); max-width: 64ch;
}

/* ---- word reveal wrapper (transient; unwrapped after the reveal) ---- */
.about-lede .w { display: inline-block; } /* perf C4: will-change is set inline by about.js right before the animation */

/* ---- mobile ---- */
@media (max-width: 720px) {
  .about-sheet {
    width: 100vw; max-height: 100vh; max-height: 100dvh; height: 100dvh; inset: 0; border: 0;
    padding: clamp(20px, 5vw, 24px);
  }
  .about-row { grid-template-columns: 1fr; row-gap: 12px; }
  .about-label { position: static; }
  .about-title { white-space: normal; }
  .about-triad { grid-template-columns: 1fr; gap: 20px; }
  .about-close { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-close, .about-mail::after, .about-mail-t, .about-copied { transition: none; }
  .about-mail:active { transform: none; }
}