/* brand/components.css -- GENERATED by brand/build-tokens.mjs from brand/components/*.css (00-base.css, 10-button.css, 20-forms.css, 30-nav.css, 40-card.css, 50-feedback.css, 60-data.css, 70-motion.css, 80-homeregister.css, 81-alivesignature.css). Do not hand-edit; edit the part. Requires brand/tokens.css first. */
/* 00-base.css -- reset, type roles, layout primitives, focus. Consumes brand/tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-text); }
.t-display, h1.t-display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); }
h1, .t-h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-bold); }
h2, .t-h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-bold); }
h3, .t-h3 { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-semibold); }
h4, .t-h4 { font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: var(--weight-semibold); }
.t-small { font-size: var(--text-small); line-height: var(--leading-small); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); }
.t-figure { font-family: var(--font-mono); font-size: var(--text-figure); line-height: var(--leading-figure); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* a long unbroken token (a URL, a hash) must never widen the page (08.14: the kit page overflowed at 375 on the fonts URL specimen) */
.t-soft { color: var(--color-text-soft); }
.t-muted { color: var(--color-text-muted); }
/* Section tag / eyebrow. Inherits fresh-lens .tag but on text-muted, not the ochre: the ochre reads 3.03:1 at this size (see CONTRAST-REPORT.md). */
.tag { display: block; font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-5); }
.tag--accent { color: var(--color-primary); }
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--color-primary-hover); }
p + p { margin-top: var(--space-4); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-5); margin-top: var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
/* Pull quote: display family, larger, a hanging opening mark. No accent bar (F-AID-01 left-stripe tell). */
.prose blockquote { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-h4); color: var(--color-text-soft); margin-top: var(--space-5); padding-left: var(--space-5); position: relative; }
.prose blockquote::before { content: open-quote; position: absolute; left: 0; top: -0.1em; font-size: 2em; line-height: 1; color: var(--color-primary); }
.prose figure { margin-top: var(--space-6); }
.prose figcaption { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-2); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-mobile); }
.wrap--prose { max-width: var(--container-prose); }
@media (min-width: 720px) { .wrap { padding: 0 var(--margin-tablet); } }
@media (min-width: 1024px) { .wrap { padding: 0 var(--margin-desktop); } }
.band { padding: var(--space-8) 0; }
.band--surface { background: var(--color-surface); }
.band--ink { background: var(--color-text); color: var(--color-bg); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--color-bg); }
.band + .band { border-top: 1px solid var(--color-border); }
@media (min-width: 720px) { .band { padding: var(--space-9) 0; } }
.grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
.col-4 { grid-column: span 12; } .col-6 { grid-column: span 12; } .col-8 { grid-column: span 12; }
@media (min-width: 720px) { .col-4 { grid-column: span 6; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 12; } }
@media (min-width: 1024px) { .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } }
.stack > * + * { margin-top: var(--space-4); }
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--loose > * + * { margin-top: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
/* Focus: one ring, everywhere, never removed. */
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-3); top: -100px; padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-s); z-index: 100; }
.skip-link:focus-visible { top: var(--space-3); }
img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

/* type roles the kit page and templates use for body and label text (11.12 intake found them undefined) */
.t-body { font-size: var(--text-body); line-height: var(--leading-body, 1.5); }
.t-label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--leading-label, 1.2); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* 10-button.css -- .btn: primary (filled), ghost (outlined), quiet (text). 8 states each. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-body); line-height: 1;
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-m); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); background: var(--color-primary-hover); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--ghost:hover { background: var(--color-text); color: var(--color-bg); }
.btn--ghost:active { opacity: 0.85; }
.btn--quiet { background: transparent; color: var(--color-link); border-color: transparent; padding-left: var(--space-2); padding-right: var(--space-2); text-decoration: underline; text-underline-offset: 0.18em; }
.btn--quiet:hover { color: var(--color-primary-hover); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }
.btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--color-on-primary); animation: btn-spin 0.8s linear infinite;
}
.btn--ghost[aria-busy="true"]::after, .btn--quiet[aria-busy="true"]::after { color: var(--color-text); }
.btn--error { background: var(--color-error); border-color: var(--color-error); color: var(--color-on-primary); }
.btn--error:hover { filter: brightness(0.92); }
.btn--success { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-primary); }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-small); }
.btn--lg { min-height: 56px; padding: 0 var(--space-6); }
.btn--pill { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }
/* On a dark band, the same component with the palette swapped (inherited from fresh-lens). */
.band--ink .btn--primary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.band--ink .btn--primary:hover { background: var(--color-surface); }
.band--ink .btn--ghost { color: var(--color-bg); border-color: var(--color-bg); }
.band--ink .btn--ghost:hover { background: var(--color-bg); color: var(--color-text); }
.band--ink .btn:focus-visible { outline-color: var(--color-bg); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 600px) { .cta-row { flex-direction: column; align-items: stretch; gap: var(--space-2); } .cta-row .btn { width: 100%; } }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; } .btn[aria-busy="true"]::after { animation-duration: 1.6s; } }

/* 20-forms.css -- .field (label + control + hint/error), .input/.select/.textarea, .check, .search. */
.field { display: block; }
.field + .field { margin-top: var(--space-5); }
.field__label { display: block; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-small); color: var(--color-text); margin-bottom: var(--space-2); }
.field__label .req { color: var(--color-error); margin-left: 2px; }
.field__hint { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); margin-top: var(--space-2); }
.field__error { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-error); margin-top: var(--space-2); font-weight: var(--weight-medium); }
.field__success { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-success); margin-top: var(--space-2); font-weight: var(--weight-medium); }
.input, .select, .textarea {
  display: block; width: 100%;
  font: inherit; font-size: var(--text-body); line-height: 1.4; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-s);
  min-height: 48px; padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-text-soft); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--color-focus); }
