/* ==========================================================================
   site.css -- authored implementation for the systems-parity prototype.

   Binding rule: every governed colour, spacing, typography, radius and
   duration declaration resolves through a variable. Semantic variables use
   the --c- prefix and must themselves terminate in a --p- primitive. This
   file may never define a --p- variable; tools/primitives.py check enforces
   all of that. Geometry exceptions are declared inline with a px-ok comment
   naming the reason, and the checker reports every one of them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Semantic layer -- the ONLY place primitives are given roles.
   -------------------------------------------------------------------------- */

:root {
  /* ink and field */
  --c-text-primary: var(--p-color-ink-800);
  --c-text-secondary: var(--p-color-ink-600);
  --c-text-muted: var(--p-color-ink-500);
  --c-text-on-accent: var(--p-color-white);
  --c-surface: var(--p-color-white);
  --c-surface-raised: var(--p-color-white);
  --c-surface-sunken: var(--p-color-field-50);
  --c-line: var(--p-color-line-200);
  --c-line-strong: var(--p-color-line-300);

  /* the single interactive hue */
  --c-accent: var(--p-color-accent-600);
  --c-accent-hover: var(--p-color-accent-700);
  --c-accent-surface: var(--p-color-accent-50);
  --c-focus-ring: var(--p-color-accent-600);

  /* interface specimen palette */
  --c-ui-surface: var(--p-color-field-50);
  --c-ui-rail: var(--p-color-field-100);
  --c-ui-line: var(--p-color-line-300);
  --c-ui-line-soft: var(--p-color-line-200);
  --c-ui-ink: var(--p-color-ink-800);
  --c-ui-accent: var(--p-color-accent-600);
  --c-ui-ok: var(--p-color-support-moss);
  --c-ui-warn: var(--p-color-support-clay);

  /* generated abstract imagery -- one source, used sharp and blurred */
  --c-plate-1: var(--p-color-accent-600);
  --c-plate-2: var(--p-color-support-clay);
  --c-plate-3: var(--p-color-support-slate);
  --c-plate-4: var(--p-color-ink-900);
  --c-plate-grain: color-mix(in oklab, var(--p-color-white) 9%, transparent);
  --c-plate-spot: color-mix(in oklab, var(--p-color-white) 16%, transparent);
  --c-plate-scrim: color-mix(in oklab, var(--p-color-ink-900) 72%, transparent);
  --c-plate-scrim-soft: color-mix(in oklab, var(--p-color-ink-900) 34%, transparent);

  /* motion: one multiplier drives every duration on the page */
  --c-motion-scale: 1;
  --c-dur-fast: calc(var(--c-motion-scale) * var(--p-motion-dur-fast));
  --c-dur-base: calc(var(--c-motion-scale) * var(--p-motion-dur-base));
  --c-dur-slow: calc(var(--c-motion-scale) * var(--p-motion-dur-slow));
  --c-ease: var(--p-motion-ease-out);
  --c-ease-emphasis: var(--p-motion-ease-emphasis);

  /* the pinned sequence is expressed entirely as two geometry variables,
     so its reduced-motion replacement needs no duplicated rule blocks */
  --c-pin-top: calc(var(--p-geometry-nav-height) + var(--p-geometry-hairline));
  --c-pin-min-h: var(--p-geometry-pin-stage);

  /* logo wall flatten level */
  --c-logo-opacity: 0.32;

  color-scheme: light;
}

/* --- reduced motion -------------------------------------------------------
   Two sources, one effect. (a) the operating system preference, unless the
   reader has explicitly asked for full motion in the page; (b) the in-page
   control. Both land on the same three variables, so the entire reduced
   state is a variable swap rather than a parallel set of layout rules. */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) {
    --c-motion-scale: 0;
    --c-pin-top: auto;
    --c-pin-min-h: auto;
  }
}

html[data-motion="reduced"] {
  --c-motion-scale: 0;
  --c-pin-top: auto;
  --c-pin-min-h: auto;
}

html[data-motion="full"] {
  --c-motion-scale: 1;
  --c-pin-top: calc(var(--p-geometry-nav-height) + var(--p-geometry-hairline));
  --c-pin-min-h: var(--p-geometry-pin-stage);
}


