:root{
  --bg:#0B1117;
  --surface:#131C25;
  --raised:#1A2530;
  --sunk:#0E161E;
  --ink:#E7EDF3;
  --ink2:#9CAAB8;
  --ink3:#68788A;
  --line:#22303D;
  --line2:#1A2733;
  --alert:#FF4D3D;
  --alert-bg:#2B1512;
  --caution:#F2A83B;
  --caution-bg:#2A2013;
  --ok:#38C172;
  --ok-bg:#12241B;
  --link:#5AA9FF;
  --extreme:#FF2D1A;
  --severe:#FF4D3D;
  --moderate:#F2A83B;
  --minor:#38C172;
  --brand-facebook:#0866FF;
  --brand-reddit:#FF4500;
  --brand-linkedin:#0A66C2;
  --brand-whatsapp:#25D366;
  --brand-bluesky:#1185FE;
  --r:3px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;letter-spacing:-.015em;line-height:1.2;overflow-wrap:break-word}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:9px 14px;border-radius:var(--r);z-index:99}

.top{position:relative;background:var(--sunk);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:16px;min-height:52px}
/*
 * The masthead lockup: the mark, then the name.
 *
 * The name used to carry the red — "Responders" was var(--alert) — which put
 * nine letters of warning colour on every page including the quiet ones. The
 * mark carries it now, as a single dot, so the header has exactly one red thing
 * in it and red still means what it means everywhere else on the site. The two
 * halves of the name are separated by weight of ink instead, which is quieter
 * and survives being printed.
 */
.brand{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--ink);white-space:nowrap;text-transform:uppercase}
/* The mark inherits --ink from .brand. Inside the name the weight of ink is
   flipped so "Responders" is the half that carries, which is the emphasis the
   red used to give it. */
.brand span{color:var(--ink2)}
.brand i{font-style:normal;color:var(--ink)}
/* The mark takes the ink of whatever it sits in — see views/brand.js — so it
   needs no colour of its own here, only a size that cannot be squeezed by the
   flex row it lives in. */
.mark{flex:none;display:block}
.foot__mark{display:inline-flex;align-items:center;gap:7px}
.nav{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-decoration:none;white-space:nowrap;padding:7px 9px;border-radius:var(--r)}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--raised)}
.top__end{margin-left:auto;display:flex;gap:12px;align-items:center;white-space:nowrap}
.top__end a{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);text-decoration:none;padding:7px 0}

/* --- the phone menu (2026-09-04) ------------------------------------------
 * A <details>: opens before any script runs and keeps its own state. Shown once
 * the bar stops fitting; the strip that scrolled section labels out of sight
 * with nothing to say so is gone below that width. */
.menu{display:none;margin-left:auto}
.menu>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);-webkit-tap-highlight-color:transparent}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::marker{content:''}
.menu>summary:focus-visible{outline:2px solid var(--alert);outline-offset:2px}
.menu[open]>summary{background:var(--raised)}
.menu__glyph{width:18px;height:18px;flex:none;display:block}
.menu__bar{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:transform .18s ease,opacity .12s ease}
.menu[open] .menu__bar--m{opacity:0}
.menu[open] .menu__bar--t{transform:translateY(4.5px) rotate(45deg)}
.menu[open] .menu__bar--b{transform:translateY(-4.5px) rotate(-45deg)}
.menu__panel{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--sunk);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(0,0,0,.18);padding:10px 14px 16px;overscroll-behavior:contain;
  overflow-y:auto;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}