.input:active, .textarea:active { border-color: var(--color-focus); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--color-bg); color: var(--color-text-muted); cursor: not-allowed; border-style: dashed; }
.input[aria-busy="true"] { background-image: linear-gradient(90deg, transparent 0%, var(--color-bg) 50%, transparent 100%); background-size: 200% 100%; animation: input-shimmer 1.2s linear infinite; }
.field--error .input, .field--error .select, .field--error .textarea, .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-soft); }
.field--error .input:focus-visible, .input[aria-invalid="true"]:focus-visible { outline-color: var(--color-error); }
.field--success .input, .field--success .select, .field--success .textarea { border-color: var(--color-success); background: var(--color-success-soft); }
.textarea { min-height: 132px; resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: var(--space-7); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
/* Checkbox and radio: native control, styled with accent-color, real label hit area. */
.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); color: var(--color-text); }
.check + .check { margin-top: var(--space-3); }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--color-primary); cursor: pointer; }
.check input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.check input:disabled, .check input:disabled + span { cursor: not-allowed; opacity: 0.5; }
.check--error input { outline: 2px solid var(--color-error); outline-offset: 1px; }
.check__hint { display: block; font-size: var(--text-caption); color: var(--color-text-muted); }
/* Fieldset group */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset__legend { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h4); padding: 0; margin-bottom: var(--space-3); }
/* Search field: input + button as one control (content search, engine-room filters). */
.search { display: flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; min-height: 48px; }
.search:focus-within { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--color-focus); }
.search__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-body); color: var(--color-text); padding: 0 var(--space-4) 0 var(--space-5); }
.search__input:focus-visible { outline: none; }
.search__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search__btn { flex: none; border: 0; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-weight: var(--weight-medium); padding: 0 var(--space-5); cursor: pointer; }
.search__btn:hover { background: var(--color-primary-hover); }
.search__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.search--busy .search__btn { color: transparent; position: relative; }
.search--busy .search__btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-on-primary); border-right-color: transparent; animation: btn-spin 0.8s linear infinite; }
.search__results { list-style: none; margin: var(--space-3) 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.search__results li + li { border-top: 1px solid var(--color-border); }
.search__results a { display: block; padding: var(--space-3) var(--space-4); color: var(--color-text); text-decoration: none; }
.search__results a:hover, .search__results a:focus-visible { background: var(--color-bg); }
.search__results mark { background: var(--color-warning-soft); color: inherit; }
.search__empty { padding: var(--space-4); color: var(--color-text-muted); }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
@keyframes input-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .input[aria-busy="true"] { animation: none; } }

/* 30-nav.css -- site chrome (same class names tools/site-chrome.js emits, F-AID-05 single source) restyled onto the semantic tokens; breadcrumbs; tabs. */
/* Header: static on mobile (mobile-pass.md: the chrome scrolls away, no sticky chrome under 720), a plain
   sticky bar from 720 up; solid ground, no blur anywhere (operator ruling 2026-09-02, closes Tell M). */
.ins-header { position: static; z-index: 50; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
@media (min-width: 720px) { .ins-header { position: sticky; top: 0; } }
.ins-header-inner { max-width: var(--container); margin: 0 auto; padding: var(--space-4) var(--margin-mobile); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
@media (min-width: 720px) { .ins-header-inner { padding-left: var(--margin-tablet); padding-right: var(--margin-tablet); } }
@media (min-width: 1024px) { .ins-header-inner { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); } }
.mark { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 18px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 11px; color: var(--color-text); text-decoration: none; }
.mark:hover { color: var(--color-text); }
.mark svg { width: 28px; height: 28px; }
.mark svg path { stroke: var(--color-primary); }
.mark svg circle { fill: var(--color-secondary); }
/* site-chrome.js emits the de-dotted mark as <svg class="mono">: single-colour variant, primary stroke, no fills. */
.mark svg.mono path { stroke: var(--color-primary); fill: none; }
.navr { display: flex; align-items: center; gap: var(--space-6); font-family: var(--font-display); font-size: 13.5px; }
.navr a, .navr-drop-trigger { color: var(--color-text-soft); text-decoration: none; transition: color var(--duration-fast); }
.navr a:hover, .navr-drop-trigger:hover, .navr-drop-trigger[aria-expanded="true"] { color: var(--color-text); }
.navr a[aria-current="page"] { color: var(--color-primary); }
.navr a:focus-visible, .navr-drop-trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.ins-header-cta { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 14px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; white-space: nowrap; }
.ins-header-cta:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.nav-burger { display: none; background: none; border: 0; padding: 8px; margin: -8px -6px; cursor: pointer; color: var(--color-text-soft); line-height: 0; }
.nav-burger:hover { color: var(--color-text); }
.nav-burger-box { display: block; position: relative; width: 22px; height: 14px; }
.nav-burger-bar, .nav-burger-bar::before, .nav-burger-bar::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--duration-medium) var(--ease-standard), opacity var(--duration-medium) var(--ease-standard); }
.nav-burger-bar { top: 6px; } .nav-burger-bar::before { top: -6px; } .nav-burger-bar::after { top: 6px; }
.nav-burger[aria-expanded="true"] .nav-burger-bar { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar::after { transform: translateY(-6px) rotate(-45deg); }
.navr-drop { position: relative; }
.navr-drop-trigger { font: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.navr-drop-caret { font-size: 10px; line-height: 1; transition: transform var(--duration-fast) var(--ease-standard); }
.navr-drop-trigger[aria-expanded="true"] .navr-drop-caret { transform: rotate(180deg); }
.navr-drop-menu { display: none; list-style: none; margin: 0; padding: var(--space-2); position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); min-width: 190px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--shadow-raised); z-index: 60; }
.navr-drop-menu.is-open { display: block; }
.navr-drop-menu li + li { margin-top: 2px; }
.navr-drop-menu a { display: block; padding: 9px 12px; border-radius: var(--radius-s); font-size: 13.5px; white-space: nowrap; color: var(--color-text-soft); }
.navr-drop-menu a:hover { background: var(--color-bg); color: var(--color-text); }
.navr-drop-menu a[aria-current="page"] { color: var(--color-primary); }
@media (max-width: 720px) {
  .ins-header-inner { position: relative; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  .navr { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
  .navr.is-open { display: flex; }
  .navr a, .navr-drop-trigger { display: block; padding: var(--space-3) var(--margin-mobile); }
  .navr-drop-menu { position: static; transform: none; box-shadow: none; border: 0; border-radius: 0; background: var(--color-bg); min-width: 0; }
  /* the header row's fixed-width members (wordmark + burger + search + CTA) leave no slack below ~375px;
     trim the CTA's own footprint rather than drop it, so it stays visible outside the burger (F-M-01/F-M-03,
     mobile-pass.md, navigation.md line 81) without pushing the row into horizontal overflow (F1866-class check). */
  .ins-header-cta { padding: 9px 14px; font-size: 13px; }
}
/* Footer */
.ins-footer { border-top: 1px solid var(--color-border); padding: var(--space-8) 0 var(--space-8); background: var(--color-bg); color: var(--color-text); }
.ins-footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin-mobile); }
@media (min-width: 720px) { .ins-footer-inner { padding: 0 var(--margin-tablet); } }
@media (min-width: 1024px) { .ins-footer-inner { padding: 0 var(--margin-desktop); } }
.ins-footer-cta { text-align: center; margin-bottom: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--color-border); }
.ins-footer-cta p { color: var(--color-text-soft); font-size: 1.05rem; line-height: 1.6; max-width: 44ch; margin: 0 auto var(--space-5); }
.go { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 15px; padding: 15px 30px; border-radius: var(--radius-m); display: inline-block; text-decoration: none; transition: transform var(--duration-fast) var(--ease-standard); }
.go.teal { background: var(--color-text); color: var(--color-bg); }
.go.teal:hover { transform: translateY(-2px); color: var(--color-bg); }
.ins-footer-nav { display: flex; flex-wrap: wrap; gap: 6px var(--space-6); margin-bottom: var(--space-6); font-family: var(--font-display); font-size: 13.5px; }
.ins-footer-nav a { color: var(--color-text-soft); text-decoration: none; }
.ins-footer-nav a:hover { color: var(--color-text); }
.ins-footer-fine { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ins-footer-fine .mark { font-size: 16px; }
.ins-footer-fine-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ins-footer-fine-right a, .footer-email-copy { font-family: var(--font-mono); font-size: 13px; color: var(--color-link); text-decoration: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.ins-footer-fine-right a:hover, .footer-email-copy:hover { color: var(--color-text); }
.ins-footer-fine-right p { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-muted); }
.wf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { .ins-footer-fine { flex-direction: column; align-items: flex-start; gap: 10px; } .ins-footer-fine-right { align-items: flex-start; } }
/* Breadcrumbs */
.crumbs { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-text); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--color-text); }
/* Tabs (engine room second tab, kit page sections). Roving tabindex is JS's job; the CSS covers every state. */
.tabs { display: block; max-width: 100%; } /* the container the kit documents; the list below scrolls inside it, the page never widens (08.11 orphan closed) */
.tabs__list { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.tabs__tab { font: inherit; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-small); color: var(--color-text-soft); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--space-3) var(--space-4); cursor: pointer; white-space: nowrap; transition: color var(--duration-fast), border-color var(--duration-fast); }
.tabs__tab:hover { color: var(--color-text); }
.tabs__tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tabs__tab:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-xs); }
.tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
.tabs__panel { padding-top: var(--space-5); }
.tabs__panel[hidden] { display: none; }

