/* ==========================================================================
   styles.css — Structural + component CSS for rico-rojas.com
   --------------------------------------------------------------------------
   Consumes design tokens from theme.css only. No palette, font family, radius,
   or shadow is hard-coded here — every visual decision resolves through a
   custom property so an alternate board can retheme by swapping theme.css.
   ========================================================================== */

/* --- Reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--field-base);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(90deg, var(--field-grid) 1px, transparent 1px),
    linear-gradient(var(--field-grid) 1px, transparent 1px),
    var(--field-base);
  background-size: var(--field-grid-size) var(--field-grid-size);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; }
p { text-wrap: pretty; }

/* --- Layout primitives ---------------------------------------------------- */
.page-shell { width: var(--page); margin-inline: auto; }
.shell-narrow { width: var(--page-narrow); margin-inline: auto; }
main { flex: 1 0 auto; }

.eyebrow,
.section-index,
.micro-label,
.spec-label,
.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow, .section-index, .micro-label { color: var(--accent-bright); }

.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.display-1 .accent { color: var(--accent-bright); font-style: italic; }
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lede {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}
.text-link {
  color: var(--accent-bright);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface-invert);
  color: var(--text-invert);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* --- Site header + nav ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface-strong) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .page-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-height);
}
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.05em;
  text-decoration: none;
  color: var(--text);
}
.brand-mark .slash { color: var(--accent); font-weight: 400; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  transition: color 140ms ease, background-color 140ms ease;
}
.site-nav a:hover { color: var(--text); background: var(--surface-raised); }
.site-nav a[aria-current="page"] {
  color: var(--accent-bright);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.site-nav a.nav-external::after {
  content: "\2197";
  margin-left: 0.3rem;
  color: var(--accent);
}

/* --- Buttons -------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.primary:hover { background: var(--accent-bright); }
.button.secondary {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}
.button.secondary:hover { border-color: var(--accent-bright); background: var(--surface-raised); }
.button-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
}
.hero .page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem);
}
.hero-copy h1 { margin: 0.5rem 0 1rem; }
.hero-copy .lede { margin-bottom: 1.75rem; }
.hero-actions { margin-top: 1.75rem; }
.hero-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 1008 / 1042;
}
.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--accent-bright);
  z-index: 1;
  pointer-events: none;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 34%;
  filter: saturate(0.85) contrast(1.03);
}

/* --- Generic content section --------------------------------------------- */
.section {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.section-head h2 { margin: 0.5rem 0 0.75rem; }
.section.invert {
  background: var(--surface-invert);
  color: var(--text-invert);
}
.section.invert .eyebrow,
.section.invert .section-index,
.section.invert .micro-label { color: var(--accent-deep); }
.section.invert .lede,
.section.invert .card p,
.section.invert .muted { color: var(--text-invert-muted); }
.section.invert .card { background: transparent; border-color: var(--line-invert); }
.muted { color: var(--text-muted); }

/* --- Card grids ----------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.card h3 { margin: 0.3rem 0 0.6rem; font-size: 1.1rem; }
.card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.card .card-index {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-bright);
}

/* Step / process cards */
.steps { counter-reset: step; }
.step .card-index::before {
  counter-increment: step;
  content: "0" counter(step);
}

/* --- Tags / state labels -------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.tag.is-artifact { border-color: var(--accent); color: var(--accent-bright); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.tag.is-verified { border-color: var(--state-verified); color: var(--state-verified); }
.tag.is-boundary { border-color: var(--state-boundary); color: var(--state-boundary); }

/* --- Work / proof list ---------------------------------------------------- */
.proof-item {
  display: grid;
  gap: 0.85rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.proof-item header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.proof-item h3 { margin: 0; font-size: 1.2rem; }
.proof-item p { margin: 0; color: var(--text-muted); }
.proof-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.proof-meta b { color: var(--text); font-weight: 700; }

/* --- Signal / boundary callout ------------------------------------------- */
.callout {
  padding: 1.2rem 1.3rem;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.callout.boundary { border-left-color: var(--state-boundary); }
.callout.verified { border-left-color: var(--state-verified); }
.callout p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.callout p + p { margin-top: 0.6rem; }
.callout strong { color: var(--text); }

/* --- Definition / at-a-glance list --------------------------------------- */
.deflist { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.deflist div {
  display: grid;
  grid-template-columns: minmax(120px, 0.3fr) 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.deflist dt { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.deflist dd { margin: 0; color: var(--text-muted); }
.deflist dd b { color: var(--text); }

/* --- Contact / route rail ------------------------------------------------- */
.route-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.route-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.route-card h3 { margin: 0; font-size: 1.05rem; }
.route-card p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.route-card a.route-link {
  margin-top: auto;
  padding-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-bright);
  text-decoration: none;
  word-break: break-word;
}
.route-card a.route-link:hover { text-decoration: underline; }

/* --- Big CTA band --------------------------------------------------------- */
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border-radius: var(--radius-lg);
  background: var(--cta-background);
  color: var(--cta-foreground);
  box-shadow: var(--shadow-soft);
}
.cta-band h2 { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 400; }
.cta-band p { margin: 0; opacity: 0.92; font-size: 0.95rem; }
.cta-band .button.primary { background: var(--cta-action-background); color: var(--cta-action-foreground); }
.cta-band .button.primary:hover { background: var(--cta-action-background-hover); }

/* --- 404 ------------------------------------------------------------------ */
.error-page { text-align: center; padding: clamp(4rem, 12vw, 8rem) 0; }
.error-page .code { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--accent-bright); }
.error-page h1 { margin: 1rem 0; }
.error-page .button-row { justify-content: center; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--surface-strong);
}
.site-footer .page-shell {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.5rem;
  padding: clamp(2rem, 5vw, 3rem) 0 1.5rem;
}
.site-footer h4 { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.site-footer a:hover { color: var(--accent-bright); }
.footer-brand p { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.9rem; max-width: 34ch; }
.footer-mark { display: inline-flex; align-items: baseline; gap: 0.15rem; font-weight: 800; letter-spacing: -0.05em; font-size: 1.2rem; color: var(--text); }
.footer-mark .slash { color: var(--accent); font-weight: 400; }
.footer-legal {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.footer-legal .page-shell { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* --- Utilities ------------------------------------------------------------ */
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.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;
}
.prose { max-width: 66ch; }
.prose p { color: var(--text-muted); }
.prose p + p { margin-top: 1rem; }
.prose h2 { margin: 2.2rem 0 0.8rem; }
.prose h3 { margin: 1.6rem 0 0.6rem; }

/* ==========================================================================
   Shared motion system (structural rules only)
   --------------------------------------------------------------------------
   All colors, opacity, timing, distance, and easing resolve through the
   motion tokens in theme.css. Behavior (pointer parallax, entrance trigger,
   markup injection) lives in script.js. The content is fully present without
   JavaScript: every rule below is scoped under html.js, and the injected
   .signal-field is aria-hidden decoration.
   -------------------------------------------------------------------------- */

/* The first section becomes the positioning context for the ambient field. */
html.js [data-motion-first] { position: relative; isolation: isolate; }
html.js [data-motion-first] > .page-shell { position: relative; z-index: 1; }

/* --- Ambient electric-blue signal field ---------------------------------- */
.signal-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--signal-field-opacity);
  /* Very small pointer parallax; settles when the pointer stops. */
  transform: translate3d(
    calc(var(--px) * var(--parallax-field)),
    calc(var(--py) * var(--parallax-field)),
    0
  );
  transition: transform var(--parallax-ease) ease-out;
}
/* Soft radial wash so the field reads as a signal, not a flat texture. */
.signal-field::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(60% 50% at 78% 30%, var(--signal-glow), transparent 70%),
    radial-gradient(45% 40% at 20% 80%, var(--signal-glow), transparent 72%);
}
.signal-field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Orbits: two concentric ellipse groups revolving at slow, differing periods. */
.signal-orbit {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(0deg);
  animation: signal-revolve var(--signal-orbit-duration) linear infinite;
}
.signal-orbit.alt {
  animation-duration: var(--signal-orbit-duration-2);
  animation-direction: reverse;
}
.signal-line { stroke: var(--signal-line); fill: none; }
.signal-line.soft { stroke: var(--signal-line-soft); }
.signal-node {
  fill: var(--signal-node);
  animation: signal-pulse var(--signal-node-pulse) var(--signal-ease) infinite;
}
.signal-node.core { fill: var(--signal-node-core); }
/* Stagger the node breathing so it never pulses in unison. */
.signal-node:nth-of-type(2) { animation-delay: var(--signal-node-delay-2); }
.signal-node:nth-of-type(3) { animation-delay: var(--signal-node-delay-3); }
.signal-node:nth-of-type(4) { animation-delay: var(--signal-node-delay-4); }
/* Scan tracer: a single dot that travels one orbital path, fading in/out. */
.signal-tracer {
  fill: var(--signal-tracer);
  offset-path: var(--tracer-path, none);
  animation:
    signal-trace var(--signal-tracer-duration) var(--signal-ease) infinite,
    signal-trace-fade var(--signal-tracer-duration) var(--signal-ease) infinite;
}

@keyframes signal-revolve {
  to { transform: rotate(360deg); }
}
@keyframes signal-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes signal-trace {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes signal-trace-fade {
  0%, 100% { opacity: 0; }
  12%, 78% { opacity: 1; }
}

/* --- Staggered entrance --------------------------------------------------- */
/* Children of the first section start slightly low + transparent, then rise.
   Order is keyed to the editorial hierarchy: eyebrow, heading, lede, actions,
   then portrait/intro content. Delays compose from the motion tokens. */
html.js [data-motion-first] .eyebrow,
html.js [data-motion-first] .section-index,
html.js [data-motion-first] h1,
html.js [data-motion-first] .lede,
html.js [data-motion-first] .hero-actions,
html.js [data-motion-first] .button-row,
html.js [data-motion-first] .tag-row,
html.js [data-motion-first] .hero-portrait {
  opacity: 0;
  transform: translate3d(0, var(--enter-distance), 0);
  will-change: opacity, transform;
}
html.js [data-motion-first].is-entered .eyebrow,
html.js [data-motion-first].is-entered .section-index,
html.js [data-motion-first].is-entered h1,
html.js [data-motion-first].is-entered .lede,
html.js [data-motion-first].is-entered .hero-actions,
html.js [data-motion-first].is-entered .button-row,
html.js [data-motion-first].is-entered .tag-row,
html.js [data-motion-first].is-entered .hero-portrait {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--enter-duration) var(--enter-ease),
    transform var(--enter-duration) var(--enter-ease);
}
html.js [data-motion-first].is-entered .eyebrow,
html.js [data-motion-first].is-entered .section-index {
  transition-delay: var(--enter-base-delay);
}
html.js [data-motion-first].is-entered h1 {
  transition-delay: calc(var(--enter-base-delay) + var(--enter-step));
}
html.js [data-motion-first].is-entered .lede {
  transition-delay: calc(var(--enter-base-delay) + var(--enter-step) * 2);
}
html.js [data-motion-first].is-entered .hero-actions,
html.js [data-motion-first].is-entered .button-row,
html.js [data-motion-first].is-entered .tag-row {
  transition-delay: calc(var(--enter-base-delay) + var(--enter-step) * 3);
}
html.js [data-motion-first].is-entered .hero-portrait {
  transition-delay: calc(var(--enter-base-delay) + var(--enter-step) * 2);
}

/* --- Portrait pointer parallax (very small, text unaffected) -------------- */
html.js [data-motion-first] .hero-portrait {
  --portrait-shift-x: calc(var(--px) * var(--parallax-portrait));
  --portrait-shift-y: calc(var(--py) * var(--parallax-portrait));
}
html.js [data-motion-first].is-entered .hero-portrait {
  transition:
    opacity var(--enter-duration) var(--enter-ease),
    transform var(--enter-duration) var(--enter-ease);
}
/* After entrance settles, the portrait tracks the pointer within its frame.
   The inner image carries the parallax so the framed border stays put. */
html.js [data-motion-first] .hero-portrait img {
  transform: translate3d(var(--portrait-shift-x), var(--portrait-shift-y), 0) scale(1.04);
  transition: transform var(--parallax-ease) ease-out;
}

/* --- Reduced motion: no field animation, no parallax, everything shown ---- */
@media (prefers-reduced-motion: reduce) {
  .signal-orbit, .signal-node, .signal-tracer { animation: none !important; }
  .signal-field { transform: none !important; transition: none !important; }
  html.js [data-motion-first] .hero-portrait img {
    transform: scale(1.04) !important;
    transition: none !important;
  }
  html.js [data-motion-first] .eyebrow,
  html.js [data-motion-first] .section-index,
  html.js [data-motion-first] h1,
  html.js [data-motion-first] .lede,
  html.js [data-motion-first] .hero-actions,
  html.js [data-motion-first] .button-row,
  html.js [data-motion-first] .tag-row,
  html.js [data-motion-first] .hero-portrait {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .hero .page-shell { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 380px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: 1fr; }
  .site-footer .page-shell { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .site-nav {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-strong);
  }
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav { display: none; }
  html.js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem max(1rem, calc((100% - var(--page)) / 2 + 1rem)); }
  .site-nav a { min-height: 46px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .route-rail { grid-template-columns: 1fr; }
  .deflist div { grid-template-columns: 1fr; gap: 0.25rem; }
  .site-footer .page-shell { grid-template-columns: 1fr; }
  .proof-item header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  html, body { background: var(--field-base); color: var(--text-invert); }
  .site-header { position: static; }
  .cta-band { color: var(--cta-foreground); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}