/* ════════════════════════════════════════════════════════════════ PATIENT GUIDES — immersive layer Scoped to `.guide-root` (on ). Adds the reading-room treatment (progress spine, framed reading column, chapter numerals, scroll reveals) shared by every guide, plus the flagship's scrollytelling stage (a dental arch that narrows as you scroll while the teeth stay the same size and crowd anteriorly). Progressive enhancement only. Reuses education.css tokens + the evidence-chip / footnote / callout components (those keep their .edu-* classes so education.js and education.css still drive them). Nothing here hides content unless JS + GSAP are confirmed running and the visitor has not asked for reduced motion. ════════════════════════════════════════════════════════════════ */ .guide-root { /* component tokens — themed here so light/dark both look deliberate */ --g-ink: #1b1d14; --g-soft: #454a38; --g-dim: #6e7358; --g-paper: #f4f3ea; --g-panel: #faf9f2; --g-line: #dcdaca; --g-line2: #c6c4b0; --g-olive: #748a28; --g-olive-d: #5a6b1e; --g-olive-l: #8ea63f; --g-enamel: #f2f1e6; --g-enamel-hi: #fdfcf5; --g-enamel-lo: #e6e4d1; --g-enamel-e: #cdcbb2; --g-strong: #6f851f; --g-moderate:#0e7c93; --g-contested:#e0670f; --g-myth: #b91c1c; --g-read: 40rem; --g-wide: 78rem; /* Unify the .edu-article reading column (masthead shell, subheads, body) to one rem-based measure so Playfair headings and 18px body no longer compute different widths from the same `68ch` and out-dent each other. */ --edu-reading: 40rem; } @media (prefers-color-scheme: dark) { .guide-root { --g-ink:#edecdf; --g-soft:#c3c5ae; --g-dim:#8f9377; --g-paper:#14150e; --g-panel:#1d1f14; --g-line:#2a2c1d; --g-line2:#3a3d29; --g-olive:#9cb84e; --g-olive-d:#7f994a; --g-olive-l:#b6cf6c; --g-strong:#9cb84e; --g-moderate:#37b6cf; --g-contested:#f2872f; --g-myth:#e56a6a; } } :root[data-theme="light"] .guide-root { --g-ink:#1b1d14; --g-soft:#454a38; --g-dim:#6e7358; --g-paper:#f4f3ea; --g-panel:#faf9f2; --g-line:#dcdaca; --g-line2:#c6c4b0; --g-olive:#748a28; --g-olive-d:#5a6b1e; --g-olive-l:#8ea63f; --g-strong:#6f851f; --g-moderate:#0e7c93; --g-contested:#e0670f; --g-myth:#b91c1c; } :root[data-theme="dark"] .guide-root { --g-ink:#edecdf; --g-soft:#c3c5ae; --g-dim:#8f9377; --g-paper:#14150e; --g-panel:#1d1f14; --g-line:#2a2c1d; --g-line2:#3a3d29; --g-olive:#9cb84e; --g-olive-d:#7f994a; --g-olive-l:#b6cf6c; --g-strong:#9cb84e; --g-moderate:#37b6cf; --g-contested:#f2872f; --g-myth:#e56a6a; } /* ── Reveal gate (fail-safe) ── guides.js adds `guide-anim` to only when it will actually animate (GSAP present, motion allowed), right before wiring the scroll reveals. All .g-reveal elements sit below the fold, so there is no flash. If JS or GSAP never runs, the class is never added and every element stays visible. */ html.guide-anim .g-reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } /* Static fallback (no GSAP / reduced motion): nothing pinned, stretched, or dimmed. */ html.guide-static .guide-stage { position: static; height: auto; } html.guide-static .guide-beat { min-height: auto; } html.guide-static .guide-beat.is-dim { opacity: 1; } /* ════════ Reading-room shell ════════ */ .guide-root .guide-body { max-width: var(--g-wide); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); position: relative; } .guide-section { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--g-read), 92vw) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 2.4rem); padding: clamp(2.6rem, 7vh, 5.5rem) 0; } .guide-section + .guide-section > .guide-num, .guide-section + .guide-section > .guide-prose { position: relative; } .guide-section + .guide-section::before { content: ""; grid-column: 2; height: 1px; background: var(--g-line); margin: 0 0 clamp(2rem, 5vh, 3.5rem); align-self: start; } .guide-prose { grid-column: 2; min-width: 0; } .guide-aside { grid-column: 3; align-self: start; } /* chapter numeral — museum "wall numeral", encodes section order */ .guide-num { grid-column: 1; justify-self: end; align-self: start; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; color: color-mix(in srgb, var(--g-olive) 30%, transparent); font-variant-numeric: tabular-nums; padding-top: .1em; user-select: none; } .guide-prose > h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.12; font-size: clamp(1.55rem, 3.2vw, 2.35rem); letter-spacing: -.01em; margin: 0 0 1.1rem; text-wrap: balance; color: var(--g-ink); } .guide-eyebrow { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); margin: 0 0 .7rem; } :root[data-theme="dark"] .guide-root .guide-eyebrow { color: var(--g-olive-l); } .guide-prose > p { font-size: 1.08rem; line-height: 1.75; color: var(--g-soft); margin: 0 0 1.15rem; } .guide-prose > p:last-child { margin-bottom: 0; } .guide-prose strong { color: var(--g-ink); font-weight: 600; } /* pull-quote lifted into the reading flow — magazine hairlines, no side tab */ .guide-pull { grid-column: 2; margin: clamp(1.8rem, 5vh, 3.2rem) 0; text-wrap: balance; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 2.7vw, 2rem); line-height: 1.3; color: var(--g-ink); padding: clamp(1.2rem, 3vh, 1.8rem) 0; border-top: 1px solid var(--g-line2); border-bottom: 1px solid var(--g-line2); } .guide-pull::before { content: ""; display: block; width: 2rem; height: 3px; background: var(--g-olive); border-radius: 3px; margin: 0 0 1rem; } /* ════════ Progress spine (fixed, desktop) ════════ */ .guide-spine { position: fixed; left: max(1.1rem, calc((100vw - var(--g-wide)) / 2 - 2.2rem)); top: 50%; transform: translateY(-50%); z-index: 30; display: none; flex-direction: column; gap: .1rem; padding: .4rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s; } /* Shown only once the reader is past the scrollytelling stage (which has its own timeline rail), so the two left-edge rails never overlap. visibility also keeps the links out of the tab order while hidden. */ body.guide-spine-on .guide-spine { opacity: 1; visibility: visible; pointer-events: auto; } .guide-spine-node { display: flex; align-items: center; gap: .7rem; text-decoration: none; padding: .34rem 0; color: var(--g-dim); position: relative; } .guide-spine-node .g-tick { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: transparent; border: 1.6px solid var(--g-line2); transition: background .3s, border-color .3s, transform .3s; } .guide-spine-node .g-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .25s, color .3s; color: var(--g-dim); } .guide-spine:hover .g-lbl { opacity: 1; transform: none; } .guide-spine-node:focus-visible .g-lbl { opacity: 1; transform: none; } .guide-spine-node.is-current .g-tick { background: var(--g-olive); border-color: var(--g-olive); transform: scale(1.3); } .guide-spine-node.is-current .g-lbl { opacity: 1; transform: none; color: var(--g-ink); } .guide-spine-node.is-complete .g-tick { border-color: var(--g-olive); background: color-mix(in srgb, var(--g-olive) 45%, transparent); } .guide-spine-node:focus-visible { outline: 2px solid var(--g-olive); outline-offset: 3px; border-radius: 4px; } /* Revealed only once the spine's computed left offset clears the reading column (below this the calc() floors to the edge and would overlap the numerals). */ @media (min-width: 1360px) { .guide-spine { display: flex; } } /* ════════ Scrollytelling stage (flagship hero) ════════ */ .guide-scrolly { position: relative; } .guide-scrolly-grid { max-width: var(--g-wide); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(1rem, 4vw, 4rem); align-items: start; } .guide-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; align-items: center; } .guide-stage-inner { width: 100%; background: radial-gradient(120% 90% at 30% 12%, color-mix(in srgb, var(--g-olive) 9%, var(--g-panel)) 0%, var(--g-panel) 62%); border: 1px solid var(--g-line); border-radius: 20px; padding: clamp(1.1rem, 2.2vw, 1.9rem); box-shadow: 0 1px 0 color-mix(in srgb, var(--g-olive) 12%, transparent), 0 30px 60px -42px rgba(20,22,10,.5); display: grid; grid-template-columns: auto 1fr; gap: clamp(.7rem, 1.8vw, 1.4rem); } /* time-axis rail (doubles as the stage's progress spine) */ .g-rail { position: relative; width: 118px; padding: .3rem 0; } .g-rail-line { position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--g-line2); border-radius: 2px; } .g-rail-fill { position: absolute; left: 13px; top: 8px; width: 2px; height: 0; background: var(--g-olive); border-radius: 2px; } .g-rail-eras { position: absolute; inset: 8px 0; display: flex; flex-direction: column; justify-content: space-between; } .g-era { display: flex; align-items: flex-start; gap: .5rem; } .g-era .g-tick2 { width: 10px; height: 10px; margin-left: 8px; margin-top: 3px; border-radius: 50%; background: var(--g-paper); border: 2px solid var(--g-line2); transition: border-color .3s, background .3s, transform .3s; flex: 0 0 auto; } .g-era .g-lbl2 { font-size: .67rem; line-height: 1.25; color: var(--g-dim); font-weight: 600; transition: color .3s; } .g-era.on .g-tick2 { border-color: var(--g-olive); background: var(--g-olive); transform: scale(1.25); } .g-era.on .g-lbl2 { color: var(--g-ink); } .g-viz { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .g-readout { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .2rem; } .g-readout .g-num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.8rem); color: var(--g-ink); letter-spacing: -.02em; line-height: 1; } .g-readout .g-unit { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g-dim); font-weight: 700; } .g-readout .g-unit.today { color: var(--g-olive-d); } :root[data-theme="dark"] .guide-root .g-readout .g-unit.today { color: var(--g-olive-l); } .g-archsvg { width: 100%; height: auto; display: block; margin-top: .3rem; overflow: visible; } .g-measure { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-size: .73rem; color: var(--g-dim); font-weight: 600; } .g-measure .g-bar { height: 6px; background: var(--g-line); border-radius: 6px; flex: 1; overflow: hidden; } .g-measure .g-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--g-olive), var(--g-olive-l)); border-radius: 6px; } .g-crowdflag { color: var(--g-myth); opacity: 0; transition: opacity .35s; font-weight: 700; } .g-crowdflag.on { opacity: 1; } .g-legend { display: flex; flex-wrap: wrap; gap: .45rem .85rem; margin-top: .9rem; font-size: .72rem; color: var(--g-dim); } .g-legend span { display: inline-flex; align-items: center; gap: .35rem; } .g-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* scrolly narrative beats */ .guide-beats { padding: 0; } .guide-beat { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; padding: 2.4rem 0; } .guide-beat:first-child { min-height: 66vh; } .guide-beat:last-child { min-height: 76vh; } .guide-beat .guide-eyebrow { margin-bottom: .8rem; } .guide-beat h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.14; letter-spacing: -.01em; margin: 0 0 .9rem; text-wrap: balance; color: var(--g-ink); } .guide-beat p { font-size: 1.1rem; color: var(--g-soft); margin: 0 0 1rem; } .guide-beat p strong { color: var(--g-ink); font-weight: 600; } .guide-beat.is-dim { opacity: .34; transition: opacity .5s ease; } /* ════════ Article masthead ════════ */ .guide-hero { max-width: var(--g-wide); margin: 0 auto; padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.15rem, 4vw, 2.5rem) clamp(1.5rem, 4vh, 3rem); } .guide-hero .edu-back-link { display: inline-block; margin-bottom: clamp(2rem, 5vh, 3.2rem); } .guide-kicker { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .5rem; } .guide-kicker::before { content: ""; width: 1.7rem; height: 2px; background: var(--g-olive); border-radius: 2px; } :root[data-theme="dark"] .guide-root .guide-kicker { color: var(--g-olive-l); } .guide-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -.015em; margin: 0 0 1.1rem; text-wrap: balance; max-width: 16ch; color: var(--g-ink); } .guide-deck { font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.6; color: var(--g-soft); max-width: 46ch; margin: 0; } .guide-hero .edu-byline { margin-top: 1.6rem; } .guide-scrollcue { display: inline-flex; align-items: center; gap: .55rem; margin-top: 2.2rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g-dim); font-weight: 600; } .guide-scrollcue .g-mouse { width: 24px; height: 38px; border: 1.5px solid var(--g-line2); border-radius: 13px; position: relative; } .guide-scrollcue .g-mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; border-radius: 3px; background: var(--g-olive); transform: translateX(-50%); animation: g-cue 1.7s ease-in-out infinite; } @keyframes g-cue { 0%,100% { opacity: .3; transform: translate(-50%,0); } 50% { opacity: 1; transform: translate(-50%,10px); } } /* ════════ Footnotes / cross-links spacing in the new shell ════════ */ .guide-body .guide-lede { max-width: min(var(--g-read), 92vw); margin: 0 auto; } .guide-closing { max-width: var(--g-wide); margin: 0 auto; padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(1.5rem, 4vh, 3rem); } .guide-closing > .edu-footnotes, .guide-closing > .edu-chapter-nav, .guide-closing > .guide-eyebrow { max-width: min(var(--g-read), 100%); margin-left: auto; margin-right: auto; } .guide-closing > .edu-card-grid { max-width: var(--g-wide); margin: 0 auto; } /* ════════ Guides hub (index) ════════ */ .guide-index { max-width: var(--g-wide); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem) clamp(3rem, 9vh, 6rem); } .guide-index-label { font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); margin: clamp(2rem, 5vh, 3.2rem) 0 1.1rem; } :root[data-theme="dark"] .guide-root .guide-index-label { color: var(--g-olive-l); } .guide-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(.9rem, 1.8vw, 1.5rem); } .guide-card { display: flex; flex-direction: column; gap: .55rem; text-decoration: none; padding: clamp(1.35rem, 2.4vw, 1.9rem); border: 1px solid var(--g-line); border-radius: 16px; background: var(--g-panel); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .guide-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--g-olive) 55%, var(--g-line)); box-shadow: 0 18px 40px -30px rgba(20,22,10,.45); } .guide-card:focus-visible { outline: 2px solid var(--g-olive); outline-offset: 3px; } .gc-eyebrow { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); } :root[data-theme="dark"] .guide-root .gc-eyebrow { color: var(--g-olive-l); } .guide-card h2, .guide-card h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.14; color: var(--g-ink); margin: 0; letter-spacing: -.01em; } .guide-card h3 { font-size: 1.28rem; } .guide-card p { font-size: .96rem; line-height: 1.6; color: var(--g-soft); margin: 0; } /* featured flagship card: full-width, olive-tinted, larger headline */ .guide-card--flagship { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem clamp(1.5rem, 4vw, 3rem); background: radial-gradient(130% 130% at 8% 0%, color-mix(in srgb, var(--g-olive) 12%, var(--g-panel)) 0%, var(--g-panel) 55%); border-color: color-mix(in srgb, var(--g-olive) 35%, var(--g-line)); padding: clamp(1.6rem, 3vw, 2.6rem); } .guide-card--flagship .gc-body { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: .6rem; } .guide-card--flagship h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } .guide-card--flagship p { font-size: 1.04rem; max-width: 52ch; } .guide-card--flagship .gc-cue { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); white-space: nowrap; } :root[data-theme="dark"] .guide-root .guide-card--flagship .gc-cue { color: var(--g-olive-l); } .guide-card--flagship .gc-cue::after { content: "→"; font-size: 1.05em; } /* ════════ Responsive ════════ */ @media (max-width: 1000px) { .guide-scrolly-grid { grid-template-columns: 1fr; gap: 0; } .guide-stage { position: static; height: auto; padding: 1rem 0 1.4rem; } .guide-stage-inner { grid-template-columns: 1fr; } .g-rail { display: none; } .guide-beat, .guide-beat:first-child, .guide-beat:last-child { min-height: auto; padding: 1.3rem 0; } .guide-beat.is-dim { opacity: 1; } } @media (max-width: 860px) { .guide-section { grid-template-columns: 1fr; } .guide-num { grid-column: 1; justify-self: start; font-size: 1.8rem; margin-bottom: .4rem; } .guide-prose, .guide-aside, .guide-pull, .guide-section + .guide-section::before { grid-column: 1; } } @media (prefers-reduced-motion: reduce) { html.guide-anim .g-reveal { opacity: 1; transform: none; } .guide-scrollcue .g-mouse::after { animation: none; } .guide-stage { position: static; height: auto; } .guide-beat, .guide-beat:first-child, .guide-beat:last-child { min-height: auto; } .guide-beat.is-dim { opacity: 1; } } /* ════════════════════════════════════════════════════════════════ READING ROOM — applied to the built article base (.edu-article) Brings the tour chapters, deep dives, works-cited, and History wing into the guide language: the same hairline-kicker masthead, Playfair scale, warm palette, and olive accents the guides use — layered on the existing .edu-* article structure so every citation, footnote id, data-fn hook, and reading-order stays exactly as generated. Reveals, evidence chips, and footnote popovers remain education.js; nothing here hides content. ════════════════════════════════════════════════════════════════ */ /* ── Masthead (edu-article-header re-skinned as a guide hero) ── */ .guide-root .edu-article-header { border-bottom: 0; padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.15rem, 4vw, 2.5rem) clamp(1.4rem, 4vh, 2.6rem); } .guide-root .edu-article-header .edu-back-link { display: inline-block; margin-bottom: clamp(2rem, 5vh, 3.2rem); } .guide-root .edu-article-kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--g-olive-d); margin: 0 0 1rem; } .guide-root .edu-article-kicker::before { content: ""; width: 1.7rem; height: 2px; background: var(--g-olive); border-radius: 2px; flex: 0 0 auto; } :root[data-theme="dark"] .guide-root .edu-article-kicker { color: var(--g-olive-l); } .guide-root .edu-article-header h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 1.15rem; text-wrap: balance; color: var(--g-ink); max-width: 20ch; } .guide-root .edu-article-deck { font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.6; color: var(--g-soft); max-width: 54ch; margin: 0; } .guide-root .edu-article-header .edu-byline { border-top-color: var(--g-line); color: var(--g-dim); } .guide-root .edu-article-header .edu-byline a { color: var(--g-olive-d); } :root[data-theme="dark"] .guide-root .edu-article-header .edu-byline a { color: var(--g-olive-l); } /* The deep-dive intro partial repeats the title in-body (a recap from the pre- masthead layout). The guide hero now carries the title, so drop the redundant first kicker. The duplicate h2 is hidden visually but KEPT in the a11y tree so heading order stays h1→h2→h3 (a display:none here would skip a level). */ .guide-root.edu-deep-dive-page .edu-article > .edu-section:first-of-type .kicker { display: none; } .guide-root.edu-deep-dive-page .edu-article > .edu-section:first-of-type > .edu-container > h2:first-of-type { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Reading column: warm palette + Playfair subheads over education.css ── */ .guide-root .edu-article .edu-container > h2, .guide-root .edu-article .edu-container > h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--g-ink); letter-spacing: -.01em; } .guide-root .edu-article .edu-container > p, .guide-root .edu-article .edu-container > ul, .guide-root .edu-article .edu-container > ol { color: var(--g-soft); } .guide-root .edu-article .edu-container > p > strong, .guide-root .edu-article .edu-container > ul strong, .guide-root .edu-article .edu-container > ol strong { color: var(--g-ink); font-weight: 600; } .guide-root .edu-article .edu-container > p > a { color: var(--g-olive-d); text-underline-offset: 2px; } :root[data-theme="dark"] .guide-root .edu-article .edu-container > p > a { color: var(--g-olive-l); } /* ── References + closing cross-links in the warm palette ── */ .guide-root .edu-article .edu-references { background: color-mix(in srgb, var(--g-panel) 82%, transparent); border-top-color: var(--g-line); } .guide-root .edu-article .edu-references h2 { color: var(--g-dim); } .guide-root .edu-article .edu-chapter-nav-link { border-top-color: color-mix(in srgb, var(--g-olive) 30%, var(--g-line)); color: var(--g-ink); } .guide-root .edu-article .edu-chapter-nav-link span { color: var(--g-dim); } /* ── Works Cited (reference page) ── */ .guide-root .guide-workscited { max-width: var(--g-read); margin: 0 auto; padding-bottom: clamp(2.5rem, 7vh, 5rem); } .guide-root .edu-works-cited { color: var(--g-soft); } .guide-root .edu-works-cited .fn-authors { color: var(--g-ink); } .guide-root .edu-works-cited .fn-year { color: var(--g-olive-d); } :root[data-theme="dark"] .guide-root .edu-works-cited .fn-year { color: var(--g-olive-l); } /* ════════ Reading-room spine on multi-section articles ════════ Deep dives and the History wing carry a .guide-spine whose nodes point at .edu-section[data-guide-stage] anchors; guides.js trackSpine() wires the active/complete states (IntersectionObserver — runs without GSAP). The chapter pages are single-topic and carry no spine. */ @media (max-width: 860px) { .guide-root .edu-article-header h1 { max-width: none; } } /* ════════════════════════════════════════════════════════════════ TOUR ATLAS — museum timeline re-skinned into the guide palette The atlas keeps its museum.js cinematic behaviour and structure (the fixed spine, the eight edu-atlas-stage stages, the act interstitials, the closing bridge — and the 8-stage / 3-model / CollectionPage / no- "Further reading" contract the build test pins). This block only re- expresses museum.css's cool navy/gray palette in the warm --g-* tokens so the tour reads continuous with the guide-styled landing and the reading-room chapters it links into. Prefixed .guide-root.edu-museum (0,3,0) to win over museum.css's own .edu-museum rules; --g-* tokens self-theme for dark, so only olive labels need a dark bump. */ /* Entrance hero + orientation intro */ .guide-root.edu-museum .museum-eyebrow { color: var(--g-olive-d); } .guide-root.edu-museum .museum-hero-inner h1 { color: var(--g-ink); } .guide-root.edu-museum .museum-hero-lede { color: var(--g-soft); } .guide-root.edu-museum .museum-hero-stat b { color: var(--g-ink); } .guide-root.edu-museum .museum-hero-stat span { color: var(--g-dim); } .guide-root.edu-museum .museum-intro-inner { border-left-color: var(--g-olive); } .guide-root.edu-museum .museum-intro-inner p { color: var(--g-soft); } /* Fixed timeline spine (desktop rail) */ .guide-root.edu-museum .museum-spine-title { color: var(--g-dim); } .guide-root.edu-museum .museum-spine-node { color: var(--g-dim); } .guide-root.edu-museum .museum-spine-era { color: var(--g-dim); } .guide-root.edu-museum .museum-spine-node:hover, .guide-root.edu-museum .museum-spine-node.is-current { color: var(--g-ink); } .guide-root.edu-museum .museum-spine-node.is-current .museum-spine-era { color: var(--g-olive-d); } /* Chapter stages (the museum "cases") */ .guide-root.edu-museum .edu-atlas-stage h2 { color: var(--g-ink); } .guide-root.edu-museum .edu-atlas-thesis { color: var(--g-soft); } .guide-root.edu-museum .edu-atlas-number { color: var(--g-olive-d); } .guide-root.edu-museum .edu-atlas-meta span { color: var(--g-dim); } .guide-root.edu-museum .edu-text-link { color: var(--g-olive-d); } .guide-root.edu-museum .museum-dateline b { color: var(--g-ink); } .guide-root.edu-museum .museum-dateline span { color: var(--g-olive-d); } .guide-root.edu-museum .edu-atlas-visual { border-color: var(--g-line); } .guide-root.edu-museum .museum-plate { color: var(--g-dim); border-top-color: var(--g-line); } .guide-root.edu-museum .museum-plate b { color: var(--g-ink); } /* Act interstitials + closing bridge */ .guide-root.edu-museum .museum-wing-era { color: var(--g-olive-d); } .guide-root.edu-museum .museum-wing h2 { color: var(--g-ink); } .guide-root.edu-museum .museum-wing p { color: var(--g-soft); } .guide-root.edu-museum .museum-bridge h2 { color: var(--g-ink); } .guide-root.edu-museum .museum-bridge-dek { color: var(--g-soft); } .guide-root.edu-museum .museum-bridge-body p { color: var(--g-soft); } .guide-root.edu-museum .museum-bridge-close { color: var(--g-ink); } /* Dark-mode readability bump for the olive labels (mirrors the guides, which use the lighter --g-olive-l for uppercase labels on dark). */ :root[data-theme="dark"] .guide-root.edu-museum .museum-eyebrow, :root[data-theme="dark"] .guide-root.edu-museum .museum-spine-node.is-current .museum-spine-era, :root[data-theme="dark"] .guide-root.edu-museum .edu-atlas-number, :root[data-theme="dark"] .guide-root.edu-museum .museum-dateline span, :root[data-theme="dark"] .guide-root.edu-museum .edu-text-link, :root[data-theme="dark"] .guide-root.edu-museum .museum-exhibit-kind, :root[data-theme="dark"] .guide-root.edu-museum .museum-wing-era { color: var(--g-olive-l); } /* ── Instrument Room hub (/education/gallery/) — museum-hub-hero + the three museum-exhibit cases re-skinned into the warm palette. Colour/border only, like the atlas above; museum.css keeps the layout + the light/dark hero backdrop, and .museum-eyebrow is already covered by the atlas block. These classes exist only on the gallery, so nothing else can pick them up. ── */ .guide-root.edu-museum .museum-hub-hero { border-bottom-color: var(--g-line); } .guide-root.edu-museum .museum-hub-hero h1 { color: var(--g-ink); } .guide-root.edu-museum .museum-hub-hero p:not(.museum-eyebrow) { color: var(--g-soft); } .guide-root.edu-museum .museum-exhibit { border-top-color: var(--g-line); } .guide-root.edu-museum .museum-exhibit-kind { color: var(--g-olive-d); } .guide-root.edu-museum .museum-exhibit h2 { color: var(--g-ink); } /* Out-specify education.css's `[data-theme=dark] .edu-root p` (0,3,1), which would otherwise repaint this

the cool --d-dim in dark mode. */ .guide-root.edu-museum .museum-exhibit .museum-exhibit-lede { color: var(--g-soft); } .guide-root.edu-museum .museum-exhibit-back { color: var(--g-ink); border-bottom-color: var(--g-olive); } .guide-root.edu-museum .museum-exhibit-back:hover { color: var(--g-olive-d); }