/* Design-system site chrome. Built on milo.css; the site must itself read as Milo. */
.ds-shell { display: grid; grid-template-columns: var(--sidebar-nav) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
.ds-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--grid-margin); border-bottom: 1px solid var(--hairline-strong); position: sticky; top: 0; background: var(--surface-primary); z-index: 20; min-height: 56px; }
.ds-topbar .theme-toggle { margin-left: auto; }
.ds-topbar-title { letter-spacing: 0.12em; }
.ds-nav-toggle { display: none; }
.ds-nav { border-right: 1px solid var(--hairline); padding: var(--space-6) var(--space-4) var(--space-8); position: sticky; top: 56px; height: calc(100vh - 56px); overflow: auto; display: flex; flex-direction: column; gap: var(--space-6); }
.ds-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-nav a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-2); text-decoration: none; color: var(--text-secondary); border-left: 2px solid transparent; font-size: var(--type-body-s); }
.ds-nav a .index { color: var(--text-tertiary); }
.ds-nav a:hover { color: var(--text-primary); background: var(--surface-secondary); }
.ds-nav a[aria-current="page"] { color: var(--text-primary); border-left-color: var(--milo-agent); font-weight: 500; }
.ds-nav a[aria-current="page"] .index { color: var(--milo-agent-ink); }
.ds-nav-group { padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.ds-nav-group .micro { color: var(--text-tertiary); padding: 0 var(--space-2) var(--space-2); display: block; }
.ds-nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2); letter-spacing: 0.06em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-left: var(--space-1); }
.dot.agent { background: var(--milo-agent); } .dot.signal { background: var(--offline-signal); }
.ds-main { min-width: 0; padding: 0 var(--grid-margin) var(--space-32); }
@media (min-width: 1440px) { .ds-main { --grid-margin: 80px; } }
.ds-foot { margin-top: var(--space-40); padding-top: var(--space-4); border-top: 1px solid var(--hairline-strong); display: flex; flex-direction: column; gap: var(--space-2); }
.ds-foot-row { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ds-foot-links { display: flex; gap: var(--space-6); }
.ds-foot-links a { text-decoration: none; font-size: var(--type-body-s); border-bottom: 1px solid var(--hairline-strong); }
.ds-foot-links a:hover { border-bottom-color: var(--milo-agent); }
@media (max-width: 1079px) {
  .ds-shell { grid-template-columns: 1fr; }
  .ds-nav-toggle { display: inline-flex; }
  .ds-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--surface-primary); z-index: 19; height: auto; border-right: 0; }
  .ds-nav.is-open { display: flex; }
}