.menu__sections{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:0;padding:0}
.menu__sections a{display:flex;align-items:center;min-height:46px;padding-left:11px;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;border-left:3px solid transparent;border-bottom:1px solid var(--line2)}
.menu__sections a:hover{color:var(--ink)}
.menu__sections a[aria-current]{color:var(--ink);border-left-color:var(--alert)}
.menu__end{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.menu__end a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.menu__end a:hover{background:var(--raised)}

.picker{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--alert);border-radius:var(--r);padding:18px 20px 16px}
.picker h1{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.fields{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap}
.f{display:grid;gap:5px;min-width:0}
/* The ZIP field's width lives here and not in a style attribute, because a
   flex-basis is a height the moment the row becomes a column — see below. */
.f--zip{flex:0 0 180px}
.f>span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.in{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;font:inherit;font-size:14px;background:var(--sunk);color:var(--ink);width:100%;min-width:0}
.in::placeholder{color:var(--ink3)}
.in:focus{outline:2px solid var(--link);outline-offset:1px;border-color:var(--link)}
.go{background:var(--alert);border:1px solid var(--alert);color:#fff;border-radius:var(--r);padding:10px 20px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.go:hover{filter:brightness(1.12)}
.roles{display:flex;gap:4px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line2)}
.roles label{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);cursor:pointer;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px}
.roles label:hover{border-color:var(--ink3)}
.roles input{accent-color:var(--alert)}
.err{margin-top:10px;font-size:12.5px;font-weight:600;color:var(--alert)}

.band{padding:22px 0}
.split{display:grid;grid-template-columns:2fr 1fr;gap:26px;align-items:start}
.split__main{min-width:0}
.split__rail{min-width:0}
.head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.head h1,.head h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.head--page h1{font-size:23px;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.head__more{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--link);text-decoration:none;padding:8px 0 8px 12px;margin-top:-8px;margin-bottom:-8px}
/* A card wraps whatever it is given, a one-word agency included: anywhere,
   which unlike break-word also tells the grid the card can be narrow. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0;overflow-wrap:anywhere}
/*
 * minmax(0,1fr) and not the implicit auto column. An auto column is sized to
 * the widest unbreakable thing in any card, and IPAWS names its senders
 * New_Mexico_Department_of_Homeland_Security_and_Emergency_Management, in one
 * word, in a pill: a phone laid the whole incidents page out 598px wide to hold
 * it and zoomed out to fit. The column is the column, and the card wraps.
 */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/*
 * The wire runs two to a row.
 *
 * One card across the whole main column gave every story the same weight as
 * every other and made a page of fourteen of them read as a list rather than a
 * front. Two columns halve the headline width, which is what makes a headline
 * scannable, and the cards stretch so the rules line up across the row.
 */
.grid--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid--two>.card{display:flex;flex-direction:column}
.grid--two>.card .item{flex:1}
/* The drawn plate is an <img class="thumb"> now — see views/plates.js. */
/* The trail is a row of items with the separator drawn between them, so that
   an item can be dropped on a phone and take its separator with it. */
.crumbs{display:flex;flex-wrap:wrap;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:14px 0 0;overflow-wrap:anywhere}
.crumbs>*+*::before{content:"\203A";margin:0 7px;color:var(--ink3)}
.crumbs a{text-decoration:none;padding:4px 0;margin:-4px 0}
.crumbs a:hover{color:var(--ink2)}

