/* ============================================================================
   btv , "The Best Time to Visit Disney World, Month by Month"

   One system, three ideas:

   1. THE YEAR HAS A TEMPERATURE. Every month owns an accent hue, and the hues
      walk the calendar: cold blue in January, green through spring, gold into
      early summer, ember at the height of the heat, a deliberate rain-teal
      break for September, then amber to candlelight through the fall. Scrolling
      the page should feel like scrolling a year.
   2. EDITORIAL, NOT BLOG. Fraunces at display sizes for warmth and contrast,
      Hanken Grotesk for everything you actually read, hairline rules instead of
      boxes, tabular numerals everywhere a figure can be compared.
   3. THE DATA IS THE DECORATION. Meters, the year chart and the ranking bars
      carry the accent system, so nothing on the page is ornament for its own
      sake.

   Namespace: btv-. Sits on the site's night palette (v1.css tokens) and only
   lifts its own surfaces.
   ========================================================================= */

:root:has(.btv) { scroll-padding-top: 120px; }

.btv {
  /* ---- the year ramp ------------------------------------------------------
     Chroma and lightness are held in a narrow band so all twelve read as one
     family and every one of them clears 4.5:1 on the page surfaces. */
  --btv-m1:  oklch(80% 0.098 265);   /* January   cold blue */
  --btv-m2:  oklch(80% 0.105 305);   /* February  violet */
  --btv-m3:  oklch(83% 0.125 148);   /* March     spring green */
  --btv-m4:  oklch(85% 0.130 124);   /* April     leaf */
  --btv-m5:  oklch(87% 0.135 100);   /* May       chartreuse */
  --btv-m6:  oklch(86% 0.135 82);    /* June      gold */
  --btv-m7:  oklch(83% 0.145 58);    /* July      hot amber */
  --btv-m8:  oklch(79% 0.150 34);    /* August    ember */
  --btv-m9:  oklch(80% 0.100 205);   /* September rain teal */
  --btv-m10: oklch(84% 0.140 70);    /* October   harvest */
  --btv-m11: oklch(81% 0.140 46);    /* November  rust */
  --btv-m12: oklch(78% 0.150 18);    /* December  candlelight */

  /* ---- page-local surfaces ---------------------------------------------- */
  --btv-bg:      oklch(19% 0.042 282);
  --btv-panel:   oklch(24.5% 0.046 281);
  --btv-panel-2: oklch(28.5% 0.048 281);
  --btv-hair:    oklch(38% 0.045 282);
  --btv-hair-2:  oklch(48% 0.042 283);
  /* Control boundaries need 3:1 (SC 1.4.11); the hairline above is 2.5:1. */
  --btv-edge:    oklch(56% 0.042 283);

  --btv-ink:   oklch(95% 0.022 86);
  --btv-ink-2: oklch(84% 0.026 86);
  --btv-ink-3: oklch(71% 0.028 86);

  /* accent slot, re-pointed per month section */
  --btv-accent: var(--btv-m1);

  /* ---- type ------------------------------------------------------------- */
  --btv-serif: "Fraunces", "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --btv-sans: var(--ui, "Hanken Grotesk", system-ui, sans-serif);

  --btv-measure: 34rem;   /* ~64 characters of Hanken at 18px */

  background: var(--btv-bg);
  color: var(--btv-ink);
  font-family: var(--btv-sans);
  overflow-x: clip;
}

