/* ==========================================================================
   The Wire — design tokens & base layer
   --------------------------------------------------------------------------
   Source of truth : outputs/tokens.json (task 2.4) + outputs/DesignSpec.md
   Tasks           : 5.2 — token layer · 5.3 — components, responsive & dark
   --------------------------------------------------------------------------
   Every design token lives here in a single place. The file is layered as:

     1. Light (default) + mode-independent tokens        :root / [data-theme=light]
     2. Dark token overrides                             @media prefers-color-scheme
                                                         + [data-theme=dark]
     3. Reduced motion                                   @media prefers-reduced-motion
     4. Base / reset                                     element defaults
     5. Grid, spacing, radii & elevation utilities       token application only
     6. Typography application                           token application only
     7. Color application                                token application only
     8. Motion recipes                                   token application only
     9. Page layout composition (5.3)                    region placement
    10. Components (5.3)                                 masthead..toggle
    11. Responsive (5.3)                                 breakpoints/collapse

   Rules for this file:
     * All color/shadow values are declared ONLY inside the token blocks below.
       Every rule outside them references var(--token); there are no hard-coded
       colors in the applied/component layer.
     * Dark mode is CSS-only: :root light -> prefers-color-scheme dark (unless
       the user chose light) -> explicit [data-theme="dark"] override.
     * Page-specific components (masthead, lead, link lists, wire band, footer),
       the responsive collapse, and the theme-toggle control live in §9-§11.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@400;500;600;700&display=swap");

/* ==========================================================================
   1. Tokens — light (default) + mode-independent
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light dark;

  /* --- Fonts --- */
  --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", Times, serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display-fallback: Georgia, "Times New Roman", Times, serif;
  --font-body-fallback: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Type scale, leading, measure & tracking --- */
  --type-scale-ratio: 1.25;
  --type-scale-base: 1rem;
  --type-2xs: 0.64rem;
  --type-xs: 0.8rem;
  --type-base: 1rem;
  --type-md: 1.25rem;
  --type-lg: 1.5625rem;
  --type-xl: 1.9531rem;
  --type-2xl: 2.4414rem;
  --type-3xl: 3.0518rem;
  --type-4xl: 3.8147rem;
  --type-hero-3col: clamp(3.25rem, calc(4.375rem - 1.25vw), 3.575rem);
  --leading-hero: 1.05;
  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-subhead: 1.3;
  --leading-dense: 1.45;
  --leading-body: 1.6;
  --measure-narrow: 45ch;
  --measure-body: 65ch;
  --measure-wide: 75ch;
  --measure-dek: 55ch;
  --measure-display: 20ch;
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.08em;

  /* --- Color (light) --- */
  --color-paper: oklch(0.98 0.006 85);
  --color-surface: oklch(0.995 0.002 85);
  --color-surface-sunken: oklch(0.955 0.008 85);
  --color-ink: oklch(0.2 0.012 60);
  --color-ink-muted: oklch(0.44 0.012 60);
  --color-ink-faint: oklch(0.53 0.01 60);
  --color-on-accent: oklch(0.99 0.005 85);
  --color-border: oklch(0.86 0.008 80);
  --color-border-strong: oklch(0.64 0.01 80);
  --color-accent: oklch(0.52 0.2 27);
  --color-accent-strong: oklch(0.44 0.17 27);
  --color-accent-soft: oklch(0.94 0.03 27);
  --color-link: var(--color-ink);
  --color-link-visited: var(--color-ink);
  --color-focus: oklch(0.55 0.14 250);
  --color-success: oklch(0.48 0.13 150);
  --color-warning: oklch(0.5 0.11 65);
  --color-danger: oklch(0.5 0.19 20);
  --color-info: oklch(0.46 0.1 240);

  /* --- Space & grid --- */
  --space-unit: 0.5rem;
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-inline: 0.5rem;
  --space-component: 1rem;
  --space-gutter: 1.5rem;
  --space-gutter-sm: 1rem;
  --space-page-inline: 2rem;
  --space-page-inline-sm: 1rem;
  --space-section: 3rem;
  --space-section-lg: 4rem;
  --grid-max-width: 90rem;
  --grid-content-max: 80rem;

  /* --- Radii --- */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* --- Shadows / elevation (light) --- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(26, 21, 17, 0.06);
  --shadow-sm: 0 1px 3px 0 rgba(26, 21, 17, 0.10), 0 1px 2px -1px rgba(26, 21, 17, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(26, 21, 17, 0.12), 0 2px 4px -2px rgba(26, 21, 17, 0.07);
  --shadow-lg: 0 12px 28px -8px rgba(26, 21, 17, 0.20), 0 4px 8px -4px rgba(26, 21, 17, 0.10);
  --shadow-inset: inset 0 1px 2px 0 rgba(26, 21, 17, 0.06);
  --shadow-focus: 0 0 0 3px rgba(31, 116, 191, 0.45);

  /* --- Motion — easing & durations --- */
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-ease-linear: linear;
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-duration-slower: 480ms;

  /* --- Breakpoints (documented; literal px used in @media) --- */
  --breakpoint-xl: 1440px;
  --breakpoint-lg: 1024px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 375px;
}

