@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-condensed-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/roboto-condensed-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-condensed-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-condensed-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/roboto-condensed-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/roboto-condensed-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-condensed-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/roboto-condensed-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* The Daily Kiwi: old-school broadsheet, set in the same faces as our videos. */
:root {
  /* Black by default, always, matching the videos: not left to the visitor's system preference. */
  --paper: #16150f;
  --paper-2: #201e17;
  --ink: #efe8d6;
  --ink-soft: #b8b09c;
  --rule: #efe8d6;
  --hair: #4b4639;
  --red: #c8231c;
  --amber: #f5b301;
  --mark: rgba(245, 179, 1, .62);
  --head: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-theme="light"] {
  --paper: #f3eee2; --paper-2: #ebe4d3; --ink: #16140f; --ink-soft: #4a463c;
  --rule: #16140f; --hair: #b9b09a; --mark: rgba(245, 179, 1, .55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 18px/1.55 var(--body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
mark { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%); color: inherit; padding: 0 .08em; }
img { max-width: 100%; display: block; }

.paper { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; }

/* dateline strip */
.strip {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 0 10px; border-bottom: 1px solid var(--rule);
}
/* personalised local weather badge, replacing "Est. 2026" once a reader shares their location */
.wx-slot a[data-wx-trigger] { color: var(--ink-soft); border-bottom: 1px dotted var(--ink-soft); text-decoration: none; }
.wx-slot a[data-wx-trigger]:hover { color: var(--red); border-color: var(--red); }
.wx-badge { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.wx-badge:hover { color: var(--red); text-decoration: none; }
.wx-badge svg { width: 14px; height: 14px; flex: none; }
.wx-badge b { font-weight: 700; }

/* masthead */
.masthead { display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; gap: 16px; padding: 14px 0 10px; }
.masthead .title {
  font: 400 clamp(56px, 10vw, 128px)/.9 var(--head); text-transform: uppercase; text-align: center;
  letter-spacing: .01em; display: flex; flex-direction: column; align-items: center;
}
.masthead .title:hover { text-decoration: none; }
.masthead .the { font: 600 14px/1 var(--mono); letter-spacing: .5em; margin-bottom: 6px; padding-left: .5em; }
.ear { border: 1px solid var(--rule); padding: 10px; min-height: 90px; font: 500 12px/1.4 var(--mono); }
.ear-r { display: flex; flex-direction: column; gap: 2px; justify-content: center; text-transform: uppercase; letter-spacing: .06em; }
.ear-r b { font: 400 20px/1 var(--head); letter-spacing: .02em; margin-bottom: 4px; }
.ear-logo { border: 0; padding: 0; display: flex; align-items: center; justify-content: flex-start; }
.ear-logo img { height: 118px; width: auto; }
.ear-logo:hover { text-decoration: none; }

nav.sections {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 26px;
  border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule);
  box-shadow: 0 -7px 0 -6px var(--rule) inset;
  padding: 11px 0 12px; margin-bottom: 18px;
  font: 700 14px/1 var(--body); text-transform: uppercase; letter-spacing: .14em;
}

/* breaking news strip, only shown while a big story is unfolding */
.breaking { display: flex; align-items: stretch; border: 2px solid var(--red); margin: -8px 0 18px; background: var(--paper); }
/* display:flex above would otherwise beat the browser's own [hidden] rule, and the close button would do nothing */
.breaking[hidden] { display: none; }
.bk-close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--ink-soft); font: 400 26px/1 var(--body);
  padding: 8px 12px 10px; cursor: pointer; }
