/* INTRCPT site stylesheet. Plain CSS, no build step. Tokens first; components read only tokens. */

:root {
  --ground: #e6eae6;        /* overcast */
  --surface: #f0f2ee;
  --ink: #152026;
  --ink-2: #33434a;
  --muted: #56635f;
  --rule: #c2cac5;
  --rule-strong: #95a29d;
  --accent: #8a560a;        /* inflow light, darkened to read on a pale ground */
  --accent-soft: #f1e2c4;
  --t: #b03a2b;             /* sounding convention: temperature red */
  --td: #2a7043;            /* dewpoint green */
  --cape: rgba(214, 146, 36, 0.30);
  --cin: rgba(62, 104, 148, 0.24);
  --grid: #b7c1bc;
  --grid-faint: #d2d9d4;

  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);

  --gutter: clamp(16px, 4vw, 48px);
  --measure: 66ch;
  --max: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121a1f;      /* storm slate */
    --surface: #18232a;
    --ink: #e2e7e3;
    --ink-2: #bcc6c2;
    --muted: #8e9b98;
    --rule: #28353b;
    --rule-strong: #3f4e55;
    --accent: #e3aa4c;
    --accent-soft: #3a2c14;
    --t: #e8705f;
    --td: #7fbf93;
    --cape: rgba(227, 170, 76, 0.26);
    --cin: rgba(112, 152, 196, 0.24);
    --grid: #34434a;
    --grid-faint: #243038;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121a1f;
  --surface: #18232a;
  --ink: #e2e7e3;
  --ink-2: #bcc6c2;
  --muted: #8e9b98;
  --rule: #28353b;
  --rule-strong: #3f4e55;
  --accent: #e3aa4c;
  --accent-soft: #3a2c14;
  --t: #e8705f;
  --td: #7fbf93;
  --cape: rgba(227, 170, 76, 0.26);
  --cin: rgba(112, 152, 196, 0.24);
  --grid: #34434a;
  --grid-faint: #243038;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--ink); color: var(--ground); padding: 0.5rem 0.9rem; z-index: 10;
  font-family: var(--mono); font-size: var(--step--1);
}
.skip:focus { top: 0.5rem; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- labels in the voice of a forecast product ---------- */
.label {
  font-family: var(--mono);
  font-size: var(--step--1);
  font-variation-settings: "wdth" 100;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem; padding-block: 1rem;
}
.mark {
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) 0; }
.hero-wrap { container-type: inline-size; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "word" "copy" "fig";
  gap: 2rem;
}
@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy fig" "word word";
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 1.5rem;
    align-items: end;
  }
}
.hero-copy { grid-area: copy; display: grid; gap: 1.25rem; align-content: end; }
.hero h2 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 118;
  font-weight: 760;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lede { margin: 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.hero-links a { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.03em; }

.hero-fig { grid-area: fig; margin: 0; display: grid; gap: 0.6rem; justify-self: stretch; }
.hero-fig svg { width: 100%; max-width: 560px; height: auto; display: block; justify-self: end; }
.hero-fig figcaption {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6; color: var(--muted);
  max-width: 560px; justify-self: end;
}
.key { display: inline-block; width: 1.4em; height: 0; vertical-align: 0.3em; border-top: 2.5px solid; margin-right: 0.35em; }
.key.t { border-color: var(--t); }
.key.td { border-color: var(--td); }
.key.parcel { border-top: 1.5px dashed var(--ink); }
.swatch { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; margin-right: 0.35em; border-radius: 2px; }
.swatch.cin { background: var(--cin); }
.swatch.cape { background: var(--cape); }

/* the name sits on the horizon */
.wordmark {
  grid-area: word;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 125;
  font-weight: 850;
  font-size: 16.7cqi;
  line-height: 0.8;
  letter-spacing: 0.015em;
  white-space: nowrap;
  color: var(--ink);
  padding-top: 0.08em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.02em;
}
@supports not (font-size: 1cqi) { .wordmark { font-size: 15vw; } }

.horizon {
  display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; justify-content: space-between;
  padding-block: 0.8rem 0; margin: 0; list-style: none;
}

/* ---------- sections as a forecast discussion ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.section-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3rem; }
@media (min-width: 860px) { .section-grid { grid-template-columns: 13rem minmax(0, 1fr); } }
.section-head { padding-top: 0.35rem; }
.section-head .label { color: var(--accent); }
.section h2 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  text-wrap: balance;
  max-width: 28ch;
}
.section p { margin: 0 0 1rem; max-width: var(--measure); text-wrap: pretty; }
.section .body > :last-child { margin-bottom: 0; }

.points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 3rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.points li { border-top: 1px solid var(--rule-strong); padding-block: 1rem 1.6rem; }
.points h3 {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 650;
  font-size: var(--step-1);
  line-height: 1.25;
}
.points p { margin: 0; color: var(--ink-2); }

/* status as a product header */
.spec {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 0; margin: 1.75rem 0 0; max-width: 40rem;
  border-top: 1px solid var(--rule-strong);
}
.spec dt, .spec dd { margin: 0; padding-block: 0.6rem; border-bottom: 1px solid var(--rule); }
.spec dt { padding-right: 2rem; }
.spec dd { font-family: var(--mono); font-size: 0.875rem; font-variation-settings: "wdth" 100; }

/* contact */
.address { font-family: var(--mono); font-size: var(--step-1); margin: 0.25rem 0 2rem; }
/* ---------- footer ---------- */
.foot { margin-top: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--rule); }
.foot .wrap {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  padding-block: 1.25rem 2rem; font-size: var(--step--1); color: var(--muted);
}
.foot p { margin: 0; }

/* ---------- 404 ---------- */
.lost { padding-block: clamp(4rem, 12vw, 9rem) 2rem; display: grid; gap: 1.25rem; }
.lost h1 {
  margin: 0; font-family: var(--display); font-variation-settings: "wdth" 125; font-weight: 850;
  font-size: clamp(3rem, 14vw, 9rem); line-height: 0.85; letter-spacing: 0.01em;
}
.lost p { margin: 0; max-width: 40ch; font-size: var(--step-1); color: var(--ink-2); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the sounding (inline SVG, themed by the tokens above) ---------- */
.skewt .g-isobar { stroke: var(--grid); stroke-width: 1; }
.skewt .g-isotherm { stroke: var(--grid-faint); stroke-width: 1; }
.skewt .g-zero { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 3; }
.skewt .g-dry { fill: none; stroke: var(--grid-faint); stroke-width: 0.9; }
.skewt .g-moist { fill: none; stroke: var(--grid-faint); stroke-width: 0.9; stroke-dasharray: 5 4; }
.skewt .cape { fill: var(--cape); }
.skewt .cin { fill: var(--cin); }
.skewt .trace { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.skewt .trace.t { stroke: var(--t); }
.skewt .trace.td { stroke: var(--td); }
.skewt .parcel { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.skewt .frame { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.skewt .barbs line { stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }
.skewt .barbs .pennant { fill: var(--ink-2); }
.skewt text { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.skewt .ann { font-size: 13px; fill: var(--ink-2); }
.skewt .ann.t { fill: var(--t); font-weight: 600; }
.skewt .ann.td { fill: var(--td); font-weight: 600; }
.skewt .cape-lab { fill: var(--accent); font-weight: 600; letter-spacing: 0.06em; }