/* ============================================================
   megancasebier.com — Editorial Instrument
   Kinfolk structure · Aesop ground · mono receipts.
   One stylesheet, no build step (R-15). Values are canon per R-46;
   composition answers to design/reskin-comp.png under R-35.
   ============================================================ */

/* ---------- 1. TOKENS (R-46, measured) ---------- */
:root {
    --ground:   #FFFEF2;   /* page — measured, Aesop */
    --band:     #F6F5E8;   /* section band — measured, Aesop */
    --mat:      #DDDCD1;   /* R-46 mat — 1.36:1 ground / 1.38:1 white shot */
    --plate-ground: #F1EFE1;  /* R-84 plate ground — 1.14:1 ground / 1.16:1 white shot.
                                 A ground is a field and needs no edge; a mat is an
                                 object and does. See rulings.md R-84. */
    --dark:     #201A16;   /* terminal band only */

    --ink:      #201A16;   /* 16.97:1 on ground */
    --ink-soft: #796E60;   /* 4.92:1 ground · 4.55:1 band — derived against the BAND */
    --accent:   #94663F;   /* 4.89:1 ground · 4.52:1 band — derived against the BAND */
    --pass:     #405F48;   /* 7.02:1  on ground — verification marks ONLY */

    /* scoped to the terminal dark band, where the originals are correct */
    --bone:           #F2EDE6;   /* 14.77:1 on dark */
    --ink-soft-dark:  #A69784;   /*  6.05:1 on dark */
    --accent-dark:    #C08552;   /*  5.50:1 on dark */

    --rule:      rgba(121, 110, 96, 0.30);   /* ink-soft @30% */
    --rule-soft: rgba(121, 110, 96, 0.16);
    --keyline:   rgba(121, 110, 96, 0.55);   /* plate edge */
    --pass-rule: rgba(64, 95, 72, 0.70);     /* 3.44:1 — non-text AA */

    --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --plate-gap: 88px;   /* R-78: one spacing value above and below every group */
    --mat-pad:   40px;   /* R-79: the mat's even inset around its screens */
    --measure: 64ch;
    --max-width: 1080px;
    --gutter: 72px;
    --radius: 2px;

    /* legacy aliases — the case studies carry inline styles written against
       the old names. Retraced rather than rewriting markup. */
    --color-bg: var(--ground);
    --color-surface: var(--band);
    --color-surface-elevated: var(--band);   /* legacy inline styles put TEXT here — never the mat */
    --color-border: var(--rule);
    --color-border-subtle: var(--rule-soft);
    --color-border-strong: var(--keyline);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink-soft);
    --color-text-tertiary: var(--ink-soft);
    --color-accent: var(--accent);
    --color-accent-light: var(--accent);
    --color-accent-subtle: rgba(148, 102, 63, 0.10);
    --color-warm-white: var(--ink);
    --cognac-wash: rgba(148, 102, 63, 0.10);
    --bone-wash: rgba(32, 26, 22, 0.05);
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 16;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.62;
    background: var(--ground);
    color: var(--ink);
    /* `clip`, not `hidden`. Both contain the full-bleed masthead rule, but
       `hidden` makes body a scroll container, which breaks position:sticky
       against the viewport. `clip` does not. Kept as clip so the masthead's
       sticky-adjacent behaviour and any future pin stay available. */
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
a:hover { color: var(--ink); }

strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--ground); }

/* ---------- 3. TYPE ---------- */
/* Section openers carry the drama, at DISPLAY optical size — not text size
   scaled up (R-46). H1 gets scale but stays restrained. */
h1, h2, .section-title, .about-headline, .resume-name, .testimonial-quote, .pull-quote {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    font-variation-settings: "opsz" 64;
    letter-spacing: -0.012em;
}

h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.04; margin-bottom: 34px; text-wrap: balance; }

h3 {
    font-family: var(--serif);
    font-variation-settings: "opsz" 24;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 12px;
}