/* ==========================================================================
   2. Tokens — dark
   --------------------------------------------------------------------------
   Two entry points so the preference works with and without JS:
     * OS preference  : @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
     * explicit toggle : [data-theme="dark"]
   Only color + shadow tokens change; font/type/space/radius/motion/breakpoint
   are mode-independent.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Color (dark) */
    --color-paper: oklch(0.18 0.008 70);
    --color-surface: oklch(0.22 0.008 70);
    --color-surface-sunken: oklch(0.15 0.008 70);
    --color-ink: oklch(0.94 0.008 85);
    --color-ink-muted: oklch(0.74 0.01 85);
    --color-ink-faint: oklch(0.6 0.01 85);
    --color-on-accent: oklch(0.18 0.01 27);
    --color-border: oklch(0.3 0.008 75);
    --color-border-strong: oklch(0.5 0.01 75);
    --color-accent: oklch(0.7 0.17 27);
    --color-accent-strong: oklch(0.78 0.12 27);
    --color-accent-soft: oklch(0.3 0.06 27);
    --color-link: var(--color-ink);
    --color-link-visited: var(--color-ink);
    --color-focus: oklch(0.72 0.13 250);
    --color-success: oklch(0.78 0.13 150);
    --color-warning: oklch(0.82 0.13 75);
    --color-danger: oklch(0.72 0.17 20);
    --color-info: oklch(0.78 0.11 240);

    /* Shadows (dark) */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 4px 8px -4px rgba(0, 0, 0, 0.50);
    --shadow-inset: inset 0 1px 2px 0 rgba(0, 0, 0, 0.50);
    --shadow-focus: 0 0 0 3px rgba(96, 170, 243, 0.55);
  }
}

[data-theme="dark"] {
    /* Color (dark) */
    --color-paper: oklch(0.18 0.008 70);
    --color-surface: oklch(0.22 0.008 70);
    --color-surface-sunken: oklch(0.15 0.008 70);
    --color-ink: oklch(0.94 0.008 85);
    --color-ink-muted: oklch(0.74 0.01 85);
    --color-ink-faint: oklch(0.6 0.01 85);
    --color-on-accent: oklch(0.18 0.01 27);
    --color-border: oklch(0.3 0.008 75);
    --color-border-strong: oklch(0.5 0.01 75);
    --color-accent: oklch(0.7 0.17 27);
    --color-accent-strong: oklch(0.78 0.12 27);
    --color-accent-soft: oklch(0.3 0.06 27);
    --color-link: var(--color-ink);
    --color-link-visited: var(--color-ink);
    --color-focus: oklch(0.72 0.13 250);
    --color-success: oklch(0.78 0.13 150);
    --color-warning: oklch(0.82 0.13 75);
    --color-danger: oklch(0.72 0.17 20);
    --color-info: oklch(0.78 0.11 240);

    /* Shadows (dark) */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.65), 0 4px 8px -4px rgba(0, 0, 0, 0.50);
    --shadow-inset: inset 0 1px 2px 0 rgba(0, 0, 0, 0.50);
    --shadow-focus: 0 0 0 3px rgba(96, 170, 243, 0.55);
}

/* ==========================================================================
   3. Reduced motion
   --------------------------------------------------------------------------
   Layer 1 collapses every duration token to 0ms so token-driven recipes stop.
   Layer 2 is a global safety net that catches hard-coded / third-party motion.
   0.01ms (not 0s) keeps transitionend / animationend firing so JS state
   machines do not hang; iteration-count 1 stops loops; scroll-behavior auto
   removes smooth scrolling. End states and focus visibility are preserved
   (WCAG 2.3.3 — nothing is conveyed by motion alone).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
    --motion-duration-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   4. Base / reset
   ========================================================================== */

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

