/* Redesign layer, Oct. 22, 2026 (editor request: a Washington Post style front page, carried to every page).
   Loads after style.css and header-tools.css, so it only overrides. Keeps every brand token and font.
   Docs: docs/REDESIGN.md. To undo, remove the redesign.css link in templates/base.html. */

/* Section titles on every page: serif, ink rule on top */
.section-title { font: 700 22px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); border-top: 1px solid var(--ink); padding-top: 12px; margin: 0 0 16px; }
.home-sec .section-title a { color: var(--ink); }
.home-sec .section-title a:hover { color: var(--teal-deep); }

/* Story page headline */
.story h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.12; letter-spacing: -.3px; }

/* Front page top: big lead beside a stack of top stories */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 32px; align-items: start; margin: 0 0 34px; }
.hero-grid .lead { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; min-width: 0; }
.hero-grid .top-stories { margin: 0; min-width: 0; }
.hero-grid .top-stories .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: 0; }
.hero-grid .top-grid { display: flex; flex-direction: column; }
.hero-grid .top-story { padding: 16px 0; border-left: 0; border-top: 1px solid var(--rule); }
.hero-grid .top-story:first-child { padding-top: 0; border-top: 0; }
.hero-grid .top-story:last-child { padding-bottom: 0; }
.hero-grid .top-story h3 { font-size: 20px; }
.hero-grid .top-story p:not(.kicker):not(.dateline) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid .lead { margin-bottom: 24px; }
}

/* Watch strip: vertical video cards (front page on preview builds, and /watch/) */
.watch { margin: 0 0 34px; }
.watch-head { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 12px; margin: 0 0 16px; }
.watch-head h2 { font: 700 24px/1.2 var(--serif); margin: 0; }
.watch-head a { font: 700 13px/1 var(--sans); color: var(--ink); text-decoration: none; }
.watch-head a::before { content: ""; display: inline-block; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; margin-right: 7px; }
.watch-head a:hover { text-decoration: underline; }
.watch-row { display: flex; gap: 14px; overflow-x: auto; margin: 0; padding: 0 0 8px; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin; }
.vcard { flex: 0 0 190px; scroll-snap-align: start; position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #0E2A45; }
.vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(7,19,29,0) 40%, rgba(7,19,29,.93) 100%); }
.vcard a:focus-visible { outline: 3px solid #F2C14E; outline-offset: -3px; }
.vcard .vk { font: 700 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: #C9E6E2; }
.vcard .vt { font: 600 17px/1.25 var(--serif); }
.vcard a:hover .vt { text-decoration: underline; }
.vcard .vd { display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sans); }
.vcard .vd::before { content: ""; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #fff; }
@media (max-width: 620px) { .vcard { flex-basis: 66vw; max-width: 240px; } }

/* /watch/ page */
.watch-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 26px; margin: 18px 0 0; }
.watch-page .wp-item { min-width: 0; }
.watch-page video { display: block; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; border-radius: 10px; background: #0E2A45; }
.watch-page h2 { font-size: 20px; margin: 12px 0 4px; }
.watch-page .vk { font: 700 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--teal-deep); margin: 0; }
.watch-page .wp-note { font-size: 14px; color: var(--muted); margin: 0; }

/* School lunch box in the homepage sidebar */
.mini-menu { list-style: none; margin: 0 0 8px; padding: 0; }
.mini-menu li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.35; }
.mini-menu li:first-child { border-top: 0; padding-top: 0; }
.mini-menu strong { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

/* One-line scores strip, full width under the header (homepage) */
.scores-strip { background: var(--sand); border-bottom: 1px solid var(--rule); }
.scores-strip .win-ribbon { flex-wrap: nowrap; margin: 0; padding: 9px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.scores-strip .win-ribbon ul { flex-wrap: nowrap; gap: 0 26px; }
.scores-strip .win-ribbon li { flex-basis: auto; flex: none; }
.scores-strip .win-more { margin-left: auto; flex: none; font: 600 13px/1 var(--sans); }

/* Post style footer (replaces the navy footer on every page) */
footer.site-foot { background: var(--sand); color: var(--ink); border-top: 3px solid var(--navy); padding: 40px 0 24px; font-size: 14px; margin-top: 40px; }
footer.site-foot a { color: #2B3541; text-decoration: none; }
footer.site-foot a:hover { text-decoration: underline; }
.sf-name { font: 700 30px/1 var(--serif); color: var(--navy); margin: 0 0 32px; }
.sf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 36px; }
.sf-grid h2 { font: 700 12px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.sf-grid ul { display: block; list-style: none; margin: 0; padding: 0; }
.sf-grid li a { display: block; padding: 5px 0; line-height: 1.3; }
.sf-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--rule); margin-top: 36px; padding-top: 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.sf-fine p { margin: 0; max-width: 60ch; }
.sf-fine a { color: var(--muted); text-decoration: underline; }
.sf-fine ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 24px; } }
@media (max-width: 620px) {
  footer.site-foot { padding: 28px 0 calc(20px + env(safe-area-inset-bottom)); }
  .sf-name { font-size: 24px; margin-bottom: 24px; }
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .sf-grid li a { padding: 11px 0; }
  .sf-fine { margin-top: 28px; }
}