/* page hero */
.page-hero { padding: var(--space-24) 0 var(--space-20); border-bottom: 1px solid var(--hairline-strong); margin-bottom: var(--space-24); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
.page-hero .kicker { display: flex; gap: var(--space-4); align-items: baseline; margin-bottom: var(--space-10); }
.page-hero .kicker .index { font-size: var(--type-mono); color: var(--milo-agent-ink); }
.page-hero .lede { font-size: var(--type-title); font-weight: 400; line-height: 1.4; color: var(--text-secondary); max-width: var(--measure-narrow); margin: var(--space-10) 0 0; }
.page-hero .facts { font-family: var(--font-mono); font-size: var(--type-mono-micro); color: var(--text-tertiary); display: grid; gap: var(--space-1); justify-self: end; text-align: right; }
@media (max-width: 1079px) { .page-hero { grid-template-columns: 1fr; } .page-hero .facts { justify-self: start; text-align: left; } }

/* sections inside pages */
.ds-section { padding: var(--space-24) 0 var(--space-32); border-top: 1px solid var(--hairline); }
.ds-section:first-of-type, .page-hero + .ds-section, .plate + .ds-section { border-top: 0; padding-top: 0; }
.page-hero:has(+ .plate) { border-bottom: 0; margin-bottom: 0; }
.ds-section > .eyebrow { margin-bottom: var(--space-16); }

/* V1.2 — THE CASCADE FIX.
   These are element-scoped defaults: "a paragraph in a section, if nothing else is said".
   They used to be written as plain descendant selectors, which gave them specificity (0,1,1)
   and let them beat every typographic role class (0,1,0) — so .display-m, .lede, .summary-line
   and .pull all silently received body leading (1.6) and the prose measure. 29 display
   paragraphs across 14 pages were set wrong, which is most of the site's rhythm problems.
   They now sit in a named cascade layer. Unlayered CSS always wins over layered CSS, so a
   declared typographic role in milo.css now beats a section default by architecture rather
   than by specificity arithmetic. Adding a page-level element selector can no longer break
   display type. See evidence/css-specificity-audit.md. */
@layer section-defaults {
  .ds-section h2 { font-family: var(--font-display); font-size: var(--type-display-l); font-weight: 400; line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 var(--space-12); max-width: 16ch; }
  .ds-section h3 { font-size: var(--type-title); font-weight: 500; margin: var(--space-16) 0 var(--space-5); }
  .ds-section p { max-width: var(--measure-prose); line-height: 1.6; }
  .ds-section p + p { margin-top: var(--space-6); }
  /* The page-hero h1 carries .display-l on all 39 heroes, and .display-l already sets margin: 0.
     Written plainly this was (0,1,1) sitting on top of a display role, which is the trap the
     layer exists to close: it would have pinned the heading's margin the moment the role's
     changed. It stays as the default for a bare h1 in a hero, and no longer outranks the role. */
  .page-hero h1 { margin: 0; }
}
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16) calc(var(--grid-gutter) * 3); align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); }
.four-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gutter); }
.six-col { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1079px) { .two-col { grid-template-columns: 1fr; } .four-col, .six-col { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .three-col, .four-col, .six-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* specimen frames for components */
.specimen { border: 1px solid var(--hairline); padding: var(--space-6); background: var(--surface-primary); position: relative; min-width: 0; }
.specimen[data-theme="dark"] { color-scheme: dark; }
.specimen > .micro { position: absolute; top: -0.65em; left: var(--space-3); background: var(--surface-primary); padding: 0 var(--space-2); color: var(--text-tertiary); }
.specimen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-20) calc(var(--grid-gutter) * 2); }
.specimen-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
@media (max-width: 719px) { .specimen-pair { grid-template-columns: 1fr; } }
.specimen .states { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.spec-note { font-family: var(--font-mono); font-size: var(--type-mono-micro); color: var(--text-tertiary); margin-top: var(--space-3); }

/* colour swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
.swatch { border: 1px solid var(--hairline); }
.swatch b { display: block; font-weight: 500; }
.swatch.on-dark { color: var(--milo-mineral-500); } .swatch.on-light { color: var(--milo-carbon-1000); }

/* type specimen */
.type-specimen { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.type-specimen .index { padding-top: 4px; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-20) calc(var(--grid-gutter) * 2); }
.gallery > :nth-child(6n+1) { grid-column: span 2; }
@media (max-width: 719px) { .gallery > :nth-child(6n+1) { grid-column: auto; } }
.gallery .figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-toolbar { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-8); }
.gallery-toolbar .tabs { border-bottom: 0; }
.viewer { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--grid-gutter); }
.viewer .figure img, .viewer .figure canvas { width: 100%; height: auto; max-height: 72vh; object-fit: contain; background: var(--surface-recessed); }
.viewer .figure { position: relative; }
.viewer .stage-label { position: absolute; top: var(--space-3); left: var(--space-3); font-family: var(--font-mono); font-size: var(--type-mono-micro); background: var(--surface-primary); padding: 2px var(--space-2); letter-spacing: 0.08em; }
@media (max-width: 1079px) { .viewer { grid-template-columns: 1fr; } }
.recipe-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.recipe-tabs button { border: 1px solid var(--hairline); background: transparent; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-control); cursor: pointer; font-family: var(--font-mono); font-size: var(--type-mono-micro); letter-spacing: 0.06em; }
.recipe-tabs button[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.controls { display: grid; gap: var(--space-4); }
.controls .field .label { display: flex; justify-content: space-between; }
.controls .field .label output { font-family: var(--font-mono); font-size: var(--type-mono-micro); }

/* process strip */
.process-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.process-strip .micro { display: block; margin-bottom: var(--space-2); }
.process-strip img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (max-width: 719px) { .process-strip { grid-template-columns: 1fr; } }

/* screens gallery */
.screen-frame { border: 1px solid var(--hairline-strong); background: var(--surface-primary); overflow: hidden; }
.screen-frame iframe { width: 100%; height: 720px; border: 0; display: block; }
.screen-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-8) var(--grid-gutter); }
.screen-list img { border: 1px solid var(--hairline); width: 100%; }

/* principle rows */
.principle { display: grid; grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gutter); padding: var(--space-6) 0; border-top: 1px solid var(--hairline); align-items: start; }
.principle h3 { margin: 0; font-size: var(--type-heading); }
.principle .decision { font-size: var(--type-body-s); }
.principle .decision b { color: var(--milo-agent-ink); font-weight: 500; }
@media (max-width: 719px) { .principle { grid-template-columns: 3rem 1fr; } .principle .decision { grid-column: 2; } }

/* icon grid */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-4); }
.icon-cell { border: 1px solid var(--hairline); padding: var(--space-3); display: grid; justify-items: center; gap: var(--space-2); }
.icon-cell svg { width: 32px; height: 32px; }
.icon-cell .mono-micro { color: var(--text-tertiary); text-align: center; }
.icon-sizes { display: flex; align-items: end; gap: var(--space-6); }
.icon-sizes svg { display: block; }