html {
  font-size: 100%; /* 1rem stays at the user default (16px) */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-2xl);
  line-height: var(--leading-display);
  max-width: var(--measure-display);
}

h2 {
  font-size: var(--type-xl);
  line-height: var(--leading-heading);
  max-width: var(--measure-display);
}

h3 {
  font-size: var(--type-lg);
  line-height: var(--leading-subhead);
}

p {
  margin: 0;
  font-size: var(--type-base);
  line-height: var(--leading-body);
  max-width: var(--measure-body);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-color: var(--color-border-strong);
}

a:visited {
  color: var(--color-link-visited);
}

a:hover,
a:active {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
}

img,
svg,
video,
canvas,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   5. Grid, spacing, radii & elevation utilities (token application)
   ========================================================================== */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-gutter);
  row-gap: var(--space-gutter);
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-page-inline);
}

.grid-12,
.grid-12 > * {
  min-width: 0;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-section > * + * { margin-top: var(--space-section); }
.stack-section-lg > * + * { margin-top: var(--space-section-lg); }

.r-none { border-radius: var(--radius-none); }
.r-sm { border-radius: var(--radius-sm); }
.r-md { border-radius: var(--radius-md); }
.r-lg { border-radius: var(--radius-lg); }
.r-xl { border-radius: var(--radius-xl); }
.r-pill { border-radius: var(--radius-pill); }
.r-circle { border-radius: var(--radius-circle); }

.elev-0 { box-shadow: var(--shadow-none); }
.elev-1 { box-shadow: var(--shadow-xs); }
.elev-2 { box-shadow: var(--shadow-sm); }
.elev-3 { box-shadow: var(--shadow-md); }
.elev-4 { box-shadow: var(--shadow-lg); }

/* ==========================================================================
   6. Typography application (token application)
   ========================================================================== */

.hero {
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: 900;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
  max-width: var(--measure-display);
  text-wrap: balance;
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: var(--measure-display);
}

.lead {
  font-size: var(--type-md);
  line-height: var(--leading-dense);
  max-width: var(--measure-dek);
}

.meta {
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.micro {
  font-size: var(--type-2xs);
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ==========================================================================
   7. Color application (token application — no hard-coded colors)
   ========================================================================== */

.surface {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.sunken {
  background-color: var(--color-surface-sunken);
}

.muted {
  color: var(--color-ink-muted);
}

.faint {
  color: var(--color-ink-faint);
}

.kicker,
.breaking {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-component);
  box-shadow: var(--shadow-none);
}

.menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  box-shadow: var(--shadow-md);
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}

.inset {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-component);
  box-shadow: var(--shadow-inset);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent-strong);
}

.btn-primary:hover {
  background-color: var(--color-accent-strong);
}

.state-success { color: var(--color-success); }
.state-warning { color: var(--color-warning); }
.state-danger { color: var(--color-danger); }
.state-info { color: var(--color-info); }

/* ==========================================================================
   8. Motion recipes (token application)
   ========================================================================== */

