/* Universal Law visual identity. Presentation only; no scientific authority.
   Local assets only. Status words and line patterns remain explicit. */
:root {
  color-scheme: dark;
  --ul-background: #07111f;
  --ul-surface: #0e1b2e;
  --ul-raised: #13243b;
  --ul-text: #eff5fd;
  --ul-muted: #b0c2d6;
  --ul-link: #78c1ff;
  --ul-gold: #e9c675;
  --ul-accept: #8cdec4;
  --ul-amend: #ffd095;
  --ul-error: #ffb3b7;
  --ul-engineering: #bdcbe0;
  --ul-border: #334960;
  --ul-edge: #7390af;
  --ul-focus: #e9c675;
  --ul-button: #e9c675;
  --ul-buttonText: #102039;
  /* Radius family: layout variables, not colours (brand/tokens.json records colours only). */
  --ul-radius-s: 6px; --ul-radius-m: 8px; --ul-radius-l: 18px; --ul-radius-pill: 999px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ul-background: #f6f8fc;
    --ul-surface: #ffffff;
    --ul-raised: #edf2f9;
    --ul-text: #17263b;
    --ul-muted: #495e76;
    --ul-link: #10558d;
    --ul-gold: #78570b;
    --ul-accept: #14634d;
    --ul-amend: #874608;
    --ul-error: #9c2c3a;
    --ul-engineering: #526179;
    --ul-border: #cad6e4;
    --ul-edge: #6a7e96;
    --ul-focus: #10558d;
    --ul-button: #17314f;
    --ul-buttonText: #ffffff;
  }
}
html { scroll-padding-top: 24px; }
body {
  background: var(--ul-background);
  color: var(--ul-text);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ul-link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
body > header {
  max-width: 1360px; margin: auto; padding: 28px 4vw;
  border-bottom: 1px solid var(--ul-border); border-top: 3px solid var(--ul-gold);
  gap: 24px; flex-wrap: wrap;
}
.brand {
  color: var(--ul-text); font-weight: 750; letter-spacing: .13em;
  position: relative; padding-left: 57px; min-height: 44px; line-height: 1.65;
}
.brand::before { content: ""; position: absolute; left: 0; top: 1px; width: 42px; height: 42px; background: url("brand/mark.svg?site-release=ef97bd43ea3d8999dbf26e5707d467987a745bf961cac2b3163f94062d087ba7") center/contain no-repeat; }
.brand span { color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
nav { gap: 12px 24px; flex-wrap: wrap; }
nav a { color: var(--ul-text); min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; padding: 0 6px; margin: 0 -6px; }
nav a:hover { color: var(--ul-link); text-decoration: underline; }
nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
main { max-width: 1220px; padding: 0 36px; }
section { padding: 64px 0; border-bottom-color: var(--ul-border); }
.hero, .museum-intro { padding-top: 76px; }
.hero h1, .museum-intro h1 { max-width: 940px; }
h1, h2 { color: var(--ul-text); font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; font-weight: 400; }
h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.09; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.2; }
h3, h4 { color: var(--ul-text); }
h3 { font-size: 21px; line-height: 1.35; font-weight: 600; }
h4 { font-size: 16px; line-height: 1.4; }
/* Reading measure for running prose. The museum's two status lines keep the full width: verification rewrites them, and under the measure each verified text took a second line at 1280px and moved the page below it by 23.8px. */
main > section > p:not(.eyebrow):not(.intro):not(#museum-state):not(#conditional-route-status), .latest-work > p, .about-section > div > p { max-width: 78ch; }
.eyebrow { color: var(--ul-gold); font-size: 12px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.intro, .museum-intro #museum-state, .muted, figcaption, footer { color: var(--ul-muted); }
#museum-state.error, .conditional-route-refusal, .museum-card.refused p { color: var(--ul-error); }
#conditional-route-status { font-size: 14px; }
#conditional-route-status:not(.error) { color: var(--ul-muted); }
.intro { max-width: 770px; font-size: 18px; }
.actions { gap: 12px; flex-wrap: wrap; }
.button, button {
  border: 1px solid var(--ul-button); background: var(--ul-button); color: var(--ul-buttonText);
  border-radius: var(--ul-radius-s); padding: 11px 19px; min-height: 44px; font: 650 14px/1.5 system-ui, sans-serif;
  box-shadow: none;
}
.button:hover, button:hover { filter: brightness(1.06); text-decoration: none; }
.button.secondary { background: transparent; border-color: var(--ul-edge); color: var(--ul-link); }
.button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
button:disabled { filter: none; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
/* Scope note: a neutral edge on a raised block. Amber stays reserved for .cards article.amend, .status-object[data-class="AMEND/open"], .legend-open, .museum-card.amend-open and .fixture-absent. */
.boundary { color: var(--ul-text); background: var(--ul-raised); border-left: 3px solid var(--ul-edge); border-radius: 0 var(--ul-radius-s) var(--ul-radius-s) 0; padding: 13px 18px; line-height: 1.65; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards article { min-width: 0; background: var(--ul-surface); border: 1px solid var(--ul-border); border-top: 3px solid var(--ul-edge); border-radius: var(--ul-radius-m); padding: 25px; }
.cards article.accept { border-top-color: var(--ul-accept); }
.cards article.amend { border-top-color: var(--ul-amend); border-top-style: dashed; }
.cards article.engineering { border-top: 3px double var(--ul-engineering); }
.cards p, td small, dt { color: var(--ul-muted); }
.count { color: var(--ul-text); font-size: 44px; }
.status-group summary, .status-object { border-color: var(--ul-border); }
summary { color: var(--ul-link); cursor: pointer; font-weight: 600; min-height: 40px; }
.status-object[data-class="AMEND/open"] { border-left-color: var(--ul-amend); }
.custody, .source-header { background: var(--ul-raised); border: 1px solid var(--ul-border); border-radius: var(--ul-radius-s); }
.source-header .canvas-disclaimer, .cards .source-header .canvas-disclaimer { border-color: var(--ul-border); color: var(--ul-muted); }
.explorer { background: var(--ul-surface); border-color: var(--ul-border); border-radius: var(--ul-radius-m); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
select, input { color: var(--ul-text); background: var(--ul-surface); border: 1px solid var(--ul-edge); min-height: 44px; max-width: 100%; border-radius: var(--ul-radius-s); }
input::placeholder { color: var(--ul-muted); opacity: 1; }
code, pre, dd, .source-identity { overflow-wrap: anywhere; }
code { color: inherit; }
/* Legibility floors; sizes only go up. Inline code is .9em of its context but never below the 13px that code, hashes and exact decimals share (style.css set 12px everywhere);
   a code block is never below 13px nor below the text around it (the 16px exact outputs on Reproduce and Cite stay 16px) and its code takes the block's size,
   except the museum claim-column blocks (.claim-column pre), which are 12px; quoted source identities (.source-identity dd) are 12px (brand.css loads after museum.css). */
code { font-size: max(.9em, 13px); }
pre { font-size: max(13px, 1em); }
pre code { font-size: inherit; }
.source-identity dt, .source-identity dd, .claim-column pre, .claim-column details, .class-legend span, .object-class { font-size: 12px; }
th { color: var(--ul-muted); background: var(--ul-raised); }
caption { text-align: left; color: var(--ul-muted); font-size: 13px; padding: 8px 12px; }
td { border-color: var(--ul-border); }
.table-wrap { border: 1px solid var(--ul-border); border-radius: var(--ul-radius-s); }
.error { color: var(--ul-error); }
.good { color: var(--ul-accept); }
footer { max-width: 1220px; margin: auto; padding: 32px 36px 56px; border-top: 1px solid var(--ul-border); font-size: 14px; color: var(--ul-muted); }
footer p { margin: 8px 0; }
footer a { color: var(--ul-text); }
footer p a, .site-map a { display: inline-block; box-sizing: border-box; min-height: 44px; padding: 10px 2px; margin: 0; }
main > section:last-child { border-bottom: 0; }
/* Existing plots retain a light drawing surface; their data/geometry code is untouched. */
#coefficient-chart, .geometry-host canvas, .geometry-host svg { background: #ffffff; border-radius: var(--ul-radius-s); }
#coefficient-chart { border: 1px solid var(--ul-border); }
#coefficient-chart:empty { background: transparent; }
#coefficient-chart text { fill: #34475c; }
#coefficient-chart line { stroke: #6a7e96; }
#coefficient-chart rect[fill="#2b7565"] { fill: #216ca8; }
#coefficient-chart rect[fill="#adc6ba"] { fill: #a5bed5; }
/* Museum classifications use words AND distinct patterns, never brand color alone. */
.exhibit-links a { background: var(--ul-surface); border-color: var(--ul-edge); border-radius: var(--ul-radius-m); }
.exhibit-links a:hover { background: var(--ul-raised); }
.exhibit-links span { color: var(--ul-muted); }
.class-legend span { background: var(--ul-surface); color: var(--ul-text); }
.legend-accept { border-color: var(--ul-accept); }
.legend-open { border-color: var(--ul-amend); border-style: dashed; }
.legend-engineering { border-color: var(--ul-engineering); border-style: double; }
.legend-illustration { border-color: var(--ul-edge); border-style: dotted; }
.museum-card { background: var(--ul-surface); border-color: var(--ul-accept); border-radius: var(--ul-radius-m); }
.museum-card.amend-open { border-color: var(--ul-amend); border-style: dashed; }
.museum-card.engineering-only { border-color: var(--ul-engineering); border-style: double; }
.museum-card.illustration { border-color: var(--ul-edge); border-style: dotted; }
/* Unavailable views use a fifth pattern no class uses (thick solid left bar) with a literal legend label; .fixture-absent stays dashed amber because an absent fixture is an open obligation. */
.museum-card.refused { border-style: solid; border-width: 1px; border-left-width: 8px; border-color: var(--ul-error); padding: 20px; }
.legend-refused { border: 1px solid var(--ul-error); border-left-width: 8px; }
.museum-card-header { background: var(--ul-raised); border-color: var(--ul-border); }
.amend-open .object-class { color: var(--ul-amend); }
.source-identity dt, .canvas-disclaimer, .claim-column h4 { color: var(--ul-muted); }
.source-quote { color: var(--ul-text); }
.claim-column + .claim-column, .claim-column:first-child { border-color: var(--ul-border); }
.claim-column pre { background: var(--ul-raised); border-color: var(--ul-border); }
.engineering-strip { background: var(--ul-raised); border-color: var(--ul-border); color: var(--ul-muted); }
.fixture-absent { background: var(--ul-raised); border-color: var(--ul-amend); }
.geometry-host:focus { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
.geometry-host > .museum-visual:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
/* Room for that ring outside the figure, where it sits on the card surface in both schemes (inside, it would cross the white SVG): .geometry-host{overflow:hidden} (museum.css) clips at its padding edge, so the host gains 7px (offset 4px + ring 3px) and gives the sides back with -7px margins inside .museum-visual's 18-24px padding; the figure's width, left edge and sideways scroll are unchanged. */
.geometry-host { padding: 7px; margin: 0 -7px; max-width: none; }
/* The conditional-route card (conditionals.mjs) has no padding, and its overflow:hidden (museum.css) clips at the padding edge. Its two links are direct children of .museum-card and its six
   summaries sit in ol > li > details with no inline-end padding, so the card cut one side of their 3px ring at its 4px offset (left of the links, right of the summaries). The card takes the
   inline inset of the other cards' rows (24px; 18px at museum.css's 600px phone step), more than the 7px the ring needs. */
#conditional-route > .museum-card { padding-inline: 24px; }
@media (max-width: 600px) { #conditional-route > .museum-card { padding-inline: 18px; } }
/* 8px between the summaries' list items, so a summary's ring (7px below it) ends above the next summary's text. On phones an open quote drops its 40px blockquote margins and takes its list item's width; the list keeps its 40px indent. */
#conditional-route ol > li + li { margin-top: 8px; }
@media (max-width: 600px) { #conditional-route blockquote { margin-inline: 0; } }
.skip-link { position: absolute; left: 20px; top: -120px; z-index: 10; padding: 12px 18px; background: var(--ul-surface); border: 2px solid var(--ul-focus); border-radius: var(--ul-radius-s); color: var(--ul-text); }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, canvas:focus-visible, .atlas-space ul[tabindex="0"]:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
#formal-coverage:focus, .table-wrap:focus-visible { outline: 3px solid var(--ul-focus); outline-offset: 4px; }
@media (max-width: 950px) { body > header { align-items: flex-start; } .cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  body > header { padding: 20px; gap: 20px; }
  main { padding: 0 20px; }
  footer { padding: 28px 20px 40px; }
  nav { gap: 4px 18px; }
  .hero, .museum-intro { padding-top: 42px; }
  section { padding: 44px 0; }
  .intro { font-size: 17px; }
  .actions { align-items: stretch; }
  .actions .button { width: 100%; text-align: center; }
  .explorer, .catalog-filters { grid-template-columns: minmax(0, 1fr); }
  .explorer { padding: 18px; }
  .section-heading > a { white-space: normal; }
  .source-header { padding: 12px; }
  .cards article { padding: 20px; }
  h1 { font-size: 39px; }
  .claim-column + .claim-column { border-color: var(--ul-border); }
  #inventory table { min-width: 560px; }
  #formal-coverage-table { min-width: 520px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) {
  body, .cards article, .museum-card, .source-header, .boundary, .custody, .explorer { background: Canvas; color: CanvasText; }
  a, .button.secondary { color: LinkText; }
  .button, button { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, canvas:focus-visible, .atlas-space ul[tabindex="0"]:focus-visible { outline-color: Highlight; }
  #formal-coverage:focus, .table-wrap:focus-visible { outline-color: Highlight; }
  .geometry-host > .museum-visual:focus-visible { outline-color: Highlight; }
  .site-map, .lesson-links a, .legend-refused, .museum-card.refused { border-color: CanvasText; }
  .brand::before { display: none; } .brand { padding-left: 0; }
}

/* Secondary reader routes leave the four primary destinations unchanged; the kicker names the row and the links are 44px tap targets. */
.reader-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px 24px; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; padding: 4px 4vw; box-sizing: border-box; border-bottom: 1px solid var(--ul-border); }
.reader-tools-label { margin-right: auto; color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.reader-tools a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; margin: 0 -6px; text-decoration: none; color: var(--ul-text); font-size: 13px; }
.reader-tools a:hover { text-decoration: underline; }
@media (max-width: 640px) { .reader-tools { padding: 4px 20px; } }
/* Breadcrumb on the four deep pages (one real level; never on a primary page); uppercase via CSS on sentence-case text. */
.breadcrumb { display: block; font-weight: 400; margin: 0 0 22px; } /* 22px keeps the 3px focus ring at its 4px offset clear of the eyebrow below (14px overlapped it by 5px). */
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ul-muted); }
.breadcrumb li + li::before { content: "/" / ""; margin-right: 10px; } /* alternative text "" keeps the separator decorative for assistive technology */
.breadcrumb li[aria-current="page"] { color: var(--ul-text); }
.breadcrumb a { color: var(--ul-link); font-size: inherit; display: inline-block; padding: 12px 0; margin: -12px 0; }
/* In-page outline under a page intro (Source records): plain weight, wrapping row of 44px targets; undoes style.css nav{font-weight:650}. */
.page-outline { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 14px 0 0; font-size: 14px; font-weight: 400; }
.page-outline a { min-height: 44px; display: inline-flex; align-items: center; }
/* Shared footer site map: every route from every page without script; undoes style.css nav{display:flex;font-weight:650}. */
.site-map { display: block; font-weight: 400; font-size: 13px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ul-border); }
.site-map ul { list-style: none; margin: 0; padding: 0; }
.site-map > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.site-map > ul > li { margin: 0; min-width: 0; }
.site-map strong { display: block; color: var(--ul-text); font-size: 12px; margin-bottom: 8px; }
.site-map .site-map-links li { margin: 0; }
.site-map .site-map-links a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .site-map > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .site-map > ul > li:last-child { grid-column: 1 / -1; }
  .site-map > ul > li:last-child > .site-map-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
@media print {
  .site-map > ul { display: block; }
  .site-map > ul > li { margin: 8px 0; }
  .site-map strong { display: inline; margin-right: 6px; }
  .site-map .site-map-links, .site-map > ul > li:last-child > .site-map-links { display: inline; }
  .site-map .site-map-links li { display: inline; }
  .site-map .site-map-links li + li::before { content: " · " / ""; }
  .site-map .site-map-links a { display: inline; min-height: 0; padding: 0; font-size: inherit; }
}

/* Lesson/reading-path links, shared by Explore, Measure and the Research hero (moved from explore.css: measure.html loads explore.css before brand.css). */
.lesson-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 25px; gap: 16px; }
.lesson-links a { background: var(--ul-surface); padding: 16px 20px; border: 1px solid var(--ul-border); border-radius: var(--ul-radius-m); font-size: 15px; text-decoration: none; }
.lesson-links a:hover { border-color: var(--ul-edge); }
.lesson-links span { color: var(--ul-gold); font: 17px Georgia, serif; margin-right: 14px; }
.lesson-links a { display: flex; align-items: center; min-height: 44px; margin: 0; }
.lesson-links.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 950px) { .lesson-links.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lesson-links { grid-template-columns: 1fr; gap: 8px; }
  .lesson-links.four-up { grid-template-columns: 1fr; }
  .lesson-links a { padding: 12px 16px; }
}
/* Dated list navigation (research hero, Library landing); undoes style.css nav{display:flex;font-weight:650}. */
.cut-list { display: block; font-weight: 400; font-size: 15px; margin-top: 30px; max-width: 78ch; }
.cut-list > p { margin: 0 0 6px; color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.cut-list ol, .cut-list ul { margin: 0; padding-left: 22px; line-height: 1.7; }
.cut-list li { margin: 6px 0; }
/* Phone legibility (W5 #4, W5b L4): page headings survive the WCAG 1.4.12 text-spacing override at 375px and 320px (Home and Library measured). */
h1 { overflow-wrap: anywhere; }

/* Shared reader components (moved from home.css, so a page without home.css renders them alike: dependencies.html's two p.section-intro are the same muted aside). */
.text-link { font-size: 14px; padding: 10px 0; }
.section-intro { max-width: 260px; color: var(--ul-muted); font-size: 15px; }
.idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin-top: 36px; }
.step-number { color: var(--ul-gold); font: 14px ui-monospace, monospace; }
.idea-grid h3 { font-size: 18px; line-height: 1.5; margin-top: 20px; }
.idea-grid p { color: var(--ul-muted); font-size: 15px; }
/* One label scale: card and result kickers share the eyebrow's 12px/.16em, uppercased by CSS so source text may be sentence case. */
.card-kicker, .result-kicker { color: var(--ul-muted); font-size: 12px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
@media (max-width: 950px) {
  .idea-grid { grid-template-columns: 1fr; gap: 24px; }
  .idea-grid article { border-bottom: 1px solid var(--ul-border); padding-bottom: 12px; }
  .idea-grid article:last-child { border-bottom: 0; }
}

/* Reader shell: a compact, task-first entrance shared by all public page headers.
   The :is() group keeps reader-selector specificity while covering supporting pages.
   Existing brand tokens and literal scientific scope labels keep their meaning. */
:is(.reader-shell, body) > header { max-width: 1280px; padding: 16px 36px; gap: 16px 28px; }
:is(.reader-shell, body) .brand { padding-left: 45px; min-height: 36px; font-size: 14px; letter-spacing: .12em; }
:is(.reader-shell, body) .brand::before { width: 32px; height: 32px; top: 3px; }
:is(.reader-shell, body) .brand span { font-size: 10px; letter-spacing: .14em; }
:is(.reader-shell, body) > header nav { gap: 6px 22px; }
:is(.reader-shell, body) > header nav a { margin: 0; padding: 0; min-width: 44px; font-size: 13px; }
:is(.reader-shell, body) > header nav a[aria-current=page] { color: var(--ul-link); }
:is(.reader-shell, body) > .reader-tools { max-width: 1280px; padding: 0 36px; gap: 20px; }
:is(.reader-shell, body) > .reader-tools a { min-height: 44px; min-width: 44px; font-size: 12px; }
:is(.reader-shell, body) .reader-tools-label { font-size: 10px; letter-spacing: .13em; }
.reader-shell main { max-width: 1200px; }
.reader-shell section { padding: 44px 0; }
.reader-shell .hero, .reader-shell .explore-intro { padding-top: 40px; padding-bottom: 32px; }
.reader-shell h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; margin: 14px 0 22px; }
.reader-shell .eyebrow { margin-bottom: 12px; }
.reader-shell .intro { font-size: 18px; line-height: 1.65; max-width: 64ch; }
.reader-shell .actions { margin: 24px 0 12px; gap: 10px; }
.reader-shell .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 18px; }
.reader-shell .hero-cut { font-size: 14px; line-height: 1.6; max-width: 78ch; margin-top: 22px; }
.reader-shell .home-hero { grid-template-columns: 1.15fr 1fr; gap: 36px; padding-top: 42px; padding-bottom: 36px; }
.reader-shell .home-hero h1 { font-size: clamp(44px, 5.4vw, 72px); }
.reader-shell .home-hero .intro { font-size: 18px; line-height: 1.65; max-width: 43ch; }
.reader-shell .hero-note { margin-top: 18px; font-size: 14px; max-width: 50ch; }
.reader-shell .landscape-art { padding: 12px; border: 1px solid var(--ul-border); border-radius: var(--ul-radius-l); background: var(--ul-surface); }
.reader-shell .landscape-art svg { max-height: 330px; }
.reader-shell .landscape-art figcaption { font-size: 12px; letter-spacing: 0; }
.reader-shell #the-idea { padding-top: 36px; }
.reader-shell #the-idea h2 { font-size: clamp(28px, 3.2vw, 38px); }
.reader-shell .idea-grid { gap: 28px; }
.reader-shell .idea-grid h3 { margin-top: 10px; }
.reader-shell .reader-resource { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0 0; font-size: 14px; }
.reader-shell .reader-resource p { margin: 0; }
.reader-shell .reader-resource .cut-note { display: block; }
/* current.css loads after this sheet: scope the compact generated panel precisely.
   No status or refusal is clipped; full source details remain a native disclosure. */
:is(.reader-shell, body) .current-research.current-research-compact { padding: 16px 20px; margin: 24px 0 32px; background: var(--ul-surface); border-color: var(--ul-border); }
:is(.reader-shell, body) .current-research-compact h2 { font: 650 14px/1.5 system-ui, sans-serif; letter-spacing: 0; margin: 0 0 6px; }
:is(.reader-shell, body) .current-research-compact > .current-state,
:is(.reader-shell, body) .current-research-compact > [role="status"] > .current-state { font-size: 13px; line-height: 1.6; margin: 0; max-width: 100%; }
/* Preserve the direct-child paragraph's reading measure through the status wrapper. */
main > #current-research > [role="status"] > .current-state { max-width: 78ch; }
:is(.reader-shell, body) .current-research-compact > .current-source-details { margin-top: 6px; }
:is(.reader-shell, body) .current-source-details > summary { color: var(--ul-link); font-size: 13px; font-weight: 650; padding: 8px 0; min-height: 44px; }
:is(.reader-shell, body) .current-research-compact .current-source-details[open] { border-top: 1px solid var(--ul-border); margin-top: 14px; padding-top: 6px; }
:is(.reader-shell, body) .current-research-compact .current-state[data-freshness=stale] { border-color: var(--ul-amend); }
.reader-shell .explore-intro h1 { max-width: 900px; }
.reader-shell .explore-intro .intro { margin-bottom: 10px; }
.reader-shell .teaching-label { margin: 4px 0 0; font-size: 12px; }
.reader-shell .lesson-links { margin-top: 20px; gap: 10px; }
.reader-shell .lesson-links a { padding: 12px 14px; font-size: 14px; }
.reader-shell .lesson-links span { font-size: 14px; margin-right: 10px; white-space: nowrap; flex-shrink: 0; }
.reader-shell .explore-intro #explore-state-status { margin: 14px 0 0; font-size: 12px; }
.reader-shell .explore-intro #explore-state-status + p { margin: 0; font-size: 12px; }
.reader-shell .lesson-heading { margin-bottom: 22px; }
.reader-shell .experiment-controls { padding: 24px; }
.reader-shell .experiment-controls .try-this { margin-bottom: 18px; }
.reader-shell .experiment-controls .control-help { margin-bottom: 16px; }
.reader-shell .experiment-options { margin-top: 4px; border-top: 1px solid var(--ul-border); }
.reader-shell .experiment-options > summary { padding: 10px 0; min-height: 44px; color: var(--ul-link); font-size: 14px; }
.reader-shell .experiment-options .control-actions { margin: 12px 0; }
.reader-shell .experiment-result { padding: 24px; }
.reader-shell .lesson-explanation { max-width: 78ch; margin-top: 24px; color: var(--ul-muted); }
.reader-shell .lesson-explanation p { font-size: 16px; }
.reader-shell .reading-questions { padding-top: 28px; }
.reader-shell .reading-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.reader-shell .reading-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--ul-border); border-radius: var(--ul-radius-l); background: var(--ul-surface); color: var(--ul-text); text-decoration: none; min-width: 0; }
.reader-shell .reading-card:hover { border-color: var(--ul-edge); background: var(--ul-raised); }
.reader-shell .reading-card h3 { font: 26px/1.25 Georgia, serif; margin: 14px 0; }
.reader-shell .reading-card p { font-size: 15px; color: var(--ul-muted); margin: 0 0 24px; }
.reader-shell .reading-card .card-action { margin-top: auto; font-size: 13px; }
.reader-shell .reading-beginner { font-size: 14px; margin: 20px 0 0; }
.reader-shell .reader-scope { font-size: 14px; color: var(--ul-muted); max-width: 78ch; margin: 20px 0 0; }
.reader-shell .reader-archive { border: 1px solid var(--ul-border); border-radius: var(--ul-radius-m); background: var(--ul-surface); padding: 0 20px; margin: 18px 0; min-width: 0; }
.reader-shell .reader-archive > summary { padding: 16px 0; font-size: 16px; color: var(--ul-link); min-height: 52px; }
.reader-shell .reader-archive > summary small { display: block; color: var(--ul-muted); font-size: 13px; line-height: 1.5; margin-top: 4px; padding-left: 20px; }
.reader-shell .reader-archive[open] { padding-bottom: 20px; }
.reader-shell .reader-archive[open] > summary { border-bottom: 1px solid var(--ul-border); }
.reader-shell .reader-archive > .cut-list { margin: 20px 0; }
.reader-shell .reader-archive .latest-feature, .reader-shell .reader-archive .latest-card { background: var(--ul-background); }
.reader-shell .library-routes { margin-top: 20px; gap: 8px 24px; }
.reader-shell .library-routes a { font-size: 14px; padding: 0; margin: 0; }
.reader-shell #inventory .catalog-filters { margin: 22px 0; }
.reader-shell #inventory .table-wrap { max-height: 560px; }
.reader-shell :is(.reader-archive, .reading-questions, .lesson-explanation) { scroll-margin-top: 24px; }
@media(max-width: 800px) {
  :is(.reader-shell, body) > header { align-items: flex-start; flex-direction: column; padding: 14px 20px 8px; gap: 8px; }
  :is(.reader-shell, body) > header nav { width: 100%; justify-content: space-between; gap: 4px 10px; }
  :is(.reader-shell, body) > header nav a { font-size: 12px; min-height: 44px; }
  :is(.reader-shell, body) > .reader-tools { padding: 0 20px; gap: 18px; }
  .reader-shell main { padding: 0 20px; }
  .reader-shell section { padding: 32px 0; }
  .reader-shell .hero, .reader-shell .explore-intro { padding-top: 30px; padding-bottom: 26px; }
  .reader-shell h1 { font-size: 42px; }
  .reader-shell .intro { font-size: 17px; line-height: 1.65; }
  .reader-shell .home-hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 30px; padding-bottom: 30px; }
  .reader-shell .home-hero h1 { font-size: 46px; }
  .reader-shell .home-hero .intro { font-size: 17px; }
  .reader-shell .home-hero .actions { flex-direction: row; align-items: stretch; }
  .reader-shell .landscape-art { width: 100%; max-width: none; padding: 8px 14px; }
  .reader-shell .landscape-art svg { height: 185px; }
  .reader-shell .landscape-art figcaption { margin: 0 0 6px; }
  .reader-shell .idea-grid { gap: 12px; }
  .reader-shell .idea-grid article { padding-bottom: 14px; }
  .reader-shell .idea-grid article:last-child { padding-bottom: 0; }
  .reader-shell .section-heading { display: block; margin-bottom: 20px; }
  .reader-shell .section-heading > a { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; }
  .reader-shell .reading-card-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .reader-shell .reading-card { padding: 20px; }
  .reader-shell .reading-card h3 { font-size: 25px; margin: 10px 0; }
  .reader-shell .reading-card p { margin-bottom: 16px; }
  .reader-shell .reader-archive { padding: 0 16px; }
  .reader-shell .current-research.current-research-compact { padding: 14px 16px; }
  .reader-shell .lesson-links.four-up { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .reader-shell .lesson-links a { padding: 10px 12px; font-size: 12px; line-height: 1.4; }
  .reader-shell .lesson-links span { margin-right: 7px; font-size: 13px; }
  .reader-shell .experiment-controls, .reader-shell .experiment-result { padding: 20px 16px; }
  .reader-shell .library-routes { gap: 0 20px; }
}
@media(max-width: 800px) {
  .reader-research .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reader-research .actions .button { padding-inline: 12px; font-size: 13px; }
  .reader-explore .explore-intro { padding-bottom: 20px; }
  .reader-explore #peaks { padding-top: 24px; }
  .reader-explore #peaks .lesson-heading { margin-bottom: 16px; }
}
.reader-shell .reader-share { color: var(--ul-muted); font-size: 13px; margin-top: 20px; }
.reader-shell .reader-share p { margin: 6px 0; }
@media(max-width: 359px) {
  .reader-shell main { padding: 0 16px; }
  :is(.reader-shell, body) > header { padding-inline: 16px; }
  :is(.reader-shell, body) > header nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 8px; }
  :is(.reader-shell, body) > header nav a { grid-column: span 2; justify-content: center; }
  :is(.reader-shell, body) > header nav a:nth-child(n + 4) { grid-column: span 3; }
  .reader-shell h1, .reader-shell .home-hero h1 { font-size: 38px; }
  .reader-shell .home-hero .actions .button { width: 100%; }
  .reader-shell .lesson-links.four-up { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion: reduce) { .reader-shell, .reader-shell * { scroll-behavior: auto; } }
@media(forced-colors: active) { .reader-shell :is(.reading-card,.reader-archive,.landscape-art) { border-color: CanvasText; } }
@media print {
  :is(.reader-shell, body) > .reader-tools, .reader-shell .actions, .reader-shell .library-routes { display: none; }
  .reader-shell section { padding: 24px 0; }
  .reader-shell .home-hero { display: block; }
  .reader-shell .landscape-art { max-width: 350px; background: white; }
  .reader-shell .reader-archive, .reader-shell .reading-card { background: white; color: black; }
  .reader-shell .reading-card-grid { display: block; }
  .reader-shell .reading-card { break-inside: avoid; margin: 12px 0; }
  .reader-shell #inventory .table-wrap { max-height: none; }
}

/* Print keeps the evidence in both colour schemes: every state and control colour takes its light value, and text, links and borders take darker print values on white or near-white (#f4f4f4) surfaces.
   Hidden here: the skip link, the header navigation, the research tools, the page outline, action-button rows, other buttons and empty search fields (with their labels); dependencies.css hides its filter controls
   and selected-node section links, explore.css the Explore and Measure experiment controls. Breadcrumbs, the site map and footer links print; Dependencies keeps its node and relation-name buttons, whose
   text is the evidence (dependencies.css); a filled search field prints its query beside the result count it produced; tables, code, hashes and source links stay; a collapsed disclosure says so.
   Kept last in this file: .reader-tools and .page-outline set display earlier at equal specificity. button.button: a <button class="button"> outranks the element selector (style.css .button sets display). */
@media print {
  :root { color-scheme: light; --ul-background: #ffffff; --ul-surface: #ffffff; --ul-raised: #f4f4f4; --ul-text: #111111; --ul-muted: #333333; --ul-link: #17314f; --ul-gold: #61480d; --ul-border: #999999; --ul-accept: #14634d; --ul-amend: #874608; --ul-error: #9c2c3a; --ul-engineering: #526179; --ul-edge: #6a7e96; --ul-focus: #10558d; --ul-button: #17314f; --ul-buttonText: #ffffff; }
  body { background: #ffffff; color: #111111; }
  .actions, .skip-link, :is(.reader-shell, body) > header nav, .reader-tools, button, button.button, #more, input[type="search"]:placeholder-shown, .page-outline { display: none; }
  label:has(+ input[type="search"]:placeholder-shown) { display: none; } /* its own rule: a browser without :has() drops only this one */
  section { padding: 24px 0; }
  a { color: #17314f; text-decoration: underline; }
  .museum-card, .cards article, .lesson-links, .cut-list li, .site-map li { break-inside: avoid; }
  details:not([open]) > summary::after { content: " — collapsed; contents not printed"; font-style: italic; }
  #inventory table, #formal-coverage-table { min-width: 0; }
}