/* ============================================================
   megancasebier.com — Direction E, "plain statements" (R-118, R-120)
   Every page with body.dir-e loads THIS file and not site.css. Newsreader
   only. No mono labels, receipt marks, numbered rows, metric strips, accent
   word, boxed hairline grids or slogan CTAs (R-118(a)).
   Figures go in <span class="is-figure"> so tools/check-figures.py reads them
   (R-118(j)); the class has no visual style here.

   CONTRACT for wave 2 (case-study rebuilds). Pages own cs-<slug>.css for
   anything page-specific; they do not edit this file.
     .e-wrap            1240px container, 32px gutters
     .e-header/.e-nav   site header (name + Work, About, Résumé)
     .e-footer          site footer
     .e-article         article page wrapper (on <main>)
     .e-masthead        article head: .e-meta, h1, .e-standfirst, .e-factlist
     .e-factlist        quiet <dl> of Role / Timeline / Team / Status (no box)
     .e-block           a section of an article (vertical rhythm only)
     .e-prose           reading column, 680px, spaced paragraphs; h2/h3 inside
     .e-figure          white media box + italic figcaption; .e-figure--wide
                        breaks out to the full 1240 container
     .e-figure-pair     two .e-figure side by side, one column under 720px
     .e-table           editorial table: light row rules only, no boxes
     .e-timeline        <ol> of <li><time>date</time><p>…</p></li>, serif dates
     .e-pullquote       <blockquote> with optional <footer> attribution
     .e-facts           <ul> of full-sentence facts; replaces metric strips
     .e-series          prev/next links at an article's end
     .e-meta            ink-soft serif meta line
     .e-more            underlined link with a trailing arrow
   ============================================================ */

/* ---------- 0. BASE (carried over from site.css so dir-e pages stand alone) ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { transition: color .2s ease, border-color .2s ease; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
ul, ol { list-style: none; }
.pp-clip { display: block; width: 100%; height: auto; background: #F1EFE1; box-shadow: 0 0 0 1px rgba(121, 110, 96, 0.16); }
.dir-e .is-figure { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ---------- 25. DIRECTION E — "plain statements" (R-118) ----------
   Homepage first; other pages move over in later PRs and keep Editorial
   Instrument until then. Newsreader only: no mono labels, receipt marks,
   numbered rows, metric strips or accent word (R-118(a)). Tokens from
   private/homepage-handoff/homepage-spec.md. */
.dir-e {
    --e-ground: #F4F3EF; --e-ink: #1A1A18; --e-soft: #6B6860; --e-body-soft: #55524B;
    --e-rule: #DEDCD5; --e-underline: #B9B6AD; --e-surface: #FFFFFF;
    --e-shadow: 0 1px 0 #DEDCD5, 0 24px 60px -30px rgba(26, 26, 24, 0.35);
    /* R-127: the type scale, canon. Seven sizes, one job each; a computed size
       outside it is a defect. Bold is 600 only; h4 is retired. */
    --t-display: clamp(44px, 5.6vw, 80px);  /* page title          300 / 1.02 */
    --t-feature: clamp(36px, 4.4vw, 58px);  /* homepage titles     300 / 1.06, homepage only */
    --t-h2:      clamp(32px, 3.2vw, 44px);  /* section heading     300 / 1.1 */
    --t-h3:      clamp(24px, 2.2vw, 28px);  /* subhead             400 / 1.2 */
    --t-pull:    clamp(26px, 2.6vw, 32px);  /* pull / turn / stat  300 / 1.25 */
    --t-stand:   clamp(22px, 2.2vw, 28px);  /* standfirst          300 / 1.35 */
    --t-body:    20px;                      /* body                400 / 1.55 */
    --t-small:   17px;                      /* tables, lists, tiles 400 / 1.5 */
    --t-label:   15px;                      /* labels, meta, captions 400 / 1.5, ink-soft */
    background: var(--e-ground); color: var(--e-ink);
    font-family: "Newsreader", Georgia, serif; font-variation-settings: normal; font-optical-sizing: auto;
    font-size: 17px; line-height: 1.5;
}
.dir-e p { max-width: none; margin: 0; color: inherit; text-wrap: pretty; }
.dir-e a { color: var(--e-ink); text-decoration: none; }
.dir-e a:hover { color: var(--e-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dir-e h1, .dir-e h2, .dir-e h3 { font-family: inherit; color: var(--e-ink); font-variation-settings: normal; margin: 0; text-wrap: balance; }
.dir-e h1 { font-size: var(--t-display); line-height: 1.02; font-weight: 300; letter-spacing: -0.03em; max-width: 1100px; }
.dir-e h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 300; letter-spacing: -0.015em; margin: 0; }
/* Homepage feature titles keep their size on --t-feature (R-127, homepage only). */
.dir-e.is-home h2 { font-size: var(--t-feature); line-height: 1.06; letter-spacing: -0.02em; }
.dir-e section { padding-top: 0; padding-bottom: 0; }
.dir-e img, .dir-e video { display: block; }
.dir-e ::selection { background: var(--e-ink); color: var(--e-ground); }

.e-wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
.e-header { padding-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--t-small); }
.e-nav { display: flex; flex-wrap: wrap; gap: 32px; }
.dir-e .e-nav a { color: var(--e-soft); }