.bk-close:hover { color: var(--red); }
.bk-label { background: var(--red); color: #fff; font: 400 20px/1 var(--head); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex: none; }
.bk-label i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: bkpulse 1.2s ease-in-out infinite; }
@keyframes bkpulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .bk-label i { animation: none; } }
.breaking ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.breaking li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px; }
.breaking li + li { border-top: 1px solid var(--hair); }
.breaking li a { font: 700 17px/1.3 var(--body); }
.bk-where { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: 3px 5px 2px; }
.bk-meta { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

/* kicker, headlines, bylines */
.kicker {
  display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); background: var(--red); padding: 5px 7px 4px; margin-bottom: 10px;
}
.sponsored-k { background: var(--ink); }
h1, h2, h3 { font-family: var(--head); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; margin: 0; }
.lead h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: .98; }
.story h1, .plain h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.dek { font: 500 italic 21px/1.35 var(--body); color: var(--ink-soft); margin: 12px 0 10px; }
.byline, .meta { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.byline { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 8px 0; margin: 6px 0 16px; }

/* front page grid with column rules */
.front { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 28px; }
.front .lead { padding-right: 28px; border-right: 1px solid var(--rule); }
.cols { column-count: 2; column-gap: 28px; column-rule: 1px solid var(--hair); }
.cols p, .body p { margin: 0 0 .9em; text-align: justify; hyphens: auto; }
/* a long web address or word in a story must wrap, not push the page sideways on a phone */
.body, .cols, .teaser, .lead, .dek, .latest, .breaking li, .sourcebox, .facts, .unconfirmed { overflow-wrap: anywhere; }
.paper { overflow-x: clip; }
.dropcap > p:first-of-type::first-letter {
  font: 400 4.1em/.82 var(--head); float: left; padding: .06em .08em 0 0; color: var(--red);
}
.more { display: inline-block; margin-top: 4px; font: 700 14px/1 var(--body); text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid var(--red); padding-bottom: 3px; }

.rail { display: flex; flex-direction: column; gap: 22px; }
.rail > * { margin: 0; }
.question { border: 3px double var(--rule); padding: 16px 16px 14px; background: var(--paper-2); }
.question b { font: 400 22px/1 var(--head); text-transform: uppercase; display: block; margin-bottom: 8px; }
.question p { font: 700 19px/1.35 var(--body); margin: 0 0 10px; }
.question a { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.question.big { margin: 28px 0; }
.question.big p { font-size: 22px; }

.latest h4, .follow h4, .rule-head {
  font: 400 22px/1 var(--head); text-transform: uppercase; margin: 0 0 8px;
  border-bottom: 3px solid var(--rule); padding-bottom: 6px;
}
.latest ol { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.latest li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; padding: 9px 0; border-bottom: 1px solid var(--hair); font: 700 15.5px/1.3 var(--body); }
.latest li::before { content: counter(n); font: 400 22px/1 var(--head); color: var(--red); grid-row: span 2; }
.latest li span { font: 500 11px/1.6 var(--mono); color: var(--ink-soft); letter-spacing: .06em; }

/* rows of teasers */
.row { border-top: 4px solid var(--rule); margin-top: 26px; padding-top: 18px; }
.row.three, .row.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* equal-width columns (gap, not padding) so every photo is the same size and every label and headline
   sits level across the row; the dividing rules are drawn in the gaps */
.row.three, .row.grid { column-gap: 44px; }
.row.three > .teaser, .row.grid > .teaser { position: relative; padding: 0; border-left: 0; }
.row.three > .teaser + .teaser::before, .row.grid > .teaser:not(:nth-child(3n+1))::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -22px; border-left: 1px solid var(--hair); }
.row.grid { row-gap: 30px; }
.teaser h3 { font-size: 27px; line-height: 1.02; margin-bottom: 8px; }
.teaser p { margin: 0 0 8px; font-size: 16.5px; color: var(--ink-soft); }
.teaser.compact { display: grid; grid-template-columns: 150px 1fr; gap: 0 18px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.teaser.compact .kicker { grid-column: 2; align-self: start; justify-self: start; }
.teaser.compact > figure { grid-column: 1; grid-row: 1 / span 4; margin: 0; align-self: start; }
.teaser.compact > figure svg { aspect-ratio: 3 / 2; }
.teaser.compact h3 { font-size: 23px; }
.row.lower { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 28px; }
.row.lower .more-news { padding-right: 28px; border-right: 1px solid var(--rule); }

/* photos in newsprint, engraved patterns when there is no photo */
figure { margin: 0 0 16px; }
.photo img { width: 100%; filter: grayscale(1) contrast(1.12) brightness(1.02); transition: filter .4s; }
.photo:hover img { filter: none; }
.photo { position: relative; }
.photo::after { content: ""; position: absolute; inset: 0 0 auto 0; bottom: 22px; pointer-events: none; mix-blend-mode: multiply; opacity: .16;
  background: radial-gradient(circle, #000 32%, transparent 34%) 0 0 / 4px 4px; }
/* object-position: top, not center. A portrait photo (a person, phone-shot vertical) is almost always
   tallest relative to this wide/thumb box, so a plain center crop cuts into the top of a photo the most,
   and the top is exactly where a person's head is. Anchoring to the top instead means we crop from the
   bottom (jacket, background, legroom) first, so a headshot never loses its subject's head to the crop.
   Every photo, portrait or landscape, is cropped the same way into the same size box - a headshot that
   was instead shown whole and uncropped on its own backdrop colour looked visibly smaller and weaker
   than the photos next to it, even though the box itself was the same size, so every photo now fills
   its box edge to edge like every other one. */
.photo.wide img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; }
.photo.thumb img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; }
/* same 3:2 box and the same 1px top and bottom edge as an engraving, so a row mixing photos and
   engravings keeps every label and headline on the same line */
.photo.thumb { border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.photo.thumb img, .engraving.thumb svg { width: 100%; height: auto; }
figcaption { font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-soft); padding-top: 5px; text-transform: uppercase; }
.engraving { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-2); }
/* Same box shape as the real photo it stands in for (.photo.wide/.thumb above), so a story's layout
   doesn't shift depending on whether it happens to have a free photo or falls back to a drawn one. */
.engraving svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.engraving.thumb svg { aspect-ratio: 3 / 2; }
.engraving .hatch { stroke: var(--ink); stroke-width: 1; fill: none; opacity: .45; }
.engraving .hatch.thick { stroke-width: 3; opacity: .28; }
.engraving .ink { stroke: var(--red); stroke-width: 5; fill: none; stroke-linejoin: round; }
.engraving .big { font: 400 42px var(--head); fill: var(--red); }
.engraving .pin { fill: var(--red); }
.engraving .bldg { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; }
.engraving .paperfill { fill: var(--paper-2); }
.engraving .fins { stroke: var(--ink); stroke-width: 1.2; opacity: .55; }
.engraving .pole, .engraving .ground { stroke: var(--ink); stroke-width: 2; }
.engraving .flag { fill: var(--red); }
.engraving .quote { font: 700 300px/1 Georgia, "Times New Roman", serif; fill: var(--red); opacity: .9; }
.engraving .stamp rect { fill: none; stroke: var(--red); stroke-width: 4; }
.engraving .stamp text { font: 600 22px var(--mono); fill: var(--red); letter-spacing: .12em; }

/* ads: always labelled */
.ad { text-align: center; margin: 0 auto 18px; }
/* An AdSense unit that Google chose not to fill (or can't fill yet, while the site is still under
   review) marks itself data-ad-status="unfilled". Collapse it and its "Advertisement" label rather
   than leaving a tall blank band under the masthead. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.ad small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.ad-house {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  border: 1px dashed var(--ink-soft); background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(128, 118, 96, .08) 9px 10px);
  color: var(--ink-soft); padding: 10px;
}
.ad-house:hover { text-decoration: none; border-color: var(--red); color: var(--ink); }
.ad-house b { font: 400 20px/1 var(--head); text-transform: uppercase; color: var(--ink); }
.ad-house span { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; }
.ad-house em { font: italic 500 13px/1 var(--body); color: var(--red); }
.ad-leaderboard .ad-house, .ad-footer .ad-house { max-width: 728px; height: 90px; margin: 0 auto; }
.ad-sidebar .ad-house, .ad-inarticle .ad-house { width: 300px; max-width: 100%; height: 250px; margin: 0 auto; }
.ad-sidebar_tall .ad-house { width: 300px; max-width: 100%; height: 600px; margin: 0 auto; }
.ad-inarticle { margin: 22px auto 26px; padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ad-footer { margin-top: 30px; }

/* sponsored stories */
.sponsor-card { display: block; border: 1px solid var(--rule); padding: 14px; background: var(--paper-2); }
.sponsor-card h3 { font-size: 24px; margin: 0 0 6px; }
.sponsor-card p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.empty-slot:hover { text-decoration: none; border-color: var(--red); }
.spon-note { border: 1px solid var(--rule); background: var(--paper-2); padding: 10px 12px; font: 500 13px/1.4 var(--mono); margin-bottom: 16px; }
.follow a { display: block; padding: 9px 0; border-bottom: 1px solid var(--hair); font: 700 15px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; }

/* article page */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 36px; }
.story { max-width: 760px; padding-right: 36px; border-right: 1px solid var(--rule); }
.body p { font-size: 19px; line-height: 1.62; }
.body h2 { font-size: 30px; line-height: 1.05; margin: 30px 0 12px; padding-top: 12px; border-top: 3px solid var(--rule); }
.body h2 + p::first-letter { font: inherit; float: none; padding: 0; color: inherit; }
.sourcebox { border-top: 3px solid var(--rule); padding-top: 12px; margin: 26px 0 16px; }
.sourcebox b { font: 400 20px/1 var(--head); text-transform: uppercase; }
.sourcebox p { margin: 6px 0; }
.sourcebox a, .share a { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.share { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--hair); padding-top: 12px; }
.share span { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sticky { align-self: start; position: sticky; top: 16px; }

.section-head { font-size: 58px; border-bottom: 4px solid var(--rule); margin: 10px 0 18px; padding-bottom: 6px; }
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 4px solid var(--rule); margin-top: 28px; padding-top: 16px;
  font: 700 15px/1 var(--body); text-transform: uppercase; letter-spacing: .04em;
}
.pager a { color: var(--red); }
.pager .pager-off { color: var(--ink-soft); opacity: .5; }
.pager-count { font: 500 11.5px/1 var(--mono); letter-spacing: .08em; color: var(--ink-soft); text-transform: uppercase; }
.plain { max-width: 760px; margin: 10px auto 0; }
.plain h3 { font-size: 26px; margin: 26px 0 8px; }
.slots { width: 100%; border-collapse: collapse; font: 500 14px/1.4 var(--mono); }
.slots th, .slots td { text-align: left; border-bottom: 1px solid var(--hair); padding: 8px 4px; }
.empty { font-style: italic; color: var(--ink-soft); }

