/* Research timeline. Builds on next.css. The plates multiply onto the cream reading surface, so they sit on it with no box. */
.timeline-page { background: var(--paper); }
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }

/* ---------- Hero ---------- */
.tl-hero { padding: clamp(56px, 7vw, 112px) 0 clamp(36px, 4vw, 56px); }
.tl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.tl-hero h1 { font-size: clamp(44px, 5.6vw, 84px); }
/* One way back to the short, six-checkpoint version of this record. */
.tl-shortcut { margin-top: clamp(18px, 2vw, 26px); }
.tl-shortcut .text-link { font-size: 16px; }
.tl-hero-side .lead { margin: 0; max-width: 36ch; }
@media (max-width: 860px) { .tl-hero-grid { grid-template-columns: 1fr; } }

/* ---------- The century at a glance ---------- */
.glance { padding-bottom: clamp(40px, 5vw, 72px); }
.glance-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.glance-title { font: 600 12px/1 var(--display); letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.glance-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: -8px; vertical-align: -1px; }
.lg-note { padding-left: 14px; border-left: 1px solid var(--rule); }
.lg-key { background: var(--ink); } .lg-mur { background: var(--teal); } .lg-other { width: 2px; height: 12px; border-radius: 0; background: var(--rule-strong); }
.glance-chart { margin-top: 18px; }
.glance-chart svg { width: 100%; height: auto; overflow: visible; }
.glance-chart .era-band { fill: var(--paper-2); }
.glance-chart .era-band.alt { fill: var(--paper); }
.glance-chart .era-band.is-current { fill: var(--wash-2); }
.glance-chart .era-label { font: 600 12px var(--display); fill: var(--ink); letter-spacing: .01em; }
.glance-chart .era-years { font: 500 11px var(--body); fill: var(--muted); }
.glance-chart .axis { stroke: var(--ink); stroke-width: 1; }
.glance-chart .decade { font: 500 11px var(--body); fill: var(--muted); text-anchor: middle; }
.glance-chart .tick { stroke: var(--rule-strong); stroke-width: 2; }
.glance-chart .axis-break line { stroke: var(--ink); stroke-width: 1.2; }
.glance-chart a { cursor: pointer; }
.glance-chart .dot { fill: var(--ink); stroke: var(--paper); stroke-width: 2; transition: r .2s var(--ease); }
.glance-chart .dot.mur { fill: var(--teal); }
.glance-chart .dot-label { font: 600 11.5px var(--display); fill: var(--ink); text-anchor: middle; }
.glance-chart .stem { stroke: var(--rule-strong); stroke-width: 1; }
.glance-chart a:hover .dot, .glance-chart a:focus-visible .dot { r: 8.5; }
.glance-chart a:focus-visible .dot { stroke: var(--teal); stroke-width: 3; }
.glance-chart a:focus-visible .tick { stroke: var(--teal); stroke-width: 4; }
.glance-chart a:focus-visible rect { stroke: var(--teal); stroke-width: 2; }
.glance-chart .you-are-here { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.glance-tip { position: fixed; z-index: 70; pointer-events: none; max-width: 260px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: var(--r-box); background: var(--paper); font: 500 14px/1.35 var(--display); color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.glance-tip b { display: block; font-size: 12px; color: var(--teal); margin-bottom: 2px; }
.glance-tip.is-on { opacity: 1; transform: none; }
.glance-fallback { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.glance-fallback a { display: grid; gap: 3px; padding: 14px 12px 14px 0; color: var(--ink); text-decoration: none; }
.glance-fallback b { font: 560 15px/1.25 var(--display); }
.glance-fallback span { font-size: 13px; color: var(--teal); }
.glance-fallback small { font-size: 13px; color: var(--muted); }
.has-chart .glance-fallback { display: none; }
@media (max-width: 720px) {
  .has-chart .glance-fallback { display: grid; grid-template-columns: 1fr; }
  .has-chart .glance-chart { display: none; }
  .glance-fallback { grid-template-columns: 1fr; }
  .glance-fallback li + li { border-top: 1px solid var(--rule); }
  .glance-fallback a { grid-template-columns: 1fr auto; }
  .glance-fallback small { grid-column: 1 / -1; }
}

/* ---------- Curator + primer ---------- */
.tl-intro { padding: clamp(40px, 5vw, 72px) 0; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tl-intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.curator-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
.curator-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.curator-card .eyebrow { margin-bottom: 8px; }
.curator-role { margin: 4px 0 12px; font-size: 14px; color: var(--teal); font-weight: 500; }
.curator-text { font-size: 16.5px; line-height: 1.6; color: var(--text); }
.curator-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.curator-actions .button { min-height: 44px; font-size: 14px; }
.biophoton-primer .eyebrow { margin-bottom: 10px; }
.primer-title { font-size: clamp(28px, 2.8vw, 40px); margin-bottom: 18px; }
.primer-copy p:not(.eyebrow) { font-size: 17px; }
.primer-copy p + p { margin-top: .8em; }
.primer-facts { margin: 26px 0 0; border-top: 1px solid var(--ink); }
.primer-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.primer-facts dt { font: 600 13px/1.4 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.primer-facts dd { margin: 0; font-size: 16px; color: var(--ink); }
@media (max-width: 900px) { .tl-intro-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .primer-facts > div { grid-template-columns: 1fr; gap: 4px; } .curator-card { grid-template-columns: 64px minmax(0, 1fr); } .curator-card img { width: 64px; height: 64px; } }

/* ---------- Tools ---------- */
.tl-tools { padding: clamp(36px, 4vw, 56px) 0 8px; }
.tl-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.view-switch, .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.view-switch { padding-right: 18px; border-right: 1px solid var(--rule); }
.view-switch button, .filter-chips button {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-control); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font: 500 14px/1 var(--display); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, border-color .2s;
}
.view-switch button .num { font-size: 12px; color: var(--muted); }
.view-switch button:hover, .filter-chips button:hover { border-color: var(--ink); }
.view-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.view-switch button[aria-pressed="true"] .num { color: rgba(247,246,242,.72); }
.filter-chips button[aria-pressed="true"] { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-ink); }
.tl-search { position: relative; margin-left: auto; min-width: 260px; flex: 0 1 320px; }
.tl-search input { width: 100%; min-height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); font: 400 15px var(--body); color: var(--ink); background: var(--paper); }
.tl-search input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.tl-search svg { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.tl-result { margin-top: 14px; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .view-switch { border-right: 0; padding-right: 0; } .tl-search { margin-left: 0; flex: 1 1 100%; } }

/* ---------- Grid + rail ---------- */
.tl-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: 28px; padding-bottom: clamp(64px, 8vw, 120px); }
.tl-rail { position: sticky; top: calc(var(--nav-h) + 28px); }
.rail-label { font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rail-year { margin: 8px 0 22px; font: 400 60px/1 var(--display); letter-spacing: -.05em; color: var(--ink); height: 60px; overflow: hidden; }
.rail-year span { display: inline-block; }
.rail-year span.tick { animation: yr .45s var(--ease); }
@keyframes yr { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.rail-links { display: grid; border-top: 1px solid var(--ink); }
.rail-links a { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 0 10px; border-bottom: 1px solid var(--rule); color: var(--muted); text-decoration: none; }
.rail-name { font: 540 14.5px/1.25 var(--display); }
.rail-years { font-size: 12px; align-self: center; }
.rail-progress { grid-column: 1 / -1; height: 2px; background: var(--rule); margin-top: 8px; overflow: hidden; }
.rail-progress b { display: block; height: 100%; width: 100%; background: var(--cyan); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .2s linear; }
.rail-links a:hover { color: var(--ink); }
.rail-links a.is-current { color: var(--ink); }
.rail-links a.is-current .rail-name { color: var(--ink); font-weight: 560; }
.rail-links a.is-done .rail-progress b { background: var(--ink); }
.rail-foot { margin-top: 16px; font-size: 14px; }
@media (max-width: 1000px) { .tl-grid { grid-template-columns: 1fr; } .tl-rail { display: none; } }

/* ---------- Eras ---------- */
.era + .era { margin-top: clamp(56px, 7vw, 104px); }
.era-head { padding-top: 18px; border-top: 2px solid var(--ink); margin-bottom: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; }
.era-years { grid-column: 1 / -1; font: 600 13px/1 var(--display); letter-spacing: .1em; color: var(--teal); }
.era-name { font-size: clamp(30px, 3.2vw, 44px); margin-top: 6px; }
.era-count { align-self: end; font-size: 14px; color: var(--muted); white-space: nowrap; }
.era-summary { grid-column: 1 / 2; margin-top: 10px; max-width: 62ch; font-size: 18px; color: var(--text); }
.era-expand { grid-column: 1 / -1; justify-self: start; margin-top: 14px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--teal); border-radius: var(--r-control); background: var(--teal-tint); color: var(--teal-ink); font: 600 15px/1.3 var(--display); text-align: left; cursor: pointer; }
.era-expand:hover { background: var(--paper); }
.era-expand[hidden] { display: none; }
.era-expand:focus-visible, .tl-more > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.era[hidden] { display: none; }

/* ---------- Milestones ---------- */
.milestone { position: relative; padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 20px); }
.milestone[hidden] { display: none; }
.v11-discovery-layout { display: block; }
.v11-copy { max-width: 760px; }
.milestone-year { font: 400 clamp(34px, 3vw, 44px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.milestone.is-key .milestone-year { color: var(--teal); }
.milestone-category { margin: 10px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 600 11.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nirosha-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; line-height: 1.3; border-radius: 4px; background: var(--teal-tint); color: var(--teal-ink); letter-spacing: .06em; font-size: 11px; }
.milestone h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.18; letter-spacing: -.02em; font-weight: 400; }
.milestone-summary { margin-top: 12px; font-size: 18px; color: var(--text); }
.why { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--wash); font-size: 16px; line-height: 1.55; color: var(--ink); }
.why span { display: block; font: 600 11px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 2px; }
.open-entry { display: none; margin-top: 14px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font: 500 14px/1 var(--display); cursor: pointer; align-items: center; gap: 8px; }
.open-entry:hover { border-color: var(--ink); }
.open-entry span { font-size: 16px; }

.v11-visuals { margin-top: clamp(20px, 2.4vw, 32px); }
.v11-visuals figure { margin: 0; }
.figure-label { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font: 600 11px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.figure-reading-key { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.figure-button { display: block; position: relative; width: 100%; padding: 0; margin: 10px 0 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.figure-button svg, .figure-button img { width: 100%; height: auto; }
.linework-figure .figure-button { max-width: 1000px; margin-inline: auto; }
figure[data-kind="paper"] .figure-button img { max-height: 620px; width: auto; max-width: 100%; margin-inline: auto; border: 1px solid var(--rule); border-radius: 4px; }
.concept-figure .figure-button img { border: 0; border-radius: 0; mix-blend-mode: multiply; }
.concept-figure .figure-button img[src*="-transparent"] { mix-blend-mode: normal; }
.enlarge { position: absolute; right: 0; bottom: 0; padding: 6px 12px; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--paper); font: 500 12.5px/1 var(--display); color: var(--ink); opacity: 0; transition: opacity .2s; }
.figure-button:hover .enlarge, .figure-button:focus-visible .enlarge { opacity: 1; }
@media (hover: none) { .enlarge { opacity: 1; } }
.linework-reading { display: grid; grid-template-columns: repeat(var(--reading-columns, 2), minmax(0, 1fr)); gap: 12px 28px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.linework-reading > div { padding-left: 14px; border-left: 2px solid var(--wash); }
.linework-reading strong { display: block; font: 600 15px/1.3 var(--display); color: var(--ink); }
.linework-reading p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.v11-visuals figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.v11-visuals figcaption a { font-weight: 500; }
.v11-visuals .credit { display: block; margin-top: 4px; font-size: 12.5px; }
@media (max-width: 640px) { .linework-reading { grid-template-columns: 1fr; } }

/* Study details */
.study-detail { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.study-detail > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; }
.study-detail > summary::-webkit-details-marker { display: none; }
.disclosure-label { font: 500 16px/1.3 var(--display); color: var(--ink); }
.disclosure-label small { display: block; margin-top: 3px; font: 400 13.5px/1.3 var(--body); color: var(--muted); }
.disclosure-action { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--display); color: var(--teal); white-space: nowrap; }
.disclosure-action i { position: relative; width: 26px; height: 26px; border: 1px solid var(--rule-strong); border-radius: 50%; }
.disclosure-action i::before, .disclosure-action i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.disclosure-action i::after { transform: translate(-50%, -50%) rotate(90deg); }
.study-detail[open] .disclosure-action i::after { transform: translate(-50%, -50%) rotate(0); }
.disclosure-close { display: none; }
.study-detail[open] .disclosure-open { display: none; }
.study-detail[open] .disclosure-close { display: inline; }
.study-detail > summary:hover .disclosure-label { color: var(--teal); }
.study-detail dl { margin: 4px 0 20px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; }
.study-detail dt, .study-detail dd { padding: 12px 0; border-top: 1px solid var(--rule); }
.study-detail dt { font: 600 12px/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-right: 16px; }
.study-detail dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 68ch; }
.study-papers a { font-weight: 500; }
.source-access { display: block; margin: 3px 0 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.illustration-context { margin: 0 0 22px; padding: 14px 16px; background: var(--paper-2); border-radius: var(--r-image); font-size: 15px; }
.illustration-context h4 { margin: 0 0 6px; font: 600 12px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.illustration-context ul { margin: 6px 0; padding-left: 18px; }
@media (prefers-reduced-motion: no-preference) { .study-detail[open] dl { animation: more-in .35s var(--ease); } }
@media (max-width: 640px) { .study-detail dl { grid-template-columns: 1fr; } .study-detail dd { border-top: 0; padding-top: 0; } .disclosure-action .disclosure-open, .disclosure-action .disclosure-close { display: none !important; } }

/* Key moments view: the other milestones fold between the key ones (see the end of this file). The compact rows that
   used to stand in for them, and their "Show the full entry" buttons, were retired in the lighter pass (October 4). */

/* Empty and next */
.tl-empty { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.link-button { padding: 0; border: 0; background: none; color: var(--teal); font: inherit; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.tl-now { margin-top: clamp(40px, 5vw, 64px); padding: 22px 0 0 24px; border-left: 2px dashed var(--cyan); position: relative; }
.tl-now::before { content: ""; position: absolute; left: -9px; top: 22px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--cyan); }
.tl-now .h3 { margin: 4px 0 14px; max-width: 30ch; }

/* ---------- Nature feature ---------- */
.nature-feature { padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--rule); }
.nature-feature-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.nature-feature-header .eyebrow { margin-bottom: 6px; }
.nature-publication { font: 600 15px/1.2 var(--display); letter-spacing: .02em; color: var(--ink); }
.nature-byline { text-align: right; font-size: 13.5px; color: var(--muted); }
.nature-byline span { font: 600 11px/1 var(--display); letter-spacing: .14em; color: var(--teal); }
.nature-byline p { margin: 4px 0 2px; color: var(--ink); font-weight: 500; }
.nature-feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(28px, 4vw, 48px); }
.nature-feature-copy h2 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.22; margin-bottom: 16px; }
.nature-feature-copy p:not(.eyebrow) { font-size: 17px; }
.nature-read { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; min-height: 48px; padding: 0 26px; border: 1px solid var(--ink); border-radius: var(--r-control); color: var(--ink); text-decoration: none; font: 500 15px/1 var(--display); }
.nature-read:hover { background: var(--ink); color: var(--paper); }
.coverage-note { margin-top: 14px; font-size: 13.5px !important; color: var(--muted); }
.nature-editorial { margin: 0; }
.nature-editorial img { width: 100%; height: auto; mix-blend-mode: multiply; }
.nature-editorial figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .nature-feature-grid { grid-template-columns: 1fr; } .nature-feature-header { flex-direction: column; align-items: start; } .nature-byline { text-align: left; } }

/* ---------- Next chapter ---------- */
.next-section { padding: clamp(64px, 8vw, 112px) 0; background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.next-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.next-section h2 { font-size: clamp(32px, 3.6vw, 52px); }
.next-section h2 em { font-style: normal; color: var(--teal); }
.next-section p + p { margin-top: 1em; }
.next-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
@media (max-width: 860px) { .next-grid { grid-template-columns: 1fr; } }

/* ---------- References ---------- */
.reference-section { padding: clamp(64px, 8vw, 112px) 0; }
.section-heading { max-width: 720px; margin-bottom: 28px; }
.section-heading h2 { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 10px; }
.section-heading p:not(.eyebrow) { color: var(--muted); }
.reference-details { border-top: 1px solid var(--rule); }
.reference-details:last-of-type { border-bottom: 1px solid var(--rule); }
.reference-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font: 500 18px/1.3 var(--display); color: var(--ink); }
.reference-details > summary::-webkit-details-marker { display: none; }
.reference-details > summary span:last-child { font: 600 11.5px/1 var(--display); letter-spacing: .12em; color: var(--muted); }
.reference-details > summary b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 8px; border: 1px solid var(--rule-strong); border-radius: 50%; font-weight: 400; color: var(--ink); }
.reference-details[open] > summary b { transform: rotate(45deg); }
.reference-details > summary:hover { color: var(--teal); }
.evidence-copy, .method-text { max-width: 760px; padding-bottom: 28px; }
.evidence-copy p + p { margin-top: .8em; }
.evidence-level { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--rule); }
.evidence-level > span { font: 560 14px var(--display); color: var(--teal); }
.evidence-level h3 { font-size: 18px; margin-bottom: 4px; }
.evidence-copy .text-link { margin-top: 12px; }
.bibliography { margin: 0 0 28px; padding-left: 28px; font-size: 15px; line-height: 1.55; columns: 2; column-gap: 48px; }
.bibliography li { break-inside: avoid; padding: 6px 0; }
.bibliography small { display: block; font-size: 12.5px; color: var(--muted); }
.image-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; padding-bottom: 28px; font-size: 14px; }
.image-credit { padding: 10px 0; border-top: 1px solid var(--rule); }
.method-text h3 { font-size: 19px; margin: 18px 0 6px; }
.method-text p { font-size: 16px; }
@media (max-width: 760px) { .bibliography { columns: 1; } .image-credits { grid-template-columns: 1fr; } }

