/* Extracted verbatim from the hand-authored bio index.html (was a 265-line inline <style> block).
   Longform article typography: drop cap, § subheads, pull quote, portrait, figure, lists.
   Only references custom properties already defined globally in splash.css. */

    /* ─── Bio article overrides ─── */
    .article {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 36px);
    }
    .article-body {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 300;
      font-size: clamp(17px, 1.4vw, 19px);
      line-height: 1.7;
      color: var(--ink);
    }
    .article-body p {
      margin-bottom: 1.4em;
    }
    .article-body p em, .article-body p i { font-style: italic; color: var(--ink-bright, var(--ink)); }
    .article-body p strong { font-weight: 600; }

    /* Drop cap */
    .lead::first-letter {
      font-family: 'Antonio', sans-serif;
      font-weight: 600;
      font-size: 5.4em;
      line-height: 0.86;
      float: left;
      margin: 0.08em 0.12em -0.04em -0.02em;
      color: var(--accent);
      text-transform: uppercase;
    }

    /* Subheads */
    .article-body h2.sub {
      font-family: 'Antonio', sans-serif;
      font-weight: 500;
      font-size: clamp(28px, 3vw, 36px);
      line-height: 1.15;
      color: var(--ink);
      margin-top: 56px;
      margin-bottom: 20px;
      letter-spacing: -0.005em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .article-body h2.sub .sigil {
      font-family: 'Antonio', sans-serif;
      font-size: 0.65em;
      color: var(--accent);
      font-weight: 400;
    }
    .article-body h2.sub .it {
      font-style: italic;
      color: var(--accent);
      font-weight: 400;
    }

    /* Pull quote */
    .article-body blockquote.pull {
      margin: 56px -16px;
      padding: 28px 32px;
      border-left: 2px solid var(--accent);
      background: var(--bg-soft, #0e0e10);
      font-family: 'Antonio', sans-serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(22px, 2.4vw, 28px);
      line-height: 1.35;
      color: var(--ink);
      letter-spacing: -0.005em;
    }
    .article-body blockquote.pull cite {
      display: block;
      font-family: 'Inter', sans-serif;
      font-style: normal;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-top: 18px;
      font-weight: 500;
    }

    /* Sidebar portrait */
    .article-portrait {
      max-width: 240px;
      float: right;
      margin: 6px -8px 24px 28px;
      border: 1px solid var(--rule);
      overflow: hidden;
    }
    .article-portrait img {
      width: 100%; height: auto;
      display: block;
      filter: grayscale(0.2) contrast(1.05);
    }
    .article-portrait .cap {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      padding: 10px 6px 6px;
      text-align: center;
      background: var(--bg);
    }
    @media (max-width: 600px) {
      .article-portrait { float: none; margin: 24px auto; max-width: 200px; }
    }

    /* Article masthead — at top, before hero */
    .article-masthead {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 clamp(20px, 5vw, 36px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      padding-top: 28px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 56px;
    }
    .article-masthead .left { display: flex; align-items: center; gap: 12px; }
    .article-masthead .dot {
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
    }

    /* Article hero — narrower than page-hero */
    .article-hero {
      max-width: 720px;
      margin: 0 auto 64px;
      padding: 0 clamp(20px, 5vw, 36px);
    }
    .article-hero .kicker {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 24px;
      font-weight: 600;
    }
    .article-hero h1 {
      font-family: 'Antonio', sans-serif;
      font-weight: 600;
      font-size: clamp(48px, 9vw, 108px);
      line-height: 0.96;
      letter-spacing: -0.018em;
      color: var(--ink);
      margin-bottom: 24px;
      text-transform: uppercase;
    }
    .article-hero h1 .it {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }
    .article-hero .subtitle {
      font-family: 'Antonio', sans-serif;
      font-weight: 400;
      font-style: italic;
      font-size: clamp(20px, 2.4vw, 28px);
      line-height: 1.35;
      color: var(--ink-dim);
      max-width: 30em;
    }
    .article-hero .article-byline {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
    }

    /* Inline work list */
    .article-body .article-list {
      list-style: none;
      margin: 18px 0 0;
      padding: 0;
      border-top: 1px solid var(--rule);
    }
    .article-body .article-list li {
      display: grid;
      grid-template-columns: 88px 1fr auto;
      gap: 20px;
      align-items: baseline;
      padding: 14px 0;
      border-bottom: 1px solid var(--rule);
      font-size: 16px;
    }
    .article-body .article-list .yr {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--ink-dim);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }
    .article-body .article-list .t {
      font-family: 'Antonio', sans-serif;
      font-weight: 500;
      font-size: 18px;
      color: var(--ink);
      letter-spacing: 0.005em;
    }
    .article-body .article-list .det {
      font-family: 'Inter', sans-serif;
      color: var(--ink-dim);
      font-size: 14px;
      text-align: right;
    }
    @media (max-width: 540px) {
      .article-body .article-list li { grid-template-columns: 72px 1fr; }
      .article-body .article-list .det { grid-column: 2; padding-left: 0; padding-top: 2px; text-align: left; }
    }

    /* End mark */
    .end-mark {
      text-align: center;
      margin: 56px 0 32px;
      font-family: 'Antonio', sans-serif;
      font-size: 32px;
      color: var(--accent);
      letter-spacing: 0.4em;
    }

    /* Inline editorial figure (full-width within article column) */
    .article-figure {
      margin: 64px -16px 56px;
      padding: 0;
    }
    .article-figure img {
      width: 100%;
      height: auto;
      display: block;
      filter: grayscale(0.05) contrast(1.02);
    }
    .article-figure figcaption {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-dim);
      padding: 14px 4px 0;
      font-weight: 500;
    }
    .article-figure figcaption .src {
      color: var(--accent);
      margin-right: 12px;
    }