.u-motion-color {
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.u-motion-transform {
  transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}

.u-motion-shadow {
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.u-motion-opacity {
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.u-motion-panel {
  transition: transform var(--motion-duration-slow) var(--motion-ease-emphasized),
    opacity var(--motion-duration-base) var(--motion-ease-standard);
}

.link {
  color: var(--color-link);
  text-decoration-color: var(--color-border-strong);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.link:hover,
.link:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.btn {
  transition: transform var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.card-lift {
  transition: transform var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.card-lift:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   9. Page layout composition (task 5.3)
   --------------------------------------------------------------------------
   The 12-column shell utilities are declared in §5; this section places the
   page regions into the `3 / 6 / 3` editorial band from DesignSpec #layout,
   with the two 1px gutter dividers, the wire band, and the below-fold row.
   Only token values are used; no hard-coded colors.
   ========================================================================== */

.page-main {
  display: block;
}

/* Space the primary band below the masthead rule. */
.page-main > .layout-3col {
  margin-top: var(--space-4);
}

/* Explicit 3 / 6 / 3 placement — decouples visual order from DOM order. */
.layout-3col {
  position: relative;
  column-gap: var(--space-2);
}
.layout-3col > .col--left {
  grid-column: 1 / span 3;
  grid-row: 1;
}
.layout-3col > .col--center {
  grid-column: 4 / span 6;
  grid-row: 1;
}
.layout-3col > .col--right {
  grid-column: 10 / span 3;
  grid-row: 1;
}

/* Two 1px dividers, centred in the gutters (echoes the reference). */
.layout-3col > .col--left,
.layout-3col > .col--center {
  position: relative;
}
.layout-3col > .col--left::after,
.layout-3col > .col--center::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--space-2) / -2);
  width: 1px;
  background: var(--color-border);
}

/* R2 — full-width timestamped wire band. */
.wire-band {
  margin-top: var(--space-6);
}
.wire-band__inner {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

/* R3 — three-up below-fold row. */
.below-fold {
  margin-top: var(--space-6);
  column-gap: var(--space-2);
}
/* Inside the below-fold grid the row/column gaps own the spacing, so the
   stacked-section margin must not push individual cards out of alignment. */
.below-fold .section-block + .section-block {
  margin-top: 0;
}

/* ==========================================================================
   10. Components (task 5.3)
   --------------------------------------------------------------------------
   Masthead, lead headline, section header + dense link list, wire list,
   below-fold card, footer chrome, theme toggle, skip link and helpers.
   Every value references a token from §1-§2; the state contracts are the
   authoritative `#state-matrix` Contracts A/B/C.
   ========================================================================== */

/* --- 10.1 Skip link ------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2);
}

/* --- 10.2 Masthead (R0) -------------------------------------------------- */

.masthead {
  grid-column: span 12;
  padding-top: 0;
  padding-bottom: var(--space-3);
  row-gap: 0;
  background: var(--color-surface);
  border-bottom: 3px double var(--color-ink);
}
.masthead__inner {
  text-align: center;
  padding-top: var(--space-3);
}
.market-ticker {
  display: block;
  min-width: 0;
  /* Reserve height so the band never collapses, whatever the data source. */
  min-height: var(--space-6);
  overflow: hidden;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--type-2xs);
  line-height: var(--leading-dense);
}
.market-ticker noscript {
  display: block;
  padding-inline: var(--space-page-inline);
  color: var(--color-ink-muted);
}
/* Native marquee: two identical tracks scroll by exactly one track width for a
   seamless loop. Theme-aware via tokens (no iframe), pauses on hover/focus. */
.market-ticker__viewport {
  display: flex;
  width: max-content;
  animation: market-ticker-scroll var(--market-ticker-duration, 60s) linear infinite;
  will-change: transform;
}
.market-ticker:hover .market-ticker__viewport,
.market-ticker:focus-within .market-ticker__viewport {
  animation-play-state: paused;
}
.market-ticker__track {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-2) 0;
  list-style: none;
  white-space: nowrap;
}
.market-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}
.market-ticker__name {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
}
.market-ticker__value {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.market-ticker__change {
  font-variant-numeric: tabular-nums;
}
.market-ticker__change.is-up {
  color: var(--color-success);
}
.market-ticker__change.is-down {
  color: var(--color-danger);
}
.market-ticker__change.is-flat {
  color: var(--color-ink-faint);
}
@keyframes market-ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .market-ticker {
    overflow-x: auto;
  }
  .market-ticker__viewport {
    animation: none;
  }
}
.masthead__dateline {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 500;
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.masthead__wordmark {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: 900;
  line-height: var(--leading-display);
  letter-spacing: 0.02em; /* component-local: all-caps display tracking */
  color: var(--color-ink);
}

/* --- 10.3 Lead headline (R1-C) ------------------------------------------ */

.lead-headline {
  display: grid;
  /* Explicit single track: WebKit sizes an implicit `auto` track to the
     item's contribution and lets the lead column overflow its parent; the
     minmax(0, 1fr) clamp keeps the track at the container width in every
     engine (task 6.4 cross-browser fallback). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  align-content: start;
}
.lead-headline .kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: 700;
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}
.lead-headline .hero {
  margin: 0;
  max-width: none; /* bounded by the span-6 column, not --measure-display */
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: 900;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.lead-headline .dek {
  margin: 0;
  max-width: var(--measure-dek);
  font-size: var(--type-md);
  line-height: var(--leading-dense);
  color: var(--color-ink-muted);
  overflow-wrap: break-word;
}
.lead-headline .meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* --- 10.4 Media wells ---------------------------------------------------- */

.media {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink-faint);
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.lead-headline .media--lead {
  aspect-ratio: 16 / 9;
  margin-top: var(--space-3);
}
.media--card {
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-2);
}

/* --- 10.5 Section header + dense link list ------------------------------- */

.section-block {
  display: block;
}
.section-block + .section-block {
  margin-top: var(--space-4);
}
.section-header {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  overflow-wrap: break-word;
}
/* Secondary heading inside a band ("Resultados", "Próximos"). */
.section-header--sub {
  margin-bottom: var(--space-1);
  padding-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: 700;
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border-bottom: 0;
}
.link-list {
  display: grid;
  /* Same explicit track as .lead-headline: WebKit's implicit auto track can
     exceed the column for long unbreakable words (task 6.4 fallback). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-item {
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  overflow-wrap: break-word;
}
.link-item a {
  display: block; /* full-row pointer/tap target */
}

/* --- 10.6 Wire list ------------------------------------------------------ */

.wire-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wire-item {
  display: flex;
  gap: var(--space-2);
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  overflow-wrap: break-word;
}
.wire-item time {
  flex: none;
  color: var(--color-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* --- 10.6b Markets list (Negocios "Mercados") --------------------------- */

.markets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.markets-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  padding-block: calc(var(--space-1) * 0.75);
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  overflow-wrap: break-word;
}
.markets-item__name {
  flex-basis: 100%; /* label on its own line, so every row's value+change aligns */
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
}
.markets-item__value {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.markets-item__change {
  font-variant-numeric: tabular-nums;
}
.markets-item__change.is-up {
  color: var(--color-success);
}
.markets-item__change.is-down {
  color: var(--color-danger);
}
.markets-item__change.is-flat {
  color: var(--color-ink-faint);
}

/* --- 10.6c Sports list (Deporte "Deportes") ----------------------------- */

/* Kickoff times sit in a right-hand column instead of trailing the team names. */
.sports-band .wire-item {
  justify-content: space-between;
}
.sports-band .wire-item time {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sports-band .section-header--sub + .wire-list {
  margin-bottom: var(--space-2);
}

/* --- 10.7 Below-fold card ------------------------------------------------ */

.below-block .card {
  margin-bottom: var(--space-3);
}
.card__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 700;
  line-height: var(--leading-subhead);
  overflow-wrap: break-word;
}
.card__dek {
  margin: 0;
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
  color: var(--color-ink-muted);
}

/* --- 10.8 Footer chrome (R4) -------------------------------------------- */

.site-footer {
  grid-column: span 12;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
  border-top: 2px solid var(--color-ink);
}
.site-footer__inner {
  display: block;
}
.footer__legal {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  line-height: var(--leading-subhead);
  color: var(--color-ink-faint);
}

/* --- 10.9 Navigation (shared contract) ---------------------------------- */

:is(.utility-nav, .footer-nav) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  line-height: var(--leading-dense);
}
.utility-nav {
  justify-content: center;
}
.footer-nav {
  justify-content: flex-start;
}

/* --- 10.9a Current trends band ----------------------------------------- */

.trends-band {
  align-items: center;
  padding-block: var(--space-2);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}
.trends-band__heading {
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.trends-band__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: 700;
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.trends-band__source {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-faint);
  font-size: var(--type-2xs);
  line-height: var(--leading-subhead);
}
.trends-band__source {
  margin-top: 0;
}
.trends-band__hint {
  display: none;
}
.trends-band__content {
  /* Start after the heading column so a long, overflowing trend list never
     overlaps the "Tendencias" label (the list is horizontally scrollable). */
  grid-column: 3 / -1;
  grid-row: 1;
  min-width: 0;
}
.trend-list {
  display: flex;
  align-items: center;
  /* `flex-start` (not `center`): when the row overflows, centering clips the
     leading trends off-screen and makes them unreachable by scroll. */
  justify-content: flex-start;
  gap: var(--space-3);
  min-width: 0;
  overflow-x: auto;
  padding-block: var(--space-1);
  scrollbar-color: var(--color-border-strong) transparent;
  white-space: nowrap;
}
.trend-list li {
  flex: none;
  font-size: var(--type-xs);
}
.trend-list a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.12em;
}
.trend-list a:visited {
  color: var(--color-link-visited);
}
.trend-list a:hover,
.trend-list a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}
/* --- 10.10 Theme toggle (S7) -------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  line-height: var(--leading-subhead);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--motion-duration-slow) var(--motion-ease-standard),
    color var(--motion-duration-slow) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.theme-toggle__icon {
  font-size: var(--type-xs);
  line-height: 1;
}
.theme-toggle:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-accent);
}
.theme-toggle:active {
  background: var(--color-accent-soft);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* No JS: the CSS-only OS preference themes the page; hide the inert control. */
.no-js .theme-toggle {
  display: none;
}

/* --- 10.11 State contracts (authoritative #state-matrix) ----------------- */

/* Contract A: utility / dense links (S1, S3, S4, S6). */
:is(.utility-nav, .footer-nav) a,
.link-item a,
.wire-item a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard);
}
:is(.utility-nav, .footer-nav) a {
  text-underline-offset: 2px;
}
.link-item a,
.wire-item a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}
:is(.utility-nav, .footer-nav) a:visited,
.link-item a:visited,
.wire-item a:visited {
  color: var(--color-link-visited);
}
:is(.utility-nav, .footer-nav) a:hover,
:is(.utility-nav, .footer-nav) a:focus-visible,
.link-item a:hover,
.link-item a:focus-visible,
.wire-item a:hover,
.wire-item a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}
:is(.utility-nav, .footer-nav) a:active,
.link-item a:active,
.wire-item a:active {
  color: var(--color-accent-strong);
}
:is(.utility-nav, .footer-nav) a:focus-visible,
.link-item a:focus-visible,
.wire-item a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:is(.utility-nav, .footer-nav) a[aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

/* Contract B: headline links (S2, S5). */
.lead-headline .hero a,
.card__title a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.08em;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.lead-headline .hero a:visited,
.card__title a:visited {
  color: var(--color-link-visited);
}
.lead-headline .hero a:hover,
.lead-headline .hero a:focus-visible,
.card__title a:hover,
.card__title a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}
.lead-headline .hero a:active,
.card__title a:active {
  color: var(--color-accent-strong);
}
.lead-headline .hero a:focus-visible,
.card__title a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- 10.12 Helpers ------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   11. Responsive — breakpoints & column collapse (task 5.3)
   --------------------------------------------------------------------------
   Desktop-first max-width queries from DesignSpec #responsive §4. Content
   order never changes (no CSS `order`); the lead stays first in the DOM.
   Overflow is prevented by construction (minmax tracks, min-width: 0,
   max-width media, overflow-wrap) — `overflow: hidden` is never used to mask.
   ========================================================================== */