/* light/dark switch, in the banner strip and again in the footer */
.theme-switch {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hair);
  background: var(--paper-2); color: var(--ink-soft); border-radius: 999px; padding: 5px 10px 5px 9px;
  cursor: pointer; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.theme-switch:hover { border-color: var(--red); color: var(--ink); }
.theme-switch .ic { width: 13px; height: 13px; flex: none; }
.theme-switch .ic-moon { display: block; }
.theme-switch .ic-sun { display: none; }
:root[data-theme="light"] .theme-switch .ic-moon { display: none; }
:root[data-theme="light"] .theme-switch .ic-sun { display: block; }
.theme-switch .track { width: 28px; height: 15px; border-radius: 999px; background: var(--hair); position: relative; flex: none; }
.theme-switch .thumb { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--amber); transition: left .18s ease; }
:root[data-theme="light"] .theme-switch .thumb { left: 15px; }
.strip { flex-wrap: wrap; row-gap: 8px; }
.foot .theme-switch { margin: 4px auto 0; }

/* footer */
.foot { border-top: 4px solid var(--rule); margin-top: 34px; padding-top: 18px; text-align: center; }
.foot-title { font: 400 44px/1 var(--head); text-transform: uppercase; }
.foot .motto { color: var(--ink-soft); margin: 8px 0 14px; }
.foot nav, .foot .links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; font: 600 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.foot .links { margin: 10px 0 0; }
.foot .fine { font: 500 11px/1.5 var(--mono); color: var(--ink-soft); margin-top: 16px; }