/* level diagram */
.levels { display: grid; gap: var(--space-2); }
.level { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); }
.level .index { color: var(--milo-agent-ink); }
.level-3 { box-shadow: var(--shadow-3); background: var(--surface-secondary); }
.level-4 { box-shadow: var(--shadow-4); background: var(--surface-secondary); border-color: var(--milo-agent); }

/* hero art on manifesto */
.manifesto-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16) calc(var(--grid-gutter) * 2); align-items: end; padding: var(--space-32) 0 var(--space-24); }
/* V1.2 — THE GREY LINE.
   The figure is a stretched grid item, so it has a definite height. The art used to take
   height:100% of it, which is the WHOLE figure — leaving nothing for the figcaption, which
   then laid out below the figure box and overflowed the section by its own height. The next
   section's border-top (a hairline, --hairline) was painted straight through the overflowed
   caption, cutting "Milo computational interpretation / View original / Art gallery" in half
   at every width from 768 to 2560. A caption is part of the figure; the art takes the height
   that is LEFT. Flex column, art grows into the remainder, caption keeps its own.
   See evidence/grey-line-investigation.md. */
.manifesto-hero .figure { align-self: stretch; display: flex; flex-direction: column; margin-right: calc(-1 * var(--grid-margin)); margin-top: calc(-1 * var(--space-32)); }
.manifesto-hero .figure img, .manifesto-hero .figure canvas { width: 100%; flex: 1 1 auto; min-height: 0; height: auto; object-fit: cover; aspect-ratio: 4 / 5; }
.manifesto-hero .figure .artwork-caption { flex: 0 0 auto; margin-right: var(--grid-margin); }
@media (max-width: 1079px) { .manifesto-hero .figure { margin-right: 0; margin-top: 0; } }
@media (max-width: 1079px) { .manifesto-hero { grid-template-columns: 1fr; } }
.lineage { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; font-family: var(--font-mono); font-size: var(--type-mono-micro); letter-spacing: 0.08em; }
.lineage span + span::before { content: '→'; margin-right: var(--space-3); color: var(--text-tertiary); }
.lineage span:last-child { color: var(--milo-agent-ink); }
.equation { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.equation > div { padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); }
.equation .micro { display: block; margin-bottom: var(--space-2); }
.equation ul { list-style: none; padding: 0; margin: 0; font-size: var(--type-body-s); color: var(--text-secondary); }