@media (min-width: 1025px) {
  /* Keep the 3-column lead from outgrowing both side columns. */
  .lead-headline .hero {
    font-size: var(--type-hero-3col);
  }
}

@media (max-width: 1024px) {
  .grid-12 {
    column-gap: var(--space-gutter-sm, 1rem);
  }

  .trends-band__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .trends-band__title {
    font-size: var(--type-2xs);
  }
  .trend-list {
    gap: var(--space-2);
  }

  /* Center lead takes the full first row. */
  .layout-3col > .col--center {
    grid-column: 1 / span 12;
    grid-row: 1;
  }

  /* Left + right asides sit side by side in the second row. */
  .layout-3col > .col--left {
    grid-column: 1 / span 6;
    grid-row: 2;
  }
  .layout-3col > .col--right {
    grid-column: 7 / span 6;
    grid-row: 2;
  }

  /* Keep only the rule between the two asides; the lead's right rule goes. */
  .layout-3col > .col--center::after {
    display: none;
  }
  /* Re-centre the remaining divider in the narrower gutter. */
  .layout-3col > .col--left::after {
    right: calc(var(--space-gutter-sm, 1rem) / -2);
  }

  /* Below-fold: 2-up, then 1 (the third card wraps to its own row). */
  .below-fold > .col-4 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .grid-12 {
    column-gap: var(--space-gutter-sm, 1rem);
    padding-inline: var(--space-page-inline-sm, 1rem);
  }

  /* Collapse the primary band to one full-width column (DOM order). */
  .layout-3col > .col--center,
  .layout-3col > .col--left,
  .layout-3col > .col--right {
    grid-column: 1 / span 12;
    grid-row: auto;
  }

  /* Single column: no vertical rules. */
  .layout-3col > .col--left::after,
  .layout-3col > .col--center::after {
    display: none;
  }

  /* Below-fold sections stack 1-up. */
  .below-fold > .col-4 {
    grid-column: span 12;
  }

  /* Wire band list becomes a single column. */
  .wire-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Masthead + hero step down one scale step to hold density at phone widths. */
  .masthead__wordmark {
    font-size: var(--type-2xl, 2.4414rem);
  }
  .lead-headline .hero {
    font-size: var(--type-3xl);
  }

  .site-footer {
    padding-bottom: var(--space-6);
  }
}