.dir-e .e-hero { padding-top: 120px; }
.e-lede { font-size: 19px; color: var(--e-soft) !important; max-width: 560px !important; margin-bottom: 28px !important; }
.e-sub { margin-top: 32px !important; max-width: 760px !important; font-size: var(--t-stand); line-height: 1.35; font-weight: 300; }

.dir-e .e-prototype { padding-top: 72px; }
.e-media { border-radius: 3px; background: var(--e-surface); box-shadow: var(--e-shadow); }
.e-hero-video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.e-row { display: flex; flex-wrap: wrap; gap: 24px 64px; margin-top: 32px; }
.e-row-narrow { flex: 1 1 280px; }
.e-row-wide { flex: 2 1 480px; max-width: 640px !important; }
.e-caption { font-size: 15px; font-style: italic; color: var(--e-soft) !important; }
.e-body { font-size: var(--t-body); line-height: 1.55; }

.e-section, .dir-e section.e-section { padding-top: 200px; }
/* .dir-e prefix so a meta line inside .e-prose isn't enlarged by .e-prose p. */
.dir-e .e-meta { font-size: var(--t-label); line-height: 1.5; color: var(--e-soft) !important; margin-bottom: 16px !important; }
.e-copy { font-size: var(--t-body); line-height: 1.55; margin-top: 24px !important; }
.e-more { font-size: var(--t-small); margin-top: 24px !important; }
.dir-e .e-more a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); display: inline-block; padding: 10px 0; margin: -10px 0; }
.dir-e .e-more a::after { content: " \2192"; }
.e-more-gap { margin-top: 56px !important; }

.e-split { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.e-split-text { flex: 1 1 400px; }
.e-split-media { flex: 1 1 500px; min-width: 0; margin: 0; }

/* The Part Two figure: HTML/CSS, not an image (no audit needed). */
.e-chart { box-sizing: content-box; background: var(--e-surface); border-radius: 3px; padding: 36px 32px 28px; box-shadow: 0 1px 0 var(--e-rule); }
.e-chart-title { font-size: var(--t-small); }
.e-chart-row { margin-top: 32px; }
.e-chart-row + .e-chart-row { margin-top: 40px; }
.e-chart-head { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-label); color: var(--e-soft); }
.e-chart-track { position: relative; height: 16px; margin-top: 10px; }
.e-chart-line { position: absolute; left: 0; top: 7px; height: 2px; background: #CFCCC3; }
.e-chart-bar { position: absolute; top: 3px; height: 10px; background: var(--e-ink); border-radius: 1px; }
.e-chart-note { margin-top: 10px !important; font-size: var(--t-label); line-height: 1.35; }
.e-chart-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid #ECEAE4; display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-label); color: var(--e-soft); }

.e-intro { display: flex; flex-wrap: wrap; gap: 24px 80px; align-items: flex-end; }
.e-intro-head { flex: 1 1 400px; }
.e-intro-copy { flex: 1 1 480px; margin-top: 0 !important; }

.e-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 64px 32px; margin-top: 64px; }
.e-tile { margin: 0; }
.e-tile-media { aspect-ratio: 4 / 3; background: var(--e-surface); border-radius: 3px; display: flex; align-items: center; overflow: hidden; box-sizing: border-box; }
.e-tile-wide img { max-width: none; height: auto; }
.e-tile-contain { justify-content: center; padding: 20px; }
.e-tile-contain img { max-width: 100%; max-height: 100%; object-fit: contain; }
.e-tile-pad { padding: 20px; }
.e-tile-pad img { width: 100%; height: auto; }
.e-tile-cover { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--e-surface); }
/* Homepage tile subheads: --t-h3 at its small end (R-127). */
.dir-e .e-tile h3 { margin-top: 20px; font-size: 24px; font-weight: 400; line-height: 1.2; }
.e-tile p { margin-top: 8px !important; font-size: var(--t-small); line-height: 1.5; color: var(--e-body-soft) !important; }