/* tablet */
@media (max-width: 1000px) {
  .masthead { grid-template-columns: 1fr; }
  .hide-s { display: none !important; }
  .front, .row.lower, .article-wrap { grid-template-columns: 1fr; }
  .front .lead, .row.lower .more-news, .story { padding-right: 0; border-right: 0; }
  .rail { margin-top: 24px; }
  .sticky { position: static; }
  .row.three, .row.grid { grid-template-columns: 1fr 1fr; }
  .row.three, .row.grid { column-gap: 32px; }
  .row.three > .teaser::before, .row.grid > .teaser::before { display: none; }
  .row.three > .teaser:nth-child(2n)::before, .row.grid > .teaser:nth-child(2n)::before { display: block; left: -16px; }
  .ad-sidebar_tall .ad-house { height: 250px; }
}
/* phone */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .paper { padding: 0 16px 30px; }
  .strip { font-size: 10px; letter-spacing: .08em; }
  nav.sections { gap: 8px 16px; font-size: 12.5px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; }
  nav.sections::-webkit-scrollbar { display: none; }
  .masthead .title { font-size: clamp(44px, 15vw, 72px); }
  .breaking li a { font-size: 16px; }
  .section-head { font-size: 40px; }
  .share { flex-wrap: wrap; gap: 10px 18px; }
  .cols { column-count: 1; }
  .breaking { flex-direction: column; }
  .bk-label { padding: 8px 12px; font-size: 17px; }
  .row.three, .row.grid { grid-template-columns: 1fr; }
  .row.three > .teaser, .row.grid > .teaser { padding: 0 0 18px !important; border-bottom: 1px solid var(--hair); }
  .row.three > .teaser::before, .row.grid > .teaser::before { display: none !important; }
  .teaser.compact { grid-template-columns: 110px 1fr; gap: 0 12px; }
  .teaser.compact h3 { font-size: 19px; }
  .teaser.compact p { display: none; }
  .ad-leaderboard .ad-house, .ad-footer .ad-house { max-width: 320px; height: 100px; }
  .dek { font-size: 19px; }
  .body p { font-size: 18px; text-align: left; }
  .cols p { text-align: left; }
}