/* 40-card.css -- .card, .badge, .pick (affiliate card with disclosure), .seedling-badge, .stat (tile + sparkline). */
.card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.card--raised { background: var(--color-surface-raised); box-shadow: var(--shadow-raised); }
.card--flat { background: transparent; border-color: transparent; padding: 0; }
a.card:hover, .card--link:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
a.card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
a.card:active { transform: none; }
.card[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.card[aria-busy="true"] .card__title, .card[aria-busy="true"] .card__body { color: transparent; background: var(--color-bg); border-radius: var(--radius-xs); }
.card--error { border-color: var(--color-error); }
.card--success { border-color: var(--color-success); }
.card__kicker { display: block; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.card__title, .card__body, .card__meta { display: block; }
.card__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h4); line-height: var(--leading-h4); color: var(--color-text); }
.card__body { margin-top: var(--space-2); color: var(--color-text-soft); font-size: var(--text-small); line-height: var(--leading-small); }
.card__meta { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
.card__media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); border-radius: var(--radius-m) var(--radius-m) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Badge: status or category chip. Text sizes stay label-scale; colours are the status pairs. */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-soft); background: var(--color-surface); white-space: nowrap; }
.badge--primary { color: var(--color-primary); border-color: var(--color-primary); background: transparent; }
.badge--success { color: var(--color-success); background: var(--color-success-soft); border-color: transparent; }
.badge--warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: transparent; }
.badge--error { color: var(--color-error); background: var(--color-error-soft); border-color: transparent; }
.badge--solid { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Affiliate pick card: the disclosure line is part of the component, not optional. */
.pick { display: grid; gap: var(--space-4); grid-template-columns: 96px 1fr; align-items: start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-4); }
.pick__img { width: 96px; height: 96px; object-fit: contain; background: var(--color-bg); border-radius: var(--radius-s); }
.pick__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body); color: var(--color-text); }
.pick__why { margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-soft); }
.pick__cta { margin-top: var(--space-3); }
.pick__disclosure { grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.pick[aria-busy="true"] .pick__title, .pick[aria-busy="true"] .pick__why { color: transparent; background: var(--color-bg); border-radius: var(--radius-xs); }
@media (max-width: 600px) { .pick { grid-template-columns: 1fr; } .pick__img { width: 100%; height: auto; aspect-ratio: 1; } }
/* Affiliate product card, no product image on record (pc2.schema.json carries no image field): a single-column
   body in place of the image + text grid above. */
.pick--no-img { grid-template-columns: 1fr; }
.pick__body { min-width: 0; }
.pick__price { margin-top: var(--space-2); font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-body); color: var(--color-text); font-variant-numeric: tabular-nums; }
.pick__price-date { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); font-weight: var(--weight-regular); }
.pick__model { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); font-weight: var(--weight-regular); }
.pick__specs { margin-top: var(--space-3); padding-left: var(--space-5); font-size: var(--text-small); color: var(--color-text-soft); }
.pick__specs li { margin: var(--space-1) 0; }
.pick__source { font-size: var(--text-caption); }
.pick__asin { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
/* Seedling badge: the only Living Websites element on a free claimant's site. */
.seedling-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); text-decoration: none; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
.seedling-badge:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.seedling-badge svg { width: 16px; height: 16px; }
.seedling-badge svg path { stroke: var(--color-primary); }
/* Stat tile + sparkline (engine room, daily report, proof wall). Figures are mono: the real-number grammar. */
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); }
.stat__label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.stat__value { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-h2); line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.stat__delta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
.stat__delta--up { color: var(--color-success); }
.stat__delta--down { color: var(--color-error); }
.stat__spark { width: 100%; height: 36px; display: block; }
.stat__spark path { fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stat__spark .spark-fill { fill: var(--color-primary); opacity: 0.12; stroke: none; }
.stat--muted .stat__value { color: var(--color-text-muted); }
.stat[aria-busy="true"] .stat__value { color: transparent; background: var(--color-bg); border-radius: var(--radius-xs); }
.stat--error { border-color: var(--color-error); }
.stat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* 50-feedback.css -- .alert, .modal (native <dialog>), .acc (accordion on <details>), .toast. */
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-m); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--text-small); line-height: var(--leading-small); }
.alert__icon { width: 20px; height: 20px; margin-top: 1px; }
.alert__icon path, .alert__icon circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.alert__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body); margin-bottom: 2px; }
.alert__body a { color: inherit; }
.alert__actions { grid-column: 2; margin-top: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.alert--info { border-color: var(--color-primary); background: var(--color-surface); }
.alert--info .alert__icon, .alert--info .alert__title { color: var(--color-primary); }
.alert--success { border-color: transparent; background: var(--color-success-soft); }
.alert--success .alert__icon, .alert--success .alert__title { color: var(--color-success); }
.alert--warning { border-color: transparent; background: var(--color-warning-soft); }
.alert--warning .alert__icon, .alert--warning .alert__title { color: var(--color-warning); }
.alert--error { border-color: transparent; background: var(--color-error-soft); }
.alert--error .alert__icon, .alert--error .alert__title { color: var(--color-error); }
.alert--inline { padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); }
.alert__close { grid-column: 3; align-self: start; background: none; border: 0; padding: 4px; margin: -4px; cursor: pointer; color: var(--color-text-muted); line-height: 0; }
.alert__close:hover { color: var(--color-text); }
.alert:has(.alert__close) { grid-template-columns: auto 1fr auto; }
/* Modal on <dialog>: the platform handles focus trap and Escape. */
.modal { border: 1px solid var(--color-border); border-radius: var(--radius-l); background: var(--color-surface-raised); color: var(--color-text); padding: 0; width: min(560px, calc(100vw - 2 * var(--space-4))); box-shadow: var(--shadow-overlay); }
.modal::backdrop { background: color-mix(in srgb, var(--color-text) 55%, transparent); }
.modal[open] { animation: modal-in var(--duration-medium) var(--ease-out); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) 0; }
.modal__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h3); line-height: var(--leading-h3); }
.modal__close { flex: none; background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: 6px; cursor: pointer; color: var(--color-text-muted); line-height: 0; }
.modal__close:hover { color: var(--color-text); border-color: var(--color-border); }
.modal__body { padding: var(--space-4) var(--space-5); color: var(--color-text-soft); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); flex-wrap: wrap; }
.modal--danger .modal__title { color: var(--color-error); }
.modal[aria-busy="true"] .modal__body { opacity: 0.5; }
/* Accordion on <details> (inherits fresh-lens .faq/.qa, same markup). */
.acc { border-top: 1px solid var(--color-border); }
.acc__item { border-bottom: 1px solid var(--color-border); }
.acc__item summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-body); color: var(--color-text); display: flex; align-items: center; gap: var(--space-3); }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after { content: "+"; margin-left: auto; font-family: var(--font-display); font-size: 1.3em; line-height: 1; color: var(--color-primary); transition: transform var(--duration-medium) var(--ease-standard); }
.acc__item[open] summary::after { transform: rotate(45deg); }
.acc__item summary:hover { color: var(--color-primary-hover); }
.acc__item summary:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.acc__item[aria-disabled="true"] summary { color: var(--color-text-muted); cursor: not-allowed; pointer-events: none; }
.acc__body { padding: 0 0 var(--space-4); color: var(--color-text-soft); line-height: 1.7; max-width: var(--measure); }
.faq { border-top: 1px solid var(--color-border); } .qa { border-bottom: 1px solid var(--color-border); }
/* Toast: transient, bottom-right, never blocking. */
.toast { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90; max-width: 360px; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-m); background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-overlay); font-size: var(--text-small); animation: toast-in var(--duration-medium) var(--ease-out); }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: var(--space-2); background: var(--color-primary); }
.toast--success::before { background: var(--color-success); }
.toast--error::before { background: var(--color-error); }
.toast__close { background: none; border: 0; color: inherit; opacity: 0.7; cursor: pointer; padding: 0; margin-left: auto; }
.toast__close:hover { opacity: 1; }
@keyframes modal-in { from { opacity: 0; transform: translateY(var(--motion-travel)); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--motion-travel)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal[open], .toast { animation: none; } }