p { max-width: var(--measure); margin-bottom: 22px; color: var(--ink); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Mono is for everything counted, plus the furniture. */
.mono, .section-label, .card-eyebrow, .hero-eyebrow, .hero-name, .hero-label,
.meta-label, .outcome-label, .decision-section-label, .impact-callout-label,
.ba-label, .annotated-badge, .build-step-time, .comparison-label,
.platform-model-label, .flow-box-label, .model-note, .resume-page-label,
.skills-label, .about-label, .cta-title, .image-caption,
.nav-links a, .nav-name, .footer-left, .footer-links a,
.tension-name, .pill, .metric, .job-dates, .edu-location, .back-link,
.decision-number, .outcome-card-label, .annotated-title, .testimonial-attribution,
.job-location, .early-career-companies, .hero-screen-label, .resume-contact {
    font-family: var(--mono);
    font-variation-settings: normal;
}

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--measure); margin-left: 0; margin-right: auto; }

/* Plates carry the interval on articles, so their padding is lower.
   Indexes have no plates and buy their air with margin (R-46/RR-44). */
section { padding: 104px 0; }
.doc-index section { padding: 124px 0; }

/* ---------- 5. MASTHEAD ---------- */
.nav { background: var(--ground); border-bottom: 1px solid var(--rule); padding: 28px 0; }
.nav-inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter);
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.nav-name { font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.nav-name:hover { color: var(--accent); }
.nav-links { display: flex; gap: 38px; flex-wrap: wrap; }
.nav-links a { font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

/* ---------- 6. RECEIPT MARK ---------- */
.rcpt {
    font-family: var(--mono);
    font-variation-settings: normal;
    font-variant-numeric: tabular-nums;
    font-size: 0.9em;
    white-space: nowrap;
    position: relative;
}
.rcpt[data-prov] { cursor: help; border-bottom: 1px dotted var(--pass-rule); padding-bottom: 2px; }
.rcpt[data-prov]:hover, .rcpt[data-prov]:focus-visible { border-bottom-color: var(--pass); }

.rcpt-mark { font-size: min(0.72em, 17px); line-height: 1; vertical-align: super; color: var(--pass); margin-left: 0.18em; display: inline-block; }
.rcpt-mark svg { width: 1em; height: 1em; display: block; overflow: visible; }

.rcpt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rcpt-tip {
    position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 40;
    display: block; width: max-content; max-width: 36ch; white-space: normal;
    padding: 9px 13px; background: var(--dark); border-radius: var(--radius);
    font-family: var(--mono); font-size: 0.6875rem; line-height: 1.5;
    color: var(--bone); text-transform: none;
    opacity: 0; visibility: hidden; transition: opacity .18s ease; pointer-events: none;
}
.rcpt-tip::before { content: "PROVENANCE"; display: block; color: var(--ink-soft-dark); letter-spacing: 0.18em; font-size: 0.5625rem; margin-bottom: 4px; }
.outcome-value .rcpt-tip, .meta-value .rcpt-tip { left: auto; right: 0; }
.rcpt:hover .rcpt-tip, .rcpt:focus .rcpt-tip, .rcpt:focus-visible .rcpt-tip { opacity: 1; visibility: visible; }

.rcpt-mark.is-pending { opacity: 0; }
.rcpt-mark.is-ticked { animation: rcpt-tick 90ms ease-out both; }
@keyframes rcpt-tick { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

h1 .rcpt, h2 .rcpt { font-size: 0.7em; }

/* ---------- 7. METADATA TABLES (R-48, R-55) ---------- */
/* Editorial tables, not cards. No fill, no border, no chrome. Labels are mono;
   values are prose and therefore serif — except where the value IS a figure.
   The BLOCK is the grid, not the row, so every label shares one max-content
   column: nothing wraps, and the tab stop is exactly as wide as the longest
   label rather than an arbitrary canyon (R-55). */
.outcome-strip, .meta-bar, .metrics-strip, .hero-meta {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: 0;
    margin: 44px 0;
    max-width: var(--measure);
}

.outcome-strip, .meta-bar {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 34px;
}
.outcome-item, .meta-item { display: contents; }

.outcome-label, .meta-label {
    grid-column: 1;
    justify-self: start;
    white-space: nowrap;              /* a label that cannot fit is a copy question */
    font-family: var(--mono);
    font-variation-settings: normal;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.9;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    background: none;
}

/* Values: prose, so serif and ink at body size. */
.meta-value {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    font-family: var(--serif);
    font-variation-settings: "opsz" 16;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: none;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

/* The outcome strip's values ARE figures, so they stay mono (R-54). */
.outcome-value {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    font-family: var(--mono);
    font-variation-settings: normal;
    font-size: 1.05rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    background: none;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
}

/* hero-meta: its label is a bare text node and cannot take a border, so this
   one keeps a row grid with a column sized to its longest label. */
.hero-meta { display: block; }
.hero-meta-item {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 34px;
    align-items: baseline;
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-variation-settings: normal;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.9;
    white-space: nowrap;
}
.hero-meta .hero-meta-value {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    padding: 0;
    white-space: normal;
    font-family: var(--serif);
    font-variation-settings: "opsz" 16;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

/* resume metrics strip: one phrase per row, so a ruled list rather than a table */
.metrics-strip { display: block; }
.metric {
    display: block;
    font-family: var(--serif);
    font-variation-settings: "opsz" 16;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}
.metric::before { content: none; }

/* ---------- 8. SECTION FURNITURE ---------- */
.section-label, .about-label, .hero-label, .resume-page-label, .card-eyebrow, .hero-eyebrow {
    font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 40px; display: block;
}
.section-label { padding-top: 30px; border-top: 1px solid var(--rule); }
.section-label span { color: var(--accent); }
.section-label span::after { content: " / "; color: var(--rule); }
.card-eyebrow, .hero-eyebrow { color: var(--accent); }
.work-section > .container > .section-label { border-top: 0; padding-top: 0; }

@media (min-width: 1180px) {
    .section-label { position: relative; }
    .section-label span { position: absolute; left: -64px; top: 30px; color: var(--accent); }
    .section-label span::after { content: ""; }
}

/* ---------- 9. HERO ---------- */
.hero { padding: 120px 0 96px; }
.doc-article .hero { padding-top: 0; }   /* the masthead opens the article now (R-62) */
.hero h1 { max-width: 22ch; margin-bottom: 40px; }
.hero-name { color: var(--ink-soft); font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 52px; }
.hero-proof, .hero-subtitle, .hero-sub { font-size: 1.15rem; line-height: 1.58; color: var(--ink); max-width: 54ch; margin-bottom: 8px; }
.hero-grid { display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; }
.hero-headshot, .about-headshot {
    width: 200px; height: 240px; object-fit: cover; object-position: center top;
    background: var(--mat); padding: 12px; border: 0;
    border-radius: var(--radius); filter: grayscale(100%) contrast(1.03);
}
.about-headshot { margin-bottom: 32px; }

/* ---------- 10. INDEX ROWS (no plates — R-46/RR-44) ---------- */
.work-section { border-top: 1px solid var(--rule); }
.work-grid { display: block; }
.case-study-card {
    display: grid; grid-template-columns: 1fr 1.06fr; grid-template-rows: auto auto 1fr;
    column-gap: 64px; align-items: start; padding: 56px 0;
    border-top: 1px solid var(--rule); color: inherit;
}
.card-image { grid-column: 1; grid-row: 1 / -1; border: 0; border-radius: var(--radius); background: var(--mat); padding: 12px; margin: 0; }
.card-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.card-eyebrow { grid-column: 2; grid-row: 1; margin-bottom: 14px; }
.card-title { grid-column: 2; grid-row: 2; font-family: var(--serif); font-variation-settings: "opsz" 32; font-weight: 400; font-size: 1.55rem; line-height: 1.22; color: var(--ink); margin-bottom: 14px; transition: color .2s ease; }
.card-description { grid-column: 2; grid-row: 3; font-size: 0.95rem; color: var(--ink-soft); max-width: 44ch; }
.work-grid .case-study-card:last-child { border-bottom: 1px solid var(--rule); }
.case-study-card:hover .card-title { color: var(--accent); }

/* ---------- 11. TESTIMONIAL ---------- */
.testimonial-section { border-top: 1px solid var(--rule); }
.testimonial-content { max-width: var(--measure); margin: 0; text-align: left; }
.testimonial-quote { font-style: italic; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.26; text-indent: -0.42em; max-width: 26ch; margin-bottom: 36px; }
.testimonial-attribution { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.testimonial-name { color: var(--accent); }

/* ---------- 12. ABOUT ---------- */
.about-section { border-top: 1px solid var(--rule); }
.about-grid { display: grid; grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
.about-headline { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; }
.about-text { font-size: 1rem; color: var(--ink); margin-bottom: 22px; }
.about-link, .back-link, .cta a {
    display: inline-block; font-family: var(--mono); font-size: 0.625rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
    border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-top: 14px;
}
.about-link:hover, .back-link:hover, .cta a:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- 13. TERMINAL DARK BAND (R-46/RR-34, RR-40) ---------- */
.footer {
    background: var(--dark); border-top: 0; padding: 64px 0;
    --ink-soft: var(--ink-soft-dark);
    --accent: var(--accent-dark);
    --rule: rgba(166, 151, 132, 0.28);
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer .container > .footer-inner { padding: 0; }
.footer-left, .footer-links a { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft-dark); }
.footer-links { display: flex; gap: 30px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--bone); }

/* ---------- 14. ARTICLE BODY (long-form only — R-46/RR-35, RR-38) ---------- */
/* Indented, unspaced paragraphs. Book typography, not web typography. */
.doc-article .narrow > p + p { text-indent: 1.6em; margin-top: 0; margin-bottom: 0; }
.doc-article .narrow > p { margin-bottom: 0; }
.doc-article .narrow > p:first-of-type { margin-bottom: 0; }
.doc-article .narrow > p + h2,
.doc-article .narrow > p + h3 { margin-top: 44px; }

/* RETIRED by R-62: the 18% asymmetric indent. The masthead's 45/55 split now
   carries the article's whole column structure — body copy lives in the right
   column and the left column stays permanently empty. An indent moved the text;
   a column gives the text a place. See §16. */

/* ---------- 15. IMAGE GROUPS (R-79) ---------- */
/* Replaces R-78's one-plate-per-image treatment.

   Every group sits in a mat of IDENTICAL width — the full content width — so
   the left and right edges are the same line down the whole page. Mats vary in
   height; widths never do. Screens sit inset with generous even padding at
   their natural aspect ratio: width is 100% of the cell and height is auto, so
   nothing is stretched and nothing is cropped to fit. Related screens share one
   mat — one large, two side by side, or a cluster of three. Captions sit
   beneath the mat, column-aligned to the screen each names.

   Plate ground per R-84: --plate-ground (#F1EFE1). No motion of any kind (R-78).

   DEFAULT IS VARIANT B — the mat is dropped. R-79's fixed width and the caption
   row carry the grouping; nothing is drawn behind the screens. This is the
   recommendation put to Megan under R-84, made live so the page reads as the
   proposal rather than as a comparison. Add .plate-a to the body to restore the
   mat at the ruled #F1EFE1; .plate-ref restores the superseded #DDDCD1 for
   reference only. Both are one class, so overruling is one word. */

.group { width: 100%; margin: var(--plate-gap) 0; }

.group-mat {
    width: 100%;
    background: none;
    border-radius: var(--radius);
    padding: 0;
    display: grid;
    gap: var(--mat-pad);   /* still the gutter between screens in a shared mat */
    align-items: start;
}

/* Overrule paths, one class each. */
.plate-a .group-mat   { background: var(--plate-ground); padding: var(--mat-pad); }
.plate-ref .group-mat { background: var(--mat);          padding: var(--mat-pad); }
.group--1up .group-mat { grid-template-columns: 1fr; }
.group--2up .group-mat { grid-template-columns: 1fr 1fr; }
.group--3up .group-mat { grid-template-columns: repeat(3, 1fr); }
/* R-80: two before/after pairs in one mat — BEFORE column, AFTER column. */
.group--2x2 .group-mat { grid-template-columns: 1fr 1fr; }

/* R-80: where two screens share a mat, each keeps its own annotated header
   above its own column, so no header copy has to be merged or dropped. */
.group-heads { display: grid; gap: var(--mat-pad); align-items: end; }
.group--2up .group-heads { grid-template-columns: 1fr 1fr; }
.group-heads .annotated-image-header { margin-bottom: 0; }

.group-screen { min-width: 0; }

/* Natural aspect ratio. No object-fit, no max-height, no crop. */
.group-screen img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* Captions beneath the mat, on the same column rhythm as the screens. */
.group-caps {
    display: grid;
    gap: var(--mat-pad);
    margin-top: 14px;
}
.group--1up .group-caps { grid-template-columns: 1fr; }
.group--2up .group-caps { grid-template-columns: 1fr 1fr; }
.group--3up .group-caps { grid-template-columns: repeat(3, 1fr); }
.group--2x2 .group-caps { grid-template-columns: 1fr 1fr; row-gap: 10px; }

.group-cap {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    line-height: 1.7;
    max-width: var(--measure);
}

/* The annotated header keeps its mono label above the mat — no fill, no box. */
.annotated-image-header {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.annotated-badge {
    font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--accent); margin-right: 14px;
    background: none; padding: 0; border: 0;
}
.annotated-title {
    font-family: var(--serif); font-variation-settings: "opsz" 16;
    font-size: 1rem; color: var(--ink); letter-spacing: 0; text-transform: none;
}

/* Captions sit on the page ground either way (--ink-soft 4.92:1, AA) rather than
   on #F1EFE1, where they measure 4.31:1 and fail. Kept as aliases so older
   markup and the render tooling keep working. */
.plate-b .group-mat { background: none; padding: 0; }
.no-mat .group-mat  { background: none; padding: 0; }

/* Narrow: a cluster or a pair cannot hold its columns, so every group goes
   one-up. Widths still never vary — the mat is still the full content width. */
@media (max-width: 900px) {
    .group--2up .group-mat, .group--3up .group-mat, .group--2x2 .group-mat,
    .group--2up .group-caps, .group--3up .group-caps, .group--2x2 .group-caps,
    .group--2up .group-heads { grid-template-columns: 1fr; }
}

/* ---------- 16. CASE-STUDY COMPONENTS ---------- */
/* Same pattern as the metadata tables: a mono label over prose. No fill, no
   border — hairlines only (R-48). */
.live-tool-cta { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 4px 0 22px; margin: 22px 0 44px; max-width: var(--measure); }
.cta-title { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.cta-subtitle { font-size: 0.95rem; color: var(--ink); }

.before-after { display: block; margin: 64px 0; border-top: 1px solid var(--rule); }
.ba-panel { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.ba-panel.after { border-left: 0; padding: 30px 0; }
.ba-label { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 22px; color: var(--ink-soft); }
.ba-label.after-label { color: var(--accent); }
.ba-panel ul li { font-size: 0.95rem; line-height: 1.55; color: var(--ink); padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.ba-panel ul li:first-child { border-top: 0; }
.ba-panel.after ul li::before { border-color: var(--accent); }

.feature-grid { display: block; margin: 48px 0; }
.feature-card { padding: 30px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.feature-card h3 { font-size: 1.05rem; }
.feature-card p { font-size: 0.95rem; color: var(--ink); }

.decision-card { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin: 52px 0; }
.decision-header { display: flex; gap: 18px; align-items: baseline; padding: 24px 0 0; }
.decision-number { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); flex: none; }
.decision-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.32; }
.decision-subtitle { font-size: 0.9rem; color: var(--ink-soft); margin-top: 6px; }
.decision-body { padding: 22px 0 0; }
.decision-grid { display: block; }
.decision-challenge { border-right: 0; padding-right: 0; margin-bottom: 30px; }
.decision-section-label { font-size: 0.5875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.decision-body p, .decision-body li { font-size: 0.95rem; color: var(--ink); }

.options-list li { font-size: 0.95rem; color: var(--ink); padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.options-list li:first-child { border-top: 0; }
.options-list li.chosen::before { border-color: var(--accent); }
.options-list li.rejected { opacity: 0.7; }
.option-annotation { font-family: var(--mono); font-size: 0.5875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-left: 8px; }

.impact-callout { border-left: 1px solid var(--accent); padding: 4px 0 4px 26px; margin: 30px 0 0; }
.impact-callout-label { font-size: 0.5875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.impact-callout p { font-size: 0.95rem; color: var(--ink); }

.build-timeline { margin: 52px 0; border-left: 1px solid var(--rule); padding-left: 34px; }
.build-step { padding: 28px 0; border-top: 1px solid var(--rule-soft); position: relative; }
.build-step:first-child { border-top: 0; padding-top: 0; }
.build-step::before { content: ""; position: absolute; left: -35px; top: 32px; width: 12px; border-top: 1px solid var(--accent); }
.build-step:first-child::before { top: 12px; }
.build-step-time { font-size: 0.5875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.build-step h3 { font-size: 1.05rem; }
.build-step p { font-size: 0.95rem; }

/* ---------- 17. HOMEOWNERS COMPONENTS ---------- */

.comparison-label.after { color: var(--ink-soft); }

.tension-diagram { margin: 56px auto; }
.tension-triangle { display: block; }
.tension-bottom { display: block; }
.tension-node { background: none; border: 0; border-top: 1px solid var(--rule); padding: 26px 0 34px; max-width: var(--measure); }
.tension-icon { color: var(--accent); margin-bottom: 14px; }
.tension-name { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.tension-constraints li { font-size: 0.95rem; color: var(--ink); padding: 9px 0; border-top: 1px solid var(--rule-soft); }
.tension-constraints li:first-child { border-top: 0; }

.principle-callout, .pull-quote { border-left: 1px solid var(--accent); padding: 8px 0 8px 30px; margin: 48px 0; }
.pull-quote { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.3; font-style: italic; }
.pull-quote p { font-family: inherit; font-size: inherit; font-style: inherit; color: inherit; max-width: none; text-indent: 0; }
.principle-callout p { color: var(--ink); text-indent: 0; }

.role-grid { display: block; }
.role-card { padding: 30px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.role-card-icon { color: var(--accent); margin-bottom: 16px; }
.role-card h3 { font-size: 1.05rem; }
.role-card p { font-size: 0.95rem; }

.data-flow { margin: 32px 0 0; }
.flow-steps { display: block; }
.flow-box { background: none; border: 0; padding: 0; }
.flow-box.highlight { border: 0; }
.flow-step { padding: 16px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.flow-box-label { font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.flow-box-value { font-family: var(--mono); font-size: 1.1rem; color: var(--ink); }
.flow-box-value.accent { color: var(--accent); }
.flow-description { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 10px; }

.annotated-image-header { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.annotated-badge { font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.annotated-title { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-soft); }
/* .scroll-hint removed under R-82 — it styled an affordance for the retired
   motion mechanic, and the two captions that used it are deleted under R-83. */

.architecture-callout { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 30px 0 0; margin: 56px auto; }
.arch-features { display: block; margin-top: 26px; }
.arch-feature { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--rule-soft); font-size: 0.95rem; color: var(--ink); }
.arch-feature-icon { display: none; }   /* decorative check — removed under R-54 */

.platform-comparison { display: block; margin: 60px auto; }
.platform-model-label { font-size: 0.5875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.after-model .platform-model-label { color: var(--accent); border-color: var(--accent); }
.carrier-block { font-family: var(--mono); font-size: 0.8125rem; background: none; border: 0; border-top: 1px solid var(--rule-soft); border-radius: 0; padding: 11px 0; margin: 0; color: var(--ink-soft); }
.carrier-block.shared { border-color: var(--accent); color: var(--ink); }
.platform-arrow { color: var(--accent); font-size: 1.25rem; }
.model-note { font-size: 0.5875rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 14px; }

.outcomes-grid { display: block; margin: 52px auto; }
.outcome-card { padding: 30px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.outcome-card-metric { font-family: var(--mono); font-size: 1rem; color: var(--ink); margin-bottom: 8px; }
.outcome-card-label { font-size: 0.5875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.outcome-card-detail { font-size: 0.95rem; color: var(--ink); }

.section-light { background: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.reflection { border-top: 1px solid var(--rule); }
.reflection-content { max-width: var(--measure); }

/* legacy inline `margin: Npx auto` re-anchored to the one left edge */
.decision-card, .annotated-image, .architecture-callout, .outcomes-grid,
.platform-comparison, .tension-diagram, .role-grid, .reflection-content {
    margin-left: 0 !important; margin-right: auto !important;
}

}

/* ---------- 18. ABOUT & WORK PAGES ---------- */
.section-title { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.06; margin-bottom: 30px; }
.section-text { font-size: 1rem; color: var(--ink); margin-bottom: 22px; max-width: var(--measure); }
.grid-two { display: block; }
.grid-two > div { padding: 30px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.pill { display: inline-block; font-size: 0.5875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 16px; }
.list { max-width: var(--measure); }
.list li { font-size: 1.05rem; color: var(--ink); padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.list li:last-child { border-bottom: 1px solid var(--rule-soft); }
.cta { margin-top: 44px; }

/* ---------- 19. RESUME ---------- */
.resume-page { max-width: 880px; margin: 0 auto; padding: 64px var(--gutter) 40px; }
.resume-header { padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.resume-page-label { margin-bottom: 24px; }
.resume-name { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.04; margin-bottom: 16px; }
.resume-subtitle { font-size: 1.05rem; color: var(--ink); margin-bottom: 18px; }
.resume-contact { font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.resume-contact .sep { color: var(--rule); padding: 0 10px; }
.resume-summary { font-size: 1.05rem; color: var(--ink); max-width: var(--measure); }
.resume-section { margin-top: 44px; }
.resume-section .section-title { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); padding-top: 22px; border-top: 1px solid var(--rule); margin-bottom: 24px; }
.job { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
.job:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.job-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.job-company { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.job-company .acquired { font-weight: 400; color: var(--ink-soft); font-size: 0.95rem; }
.job-location, .job-dates, .edu-location { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.job-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--rule-soft); }
.job-title { font-size: 0.95rem; color: var(--accent); }
.job-description { font-size: 0.95rem; color: var(--ink); margin: 14px 0; max-width: var(--measure); }
.job ul li { font-size: 0.95rem; color: var(--ink); padding: 11px 0; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.early-career-companies { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.skills-grid { display: grid; grid-template-columns: 120px 1fr; gap: 0 24px; }
.skills-label { font-size: 0.5875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.skills-value { font-size: 0.95rem; color: var(--ink); padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.edu-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; font-size: 0.95rem; color: var(--ink); }
.writing-line { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- 20. ACCESSIBILITY ---------- */
a:focus-visible, button:focus-visible, .rcpt:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .rcpt-mark, .rcpt-mark.is-pending { opacity: 1 !important; }
}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1099px) {
    .doc-article .narrow, .doc-article .section-label { margin-left: 0; }
}
@media (max-width: 900px) {
    .case-study-card { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
    .card-image, .card-eyebrow, .card-title, .card-description { grid-column: 1; grid-row: auto; }
    .card-image { margin-bottom: 8px; }
    .about-grid, .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .decision-grid, .feature-grid, .arch-features, .outcomes-grid, .grid-two, .comparison { grid-template-columns: 1fr; }
    .decision-challenge { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; padding-bottom: 28px; }
    .role-grid, .flow-steps, .hero-screens { grid-template-columns: 1fr 1fr; }
    .platform-comparison { grid-template-columns: 1fr; }
    .platform-arrow { transform: rotate(90deg); justify-self: center; }
    .before-after { grid-template-columns: 1fr; }
    .ba-panel, .ba-panel.after { padding: 30px 0; border-left: 0; }
    .ba-panel.after { border-top: 1px solid var(--rule); }
    .tension-bottom { grid-template-columns: 1fr; }
    section, .doc-index section { padding: 84px 0; }
}
@media (max-width: 640px) {
    :root { --gutter: 24px; }
    html { font-size: 17px; }
    .nav { padding: 20px 0; }
    .nav-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .nav-links { gap: 18px; }
    .hero { padding: 56px 0 56px; }
    .hero h1 { max-width: none; }
    section, .doc-index section { padding: 68px 0; }
    .outcome-item, .meta-item, .hero-meta-item { grid-template-columns: 1fr; row-gap: 4px; }
    .outcome-label, .meta-label, .outcome-value, .meta-value, .hero-meta-value { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
    .outcome-label, .meta-label, .hero-meta-item { line-height: 1.6; }
    .role-grid, .flow-steps, .hero-screens { grid-template-columns: 1fr; }
    .skills-grid { grid-template-columns: 1fr; gap: 0; }
    .skills-value { border-top: 0; padding-top: 6px; }
    .decision-header, .decision-body { padding-left: 22px; padding-right: 22px; }
    .image-full img, .comparison-panel img, .hero-screen img { padding: 12px; }
    .testimonial-quote { font-size: 1.5rem; text-indent: -0.3em; max-width: none; }
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .doc-article .narrow > p + p { text-indent: 1.2em; }
    .rcpt-tip { max-width: 26ch; }
}

/* ============================================================
   16. MASTHEAD AND THE ARTICLE COLUMN (R-62)
   ------------------------------------------------------------
   One grid governs the whole article. The masthead declares it —
   eyebrow and title at 45%, standfirst at 55%, both at the same
   size — and every section below inherits it: body copy in the
   right column, left column permanently empty. That empty column
   is the article's margin, and it is where the section numerals
   finally have somewhere to live.
   Replaces the 18% indent (R-55), which moved text without
   giving the page a structure.
   ============================================================ */

:root {
    --col-left:  45%;
    --col-right: 55%;
    --col-inset: 56px;   /* gutter cut INTO the left column, so the 45/55 line stays exact */
}

/* A masthead with a full-bleed rule needs more sheet than a text page does.
   The article runs wider than the indexes; the body measure is still governed
   by the 55% column, which lands at 60-63ch — inside the ruled 60-66 (R-46). */
.doc-article .container { max-width: 1280px; }

/* ---- 16.1 The masthead — the ONLY place the 45/55 split applies (R-72) ---- */
.masthead { padding: 76px 0 0; }

.masthead-head {
    display: grid;
    grid-template-columns: var(--col-left) var(--col-right);
    align-items: start;
    padding-bottom: 72px;
}

.masthead-lede { grid-column: 1; padding-right: var(--col-inset); }
.masthead-standfirst { grid-column: 2; }

.masthead-eyebrow {
    font-family: var(--mono);
    font-size: 0.5625rem; letter-spacing: 0.19em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 26px;
    display: block;
    text-wrap: balance;
}

/* Title and standfirst are the SAME SIZE (R-62). They are told apart by
   position and by leading — a title sets tight, a paragraph does not. */
.masthead-title,
.masthead-standfirst {
    font-family: var(--serif);
    font-weight: 400;
    font-variation-settings: "opsz" 64;
    font-size: clamp(1.7rem, 2.35vw, 2.25rem);
    letter-spacing: -0.012em;
    color: var(--ink);
    max-width: none;
    margin: 0;
}
.masthead-title     { line-height: 1.06; text-wrap: balance; }
.masthead-standfirst { line-height: 1.24; text-wrap: pretty; }

/* ---- 16.2 The 2px rule — full-bleed, edge to edge ---- */
.masthead-rule {
    border: 0;
    height: 2px;
    background: var(--ink);
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---- 16.3 The four-column metadata strip ----
   An editorial table, not a card (R-48): no fill, no border, no chrome.
   The 2px rule above opens it; a hairline closes it. No vertical rules
   between columns — R-54 permits horizontal hairlines only. */
.masthead-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--col-inset);
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--rule);
    margin: 0;
}

.strip-cell { min-width: 0; }

.strip-label {
    font-family: var(--mono);
    font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 9px;
}

/* Values are prose, so they are serif (R-46 §4.2 / R-48). A value that is a
   figure or a date takes mono instead — that is what .is-figure marks. */
.strip-value {
    font-family: var(--serif);
    font-variation-settings: "opsz" 16;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    text-wrap: pretty;
}
.strip-value.is-figure {
    font-family: var(--mono);
    font-variation-settings: normal;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
}

/* ---- 16.4 The article body: ONE SPINE (R-72) ----
   R-72 retracts the article-wide 45/55 grid. It was producing half-empty pages
   and putting consecutive elements in different columns with no spine.

   The 45/55 split now lives in the masthead ONLY and ends at the 2px rule.
   Below the rule the article is a single left-aligned column at the established
   measure. Prose, lists, metadata tables, section headers and plates all share
   ONE left edge — the container's content edge, which is also the masthead
   title's left edge and the metadata strip's. No element sits outside it.

   The generous fixed left margin is the page margin plus --gutter, so the spine
   holds at every width without a proportional void opening up beside it.

   The section numeral is the single permitted exception: it hangs in that
   margin, per the reference (§4.5). See .section-label span below. */
.doc-article section > .container > * { margin-left: 0; }
.doc-article .narrow { max-width: var(--measure); margin-left: 0; margin-right: auto; }

/* ---- 16.5 Mobile collapse (approved with R-62) ----
   Two-column strip. The empty column collapses. The masthead stacks and the
   standfirst holds title size. The rule stays full-bleed.

   The breakpoint is 1099px, not a phone width, so it meets §16.4 exactly: the
   masthead and the body switch to one column at the SAME width. Below 1100 the
   55% column can no longer hold the ruled 60-66ch measure, so both collapse
   together rather than leaving a band where the masthead is split and the body
   is not. */
@media (max-width: 1099px) {
    .masthead { padding-top: 64px; }

    .masthead-head {
        display: block;
        padding-bottom: 52px;
    }
    .masthead-lede { padding-right: 0; }
    .masthead-standfirst { margin-top: 30px; }

    .masthead-title,
    .masthead-standfirst { font-size: clamp(1.55rem, 6.4vw, 1.9rem); }

    .masthead-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 22px;
        column-gap: 32px;
    }
}