/* ============================================================================
   The Forecast Post — the newsprint cut of the Forecast Network sign system.

   Every other site in the network owns a colour. Forecast Florida is citrus,
   Colorado is columbine, Illinois is blazing star, and the README records that
   the accent space is now closed — there is no corner left to give a new site.

   That is the argument for this one having none. The Post is newsprint: warm
   paper, black ink, and the network's accents borrowed one at a time as
   DATELINES, so a front page reads as a strip of every site that filed to it.
   The only site with no colour of its own, wearing everyone else's.

   The masthead device is the one piece of MUTCD furniture nobody had claimed:
   the milepost. Small, green, a number and nothing else — not a headline, a
   statement of position on a road that keeps going. Which is the paper.

   Type follows the network (Overpass, Overpass Mono) with EB Garamond italic —
   already in common.json's font stack, barely used anywhere — carrying every
   standfirst. That italic is the entire editorial voice in one typeface choice:
   the Substack habit where the subtitle, not the title, is the story.
   ========================================================================== */
:root{
  /* newsprint, not white. #f7f5ef is the paper the network's states already use */
  --paper:#f7f5ef; --paper2:#efece3; --card:#fffefb;
  --ink:#16150f; --ink2:#3d3a30; --mut:#6f6a5c;
  --rule:#d8d3c4; --rule2:#c4bdab;

  /* the Interstate roles, unchanged, so the Post reads as part of the set */
  --sign:#04663d; --sign-dk:#013d26; --sign-sub:#bdebcf;
  --blue:#0a5ca8; --navy:#103e7e;
  --brown:#6b4b2f;
  --red:#b0242e; --red-dk:#7d1620;

  --maxw:1180px;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Overpass',Helvetica,Arial,sans-serif;
  --mono:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  /* the faint tooth of newsprint: one repeating gradient, no image request */
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.013) 0 1px,transparent 1px 3px)}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--sign)}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{text-align:right}
.note{font-size:12.5px;color:var(--mut);font-family:var(--mono);line-height:1.5}