/* 60-data.css -- .table (default + dense engine-room variant, sortable headers), .pager, .kv (key-value list), .progress. */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: 1.45; }
.table caption { text-align: left; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body); padding: var(--space-4) var(--space-4) var(--space-2); color: var(--color-text); }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.table thead th { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--weight-medium); background: var(--color-bg); position: sticky; top: 0; z-index: 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-bg); }
.table tr[aria-selected="true"] td { background: var(--color-success-soft); }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table td.num { color: var(--color-text); }
.table .up { color: var(--color-success); } .table .down { color: var(--color-error); } .table .flat { color: var(--color-text-muted); }
.table--dense th, .table--dense td { padding: var(--space-2) var(--space-3); font-size: var(--text-caption); }
.table--dense thead th { font-size: 0.667rem; }
.table--striped tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.table th[aria-sort] { cursor: pointer; }
.table th[aria-sort] button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.table th[aria-sort] button:hover { color: var(--color-text); }
.table th[aria-sort] button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.table th[aria-sort] button::after { content: "\25BE"; font-size: 0.9em; line-height: 1; opacity: 0.35; }
.table th[aria-sort="ascending"] button::after { content: "\25B4"; opacity: 1; }
.table th[aria-sort="descending"] button::after { opacity: 1; }
.table[aria-busy="true"] tbody td { color: transparent; }
.table[aria-busy="true"] tbody td::before { content: ""; display: block; height: var(--space-4); background: var(--color-bg); border-radius: var(--radius-xs); }
.table__empty td { text-align: center; color: var(--color-text-muted); padding: var(--space-7) var(--space-4); }
.table__error td { color: var(--color-error); background: var(--color-error-soft); }
.table td .badge { vertical-align: middle; }
/* Pagination */
.pager { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-caption); }
.pager a, .pager button, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-s); border: 1px solid transparent; color: var(--color-text-soft); text-decoration: none; background: none; font: inherit; cursor: pointer; }
.pager a:hover, .pager button:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.pager [aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.pager a:focus-visible, .pager button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.pager [aria-disabled="true"], .pager button:disabled { opacity: 0.4; pointer-events: none; }
.pager__gap { color: var(--color-text-muted); }
.pager__summary { margin-left: auto; color: var(--color-text-muted); }
/* Key-value list (report headers, order summaries) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-small); margin: 0; }
.kv dt { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.kv dd { margin: 0; color: var(--color-text); }
.kv dd.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Progress (page-growth toward a target; value is real or absent, never decorative) */
.progress { display: block; width: 100%; height: 8px; border-radius: var(--radius-pill); background: var(--color-border); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width var(--duration-slow) var(--ease-out); }
.progress--success > span { background: var(--color-success); }
.progress--warning > span { background: var(--color-warning); }
.progress--error > span { background: var(--color-error); }
.progress[aria-busy="true"] > span { width: 30% !important; animation: progress-slide 1.2s var(--ease-standard) infinite; }
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
@media (prefers-reduced-motion: reduce) { .progress[aria-busy="true"] > span { animation: none; width: 100% !important; opacity: 0.4; } }

/* 70-motion.css -- reveal-on-enter (progressive enhancement, inherited from fresh-lens), motion hierarchy, reduced motion. */
/* Primary attention: fade + 8px rise, once, on enter. Only when JS adds .js-motion to <html>; content is fully visible in plain CSS. */
.js-motion [data-reveal] { opacity: 0; transform: translateY(var(--motion-travel)); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
.js-motion [data-reveal][data-reveal-delay="1"] { transition-delay: 60ms; }
.js-motion [data-reveal][data-reveal-delay="2"] { transition-delay: 120ms; }
.js-motion [data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }
/* Secondary attention: colour and border only, no movement. Backgrounds never animate except the band morph fresh-lens already owns. */
.motion-secondary { transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
/* Live indicator: the one permitted ambient motion, decorative only, never wired to a real rate (anti-fabrication rule). */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); animation: live-dot 2.4s ease-in-out infinite; vertical-align: middle; }
@keyframes live-dot { 0%, 100% { transform: scale(0.7); opacity: 0.55; } 50% { transform: scale(1); opacity: 1; } }
/* Determinism switch (12.9, F-AID-04): the pixel-diff gate sets data-freeze-motion on <html> before capture; every animation and transition stops at its final state. Never set on a served page. */
html[data-freeze-motion] *, html[data-freeze-motion] *::before, html[data-freeze-motion] *::after { animation: none !important; transition: none !important; }
html[data-freeze-motion] [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .live-dot { animation: none; opacity: 0.7; transform: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* 80-homeregister.css -- the round-2 free-site register (docs/rebuild/design-decisions.md "Homepage direction
   round"), folded into the kit as named, reusable parts (queen dispatch 2026-09-02T155000Z-648 task 2a) so the
   class renderer can emit them from a record/layout, not one-off canvas markup. Ported from the operator-cleared
   canvas source (gen2.py, C:/Users/bbenn/AppData/Local/Temp/.../lw-home-round/) with every colour re-expressed as
   an existing kit token (--color-text/--color-bg/--color-secondary already equal the canvas's literal #1B231D /
   #F6F7F4 / #B8853A in the light theme) rather than the canvas's hardcoded hex, so this part passes the
   tokens-only gate and stays theme-consistent instead of forking a second palette. `.band--ink` (00-base.css) and
   the on-ink `.btn` swap (10-button.css) already existed and are reused unchanged for every ink ground below.
   Two real defects F1870 found in the canvas reference are fixed here, not reproduced: the fan-in entrance travel
   is `var(--motion-travel)` (8px, and 0 under reduced motion via tokens.css's own media query) instead of the
   canvas's hardcoded 18px, and the stagger delay is explicitly zeroed under reduced motion so a 0ms-duration
   animation with a nonzero delay never flashes the pre-entrance (opacity:0) state. */

/* -- ink header variant: the home page's header only (design-decisions.md "Home header sits on ink"); every
   other page keeps the light `.ins-header`. Modifier class, same markup, same site-chrome.js class names. -- */
.ins-header--ink { background: var(--color-text); border-bottom-color: color-mix(in oklab, var(--color-bg) 12%, transparent); }
.ins-header--ink .mark, .ins-header--ink .navr a, .ins-header--ink .navr-drop-trigger, .ins-header--ink .nav-burger { color: var(--color-bg); }
.ins-header--ink .mark:hover { color: var(--color-bg); }
.ins-header--ink .navr a:hover, .ins-header--ink .navr-drop-trigger:hover, .ins-header--ink .navr-drop-trigger[aria-expanded="true"] { color: var(--color-secondary); }
.ins-header--ink .navr a[aria-current="page"] { color: var(--color-secondary); }
.ins-header--ink .nav-burger:hover { color: var(--color-secondary); }
.ins-header--ink .badge--primary { color: var(--color-secondary); border-color: var(--color-secondary); }
.ins-header--ink .badge--primary:hover { background: color-mix(in oklab, var(--color-secondary) 14%, transparent); }
.ins-header--ink .search { border-color: color-mix(in oklab, var(--color-bg) 35%, transparent); background: color-mix(in oklab, var(--color-bg) 6%, transparent); }
.ins-header--ink .search__input { color: var(--color-bg); }
.ins-header--ink .search__btn { background: var(--color-bg); color: var(--color-text); }
.ins-header--ink .ins-header-cta { background: var(--color-bg); color: var(--color-text); }
.ins-header--ink .ins-header-cta:hover { background: var(--color-secondary); color: var(--color-text); }
@media (max-width: 720px) { .ins-header--ink .navr { background: var(--color-text); border-bottom-color: color-mix(in oklab, var(--color-bg) 12%, transparent); } }

/* -- ochre display-headline accent (design-decisions.md "Ochre returns as a display accent"): a span wrapping
   ONE word inside an otherwise-normal `.t-display`/h1/h2. Never used at small text sizes -- the ochre fails the
   4.5:1 threshold below display scale (see 00-base.css's `.tag` comment); this part carries no small-text rule
   to enforce that at the component level, so it is a per-use content discipline, same as the existing `.tag`. -- */
.accent-ochre { color: var(--color-secondary); }

/* -- category strip: a full-width ochre mono uppercase strip, dot-separated (design-decisions.md "the ochre
   category strip is part of the hook band, not a ninth section"). Renders inside the hero/hook section, never
   as its own top-level `.band`. -- */
/* the hero band's own bottom padding would otherwise leave an empty ink gap below the strip (the strip renders
   outside `.wrap`, as the last child of the SAME <section>, per design-decisions.md "part of the hook band, not
   a ninth section") -- `.band--flush-bottom` (set alongside `.category-strip` by the renderer) removes it so the
   strip is the section's true visual edge. */
.band--flush-bottom { padding-bottom: 0; }
.category-strip { background: var(--color-secondary); color: var(--color-text); padding: var(--space-4) 0; }
.category-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--text-small); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.category-strip__list li::after { content: "\00b7"; margin-left: var(--space-5); opacity: 0.6; }
.category-strip__list li:last-child::after { content: ""; margin-left: 0; }

/* -- the fanned-card signature (design-decisions.md "A decorative fan-in on the signature cards, once"): 5
   cards, tilted -4/+3/-2/+4/-3deg, a one-time entrance on load, honouring reduced motion via the token contract
   (see file header). The persistent tilt is a plain `transform` outside the animation, so it survives reduced
   motion unchanged -- only the entrance (opacity + rise) is what reduced motion removes. -- */
.fan-cards { display: flex; justify-content: center; align-items: flex-end; position: relative; z-index: 2; }
.fan-card {
  width: 188px; min-height: 168px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-s); padding: var(--space-4) var(--space-4) var(--space-3); box-shadow: var(--shadow-raised);
  margin: 0 -8px; display: flex; flex-direction: column; gap: 9px; transform-origin: 50% 100%;
  animation: fan-card-in var(--duration-slow) var(--ease-out) both;
}
.fan-card:nth-child(1) { transform: rotate(-4deg); animation-delay: 0ms; }
.fan-card:nth-child(2) { transform: rotate(3deg); animation-delay: 60ms; }
.fan-card:nth-child(3) { transform: rotate(-2deg); animation-delay: 120ms; z-index: 1; }
.fan-card:nth-child(4) { transform: rotate(4deg); animation-delay: 180ms; }
.fan-card:nth-child(5) { transform: rotate(-3deg); animation-delay: 240ms; }
@keyframes fan-card-in { from { opacity: 0; transform: translateY(var(--motion-travel)) rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .fan-card { animation-delay: 0ms; } }
.fan-card__preview { height: 44px; border-radius: var(--radius-xs); background: var(--color-bg); border: 1px solid var(--color-border); display: flex; align-items: flex-end; padding: 6px; gap: 4px; }
.fan-card__bar { width: 14px; background: var(--color-success-soft); border: 1px solid var(--color-primary); border-bottom: 0; border-radius: 2px 2px 0 0; }
.fan-card__row { height: 8px; border-radius: 2px; background: var(--color-border); }
.fan-card__row--short { width: 60%; }
.fan-card__label { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }
.fan-card__badge { align-self: flex-start; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); padding: 2px 7px; }
@media (max-width: 719px) {
  .fan-cards { flex-wrap: nowrap; justify-content: center; }
  .fan-card { width: 104px; min-height: 128px; margin: 0 -12px; padding: var(--space-3); gap: 6px; }
  .fan-card:nth-child(5) { display: none; }
  .fan-card__preview { height: 30px; }
}

/* -- split light/ink card (design-decisions.md "the register carries through every page class"; the "what
   living means" contrast card): one card, two halves, left light with rows, right ink with rows + an ochre
   link line. -- */
.split-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-raised); }
.split-card__half { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }
.split-card__half--light { background: var(--color-surface); }
.split-card__half--ink { background: var(--color-text); color: var(--color-bg); }
.split-card__half--ink h3, .split-card__half--ink h4 { color: var(--color-bg); }
.split-card__rows { display: flex; flex-direction: column; }
.split-card__rows > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-small); line-height: var(--leading-small); }
.split-card__half--ink .split-card__rows > div { border-bottom-color: color-mix(in oklab, var(--color-bg) 14%, transparent); }
.split-card__link { color: var(--color-secondary); font-size: var(--text-small); text-decoration-thickness: 1px; }
.split-card__link:hover { color: var(--color-bg); }
@media (max-width: 719px) { .split-card { grid-template-columns: minmax(0, 1fr); } .split-card__half { padding: var(--space-6); } }