/* Optical defaults for the whole feature. */
.btv :where(h1, h2, h3, h4) {
  font-family: var(--btv-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
.btv :where(p, li) { text-wrap: pretty; }
.btv :where(.btv-num, td, th, time) { font-variant-numeric: tabular-nums; }

.btv .wrap { --maxw: 1200px; }

/* A reading column that stays honest at every width. */
.btv-col { max-width: var(--btv-measure); }

.btv-body p {
  margin: 0 0 1.05em;
  font-size: clamp(1.0625rem, 0.42vw + 0.98rem, 1.1875rem);
  line-height: 1.62;
  color: var(--btv-ink-2);
}
.btv-body p:last-child { margin-bottom: 0; }
.btv-body a {
  color: var(--btv-ink);
  text-decoration: underline;
  text-decoration-color: var(--btv-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.btv-body a:hover { color: var(--btv-accent); }

/* Shared label. Used for every eyebrow, meter caption and column head. */
.btv-label {
  font-family: var(--btv-sans);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--btv-ink-3);
  margin: 0;
}

.btv-section { padding-block: clamp(56px, 8vw, 104px); }
.btv-section + .btv-section { border-top: 1px solid var(--btv-hair); }

/* A hairline section head used by every band below the hero. */
.btv-head { margin-bottom: clamp(28px, 4vw, 46px); }
.btv-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.06;
  margin-top: 10px;
}
.btv-head .btv-dek {
  margin: 14px 0 0;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  line-height: 1.55;
  color: var(--btv-ink-3);
}

/* ============================================================ 1. HERO ==== */

.btv-hero {
  position: relative;
  isolation: isolate;
  min-height: min(76svh, 720px);
  display: grid;
  align-content: end;
  padding-block: clamp(48px, 8vh, 96px) clamp(24px, 3.4vh, 40px);
}

/* The ridgeline gets its own band under the copy rather than sitting behind it.
   Nothing is drawn under a word, so the fills can be strong enough to read as
   twelve months instead of a smudge, and the band earns its place by being
   labelled: it is the actual average-high curve the page argues from. */
.btv-hero-band {
  position: relative;
  padding-block: clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 24px);
  border-block: 1px solid var(--btv-hair);
  background: var(--btv-bg);
}
.btv-hero-band .btv-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--btv-hair);
  margin-bottom: 12px;
}
.btv-hero-band .btv-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--btv-hair), transparent);
}
.btv-hero-canvas {
  display: block;
  width: 100%;
  height: 124px;
}
.btv-hero-band .wrap::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: -21px;
  background: var(--btv-hair);
}

/* Sky above the ridgeline. Two washes so the corners never go flat. */
.btv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 18% 6%, oklch(38% 0.10 292 / 0.85), transparent 62%),
    radial-gradient(90% 70% at 88% 0%, oklch(46% 0.11 44 / 0.42), transparent 58%),
    linear-gradient(to bottom, oklch(15% 0.040 282), oklch(21% 0.048 281) 62%, var(--btv-bg));
}

/* Film grain over everything, faint enough to read as paper rather than noise. */
.btv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

.btv-hero-in { position: relative; z-index: 1; }

.btv-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--btv-ink-2);
}
.btv-hero-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--btv-hair-2), transparent);
}

.btv-hero h1 {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  max-width: 20ch;
  font-size: clamp(2.625rem, 7.6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.032em;
  font-weight: 600;
}
/* "Month by Month" set apart in italic, the one typographic flourish. */
.btv-hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--btv-ink-2);
  letter-spacing: -0.024em;
}

.btv-hero-dek {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 0.6vw + 0.96rem, 1.3125rem);
  line-height: 1.5;
  color: var(--btv-ink-2);
}

.btv-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin: clamp(20px, 2.6vh, 30px) 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--btv-hair);
}
.btv-now {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--btv-ink);
}
.btv-now-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--btv-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--btv-accent) 22%, transparent);
  align-self: center;
}

/* ======================================================= 2. SNAPSHOT ==== */

.btv-awards {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--btv-hair);
  border: 1px solid var(--btv-hair);
  border-radius: var(--r, 13px);
  overflow: clip;
}
.btv-award {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--btv-panel);
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}
.btv-award::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--btv-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btv-award:hover, .btv-award:focus-visible { background: var(--btv-panel-2); }
.btv-award:hover::before, .btv-award:focus-visible::before { transform: scaleX(1); }
.btv-award-month {
  font-family: var(--btv-serif);
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  color: var(--btv-accent);
}
.btv-award-line {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--btv-ink-2);
}
.btv-award-go {
  margin-top: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--btv-ink-3);
}
.btv-award:hover .btv-award-go { color: var(--btv-accent); }

/* The opening spread. Two readable measures side by side instead of one narrow
   column with the page's whole right side left empty. */
.btv-open {
  /* Multi-column rather than a two-track grid: the browser balances the two
     columns itself, so the block fills the width without leaving one side
     short. Reading order stays natural, down the first column then the second. */
  columns: 2;
  column-gap: clamp(30px, 4.5vw, 76px);
  column-fill: balance;
  margin-top: clamp(30px, 4vw, 46px);
}
.btv-open > * { margin-top: 0; }
/* Paragraphs may break across the two columns, which is what lets the browser
   balance them tightly. The bordered callout is the one block held together. */
.btv-open .btv-caveat { break-inside: avoid; margin-top: 1.05em; }

/* The blunt counterweight to four awards, set as a sidebar. */
.btv-caveat {
  margin: 0;
  padding-left: clamp(18px, 2.2vw, 26px);
  border-left: 2px solid var(--btv-m8);
  font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  line-height: 1.55;
  color: var(--btv-ink-2);
}