/* ---------- Figure viewer ---------- */
#figure-dialog { width: min(96vw, 1280px); max-height: 94vh; padding: 0; border: 1px solid var(--ink); border-radius: var(--r-image); background: var(--paper); color: var(--ink); }
#figure-dialog::backdrop { background: rgba(8, 35, 50, .72); }
.dialog-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.dialog-bar h2 { flex: 1; font-size: 17px; letter-spacing: -.01em; }
.dialog-bar button { min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font: 500 14px/1 var(--display); cursor: pointer; }
.dialog-bar button:hover { border-color: var(--ink); }
.dialog-content { padding: 16px; overflow: auto; max-height: calc(94vh - 66px); }
.dialog-content img, .dialog-content svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.dialog-content.is-zoomed img, .dialog-content.is-zoomed svg { width: 200%; max-width: none; }
#dialog-caption { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 80ch; }

/* ---------- Mobile reading bar ---------- */
.tl-mobilebar { display: none; }
.mb-sheet[hidden] { display: none; }
@media (max-width: 1000px) {
  .tl-mobilebar {
    position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 45;
    display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 var(--gutter);
    background: var(--paper); border-bottom: 1px solid var(--rule);
    transform: translateY(-110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s;
  }
  .tl-mobilebar.is-on { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .mb-era { flex: 1; font: 560 14px/1.2 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-year { font: 500 14px/1 var(--display); color: var(--teal); }
  .mb-jump { min-height: 44px; min-width: 56px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font: 500 13px/1 var(--display); }
  .mb-sheet { position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + 46px); z-index: 45; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 4px var(--gutter) 12px; display: grid; }
  .mb-sheet a { display: flex; justify-content: space-between; align-items: center; min-height: 50px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: 400 16px/1.2 var(--display); }
  .mb-sheet small { color: var(--muted); font-size: 13px; }
}
@media print { .tl-rail, .tl-tools, .glance, .tl-mobilebar, .mb-sheet, .open-entry, .era-expand, .tl-more > summary { display: none !important; } .tl-more { padding: 0 !important; border: 0 !important; } }

/* October 4: three reading columns used to be a style="" attribute, which the site's security policy refuses. */
.linework-reading.reading-three { --reading-columns: 3; }

/* October 4 (builder pass). Plates load as lazy images under each drawing's labels instead of one eager sprite.
   The image box is the drawing's old <use> slot (x 35, y 58, 930 x 550 in a 1000 x 650 view), scaled to fit:
   825 x 550 at x 87.5, y 58. */
.plate-stack { position: relative; display: block; }
.plate-stack > svg { position: relative; display: block; width: 100%; height: auto; }
.figure-button .plate-stack .plate-img, .dialog-content .plate-stack .plate-img {
  position: absolute; left: 8.75%; top: 8.923%; width: 82.5%; height: 84.615%; max-width: none; margin: 0; mix-blend-mode: multiply;
}
/* The head study's selected plate already contains its labels and uses its own proportions. */
.figure-button .plate-stack.labeled-head-plate .plate-img,
.dialog-content .plate-stack.labeled-head-plate .plate-img {
  position: relative; left: auto; top: auto; display: block; width: 100%; height: auto;
}
.dialog-content.is-zoomed .plate-stack { width: 200%; max-width: none; }
.dialog-content.is-zoomed .plate-stack > svg { width: 100%; }

/* Drawings sit in the same 760px column as the words, so a key milestone reads shorter. */
.v11-visuals { max-width: 760px; }
.linework-figure .figure-button { margin-inline: 0; }

/* Phones: the drawing runs edge to edge and its labels are about 12px instead of 8px (checked on all 21 drawings: no overlaps, nothing off-screen). */
@media (max-width: 640px) {
  .linework-figure .figure-button { margin-inline: calc(-1 * var(--gutter)); width: calc(100% + 2 * var(--gutter)); max-width: none; }
  .scientific-linework { overflow: visible; }
  .scientific-linework text { font-size: 30px; } /* 30 of 1000 units: about 12px on a 390px phone; 32 pushed one 1923 label off-screen */
  .era-head { grid-template-columns: 1fr; }
  .era-count { grid-column: 1; align-self: start; }
  .era-summary { grid-column: 1; }
  .reference-details > summary span:last-child { font-size: 0; letter-spacing: 0; }
  .reference-details > summary span:last-child b { font-size: 16px; }
}
/* Touch screens: the always-visible Enlarge pill sits under the drawing, not on top of its labels. */
@media (hover: none) {
  .enlarge { position: static; display: flex; width: fit-content; margin: 8px 0 0 auto; }
}
@media (hover: none) and (max-width: 640px) { .linework-figure .enlarge { margin-right: var(--gutter); } }

/* October 4 (refix pass). */
/* The axis break in the century chart masks the axis with the page color. */
.glance-chart .axis-break rect { fill: var(--paper); }
/* Every milestone sits on one measure: the "What the study shows" row stops at the same 760px column as the words
   and drawing above it. */
.study-detail { max-width: 760px; }
.glance-chart .decade.start { text-anchor: start; }
.glance-chart .decade.end { text-anchor: end; }

/* October 4 (round 2). */
/* Century chart: a milestone's stem is only a leader line. It no longer catches the click meant for another
   milestone's tick in the same year (2014 and 2025 ticks opened the Dr. Murugan entry). */
.glance-chart .stem { pointer-events: none; }
/* Sources rows: the right-hand labels share one case, and the + is drawn so it sits centered in its circle. */
.reference-details > summary span:last-child { text-transform: uppercase; }
.reference-details > summary span:last-child b { position: relative; vertical-align: middle; font-size: 0; letter-spacing: 0; }
.reference-details > summary span:last-child b::before,
.reference-details > summary span:last-child b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.reference-details > summary span:last-child b::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Phones and tablets: a jump to an era also clears the 46px reading bar (this adds to the page's scroll padding for
   the nav), so the era's years stay visible. */
@media (max-width: 1000px) { .era { scroll-margin-top: 40px; } }

/* Each collapsed run has a visible, full-width control between the highlights. Era headers also expose the number
   hidden and a button to open all runs in that period. Filters open every run (timeline.js). */
.tl-more { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.tl-more[open] { padding-bottom: 0; border-bottom: 0; }
.tl-more > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; width: 100%; padding: 10px 14px 10px 18px;
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--teal); border-radius: var(--r-control); background: var(--teal-tint);
  font: 600 15px/1.35 var(--display); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s;
}
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary .num { color: var(--muted); }
.tl-more > summary:hover { border-color: var(--teal); background: var(--paper); }
.tl-more > summary i { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--rule-strong); border-radius: 50%; }
.tl-more > summary i::before, .tl-more > summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.tl-more > summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.tl-more[open] > summary i::after { transform: translate(-50%, -50%) rotate(0); }
@media (prefers-reduced-motion: no-preference) { .tl-more > summary i::after { transition: transform .25s var(--ease); } }
.tl-content:not(.view-key) .tl-more { padding: 0; border-bottom: 0; }
.tl-content:not(.view-key) .tl-more > summary { display: none; }
/* The century chart is drawn by the script in place of the era list. On screens wide enough for the chart, the list
   takes the chart's exact box, so the swap moves nothing below it (it used to nudge the intro down by about 70px on
   load). Above 920px both share the chart's 1240 x 170 shape; from 721px to 920px, where that shape is shorter than
   the list, both are 118px tall. */
