/* Garrett County News. Base styles come from the approved 2026 homepage concept. */
:root {
  --navy: #082341; --blue: #1B4F82; --sky: #64AAE6; --slate: #687585; --red: #AA1C2B;
  --bg: #F5F8FB; --surface: #FFFFFF; --ink: #0B1F36; --ink-2: #44546A; --line: #D9E2EC;
  --kicker: #1B4F82; --tile: #0E2D50; --notice-bg: #E6F1FB; --notice-ink: #0B3966;
  --head: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #061A30; --surface: #0B2440; --ink: #EAF1F8; --ink-2: #A9B9CB; --line: #1D3B5E;
  --kicker: #64AAE6; --tile: #10345C; --notice-bg: #0E3157; --notice-ink: #D4E8FA; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #061A30; --surface: #0B2440; --ink: #EAF1F8; --ink-2: #A9B9CB; --line: #1D3B5E;
  --kicker: #64AAE6; --tile: #10345C; --notice-bg: #0E3157; --notice-ink: #D4E8FA; color-scheme: dark }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover h3, a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--sky); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--head); text-wrap: balance; margin: 0; letter-spacing: -.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--surface); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; top: 8px; }

/* Utility bar */
.util { background: var(--navy); color: #C9D8E8; font: 500 13px/1 var(--body); }
.util .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; flex-wrap: wrap; }
.util nav { display: flex; gap: 18px; }
.util a { color: #fff; }

/* Masthead */
.mast { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.mast canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mast .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px 40px; flex-wrap: wrap; }
.mast.compact .wrap { padding-block: 20px 22px; }
.mast.compact .logo .n { font-size: 44px; } .mast.compact .logo svg { width: 64px; height: 36px; } .mast.compact .logo .gc { font-size: 11.5px; }
.logo { display: flex; align-items: center; gap: 18px; }
.logo svg { width: 86px; height: 48px; flex: none; filter: drop-shadow(0 3px 12px rgba(3,13,26,.6)); }
.logo .gc { font: 700 15px/1 var(--head); letter-spacing: .42em; text-shadow: 0 2px 12px rgba(3,13,26,.7); }
.logo .n { font: 900 64px/.86 var(--head); letter-spacing: -.02em; margin-top: 6px; text-shadow: 0 6px 30px rgba(3,13,26,.6); }
.tag { display: flex; align-items: center; gap: 14px; font: 500 16px/1.3 var(--body); color: #E3EDF8; text-shadow: 0 2px 12px rgba(3,13,26,.8); }
.tag i { width: 44px; height: 3px; background: var(--sky); border-radius: 2px; }

/* Section nav */
.secnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(8,35,65,.04); }
.secnav .wrap { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.secnav .wrap::-webkit-scrollbar { display: none; }
.secnav a { white-space: nowrap; font: 700 13px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 17px 9px 15px; border-bottom: 3px solid transparent; color: var(--ink-2); }
.secnav a.on { color: var(--ink); border-bottom-color: var(--sky); }
.secnav a:hover { color: var(--ink); }
.secnav .search { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Public notice and breaking strips */
.notice { background: var(--notice-bg); color: var(--notice-ink); border-bottom: 1px solid var(--line); }
.notice .wrap { display: flex; gap: 14px; align-items: baseline; padding-block: 12px; flex-wrap: wrap; font-size: 15px; }
.notice a:hover { text-decoration: underline; }
.notice.breaking { background: var(--red); color: #fff; border-bottom: 0; }
.notice.breaking .pill { background: #fff; color: var(--red); }
.pill { display: inline-block; font: 800 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px 5px; border-radius: 3px; background: var(--blue); color: #fff; }
.pill.red { background: var(--red); }
.notice b { font-weight: 700; }

/* Kicker / meta */
.kick { font: 800 11.5px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.kick.red { color: var(--red); }
.meta { font: 500 13px/1.4 var(--body); color: var(--ink-2); }
.upd { color: var(--kicker); font-weight: 600; }

/* Photo slot: a real photo, or a category tile until one is added */
.ph { position: relative; aspect-ratio: 16/10; max-width: 100%; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 100% at 20% 10%, #1B4F82 0%, #0d2f55 50%, #082341 100%); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ph svg { position: absolute; right: 14px; bottom: 14px; width: 54px; height: 30px; opacity: .55; }
.ph .lab { position: absolute; left: 14px; bottom: 13px; font: 700 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ph .lab::before { content: ""; display: block; width: 28px; height: 3px; background: var(--sky); border-radius: 2px; margin-bottom: 9px; }
.ph.breaking::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--red); }

/* Top: lead + rail */
.top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding-block: 34px 10px; }
.lead { display: grid; gap: 16px; }
.lead .ph { aspect-ratio: 16/9; }
.lead h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; font-weight: 800; }
.lead .dek { font-size: 18px; color: var(--ink-2); max-width: 62ch; margin: 0; }
.subleads { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 8px; }
.subleads a { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; align-items: start; }
.subleads a > div { display: grid; gap: 6px; align-content: start; }
.subleads .ph { aspect-ratio: 1; }
.subleads .ph .lab, .subleads .ph svg { display: none; }
.subleads h3 { font-size: 17px; line-height: 1.2; font-weight: 700; }
.subleads p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.rail { border-left: 1px solid var(--line); padding-left: 32px; }
.railhead { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--navy); padding-bottom: 10px; margin-bottom: 4px; }
:root[data-theme="dark"] .railhead { border-bottom-color: var(--sky); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .railhead { border-bottom-color: var(--sky); } }
.railhead h2, .shead h2 { font: 800 14px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; }
.latest { list-style: none; margin: 0; padding: 0; }
.latest li { border-bottom: 1px solid var(--line); }
.latest a { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 12px; padding-block: 14px; }
.latest time { font: 700 12.5px/1.35 var(--body); color: var(--kicker); font-variant-numeric: tabular-nums; }
.latest h3 { font-size: 15.5px; line-height: 1.28; font-weight: 700; }
.latest .meta { font-size: 12.5px; margin-top: 4px; }
.latest .red { color: var(--red); font-weight: 700; }

/* Section heads and card rows */
section.band { padding-block: 34px 6px; }
.shead { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.shead::after { content: ""; flex: 1; height: 1px; background: var(--line); order: 2; }
.shead a { order: 3; font: 600 13.5px/1 var(--body); color: var(--kicker); white-space: nowrap; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; }
.card { display: grid; gap: 10px; align-content: start; }
.card h3 { font-size: 17.5px; line-height: 1.24; font-weight: 700; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* Watch: vertical reels on navy */
.watch { background: var(--navy); color: #fff; margin-top: 38px; }
.watch .wrap { padding-block: 34px 38px; }
.watch .shead::after { background: rgba(100,170,230,.3); }
.watch .shead h2 { color: #fff; }
.watch .shead a { color: var(--sky); }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.reel { display: grid; gap: 10px; align-content: start; }
.reel .v { position: relative; aspect-ratio: 9/16; max-width: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #1B4F82 0%, #0d2f55 55%, #061a31 100%); }
.reel .v .play { position: absolute; left: 50%; top: 42%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.7); display: grid; place-items: center; }
.reel .v .play::after { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.reel .v .len { position: absolute; right: 10px; top: 10px; font: 600 12px/1 var(--body); background: rgba(3,13,26,.6); padding: 5px 7px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.reel .v .cap { position: absolute; left: 14px; right: 14px; bottom: 16px; font: 800 18px/1.15 var(--head); }
.reel .v .cap span { display: block; font: 700 10.5px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }
.reel .v.water { background: linear-gradient(180deg, #2a6aa6 0%, #1B4F82 40%, #082341 100%); }
.reel .v.history { background: linear-gradient(180deg, #3a4656 0%, #22303f 50%, #0b1726 100%); }
.reel .v.food { background: linear-gradient(180deg, #8a5a2b 0%, #4b3220 45%, #1a120c 100%); }
.reel p { margin: 0; font-size: 14px; color: #B9C8DA; }

/* Two-up: this week + community */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.agenda li { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.agenda .d { text-align: center; border: 1px solid var(--line); border-radius: 4px; padding-block: 6px 7px; background: var(--surface); align-self: start; }
.agenda .d b { display: block; font: 900 24px/1 var(--head); font-variant-numeric: tabular-nums; }
.agenda .d span { font: 700 10.5px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.agenda h3 { font-size: 15.5px; line-height: 1.28; font-weight: 700; }
.agenda p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-2); }
.agenda .empty { display: block; color: var(--ink-2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }

/* Support band */
.support { margin-block: 44px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.support .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; padding-block: 36px; }
.support h2 { font-size: 24px; font-weight: 800; }
.support p { color: var(--ink-2); margin: 8px 0 16px; max-width: 52ch; }
.signup { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input { flex: 1 1 220px; min-width: 0; font: 400 15px/1 var(--body); padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); }
.btn { display: inline-block; font: 700 14px/1 var(--head); letter-spacing: .04em; padding: 14px 18px; border-radius: 4px; border: 0; background: var(--navy); color: #fff; cursor: pointer; }
:root[data-theme="dark"] .btn { background: var(--sky); color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn { background: var(--sky); color: var(--navy); } }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 12px 16px; }
.formnote { font-size: 13px; color: var(--ink-2); margin-top: 8px; min-height: 1.4em; }

/* Footer */
footer { background: var(--navy); color: #B9C8DA; font-size: 14px; }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 44px 28px; }
footer h4 { font: 800 12px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a:hover { color: #fff; }
footer .logo { color: #fff; }
footer .logo .n { font-size: 40px; } footer .logo svg { width: 60px; height: 34px; } footer .logo .gc { font-size: 11px; }
footer .about { margin: 16px 0 0; max-width: 46ch; }
.legal { border-top: 1px solid rgba(100,170,230,.2); }
.legal .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 16px; font-size: 12.5px; grid-template-columns: none; }

/* Article page */
.story { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding-block: 34px 10px; }
.story header { display: grid; gap: 14px; }
.story h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.08; font-weight: 800; }
.story .dek { font-size: 19px; color: var(--ink-2); margin: 0; max-width: 62ch; }
.story .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.updnote { background: var(--notice-bg); color: var(--notice-ink); border-left: 4px solid var(--sky); padding: 12px 14px; font-size: 15px; border-radius: 0 4px 4px 0; }
.story figure { margin: 22px 0 0; }
.story figure .ph { aspect-ratio: 16/9; }
.story figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.prose { font-size: 18px; line-height: 1.65; max-width: 68ch; margin-top: 26px; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 22px; font-weight: 800; margin: 1.4em 0 .6em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
/* Links in story and page bodies (e.g. source documents) must look like links. --kicker is #1B4F82, lighter in dark mode. */
.prose a { color: var(--kicker); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.sources { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; max-width: 68ch; display: grid; gap: 6px; }
.sources a { color: var(--kicker); font-weight: 600; }

/* Category page */
.pagehead { padding-block: 34px 6px; }
.pagehead h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; font-weight: 900; }
.pagehead p { color: var(--ink-2); margin: 8px 0 0; max-width: 62ch; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { border-bottom: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; padding-block: 20px; }
.list a > div { display: grid; gap: 8px; align-content: start; }
.list h2 { font-size: 22px; line-height: 1.2; font-weight: 800; }
.list p { margin: 0; color: var(--ink-2); }
.pager { display: flex; justify-content: space-between; gap: 16px; padding-block: 24px; font-weight: 600; color: var(--kicker); }
.searchform { display: flex; gap: 10px; margin-top: 16px; max-width: 560px; }
.searchform input { flex: 1; min-width: 0; font: 400 16px/1 var(--body); padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); }
.empty-state { color: var(--ink-2); padding-block: 20px; }

@media (max-width: 960px) {
  .top, .story { grid-template-columns: minmax(0,1fr); }
  .rail { border-left: 0; padding-left: 0; }
  .grid4, .reels { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split, .support .wrap { grid-template-columns: minmax(0,1fr); }
  footer .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .logo .n { font-size: 46px; } .logo svg { width: 62px; height: 34px; } .logo .gc { font-size: 11.5px; }
  .mast .wrap { padding-block: 24px 28px; }
  .mast.compact .wrap { padding-block: 16px 18px; }
  .mast.compact .tag { display: none; }
  .subleads, .grid3 { grid-template-columns: minmax(0,1fr); }
  .grid4 { grid-template-columns: minmax(0,1fr); }
  .grid4 .card { grid-template-columns: 120px minmax(0,1fr); column-gap: 14px; }
  .grid4 .card .ph { grid-row: span 3; aspect-ratio: 1; }
  .grid4 .card .ph .lab, .grid4 .card .ph svg { display: none; }
  .grid4 .card p { display: none; }
  .list a { grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
  .list .ph { aspect-ratio: 1; }
  .list .ph .lab, .list .ph svg, .list p { display: none; }
  .list h2 { font-size: 17px; }
  .prose { font-size: 17px; }
  footer .wrap { grid-template-columns: minmax(0,1fr); }
  .util nav a.hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Story image: shown whole, since GCN post graphics carry text */
.story figure .lead-img { width: 100%; height: auto; border-radius: 4px; background: var(--tile); }

/* Reel thumbnails */
.reel .v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .v.has-thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,13,26,.15) 0%, rgba(3,13,26,0) 35%, rgba(3,13,26,.85) 100%); }
.reel .v .len, .reel .v .play, .reel .v .cap { z-index: 2; }

/* Pages: About, How we report, Corrections, Contact */
.pagebody { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding-block: 10px 44px; }
.pagebody .prose { margin-top: 10px; }
.side { display: grid; gap: 18px; align-content: start; }
.side .box { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px; display: grid; gap: 10px; }
.side .box h2 { font: 800 14px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; }
.side .box p { margin: 0; color: var(--ink-2); font-size: 15px; }
.side .box img { width: 72px; height: 72px; border-radius: 50%; }
.tipform { display: grid; gap: 14px; max-width: 640px; margin-top: 8px; }
.tipform label { display: grid; gap: 6px; font: 600 14px/1.3 var(--body); }
.tipform input, .tipform textarea, .tipform select { font: 400 16px/1.4 var(--body); padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); width: 100%; }
.tipform textarea { min-height: 160px; resize: vertical; }
.tipform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tipform .err { color: var(--ink); font-size: 14px; font-weight: 600; }
.okbox { background: var(--notice-bg); color: var(--notice-ink); border-left: 4px solid var(--sky); padding: 14px 16px; border-radius: 0 4px 4px 0; max-width: 640px; }
.updates { list-style: none; margin: 8px 0 0; padding: 0; max-width: 68ch; }
.updates li { border-bottom: 1px solid var(--line); padding-block: 14px; display: grid; gap: 4px; }
.updates a { font: 700 17px/1.3 var(--head); }
@media (max-width: 960px) { .pagebody { grid-template-columns: minmax(0, 1fr); } }
.reel .v.has-thumb::before { background: linear-gradient(180deg, rgba(3,13,26,0) 70%, rgba(3,13,26,.55) 100%); }
.reel .v.has-thumb .play { top: auto; left: auto; right: 12px; bottom: 12px; margin: 0; width: 44px; height: 44px; background: rgba(3,13,26,.55); }
.reel .v.has-thumb .play::after { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; margin-left: 3px; }
.reel .rcap { display: grid; gap: 6px; }
.reel .rcap span { font: 700 10.5px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.reel .rcap h3 { font: 800 17px/1.2 var(--head); color: #fff; }

/* Video page: Facebook's player at 9:16 */
.player { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; padding-block: 34px 40px; align-items: start; }
.player .frame { position: relative; width: 100%; aspect-ratio: 9/16; max-height: 80vh; background: #000; border-radius: 8px; overflow: hidden; }
.player .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .about { display: grid; gap: 14px; align-content: start; color: #fff; }
.player h1 { font-size: clamp(24px, 3vw, 36px); line-height: 1.12; font-weight: 800; }
.player .about p { margin: 0; color: #C9D8E8; }
.player .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn.ghost.light { color: #fff; border-color: #fff; }
.reels.light .reel p { color: var(--ink-2); }
.reels.light .reel .rcap h3 { color: var(--ink); }
.reels.light .reel .rcap span { color: var(--kicker); }
@media (max-width: 760px) {
  .player { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 20px 28px; }
  .player .frame { max-width: 420px; margin-inline: auto; max-height: none; }
}
.list.nophoto a { grid-template-columns: minmax(0, 1fr); }
.signup .sr-only input { width: 1px; }
/* A square or tall lead image (a missing poster) is shown whole on navy instead of cropped. */
.ph.fit { background: var(--navy); }
.ph.fit img { object-fit: contain; }

/* Alert strip: missing people and other urgent notices. Navy and sky; red only when the story is also breaking. */
.alert { background: var(--navy); color: #fff; border-bottom: 4px solid var(--sky); }
.alert.is-breaking { border-bottom-color: var(--red); }
.alert .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding-block: 14px; }
.alert-label { font: 900 13px/1 var(--head); letter-spacing: .16em; text-transform: uppercase; background: var(--sky); color: var(--navy); padding: 9px 12px 8px; border-radius: 3px; }
.alert.is-breaking .alert-label { background: var(--red); color: #fff; }
.alert-body { display: grid; gap: 3px; }
.alert-title { font: 800 19px/1.2 var(--head); color: #fff; }
.alert-title:hover { text-decoration: underline; text-decoration-color: var(--sky); }
.alert-text { color: #C9D8E8; font-size: 15px; }
.alert-actions { display: grid; gap: 6px; justify-items: end; text-align: right; }
.alert-call { font: 700 15px/1.2 var(--body); }
.alert-call a { color: #fff; text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 3px; white-space: nowrap; }
.alert-more { color: var(--sky); font-weight: 600; font-size: 14px; }
@media (max-width: 760px) {
  .alert .wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .alert-label { justify-self: start; }
  .alert-actions { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 16px; align-items: center; }
}

/* Sponsor and ad spots: always labeled, set apart from the news. */
.adlabel { display: block; font: 700 10.5px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.adslot { padding-block: 26px 0; }
.adslot ins { min-height: 90px; }
.sponsor { margin-top: 30px; }
.sponsor-body { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.sponsor-body img { max-height: 44px; max-width: 160px; width: auto; object-fit: contain; }
.sponsor-body b { font: 800 16px/1.2 var(--head); }
.sponsor-line { color: var(--ink-2); font-size: 14.5px; }
.sponsor-watch { margin: -6px 0 18px; }
.sponsor-watch .adlabel { color: #B9C8DA; }
.sponsor-watch .sponsor-body { background: rgba(255,255,255,.06); border-color: rgba(100,170,230,.3); color: #fff; }
.sponsor-watch .sponsor-line { color: #C9D8E8; }
.support .wrap.single { grid-template-columns: minmax(0, 1fr); }

/* Weather widget (National Weather Service) */
.sidecol { display: grid; gap: 30px; align-content: start; }
.sidecol .rail { border-left: 0; padding-left: 0; }
@media (min-width: 961px) { .sidecol { border-left: 1px solid var(--line); padding-left: 32px; } }
.wx { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px 12px; }
.wx .railhead { margin-bottom: 12px; }
.wx .railhead a { color: var(--kicker); font-weight: 600; }
.wx-now { display: flex; align-items: center; gap: 14px; }
.wx-temp { font: 900 44px/1 var(--head); font-variant-numeric: tabular-nums; }
.wx-cond { font: 600 15px/1.3 var(--body); color: var(--ink-2); }
.wx-days { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0; }
.wx-days li { display: grid; grid-template-columns: 92px 52px minmax(0,1fr); gap: 10px; align-items: baseline; padding-block: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.wx-days b { font: 700 13px/1.2 var(--head); }
.wx-days .t { font: 800 16px/1 var(--head); font-variant-numeric: tabular-nums; }
.wx-days .night .t { color: var(--ink-2); }
.wx-days span:last-child { color: var(--ink-2); }
.wx-src { margin: 8px 0 0; font-size: 12px; }
.wx-alerts { display: grid; gap: 8px; margin-bottom: 12px; }
.wx-alerts a { display: block; background: var(--navy); color: #fff; border-left: 4px solid var(--sky); border-radius: 4px; padding: 10px 12px; font: 700 14px/1.3 var(--body); }
.wx-alerts a span { display: block; font: 800 10.5px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 6px; }
.util-wx { margin-left: 14px; font-weight: 700; color: #fff; }
.util-wx.has-alert::before { content: "⚠ "; color: var(--sky); }

/* How we got this story */
.storytype { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 10px; }
.storytype a { color: var(--kicker); font-weight: 600; white-space: nowrap; }
.st-label { font: 800 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px 5px; border-radius: 3px; background: var(--notice-bg); color: var(--notice-ink); }
.st-label.st-original { background: var(--blue); color: #fff; }

/* Rotating lead box: swipe on phones, arrows and dots everywhere, pauses on hover/focus, no auto-rotate for reduced motion. */
.carousel { position: relative; }
.carousel .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 24px; }
.carousel .slides::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.car-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.car-dots { display: flex; gap: 8px; margin-inline: 4px; }
.car-dot { width: 28px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.car-dot[aria-current="true"] { background: var(--blue); }
.car-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 18px/1 var(--head); cursor: pointer; display: grid; place-items: center; }
.car-btn:hover { border-color: var(--sky); }
.car-pause { margin-left: auto; width: auto; border-radius: 17px; padding: 0 14px; font: 700 12px/1 var(--head); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .carousel .slides { scroll-behavior: auto; } }

/* Advertise page: packages, add-ons, terms */
.adpk h2 { font: 800 24px/1.2 var(--head); margin: 34px 0 14px; }
.adpk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.adpk-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px 18px 18px; }
.adpk-card.featured { border: 2px solid var(--blue); }
.adpk-card .pill { position: absolute; top: -11px; left: 16px; }
.adpk-card h3 { font: 800 17px/1.2 var(--head); }
.adpk-price { margin: 0; color: var(--ink-2); font-size: 14px; }
.adpk-price b { font: 900 34px/1 var(--head); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
.adpk-card ul { margin: 0; padding-left: 1.1em; font-size: 15px; color: var(--ink-2); flex: 1; }
.adpk-card li { margin-bottom: .4em; }
.adpk-card .btn { display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 4px; }
@media (min-width: 700px) { .adpk-card .btn { min-height: 70px; } }
.adpk-founding { margin-top: 16px; }
.adpk-addons { border-collapse: collapse; width: 100%; max-width: 640px; font-size: 16px; }
.adpk-addons th, .adpk-addons td { border-bottom: 1px solid var(--line); padding: 11px 0; text-align: left; }
.adpk-addons th { font-weight: 500; }
.adpk-addons td { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.adpk-terms { margin: 0; padding-left: 1.2em; max-width: 68ch; font-size: 16px; }
.adpk-terms li { margin-bottom: .45em; }

/* Story photo gallery (extra photos from the Review queue), under the story. */
.story .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 22px 0; }
.story .gallery-one { grid-template-columns: 1fr; }
.story .gallery figure { margin: 0; }
.story .gallery img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; background: var(--tile); display: block; }
.story .gallery-one img { aspect-ratio: auto; }

/* Events: the Coming up box under the weather and the /events page */
.comingup { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px 8px; }
.comingup .railhead { margin-bottom: 4px; }
.comingup .railhead a { color: var(--kicker); font-weight: 600; }
.cu-list { list-style: none; margin: 0; padding: 0; }
.cu-list li { border-top: 1px solid var(--line); }
.cu-list li:first-child { border-top: 0; }
.cu-list a { display: block; padding-block: 10px; }
.cu-when { display: block; font: 700 11.5px/1.3 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--kicker); margin-bottom: 4px; }
.cu-list h3 { font-size: 15px; line-height: 1.28; font-weight: 700; }
.cu-list .meta { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.cu-empty { margin: 8px 0; }
.cu-empty a { color: var(--kicker); font-weight: 600; }
.events { padding-bottom: 40px; }
.evlist { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.ev:first-child { padding-top: 0; }
.ev:target { background: var(--notice-bg); }
.ev .d { text-align: center; border: 1px solid var(--line); border-radius: 4px; padding-block: 6px 7px; background: var(--surface); align-self: start; }
.ev .d b { display: block; font: 900 24px/1 var(--head); font-variant-numeric: tabular-nums; }
.ev .d span { font: 700 10.5px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--kicker); }
.ev h3 { font-size: 19px; line-height: 1.25; font-weight: 800; }
.ev-when { margin: 4px 0 0; font: 700 14px/1.35 var(--head); color: var(--kicker); }
.ev-facts { margin: 8px 0 0; display: grid; gap: 3px; font-size: 14.5px; }
.ev-facts div { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 8px; }
.ev-facts dt { font: 700 11px/1.9 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ev-facts dd { margin: 0; overflow-wrap: anywhere; }
.ev-sum { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.ev-links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ev-links a, .evrepeat a, .ev-note a { color: var(--kicker); font-weight: 600; }
.evrepeat { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.evrepeat h3 { font-size: 16px; font-weight: 700; }
.evrepeat p { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ev-note { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); max-width: 75ch; }
@media (max-width: 560px) { .ev { grid-template-columns: 52px minmax(0,1fr); gap: 12px; } .ev h3 { font-size: 17px; } }