/* breaking news summary page */
.bk-kicker { background: var(--red); color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.bk-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: bkpulse 1.2s ease-in-out infinite; }
.live-note { font: 600 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red);
  border-left: 3px solid var(--red); padding: 6px 10px; margin: 14px 0 6px; }
.outlet-list, .unconfirmed { margin: 0 0 1em; padding: 0; list-style: none; }
.outlet-list li { border-top: 1px solid var(--hair); padding: 12px 0; }
.outlet-list li b { font: 400 22px/1 var(--head); text-transform: uppercase; }
.outlet-list li p { margin: 6px 0 8px; }
.outlet-list li a { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.unconfirmed li { font-size: 18px; line-height: 1.5; padding: 4px 0 4px 22px; position: relative; }
.facts { margin: 0 0 1em; padding: 0; list-style: none; }
.facts li { font-size: 18px; line-height: 1.5; padding: 6px 0 6px 20px; position: relative; border-bottom: 1px solid var(--hair); }
.facts li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; background: var(--red); }
.facts.need { border: 2px solid var(--red); padding: 4px 14px; }
.facts.need li:last-child { border-bottom: 0; }
.unconfirmed li::before { content: "?"; position: absolute; left: 0; font: 400 18px/1.4 var(--head); color: var(--red); }

/* support page: donations and merch */
nav.sections a.nav-support { color: var(--red); }
.btn { display: inline-block; background: var(--red); color: #fff; font: 700 14px/1 var(--body); text-transform: uppercase;
  letter-spacing: .12em; padding: 12px 18px 11px; border: 2px solid var(--red); cursor: pointer; }
.btn:hover { text-decoration: none; background: transparent; color: var(--red); }
.btn.soon { opacity: .7; cursor: not-allowed; }
.btn.soon:hover { background: var(--red); color: #fff; }
.soon-note { display: block; margin-top: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
/* self-serve ad booking, on the advertise page */
.ab-note { color: var(--ink-soft); font-size: 14.5px; margin: -6px 0 18px; }
#ad-booking { border: 3px double var(--rule); padding: 18px; background: var(--paper-2); max-width: 460px; }
#ad-booking form { display: flex; flex-direction: column; gap: 12px; }
#ad-booking label { display: flex; flex-direction: column; gap: 4px; font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
#ad-booking input, #ad-booking select { font: 500 15px/1.3 var(--body); padding: 9px 10px; border: 1px solid var(--rule); background: #fff; color: var(--ink); }
.ab-avail { margin: -4px 0 0; font: 500 13px/1.3 var(--mono); color: var(--ink-soft); }
.ab-price { margin: 0; font: 700 14px/1.35 var(--body); }
.ab-error { margin: 0; color: var(--red); font-size: 13.5px; min-height: 1em; }
#ad-booking .btn { border: none; width: 100%; text-align: center; }
#ad-booking .btn:disabled { opacity: .5; cursor: not-allowed; }
#ab-payment-element { margin: 4px 0; }
.ab-done { border: 3px double var(--rule); padding: 16px; background: var(--paper-2); max-width: 460px; font: 700 15px/1.4 var(--body); }
.ad-booked img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.support-box { border: 3px double var(--rule); padding: 16px; margin-top: 18px; background: var(--paper-2); }
.support-box b { font: 400 22px/1 var(--head); text-transform: uppercase; display: block; margin-bottom: 8px; }
.support-box p { margin: 0 0 12px; font-size: 15.5px; color: var(--ink-soft); }
.support-box.inline { margin: 22px 0 18px; }
.support-page { max-width: 1040px; margin: 10px auto 0; }
.support-head { text-align: center; max-width: 780px; margin: 0 auto 26px; }
.support-head h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1; text-wrap: balance; margin: 10px 0 12px; }
.donate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: center;
  border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; margin-bottom: 30px; }