@media (max-width: 900px) {
  .btv-open { columns: 1; }
  .btv-open .btv-body,
  .btv-open .btv-caveat { max-width: var(--btv-measure); }
  .btv-open .btv-caveat { margin-top: clamp(26px, 4vw, 34px); }
}

/* ====================================================== 3. MONTH NAV ==== */

.btv-nav {
  position: sticky;
  /* Stacks UNDER the site's own sticky masthead (.sb-bar, 61px, z-index 100)
     rather than behind it. Both used to pin to 0 and the month pills lost. */
  top: 61px;
  z-index: 39;
  background: color-mix(in oklab, var(--btv-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block: 1px solid var(--btv-hair);
}
.btv-nav-in {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.btv-nav-in::-webkit-scrollbar { display: none; }
.btv-nav-link {
  position: relative;
  flex: 1 0 auto;
  scroll-snap-align: center;
  padding: 15px 14px 13px;
  text-align: center;
  text-decoration: none;
  color: var(--btv-ink-3);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 140ms ease;
}
.btv-nav-link::after {
  content: "";
  position: absolute;
  inset: auto 8px -1px 8px;
  height: 2px;
  background: var(--btv-accent);
  transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btv-nav-link:hover { color: var(--btv-ink); }
.btv-nav-link[aria-current="true"] { color: var(--btv-ink); }
.btv-nav-link[aria-current="true"]::after { transform: scaleX(1); }

/* ====================================================== 4. YEAR CHART ==== */

.btv-chart-shell {
  border: 1px solid var(--btv-hair);
  border-radius: var(--r, 13px);
  background: var(--btv-panel);
  overflow: clip;
}
.btv-chart-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--btv-hair);
}
.btv-segs { display: flex; gap: 2px; }
.btv-seg {
  appearance: none;
  border: 1px solid var(--btv-edge);
  background: transparent;
  color: var(--btv-ink-3);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 13px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btv-seg:first-child { border-radius: var(--r-pill, 999px) 0 0 var(--r-pill, 999px); padding-left: 17px; }
.btv-seg:last-child { border-radius: 0 var(--r-pill, 999px) var(--r-pill, 999px) 0; padding-right: 17px; }
.btv-seg:hover { color: var(--btv-ink); border-color: var(--btv-ink-3); }
.btv-seg[aria-pressed="true"] {
  background: var(--btv-ink);
  border-color: var(--btv-ink);
  color: oklch(22% 0.045 280);
}
.btv-chart-read {
  flex: 1 1 20rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--btv-ink-3);
  text-align: right;
  /* Held open so a longer readout never reflows the toolbar under the plot. */
  min-height: 1.45em;
}
.btv-chart-read strong { color: var(--btv-ink); font-variant-numeric: tabular-nums; }

.btv-plot { display: block; width: 100%; min-width: 46rem; height: auto; }

/* The SVG has a fixed viewBox, so scaling it below about 740px shrinks every
   label past legibility. Scroll it instead, the way the table already does. */
.btv-plot-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.btv-plot-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.btv-plot text { font-family: var(--btv-sans); fill: var(--btv-ink-3); }
.btv-plot .btv-gridline { stroke: var(--btv-hair); stroke-width: 1; }
.btv-plot .btv-tick { font-size: 11px; font-variant-numeric: tabular-nums; }
.btv-plot .btv-mlabel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  transition: fill 140ms ease;
}
.btv-plot .btv-mlabel.is-on { fill: var(--btv-ink); }

/* Ordered-sequence marks. The stroke uses the twelve-hue year gradient, so the
   line changes temperature as it crosses the calendar. */
.btv-plot .btv-line {
  fill: none;
  stroke: var(--btv-ink-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btv-plot .btv-line.is-heat { stroke: url(#btv-heat); }
.btv-plot .btv-line.is-soft { stroke-width: 1.5; opacity: 0.5; stroke-dasharray: 3 4; }
.btv-plot .btv-area { fill: var(--brand); opacity: 0.08; }
.btv-plot .btv-band { fill: url(#btv-heat); opacity: 0.15; }
.btv-plot .btv-dot {
  fill: var(--brand);
  stroke: var(--btv-panel);
  stroke-width: 2;
  transition: opacity 160ms ease, r 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Amounts that genuinely start at zero. */
.btv-plot .btv-bar { fill: var(--brand); transition: opacity 160ms ease; }

.btv-plot .btv-guide {
  stroke: var(--btv-ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  transition: opacity 160ms ease;
}
.btv-plot .btv-value {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  fill: var(--btv-ink);
  transition: opacity 160ms ease;
  paint-order: stroke;
  stroke: var(--btv-panel);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.btv-plot .btv-hit { fill: transparent; cursor: pointer; }
.btv-plot .btv-hit:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}

/* The table the chart is drawn from. Real content, not a fallback. */
.btv-table-wrap {
  margin-top: clamp(20px, 2.4vw, 28px);
  overflow-x: auto;
  border: 1px solid var(--btv-hair);
  border-radius: var(--r, 13px);
}
.btv-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 40rem; }
.btv-table caption {
  padding: 14px clamp(14px, 2vw, 18px);
  text-align: left;
  color: var(--btv-ink-3);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--btv-hair);
}
.btv-table th, .btv-table td {
  padding: 11px clamp(10px, 1.4vw, 16px);
  text-align: right;
  border-bottom: 1px solid var(--btv-hair);
  white-space: nowrap;
}
.btv-table thead th {
  position: sticky; top: 0;
  background: var(--btv-panel-2);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--btv-ink-3);
}
.btv-table th[scope="row"] { text-align: left; font-weight: 700; color: var(--btv-ink); }
.btv-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.btv-table tbody tr:hover { background: var(--btv-panel-2); }

/* ==================================================== 5. MONTH CARDS ==== */

.btv-months { padding-block: 0; }

/* A quarter marker between the month sections. Twelve identical bands in a row
   is the one thing that made this read as a template; these give it movements. */
.btv-season {
  position: relative;
  border-top: 1px solid var(--btv-hair);
  background:
    linear-gradient(to right,
      color-mix(in oklab, var(--btv-accent) 12%, transparent),
      transparent 62%),
    var(--btv-panel);
  padding-block: clamp(22px, 3vw, 32px);
}
.btv-season-line {
  margin: 0;
  font-family: var(--btv-serif);
  font-size: clamp(1.125rem, 1.3vw + 0.9rem, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.28;
  color: var(--btv-ink-2);
  text-wrap: balance;
}
.btv-season-line span {
  color: var(--btv-accent);
  font-style: italic;
  font-weight: 500;
  margin-right: 0.35em;
}
.btv-season + .btv-month { border-top: 0; }

.btv-month {
  position: relative;
  --btv-accent: var(--btv-m1);
  border-top: 1px solid var(--btv-hair);
  padding-block: clamp(48px, 7vw, 88px);
}
.btv-month:first-child { border-top: 0; }

/* The accent wash. This is what makes scrolling feel like a year passing. */
.btv-month::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(360px, 46%);
  pointer-events: none;
  background: radial-gradient(
    88% 100% at 12% 0%,
    color-mix(in oklab, var(--btv-accent) 13%, transparent),
    transparent 72%);
}
.btv-month > .wrap { position: relative; }

.btv-month-grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  grid-template-columns: minmax(0, var(--btv-measure)) minmax(0, 1fr);
  align-items: start;
}

.btv-month-head { display: grid; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.btv-month-rank { display: flex; align-items: center; gap: 12px; }
.btv-month-numeral {
  font-family: var(--btv-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--btv-accent);
  font-variant-numeric: tabular-nums;
}
.btv-month-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--btv-ink-3);
}
.btv-month h3 {
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.btv-month-verdict {
  margin: 0;
  max-width: 30rem;
  font-family: var(--btv-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.2vw + 0.95rem, 1.5rem);
  line-height: 1.34;
  color: var(--btv-accent);
  letter-spacing: -0.012em;
}

/* ---- the meter row ---- */
.btv-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 1px;
  margin: clamp(22px, 3vw, 30px) 0;
  background: var(--btv-hair);
  border: 1px solid var(--btv-hair);
  border-radius: var(--r-sm, 9px);
  overflow: clip;
}
.btv-meter { padding: 13px 14px 12px; background: var(--btv-panel); display: grid; gap: 7px; }
.btv-meter dt {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--btv-ink-3);
}
.btv-meter dd { margin: 0; font-weight: 700; font-size: 0.9375rem; color: var(--btv-ink); }
.btv-pips { display: flex; gap: 3px; }
.btv-pip { height: 4px; flex: 1; border-radius: 2px; background: var(--btv-hair-2); }
.btv-pip.is-on { background: var(--btv-accent); }

/* Risk meters read on a green-to-red ramp so a full bar always means worse,
   while the crowd meter keeps the month's own accent. Without this, four
   identical amber bars mean four different things in one row. */
.btv-meter.is-risk .btv-pip.is-on { background: var(--btv-risk, var(--heat-low)); }
/* Park hours is the row's only more-is-better measure, so it stays neutral rather
   than joining a ramp where a full green bar would have to mean "worse". */
.btv-meter.is-plain .btv-pip.is-on { background: var(--btv-ink-3); }
.btv-meter[data-risk="0"] { --btv-risk: var(--heat-low); }
.btv-meter[data-risk="1"] { --btv-risk: var(--heat-low); }
.btv-meter[data-risk="2"] { --btv-risk: var(--heat-med); }
.btv-meter[data-risk="3"] { --btv-risk: oklch(78% 0.165 46); }
.btv-meter[data-risk="4"] { --btv-risk: var(--heat-high); }

/* ---- numbers strip ---- */
.btv-figures {
  display: grid;
  /* Two by two inside the reading measure, so no label has to wrap. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.4vw, 24px) 0;
  border-block: 1px solid var(--btv-hair);
  margin: clamp(22px, 3vw, 30px) 0;
}
.btv-figure dt {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--btv-ink-3);
  margin-bottom: 5px;
}
.btv-figure dd {
  margin: 0;
  font-family: var(--btv-serif);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--btv-ink);
  font-variant-numeric: tabular-nums;
}
.btv-figure dd small {
  display: block;
  margin-top: 4px;
  font-family: var(--btv-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--btv-ink-3);
}

/* ---- best for / avoid if ---- */
.btv-fit { display: grid; gap: clamp(18px, 2.4vw, 24px); }
.btv-fit-block {
  padding: clamp(16px, 2vw, 20px);
  border: 1px solid var(--btv-hair);
  border-radius: var(--r-sm, 9px);
  background: var(--btv-panel);
}
.btv-fit-block.is-avoid { background: transparent; }
.btv-fit-block h4 {
  font-family: var(--btv-sans);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--btv-ink-3);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.btv-fit-block h4::before { content: ""; width: 14px; height: 2px; background: var(--btv-accent); }
.btv-fit-block.is-avoid h4::before { background: var(--btv-m8); }
.btv-fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.btv-fit-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.48;
  color: var(--btv-ink-2);
}
.btv-fit-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--btv-accent);
}
.btv-fit-block.is-avoid .btv-fit-list li::before {
  border: 0;
  border-radius: 1px;
  background: var(--btv-m8);
  width: 8px; height: 2px;
  top: 0.72em;
}

/* ---- the event rail ---- */
.btv-events {
  list-style: none;
  margin: clamp(20px, 2.6vw, 26px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.btv-events li {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid color-mix(in oklab, var(--btv-accent) 40%, var(--btv-hair));
  border-radius: var(--r-pill, 999px);
  color: var(--btv-ink-2);
  background: color-mix(in oklab, var(--btv-accent) 8%, transparent);
}

/* ==================================================== 6. DECISION TOOL == */

.btv-decide { background: var(--btv-panel); border-top: 1px solid var(--btv-hair); }

.btv-tool {
  display: grid;
  gap: clamp(26px, 4vw, 46px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.btv-fieldset { border: 0; margin: 0 0 clamp(22px, 3vw, 28px); padding: 0; }
.btv-fieldset legend {
  padding: 0 0 12px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--btv-ink-3);
}
.btv-choices { display: grid; gap: 8px; }
.btv-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--btv-hair);
  border-radius: var(--r-sm, 9px);
  background: var(--btv-bg);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.btv-choice:hover { border-color: var(--btv-hair-2); }
.btv-choice input {
  appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 1.5px solid var(--btv-edge);
  border-radius: 5px;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.btv-choice input[type="radio"] { border-radius: 50%; }
.btv-choice input::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: oklch(22% 0.045 280);
  transform: scale(0);
  transition: transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btv-choice input[type="radio"]::after { border-radius: 50%; }
.btv-choice input:checked { background: var(--brand); border-color: var(--brand); }
.btv-choice input:checked::after { transform: scale(1); }
.btv-choice:has(input:checked) {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--btv-hair));
  background: var(--btv-panel-2);
}
.btv-choice-text { display: grid; gap: 2px; }
.btv-choice-text b { font-size: 0.9375rem; font-weight: 700; color: var(--btv-ink); }
.btv-choice-text span { font-size: 0.8125rem; color: var(--btv-ink-3); line-height: 1.4; }

.btv-reset {
  appearance: none;
  background: transparent;
  border: 1px solid var(--btv-edge);
  border-radius: var(--r-pill, 999px);
  color: var(--btv-ink-2);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.btv-reset:hover { color: var(--btv-ink); border-color: var(--btv-ink-3); }

/* ---- the ranking ---- */
.btv-rank { display: grid; gap: 2px; }
.btv-rank-row {
  --btv-accent: var(--btv-m1);
  display: grid;
  grid-template-columns: 2.25rem minmax(5.5rem, auto) minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: clamp(8px, 1.4vw, 16px);
  padding: 11px 14px;
  border-radius: var(--r-sm, 9px);
  background: var(--btv-bg);
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}
.btv-rank-row:hover { background: var(--btv-panel-2); }
.btv-rank-pos {
  font-family: var(--btv-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--btv-ink-3);
  font-variant-numeric: tabular-nums;
}
.btv-rank-row.is-top .btv-rank-pos { color: var(--btv-accent); }
.btv-rank-name { font-weight: 700; font-size: 0.9375rem; color: var(--btv-ink); }
.btv-rank-track {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--btv-hair);
  overflow: clip;
}
.btv-rank-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--btv-accent);
  transform-origin: left;
  transition: transform 440ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btv-rank-score {
  text-align: right;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--btv-ink-2);
  font-variant-numeric: tabular-nums;
}
.btv-tool-out h3 {
  font-family: var(--btv-sans);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--btv-ink-3);
  margin-bottom: 14px;
}
.btv-tool-note { margin: 16px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--btv-ink-3); }