.e-solo { max-width: 640px; }

.e-feature { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: center; margin-top: 64px; }
.e-feature-media { flex: 3 1 560px; min-width: 0; margin: 0; }
.e-crop-43 { aspect-ratio: 4 / 3; overflow: hidden; }
.e-crop-43 img { width: 100%; height: auto; }
.e-feature-media .e-caption { margin-top: 16px !important; }
.e-feature-text { flex: 2 1 340px; }
.dir-e .e-feature-text h3 { font-size: var(--t-pull); line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; }
.e-feature-text p { font-size: var(--t-body); line-height: 1.55; margin-top: 20px !important; }
.e-feature-text .e-more { font-size: var(--t-small); margin-top: 28px !important; }

.dir-e .e-about { padding-top: 240px; display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-end; }
.e-headshot { width: 220px; height: 268px; object-fit: cover; border-radius: 3px; }
.e-about-text { flex: 1 1 520px; max-width: 760px; }
.e-about-text .e-copy { margin-top: 28px !important; }

.e-footer { padding-top: 160px; padding-bottom: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: var(--t-label); color: var(--e-soft); }
.dir-e .e-footer a { color: var(--e-soft); }
.e-footer-links { display: flex; gap: 28px; }

/* Touch targets (spec a11y): every link at least 44px tall on small screens. */
@media (max-width: 640px) {
    .e-nav a, .e-footer a { display: inline-block; padding: 12px 0; }
    .e-section, .dir-e section.e-section { padding-top: 140px; }
    .dir-e .e-about { padding-top: 160px; }
}
.dir-e a:focus-visible, .dir-e video:focus-visible { outline: 2px solid var(--e-ink); outline-offset: 3px; }

/* ---------- 26. INDEX PAGES: /work, /about, /resume (R-120(c)) ---------- */
.dir-e .e-pagehead { padding-top: 120px; }
.dir-e .e-pagehead h1 { font-size: var(--t-display); line-height: 1.02; }
.e-pagehead .e-sub { max-width: 760px !important; }

/* /work — case studies as plain rows, the homepage's tile language */
.e-rows { margin-top: 120px; }
.e-rows > .e-meta { margin-bottom: 0 !important; padding-bottom: 20px; }
.e-workrow { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--e-rule); }
.e-workrow:last-child { border-bottom: 1px solid var(--e-rule); }
.dir-e a.e-workrow:hover { text-decoration: none; }
.dir-e a.e-workrow:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }
.e-workrow-media { flex: 1 1 420px; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--e-surface); box-shadow: var(--e-shadow); }
.e-workrow-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.e-workrow-text { flex: 1 1 420px; }
.dir-e .e-workrow-text h2 { font-size: var(--t-h2); line-height: 1.1; }
.e-workrow-text .e-copy { color: var(--e-body-soft) !important; font-size: var(--t-body); margin-top: 16px !important; }
.e-workrow--text .e-workrow-text { flex-basis: 100%; max-width: 760px; }

/* /about */
.e-abouthead { display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-end; }
.e-abouthead .e-headshot { flex: none; }
.e-abouthead-text { flex: 1 1 520px; }
.e-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px 64px; margin-top: 48px; }
.dir-e .e-cols h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; }
.e-cols p { margin-top: 10px !important; font-size: var(--t-body); line-height: 1.55; color: var(--e-body-soft) !important; }
.e-plainlist { margin-top: 32px; max-width: 760px; }
.e-plainlist li { font-size: var(--t-body); line-height: 1.5; padding: 14px 0; border-top: 1px solid var(--e-rule); }
.e-plainlist li:last-child { border-bottom: 1px solid var(--e-rule); }

/* ---------- 27. ARTICLE PRIMITIVES (R-120(b) contract) ---------- */
.dir-e .e-masthead { padding-top: 120px; }
.e-masthead .e-meta { margin-bottom: 20px !important; }
.dir-e .e-masthead h1 { font-size: var(--t-display); line-height: 1.02; }
.e-standfirst { margin-top: 32px !important; max-width: 820px !important; font-size: var(--t-stand); line-height: 1.35; font-weight: 300; }
.e-factlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px 48px; margin-top: 64px; max-width: 1100px; }
.e-factlist dt { font-size: var(--t-label); color: var(--e-soft); }
.e-factlist dd { margin: 4px 0 0; font-size: var(--t-small); line-height: 1.45; }

.dir-e .e-block { padding-top: 160px; }
.e-prose { max-width: 680px; }
.e-prose > * + * { margin-top: 22px !important; }
.e-prose p { font-size: var(--t-body); line-height: 1.55; }
.dir-e .e-prose h2 { margin-bottom: 8px; }
/* R-127: a 44px section heading sits on one line where it fits, so it may run past
   the 680px reading column (never past the 1176px container). */