.strip{display:flex;flex-wrap:wrap;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.strip__cell{padding:10px 16px;border-right:1px solid var(--line2);min-width:0}
.strip__cell:last-child{border-right:0}
.strip__cell span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.strip__cell b{display:block;font-size:15px;font-weight:750;font-family:var(--mono)}
.strip__cell--wide{flex:1 1 220px}
.strip__cell--wide b{font-family:var(--sans)}
/* The one place a strip number takes colour: a space weather scale above
   zero is a live degradation of HF and GPS, which is status, not decoration. */
.strip__cell b.hot{color:var(--caution)}

/* A pill wraps rather than widening the page: a long agency name on a phone is
   still that agency's name, on two lines. */
.pill{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;padding:3px 7px;max-width:100%;border:1px solid transparent}
.pill--alert{background:var(--alert-bg);color:var(--alert);border-color:#4A211C}
.pill--caution{background:var(--caution-bg);color:var(--caution);border-color:#4A3A1C}
.pill--ok{background:var(--ok-bg);color:var(--ok);border-color:#1B3A29}
.pill--n{background:var(--raised);color:var(--ink2);border-color:var(--line)}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.tier{display:inline-flex;border-radius:2px;overflow:hidden;font-size:9.5px;font-weight:800;letter-spacing:.1em}
.tier b{padding:3px 8px;color:#0B1117;display:flex;align-items:center;text-transform:uppercase}
.tier span{padding:3px 8px;background:var(--raised);color:var(--ink2);display:flex;align-items:center;text-transform:uppercase}
.tier--extreme b{background:var(--extreme);color:#fff}
.tier--severe b{background:var(--severe);color:#fff}
.tier--moderate b{background:var(--moderate)}
.tier--minor b{background:var(--minor)}
.tier--unknown b{background:var(--ink3);color:#fff}

.item{padding:13px 15px}
.item__top{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.item h3{font-size:15px;font-weight:700;line-height:1.32;min-width:0}
.item h3 a{text-decoration:none}
.item h3 a:hover{color:var(--link)}
.item__where{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.item__note{font-size:13px;color:var(--ink2);line-height:1.5}
.dl{margin:8px 0 0;display:grid;gap:3px;font-size:12.5px}
.dl div{display:flex;gap:8px}
.dl dt{color:var(--ink3);flex:none;min-width:72px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding-top:2px}
.dl dd{margin:0;line-height:1.5;color:var(--ink2)}
.stamp{margin-top:9px;padding-top:8px;border-top:1px solid var(--line2);font-size:11px;font-family:var(--mono);line-height:1.5}
.stamp--current,.stamp--fresh{color:var(--ok)}
.stamp--ageing,.stamp--ok{color:var(--ink3)}
.stamp--stale{color:var(--caution)}
.byline{font-size:11px;font-family:var(--mono);color:var(--ink3);margin-top:8px}
.byline b{color:var(--ink2);font-weight:700}

/* height:auto is not redundant: it stops a width/height attribute on the image
   from surviving as a used height if aspect-ratio is ever overridden. */
.thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--raised);border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line)}
.credit{font-size:10px;font-family:var(--mono);color:var(--ink3);padding:5px 15px 0}

.card--alert{border-left:3px solid var(--alert)}
.card--caution{border-left:3px solid var(--caution)}
.card--ok{border-left:3px solid var(--ok)}

.article__head,.story__head{padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.article__head h1,.story__head h1{font-size:29px;font-weight:800;margin:10px 0 10px;letter-spacing:-.02em}
.article__deck,.story__dek{font-size:17px;line-height:1.55;color:var(--ink2)}
.article__meta,.story__meta{font-size:11.5px;font-family:var(--mono);color:var(--ink3);margin-top:11px;display:flex;gap:14px;flex-wrap:wrap}
.article__meta b,.story__meta b{color:var(--ink2)}
.prose p{font-size:16px;line-height:1.72;margin-bottom:15px;color:#CBD6E1}
.hero{width:100%;border-radius:var(--r);border:1px solid var(--line);margin-bottom:6px}
.story__excerpt{font-size:16.5px;line-height:1.65;color:#CBD6E1;margin:18px 0 22px}
.story__cta{margin:20px 0 12px}
/* The outbound button carries the outlet's name, which is as long as it is;
   "Continue reading at National Weather Service" wraps rather than forcing
   a phone to lay the page out 475px wide. */
.go--wide{display:inline-block;text-decoration:none;text-align:center;padding:14px 26px;font-size:12.5px;white-space:normal;line-height:1.35}
.sources{margin-top:24px;padding-top:15px;border-top:1px solid var(--line)}
.sources h4{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.sources li{font-size:13px;margin-bottom:5px;line-height:1.5;color:var(--ink2)}
.applies{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin:16px 0;font-size:13px;color:var(--ink2)}
.applies b{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.applies a,.sources a{overflow-wrap:anywhere}
.disclaim{font-size:11.5px;color:var(--ink3);line-height:1.55;margin-top:16px;padding-top:12px;border-top:1px solid var(--line2)}

/*
 * What a reader can do with a page: send it on, cite it, keep it.
 *
 * The marks carry their networks' colours and everything around them stays in
 * the board's own greys, so the row reads as seven recognisable icons rather
 * than as seven advertisements.
 *
 * A control the script has not reached — or cannot honestly drive, which is
 * what "More…" is on a desktop browser — is not shown at all. That is what the
 * [hidden] rule is for: a display:inline-flex would otherwise beat the
 * browser's own [hidden] and leave a dead button on the page.
 */
[hidden]{display:none!important}
.share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.share-label{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.share-links{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.share-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--sunk);border:1px solid var(--line);border-radius:2px;color:var(--ink2);text-decoration:none}
.share-link:hover{border-color:var(--ink3);background:var(--raised)}
.share-glyph{display:block;width:16px;height:16px}
/* Wide enough for the longest label each one ever carries, so "Copied" and
   "Saved" swap in without moving anything beside them. */
.share-copy,.cite-button,.bookmark-button,.list-remove{font:inherit;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:var(--sunk);border:1px solid var(--line);border-radius:2px;height:32px;padding:0 12px;cursor:pointer;white-space:nowrap}
.share-copy:hover,.cite-button:hover,.bookmark-button:hover,.list-remove:hover{border-color:var(--ink3);color:var(--ink)}
.share-copy{min-width:104px}
.cite-button{min-width:134px}
.bookmark-button{min-width:186px}
.cite{display:inline-block;margin:10px 8px 0 0}
.bookmark-button{margin-top:10px;vertical-align:top}
.bookmark-button[aria-pressed="true"]{color:var(--ok);border-color:#1B3A29;background:var(--ok-bg)}
.share-copy[data-flash],.cite-button[data-flash],.bookmark-button[data-flash],.list-remove[data-flash]{color:var(--ok);border-color:#1B3A29;background:var(--ok-bg)}
.list-remove{min-width:0;height:26px;margin-top:10px;font-size:9.5px}
.share-link:focus-visible,.share-copy:focus-visible,.cite-button:focus-visible,.bookmark-button:focus-visible,.list-remove:focus-visible{outline:2px solid var(--link);outline-offset:1px}

.signup{border-left:3px solid var(--link)}
.signup h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.signup form{display:grid;gap:8px;margin-top:10px}
.signup .go{width:100%}
.signup .stamp a{display:inline-block;padding:6px 0}

.wire article{padding:11px 0;border-top:1px solid var(--line2)}
.wire article:first-child{border-top:0;padding-top:0}
.wire a{display:block;font-size:14.5px;font-weight:650;text-decoration:none;line-height:1.35}
.wire a:hover{color:var(--link)}
.wire small{display:block;font-size:10.5px;font-family:var(--mono);color:var(--ink3);margin-top:4px}

.foot{background:var(--sunk);border-top:1px solid var(--line);color:var(--ink3);padding:26px 0 0;margin-top:26px}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding-bottom:20px}
.foot h4{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:9px}
.foot a{display:block;font-size:12px;color:var(--ink3);text-decoration:none;padding:3px 0}
.foot a:hover{color:var(--ink)}
.foot__legal{border-top:1px solid var(--line2);padding:14px 0 24px;font-size:11px;line-height:1.6;display:grid;gap:5px}
/* The footer's column links are block; the legal line's are not. */
.foot__legal a{display:inline;padding:0;color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.foot__legal a:hover{color:var(--ink)}
/*
 * The credit at the foot of every page. It goes somewhere, so it is a link, it
 * opens away from the board rather than taking the reader off it, and it is set
 * in the same underline as the rest of the legal line so it reads as one.
 */
.foot__by{color:var(--ink3)}
.foot__by a{font-weight:700;letter-spacing:.04em;color:var(--ink2)}
.foot__by a:hover{color:var(--ink)}

/*
 * Below 1080px the rail drops under the main column and the sections go behind
 * the menu.
 *
 * On one row the nine sections shared the width with the name and the sign-in,
 * and between 520px and 1080px what was left showed three to five of them and
 * cut the rest off without a mark: a tablet held upright saw "Briefing
 * Incidents Alerts" and nothing to say there was more. A scrolling row was
 * tried here first and had the same fault in a quieter way — a reader has to
 * discover the scroll before they can discover the sections. The menu shows
 * all nine at once, and it is the same control at every width, so there is one
 * place the sections live rather than two.
 *
 * It is a <details>, which means it opens with the browser's own machinery
 * before any script runs and keeps its own state. A menu that needs JavaScript
 * is a menu that is missing on exactly the connection this site is read on.
 */
@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:22px}
  .nav{display:none}
  .menu{display:block}
  /* Three columns of three: every section on one screen without a scroll. */
  .menu__sections{grid-template-columns:repeat(3,minmax(0,1fr))}
  /*
   * Search and Sign in are still on the bar at this width, so the panel does
   * not repeat them. Below 520px the bar gives them up and the panel takes
   * them back — see there.
   */
  .menu__end{display:none}
  /* A row of 11px labels is a small target; the padding is the target. */
  .top__end a{padding:10px 0}
}
@media (max-width:820px){ .grid--two{grid-template-columns:1fr;gap:10px} }
@media (max-width:780px){
  .picker{padding:16px 15px 14px}
  .picker h1{font-size:18px}
  .fields{flex-direction:column;align-items:stretch}
  .f,.go{width:100%}
  /*
   * The column is the reason the ZIP field's basis is a class and not a style
   * attribute. flex-basis follows the main axis, so the 180px that was the
   * field's width on a desk became its height on a phone: a label with 130px
   * of nothing between the word ZIP and the box, and the box stretched to fill
   * the rest, at the top of the first page a reader sees.
   */
  .f--zip{flex:0 0 auto}
  .roles label{padding:9px 12px}
  .strip{border-bottom:0}
  .strip__cell{flex:1 0 46%;border-right:0;border-bottom:1px solid var(--line)}
  /* The area is the one cell with words in it; it takes a row rather than
     breaking "Colorado · Rocky Mountains" across three lines beside a number. */
  .strip__cell--wide{flex:1 0 100%}
  .band{padding:18px 0}
  .article__head h1,.story__head h1{font-size:23px}
  .go--wide{display:block;width:100%;padding:14px 16px}
  .head__more{font-size:11px}
  .foot a{padding:8px 0;font-size:13px}
}
/*
 * Sixteen pixels is the size below which an iPhone zooms the page into a field
 * on focus and leaves it there. So on anything with a touch screen, and on
 * anything narrow enough to be one, a field is set at sixteen.
 */
@media (max-width:780px),(pointer:coarse){
  /*
   * Every text field, by element and not by class, and with the one
   * !important in this sheet. The rule was .in{font-size:16px} and the
   * contact page shipped its own .cf-in at 15px a day later, which is what
   * a class-list rule always comes to: a form that nobody remembered to add.
   * A field's own class may set any size it likes on a desk; on a touch screen
   * this one wins, so no form written after this needs to know about it.
   */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
}
/*
 * The phone.
 *
 * The section row was the same row as above from the start; what is left here
 * is the narrower gutter, the headline and the place name giving up sharing a
 * line, the definition lists stacking, and the trail dropping its last item,
 * which on a phone is the headline printed again in capitals directly above
 * the headline.
 */
@media (max-width:520px){
  .wrap{padding:0 14px}
  .top__in{gap:12px;min-height:56px}
  .brand{min-width:0}
  /*
   * The bar gives up Search and Sign in here and the panel takes them back, so
   * the phone's masthead is a name and one control and nothing else.
   */
  .top__end{display:none}
  .menu__end{display:flex}
  .menu__sections{grid-template-columns:1fr 1fr}
  .head__more,.pager a,.foot a,.story__cta a,.go{min-height:44px;display:inline-flex;align-items:center}
  .go--wide,.story__cta a{white-space:normal;text-align:center;line-height:1.3}
  img,video,iframe{max-width:100%}
  .in,.go{min-height:44px}
  /*
   * The headline and the place stop sharing a line. The place is nowrap, so on
   * a phone it took whatever width it wanted and left the headline a column two
   * words across.
   */
  .item__top{flex-wrap:wrap;gap:4px 10px}
  .item__where{margin-left:0;width:100%;white-space:normal}
  .dl div{flex-direction:column;gap:1px}
  .dl dt{min-width:0}
  .prose p{font-size:15.5px}
  .story__excerpt{font-size:15.5px}
  .crumbs>span:last-child{display:none}
  /* Four columns stacked one per row is four screens of footer. */
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .foot__legal{font-size:12px}
  .share-link{width:40px;height:40px}
  .share-copy,.cite-button,.bookmark-button{height:40px}
}
/*
 * 320px, which is still a phone people carry. The lockup and both end links
 * fit on one line here rather than wrapping the row — the header is the first
 * thing on the page and it should not be three things — and the seven share
 * marks stay on one line rather than sending the seventh down on its own.
 */
@media (max-width:380px){
  .brand{font-size:12.5px;gap:7px}
  .brand .mark{width:22px;height:22px}
  .menu__sections{grid-template-columns:1fr}
  .share{gap:8px}
  .share-links{gap:5px}
  .share-link{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* contact — fleet standard */
.cf{--cf-accent:var(--link,#5AA9FF);--cf-on-accent:var(--bg,#0B1117);--cf-ink:var(--ink,#E7EDF3);--cf-ink2:var(--ink2,#9CAAB8);--cf-ink3:var(--ink3,#68788A);
  --cf-line:var(--line,#22303D);--cf-surface:var(--surface,#131C25);--cf-field:var(--sunk,#0E161E);--cf-r:var(--r,3px);--cf-bad:var(--alert,#FF4D3D);--cf-go:var(--alert,#FF4D3D);
  max-width:680px;display:grid;gap:26px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-step{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--cf-ink);margin:0 0 12px;flex-wrap:wrap}
.cf-step span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cf-accent);color:var(--cf-on-accent);font-size:13px;font-family:var(--mono,monospace);flex:none;align-self:center}
.cf-step em{font-style:normal;font-weight:400;font-size:13px;letter-spacing:0;color:var(--cf-ink3)}
.cf-topics{border:0;padding:0;margin:0;min-width:0}
.cf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cf-tile{position:relative;display:block;cursor:pointer;min-width:0}
.cf-tile input{position:absolute;opacity:0;width:1px;height:1px}
.cf-tile__body{display:grid;gap:3px;padding:12px 14px;min-height:64px;border:1px solid var(--cf-line);border-radius:var(--cf-r);background:var(--cf-surface);transition:border-color .15s,box-shadow .15s}
.cf-tile__body strong{font-size:14px;color:var(--cf-ink)}
.cf-tile__body small{font-size:12.5px;line-height:1.4;color:var(--cf-ink3)}
.cf-tile:hover .cf-tile__body{border-color:var(--cf-accent)}
.cf-tile input:checked+.cf-tile__body{border-color:var(--cf-accent);box-shadow:0 0 0 1px var(--cf-accent) inset}
.cf-tile input:focus-visible+.cf-tile__body{outline:2px solid var(--cf-accent);outline-offset:2px}
.cf-field{display:grid;gap:5px;min-width:0}
.cf-field label,.cf-reply legend{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cf-ink2)}
.cf-opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--cf-ink3);font-size:12px}
.cf-why{font-size:12.5px;line-height:1.45;color:var(--cf-ink3);margin:0}
.cf-in{width:100%;min-width:0;border:1px solid var(--cf-line);border-radius:var(--cf-r);padding:11px 12px;font:inherit;font-size:15px;background:var(--cf-field);color:var(--cf-ink);min-height:44px}
.cf-in::placeholder{color:var(--cf-ink3)}
.cf-in:focus{outline:2px solid var(--cf-accent);outline-offset:1px;border-color:var(--cf-accent)}
.cf-in[aria-invalid=true]{border-color:var(--cf-bad)}
textarea.cf-in{resize:vertical;min-height:150px;line-height:1.5}
.cf-pair,.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-count{font-size:12px;font-family:var(--mono,monospace);color:var(--cf-ink3);margin:0;text-align:right}
.cf-count.is-low{color:var(--cf-bad)}
.cf-error{font-size:13px;color:var(--cf-bad);margin:0;font-weight:700}
.cf-error--form{padding:10px 12px;border:1px solid var(--cf-bad);border-radius:var(--cf-r);background:var(--alert-bg,#2B1512)}
.cf-when{display:none;padding:18px;border:1px dashed var(--cf-line);border-radius:var(--cf-r)}
.cf-when[data-open]{display:block}
@supports not selector(:has(*)){.cf-when{display:block}}
.cf:has([name=topic][value="correction"]:checked) .cf-when[data-when="correction"]{display:block}
.cf:has([name=topic][value="tip"]:checked) .cf-when[data-when="tip"]{display:block}
.cf:has([name=topic][value="liaison"]:checked) .cf-when[data-when="liaison"]{display:block}
.cf:has([name=topic][value="data"]:checked) .cf-when[data-when="data"]{display:block}
.cf:has([name=topic][value="press"]:checked) .cf-when[data-when="press"]{display:block}
.cf:has([name=topic][value="advertising"]:checked) .cf-when[data-when="advertising"]{display:block}
.cf:has([name=topic][value="partnership"]:checked) .cf-when[data-when="partnership"]{display:block}
.cf:has([name=topic][value="legal"]:checked) .cf-when[data-when="legal"]{display:block}
.cf-after{display:grid;gap:22px}
.cf-reply{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.cf-radios{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.cf-radio,.cf-check{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--cf-line);border-radius:var(--cf-r);cursor:pointer;background:var(--cf-surface);min-height:44px}
.cf-radio input,.cf-check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--cf-accent)}
.cf-radio span,.cf-check span{display:grid;gap:2px;font-size:14px;color:var(--cf-ink)}
.cf-radio small,.cf-check small{font-size:12.5px;color:var(--cf-ink3);line-height:1.4}
.cf-radio:has(input:checked),.cf-check:has(input:checked){border-color:var(--cf-accent)}
.cf-phone{display:none;margin-top:4px}
.cf:has([name=replyBy][value=phone]:checked) .cf-phone{display:block}
@supports not selector(:has(*)){.cf-phone{display:block}}
.cf-final{display:grid;gap:14px}
.cf-actions{display:grid;gap:10px}
.cf-go{background:var(--cf-go);border:1px solid var(--cf-go);color:#fff;border-radius:var(--cf-r);padding:13px 26px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-height:48px;justify-self:start;white-space:nowrap}
.cf-go:hover{filter:brightness(1.12)}
.cf-go:focus-visible{outline:2px solid var(--cf-accent);outline-offset:2px}
.cf-fine{font-size:12.5px;line-height:1.5;color:var(--cf-ink3);margin:0}
.cf-aside{display:grid;gap:10px;align-content:start;font-size:13.5px;line-height:1.55;color:var(--ink2,#9CAAB8);background:var(--surface,#131C25);border:1px solid var(--line,#22303D);border-radius:var(--r,3px);padding:13px 15px;margin-bottom:18px}
.cf-aside h2{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3,#68788A);margin:6px 0 0}
.cf-aside h2:first-child{margin-top:0}
.cf-aside p{margin:0}
.cf-expect{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cf-expect li{display:grid;gap:1px;padding-left:12px;border-left:2px solid var(--link,#5AA9FF)}
.cf-expect strong{font-size:13px;color:var(--ink,#E7EDF3)}
.cf-expect span{font-size:12.5px;color:var(--ink3,#68788A)}
.cf-done{max-width:640px;background:var(--surface,#131C25);border:1px solid var(--line,#22303D);border-left:4px solid var(--link,#5AA9FF);border-radius:var(--r,3px);padding:22px 24px;display:grid;gap:8px}
.cf-done__kicker{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3,#68788A);margin:0}
.cf-done h2{margin:0;font-size:22px}
.cf-done p{margin:0;font-size:15px;line-height:1.55}
.cf-done__ref code{font-family:var(--mono,monospace);font-size:14px;padding:2px 6px;border:1px solid var(--line,#22303D);border-radius:var(--r,3px);background:var(--sunk,#0E161E)}
.cf-done__links a{color:var(--link,#5AA9FF)}
@media (max-width:600px){.cf-pair,.cf-grid,.cf-radios{grid-template-columns:1fr}.cf-tiles{grid-template-columns:1fr 1fr}.cf-go{width:100%;justify-self:stretch}}
@media (max-width:400px){.cf-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cf-tile__body{transition:none}}