/* --------------------------------------------------------------------------
   2. Section themes -- custom-property inheritance, one rule per theme.
   Nesting is correct by construction: the innermost scope wins by
   inheritance, so no exclusion chain is needed and adding a fifth theme
   costs exactly one rule.
   -------------------------------------------------------------------------- */

.theme-base {
  --c-text-primary: var(--p-color-ink-800);
  --c-text-secondary: var(--p-color-ink-600);
  --c-text-muted: var(--p-color-ink-500);
  --c-surface: var(--p-color-white);
  --c-surface-raised: var(--p-color-field-50);
  --c-line: var(--p-color-line-200);
  --c-accent: var(--p-color-accent-600);
  --c-focus-ring: var(--p-color-accent-600);
}

.theme-warm {
  --c-text-primary: var(--p-color-ink-800);
  --c-text-secondary: var(--p-color-ink-600);
  --c-text-muted: var(--p-color-ink-500);
  --c-surface: var(--p-color-field-50);
  --c-surface-raised: var(--p-color-white);
  --c-line: var(--p-color-line-300);
  --c-accent: var(--p-color-accent-600);
  --c-focus-ring: var(--p-color-accent-600);
}

.theme-deep {
  --c-text-primary: var(--p-color-white);
  --c-text-secondary: color-mix(in oklab, var(--p-color-white) 78%, transparent);
  --c-text-muted: color-mix(in oklab, var(--p-color-white) 70%, transparent);
  --c-surface: var(--p-color-ink-900);
  --c-surface-raised: color-mix(in oklab, var(--p-color-white) 7%, transparent);
  --c-line: color-mix(in oklab, var(--p-color-white) 16%, transparent);
  --c-accent: var(--p-color-accent-300);
  --c-accent-hover: var(--p-color-white);
  --c-focus-ring: var(--p-color-accent-300);
}

.theme-accent {
  --c-text-primary: var(--p-color-white);
  --c-text-secondary: color-mix(in oklab, var(--p-color-white) 80%, transparent);
  --c-text-muted: var(--p-color-accent-50);
  --c-surface: var(--p-color-accent-600);
  --c-surface-raised: color-mix(in oklab, var(--p-color-white) 10%, transparent);
  --c-line: color-mix(in oklab, var(--p-color-white) 22%, transparent);
  --c-accent: var(--p-color-white);
  --c-accent-hover: var(--p-color-accent-50);
  --c-focus-ring: var(--p-color-white);
}


.theme-base,
.theme-warm,
.theme-deep,
.theme-accent {
  color: var(--c-text-primary);
  background-color: var(--c-surface);
}


/* --------------------------------------------------------------------------
   3. Reset and document base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: var(--p-space-4);
}

body {
  background-color: var(--p-color-white);
  color: var(--c-text-secondary);
  font-family: var(--p-type-family-sans);
  font-size: var(--p-type-body-md-size);
  font-weight: var(--p-type-weight-regular);
  line-height: var(--p-type-body-md-leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, li { text-wrap: pretty; }

img, svg { display: block; max-width: 100%; }

code {
  font-family: var(--p-type-family-mono);
  font-size: var(--p-type-body-sm-size);
  background-color: var(--c-surface-sunken);
  border-radius: var(--p-radius-xs);
  padding-block: var(--p-space-1);
  padding-inline: var(--p-space-1);
}

::selection {
  background-color: var(--c-accent);
  color: var(--p-color-white);
}


/* --------------------------------------------------------------------------
   4. Type roles -- one class per role. The class never changes across
   breakpoints; the primitive value does.
   -------------------------------------------------------------------------- */