.dir-e.is-case .e-prose > h2 { width: min(1000px, calc(100vw - 64px)); max-width: none; }
.dir-e .e-prose h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 400; letter-spacing: -0.005em; margin-top: 56px !important; }
.e-prose ul:not([class]) li, .e-prose ol:not([class]) li { font-size: var(--t-body); line-height: 1.55; padding: 10px 0; border-top: 1px solid var(--e-rule); }
.dir-e .e-prose p a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }

.e-figure { margin: 72px 0 0; max-width: 1000px; }
.e-figure--wide { max-width: none; }
.e-figure-media { border-radius: 3px; background: var(--e-surface); box-shadow: var(--e-shadow); overflow: hidden; }
.e-figure-media > img, .e-figure-media > video { width: 100%; height: auto; }
.e-figure figcaption { margin-top: 14px; font-size: var(--t-label); line-height: 1.5; font-style: italic; color: var(--e-soft); max-width: 680px; }
.e-figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 72px; }
.e-figure-pair .e-figure { margin-top: 0; }

.e-table { margin-top: 56px; max-width: 1000px; overflow-x: auto; }
.e-table table { width: 100%; border-collapse: collapse; }
.e-table th { text-align: left; vertical-align: bottom; font-weight: 400; font-size: var(--t-label); color: var(--e-soft); padding: 0 24px 12px 0; border-bottom: 1px solid var(--e-rule); }
.e-table td, .e-table tbody th { vertical-align: top; text-align: left; font-size: var(--t-small); line-height: 1.5; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--e-rule); }
.e-table tbody th { color: var(--e-ink); font-weight: 400; }

.e-timeline { margin-top: 40px; max-width: 680px; }
.e-timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 14px 0; border-top: 1px solid var(--e-rule); }
.e-timeline li:last-child { border-bottom: 1px solid var(--e-rule); }
.e-timeline time { font-size: var(--t-small); color: var(--e-soft); }
.e-timeline p { font-size: var(--t-body); line-height: 1.55; }

.e-pullquote { margin: 64px 0 0; max-width: 820px; }
.e-pullquote p { font-size: var(--t-pull); line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; }
.e-pullquote footer { margin-top: 16px; font-size: var(--t-label); color: var(--e-soft); }

.e-facts { margin-top: 40px; max-width: 760px; }
.e-facts li { font-size: var(--t-body); line-height: 1.55; padding: 14px 0; border-top: 1px solid var(--e-rule); }
.e-facts li:last-child { border-bottom: 1px solid var(--e-rule); }

.e-series { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 48px; margin-top: 120px; padding-top: 28px; border-top: 1px solid var(--e-rule); font-size: var(--t-small); }
.dir-e .e-series a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }

/* ---------- 28. RÉSUMÉ (R-120(c)) ---------- */
.e-resume { max-width: 880px; }
.dir-e .e-resume .e-pagehead { padding-top: 96px; }
.e-contact { margin-top: 20px !important; font-size: var(--t-small); color: var(--e-soft) !important; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.dir-e .e-contact a { color: var(--e-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }
.e-resume-summary { margin-top: 48px !important; font-size: var(--t-body); line-height: 1.55; }
.e-resume .e-facts { margin-top: 32px; }
.e-resume .e-facts li { font-size: var(--t-small); line-height: 1.5; padding: 11px 0; }
.e-rsection { margin-top: 72px; }
.dir-e .e-rsection > h2 { font-size: var(--t-h2); line-height: 1.1; padding-bottom: 14px; border-bottom: 1px solid var(--e-rule); }
.e-job { margin-top: 32px; }
.e-job + .e-job { margin-top: 48px; }
.e-jobhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; }
.dir-e .e-jobhead h3 { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; }
.e-aside { font-size: var(--t-label); color: var(--e-soft); }
.e-role { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 8px; font-size: var(--t-small); }
.e-companies { margin-top: 10px !important; font-size: var(--t-label); line-height: 1.6; color: var(--e-soft) !important; }
.e-jobdesc { margin-top: 16px !important; font-size: var(--t-small); line-height: 1.55; }
.e-job ul { margin-top: 16px; }
.e-job li { font-size: var(--t-small); line-height: 1.5; padding: 10px 0; border-top: 1px solid var(--e-rule); }
.e-skills { display: grid; grid-template-columns: 140px 1fr; gap: 0 24px; margin-top: 16px; }
.e-skills dt, .e-skills dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--e-rule); font-size: var(--t-small); line-height: 1.5; }
.e-skills dt { color: var(--e-soft); }
.e-edu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; margin-top: 16px; font-size: var(--t-small); }
.e-writing { margin-top: 16px !important; font-size: var(--t-small); color: var(--e-body-soft) !important; }

