/* minimal atlas — layout and type roles. Specificity (0,1,0) throughout: a consumer
   overrides with any two-attribute selector, or by redefining the token on the
   element — no !important, no JS stripping. Values are the 1440 artwork values the
   components used to write inline; inline now keeps only per-instance state
   (gridArea, cursor, transition, state colour, ...style). */

/* column pair */
[data-col-pair]{display:grid;grid-template-columns:var(--col-index-width) var(--col-content-width);column-gap:var(--col-gap);row-gap:var(--media-gap)}
[data-subcol]{display:grid;grid-template-columns:var(--col-sub) minmax(0,1fr)}

/* core */
[data-header]{padding:var(--interval-half) var(--page-margin) 0;display:grid;grid-template-columns:1fr var(--nav-work-width) var(--nav-about-width);align-items:start;background:var(--surface-page)}
[data-header] > [data-brand]{font:var(--type-brand);white-space:nowrap}
[data-header] > [data-nav]{font:var(--type-nav)}
[data-canvas]{width:var(--page-width);margin:0 auto;background:var(--surface-page);padding-bottom:calc(var(--interval) * 2)}
[data-canvas] > [data-body]{padding:0 var(--page-margin)}
[data-section-heading]{display:block;font:var(--type-nav);text-align:right;padding-right:var(--page-margin)}
[data-section-heading="records"]{padding-right:0;position:sticky;top:0}
[data-section-heading="news"]{padding-right:0;margin-top:calc(var(--interval) * 2)}
[data-filter-link]{display:inline-flex;gap:var(--interval-line);align-items:baseline;font-family:var(--font-index);font-size:var(--size-nav-secondary);line-height:var(--leading-nav-secondary)}
[data-filter-link] > [data-arrow]{font-family:var(--font-content)}
/* Selection is weight; colour is hover and SYSTEM. Proto Red appears on a hovered link
   and on a SYSTEM term only — every other selected state (header page, WORK TYPE, NEWS
   filters) is Near Black Bold, unselected is Near Black Regular, and a page state has no
   hover. Components write no colour inline. */
[data-header] > a{color:var(--state-default);transition:var(--transition-state)}
[data-header] > [data-nav][aria-current="page"]{color:var(--state-default);font-weight:var(--weight-bold)}
[data-section-heading]{color:var(--state-default)}
[data-section-heading] > a{color:inherit}
[data-filter-link]{color:var(--state-default)}
[data-filter-link][data-state="inactive"]{color:var(--state-default)}
[data-filter-link][aria-current]{color:var(--state-default);font-weight:var(--weight-bold)}
[data-filter-link]:hover{color:var(--state-default)} /* a page state has no hover; the base a:hover would paint it */
[data-menu]{color:var(--state-default);transition:var(--transition-state)}
[data-menu="type"][aria-pressed="true"]{color:var(--state-default);font-weight:var(--weight-bold)} /* ALL needs no rule: "no filter" is never a selection */
[data-menu="keyword"]{color:var(--text-on-index)}
[data-menu="keyword"][aria-pressed="true"]{color:var(--state-selected)}
[data-menu]:not([aria-pressed="true"]):not([data-menu="system"]):hover,[data-menu="all"]:hover{color:var(--link-hover)}

/* WORK menu */
/* WORK menu: width from content, padding one SYSTEM line (24, 2026-09-10) — the widest SYSTEM word
   (DIGITAL INFRASTRUCTURE, 217 px) wrapped inside a numeric width once the padding scaled;
   max-content + 2 × --leading-menu-system gives one width (265) at every breakpoint and follows the type. */
nav[data-work-menu]{position:absolute;left:var(--header-nav-x);top:var(--menu-top,var(--interval));width:max-content;max-width:calc(100vw - 2 * var(--page-margin));padding:var(--leading-menu-system);background:var(--field-index);z-index:20}
/* menu type reads its token whole (21/28 at every width; system list 18/24); the blank line above ALL is one TYPE line */
[data-menu]{display:block;font:var(--type-menu-type)}
[data-menu="all"]{margin-top:var(--leading-menu-type)}
[data-menu="system"]{display:flex;gap:var(--arrow-gap)}
[data-menu="system"] > [data-arrow]{font:var(--type-title-sub);line-height:var(--leading-menu-type)}
[data-menu="system"][aria-expanded="true"]{margin-bottom:var(--leading-menu-system)} /* open SYSTEM → its rule: one system line */
[data-system-list]{margin-top:var(--interval)}
[data-menu="keyword"]{font:var(--type-menu-system)}

