/* ===========================================================
   /guides/severe-weather, Field Guide 03. Rendered by Astro from
   src/content/severe-weather (src/pages/guides/severe-weather.astro),
   one static page with every word in the document at load, because
   the queries it answers ("tornado watch vs warning", "Williamson
   County tornado history") are the point of publishing it.
   The component set is the City Hall article set, plus three
   additions: .mapwrap (the 24-hour chart), .record (the tornado
   table) and .channels (the alerting ledger). Loads after monocle.css.
   =========================================================== */
:root {
  --canvas:        var(--editorial-white);
  --surface-soft:  var(--paper-grey);
  --surface-tint:  var(--paper-grey);
  --hairline:      var(--gallery-border);
  --rule-strong:   var(--gallery-border);
  --ink:           var(--press-black);
  --ink-muted:     var(--ink-charcoal);
  --ink-soft:      var(--dispatch-grey);
  --uv:            var(--press-black);
  --link-hover:    var(--dispatch-grey);
  --flame-rule:    var(--alert-red);
  /* Alert Red is 4.39:1 on white and 3.85:1 on paper grey, both under the
     4.5:1 AA floor for small text. Same hue and saturation, 10% darker:
     5.20:1 and 4.56:1. Used for red TEXT only; rules, bars, swatches and
     the 34px stat number keep --flame-rule. */
  --flame-text:    #c63936;
  --flame-wash:    var(--paper-grey);
  --radius-sm: 2px; --radius: var(--radius-cards); --r-pill: var(--radius-buttons);
}

/* Article section rhythm — same as the City Hall long-reads */
main > section { padding: 52px 24px; border-bottom: 1px solid var(--rule-strong); }
main > section:last-of-type { border-bottom: 0; }
main section .wrap { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { main > section { padding: 40px 20px; } }

.read { max-width: 760px; margin-left: auto; margin-right: auto; }
.wide { max-width: 1000px; margin-left: auto; margin-right: auto; }

.hero-figure { margin: 40px auto 0; max-width: 1000px; }
.read figure, .wide figure { margin: 36px 0; }
figcaption {
  font: 400 13px/1.5 var(--sans); color: var(--ink-soft);
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
}
figcaption .credit { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.mapwrap { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px; }
.mapwrap svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .mapwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; } .mapwrap svg { min-width: 640px; } }

/* ------- Stat strip ------- */
.statstrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  margin: 0 0 40px;
}
.statstrip .cell { background: var(--surface-soft); padding: 22px 18px; }
.statstrip .n {
  font: 700 34px/1 var(--serif); color: var(--ink);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.statstrip .n .sm { font-size: 22px; }
.statstrip .n.red { color: var(--flame-rule); }
.statstrip .l {
  font: 400 12px/1.4 var(--sans); color: var(--ink-soft);
  margin-top: 8px; letter-spacing: 0.02em;
}

/* ------- Body blocks ------- */
.body-block + .body-block { margin-top: 4px; }
.body-block h2 {
  font: 700 clamp(24px, 3.2vw, 30px)/1.15 var(--serif);
  letter-spacing: -0.01em; color: var(--ink);
  margin: 44px 0 14px; display: flex; gap: 14px; align-items: baseline;
}
.body-block:first-child h2 { margin-top: 4px; }
.body-block h2 .num {
  font: 700 12px var(--sans); color: var(--ink-soft);
  letter-spacing: 0.06em; flex: none; padding-top: 4px;
}
.body-block h3 {
  font: 700 19px/1.25 var(--serif); color: var(--ink);
  margin: 28px 0 8px;
}
.body-block p {
  font: 400 17px/1.6 var(--serif); color: var(--ink-muted);
  margin: 0 0 16px; max-width: 68ch;
}
.body-block p a { color: var(--uv); text-decoration: underline; text-underline-offset: 2px; }
.body-block p a:hover { color: var(--link-hover); }
.body-block strong { color: var(--ink); font-weight: 700; }
.lead-cap::first-letter {
  float: left; font: 700 58px/0.82 var(--serif);
  margin: 6px 10px 0 0; color: var(--ink);
}

.callout {
  border-left: 3px solid var(--ink); background: var(--surface-soft);
  padding: 20px 22px; margin: 28px 0;
}
.callout p { margin: 0; font-size: 16px; }
.callout p + p { margin-top: 10px; }
.callout.urgent { border-left-color: var(--flame-rule); }
.callout .ch {
  font: 700 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); display: block; margin-bottom: 8px;
}
.callout.urgent .ch { color: var(--flame-text); }