/* -- ochre-numbered topic cards: a top rule, an ochre numeral, a title, a body line. -- */
.topic-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.topic-card { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.topic-card:hover .topic-card__title { color: var(--color-primary); }
.topic-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); }
.topic-card__num { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-h2); line-height: 1; color: var(--color-secondary); }
.topic-card__title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-body); color: var(--color-text); }
.topic-card__body { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); }
@media (max-width: 719px) { .topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }

/* -- ink statement band: one large centred sentence on ink, mono figures, the live dot (reused unchanged --
   `.live-dot` already carries its own reduced-motion override, 70-motion.css; this part never redefines it, the
   real defect F1870 found was in the canvas's own local recreation, not in this kit). Extends `.band--ink`. -- */
.statement-band { text-align: center; }
.statement-band__lead { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h1); line-height: var(--leading-h1); max-width: 30ch; margin: 0 auto; text-wrap: balance; }
.figure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; }
.figure { display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid color-mix(in oklab, var(--color-bg) 18%, transparent); padding-top: var(--space-4); }
.figure__value { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-h1); line-height: 1; color: var(--color-bg); font-variant-numeric: tabular-nums; }
.figure__label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-secondary); display: flex; align-items: center; gap: var(--space-2); }
.figure__date { font-family: var(--font-mono); font-size: var(--text-caption); color: color-mix(in oklab, var(--color-bg) 68%, var(--color-secondary)); }
@media (max-width: 719px) { .figure-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }

/* -- ink funnel variant: `.band--ink` (00-base.css) plus the on-ink `.btn` swap (10-button.css) already cover
   this fully -- no new CSS needed. Applying `.band--ink` to the funnel `<section>` IS the ink funnel. -- */

/* -- hero grid: the alive signature as the hero's own right half (queen dispatch 2026-09-02T165800Z-650,
   operator rec 1, verbatim "make the colony the hero's right half at twice the size" -- "the colony IS the
   hero's second half, not a diagram below it"). Two columns at desktop widths, a single stacked column below
   the SAME 719px threshold every other part of this file already uses (mobile-pass.md's existing PC1 hero
   mobile-stacking rule, extended rather than reinvented) -- the signature stacks AFTER the copy on mobile
   (`order: 2`), matching copy-to-preserve.md's "free claim first in reading order" rule for this hero. Scoped
   to the record's own `aliveSignature`-flagged hero markup (scripts/rebuild-render-class.mjs's hero case) --
   a plain fanned-card ink hero (no template opts into that flag yet) keeps its existing single-column stacked
   layout, since the operator's ruling named the colony specifically, not every ink hero. -- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero-grid__copy { min-width: 0; }
.hero-grid__signature { min-width: 0; }
@media (max-width: 719px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hero-grid__copy { order: 1; }
  .hero-grid__signature { order: 2; }
}

/* -- the price line as the offer, not metadata (operator rec 4, second half, verbatim "the price line ... sits
   in small monospace and reads as metadata rather than the offer; give it the weight the offer needs"): the
   statement-band's own mono-figure register (`.figure__value`, above) instead of the old plain `.t-figure`
   treatment. The rendered digit strings are byte-identical to before (only the wrapping span/class changed in
   scripts/rebuild-render-class.mjs), so gate 7's no-fabricate plain-substring match still finds them. -- */
.price-line { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 2px; }
.price-line__figure { font-family: var(--font-mono); font-size: var(--text-h3); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.price-line__sep { font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--weight-regular); opacity: 0.75; }
.price-line__qualifier { flex-basis: 100%; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: color-mix(in oklab, var(--color-bg) 70%, var(--color-secondary)); }