/* index */
[data-row]{min-height:var(--record-pitch)}
[data-row="project"]{min-height:var(--media-row)}
[data-row="project"] > [data-index-cell]{display:grid;grid-template-rows:auto 1fr}
[data-row="project"] h2{font:var(--type-title);max-width:var(--col-index-width)}
[data-row="news"] > [data-index-cell]{padding-top:var(--interval-line)}
[data-row="news"] [data-line]{font-family:var(--font-content);font-size:var(--size-meta);line-height:var(--leading-meta)}
[data-row="news"] [data-line="kind"]{font-family:var(--font-index)}
[data-row="news"] h3{font:var(--type-title)} /* same role as [data-row="project"] h2 */
[data-content]{padding-top:var(--open-copy)}
[data-content] > div > [data-framework-line]{margin-top:var(--interval-half)}
[data-list="home"]{margin-top:calc(var(--interval) * 2)}
[data-list="news"]{margin-top:var(--interval)}
[data-worklist]{display:grid;gap:calc(var(--row-pitch) - var(--media-row));margin-top:var(--interval-half)}
[data-worklist-head],[data-filter-row]{padding-top:var(--open-label)}
[data-label-cell]{padding-left:var(--col-sub)}
[data-top-row]{margin-top:var(--record-pitch)}
[data-earlier-row]{margin-top:var(--interval)}
[data-footer-row]{display:flex;align-items:flex-end;justify-content:space-between;margin-top:calc(var(--interval) * 2)}
[data-copyright]{font:var(--type-meta-value)}

/* media rows — column widths and slot heights are measured (MediaRow / rowGeometry.js),
   so only ground, ratio and the caption strip live here. min-height: 0 everywhere the
   row nests: the automatic minimum would let content push a slot past its geometry. */
[data-media-row],[data-media-row] > [data-line],[data-line] > [data-col],[data-slot]{min-height:0;min-width:0}
[data-slot]{position:relative;min-width:0;overflow:hidden}
[data-slot] > [data-empty-slot]{background:var(--surface-media)}
/* the plate spans index column and field; text rows keep the 410 / 920 lines */
[data-modules][data-plate]{grid-column:1 / -1}
/* a slot's caption is a solid strip on its own bottom edge — nothing moves, and
   without a pointer the gallery carries the captions instead */
[data-caption-strip]{position:absolute;left:0;right:0;bottom:0;padding:var(--interval-line);background:var(--near-black);color:var(--text-inverse);font:var(--type-caption);opacity:0;pointer-events:none;transition:opacity var(--duration-state) var(--easing-state)}
@media (hover:hover){[data-slot]:hover [data-caption-strip]{opacity:1}}

/* about */
[data-about]{padding:var(--open-rule) var(--page-margin) 0;display:grid;gap:var(--interval)}
[data-about] > section > [data-index-cell]{display:grid;align-self:stretch}
[data-about] > section > [data-index-cell][data-has-aside]{grid-template-rows:auto 1fr}
[data-accordion-toggle],[data-accordion-title]{font:var(--type-title)}
[data-accordion-toggle]{display:flex;gap:var(--interval-line)}
[data-prose]{display:grid;gap:var(--space-30);max-width:var(--col-content-width);font:var(--type-body)}
[data-prose][data-size="meta"]{font:var(--type-caption)}
[data-divider-index],[data-divider-platform]{font:var(--type-title-sub);margin-top:calc(var(--interval) * 2)}
[data-contact-wrap]{margin-top:var(--interval-half)}
[data-contact]{margin-top:calc(var(--interval) * 2)}
[data-cv]{font:var(--weight-semibold) var(--size-title)/var(--leading-title) var(--font-content)}
[data-about] [data-framework-line]{margin-top:var(--interval-half)}
[data-about] [data-prose][data-follows]{margin-top:var(--interval-half)}
[data-about] [data-list="system-index"]{margin-top:var(--interval-half)}
[data-system-field="red"]{background:var(--field-system);padding:40px;margin:-40px}