@media (max-width: 720px) {
  .trends-band__heading,
  .trends-band__content {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .trend-list {
    justify-content: flex-start;
  }
  .trends-band__hint {
    display: block;
    margin: 0 0 0 auto;
    color: var(--color-ink-faint);
    font-size: var(--type-2xs);
    line-height: var(--leading-subhead);
    white-space: nowrap;
  }
}

@media (max-width: 375px) {
  .grid-12 {
    column-gap: var(--space-1);
    padding-inline: var(--space-2);
  }

  .masthead {
    padding-bottom: var(--space-2);
  }
  .masthead__inner {
    padding-top: var(--space-2);
  }
  .masthead__wordmark {
    font-size: var(--type-2xl, 2.4414rem);
  }
  .lead-headline .hero {
    font-size: var(--type-2xl, 2.4414rem);
  }
  .section-header {
    font-size: var(--type-md);
  }

  .site-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
  }
  .footer-nav {
    gap: var(--space-1) var(--space-2);
  }
}

/* --- 10.4b Photo wells (real imagery) ----------------------------------- */

/* The placeholder well styles a dashed frame for empty media. When a real
   image fills the well, drop the frame and let the image define the surface. */
.media--photo {
  border: 0;
  background: none;
  overflow: hidden;
}

/* Shared news masonry: each section can follow a shorter neighboring section.
   Without JS this remains a readable, normal grid. */