.t-display {
  font-size: var(--p-type-display-size);
  line-height: var(--p-type-display-leading);
  letter-spacing: var(--p-type-display-tracking);
  font-weight: var(--p-type-display-weight);
  color: var(--c-text-primary);
}
.t-headline-xl {
  font-size: var(--p-type-headline-xl-size);
  line-height: var(--p-type-headline-xl-leading);
  letter-spacing: var(--p-type-headline-xl-tracking);
  font-weight: var(--p-type-headline-xl-weight);
  color: var(--c-text-primary);
}
.t-headline-lg {
  font-size: var(--p-type-headline-lg-size);
  line-height: var(--p-type-headline-lg-leading);
  letter-spacing: var(--p-type-headline-lg-tracking);
  font-weight: var(--p-type-headline-lg-weight);
  color: var(--c-text-primary);
}
.t-headline-md {
  font-size: var(--p-type-headline-md-size);
  line-height: var(--p-type-headline-md-leading);
  letter-spacing: var(--p-type-headline-md-tracking);
  font-weight: var(--p-type-headline-md-weight);
  color: var(--c-text-primary);
}
.t-headline-sm {
  font-size: var(--p-type-headline-sm-size);
  line-height: var(--p-type-headline-sm-leading);
  letter-spacing: var(--p-type-headline-sm-tracking);
  font-weight: var(--p-type-headline-sm-weight);
  color: var(--c-text-primary);
}
.t-body-lg {
  font-size: var(--p-type-body-lg-size);
  line-height: var(--p-type-body-lg-leading);
  font-weight: var(--p-type-body-lg-weight);
}
.t-body-md {
  font-size: var(--p-type-body-md-size);
  line-height: var(--p-type-body-md-leading);
  font-weight: var(--p-type-body-md-weight);
}
.t-body-sm {
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  font-weight: var(--p-type-body-sm-weight);
}
.t-label {
  font-size: var(--p-type-label-size);
  line-height: var(--p-type-label-leading);
  letter-spacing: var(--p-type-label-tracking);
  font-weight: var(--p-type-label-weight);
  text-transform: uppercase;
  color: var(--c-text-muted);
}


/* --------------------------------------------------------------------------
   5. Focus system -- two named roles. The outline is present but transparent
   at rest, so gaining focus never shifts layout, and the ring colour is
   inherited from the section theme.
   -------------------------------------------------------------------------- */

.focus-ring {
  outline: var(--p-geometry-focus-ring) solid transparent;
  outline-offset: var(--p-geometry-focus-offset);
  border-radius: var(--p-radius-sm);
}
.focus-ring:focus-visible { outline-color: var(--c-focus-ring); }

.focus-ring-text {
  outline: var(--p-geometry-hairline) solid transparent;
  outline-offset: var(--p-space-1);
  border-radius: var(--p-radius-xs);
}
.focus-ring-text:focus-visible {
  outline: var(--p-geometry-focus-ring) solid var(--c-focus-ring);
  outline-offset: var(--p-space-1);
}

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  translate: -50% -150%;
  z-index: 60;
  background-color: var(--p-color-ink-900);
  color: var(--p-color-white);
  padding-block: var(--p-space-3);
  padding-inline: var(--p-space-5);
  border-radius: var(--p-radius-sm);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  transition: translate var(--c-dur-base) var(--c-ease);
}
/* :focus, not :focus-visible -- a skip link is only ever reached by keyboard,
   and it must reveal itself for programmatic focus too. */
.skip-link:focus { translate: -50% var(--p-space-3); }