@media (min-width: 721px) { .glance-fallback { align-content: start; } }
@media (min-width: 921px) { .glance-fallback, .has-chart .glance-chart { aspect-ratio: 1240 / 170; } }
@media (min-width: 721px) and (max-width: 920px) { .glance-fallback, .has-chart .glance-chart { height: 118px; } }

/* October 4 (refix round 1). Key moments, in brief. Every milestone still shows each entry in full. In brief, each
   entry keeps its year, title, summary and "Why it matters"; its drawing sits beside the words at a smaller size, and
   the drawing's reading key moves into "What the study shows" and the enlarged view (timeline.js). This takes the
   default view from about 26 phone screens to about 15. */
.is-brief .linework-reading { display: none; }
@media (min-width: 721px) {
  .is-brief .v11-discovery-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 42%, 400px); column-gap: clamp(24px, 3.4vw, 48px); align-items: start; }
  .is-brief .v11-visuals { margin-top: 4px; max-width: none; }
  .is-brief .v11-visuals figure + figure { margin-top: 24px; }
  .is-brief .scientific-linework { overflow: visible; }
  .is-brief .scientific-linework text { font-size: 30px; } /* about 12px at 400px wide, as on a phone in full view */
  .is-brief .study-detail { max-width: none; }
}
@media (max-width: 720px) {
  /* The year and category sit beside a small drawing; the title and words run full width below. */
  .is-brief .v11-discovery-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .is-brief .v11-copy { display: contents; }
  .is-brief .v11-copy > * { grid-column: 1 / -1; }
  .is-brief .milestone-year { grid-column: 1; grid-row: 1; align-self: end; }
  .is-brief .milestone-category { grid-column: 1; grid-row: 2; align-self: start; margin-bottom: 4px; }
  .is-brief .milestone h3 { margin-top: 8px; }
  .is-brief .v11-visuals:has(.linework-figure) { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 152px; margin: 0; }
  .is-brief .linework-figure .figure-label, .is-brief .linework-figure figcaption { display: none; }
  .is-brief .linework-figure .figure-button { width: 100%; max-width: none; margin: 0; }
  .is-brief .scientific-linework text, .is-brief .scientific-linework line { display: none; } /* labels return when enlarged */
  /* Original paper figures keep their label, caption and credit beside a small copy, after the words. */
  .is-brief .v11-visuals:has(figure[data-kind="paper"]) { grid-column: 1 / -1; margin-top: 18px; }
  .is-brief figure[data-kind="paper"] { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .is-brief figure[data-kind="paper"] > * { grid-column: 2; }
  .is-brief figure[data-kind="paper"] > .figure-button { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .is-brief figure[data-kind="paper"] .figure-reading-key { display: none; }
  .is-brief figure[data-kind="paper"] .figure-label { justify-content: flex-start; flex-wrap: wrap; gap: 0 10px; padding-top: 0; border-top: 0; }
  .is-brief figure[data-kind="paper"] figcaption { margin-top: 6px; font-size: 13px; }
  .is-brief .v11-visuals figure + figure { margin-top: 16px; }
  /* "Enlarge" becomes a small + in the drawing's corner. */
  .is-brief .figure-button .enlarge { position: absolute; right: 2px; bottom: 2px; display: block; width: 26px; height: 26px; margin: 0; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper); font-size: 0; opacity: 1; }
  .is-brief .figure-button .enlarge::before, .is-brief .figure-button .enlarge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
  .is-brief .figure-button .enlarge::after { transform: translate(-50%, -50%) rotate(90deg); }
}
/* The enlarged view shows the reading key above the caption. */
#dialog-caption .linework-reading { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 12px; }
#dialog-caption .figure-reading-key { margin: 0 0 8px; }
#dialog-caption .dialog-note .credit { display: block; margin-top: 4px; font-size: 12.5px; }
/* Primer: the definition stays; where the light comes from, how faint it is and why it matters fold below it. */
.primer-more { margin-top: 20px; }
.primer-more > summary { font-size: 16px; }
.primer-more .more-body { max-width: none; }
.primer-more .more-body > p { font-size: 17px; }
.primer-more .primer-facts { margin-top: 20px; }
@media (max-width: 720px) {
  /* In brief the small drawing shows its plate edge to edge (its labels are hidden until it is enlarged). */
  .is-brief .linework-figure .plate-stack .plate-img { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
  .is-brief .linework-figure .plate-stack.labeled-head-plate .plate-img { left: auto; top: auto; height: auto; }
  /* Phones read the brief entries a little tighter. */
  .is-brief .milestone { padding: 22px 0; }
  .is-brief .milestone-summary { font-size: 17px; line-height: 1.55; }
  .is-brief .why { font-size: 15px; line-height: 1.5; }
  .is-brief .study-detail { margin-top: 16px; }
  /* The chart's legend describes the chart, which phones do not show (they show the era list). */
  .has-chart .glance-legend { display: none; }
  .glance-fallback a { padding: 10px 0; gap: 0 8px; }
  .era-summary { font-size: 16px; line-height: 1.55; }
}
@media (max-width: 520px) {
  /* Curator card: the portrait sits beside her name and role; her text runs the full width below. */
  .curator-card { grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; }
  .curator-card > div { display: contents; }
  .curator-card > img { grid-row: 1 / span 3; align-self: center; }
  .curator-card .eyebrow, .curator-card h2, .curator-card .curator-role { grid-column: 2; }
  .curator-card .curator-role { margin-bottom: 0; }
  .curator-card .curator-text, .curator-card .curator-actions { grid-column: 1 / -1; }
  .curator-card .curator-text { margin-top: 14px; }
}
@media (max-width: 720px) {
  .is-brief .why span { display: inline; margin: 0 6px 0 0; }
  .tl-more { padding: 12px 0; }
  .era + .era { margin-top: 44px; }
}
/* In brief, an entry ends on its "What the study shows" rule; the entry's own rule just below it read as an empty row. */
.is-brief .milestone { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 720px) {
  .is-brief .milestone { padding-top: 28px; }
  .tl-intro { padding: 32px 0; }
}