/* ════════════════════════════════════════════════════════════════
EDUCATION SECTION — museum-editorial layer
Scoped entirely to `.edu-root` (applied on ) so nothing here
can leak into or be overridden by other pages' styles. Reuses the
design tokens already defined in assets/style.css (--olive,
--warm-bg, --gray-*, --radius, --shadow, --d-*, etc.) — no tokens
are redefined except the dark-mode --d-* block below, which mirrors
the exact values already used by body.home-dark in style.css.
════════════════════════════════════════════════════════════════ */
.edu-root {
background: var(--warm-bg);
color: var(--gray-800);
}
.edu-root .edu-container {
max-width: 1080px;
margin: 0 auto;
padding: 0 2rem;
}
.edu-root {
scroll-behavior: smooth;
}
.edu-toc {
position: fixed;
z-index: 20;
right: 1rem;
top: 50%;
transform: translateY(-50%);
display: grid;
gap: .45rem;
}
.edu-toc a {
display: block;
width: 9rem;
padding: .45rem .6rem;
border-left: 3px solid var(--olive);
background: color-mix(in srgb, var(--warm-bg) 88%, white);
color: var(--gray-700);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
}
.edu-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .45s ease, transform .45s ease;
}
.edu-reveal.is-visible {
opacity: 1;
transform: none;
}
/* ── Typography ── */
.edu-root h1,
.edu-root h2,
.edu-root h3,
.edu-root .edu-serif {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: var(--navy);
line-height: 1.2;
}
.edu-root p,
.edu-root li {
font-family: 'IBM Plex Sans', sans-serif;
line-height: 1.75;
}
.edu-root .edu-measure {
max-width: 68ch;
}
/* ── Hero ── */
.edu-hero {
padding: 6rem 2rem 4rem;
border-bottom: 1px solid var(--gray-200);
}
.edu-hero-badge {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--olive-dark);
background: rgba(116, 138, 40, .1);
border: 1px solid rgba(116, 138, 40, .25);
border-radius: 999px;
padding: .3rem .85rem;
margin-bottom: 1.25rem;
}
.edu-hero h1 {
font-size: clamp(2.1rem, 4vw, 3.2rem);
margin-bottom: 1.1rem;
}
.edu-hero p {
font-size: 1.1rem;
color: var(--gray-600);
margin-bottom: 1.5rem;
}
.edu-disclaimer {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .82rem;
font-style: italic;
color: var(--gray-500);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: .55rem .9rem;
}
/* ── Chapter / section rhythm ── */
.edu-section {
padding: 4rem 2rem;
}
.edu-section + .edu-section {
border-top: 1px solid var(--gray-200);
}
.edu-section-label {
font-size: .78rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--olive-dark);
margin-bottom: .75rem;
}
/* ── Featured / pillar card ── */
.edu-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.edu-card {
display: block;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 1.75rem;
text-decoration: none;
color: inherit;
box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.edu-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--olive-light);
}
.edu-card-eyebrow {
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--olive-dark);
margin-bottom: .6rem;
}
.edu-card h3 {
font-size: 1.4rem;
margin-bottom: .6rem;
}
.edu-card p {
color: var(--gray-600);
font-size: .95rem;
margin-bottom: 0;
}
.edu-hero-art {
margin: 2rem 0 0;
max-width: 520px;
}
.edu-hero-art img,
.edu-figure img,
.edu-static-strip img {
display: block;
width: 100%;
height: auto;
}
.edu-scroll-cue {
display: inline-flex;
margin-top: 1rem;
color: var(--olive-dark);
font-weight: 700;
text-decoration: none;
}
.edu-figure,
.edu-interactive,
.edu-callout,
.edu-recap {
margin: 2rem 0;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 1.25rem;
box-shadow: var(--shadow);
}
.edu-figure-pair,
.edu-static-strip,
.edu-interactive-fallback {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.edu-figure figcaption,
.edu-static-strip figcaption,
.edu-interactive-caption {
grid-column: 1 / -1;
color: var(--gray-500);
font-size: .85rem;
line-height: 1.55;
margin-top: .75rem;
}
.edu-callout {
border-left: 4px solid var(--olive);
}
.edu-recap {
display: grid;
gap: .7rem;
}
.edu-tool-controls {
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
margin-bottom: 1rem;
}
.edu-tool-button {
border: 1px solid var(--gray-300);
background: var(--white);
color: var(--navy);
border-radius: 8px;
padding: .55rem .8rem;
font: 700 .85rem 'IBM Plex Sans', sans-serif;
cursor: pointer;
}
.edu-tool-button:focus-visible,
.edu-tool-range:focus-visible,
.edu-toc a:focus-visible {
outline: 2px solid var(--olive);
outline-offset: 3px;
}
.edu-tool-range {
min-width: 180px;
}
.edu-tool-stage,
.edu-overlay-stack,
.edu-dissolve {
position: relative;
}
.edu-tool-stage {
min-height: 360px;
border: 1px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--warm-bg) 70%, var(--white));
}
.edu-tool-stage img {
display: block;
width: 100%;
height: 100%;
max-height: 520px;
object-fit: contain;
}
.edu-overlay-stack img + img,
.edu-dissolve img + img {
position: absolute;
inset: 0;
}
.edu-stage-image {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .2s ease;
}
.edu-stage-image.is-active {
opacity: 1;
}
/* ── Evidence-meter chip ──
Usage:
initEvidenceMeter() (education.js) wires the click/keyboard popover. */
.edu-evi {
--evi-color: var(--gray-400);
display: inline-flex;
align-items: center;
gap: .35rem;
font-family: 'IBM Plex Sans', sans-serif;
font-size: .74rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
line-height: 1;
color: var(--evi-color);
background: color-mix(in srgb, var(--evi-color) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--evi-color) 45%, transparent);
border-radius: 999px;
padding: .3rem .7rem;
cursor: pointer;
position: relative;
font: inherit;
}
.edu-evi[data-grade="STRONG"] { --evi-color: var(--olive); }
.edu-evi[data-grade="MODERATE"] { --evi-color: #0891b2; }
.edu-evi[data-grade="CONTESTED"]{ --evi-color: #f97316; }
.edu-evi[data-grade="MYTH"] { --evi-color: #b91c1c; }
.edu-evi:focus-visible {
outline: 2px solid var(--evi-color);
outline-offset: 2px;
}
.edu-evi-dot {
width: .5rem;
height: .5rem;
border-radius: 50%;
background: var(--evi-color);
flex-shrink: 0;
}
/* Popover injected by education.js next to the chip */
.edu-evi-popover {
position: absolute;
z-index: 40;
top: calc(100% + .5rem);
left: 0;
width: min(320px, 80vw);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: .9rem 1rem;
text-align: left;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
color: var(--gray-800);
font-size: .85rem;
line-height: 1.5;
}
.edu-evi-popover-grade {
display: block;
font-weight: 800;
font-size: .72rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--evi-color);
margin-bottom: .4rem;
}
.edu-evi-popover-rationale {
margin-bottom: .5rem;
color: var(--gray-700);
}
.edu-evi-popover-cite {
font-size: .76rem;
font-style: italic;
color: var(--gray-500);
border-top: 1px solid var(--gray-100);
padding-top: .5rem;
}
/* ── Dark mode ──
Same mechanism as the rest of the site would use if/when a manual
theme toggle exists (`:root[data-theme="dark"]`), plus automatic
OS-level preference (`prefers-color-scheme`). The --d-* values are
copied verbatim from the --d-* tokens already defined in
assets/style.css under `body.home-dark` — not redefined, mirrored. */
@media (prefers-color-scheme: dark) {
.edu-root {
--d-bg: #0d130a;
--d-card: rgba(255,255,255,.035);
--d-card-hover: rgba(168,192,96,.07);
--d-border: rgba(168,192,96,.16);
--d-text: rgba(255,255,255,.84);
--d-dim: rgba(255,255,255,.55);
background: var(--d-bg);
color: var(--d-text);
}
.edu-root h1, .edu-root h2, .edu-root h3, .edu-root .edu-serif { color: #fff; }
.edu-root p, .edu-root li { color: var(--d-dim); }
.edu-root .edu-hero, .edu-root .edu-section + .edu-section { border-color: var(--d-border); }
.edu-root .edu-disclaimer { background: var(--d-card); border-color: var(--d-border); color: var(--d-dim); }
.edu-root .edu-card { background: var(--d-card); border-color: var(--d-border); }
.edu-root .edu-card:hover { background: var(--d-card-hover); border-color: var(--olive-light); }
.edu-root .edu-card p { color: var(--d-dim); }
.edu-root .edu-figure, .edu-root .edu-interactive, .edu-root .edu-callout, .edu-root .edu-recap, .edu-root .edu-tool-button { background: var(--d-card); border-color: var(--d-border); }
.edu-root .edu-tool-stage { background: var(--d-bg); border-color: var(--d-border); }
.edu-root .edu-figure figcaption, .edu-root .edu-static-strip figcaption, .edu-root .edu-interactive-caption { color: var(--d-dim); }
.edu-root .edu-toc a { background: var(--d-card); color: var(--d-text); }
.edu-root .edu-evi-popover { background: var(--d-card); border-color: var(--d-border); color: var(--d-text); }
.edu-root .edu-evi-popover-rationale { color: var(--d-dim); }
.edu-root .edu-evi-popover-cite { color: var(--d-dim); border-top-color: var(--d-border); }
}
:root[data-theme="dark"] .edu-root {
--d-bg: #0d130a;
--d-card: rgba(255,255,255,.035);
--d-card-hover: rgba(168,192,96,.07);
--d-border: rgba(168,192,96,.16);
--d-text: rgba(255,255,255,.84);
--d-dim: rgba(255,255,255,.55);
background: var(--d-bg);
color: var(--d-text);
}
:root[data-theme="dark"] .edu-root h1,
:root[data-theme="dark"] .edu-root h2,
:root[data-theme="dark"] .edu-root h3,
:root[data-theme="dark"] .edu-root .edu-serif { color: #fff; }
:root[data-theme="dark"] .edu-root p,
:root[data-theme="dark"] .edu-root li { color: var(--d-dim); }
:root[data-theme="dark"] .edu-root .edu-hero,
:root[data-theme="dark"] .edu-root .edu-section + .edu-section { border-color: var(--d-border); }
:root[data-theme="dark"] .edu-root .edu-disclaimer { background: var(--d-card); border-color: var(--d-border); color: var(--d-dim); }
:root[data-theme="dark"] .edu-root .edu-card { background: var(--d-card); border-color: var(--d-border); }
:root[data-theme="dark"] .edu-root .edu-card:hover { background: var(--d-card-hover); border-color: var(--olive-light); }
:root[data-theme="dark"] .edu-root .edu-card p { color: var(--d-dim); }
:root[data-theme="dark"] .edu-root .edu-figure,
:root[data-theme="dark"] .edu-root .edu-interactive,
:root[data-theme="dark"] .edu-root .edu-callout,
:root[data-theme="dark"] .edu-root .edu-recap,
:root[data-theme="dark"] .edu-root .edu-tool-button { background: var(--d-card); border-color: var(--d-border); }
:root[data-theme="dark"] .edu-root .edu-tool-stage { background: var(--d-bg); border-color: var(--d-border); }
:root[data-theme="dark"] .edu-root .edu-figure figcaption,
:root[data-theme="dark"] .edu-root .edu-static-strip figcaption,
:root[data-theme="dark"] .edu-root .edu-interactive-caption { color: var(--d-dim); }
:root[data-theme="dark"] .edu-root .edu-toc a { background: var(--d-card); color: var(--d-text); }
:root[data-theme="dark"] .edu-root .edu-evi-popover { background: var(--d-card); border-color: var(--d-border); color: var(--d-text); }
:root[data-theme="dark"] .edu-root .edu-evi-popover-rationale { color: var(--d-dim); }
:root[data-theme="dark"] .edu-root .edu-evi-popover-cite { color: var(--d-dim); border-top-color: var(--d-border); }
@media (max-width: 720px) {
.edu-hero { padding: 4rem 1.5rem 3rem; }
.edu-section { padding: 3rem 1.5rem; }
.edu-container { padding: 0 1.5rem; }
.edu-toc { position: static; transform: none; display: flex; overflow-x: auto; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200); }
.edu-toc a { width: auto; white-space: nowrap; }
.edu-toc a:last-child { margin-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.edu-root { scroll-behavior: auto; }
.edu-reveal { opacity: 1; transform: none; transition: none; }
}
/* Editorial atlas and article system */
.edu-root {
--edu-reading: 68ch;
--edu-wide: 1080px;
--edu-rule: color-mix(in srgb, var(--olive) 28%, var(--gray-200));
}
.edu-pillar-hero .edu-container {
display: grid;
grid-template-columns: minmax(0, 760px) 1fr;
}
.edu-pillar-hero .edu-hero-badge,
.edu-pillar-hero h1,
.edu-pillar-hero p { grid-column: 1; }
.edu-pillar-hero p:last-child {
max-width: var(--edu-reading);
font-size: 1.08rem;
}
.edu-atlas-stage {
padding: 6rem 2rem;
border-top: 1px solid var(--edu-rule);
scroll-margin-top: 5rem;
}
.edu-atlas-stage-inner {
max-width: var(--edu-wide);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
gap: 5rem;
align-items: center;
}
.edu-atlas-stage:nth-of-type(even) .edu-atlas-copy { order: 2; }
.edu-atlas-stage:nth-of-type(even) .edu-atlas-visual { order: 1; }
.edu-atlas-number,
.edu-article-kicker {
color: var(--olive-dark);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
}
.edu-atlas-stage h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .65rem 0 1rem; }
.edu-atlas-thesis { font-size: 1.12rem; color: var(--gray-600); max-width: 48ch; }
.edu-atlas-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin: 1.5rem 0; color: var(--gray-500); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.edu-atlas-meta span + span::before { content: "·"; margin-right: 1.25rem; color: var(--olive); }
.edu-text-link { display: inline-flex; gap: .5rem; color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--olive); padding-bottom: .2rem; }
.edu-text-link:hover { color: var(--olive-dark); }
.edu-atlas-visual { margin: 0; }
.edu-atlas-visual img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.edu-atlas-model { max-width: var(--edu-wide); margin: 3rem auto 0; }
.edu-toc a.is-current { border-left-color: var(--navy); color: var(--navy); background: var(--white); }
.edu-toc a.is-complete { opacity: .62; }
.edu-toc a span { display: inline-block; min-width: 1.6rem; color: var(--olive-dark); }
.edu-article-header { padding: 5rem 2rem 4rem; border-bottom: 1px solid var(--edu-rule); }
.edu-article-shell { width: min(var(--edu-reading), calc(100% - 3rem)); margin: 0 auto; }
.edu-back-link { display: inline-block; margin-bottom: 3.5rem; color: var(--gray-500); font-size: .84rem; font-weight: 700; text-decoration: none; }
.edu-article-header h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); margin: .65rem 0 1.2rem; }
.edu-article-deck { font-size: 1.22rem; color: var(--gray-600); max-width: 58ch; }
.edu-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; border-top: 1px solid var(--gray-200); margin-top: 2rem; padding-top: 1rem; color: var(--gray-500); font-size: .8rem; }
.edu-byline a { color: inherit; }
.edu-article > .edu-section { padding: 4rem 2rem; }
.edu-article > .edu-section > .edu-container { max-width: var(--edu-wide); padding: 0; }
.edu-chapter-page .edu-article > .edu-section .kicker,
.edu-chapter-page .edu-article > .edu-section > .edu-container > h2:first-of-type { display: none; }
.edu-article > .edu-section > .edu-container > p,
.edu-article > .edu-section > .edu-container > h3,
.edu-article > .edu-section > .edu-container > ul,
.edu-article > .edu-section > .edu-container > ol,
.edu-article > .edu-section > .edu-container > .edu-callout,
.edu-article > .edu-section > .edu-container > .edu-card-grid {
width: min(var(--edu-reading), 100%);
margin-left: auto;
margin-right: auto;
}
.edu-article > .edu-section > .edu-container > p,
.edu-article > .edu-section > .edu-container > ul,
.edu-article > .edu-section > .edu-container > ol { font-size: 18px; line-height: 1.82; }
.edu-article > .edu-section h3 { margin-top: 3.25rem; font-size: 1.55rem; }
.edu-article .edu-figure,
.edu-article .edu-model { max-width: 940px; margin: 3rem auto; background: transparent; border: 0; box-shadow: none; padding: 0; }
.edu-article .edu-figure figcaption { max-width: var(--edu-reading); margin: 1rem auto 0; }
.edu-article .edu-callout { background: transparent; border-width: 0 0 0 3px; box-shadow: none; padding: .25rem 0 .25rem 1.5rem; }
.edu-article .edu-card-grid { display: block; }
.edu-article .edu-card { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 1.1rem 0; }
.edu-article .edu-card:hover { transform: none; box-shadow: none; }
.edu-article-footer { padding: 2rem 0 4rem; }
.edu-chapter-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.edu-chapter-nav-link { display: grid; gap: .35rem; padding-top: 1rem; border-top: 1px solid var(--edu-rule); text-decoration: none; color: var(--navy); }
.edu-chapter-nav-link span { color: var(--gray-500); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.edu-references { padding: 3rem 0 5rem; background: color-mix(in srgb, var(--warm-bg) 72%, var(--gray-100)); border-top: 1px solid var(--gray-200); }
.edu-references h2 { font: 700 .76rem 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.edu-references .edu-footnotes { font-size: .78rem; color: var(--gray-500); }
@media (max-width: 900px) {
.edu-toc { position: sticky; top: 0; transform: none; right: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--warm-bg); border-bottom: 1px solid var(--gray-200); padding: .5rem; }
.edu-toc a { width: auto; min-width: 0; padding: .55rem .35rem; font-size: .64rem; text-align: center; border-left: 0; border-bottom: 2px solid var(--olive); }
.edu-toc a span { display: block; min-width: 0; }
.edu-atlas-stage-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 640px) {
.edu-toc { display: grid; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .4rem; }
.edu-toc a { white-space: normal; line-height: 1.25; }
.edu-toc a:last-child { margin-right: 0; }
.edu-pillar-hero .edu-container { display: block; padding: 0; }
.edu-atlas-stage { padding: 4rem 1.5rem; }
.edu-atlas-stage-inner { grid-template-columns: 1fr; gap: 2rem; }
.edu-atlas-stage:nth-of-type(even) .edu-atlas-copy,
.edu-atlas-stage:nth-of-type(even) .edu-atlas-visual { order: initial; }
.edu-atlas-copy { order: 1; }
.edu-atlas-visual { order: 2; }
.edu-atlas-stage h2 { font-size: 2.25rem; }
.edu-atlas-meta span + span::before { display: none; }
.edu-article-header { padding: 3rem 1.5rem; }
.edu-article-shell { width: 100%; }
.edu-back-link { margin-bottom: 2.5rem; }
.edu-article > .edu-section { padding: 3rem 1.5rem; }
.edu-article > .edu-section > .edu-container > p,
.edu-article > .edu-section > .edu-container > ul,
.edu-article > .edu-section > .edu-container > ol { font-size: 17px; line-height: 1.78; }
.edu-chapter-nav { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
T0.5 scaffolding — footnotes, callouts, model mounts
Consumed by Phase 1+ content. All values reuse the existing site
palette (--olive*, --navy, --gray-*, --warm-bg, --white, --shadow*,
--radius); the literal #748a28 is already what --olive resolves to.
════════════════════════════════════════════════════════════════ */
/* ── Footnotes & references ──