/* --------------------------------------------------------------------------
   6. Layout -- one capped container, one twelve-column grid.
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--p-geometry-container-max);
  margin-inline: auto;
  padding-inline: var(--p-space-container-pad);
}
.container--prose { max-width: var(--p-geometry-measure-prose); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--p-space-grid-gutter);
  row-gap: var(--p-space-6);
}
.grid > * { grid-column: span 12; }

.section { padding-block: var(--p-space-section-y); }
.section--flush { padding-block-end: var(--p-space-8); }

.section__head {
  max-width: var(--p-geometry-measure-prose);
  margin-inline: auto;
  margin-block-end: var(--p-space-10);
  text-align: center;
}
.section__sub {
  color: var(--c-text-secondary);
  margin-block-start: var(--p-space-4);
}
.section__foot {
  color: var(--c-text-muted);
  max-width: var(--p-geometry-measure-prose);
  margin-inline: auto;
  margin-block-start: var(--p-space-10);
  text-align: center;
}


/* --------------------------------------------------------------------------
   7. Header, navigation, disclosures, motion control
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  background-color: var(--c-surface);
  border-block-end: var(--p-geometry-hairline) solid var(--c-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--p-space-4);
  min-height: var(--p-geometry-nav-height);
  padding-block: var(--p-space-3);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-2);
  min-height: var(--p-geometry-tap-min);
  color: var(--c-text-primary);
  text-decoration: none;
  margin-inline-end: auto;
}
.brandmark { width: 1.75rem; height: 1.75rem; color: var(--c-accent); }
.site-header__wordmark {
  font-size: var(--p-type-headline-sm-size);
  line-height: var(--p-type-headline-sm-leading);
  letter-spacing: var(--p-type-headline-md-tracking);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--p-space-1);
  list-style: none;
}
.site-nav__item { position: relative; }
.site-nav__trigger,
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-text-secondary);
  font-family: var(--p-type-family-sans);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  font-weight: var(--p-type-weight-regular);
  min-height: var(--p-geometry-tap-min);
  padding-block: var(--p-space-2);
  padding-inline: var(--p-space-3);
  border-radius: var(--p-radius-sm);
  text-decoration: none;
  transition: color var(--c-dur-fast) var(--c-ease), background-color var(--c-dur-fast) var(--c-ease);
}
@media (hover: hover) {
  .site-nav__trigger:hover,
  .site-nav__link:hover { color: var(--c-accent); background-color: var(--c-accent-surface); }
}
.site-nav__trigger:active,
.site-nav__link:active { color: var(--c-accent); }
.site-nav__trigger[aria-expanded="true"] {
  color: var(--c-accent);
  background-color: var(--c-accent-surface);
}
.site-nav__chevron {
  width: 1rem;
  height: 1rem;
  transition: rotate var(--c-dur-fast) var(--c-ease);
}
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { rotate: 180deg; }

.site-nav__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--p-space-2));
  inset-inline-start: 0;
  min-width: 12rem;
  background-color: var(--p-color-white);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-shadow-raised);
  padding: var(--p-space-2);
  z-index: 10;
}
.site-nav__panel[hidden] { display: none; }
.site-nav__panel-list { list-style: none; }
.site-nav__panel-list a {
  display: flex;
  align-items: center;
  min-height: var(--p-geometry-tap-min);
  color: var(--c-text-secondary);
  text-decoration: none;
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  padding-block: var(--p-space-2);
  padding-inline: var(--p-space-3);
  border-radius: var(--p-radius-xs);
  transition: color var(--c-dur-fast) var(--c-ease), background-color var(--c-dur-fast) var(--c-ease);
}
@media (hover: hover) {
  .site-nav__panel-list a:hover { color: var(--c-accent); background-color: var(--c-accent-surface); }
}

.motion-toggle {
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-md);
  padding-block: var(--p-space-2);
  padding-inline: var(--p-space-3);
}
.motion-toggle__legend {
  font-size: var(--p-type-label-size);
  line-height: var(--p-type-label-leading);
  letter-spacing: var(--p-type-label-tracking);
  font-weight: var(--p-type-label-weight);
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-inline: var(--p-space-1);
}
.motion-toggle__options { display: flex; gap: var(--p-space-3); }
.motion-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--p-space-1);
  /* the label is the real hit area, so it carries the touch target */
  min-height: var(--p-geometry-tap-min);
  padding-inline: var(--p-space-1);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  color: var(--c-text-secondary);
  cursor: pointer;
}
.motion-toggle__opt input {
  accent-color: var(--c-accent);
  cursor: pointer;
  width: var(--p-geometry-control-dot);
  height: var(--p-geometry-control-dot);
}
.motion-toggle__state {
  font-size: var(--p-type-label-size);
  line-height: var(--p-type-label-leading);
  color: var(--c-text-muted);
  margin-block-start: var(--p-space-1);
}


/* --------------------------------------------------------------------------
   8. Hero and the blur plate.
   The plate is generated abstract imagery: one gradient stack, rendered
   twice -- once blurred as the ambient field, once sharp as the crop.
   -------------------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--p-space-section-y); }

.plate { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* One generated source. The fine structural layers are what make the sharp
   crop legibly sharp; the blurred field dissolves them into a colour wash. */