/* ── the rule strip: edition, clock, where you are ───────────────────────── */
.strip{background:var(--ink);color:#d7d3c7;border-bottom:3px solid var(--sign);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em}
.strip .wrap{display:flex;align-items:center;gap:18px;height:36px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none}
.strip .wrap::-webkit-scrollbar{display:none}
.strip a{color:#d7d3c7;white-space:nowrap}
.strip a:hover{color:var(--sign-sub)}
.strip .sp{flex:1 0 auto}
.strip .live{display:inline-flex;align-items:center;gap:6px;color:#f2efe6;white-space:nowrap}
.strip .dot{width:7px;height:7px;border-radius:50%;background:#5ad18e;
  animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(90,209,142,.55)}
  70%{box-shadow:0 0 0 7px rgba(90,209,142,0)}100%{box-shadow:0 0 0 0 rgba(90,209,142,0)}}

/* ── masthead ────────────────────────────────────────────────────────────── */
.mast{padding:26px 0 14px;border-bottom:3px double var(--ink)}
.mast .row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.mast .title{flex:1 1 auto;min-width:0}
.mast h1{margin:0;font-family:var(--serif);font-weight:700;font-style:normal;
  font-size:clamp(38px,8.2vw,80px);line-height:.92;letter-spacing:-.018em}
.mast h1 .the{display:block;font-size:.3em;letter-spacing:.34em;font-style:italic;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.34em;font-weight:400}
.mast .tag{margin:9px 0 0;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}

/* the milepost marker — a real MUTCD D10-1: green blank, white border, numerals */
.milepost{flex:none;width:62px;background:var(--sign);color:#fff;border-radius:4px;
  padding:7px 6px 9px;text-align:center;
  box-shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 3.5px #fff,0 6px 18px rgba(0,0,0,.2)}
.milepost .lbl{font-family:var(--sans);font-size:8.5px;font-weight:800;letter-spacing:.13em;
  line-height:1;color:var(--sign-sub);text-transform:uppercase}
/* A real milepost blank widens for a longer number rather than letting the
   numerals run off it, so the digit count sets the size. Past MP 999 a fixed
   27px overflowed the 62px blank by most of a digit. */
.milepost .n{font-family:var(--sans);font-weight:900;font-size:27px;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.milepost .n.d4{font-size:22px;letter-spacing:-.045em}
.milepost .n.d5{font-size:18px;letter-spacing:-.05em}

/* ── desk navigation ─────────────────────────────────────────────────────── */
.desks{border-bottom:1px solid var(--rule);background:var(--paper)}
.desks .wrap{display:flex;gap:0;flex-wrap:wrap;align-items:stretch}
.desks a{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);padding:11px 14px;
  border-right:1px solid var(--rule)}
.desks a:first-child{padding-left:0;border-left:none}
.desks a:hover,.desks a.on{background:var(--ink);color:var(--paper)}

/* ── the front page grid ─────────────────────────────────────────────────── */
.front{display:grid;grid-template-columns:2fr 1fr;gap:0 34px;padding:26px 0 0}
.front>.col+.col{border-left:1px solid var(--rule);padding-left:34px}
@media(max-width:900px){
  .front{grid-template-columns:1fr;gap:0}
  .front>.col+.col{border-left:none;padding-left:0;margin-top:28px;
    border-top:3px double var(--ink);padding-top:24px}
}

/* ── a story, as it appears on the front page ────────────────────────────── */
.story{padding:0 0 24px;margin:0 0 24px;border-bottom:1px solid var(--rule)}
.story:last-child{border-bottom:none;margin-bottom:0}
.story .kicker{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
/* The dateline wears the filing site's accent — the network, as a colour strip.
   These three are deliberately NOT scoped to .story: the article page uses the
   same kicker, and scoping them here once left every /mp/ page with an unstyled
   dateline. */
.dl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);padding:3px 8px;border-radius:3px;
  background:var(--accent,var(--rule2));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.desk{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut)}
.story h2{margin:0;font-family:var(--serif);font-weight:700;line-height:1.1;
  letter-spacing:-.012em;font-size:clamp(23px,3.1vw,35px)}
.story h2 a{color:var(--ink)}
.story h2 a:hover{color:var(--sign)}
.story .stand{margin:9px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(16px,1.9vw,20px);line-height:1.42;color:var(--ink2)}
.mp{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--mut);
  letter-spacing:.08em}

/* lead story: bigger, and the only one that gets the double rule */
.story.lead{border-bottom:3px double var(--ink);padding-bottom:26px}
.story.lead h2{font-size:clamp(30px,5.4vw,52px);line-height:1.04}
.story.lead .stand{font-size:clamp(17px,2.3vw,23px)}

/* a brief: the right-hand column's compact form */
.brief{padding:0 0 15px;margin:0 0 15px;border-bottom:1px dotted var(--rule2)}
.brief:last-child{border-bottom:none}
.brief h3{margin:0;font-family:var(--serif);font-weight:700;font-size:18.5px;
  line-height:1.22}
.brief h3 a{color:var(--ink)}
.brief .stand{margin:5px 0 0;font-family:var(--serif);font-style:italic;
  font-size:14.5px;line-height:1.4;color:var(--ink2)}

/* ── section heading ─────────────────────────────────────────────────────── */
.sec{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.sec h2{margin:0;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.sec .ln{flex:1;height:0;border-top:2px dashed var(--rule2)}

/* ── tables ──────────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.tbl th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);text-align:left;padding:7px 9px;
  border-bottom:2px solid var(--ink)}
.tbl th.num{text-align:right}
.tbl td{padding:7px 9px;border-bottom:1px solid var(--rule)}
.tbl tbody tr:nth-child(even){background:rgba(0,0,0,.018)}
.tbl-scroll{overflow-x:auto}

/* ── the article page ────────────────────────────────────────────────────── */
.art{max-width:720px;margin:0 auto;padding:30px 0 10px}
.art .kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.art h1{margin:0;font-family:var(--serif);font-weight:700;line-height:1.07;
  letter-spacing:-.015em;font-size:clamp(29px,5.2vw,48px)}
.art .stand{margin:13px 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,2.3vw,22px);line-height:1.42;color:var(--ink2)}
.art .byline{margin:18px 0 0;padding:11px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;
  color:var(--mut);letter-spacing:.05em;display:flex;gap:14px;flex-wrap:wrap}
.art .body{margin:24px 0 0;font-family:var(--serif);font-size:18.5px;line-height:1.62}
.art .body p{margin:0 0 1.05em}
.art .body .mono{font-family:var(--mono);font-size:.88em;font-weight:600}
.art .body .note{font-family:var(--mono);font-size:12.5px;color:var(--mut);
  border-left:3px solid var(--rule2);padding:3px 0 3px 13px;margin:22px 0 0}
.art .body .tbl{font-family:var(--sans)}

/* ── imported archive markup ───────────────────────────────────────────────
   The Substack bodies arrive with their own structure — figures with captions,
   subheads, pull quotes, embedded polls and buttons. None of it is styled by
   the rest of this sheet, and unstyled it reads as a wall. These rules put it
   into the paper's own type without rewriting anyone's HTML.

   Weather maps are wide and detailed, so a figure is allowed to break out past
   the 720px measure on a big screen: the picture is frequently the argument. */
.art .body figure{margin:26px 0;padding:0}
.art .body figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);
  border-radius:4px;background:var(--card)}
.art .body img{height:auto;border-radius:4px}
.art .body figcaption,.art .body .image-caption{margin-top:8px;font-family:var(--mono);
  font-size:11.5px;line-height:1.5;color:var(--mut);text-align:left}
.art .body figcaption a,.art .body .image-caption a{color:var(--mut);
  text-decoration:underline}
@media(min-width:1080px){
  .art .body figure{width:min(96vw,980px);margin-left:calc(360px - min(48vw,490px))}
}
.art .body h1,.art .body h2,.art .body h3,.art .body h4{font-family:var(--serif);
  font-weight:700;line-height:1.18;letter-spacing:-.008em;margin:30px 0 10px}