.news-masonry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-2);
  max-width: var(--grid-max-width);
  margin: var(--space-4) auto 0;
  padding-inline: var(--space-page-inline);
  align-items: start;
}
.news-masonry > * {
  min-width: 0;
  grid-column: auto;
  margin: 0;
}
.news-masonry > .wire-band {
  display: block;
  width: auto;
  padding: 0;
}
.news-masonry .wire-list { grid-template-columns: minmax(0, 1fr); }
.news-masonry .lead-headline .hero { font-size: var(--type-2xl); }
.news-masonry.is-masonry {
  grid-auto-rows: 1px;
  grid-auto-flow: dense;
  row-gap: 0;
}
@media (max-width: 1024px) {
  .news-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .news-masonry, .news-masonry.is-masonry {
    display: block;
    padding-inline: var(--space-page-inline-sm);
  }
  .news-masonry > * + * { margin-top: var(--space-4); }
}
@media (min-width: 769px) {
  .news-masonry > .section-block + .section-block { margin-top: 0; }
}

/* Keep the lead centered in the three-column gallery, first in DOM/mobile. */
@media (min-width: 1025px) {
  .news-masonry > .col--center { grid-column: 2; }
}

/* ==========================================================================
   12. Editorial polish
   --------------------------------------------------------------------------
   Newspaper density: hairline rules between stories, a quiet row highlight,
   a subtle photo lift, and a calmer footer legal line. Tokens only.
   ========================================================================== */

.link-list {
  gap: 0;
}
.link-item {
  margin-inline: calc(var(--space-1) * -1);
  padding-block: calc(var(--space-1) * 0.75);
  padding-inline: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.link-item + .link-item {
  border-top: 1px solid var(--color-border);
}
.link-item:hover {
  background-color: var(--color-surface-sunken);
}

.wire-list {
  row-gap: 0;
}
.wire-item {
  padding-block: calc(var(--space-1) * 0.75);
}
.wire-item + .wire-item {
  border-top: 1px solid var(--color-border);
}

.media--photo img {
  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
}
.lead-headline:hover .media--photo img,
.card:hover .media--photo img {
  transform: scale(1.02);
}

.footer__legal a {
  color: var(--color-ink-muted);
  text-decoration-color: var(--color-border-strong);
}
.footer__legal a:hover {
  color: var(--color-accent);
}