.plate__field,
.plate__crop {
  background-color: var(--c-plate-4);
  background-image:
    repeating-linear-gradient(115deg, var(--c-plate-grain) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(24deg, var(--c-plate-grain) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 31% 41%, var(--c-plate-spot) 0%, transparent 9%),
    radial-gradient(circle at 63% 27%, var(--c-plate-spot) 0%, transparent 7%),
    radial-gradient(circle at 47% 69%, var(--c-plate-spot) 0%, transparent 11%),
    radial-gradient(circle at 18% 24%, var(--c-plate-1) 0%, transparent 46%),
    radial-gradient(circle at 74% 16%, var(--c-plate-2) 0%, transparent 42%),
    radial-gradient(circle at 58% 78%, var(--c-plate-3) 0%, transparent 52%),
    radial-gradient(circle at 6% 88%, var(--c-plate-2) 0%, transparent 38%);
}
.plate__field {
  position: absolute;
  inset: -12%;
  filter: blur(64px) saturate(118%);
  opacity: 0.92;
}
/* Corrected from the reference, which sets white type straight onto a blur
   plate so contrast depends on wherever the image happens to be light. A
   scrim makes the text contrast a property of the system, not of the asset. */
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg, var(--c-plate-scrim) 0%, var(--c-plate-scrim-soft) 58%, transparent 100%);
}
.plate__crop {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--p-radius-lg);
  background-size: 220% 220%;
  background-position: 26% 30%;
  border: var(--p-geometry-hairline) solid var(--c-line);
}

.hero__inner { position: relative; }
.hero__copy { grid-column: span 12; }
.hero__lede { color: var(--c-text-secondary); margin-block-start: var(--p-space-5); max-width: var(--p-geometry-measure-prose); }
.hero__kicker { margin-block-start: var(--p-space-6); }
.hero__crop { grid-column: span 12; }
.hero__crop-caption {
  color: var(--c-text-muted);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  margin-block-start: var(--p-space-3);
}

.pill {
  display: inline-block;
  background-color: var(--c-surface-raised);
  color: var(--c-text-primary);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-2xl);
  padding-block: var(--p-space-2);
  padding-inline: var(--p-space-4);
  font-size: var(--p-type-label-size);
  line-height: var(--p-type-label-leading);
  letter-spacing: var(--p-type-label-tracking);
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   9. Logo wall -- uniform tonal flatten, restored by attention.
   -------------------------------------------------------------------------- */

.logo-wall {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--p-space-grid-gutter);
  row-gap: var(--p-space-8);
  align-items: center;
}
.logo-wall__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--p-geometry-tap-min);
  color: var(--c-text-primary);
  text-decoration: none;
  /* the flatten: crushes every mark to one tonal value regardless of its own
     luminance. grayscale() would preserve each mark's weight and the wall
     would go lumpy. */
  filter: brightness(0) opacity(var(--c-logo-opacity));
  transition: filter var(--c-dur-base) var(--c-ease);
}
@media (hover: hover) {
  .logo-wall__link:hover { filter: none; }
}
.logo-wall__link:focus-visible,
.logo-wall__link:active { filter: none; }

.logo { width: 100%; height: var(--p-geometry-logo-cell-height); }
.logo__text {
  font-family: var(--p-type-family-sans);
  font-size: 15px; /* px-ok: SVG user-space unit inside a fixed 150x28 viewBox, not page type */
  font-weight: var(--p-type-weight-medium);
  fill: currentColor;
}


/* --------------------------------------------------------------------------
   10. Grid demonstration
   -------------------------------------------------------------------------- */

.grid--demo { margin-block-start: var(--p-space-8); }
.grid-cell {
  background-color: var(--c-surface-raised);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-md);
  padding-block: var(--p-space-8);
  padding-inline: var(--p-space-4);
  text-align: center;
}
.grid-cell__label {
  font-family: var(--p-type-family-mono);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  color: var(--c-text-muted);
}