.donate h2 { font-size: 30px; margin: 0 0 8px; }
.donate p { margin: 0; font-size: 17px; line-height: 1.55; max-width: 62ch; }
.donate-cta { text-align: center; }
.donate-cta .btn { font-size: 17px; padding: 16px 34px 15px; }
.donate-cta > small { display: block; margin-top: 8px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.shop-intro { margin: 0 0 18px; color: var(--ink-soft); }
.shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rule); padding: 14px; background: var(--paper-2); }
.product .mock { position: relative; aspect-ratio: 1 / 1; max-width: 100%; margin-bottom: 10px; background: #fff; overflow: hidden; }
.product .mock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .25s ease; }
.product .mock .back { opacity: 0; }
.product .vf, .product .vb { position: absolute; opacity: 0; pointer-events: none; }
.product .vb:checked ~ .mock .front { opacity: 0; }
.product .vb:checked ~ .mock .back { opacity: 1; }
@media (hover: hover) {
  .product .vf:checked ~ .mock:hover .front { opacity: 0; }
  .product .vf:checked ~ .mock:hover .back { opacity: 1; }
}
.views { display: flex; gap: 6px; margin-bottom: 12px; }
.views label { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px 5px; border: 1px solid var(--rule); cursor: pointer; }
.product .vf:checked ~ .views label[for$="-f"], .product .vb:checked ~ .views label[for$="-b"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mock-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed var(--hair); color: var(--ink-soft); font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.mock-empty b { font: 400 30px/1 var(--head); color: var(--ink); letter-spacing: .02em; }
.product h3 { font-size: 28px; margin: 0 0 6px; }
.product p { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-soft); flex: 1; }
.product .price { font: 600 16px/1 var(--mono); margin-bottom: 10px; }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sizes span { border: 1px solid var(--rule); padding: 5px 8px 4px; font: 600 12px/1 var(--mono); }
.product .btn { text-align: center; }
.fine-print { margin-top: 26px; font: 500 12px/1.5 var(--mono); color: var(--ink-soft); }
@media (max-width: 800px) {
  .shop { grid-template-columns: 1fr; }
  .donate { grid-template-columns: 1fr; }
  .donate-cta { text-align: left; }
}

/* share prompt at the end of every story */
.share-box { border: 2px solid var(--rule); background: var(--paper-2); padding: 18px; margin: 26px 0 18px; }
.share-box b { font: 400 24px/1.05 var(--head); text-transform: uppercase; display: block; margin-bottom: 6px; }
.share-box p { margin: 0 0 14px; color: var(--ink-soft); }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.fb { background: #1877f2; border-color: #1877f2; }
.btn.fb:hover { background: transparent; color: #1877f2; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { color: var(--red); border-color: var(--red); }

/* weather box, front page rail */
.weather-box { border: 3px double var(--rule); padding: 16px; background: var(--paper-2); }
.weather-box h4 { font: 400 22px/1 var(--head); text-transform: uppercase; margin: 0 0 8px; }
.weather-box h4 a { color: inherit; }
.weather-box h4 a:hover { color: var(--red); text-decoration: none; }
.wx-list { list-style: none; margin: 0; padding: 0; }
.wx-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.wx-list li:last-child { border-bottom: 0; }
.wx-city { font: 700 15px/1.2 var(--body); text-transform: uppercase; letter-spacing: .02em; }
.wx-cond { flex: 1; font: 500 12.5px/1.3 var(--mono); color: var(--ink-soft); text-align: right; padding: 0 4px; }
.wx-temp { font: 600 15px/1 var(--mono); white-space: nowrap; }
.wx-temp small { font-weight: 500; color: var(--ink-soft); }
.wx-more { display: inline-block; margin-top: 10px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* full weather page */
.wx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.wx-card { border: 1px solid var(--rule); background: var(--paper-2); padding: 18px; }
.wx-card h3 { font-size: 24px; margin: 0 0 6px; }
.wx-card-cond { font: 500 14px/1.3 var(--mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.wx-card-temp { font: 400 46px/1 var(--head); }
.wx-card-temp small { font: 500 13px/1 var(--mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.wx-card-range { font: 600 14px/1 var(--mono); margin: 10px 0 14px; color: var(--ink-soft); }
.wx-card-stats { list-style: none; margin: 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.wx-card-stats li { display: flex; justify-content: space-between; padding: 5px 0; font: 500 13px/1.3 var(--mono); }
.wx-card-stats li span { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 1000px) {
.wx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.wx-grid { grid-template-columns: 1fr; }
}