@layer reset, foundation, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
}

@layer foundation {
  :root {
    color-scheme: light dark;

    /* Foundation */
    --surface-canvas: oklch(96% 0.018 84);
    --surface-raised: oklch(98% 0.01 84);
    --surface-subtle: oklch(92% 0.02 84);
    --text-primary: oklch(22% 0.035 244);
    --text-secondary: oklch(47% 0.026 237);
    --border-strong: var(--text-primary);
    --border-soft: color-mix(in oklch, var(--text-primary) 24%, transparent);
    --focus-ring: oklch(57% 0.15 42);

    /* Activity */
    --activity-water: oklch(48% 0.086 211);
    --activity-water-deep: oklch(31% 0.066 220);
    --activity-bike: oklch(46% 0.073 145);
    --activity-trail: oklch(40% 0.09 145);
    --activity-climb: oklch(57% 0.15 42);

    /* Independent claim axes */
    --availability-open: oklch(40% 0.09 145);
    --availability-limited: oklch(50% 0.13 42);
    --availability-closed: oklch(42% 0.18 27);
    --availability-unknown: oklch(47% 0.026 237);
    --freshness-current: oklch(40% 0.09 145);
    --freshness-stale: oklch(50% 0.13 42);
    --freshness-unknown: oklch(47% 0.026 237);
    --trust-primary: oklch(31% 0.066 220);
    --trust-local: oklch(50% 0.08 75);
    --trust-unknown: oklch(47% 0.026 237);
    --condition-low: oklch(88% 0.055 145);
    --condition-medium: oklch(78% 0.095 158);
    --condition-high: oklch(67% 0.105 190);

    /* River identity: names a river, never a condition or recommendation */
    --river-new: oklch(46% 0.086 211);
    --river-gauley: oklch(45% 0.1 285);
    --river-meadow: oklch(45% 0.085 135);

    /* Masthead band */
    --masthead-surface: oklch(31% 0.066 220);
    --masthead-text: oklch(96% 0.018 84);
    --masthead-line: oklch(74% 0.07 211);

    /* Type */
    --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Noto Serif", serif;
    --font-sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --type-label: 0.75rem;
    --type-caption: 0.8125rem;
    --type-small: 0.875rem;
    --type-body: 1rem;
    --type-lead: 1.125rem;
    --type-title: clamp(1.5rem, 2.5vw, 2rem);
    --type-display: clamp(2rem, 3.5vw, 3rem);

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;

  }

  body {
    background:
      linear-gradient(90deg, transparent 49.85%, color-mix(in oklch, var(--text-primary) 3%, transparent) 50%, transparent 50.15%),
      var(--surface-canvas);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--type-body);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: color-mix(in oklch, var(--activity-water) 35%, var(--surface-raised)); }
  :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
  main:focus { outline: none; }

  .skip-link { background: var(--text-primary); color: var(--surface-canvas); font-size: var(--type-caption); font-weight: 800; left: var(--space-4); letter-spacing: 0.06em; padding: 0.7rem var(--space-4); position: absolute; text-transform: uppercase; top: 0; transform: translateY(-120%); z-index: 10; }
  .skip-link:focus { transform: translateY(0.6rem); }
  .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
}