.spec-list { margin-block-start: var(--p-space-10); }
.spec-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--p-space-2);
  padding-block: var(--p-space-3);
  border-block-start: var(--p-geometry-hairline) solid var(--c-line);
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
}
.spec-list__row dt { color: var(--c-text-primary); min-width: 9rem; }
.spec-list__row dd { color: var(--c-text-muted); }


/* --------------------------------------------------------------------------
   11. Type specimen
   -------------------------------------------------------------------------- */

.type-specimen {
  border-block-start: var(--p-geometry-hairline) solid var(--c-line);
  margin-block-start: var(--p-space-8);
}
.type-specimen__row {
  padding-block: var(--p-space-4);
  border-block-end: var(--p-geometry-hairline) solid var(--c-line);
  max-width: var(--p-geometry-measure-prose);
}
.type-specimen__row--muted { color: var(--c-text-muted); }


/* --------------------------------------------------------------------------
   12. Theme bands and the card that never changes
   -------------------------------------------------------------------------- */

.theme-band { background-color: var(--c-surface); padding-block: var(--p-space-10); }
.theme-band__inner { display: flex; flex-direction: column; gap: var(--p-space-4); }
.theme-band__tag { font-family: var(--p-type-family-mono); text-transform: none; }

.card {
  background-color: var(--c-surface-raised);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-6);
  max-width: var(--p-geometry-measure-prose);
}
.card__title { margin-block-end: var(--p-space-2); }
.card__body { color: var(--c-text-secondary); margin-block-end: var(--p-space-4); }

.link {
  display: inline-flex;
  align-items: center;
  min-height: var(--p-geometry-tap-min);
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-size: var(--p-type-body-sm-size);
  line-height: var(--p-type-body-sm-leading);
  transition: color var(--c-dur-fast) var(--c-ease);
}
@media (hover: hover) { .link:hover { color: var(--c-accent-hover); } }


/* --------------------------------------------------------------------------
   13. Interface specimens
   -------------------------------------------------------------------------- */

.specimen-grid { margin-block-end: var(--p-space-16); }
.specimen { grid-column: span 12; }
.specimen__window {
  overflow: hidden;
  border-radius: var(--p-radius-lg);
  background-color: var(--c-ui-surface);
  border: var(--p-geometry-hairline) solid var(--c-line);
  box-shadow: var(--p-shadow-specimen);
}
.specimen__window--tile { aspect-ratio: 16 / 9; }
.specimen__art { width: 100%; height: 100%; }
.specimen__title { margin-block-start: var(--p-space-5); }
.specimen__body { color: var(--c-text-muted); margin-block-start: var(--p-space-2); }

