/* ==========================================================
   Faster after every storm, but why?
   Companion site stylesheet. Light mode only, one column of
   reading width with full-width chart blocks, typographic
   scale tuned for long-form academic reading.
   ========================================================== */

:root {
  /* palette: the paper's figure colors, so the site and the
     manuscript read as one system */
  --navy: #16385c;
  --wine: #7b1e3b;
  --ink: #14181d;
  --body: #2b3138;
  --muted: #6a7280;
  --rule: #d9dde2;
  --rule-soft: #e9ecef;
  --paper: #ffffff;
  --wash: #f6f6f4;
  --wash-2: #eef0f1;
  --accent: #16385c;
  --nodata: #e3e3e0;
  --focus: #b7791f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;

  --w-read: 42rem;
  --w-wide: 66rem;
  --shadow: 0 1px 2px rgba(20, 24, 29, .06),
            0 8px 24px rgba(20, 24, 29, .05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.22;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
}

a { color: var(--navy); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 99;
  background: var(--paper); padding: .5rem .8rem;
}

/* ------------------------------------------------ masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, var(--wash) 0%, var(--paper) 100%);
}
.masthead-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 2.4rem 1.5rem 1.5rem;
}
.masthead h1 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  max-width: 46ch;
  margin-bottom: .3em;
}
.masthead .subtitle {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.4;
  margin: 0;
}
.masthead .byline {
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--muted);
  margin: 0;
}
.masthead .byline strong { color: var(--ink); font-weight: 600; }

/* inner pages carry a slim header instead of the full hero */
.masthead-inner.compact {
  padding: 1.15rem 1.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem 1rem;
}
.masthead-inner.compact .homelink {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
}
.masthead-inner.compact .homelink:hover { color: var(--navy); }
.masthead-inner.compact .crumb {
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
}
.masthead-inner.compact .crumb::before {
  content: "/";
  color: var(--rule);
  margin-right: 1rem;
}

/* ------------------------------------------------ nav */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.sitenav-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  overflow-x: auto;
}
.sitenav ul {
  display: flex;
  gap: 1.05rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.sitenav a {
  display: block;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
  padding: .85rem 0;
  border-bottom: 2px solid transparent;
}
.sitenav a:hover { color: var(--ink); }
.sitenav a.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* ------------------------------------------------ sections */

main { display: block; }

.section {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 1.6rem 1.5rem 3rem;
  border-bottom: 1px solid var(--rule-soft);
}
.section:last-of-type { border-bottom: none; }

.section > h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  max-width: 24ch;
  margin-bottom: .7rem;
}
.lede p, .closing p {
  max-width: var(--w-read);
}
/* the standfirst introduces a full-width figure, so it runs the full
   width of the section rather than leaving the right side empty */
.standfirst {
  font-size: 1.02rem;
  color: var(--body);
  margin: 0 0 1.2rem;
}
.lede p { margin: 0 0 1.1rem; }
.note {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  margin: 1.1rem 0 0;
}

/* ------------------------------------------------ key figures */

.findings article { border-top: 3px solid var(--navy); padding-top: .9rem; }
.findings h3 { font-size: 1rem; margin-bottom: .4rem; }
.findings p { font-size: .95rem; margin: 0; color: var(--body); }

/* ------------------------------------------------ chart blocks */

.chart-block {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: 1.2rem 1.2rem 1rem;
  margin: 0 0 .4rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  align-items: flex-end;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.control { display: flex; flex-direction: column; gap: .35rem; }
.control > label,
.control > .label,
.control-head > .label {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.control-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.control.grow { flex: 1 1 14rem; }

/* grid variant: fixed tracks, so a control whose readout changes width
   as it is dragged cannot push its neighbours onto another line */
.controls.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.controls.grid .readout { display: block; margin-top: .15rem; }

/* stacked variant: one group per row, ruled off from the next, so a
   long list of choices can use the full width */
.controls.rows { display: block; }
.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.6rem;
  align-items: flex-end;
}
.controls-row + .controls-row {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule-soft);
}
.controls-row.actions { justify-content: space-between; }
.control.full { flex: 1 1 100%; }
.control.full .chips { max-width: none; }
.control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.control-head input[type="search"] { min-width: 12rem; }

/* a button that acts rather than selects, so it does not read as one
   of the chips beside it */
.btn-quiet {
  font-family: var(--sans);
  font-size: .78rem;
  border: 1px solid var(--rule);
  background: var(--wash);
  color: var(--body);
  border-radius: 3px;
  padding: .3rem .7rem;
  cursor: pointer;
  line-height: 1.4;
}
.btn-quiet:hover { border-color: var(--muted); color: var(--ink); }

/* segmented buttons */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--wash-2);
  padding: 2px;
  border-radius: 3px;
}
.seg button {
  font-family: var(--sans);
  font-size: .8rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: .35rem .6rem;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1.2;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 24, 29, .12);
  font-weight: 600;
}
.seg.storms button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 var(--sw, var(--navy)),
              0 1px 2px rgba(20, 24, 29, .12);
}

/* chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 46rem; }
.chip {
  font-family: var(--sans);
  font-size: .76rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  border-radius: 999px;
  padding: .2rem .62rem;
  cursor: pointer;
  line-height: 1.5;
}
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 500;
}
.chip.focal { border-style: dashed; }

select, input[type="search"], input[type="number"] {
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .34rem .5rem;
  max-width: 100%;
}
select:focus, input:focus, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

input[type="range"] {
  width: 100%;
  min-width: 11rem;
  accent-color: var(--navy);
}

.check {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--body);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.readout {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
}
.readout strong { color: var(--ink); font-weight: 600; }

/* figure area */
.figure { width: 100%; }
/* charts draw inside their own viewBox, and the map's background land
   runs well past Florida, so the box clips rather than spills */
.figure svg { display: block; width: 100%; height: auto; overflow: hidden; }
.figure text { font-family: var(--sans); fill: var(--ink); }

.caption {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  margin: .9rem 0 0;
  max-width: 54rem;
}
.caption b { color: var(--ink); font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--body);
  margin: .7rem 0 0;
}
.legend .item { display: inline-flex; align-items: center; gap: .38rem; }
.legend .swatch {
  width: 1.1rem; height: 3px; border-radius: 2px; display: inline-block;
}
.legend .dot {
  width: .62rem; height: .62rem; border-radius: 50%; display: inline-block;
}

/* small data tables inside chart blocks */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .8rem;
  margin-top: 1rem;
}
.dtable th, .dtable td {
  text-align: right;
  padding: .32rem .5rem;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.dtable th:first-child, .dtable td:first-child {
  text-align: left; white-space: normal;
}
.dtable thead th {
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable td.num { font-variant-numeric: tabular-nums; }
/* a table of prose rather than estimates: read it left to right */
.dtable.text th, .dtable.text td {
  text-align: left;
  white-space: normal;
  vertical-align: top;
}

.panelgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
.sidecard {
  background: var(--wash);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: .95rem 1rem;
  font-family: var(--sans);
}
.sidecard h4 {
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
}
.sidecard p { font-size: .84rem; margin: 0 0 .6rem; }
.sidecard .big {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.02em;
}
.sidecard .verdict {
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: .2rem;
}
.sidecard dl { margin: 0; font-size: .82rem; }
.sidecard dt { color: var(--muted); }
.sidecard dd {
  margin: 0 0 .55rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ home page cards */

h3.rule {
  font-size: 1.05rem;
  margin: 3rem 0 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.card:hover { background: var(--wash); }
.card:hover .go { color: var(--navy); }

/* ------------------------------------------------ closing + sources */

.closing {
  border-left: 3px solid var(--wine);
  padding: .1rem 0 .1rem 1.1rem;
  margin: 2.4rem 0 1rem;
}
.closing h3 { font-size: 1.05rem; }
.closing p { margin: 0; }

.sources { font-family: var(--sans); font-size: .88rem; }
.sources table { width: 100%; border-collapse: collapse; }
.sources th, .sources td {
  text-align: left;
  padding: .45rem .6rem .45rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.sources thead th {
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------ methods page */

h4.algo {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 1.4rem 0 .4rem;
}
.pseudo {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--wash);
  border-left: 2px solid var(--navy);
  padding: .8rem 1rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}

/* importance ranking, drawn as bars so the order is readable at a
   glance without another chart module */
.ranks {
  font-family: var(--sans);
  font-size: .8rem;
  margin-top: .8rem;
}
.rank {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .7rem;
  padding: .16rem 0;
}
.rank .bar {
  display: block;
  background: var(--wash-2);
  height: .62rem;
  border-radius: 1px;
}
.rank .bar i { display: block; height: 100%; background: var(--navy); }
.rank .val {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ tooltip */

.tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .09s ease-out;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  border-radius: 3px;
  padding: .5rem .62rem;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--body);
  max-width: 17rem;
  line-height: 1.4;
}
.tooltip.on { opacity: 1; }
.tooltip .t-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .25rem;
}
.tooltip .t-row {
  display: flex;
  justify-content: space-between;
  gap: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.tooltip .t-row span:last-child { color: var(--ink); font-weight: 500; }
.tooltip .t-note { color: var(--muted); margin-top: .3rem; }

/* ------------------------------------------------ loading + errors */

.loading, .errorbox {
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--muted);
  padding: 2rem 0;
}
.errorbox {
  color: var(--wine);
  background: #fdf6f7;
  border: 1px solid #f0dde2;
  border-radius: 3px;
  padding: 1rem 1.1rem;
}
.errorbox code {
  font-family: var(--mono);
  background: #fff;
  padding: .1em .35em;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* ------------------------------------------------ responsive */

@media (max-width: 900px) {
  .panelgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .masthead-inner { padding: 2.8rem 1.1rem 1.9rem; }
  .section { padding: 1.3rem 1.1rem .8rem; }
  .chart-block { padding: .9rem .8rem .8rem; }
  .keyfigs { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .sitenav, .tooltip { display: none; }
  .chart-block { box-shadow: none; break-inside: avoid; }
}