.note { font: italic 400 15px/1.55 var(--serif); color: var(--ink-muted); margin: 0 0 8px; max-width: 64ch; }

/* ------- Watch / warning comparison ------- */
.vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline);
      border: 1px solid var(--hairline); margin: 30px 0 6px; }
.vs > div { background: var(--canvas); padding: 22px 20px; }
.vs h3 { font: 700 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.vs .w1 h3 { color: var(--ink-soft); }
.vs .w2 h3 { color: var(--flame-text); }
.vs .w3 h3 { color: var(--flame-text); }
.vs .big { font: 700 16px/1.3 var(--serif); color: var(--ink); margin: 0 0 10px; }
.vs p { font: 400 15px/1.55 var(--serif); color: var(--ink-muted); margin: 0; }
.vs .do { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
          font: 700 13px/1.4 var(--sans); color: var(--ink); }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }

/* ------- Alerting channels ledger ------- */
.channels { margin: 30px 0 6px; border-top: 1px solid var(--ink); }
.chan { display: grid; grid-template-columns: 34px 1fr 160px; gap: 4px 18px;
        padding: 18px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.chan .rank { font: 700 13px var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.chan h3 { font: 700 17px/1.25 var(--serif); color: var(--ink); margin: 0 0 4px; }
.chan p { font: 400 15px/1.55 var(--serif); color: var(--ink-muted); margin: 0; max-width: 58ch; }
.chan p a { color: var(--uv); text-decoration: underline; text-underline-offset: 2px; }
.chan p a:hover { color: var(--link-hover); }
.chan .tag { font: 400 12px/1.45 var(--sans); color: var(--ink-soft); text-align: right; }
.chan .tag b { display: block; font-weight: 700; color: var(--ink); font-size: 13px; }
.chan.indoors .tag b { color: var(--ink); }
.chan.outdoors .tag b { color: var(--flame-text); }
@media (max-width: 720px) {
  .chan { grid-template-columns: 28px 1fr; }
  .chan .tag { grid-column: 2; text-align: left; margin-top: 8px; }
}

/* ------- The record table ------- */
.recordwrap { margin: 30px 0 6px; }
@media (max-width: 860px) { .recordwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } }
table.record { width: 100%; border-collapse: collapse; font-family: var(--sans); }
@media (max-width: 860px) { table.record { min-width: 720px; } }
table.record caption { text-align: left; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); padding-bottom: 12px; }
table.record th {
  font: 700 10.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); text-align: left; padding: 0 12px 10px 0;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