/* ---------- editorial bleeds + asymmetry (images break the column) ---------- */
.bleed-right { margin-right: calc(-1 * var(--grid-margin)); }
.bleed-left { margin-left: calc(-1 * var(--grid-margin)); }
.bleed-full { margin-inline: calc(-1 * var(--grid-margin)); }
.bleed-right img, .bleed-left img, .bleed-full img { width: 100%; }
.plate { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8) calc(var(--grid-gutter) * 2); align-items: end; margin: var(--space-24) 0; }
.plate.left { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.plate.left > .figure { order: 2; }
.plate .figure img { width: 100%; height: auto; }
.plate .plate-note { max-width: 36ch; }
.plate .plate-note .artwork-caption .artist { white-space: normal; }
.plate .plate-note .artwork-caption { border-top: 1px solid var(--hairline-strong); grid-template-columns: 1fr; }
.plate .plate-note .artwork-caption .institution { text-align: left; }
.plate-tall .figure img { aspect-ratio: 4 / 5; object-fit: cover; }
.plate-wide .figure img { aspect-ratio: 21 / 9; object-fit: cover; }
.raise { margin-top: calc(-1 * var(--space-20)); }
.drop { margin-top: var(--space-20); }
@media (max-width: 1079px) { .plate, .plate.left { grid-template-columns: 1fr; } .plate.left > .figure { order: 0; } .bleed-right, .bleed-left { margin-inline: 0; } .raise, .drop { margin-top: 0; } }
.pull { font-family: var(--font-display); font-size: var(--type-display-m); line-height: 1.1; max-width: 24ch; margin: var(--space-16) 0; }
.pull em { font-style: italic; color: var(--milo-agent-ink); }

/* ---------- the site practises the ladder: SUMMARIZED (h2 + one line) → TUCKED (.tuck) → REVEALED (open) → EXPANDED (.tuck-more) ---------- */
.tuck { border-top: 1px solid var(--hairline); margin-top: var(--space-8); }
.tuck > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0; min-height: var(--target-min); }
.tuck > summary::-webkit-details-marker { display: none; }
.tuck > summary .glyph { font-family: var(--font-mono); color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-standard); }
.tuck[open] > summary .glyph { transform: rotate(45deg); color: var(--milo-agent-ink); }
.tuck > summary .label { color: var(--text-primary); }
.tuck > summary .count { font-family: var(--font-mono); font-size: var(--type-mono-micro); color: var(--text-tertiary); }
.tuck > .tuck-body { padding: var(--space-2) 0 var(--space-10) 2rem; animation: expand var(--dur-base) var(--ease-standard); }
.tuck .tuck { margin-left: 0; }
.summary-line { font-size: var(--type-title); font-weight: 400; line-height: 1.4; color: var(--text-secondary); max-width: var(--measure-narrow); margin: 0 0 var(--space-6); }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); font-size: var(--type-body-s); }
.ladder > div { padding-top: var(--space-3); border-top: 1px solid var(--hairline-strong); }
.ladder .micro { display: block; margin-bottom: var(--space-2); }
/* device frames for responsive demos */
.device { border: 1px solid var(--hairline-strong); background: var(--surface-primary); overflow: hidden; margin: 0; }
.device iframe { border: 0; display: block; width: 100%; }
.device.phone { width: 390px; max-width: 100%; } .device.phone iframe { height: 760px; }
.device.tablet { width: 820px; max-width: 100%; } .device.tablet iframe { height: 640px; }
.device figcaption { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--type-mono-micro); color: var(--text-tertiary); }
.devices { display: flex; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap; }
/* composition thumbnails (wireframe language) */
.comp { border: 1px solid var(--hairline-strong); aspect-ratio: 16 / 10; position: relative; background: var(--surface-secondary); overflow: hidden; }
.comp i { position: absolute; display: block; }
.comp .t { background: var(--text-primary); height: 2px; }
.comp .p { background: var(--hairline); height: 1px; }
.comp .img { background: var(--milo-agent); opacity: 0.85; }
.comp .img.nat { background: var(--offline-signal); }
.comp .nav { background: var(--surface-tertiary); left: 0; top: 0; bottom: 0; width: 14%; border-right: 1px solid var(--hairline); }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-8) var(--grid-gutter); }
.comp-grid figcaption { margin-top: var(--space-3); }
.comp-grid figcaption b { display: block; font-weight: 500; }
.comp-grid figcaption span { font-size: var(--type-body-s); color: var(--text-secondary); }

/* V1.2 — the nav no longer hides two thirds of itself.
   Forty entries in one scroller left 19 visible at 1440x900 and put the whole Interface, System
   and Reference families behind a scroll with no affordance under macOS overlay scrollbars. Each
   family is now a disclosure: the one holding the current page is open, the others are closed,
   so every family is reachable without scrolling and the site practises its own ladder. */
.ds-nav-group { border-top: 1px solid var(--hairline); padding-top: 0; }
.ds-nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-2); min-height: var(--target-min); }
.ds-nav-group > summary::-webkit-details-marker { display: none; }
.ds-nav-group > summary .micro { color: var(--text-tertiary); padding: 0; display: inline; }
.ds-nav-group > summary .count { color: var(--text-tertiary); }
.ds-nav-group > summary:hover .micro { color: var(--text-primary); }
.ds-nav-group[open] > summary .micro { color: var(--text-primary); }
.ds-nav-group > summary[aria-current="true"] .micro { color: var(--milo-agent-ink); }
.ds-nav-group > ol { padding-bottom: var(--space-4); }

/* V1.2 §54 — narrow-width craft. Found by sweeping every page at 1024/834/768/430/390 and
   measuring scrollWidth against clientWidth, not by eye.
   1. The topbar's row (brand + title + nav toggle + theme toggle) has a min-content width of
      406px, so at 390 the whole page gained 16px of horizontal scroll. The title is the part
      that can go: it repeats what the brand already says.
   2. A specimen with a hard pixel width belongs inside the column, not through it.
   3. A wide data table scrolls inside its own box rather than moving the page. */
@media (max-width: 519px) {
  .ds-topbar-title { display: none; }
  .ds-topbar { gap: var(--space-4); }
}
@media (max-width: 719px) {
  .ds-main table, .ds-main .prose table { display: block; max-width: 100%; overflow-x: auto; }
  .specimen > div[style*="width"], .ap-email, .ap-slide, .ap-doc, .hero, .device { max-width: 100%; }
}

/* A guidelines site may not scroll sideways on a phone. Individual specimens that are genuinely
   wider than a phone — a 600px email mock, a macOS window, a twelve-column table — keep their own
   scroll; the page does not inherit it. `clip` rather than `hidden` so position: sticky still
   works on the topbar. */
@media (max-width: 719px) {
  .ds-main { overflow-x: clip; }
  .ap-email, .ap-slide, .ap-doc { width: auto; max-width: 100%; }
}