/* framework line + system keyword */
[data-framework-line]{font:var(--type-title-sub);max-width:var(--col-content-width)}
[data-keyword] > button{display:block;cursor:pointer;font-family:var(--font-content);font-size:var(--size-body);line-height:var(--leading-body);font-weight:var(--weight-medium)} /* Medium: sub-heading class, 2026-09-10 */
[data-keyword][data-size="menu"] > button{font-size:var(--size-meta);line-height:var(--leading-meta)}
[data-keyword] > p{font-family:var(--font-content);font-size:var(--size-body);line-height:var(--leading-body);max-width:var(--col-content-width)}
[data-keyword][data-open]{margin-bottom:var(--interval-half)}

/* PROJECT page */
/* PROJECT opens on a rule, as ABOUT does: --open-rule from the nav line to the rule, one interval from the rule to the title */
/* the title is the real element, position: sticky, travelling inside an index cell that
   spans the whole record — the same rule as [data-about] > section > [data-index-cell].
   Placement device, measured 2026-09-07: the title's track is 0 wide and the title
   carries the index-column width itself, so it overlays column 1 of every pair instead
   of competing for it — grid auto-placement refuses to overlap, and a real first track
   pushes the record's rows below the title's span, leaving it no travel. `1 / -1` needs
   explicit rows and these are implicit, so the span is a count no record reaches; the
   area still ends at the last real row. Stop = measured header height + --interval-line. */
[data-colophon]{padding:var(--open-rule) var(--page-margin) 0;display:grid;grid-template-columns:0 minmax(0,1fr)}
[data-colophon] > h1{grid-column:1;grid-row:1 / span 50;align-self:start;width:var(--col-index-width);margin-top:calc(var(--rule-weight) + var(--interval));position:sticky;top:calc(var(--header-h,85px) + var(--interval-line));z-index:1}
[data-colophon] > :not(h1){grid-column:2}
[data-colophon] > [data-col-pair]:first-child,[data-colophon] > h1 + [data-col-pair]{border-top:var(--rule-weight) solid var(--text-primary);padding-top:var(--interval)}
[data-colophon] h1{font:var(--type-title)}
/* the title travels over the plate, so its colour follows the ground under it */
[data-colophon] > h1{color:var(--text-primary);transition:color 120ms var(--easing-state)}
[data-colophon] > h1[data-over="media"]{color:var(--text-inverse)}
/* the record is bracketed by two rules, gh inside each — the same setting as the colophon lists */
[data-colophon] > [data-col-pair][data-index]{margin-top:var(--interval);padding:var(--interval-half) 0;border-top:var(--rule-weight) solid var(--text-primary);border-bottom:var(--rule-weight) solid var(--text-primary)}
[data-modules]{display:grid;gap:var(--media-gap)}
[data-colophon] > [data-modules]{margin-top:var(--interval)}
[data-colophon] > [data-list]{margin-top:var(--interval)}
/* [data-related] never set display:grid inline — the columns declaration is kept as written, inert until a consumer adds display */
[data-related]{grid-template-columns:var(--meta-label-width) 1fr}
[data-related] > [data-label]{font:var(--type-meta-label)}
[data-related] a{font:var(--type-title-sub)}

/* records */
dl[data-record]{margin:0;display:grid;grid-template-columns:var(--meta-label-width) 1fr}
dl[data-record] > dt{font:var(--type-meta-label)}
dl[data-record] > dd{margin:0;font:var(--type-meta-value)}
dl[data-record] > dd[data-system-list]{font:var(--type-meta-label)}
dl[data-record] > dd[data-actors]{display:grid;gap:var(--interval-line)}
/* a key inside a value column: the ACTORS connectors and a CREDIT line's role prefix
   are one role, Medium — between the value (Regular) and the outer label (Semibold) */
dl[data-record] > dd [data-value-key]{font-weight:var(--weight-medium)}
[data-system]{display:block;cursor:pointer}
[data-meta] > [data-line]{font:var(--type-meta-value)}
[data-meta] > [data-line="type"]{font:var(--type-meta-index)}
[data-meta] > [data-line="system"]{font:var(--type-meta-label)}
/* hanging indent under the arrow (2026-09-10): every SYSTEM line is one run "↓ WORD"; the
   run "↓ " measures 0.875em of its own type, so a wrapped word starts under its first letter.
   One-line words are unchanged — padding and indent cancel. */
[data-meta] > [data-line="system"],dl[data-record] [data-system],[data-keyword] > button{padding-left:0.875em;text-indent:-0.875em}

/* media caption */
[data-caption]{width:var(--col-index-width);font:var(--type-caption);transition:opacity var(--duration-state) var(--easing-state)}