/* 81-alivesignature.css -- the living signature (queen dispatch 2026-09-02T161800Z-649, part 3 of -648: "the
   living aspect ... creative and fancy", inside the three truths: alive means true, one signature not scattered
   motion, the July colony hero is the lineage). Concept A from docs/rebuild/alive-signature-brainstorm.md,
   recommended and built there BEFORE this file was written.

   Real-data contract: every card's title/path/date and the running count are read from data/alive-signature-
   feed.json and data/site-telemetry.json by scripts/rebuild-render-class.mjs's aliveColony() -- this file draws
   NOTHING itself; it only positions and animates what the renderer already filled in from real records. If the
   feed is empty (a fresh checkout before the feed script has ever run), the renderer falls back to the existing
   decorative `.fan-cards` (80-homeregister.css) instead of rendering an empty or fabricated colony.

   Motion contract, load-bearing: every element that moves does so ONCE, on load, as part of the SAME one-time
   entrance sequence (threads draw in, then the hub and all four cards settle) -- a re-enactment of real,
   already-happened, dated events, never a repeating/looping claim of ongoing activity (the lineage file's own
   v8-growth used an infinite 9s loop; truth #1 forbids implying a new page is born on a fixed short cycle,
   since that is not true, so this port removes the loop rather than reproducing it -- see the brainstorm doc's
   Concept A section). The newest card (`.colony__card--new`) and its thread (`.colony__thread--new`) still
   settle LAST and carry the strongest visual weight (secondary-colour border/thread, the headline-weight title
   and date below) -- it is still the one re-enactment the whole signature is built around; the 3 "steady" cards
   and the hub now also play the SAME single entrance (fade/rise, once) instead of appearing with no motion at
   all, so the whole colony reads as one coordinated arrival rather than "three static things plus one that
   moves." After the entrance settles, the hub dot alone picks up a continuous ambient breath -- decorative
   only, the same `.live-dot` (70-motion.css) contract, explicitly never wired to a real rate and explicitly
   outside the one-time entrance (see the revision note below).

   Freeze-switch contract (docs/rebuild/motion-review-12-10.md, the row this file's dispatch added): follows the
   SAME technique `.fan-card` (80-homeregister.css) already uses -- the animated end-state (opacity, transform,
   stroke-dashoffset) is declared ONLY inside the `@keyframes ... from { }` block, never as a base rule on the
   class itself. `html[data-freeze-motion] *` (70-motion.css) already sets `animation: none !important` on
   every element; because nothing here sets an "un-animated" base value, removing the animation naturally
   reverts the element to its default, fully-visible, undashed state -- no extra freeze override needed, and
   none is added (avoids a second, easy-to-miss !important surface).

   SCALED + STAGED revision (queen dispatch 2026-09-02T165800Z-650, operator ruling on the F1872 prototype:
   "I like it, but agree with your recs"). Four changes, presentation/staging only -- the real-data contract
   above is untouched:
   (1) sized up to sit as the hero's own right half (`.hero-grid__signature`, 80-homeregister.css) instead of a
       small schematic below the hero -- see the "hero-grid scale" section below.
   (2) the entrance widens to three chained stages, still ONE entrance, once, inside this section only: all
       four threads draw in, then the hub and all four cards settle, then the hub picks up a continuous ambient
       breath (the live-dot's own decorative-only, never-a-real-rate contract, explicitly excluded from the
       one-time entrance and explicitly stopped -- not slowed -- under reduced motion).
   (3) the newest card's title and date get the statement-band's own mono-figure weight, so the real dated fact
       reads as the page's headline claim, not incidental card metadata.
   Every element that moves still traces to the same two real files named above; nothing new was made to move.

   REST-STATE revision (queen dispatch 2026-09-02T183500Z-653, operator ruling: "Approved. Yes, with one move:
   keep the structure visible at rest"). Not a new element and not new motion -- two colour-only fixes to the
   SETTLED state the three-stage entrance above already lands on:
   (a) `.colony__thread` (the 3 non-newest threads) drew at `color-mix(in oklab, var(--color-bg) 22%,
       transparent)` -- a live t+10s render measured this as `oklab(0.9745 ... / 0.22)`, i.e. a near-white
       stroke at 22% alpha on the ink band's dark ground, and the resulting screenshot showed literally no
       visible line for 3 of the 4 threads (only `.colony__thread--new`'s solid, un-mixed `--color-secondary`
       stroke was visible) -- caught by measuring the computed style and looking at the actual PNG, not assumed
       from the CSS. Raised to 48% alpha: still visibly quieter than the ochre newest-thread accent (never
       claims equal weight with the one real re-enactment the signature is built around), but now a real,
       readable line at rest, not a ghost.
   (b) `.colony__hub-label` ("LIVING") measured with adequate contrast already (an opaque warm-light colour on
       the dark ink ground) and read clearly in the same t+10s screenshot -- strengthened anyway from a 72%
       bg/28% secondary blend to 58%/42% for real margin, since the operator named the label explicitly and a
       small caption-sized mono label has little room to spare.
   Nothing here touches `stroke-dashoffset`, any `animation-*` property, or the hub-dot's own ambient breathe
   (`colony-hub-breathe`, unchanged) -- the one-time entrance still plays once and settles exactly as before;
   only what the SETTLED colours already were changes. */

/* Four-corner hub layout (revised after the first render showed the fan-style overlap positions colliding --
   real card heights, driven by real variable-length titles, do not fit the original tighter fan coordinates
   cleanly). Each card owns one quadrant of the box with a wide dead zone between quadrants, so overlap cannot
   happen regardless of how many lines a given real title wraps to; the hub sits in the middle with a thread to
   each corner. Less literally "fanned" than the lineage file's cascade, more legible -- named as a deliberate
   adaptation, not a defect, in the review package. */
.colony { position: relative; max-width: 600px; height: 340px; margin: var(--space-8) auto 0; }
.colony__threads { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Stage 1 (0-480ms): every thread draws in (stroke-dashoffset). 300 is a safe over-estimate of every path's
   real length (the longest hub-to-corner curve measures roughly 250-260 units in the 560x620 reference box
   below) -- a dasharray value at or above the true path length is what makes the "hidden at full offset, fully
   drawn at zero offset" reveal technique work; extra slack beyond the real length is harmless (docs/rebuild/
   alive-signature-brainstorm.md's geometry note). The newest thread keeps its own stronger colour/weight and a
   slightly later delay so it still reads as the one the sequence is building toward, not a fourth identical
   line. */
.colony__thread {
  fill: none; stroke: color-mix(in oklab, var(--color-bg) 48%, transparent); stroke-width: 2;
  stroke-dasharray: 300; animation: colony-thread-in var(--duration-slow) var(--ease-out) both; animation-delay: 0ms;
}
.colony__thread--new { stroke: var(--color-secondary); stroke-width: 2; animation-delay: 60ms; }
@keyframes colony-thread-in { from { stroke-dashoffset: 300; } }

/* Stage 2 (~340-1000ms, overlapping stage 1's tail): the hub fades/scales in, then the four cards settle in
   turn -- steady cards first, the newest card last, so it still visibly arrives as the sequence's climax. */
.colony__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex;
  flex-direction: column; align-items: center; gap: 4px;
  animation: colony-hub-in var(--duration-slow) var(--ease-out) both; animation-delay: 340ms;
}
@keyframes colony-hub-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }

/* Stage 3 (~950ms on, continuous): the hub dot alone picks up a slow ambient breath -- same decorative-only,
   never-wired-to-a-real-rate contract as `.live-dot` (70-motion.css), and explicitly stopped (not slowed)
   under reduced motion, same as that rule's own override. It starts only once stage 2 has fully settled, so it
   never reads as a second entrance -- it is idle/ambient motion on an already-settled element, the same
   category the motion spec already permits per page. */
.colony__hub-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-bg);
  animation: colony-hub-breathe 3.2s var(--ease-standard) infinite; animation-delay: 950ms;
}
@keyframes colony-hub-breathe { 0%, 100% { transform: scale(0.82); opacity: 0.72; } 50% { transform: scale(1); opacity: 1; } }
.colony__hub-label { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: color-mix(in oklab, var(--color-bg) 58%, var(--color-secondary)); white-space: nowrap; }

.colony__card {
  position: absolute; width: 168px; z-index: 2; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-s); box-shadow: var(--shadow-raised); overflow: hidden;
  animation: colony-card-in var(--duration-slow) var(--ease-out) both;
}
@keyframes colony-card-in { from { opacity: 0; transform: translateY(var(--motion-travel)) scale(0.94); } }

.colony__card-bar { background: var(--color-bg); padding: 4px 7px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.colony__card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.colony__card-title { font-family: var(--font-body); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.colony__card-date { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }

/* The newest card's date and title carry the statement-band's own mono-figure register (operator rec 3,
   verbatim "let the newest card carry its date as the headline fact") -- the real dated fact reads as the
   page's proof claim, not incidental card metadata. Title moves to the display face at a heavier weight for
   the same reason; both stay inside the existing card box, no layout change beyond type. */
.colony__card--new { border-color: var(--color-secondary); border-width: 1.5px; }
.colony__card--new .colony__card-bar { background: color-mix(in oklab, var(--color-secondary) 14%, var(--color-surface)); color: var(--color-secondary); }
.colony__card--new .colony__card-title { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-small); line-height: var(--leading-small); }
.colony__card--new .colony__card-date { color: var(--color-secondary); font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-h4); line-height: var(--leading-h4); margin-top: 2px; }

.colony__card--a { left: 0; top: 0; animation-delay: 380ms; }
.colony__card--b { right: 0; top: 0; animation-delay: 420ms; }
.colony__card--c { left: 0; bottom: 0; animation-delay: 460ms; }
.colony__card--new { right: 0; bottom: 0; animation-delay: 520ms; }

.colony__count { font-family: var(--font-mono); font-size: var(--text-caption); color: color-mix(in oklab, var(--color-bg) 70%, var(--color-secondary)); margin: var(--space-3) 0 0; }
.colony__count strong { font-weight: var(--weight-medium); color: var(--color-bg); font-variant-numeric: tabular-nums; }

/* Reduced motion: every entrance delay zeroes (same technique F1870 already used on `.fan-card` -- a 0ms
   animation with a leftover delay would otherwise flash the pre-entrance state); the breath STOPS, not just
   speeds up, matching `.live-dot`'s own reduced-motion override -- a continuous decorative pulse is exactly
   the kind of non-essential motion `prefers-reduced-motion` exists to remove. Every selector below is listed
   individually at the same specificity as the rule it overrides (1 class each) so the later position in this
   file, not a specificity trick, is what wins -- same convention the base entrance rules above already rely on. */
@media (prefers-reduced-motion: reduce) {
  .colony__thread, .colony__thread--new,
  .colony__hub,
  .colony__card--a, .colony__card--b, .colony__card--c, .colony__card--new {
    animation-delay: 0ms;
  }
  .colony__hub-dot { animation: none; opacity: 0.85; transform: none; }
}

/* Desktop scale (operator rec 1, verbatim "make the colony the hero's right half at twice the size"): only
   inside `.hero-grid__signature` (80-homeregister.css) -- the base `.colony` above stays at its original F1872
   size for any future non-grid context. Gated to the SAME `min-width: 720px` breakpoint the mobile block below
   already uses, deliberately -- an ungated override here would out-specificity the mobile block's `.colony`
   rule (two classes beats one) regardless of viewport, since CSS specificity does not know about media queries.
   Width and height cannot both literally double (a two-column half of a 1160px container has roughly 500-550px
   to work with, not 1200px). A first pass at height:620px (a literal ~1.8x) rendered with a large dead gap in
   the middle of the box -- the four small corner cards do not fill that much vertical room, so the extra height
   just became empty space, not visual weight (caught by screenshot, not assumed). Settled on height:460px
   (~1.35x) plus every card growing ~1.3x (168px -> 224px) and the newest card's own type growing further still
   (below) -- named here plainly as the real, deliberate interpretation of "twice the size": the combination of
   a dedicated half-hero column, larger cards, and headline-weight newest-card type reads as roughly doubled
   prominence without the literal-height approach's wasted middle, not a silent shortfall. */
@media (min-width: 720px) {
  .hero-grid__signature .colony { max-width: none; width: 100%; height: 460px; margin: 0; }
  /* Percentage, not a fixed px, and for a real reason: a fixed 224px card (this box's own width at a wide
     1280px viewport) real-overflowed into its sibling card at 768px, where the grid COLUMN itself is only
     ~300-330px wide (a 768px viewport minus wrap padding and the hero-grid gap, halved) -- two fixed 224px
     cards do not fit side by side in a ~320px column, and position:absolute cards do not wrap or shrink on
     their own (caught by screenshot at 768, not assumed safe from the 1280 render alone). `clamp()` against the
     card's own containing block (`.colony`, itself 100% of the grid column) keeps every card proportional to
     whatever column width the viewport actually gives it, capped at the same 224px the 1280 render was tuned
     against and floored at 130px so text stays legible at the narrowest width this rule still applies to
     (720px, just above the mobile breakpoint where the layout changes shape entirely, below). */
  .hero-grid__signature .colony__card { width: clamp(130px, 42%, 224px); }
}

@media (max-width: 719px) {
  .colony { max-width: 100%; height: auto; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
  .colony__threads, .colony__hub { display: none; }
  .colony__card { position: static; width: 100%; }
  .colony__card-body { padding: var(--space-3) var(--space-4); }
  .colony__card-title { -webkit-line-clamp: 2; }
}