/* ===== Inner pages: article, town, section, meetings, Meeting Finder, data tools, police log ===== */
/* Page headlines and kickers */
main h1 { letter-spacing: -.3px; }
.kicker { color: var(--teal-deep); }

/* Topic jump chips become Post style text tabs */
.topic-jump { gap: 0 22px; border-bottom: 1px solid var(--rule); margin: 4px 0 24px; }
.topic-jump a { border: 0; border-radius: 0; background: transparent; padding: 10px 0; font: 600 14px/1.2 var(--sans); color: var(--ink); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.topic-jump a:hover { border-bottom-color: var(--navy); color: var(--ink); }

/* Story cards: a rule on top, serif headlines */
.cards { gap: 0 34px; }
.card { border-bottom: 0; border-top: 1px solid var(--rule); padding: 16px 0 20px; }
.card h3 { font-size: 21px; line-height: 1.22; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--teal-deep); }

/* Sidebar boxes: open, ruled, no frames */
aside .box { background: transparent; border: 0; border-top: 1px solid var(--ink); border-radius: 0; padding: 14px 0 6px; margin-bottom: 26px; box-shadow: none; }
aside .box h2 { font: 700 20px/1.2 var(--serif); }
aside .box:first-child { border-top: 3px solid var(--navy); }

/* Buttons */
.btn { border-radius: 6px; }

/* Article page */
.story { max-width: 720px; }
.story h1 { margin: 0 0 12px; }
.story .dek { font: 400 21px/1.45 var(--serif); color: #3A4654; margin: 0 0 6px; }
.story .byline { border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); padding: 12px 0; margin: 16px 0 22px; }
.story .body { font: 400 19px/1.7 var(--serif); }
.story .body p { margin: 0 0 1.05em; }
.story .body h2, .story .body h3 { font-family: var(--serif); margin: 1.6em 0 .5em; }
.story .body h2 { font-size: 26px; }
.story .body a { text-decoration-color: var(--teal); text-underline-offset: 3px; }
.story .sources { background: transparent; border-radius: 0; border-top: 1px solid var(--ink); padding: 14px 0 0; }
.story .correction { font-size: 14px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; }
@media (max-width: 620px) { .story .body { font-size: 18px; } .story .dek { font-size: 19px; } }

/* Tables (directories, data tools, police log) */
table.dir th { background: transparent; border-bottom: 2px solid var(--ink); color: var(--ink); }
table.dir { background: transparent; }

/* Town and section page headings get the same ink rule as the front page */
main .topic > .section-title { margin-top: 8px; }