.art .body h1,.art .body h2{font-size:27px;padding-bottom:6px;
  border-bottom:1px solid var(--rule)}
.art .body h3{font-size:21px}
.art .body h4{font-size:17px;font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.art .body ul,.art .body ol{margin:0 0 1.05em;padding-left:1.35em}
.art .body li{margin:0 0 .4em}
.art .body blockquote{margin:24px 0;padding:2px 0 2px 18px;
  border-left:3px solid var(--sign);font-style:italic;color:var(--ink2)}
.art .body hr{border:none;border-top:1px solid var(--rule);margin:30px 0}
.art .body a{text-decoration:underline;text-underline-offset:2px}
/* Substack's own furniture, kept out of the way rather than deleted */
.art .body .subscription-widget-wrap,.art .body .button-wrapper,
.art .body .poll-embed,.art .body .subscribe-widget{margin:24px 0;padding:14px 16px;
  border:1px dashed var(--rule2);border-radius:6px;background:var(--paper2);
  font-family:var(--mono);font-size:12.5px;color:var(--mut)}
.art .body .subscription-widget-wrap *,.art .body .button-wrapper *{font-size:inherit}
.art .body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;
  font-family:var(--sans)}
.art .body table td,.art .body table th{padding:6px 9px;border-bottom:1px solid var(--rule)}
.art .body pre{overflow-x:auto;background:var(--paper2);padding:12px 14px;
  border-radius:6px;font-family:var(--mono);font-size:12.5px}

/* ── the claims block: the house style, made visible ─────────────────────── */
.claims{margin:28px 0 0;border:1px solid var(--rule2);border-radius:6px;
  background:var(--card)}
.claims .hd{padding:10px 14px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.claims table{width:100%;border-collapse:collapse;font-size:13.5px}
.claims td{padding:9px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.claims tr:last-child td{border-bottom:none}
.claims .q{font-family:var(--sans);color:var(--ink2)}
.claims .v{font-family:var(--mono);font-weight:700;white-space:nowrap;text-align:right}
.claims .ctx{font-family:var(--mono);font-size:11.5px;color:var(--mut);white-space:nowrap}

/* ── provenance: what was known, and when ───────────────────────────────── */
.prov{margin:22px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--mut);
  background:var(--paper2);border:1px solid var(--rule);border-radius:6px;padding:13px 15px}
.prov dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}
.prov dt{font-weight:700;color:var(--ink2);letter-spacing:.04em}
.prov dd{margin:0;word-break:break-word}
.prov .sha{font-size:10.5px}

/* ── the climate context strip on an archived post ──────────────────────── */
.ctx{margin:22px 0 0;border:1px solid var(--rule2);border-left:3px solid var(--brown);
  border-radius:6px;background:var(--card);overflow:hidden}
.ctx .hd{padding:8px 15px;border-bottom:1px solid var(--rule);font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brown)}
.ctx .bd{padding:13px 15px 14px}
.ctx p{margin:0 0 7px;font-family:var(--serif);font-size:16px;line-height:1.45}
.ctx p:last-child{margin-bottom:0}
.ctx .src{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--mut)}

/* ── the paywall notice ─────────────────────────────────────────────────── */
.gate{margin:30px 0 0;border:2px solid var(--sign);border-radius:8px;overflow:hidden;
  background:var(--card)}
.gate .hd{background:var(--sign);color:#fff;padding:11px 16px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gate .bd{padding:18px 18px 20px}
.gate p{margin:0 0 12px;font-family:var(--serif);font-size:16.5px;line-height:1.5}
.gate .cta{display:inline-block;background:var(--sign);color:#fff;font-family:var(--mono);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 18px;border-radius:6px}
.gate .cta:hover{background:var(--sign-dk);color:#fff}

/* ── the network strip: every site, wearing its own accent ──────────────── */
.net{margin:34px 0 0;padding:26px 0 0;border-top:3px double var(--ink)}
.netgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:9px}
.netgrid a{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--card);
  border:1px solid var(--rule);border-radius:6px;font-size:13.5px;color:var(--ink)}
.netgrid a:hover{border-color:var(--ink);background:#fff}
.netgrid .sw{width:11px;height:26px;border-radius:2px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.netgrid .nm{font-weight:600;line-height:1.2;min-width:0}
.netgrid .nk{display:block;font-family:var(--mono);font-size:10px;color:var(--mut);
  font-weight:400;letter-spacing:.03em}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{margin:42px 0 0;border-top:3px double var(--ink);padding:22px 0 46px;
  font-family:var(--mono);font-size:11.5px;color:var(--mut);line-height:1.75}
footer a{color:var(--ink2)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
footer h4{margin:0 0 7px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
footer ul{margin:0;padding:0;list-style:none}

@media print{
  .strip,.desks,.net,footer,.gate{display:none}
  body{background:#fff;background-image:none}
  .front{grid-template-columns:2fr 1fr}
}