/* ---------- 29. RESPONSIVE (articles and index pages) ---------- */
@media (max-width: 720px) {
    .e-figure-pair { grid-template-columns: 1fr; }
    .e-timeline li { grid-template-columns: 1fr; gap: 4px; }
    .e-skills { grid-template-columns: 1fr; }
    .e-skills dd { border-top: 0; padding-top: 0; }
    .dir-e .e-pagehead, .dir-e .e-masthead { padding-top: 72px; }
    .dir-e .e-block { padding-top: 112px; }
    .e-rows { margin-top: 72px; }
    .e-workrow { padding: 40px 0; }
}

/* ---------- 30. PRINT — the résumé PDF is printed from /resume (R-115(b)) ---------- */
@media print {
    @page { margin: 10mm 12mm; }
    .dir-e { background: #fff; }
    .e-header, .e-footer, .no-print { display: none !important; }
    .e-wrap { padding: 0; max-width: none; }
    .e-resume { max-width: none; }
    .dir-e .e-resume .e-pagehead { padding-top: 0; }
    /* letter-spacing 0: negative tracking merged "Megan Casebier" into one word
       in the PDF's text layer, which is what an ATS reads. */
    .dir-e .e-pagehead h1, .dir-e h2, .dir-e h3 { letter-spacing: 0; }
    .dir-e .e-pagehead h1 { font-size: 30px; }
    .e-pagehead .e-sub { font-size: 15px; margin-top: 8px !important; }
    .e-contact, .e-resume-summary, .e-jobdesc, .e-job li, .e-skills dt, .e-skills dd, .e-edu, .e-writing, .e-role { font-size: 11.5px; }
    .e-companies, .e-aside { font-size: 10.5px; }
    .e-contact { margin-top: 6px !important; }
    .e-resume-summary { margin-top: 14px !important; }
    .e-resume .e-facts { margin-top: 10px; max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
    .e-resume .e-facts li { padding: 5px 0; font-size: 11.5px; }
    .e-rsection { margin-top: 18px; }
    .dir-e .e-rsection > h2 { font-size: 17px; padding-bottom: 6px; }
    .e-job { margin-top: 10px; }
    .e-job + .e-job { margin-top: 14px; }
    .dir-e .e-jobhead h3 { font-size: 14px; }
    .e-role { margin-top: 3px; }
    .e-jobdesc, .e-job ul { margin-top: 6px !important; }
    .e-job li { padding: 5px 0; }
    .e-skills { margin-top: 6px; }
    .e-skills dt, .e-skills dd { padding: 5px 0; }
    .dir-e a { color: #1A1A18; }
    .e-job li, .e-role, .e-edu, .e-skills > * { break-inside: avoid; }
    .e-rsection > h2 { break-after: avoid; }
}

/* ---------- Homepage hero typography (R-125) ----------
   Supersedes R-118(a) for the hero kicker only: a second typographic voice
   (mono, uppercase, letterspaced) so hierarchy has an axis besides size.
   The headline's hand-set breaks hold only where the first line fits the 1176px
   column: measured at 1427px wide at 96px, so the desktop cap is 78px (1156px).
   Below 1100px the breaks are hidden and the headline wraps naturally. */
.dir-e .e-hero { padding-top: 96px; }
.e-kicker {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 14.5px; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.6;
    color: var(--e-soft) !important; max-width: none !important; margin: 0 0 36px !important;
}
.dir-e h1.e-hero-h1 {
    font-size: clamp(44px, 16.4vw, 64px); line-height: 1.04; max-width: none; text-wrap: wrap;
}
.dir-e h1.e-hero-h1 em { font-style: italic; }
.e-br { display: none; }
@media (min-width: 1100px) {
    .dir-e h1.e-hero-h1 { font-size: clamp(64px, 5.4vw, 78px); }
    .e-br { display: inline; }
}
.dir-e .e-hero-sub { margin-top: 44px !important; max-width: 620px !important; font-size: 22px; line-height: 1.45; font-weight: 300; }
.dir-e .e-hero-sub strong { font-weight: 500; color: var(--e-ink); }
/* R-126: the hero caption links the prototype to its case study. */
.dir-e .e-caption-link { color: var(--e-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--e-underline); }
.dir-e .e-caption-link:hover { color: var(--e-ink); }