/* shared interface-fixture palette, bound to the semantic layer */
.ui-surface { fill: var(--c-ui-surface); }
.ui-rail { fill: var(--c-ui-rail); }
.ui-rail-line { fill: var(--c-ui-line); }
.ui-rail-line--strong { fill: var(--c-ui-accent); }
.ui-line { fill: var(--c-ui-line); }
.ui-line-soft { fill: var(--c-ui-line-soft); }
.ui-row-bg { fill: var(--p-color-white); }
.ui-metric {
  fill: var(--c-ui-ink);
  font-family: var(--p-type-family-sans);
  font-size: 34px; /* px-ok: SVG user-space unit inside the fixture viewBox, scales with the frame */
  font-weight: var(--p-type-weight-regular);
  letter-spacing: -0.02em;
}
.ui-chip { fill: var(--c-ui-accent); }
.ui-chip-text {
  fill: var(--p-color-white);
  font-family: var(--p-type-family-sans);
  font-size: 11px; /* px-ok: SVG user-space unit inside the fixture viewBox */
  font-weight: var(--p-type-weight-medium);
}
.ui-trend { stroke: var(--c-ui-accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ui-trend-dot { fill: var(--c-ui-accent); }
.ui-dot-ok { fill: var(--c-ui-ok); }
.ui-dot-warn { fill: var(--c-ui-warn); }
.ui-trace-spine { stroke: var(--c-ui-line); stroke-width: 1.5; }
.ui-trace-node { fill: var(--c-ui-accent); }
.ui-trace-node--open { fill: none; stroke: var(--c-ui-line); stroke-width: 1.5; }
.ui-trace-check { stroke: var(--p-color-white); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ui-node { fill: var(--p-color-white); stroke: var(--c-ui-line); stroke-width: 1.2; }
.ui-node--accent { fill: var(--c-ui-accent); stroke: none; }
.ui-node--held { fill: var(--c-ui-surface); stroke: var(--c-ui-warn); stroke-width: 1.6; }
.ui-flow-edge { stroke: var(--c-ui-line); stroke-width: 1.4; }


/* --- the bleeding specimen, with mobile art direction --------------------- */

.bleed {
  display: grid;
  gap: var(--p-space-8);
  align-items: center;
  padding-block: var(--p-space-10);
  border-block-start: var(--p-geometry-hairline) solid var(--c-line);
}
.bleed__note { color: var(--c-text-muted); margin-block-start: var(--p-space-4); }
.bleed__copy > * + * { margin-block-start: var(--p-space-4); }

/* Narrow: the window is tall and the art is scaled to fit, so the panel is
   read rather than cropped. This is the corrected mobile art direction. */
.bleed__window {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--p-radius-lg);
  background-color: var(--c-ui-surface);
  border: var(--p-geometry-hairline) solid var(--c-line);
  box-shadow: var(--p-shadow-specimen);
  display: grid;
  align-content: center;
  padding: var(--p-space-4);
}
.bleed__art { width: 100%; height: auto; }


/* --------------------------------------------------------------------------
   14. Peek carousel -- slide width derived in CSS alone.
   -------------------------------------------------------------------------- */

.peek-wrap { margin-block-start: var(--p-space-8); }

.peek {
  --peek-active: min(var(--p-geometry-carousel-active), var(--p-geometry-carousel-active-vw));
  --peek-inactive: min(var(--p-geometry-carousel-inactive), var(--p-geometry-carousel-inactive-vw));
  --peek-content: calc((var(--peek-active) + var(--peek-inactive)) / 2);
  list-style: none;
  display: flex;
  gap: var(--p-space-grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  --peek-edge: max(var(--p-space-container-pad), calc((100% - var(--peek-content)) / 2));
  scroll-padding-inline: var(--peek-edge);
  padding-inline: var(--peek-edge);
  padding-block: var(--p-space-2);
}
.peek__item {
  flex: 0 0 var(--peek-content);
  scroll-snap-align: center;
}
.peek:focus-visible {
  outline: var(--p-geometry-focus-ring) solid var(--c-focus-ring);
  outline-offset: calc(var(--p-space-1) * -1);
}

.report {
  height: 100%;
  background-color: var(--p-color-white);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-xl);
  padding: var(--p-space-5);
  overflow: hidden;
}
.report__plate {
  height: 6rem;
  border-radius: var(--p-radius-md);
  margin-block-end: var(--p-space-5);
  background-color: var(--c-plate-4);
  background-image:
    radial-gradient(circle at 22% 30%, var(--c-plate-1) 0%, transparent 52%),
    radial-gradient(circle at 78% 70%, var(--c-plate-3) 0%, transparent 48%);
  filter: blur(3px) saturate(120%);
}
.report__plate--b { background-position: 30% 40%; rotate: 4deg; }
.report__plate--c { background-position: 70% 20%; rotate: -3deg; }
.report__plate--d { background-position: 50% 60%; rotate: 2deg; }
.report__tag { margin-block-end: var(--p-space-3); }
.report__stat { color: var(--c-text-primary); }
.report__unit { color: var(--c-text-muted); margin-block-start: var(--p-space-2); }


/* --------------------------------------------------------------------------
   15. Pinned sequence.
   The pin is two variables. Under reduced motion --c-pin-top becomes auto,
   which removes the sticky constraint, and --c-pin-min-h becomes auto, which
   removes the scroll runway. No parallel rule block, no hidden content, same
   markup and same reading order in both states.
   -------------------------------------------------------------------------- */

.pin { list-style: none; margin-block-start: var(--p-space-8); }
.pin__step {
  display: grid;
  gap: var(--p-space-6);
  padding-block: var(--p-space-8);
  border-block-start: var(--p-geometry-hairline) solid var(--c-line);
}
.pin__index { margin-block-end: var(--p-space-2); }
.pin__copy > p:last-child { color: var(--c-text-secondary); margin-block-start: var(--p-space-3); }
.pin__fig {
  background-color: var(--c-surface-raised);
  border: var(--p-geometry-hairline) solid var(--c-line);
  border-radius: var(--p-radius-lg);
  padding: var(--p-space-4);
}
.pin__fig svg { width: 100%; height: auto; }
.pin__fig .ui-surface { fill: transparent; }

.ui-flow-edge { stroke: var(--c-line-strong); }


/* --------------------------------------------------------------------------
   16. Notes and footer
   -------------------------------------------------------------------------- */

.notes__intro { color: var(--c-text-secondary); margin-block-start: var(--p-space-4); }
.notes__head { margin-block-start: var(--p-space-10); margin-block-end: var(--p-space-4); }
.notes__list { padding-inline-start: var(--p-space-5); }
.notes__list li { margin-block-end: var(--p-space-3); color: var(--c-text-secondary); }
.notes__list strong { color: var(--c-text-primary); font-weight: var(--p-type-weight-medium); }
.notes__tail { color: var(--c-text-secondary); }

.site-footer {
  background-color: var(--c-surface);
  border-block-start: var(--p-geometry-hairline) solid var(--c-line);
  padding-block: var(--p-space-10);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--p-space-4); justify-content: space-between; }
.site-footer__inner p { color: var(--c-text-muted); max-width: var(--p-geometry-measure-prose); }
.site-footer__meta { font-family: var(--p-type-family-mono); }


/* --------------------------------------------------------------------------
   17. Breakpoints -- only span maps and column counts change here.
   Type and spacing values restep inside primitives.css, not here.
   -------------------------------------------------------------------------- */

@media (max-width: 47.999rem) {
  .section__head,
  .section__foot { text-align: start; }
  .specimen-grid { margin-block-end: var(--p-space-10); }
}

@media (min-width: 48rem) {
  .hero__copy { grid-column: span 7; }
  .hero__crop { grid-column: span 5; }

  .grid-cell--a { grid-column: span 6; }
  .grid-cell--b { grid-column: span 12; }
  .grid-cell--c { grid-column: span 12; }

  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .specimen { grid-column: span 4; }

  .theme-band__inner { flex-direction: row; align-items: center; gap: var(--p-space-8); }
  .theme-band__tag { min-width: 8rem; }

  .bleed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__inner { flex-wrap: nowrap; }
}

@media (min-width: 75rem) {
  html { scroll-padding-block-start: var(--c-pin-top); }
  .site-header {
    position: sticky;
    inset-block-start: 0;
  }
  .site-header__inner {
    flex-wrap: nowrap;
    height: var(--p-geometry-nav-height);
    min-height: 0;
    padding-block: 0;
  }
  .motion-toggle {
    border: 0;
    padding: 0;
  }
  .motion-toggle__legend,
  .motion-toggle__state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .hero { min-block-size: 90svh; }

  .grid-cell--a { grid-column: span 4; }
  .grid-cell--b { grid-column: span 8; }
  .grid-cell--c { grid-column: span 4; }

  .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .pin__step {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--p-space-12);
    align-items: start;
    min-height: var(--c-pin-min-h);
  }
  /* The copy moves through the held figure, giving the runway a visible job. */
  .pin__copy { padding-block-start: var(--p-space-10); }
  .pin__fig {
    position: sticky;
    inset-block-start: var(--c-pin-top);
  }

  /* Crop horizontally while keeping all three fixture rows legible. */
  .bleed__window { aspect-ratio: 16 / 10; padding: 0; align-content: start; }
  .bleed__art {
    width: 100%;
    max-width: none;
    margin-inline-start: var(--p-space-6);
  }
}

#sequence {
  border-end-start-radius: var(--p-radius-xl);
  border-end-end-radius: var(--p-radius-xl);
}