table.record td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.record tr.sig td { background: var(--surface-soft); }
.c-date .d { display: block; font: 700 14px var(--serif); color: var(--ink); white-space: nowrap; }
.c-date .t { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }
.c-date .t.night { color: var(--flame-text); font-weight: 700; }
.sc {
  display: inline-block; min-width: 38px; text-align: center;
  font: 700 12px var(--sans); padding: 4px 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); color: var(--ink-soft);
}
.sc.sig { border-color: var(--flame-rule); color: var(--flame-text); }
.c-where { font-size: 14px; color: var(--ink-muted); line-height: 1.4; }
.c-where .unk { color: var(--ink-soft); font-style: italic; }
.c-len, .c-dmg { font-size: 13.5px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-cas { font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; }
.c-cas b { color: var(--flame-text); font-weight: 700; }
.swipe-hint {
  display: none;
  font: 700 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 10px 0 0; align-items: center; gap: 7px;
}
.swipe-hint::after { content: "\2192"; font-size: 14px; letter-spacing: 0; }
@media (max-width: 860px) { .recordwrap + .swipe-hint { display: flex; } }
@media (max-width: 720px) { .mapwrap + .swipe-hint { display: flex; } }

.record-key {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px;
  font: 400 12px var(--sans); color: var(--ink-soft);
}
.record-key span { display: inline-flex; align-items: center; gap: 7px; }
.record-key i { width: 11px; height: 11px; display: inline-block; flex: none; }
.record-key i.night { background: var(--flame-rule); }
.record-key i.day { background: var(--ink); }
.record-key i.sigbox { background: var(--surface-soft); border: 1px solid var(--hairline); }

/* ------- Month bars ------- */
.months { margin: 30px 0 6px; border-top: 1px solid var(--rule-strong); }
.mrow {
  display: grid; grid-template-columns: 54px 1fr 34px; gap: 14px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.mrow .ml { font: 700 12px var(--sans); color: var(--ink); letter-spacing: 0.04em; }
.mrow .mb { height: 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.mrow .mb span { display: block; height: 100%; background: var(--ink); border-radius: var(--radius-sm); }
.mrow.cool .mb span { background: var(--flame-rule); }
.mrow .mv { font: 700 13px var(--sans); color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.mrow.zero .mv { color: var(--hairline); }
.months-foot { font: 400 12px/1.5 var(--sans); color: var(--ink-soft); padding-top: 12px; }

/* ------- Steps ------- */
.steps { margin: 26px 0 6px; counter-reset: st; }
.step { display: grid; grid-template-columns: 38px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.step:first-child { border-top: 1px solid var(--ink); }
.step::before {
  counter-increment: st; content: counter(st);
  font: 700 15px var(--sans); color: var(--canvas); background: var(--ink);
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
}
.step h3 { font: 700 17px/1.25 var(--serif); color: var(--ink); margin: 4px 0 5px; }
.step p { font: 400 15px/1.55 var(--serif); color: var(--ink-muted); margin: 0; max-width: 60ch; }

/* ------- Sources ------- */
.sources ol { margin: 18px 0 0; padding-left: 0; list-style: none; }
.sources li {
  font: 400 14px/1.55 var(--sans); color: var(--ink-muted);
  padding: 14px 0; border-top: 1px solid var(--hairline);
}
.sources li:first-child { border-top: 0; }
.sources b { color: var(--ink); font-weight: 700; }
.sources a { color: var(--uv); text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--link-hover); }

@media (max-width: 640px) {
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .body-block p { font-size: 16px; }
}

/* ------- Subscribe / CTA band ------- */
.cta-band .pitch {
  background: var(--ink-charcoal); border-radius: var(--radius); padding: 48px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center;
}
.cta-band .pitch h2 {
  max-width: 24ch; font: 700 clamp(26px, 3.6vw, 36px)/1.125 var(--serif);
  letter-spacing: -0.01em; color: var(--editorial-white); margin-top: 12px;
}
.cta-band .pitch .kicker { color: var(--text-inverse-faint); }
.cta-band .pitch p { color: var(--text-inverse-soft); font: 400 16px/1.5 var(--serif); margin-top: 12px; max-width: 56ch; }
.cta-band .btn {
  display: inline-flex; align-items: center; gap: 10px; font: 700 13px var(--sans);
  background: var(--signal-yellow); color: var(--press-black); padding: 14px 24px;
  border-radius: var(--r-pill); text-decoration: none; white-space: nowrap;
  transition: background var(--t-default), color var(--t-default), transform var(--t-default);
}
.cta-band .btn:hover { background: var(--editorial-white); color: var(--press-black); transform: translateY(-2px); }
.cta-band .btn:active { transform: none; }
@media (max-width: 760px) { .cta-band .pitch { grid-template-columns: 1fr; padding: 32px 24px; } }