/* ============================================================= 7. FAQ ==== */

.btv-faq-list { display: grid; gap: 0; max-width: 52rem; }
.btv-faq-item { border-bottom: 1px solid var(--btv-hair); }
.btv-faq-item:first-child { border-top: 1px solid var(--btv-hair); }
.btv-faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--btv-serif);
  font-size: clamp(1.0625rem, 0.8vw + 0.9rem, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--btv-ink);
}
.btv-faq-item summary::-webkit-details-marker { display: none; }
.btv-faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px; height: 13px;
  margin-top: 0.35em;
  border-right: 1.5px solid var(--btv-ink-3);
  border-bottom: 1.5px solid var(--btv-ink-3);
  transform: rotate(45deg);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.btv-faq-item[open] summary::after { transform: rotate(225deg); }
.btv-faq-item summary:hover { color: var(--brand); }
.btv-faq-answer { padding: 0 2px 22px; max-width: var(--btv-measure); }

/* ====================================================== 8. RESPONSIVE ==== */

@media (max-width: 1120px) {
  .btv-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btv-chart-read { flex-basis: 100%; text-align: left; min-height: 2.9em; }
}

@media (max-width: 1000px) {
  .btv-month-grid { grid-template-columns: 1fr; }
  .btv-tool { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .btv-hero { min-height: min(80svh, 640px); }
  .btv-hero-canvas { height: 100px; }
  .btv-nav-link { padding: 13px 12px 11px; font-size: 0.75rem; }
  .btv-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .btv-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Five meters in two columns leaves a hole; the last one takes the row. */
  .btv-meter:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .btv-rank-row { grid-template-columns: 1.75rem minmax(4.5rem, auto) minmax(0, 1fr) 2.75rem; padding: 10px 11px; }
  .btv-table { min-width: 34rem; }
}

@media (max-width: 560px) {
  .btv-awards { grid-template-columns: 1fr; }
  .btv-chart-read { min-height: 4.4em; }
}

@media (max-width: 420px) {
  .btv-award { padding: 17px; }
  .btv-events li { font-size: 0.75rem; padding: 5px 10px; }
}

/* ================================================ 9. MOTION AND PRINT ==== */

@media (prefers-reduced-motion: reduce) {
  .btv *, .btv *::before, .btv *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btv-award::before { transform: scaleX(1); }
}

@media print {
  .btv { background: #fff; color: #111; }
  .btv-hero-canvas, .btv-nav, .btv-plot, .btv-decide { display: none; }
  .btv-month::before { display: none; }
  .btv-faq-answer { display: block; }
}

/* Focus, once, for everything. */
.btv :where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}
/* These two clip at their padding box, so paint the ring inward. */
.btv-nav-link:focus-visible,
.btv-award:focus-visible { outline-offset: -3px; }
.btv-nav-in { padding-block: 3px; }