/* ===== Front page to match the approved mockup (Oct. 22, 2026) ===== */
/* Lead: photo first, smaller serif headline */
.hero-grid .lead { display: flex; flex-direction: column; }
.hero-grid .lead .lead-photo { order: -1; margin: 0 0 14px; }
.hero-grid .lead .lead-photo figcaption { font-size: 12px; line-height: 1.4; }
.hero-grid .lead h2 { font-size: clamp(26px, 3.1vw, 34px); line-height: 1.15; margin: 4px 0 8px; }
.hero-grid .lead .dek { font: 400 18px/1.5 var(--serif); color: #3A4654; margin: 6px 0 0; }
.hero-grid .lead .chips { margin-top: 12px; }
/* Top stories: compact rows with a small thumbnail */
.hero-grid .top-story { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.hero-grid .top-story > * { grid-column: 2; min-width: 0; }
.hero-grid .top-story > .thumb { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.hero-grid .top-story > .thumb figcaption, .hero-grid .top-story > .thumb .photo-label { display: none; }
.hero-grid .top-story:not(:has(> .thumb)) { display: block; }
.hero-grid .top-story h3 { font-size: 18px; line-height: 1.25; margin: 2px 0 4px; }
.hero-grid .top-story p:not(.kicker):not(.dateline) { display: none; }
.hero-grid .top-story .kicker { margin-bottom: 2px; }
@media (max-width: 620px) { .hero-grid .top-story { grid-template-columns: 96px minmax(0, 1fr); } }
/* Front page proportions: give the top-story column room for its headlines */
.hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 28px; }
.hero-grid .top-story { grid-template-columns: 96px minmax(0, 1fr); }
.hero-grid .top-story .card-note { display: none; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Header from the approved mockup (Oct. 22, 2026), ported from Main.dc.html. ===== */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important}
.topbar{background:#0E2A45;color:#fff;font:400 13px/1.3 'Inter',var(--sans)}
.topbar .wrap{max-width:1280px;padding:10px 32px;display:flex;align-items:center;justify-content:space-between}
.topbar .tb-l{display:flex;align-items:center;gap:24px}.topbar .util{display:flex;gap:24px}
.topbar a{color:#fff;font-weight:400;text-decoration:none}.topbar a:hover{text-decoration:underline}
.topbar .lang-switch{margin:0;gap:16px;font:600 13px/1.3 'Inter',var(--sans)}
.topbar .lang-switch a{min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;color:#fff;opacity:.85;font-weight:600}
.topbar .lang-switch a[aria-current]{opacity:1;background:none;color:#fff}
.masthead{position:relative;max-width:1280px;margin:0 auto;padding:22px 32px 18px;display:flex;align-items:center;gap:16px;text-align:left;border-bottom:0}
.masthead .mh-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.masthead .mh-icon{width:44px;height:44px;margin:0;border-radius:10px;max-width:none}
.mh-words{display:flex;flex-direction:column}
.mh-name{font:700 34px/1 'Lora',Georgia,serif;letter-spacing:-.3px;color:#15395B}
.mh-slogan{font:italic 400 14px/1.2 'Source Serif 4',Georgia,serif;color:#4A5663;margin-top:3px}
.mh-wx,.mh-fuel{display:none!important}
.mh-tools{position:static;display:flex;gap:8px;order:2;pointer-events:auto}
.mh-btn{width:42px;height:42px;border:1px solid #D5DAE0;background:#fff;border-radius:50%}
.mh-btn svg{color:#1B2430}
.mh-tools #mh-a{border-color:transparent}
.mh-date{order:3;font:400 14px/1 'Inter',var(--sans);color:#4A5663;white-space:nowrap}
.mh-cta{order:4;background:#15395B;color:#fff;font:600 14px/20px 'Inter',var(--sans);padding:12px 20px;border-radius:6px;text-decoration:none;white-space:nowrap}
.mh-pop{left:auto;right:32px;top:76px}
.wx-alerts{border-top:0}
nav.main.menu{background:#fff;border-top:3px solid #15395B;border-bottom:1px solid #D5DAE0;position:static}
nav.main.menu .menu-row{max-width:1280px;padding:0 32px}
nav.main.menu ul.desk{gap:28px}
nav.main.menu .desk>li:first-child{display:none}
nav.main.menu .desk a,nav.main.menu summary{padding:14px 0;font:600 15px/1.3 'Inter',var(--sans);color:#1B2430}
nav.main.menu .desk a:hover,nav.main.menu .desk a.on,nav.main.menu summary:hover,nav.main.menu .dd.on>summary,nav.main.menu .dd[open]>summary{color:#15395B;box-shadow:none;text-decoration:underline;text-underline-offset:6px}
nav.main.menu .desk li.season a{background:#fff;color:#A3341F;border:1.5px solid #A3341F;padding:8px 14px;margin:6px 0;font-size:14px;font-weight:600;text-decoration:none}
nav.main.menu .desk li.season a:hover{background:#A3341F;color:#fff}
.scores-strip{background:#F4F1EA}
.scores-strip .wrap{max-width:1280px;padding:10px 32px}
.scores-strip .win-ribbon{display:flex;align-items:center;gap:0 26px;margin:0;padding:0;background:none;border:0;font:400 13px/1.3 'Inter',var(--sans);white-space:nowrap;overflow:hidden}
.scores-strip .win-ribbon ul{display:flex;gap:26px;margin:0;padding:0;list-style:none;flex:1;min-width:0}
.scores-strip .win-dot{display:none}
.scores-strip .win-ribbon-k{margin:0;font:700 12px/1.3 'Inter',var(--sans);letter-spacing:.8px;text-transform:uppercase;color:#4A5663}
.scores-strip .win-more{margin-left:auto;font-weight:600;color:#15395B;text-decoration:none}
@media (max-width:700px){
 .topbar .wrap,.scores-strip .wrap{padding:8px 16px}.topbar .util a:nth-child(n+3){display:none}
 .masthead{flex-wrap:wrap;padding:14px 16px 12px;gap:10px}
 .mh-name{font-size:26px}.mh-icon{width:36px;height:36px}.mh-slogan{font-size:12px}
 .mh-date,.mh-cta{display:none}
 nav.main.menu .menu-row{padding:0 8px}
 .scores-strip .win-ribbon li:nth-child(n+2){display:none}
}
/* Alert banners retired from the header (Oct. 22, 2026, editor request): active alerts show in the Today rail and the bell. */
.wx-alerts{display:none!important}
.mh-tools #mh-a{display:none}
/* Mockup type system, site wide (Oct. 22, 2026): Source Serif 4 headlines, Inter text. Lora stays on the wordmark and footer name. */
:root{--serif:'Source Serif 4',Georgia,'Times New Roman',serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.sf-name{font-family:'Lora',Georgia,serif}
.scores-strip .win-more{flex:none;white-space:nowrap}
@media (max-width:700px){.scores-strip .win-ribbon ul{overflow:hidden;text-overflow:ellipsis}.scores-strip .win-ribbon li:nth-child(n+2){display:none}.scores-strip .win-ribbon li{min-width:0;overflow:hidden;text-overflow:ellipsis}}

/* Oct. 22, 2026: town page card blocks always fill both columns */
.cards > :only-child{grid-column:1 / -1}