@layer layout {
  .page-spread {
    --page-spread-gutter: var(--space-5);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-spread__page { min-width: 0; padding-inline: var(--page-spread-gutter); }
  .page-spread__page:first-child { padding-left: 0; }
  .page-spread__page + .page-spread__page { border-left: 1px solid var(--border-soft); }
  .page-spread__page:last-child { padding-right: 0; }
  .page-spread__page--flush { padding-inline: 0; }

  .field-masthead { border-bottom: 2px solid var(--border-strong); min-height: 10rem; }
  .field-masthead__page { display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between; padding-block: var(--space-4); }
  .field-masthead__page--action { background: color-mix(in oklch, var(--field-accent, var(--activity-water)) 5%, transparent); justify-content: flex-end; }
  .field-masthead--compact { min-height: 8rem; }
  .field-masthead--compact .field-masthead__page { padding-block: var(--space-4) var(--space-5); }

  .claim-grid { display: grid; margin: 0; }
  .claim { min-width: 0; padding: var(--space-4); }
  .claim + .claim { border-top: 1px solid var(--border-soft); }
}

@layer components {
  .field-label,
  .eyebrow,
  .reading-label {
    color: var(--field-accent, var(--text-secondary));
    font-family: var(--font-sans);
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .field-title { font-family: var(--font-serif); font-size: var(--type-display); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
  .field-masthead--compact .field-title { font-size: var(--type-display); line-height: 1.05; }
  .field-deck { color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.4; max-width: 34rem; }

  .compact-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
  .compact-heading h1 { font-family: var(--font-serif); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
  .compact-heading p { color: var(--text-secondary); font-size: var(--type-caption); }
  .compact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .compact-card { border: 1px solid var(--border-soft); padding: var(--space-3); min-width: 0; }
  @media (max-width: 68rem) { .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 48rem) { .compact-grid { grid-template-columns: 1fr; } }

  .claim dt { color: var(--text-secondary); font-size: var(--type-label); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .claim dd { margin: var(--space-1) 0 0; }
  .claim__value { font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -0.035em; line-height: 1.05; }
  .claim__note { color: var(--text-secondary); font-size: var(--type-caption); line-height: 1.4; }

  .source-badge {
    border: 1px solid var(--border-strong);
    display: inline-flex;
    font-size: var(--type-label);
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.25;
    padding: 0.3rem 0.48rem;
    text-transform: uppercase;
  }
  .source-badge--primary { background: color-mix(in oklch, var(--trust-primary) 12%, var(--surface-raised)); }
  .source-badge--local { background: repeating-linear-gradient(135deg, var(--surface-raised) 0 4px, color-mix(in oklch, var(--trust-local) 16%, var(--surface-raised)) 4px 8px); }
  .source-badge--unknown { border-style: dashed; color: var(--text-secondary); }

  .freshness-indicator { --freshness-color: var(--freshness-unknown); align-items: center; display: flex; gap: var(--space-2); }
  .freshness-indicator--current { --freshness-color: var(--freshness-current); }
  .freshness-indicator--stale { --freshness-color: var(--freshness-stale); }
  .freshness-mark { background: var(--freshness-color); border: 2px solid var(--freshness-color); border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 0.8rem; width: 0.8rem; }
  .freshness-indicator--stale .freshness-mark { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--freshness-color) 3px 5px); border-radius: 0; }
  .freshness-indicator--unknown .freshness-mark { background: transparent; border-style: dashed; }

  .availability-indicator { --availability-color: var(--availability-unknown); align-items: center; display: flex; gap: var(--space-2); }
  .availability-indicator--open, .availability-indicator--expected_open { --availability-color: var(--availability-open); }
  .availability-indicator--limited, .availability-indicator--needs_verification { --availability-color: var(--availability-limited); }
  .availability-indicator--closed { --availability-color: var(--availability-closed); }
  .availability-mark { align-items: center; border: 2px solid var(--availability-color); color: var(--availability-color); display: inline-flex; flex: 0 0 auto; height: 1.5rem; justify-content: center; line-height: 1; width: 1.5rem; }
  .availability-indicator--closed .availability-mark { background: var(--availability-color); color: var(--surface-canvas); }
  .availability-indicator--unknown .availability-mark { border-style: dashed; }

  .field-link { align-items: center; display: inline-flex; font-size: var(--type-label); font-weight: 800; letter-spacing: 0.06em; min-height: 2.75rem; text-transform: uppercase; text-underline-offset: 0.25rem; }
}

@layer utilities {
  @media (max-width: 60rem) {
    .page-spread { grid-template-columns: 1fr; }
    .page-spread__page { padding-inline: 0; }
    .page-spread__page + .page-spread__page { border-left: 0; border-top: 1px solid var(--border-soft); }
    .field-masthead { min-height: 0; }
    .field-masthead__page { min-height: 0; }
    .field-masthead--compact .field-masthead__page { min-height: 0; }
  }

  @media (max-width: 48rem) {
    .field-masthead__page { min-height: 0; padding-block: var(--space-4); }
    .field-masthead__page--action { min-height: 0; padding: var(--space-4); }
    .field-masthead--compact .field-masthead__page { padding-block: var(--space-3); }
    .field-masthead--compact .field-masthead__page--action { padding: var(--space-3) var(--space-4); }
    .field-masthead--compact .field-title { font-size: var(--type-display); line-height: 1.05; }
    .field-masthead--compact .field-masthead__context { display: none; }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --surface-canvas: oklch(20% 0.025 244);
      --surface-raised: oklch(24% 0.023 244);
      --surface-subtle: oklch(28% 0.022 244);
      --text-primary: oklch(94% 0.017 84);
      --text-secondary: oklch(77% 0.02 84);
      --activity-water: oklch(72% 0.095 211);
      --activity-water-deep: oklch(78% 0.08 211);
      --activity-bike: oklch(72% 0.095 145);
      --activity-trail: oklch(74% 0.1 145);
      --activity-climb: oklch(72% 0.14 48);
      --availability-open: oklch(74% 0.1 145);
      --availability-limited: oklch(78% 0.12 75);
      --availability-closed: oklch(72% 0.17 27);
      --availability-unknown: var(--text-secondary);
      --freshness-current: oklch(74% 0.1 145);
      --freshness-stale: oklch(78% 0.12 75);
      --freshness-unknown: var(--text-secondary);
      --trust-primary: oklch(78% 0.08 211);
      --trust-local: oklch(78% 0.1 75);
      --trust-unknown: var(--text-secondary);
      --condition-low: oklch(34% 0.05 145);
      --condition-medium: oklch(39% 0.07 158);
      --condition-high: oklch(43% 0.075 190);
      --focus-ring: oklch(78% 0.14 75);
      --river-new: oklch(76% 0.09 211);
      --river-gauley: oklch(78% 0.08 285);
      --river-meadow: oklch(78% 0.09 135);
      --masthead-surface: oklch(26% 0.04 220);
      --masthead-text: oklch(94% 0.017 84);
      --masthead-line: oklch(66% 0.07 211);
    }
  }

  @media (prefers-contrast: more) {
    :root { --border-soft: var(--border-strong); }
    body { background: var(--surface-canvas); }
    .source-badge--local, .freshness-indicator--stale .freshness-mark { background: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  @media print {
    :root {
      color-scheme: light;
      --masthead-surface: white;
      --masthead-text: black;
      --masthead-line: oklch(60% 0 0);
      --surface-canvas: white;
      --surface-raised: white;
      --surface-subtle: oklch(95% 0 0);
      --text-primary: black;
      --text-secondary: oklch(38% 0 0);
      --border-strong: black;
      --border-soft: oklch(60% 0 0);
    }
  }
}