/* Palette, type scale and spacing come from the one token file.
   Nothing below may declare a raw colour. */
@import url("/assets/css/rd-tokens.css?v=20260915d");

/* Rochdale Daily — Editorial Cohesion Refresh
   ===========================================
   This layer intentionally does NOT target .breaking-* or .traffic-*.
   The red breaking ticker and amber traffic ticker remain the site's loud,
   live-news components. Everything around them is calmer and more editorial.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Libre+Franklin:wght@600;700;800&display=swap');


html { background: var(--deep); }
body {
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
.page-shell { background: var(--paper); }
.wrap { width: min(var(--max), calc(100% - 40px)); }

/* ---------- Quiet utility strip ---------- */
.utility {
  background: var(--navy);
  color: #f7f8f8;
  border: 0;
  font-family: var(--utility);
  font-size: 12px;
  letter-spacing: .015em;
}
.utility-row { min-height: 32px; }
.utility-left, .utility-links { gap: 14px; }
.utility-divider { height: 13px; background: rgba(255,255,255,.2); }
.utility-links a { color: rgba(255,255,255,.76); }
.utility-links a:hover { color: #fff; }
.date-stamp { color: #fff; font-weight: 700; }
.weather-location, .weather-condition { color: rgba(255,255,255,.64); }
.time-stamp { font-weight: 700; }

/* ---------- Masthead: newspaper, not app header ---------- */
.masthead {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--line);
}
.masthead-row {
  min-height: 112px;
  gap: 30px;
}
.brand-logo {
  filter: none;
  width: clamp(245px, 28vw, 330px);
}
.brand-text-fallback {
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: -.04em;
}
.masthead-actions { gap: 8px; }
.masthead-search {
  width: clamp(205px, 22vw, 285px);
  min-height: 43px;
  padding: 9px 13px;
  border: 1px solid #aeb5ba;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  box-shadow: none;
}
.masthead-search svg { stroke: var(--navy); }
.masthead-search:hover,
.masthead-search:focus-visible {
  border-color: var(--navy);
  background: var(--soft);
  color: var(--ink);
}
.header-button,
.masthead .header-button {
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-family: var(--utility);
  letter-spacing: .04em;
  padding: 10px 14px;
}
.header-button.solid,
.masthead .header-button.solid {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ---------- Navigation becomes a rule-led edition bar ---------- */
.primary-nav {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid var(--navy);
  box-shadow: 0 2px 0 rgba(16,40,63,.03);
}
.nav-row { min-height: 45px; }
.nav-row::after {
  background: linear-gradient(to right, rgba(255,254,250,0), var(--paper));
}
.nav-list a,
.nav-list button,
.menu-search {
  min-height: 45px;
  color: var(--ink);
  border-right: 0;
  background: transparent;
  padding: 0 12px;
  font-family: var(--utility);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
}
.nav-list a:first-child,
.nav-list li:first-child button { padding-left: 0; }
.nav-list a:hover,
.nav-list button:hover,
.nav-list .active,
.menu-search:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.menu-search svg { stroke: currentColor; }
.menu-toggle {
  background: transparent;
  color: var(--ink);
  font-family: var(--utility);
  letter-spacing: .04em;
}

/* ---------- Advertising: visible, but not another design system ---------- */
.ad-slot {
  min-height: 78px;
  margin: 18px auto 26px;
  border: 1px solid #deddd8;
  background: #faf9f5;
  color: #8a8f93;
  letter-spacing: .08em;
}
.ad-slot strong { color: #6e7479; }
.ad-slot.ad-live { background: transparent; border: 0; }

/* ---------- Universal editorial section rhythm ---------- */
.section { padding: 30px 0 42px; }
.section + .section { border-top: 1px solid #eceae4; }
.section-head {
  align-items: baseline;
  gap: 18px;
  border: 0;
  border-top: 3px solid var(--navy);
  border-bottom: 1px solid var(--line);
  padding: 10px 0 11px;
  margin-bottom: 22px;
}
.section-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(29px, 3vw, 39px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.025em;
  text-transform: none;
}
.section-link {
  color: var(--accent);
  border: 0;
  font-family: var(--utility);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.feed-status {
  color: var(--muted);
  font-family: var(--utility);
  font-weight: 600;
  letter-spacing: .035em;
}

/* ---------- Story hierarchy ---------- */
/* Front page: three columns on one grid, separated by hairline rules.
   The design sets four equal columns and lets Top stories span two, so the
   centre is exactly twice either rail. Gap is 0 on purpose - the columns are
   separated by a 1px rule with 26px of air either side, the way a printed page
   is, not by whitespace alone. */
.lead-grid {
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0;
  align-items: start;
}
.front-col { min-width: 0; }
.front-just-in { padding: 0 26px 26px 0; border-right: 1px solid var(--line); }
.front-main    { padding: 0 26px 26px; }
.front-rail    {
  padding: 0 0 26px 26px;
  border-left: 1px solid var(--line);
  display: grid; gap: 34px; align-content: start;
}
/* .latest-panel carried a left rule and left padding from when it sat on the
   right of the page. It is the left column now; .front-just-in owns the rule. */
.front-just-in.latest-panel { border-left: 0; padding-left: 0; }

/* The weather panel moved here from the lower side rail, so it needs the rail's
   flat treatment rather than the boxed card it used to be. */
.front-rail .weather-box { border-top: 0; background: transparent; padding: 0; }

/* Rail furniture: a small tracked label over an ink rule, the way each block is
   headed in the design. */
.front-rail .rail-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
}
.rail-block { margin: 0; }
.camera-credit { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.camera-credit a { color: var(--accent); }
.lead-story,
.secondary-story,
.news-card,
.event-card,
.support-card,
.directory-card { background: transparent; }
.story-image-wrap { background: #e9e7e1; }
.story-image-wrap img { transition: opacity .16s ease; }
.story-link:hover img { transform: none; opacity: .93; }
.story-kicker {
  color: var(--accent);
  margin: 12px 0 5px;
  font-family: var(--utility);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.story-kicker.black { color: var(--accent); }
.lead-headline,
.secondary-headline,
.card-headline {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.025em;
}
.lead-headline {
  max-width: 16ch;
  font-size: clamp(39px, 4.7vw, 62px);
  font-weight: 800;
  line-height: .99;
}
.secondary-headline {
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.06;
}
.card-headline {
  font-size: clamp(21px, 1.8vw, 25px);
  font-weight: 700;
  line-height: 1.08;
}
.story-summary,
.card-summary { color: var(--muted); }
.story-summary { max-width: 62ch; font-size: 15px; line-height: 1.55; }
.card-summary { font-size: 13.5px; line-height: 1.5; }
.story-meta {
  color: #7b838a;
  font-family: var(--utility);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .025em;
}
.secondary-stack { gap: 22px; }
.secondary-story + .secondary-story { border-top: 1px solid var(--line); padding-top: 20px; }

/* 'Read more' is editorial furniture, not a red CTA on every article. */
.read-more-button {
  display: inline-block;
  margin-top: 12px;
  padding: 0 0 2px;
  background: transparent;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  font-family: var(--utility);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.story-link:hover .read-more-button,
.story-link:focus-visible .read-more-button {
  background: transparent;
  color: var(--navy);
  transform: none;
}
.card-comments { color: #7b838a; font-family: var(--utility); }

/* Latest rail reads like a newspaper column. */
.latest-panel {
  border-left: 1px solid var(--line);
  padding-left: 22px;
}
.panel-title,
.rail-title {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.02em;
}
.panel-title {
  font-size: 25px;
  border: 0;
  border-top: 3px solid var(--navy);
  padding: 8px 0 7px;
}
.latest-item { padding: 12px 0; }
.latest-item a,
.latest-item button {
  color: var(--ink);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.latest-item a:hover,
.latest-item button:hover { color: var(--accent); }
.latest-time { font-family: var(--utility); font-size: 10.5px; font-weight: 600; }

/* ---------- Filters become tabs, not a pile of buttons ---------- */
.category-toolbar,
.event-filters,
.dem-tabs {
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.filter-button,
.event-filter,
.dem-tab {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 11px 9px;
  font-family: var(--utility);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
}
.filter-button:first-child,
.event-filter:first-child,
.dem-tab:first-child { padding-left: 0; }
.filter-button:hover,
.filter-button.active,
.event-filter:hover,
.event-filter.active,
.dem-tab:hover,
.dem-tab[aria-selected="true"] {
  background: transparent;
  border-color: var(--accent);
  color: var(--ink);
}

/* ---------- Main news grid ---------- */
.news-layout { grid-template-columns: minmax(0, 2fr) 315px; gap: 34px; }
.news-grid,
.weekly-news-grid { gap: 28px 24px; }
.news-card {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.tag-row { margin-top: 9px; }
.tag {
  background: transparent;
  color: #7b838a;
  border: 1px solid #d5d7d8;
  padding: 3px 6px;
  font-family: var(--utility);
  font-weight: 700;
}
.tag.crime { background: transparent; border-color: rgba(200,16,46,.35); color: #a3122b; }
.tag.demo { background: transparent; color: var(--accent); border-color: rgba(23,109,125,.35); }

/* ---------- Side rail ---------- */
.side-rail { gap: 26px; }
.rail-box,
.weather-box,
.sidebar-box {
  background: transparent;
  border: 0;
  border-top: 3px solid var(--navy);
  padding: 12px 0 0;
}
.rail-box.red { border: 0; border-top: 3px solid var(--navy); background: transparent; }
.rail-box.yellow { background: var(--soft); border-top-color: var(--navy); padding: 16px; }
.rail-title { font-size: 24px; line-height: 1.05; }
.rail-copy { color: var(--muted); }
.rail-input,
.ward-picker select,
.dem-ward-pick select {
  border: 1px solid #aeb5ba;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}
.rail-button {
  background: var(--navy);
  color: #fff;
  font-family: var(--utility);
  letter-spacing: .04em;
}
.weather-day { border: 0; border-top: 1px solid var(--line); padding: 9px 0; }
.weather-day:first-child { border-top: 0; }
.weather-day.today { border-color: var(--line); background: transparent; }

/* Police/reporting is allowed functional red, but loses the billboard box. */
.report-box {
  border: 0;
  border-top: 3px solid var(--red);
  background: #faf9f5;
  padding: 15px;
}
.report-box h3 {
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  text-transform: none;
}
.report-action { border: 0; border-top: 1px solid var(--line); padding: 9px 0; }
.report-action:first-child { border-top: 0; }
.report-action:hover { color: var(--red); }

/* ---------- Newsletter is the one calm branded block ---------- */
.newsletter-band {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 42px 0;
}
.newsletter-band + .section { border-top: 0; }
.newsletter-band .section-title { color: #fff; font-size: clamp(31px, 3.4vw, 43px); }
.newsletter-band .story-kicker { color: #93d3dc; }
.newsletter-copy p { color: rgba(255,255,255,.76); }
.newsletter-pill {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
}
.newsletter-row { gap: 0; }
.newsletter-row input {
  border: 1px solid #aab5bf;
  border-radius: 0;
  padding: 13px 14px;
}
.newsletter-row button {
  border-radius: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--utility);
  font-weight: 800;
  letter-spacing: .035em;
}
.newsletter-row button:hover { filter: none; background: #e9eef1; }
.newsletter-status { color: #b8e5eb; }

/* ---------- What's on: same newspaper, not a black microsite ---------- */
.whats-on {
  background: #f3f1eb;
  color: var(--ink);
  padding: 34px 0 46px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.whats-on .section-head { border-top-color: var(--navy); border-bottom-color: var(--line); }
.whats-on .section-link { color: var(--accent); }
.event-filter { color: var(--muted); }
.events-grid { gap: 22px; }
.event-card { color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.event-body { padding: 12px 0 0; }
.event-date {
  color: var(--accent);
  font-family: var(--utility);
  font-size: 11px;
  letter-spacing: .06em;
}
.event-card h3 {
  margin-top: 5px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.08;
}
.event-card p { color: var(--muted); font-size: 13px; }
.event-cta { border: 0; color: var(--accent); font-family: var(--utility); }
.add-event { border: 1px solid var(--line); background: var(--paper); }
.add-event-head { border-left: 0; }
.add-event-head h3 { font-family: var(--display); text-transform: none; font-size: 23px; }
.add-event-toggle,
.ae-submit { background: var(--navy); color: #fff; font-family: var(--utility); }
.ae-field input, .ae-field textarea, .ae-field select { border-radius: 0; background: #fff; }
.ae-drop { border-radius: 0; }

/* ---------- Democracy ---------- */
.dem-card,
.dem-empty {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.dem-card h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.18;
}
.dem-figure { color: var(--navy); font-family: var(--display); font-size: 32px; }
.dem-flag { background: var(--soft); color: var(--accent); }
.dem-mp .who { font-family: var(--display); font-weight: 700; }
.dem-aye { color: #147246; }
.dem-no { color: #a3122b; }

/* ---------- Support: remove the rainbow of unrelated card colours ---------- */
.support-intro { color: var(--muted); }
.support-grid { gap: 20px; }
.support-card,
.support-card.women,
.support-card.carers,
.support-card.food,
.support-card.money,
.support-card.child,
.support-card.older,
.support-card.animal,
.support-card.cats {
  border: 0;
  border-top: 2px solid var(--navy);
  padding: 14px 0 0;
}
.support-card.crisis { border: 0; border-top: 2px solid var(--red); padding: 14px 0 0; }
.support-card h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
}
.support-card p { color: var(--muted); }
.support-card a { color: var(--accent); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.support-lines a { color: var(--navy); font-family: var(--utility); font-size: 17px; }

/* ---------- Local services / commercial ---------- */
.directory-grid { gap: 18px; }
.directory-card {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}
.directory-card h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}
.directory-card p { color: var(--muted); }
.directory-card a { color: var(--accent); font-family: var(--utility); }
.advertise-panel {
  background: var(--navy);
  border: 0;
  color: #fff;
  padding: 22px;
}
.advertise-panel h3,
.advertise-panel p,
.advertise-panel a,
.advertise-panel strong { color: #fff; }
.advertise-panel h3 { font-family: var(--display); text-transform: none; font-size: 29px; }
.advertise-panel .header-button.solid { border-color: #fff; background: #fff; color: var(--navy); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: #fff;
  border: 0;
  padding: 44px 0 24px;
}
.footer-brand {
  color: #fff;
  font-family: var(--display);
  font-size: 31px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.02em;
}
.footer-copy { color: rgba(255,255,255,.65); line-height: 1.55; }
.footer-col h3 {
  color: #fff;
  font-family: var(--utility);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
}
.footer-col a { color: rgba(255,255,255,.72); }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(255,255,255,.17); color: rgba(255,255,255,.48); }

/* ---------- Search, cookie, utility controls ---------- */
.search-panel { border-top: 4px solid var(--navy); box-shadow: var(--shadow); }
.search-panel .panel-title { border-top: 0; font-size: 29px; }
.search-panel input { border: 1px solid #aeb5ba; }
.search-panel button { background: var(--navy); color: #fff; font-family: var(--utility); }
.search-close { background: var(--ink) !important; }
.cookie { background: var(--navy); border-top: 0; }
.cookie button { border-color: rgba(255,255,255,.5); font-family: var(--utility); }
.cookie-accept { background: #fff; color: var(--navy); }
.to-top { background: var(--navy); border-color: #fff; color: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.18); }
.to-top:hover { background: #1b3c59; }

/* ---------- Article pages ---------- */
body:has(.article-main) { background: var(--paper); }
body:has(.article-main) .masthead { border-bottom: 2px solid var(--navy); }
body:has(.article-main) .masthead-row { min-height: 92px; }
body:has(.article-main) .brand-logo { width: clamp(225px, 25vw, 300px); }
body:has(.article-main) .modal-card {
  width: min(1220px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  background: var(--paper);
}
body:has(.article-main) .article-body { padding: 40px 0 64px; }
.article-layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 54px; }
.article-main { min-width: 0; }
.article-breadcrumb {
  color: var(--muted);
  margin-bottom: 19px;
  font-family: var(--utility);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.article-main > .story-kicker { margin-top: 0; }
.article-main h1,
.article-body h1 {
  max-width: 18ch;
  margin: 7px 0 16px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(42px, 5.3vw, 68px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
}
.article-standfirst {
  max-width: 58ch;
  color: #4f5b65;
  font-family: var(--sans);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.48;
}
.article-byline {
  margin: 22px 0 14px;
  padding: 11px 0;
  border-color: var(--line);
  color: #5e6871;
  font-family: var(--utility);
  font-size: 12px;
  font-weight: 600;
}
.article-share { margin: 15px 0 27px; }
.share-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
}
.share-icon-button:hover { background: var(--navy); color: #fff; }
.article-copy {
  max-width: 720px;
  color: var(--ink);
  /* Reading text uses the BODY face, not the display face. Libre Franklin is
     drawn for headlines; several thousand words of it is tiring. Inter is the
     one built for long-form screen reading. */
  font-family: var(--font-body);
  font-size: clamp(18.5px, 1.55vw, 20px);
  line-height: 1.7;
}
.article-copy p { margin: 0 0 1.22em; }
.article-copy a { color: var(--accent); text-underline-offset: 3px; }
.article-sources { color: var(--muted); font-family: var(--sans); font-size: 13px; }
.editorial-legal-note {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
  padding: 18px 0 !important;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}
.editorial-legal-note h3 { color: var(--ink); font-family: var(--display); }
.article-sidebar { gap: 28px; top: 62px; }
.sidebar-box h3 {
  border: 0;
  margin-bottom: 13px;
  padding: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.01em;
}
.related-story { padding: 10px 0; border-top: 1px solid var(--line); }
.related-story:first-of-type { border-top: 0; }
.related-story img { width: 78px; height: 58px; }
.related-story .related-title { font-family: var(--display); font-size: 14px; line-height: 1.22; }
.newsletter-box { background: var(--navy); color: #fff; padding: 17px; border: 0; }
.newsletter-box h3 { color: #fff; }
.newsletter-box p { color: rgba(255,255,255,.72); }
.newsletter-box input { border-radius: 0 !important; }
.newsletter-box button { background: #fff !important; color: var(--navy) !important; border-radius: 0 !important; }
.comments-section { border-top: 2px solid var(--navy); }
.comments-section h2 { font-family: var(--display); text-transform: none; font-size: 26px; }
.comment { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 14px 0; }
.comment-user { color: var(--navy); font-family: var(--utility); }
.comment-submit { background: var(--navy); border-color: var(--navy); color: #fff; }
.comment-submit:hover { background: #1b3c59; }

/* ---------- Mobile: same design language, shorter scroll ---------- */
@media (max-width: 1050px) {
  /* Below 1050 the rail drops under the news rather than squeezing the lead
     headline into a column too narrow to set it. */
  .lead-grid { grid-template-columns: 1fr 2fr; }
  .front-rail {
    grid-column: 1 / -1;
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .latest-list { gap: 0 20px; }
}

@media (max-width: 820px) {
  /* The runtime-injected layer re-declared .lead-grid above but never collapsed
     it, so below 820px the browser kept a two-column grid whose second column
     had a 250px hard minimum. On a 390px phone that left 92px for the lead
     column and a 39px headline overflowed straight across the photo. */
  .lead-grid, .news-layout, .directory-wrap { grid-template-columns: 1fr; }
  /* One column: the news first, then Just in, then the rail. */
  .front-main { order: 1; padding: 0 0 26px; }
  .front-just-in {
    order: 2;
    border-right: 0; padding-right: 0;
    border-top: 1px solid var(--line); padding-top: 18px;
  }
  .front-rail { order: 3; grid-template-columns: 1fr; padding-top: 18px; }
  .secondary-stack { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  .wrap { width: min(var(--max), calc(100% - 28px)); }
  .masthead-row { min-height: 96px; }
  .brand-logo { width: clamp(225px, 38vw, 285px); }
  .section { padding: 26px 0 36px; }
  .section-head { margin-bottom: 18px; }
  .m-section { margin-bottom: 32px; }
  .m-section-head {
    border-top: 2px solid var(--navy);
    padding-top: 8px;
    margin-bottom: 12px;
  }
  .m-section-title {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: -.015em;
  }
  .m-section-more { color: var(--accent); font-family: var(--utility); }
  .mobile-jump { gap: 0; border-bottom: 1px solid var(--line); }
  .mobile-jump button,
  .mobile-jump button.primary {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--utility);
    padding: 8px 10px;
  }
  .mobile-jump button.primary { border-bottom-color: var(--accent); color: var(--ink); }
  .article-layout { grid-template-columns: 1fr; gap: 36px; }
  .article-sidebar { position: static; }
  .article-copy { max-width: 760px; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 22px, var(--max)); }
  .utility-row { min-height: 30px; }
  .masthead-row { min-height: 82px; }
  .brand-logo { width: min(205px, 60vw); }
  .primary-nav { border-bottom-width: 1px; }
  .nav-row { min-height: 44px; }
  .menu-toggle,
  .menu-search { min-height: 44px; color: var(--ink); padding: 0 11px; }
  .nav-list {
    top: 44px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 0;
    box-shadow: var(--shadow);
  }
  .nav-list a,
  .nav-list button {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 0 14px !important;
  }
  .nav-list a:hover,
  .nav-list button:hover,
  .nav-list .active { color: var(--accent); background: var(--soft); box-shadow: none; }

  .section-title { font-size: 29px; }
  .section-head { align-items: baseline; padding-top: 8px; }
  .lead-headline { max-width: none; font-size: clamp(35px, 10vw, 44px); }
  .lead-story .story-summary { font-size: 14px; }
  .secondary-headline { font-size: 24px; }

  /* Ordinary mobile cards become compact newspaper rows. */
  .m-section .news-card { padding-bottom: 14px; margin-bottom: 14px; }
  .m-section .news-card .story-link {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }
  .m-section .news-card .story-image-wrap {
    grid-column: 1;
    grid-row: 1 / span 6;
    aspect-ratio: 4 / 3;
  }
  .m-section .news-card .story-kicker,
  .m-section .news-card .card-headline,
  .m-section .news-card .card-summary,
  .m-section .news-card .tag-row,
  .m-section .news-card .read-more-button,
  .m-section .news-card .card-comments { grid-column: 2; }
  .m-section .news-card .story-kicker { margin: 0 0 3px; }
  .m-section .news-card .card-headline { font-size: 19px; line-height: 1.08; }
  .m-section .news-card .card-summary,
  .m-section .news-card .read-more-button { display: none; }
  .m-section .news-card .tag-row { margin-top: 6px; }
  .m-section .news-card .card-comments { margin-top: 6px; }

  .category-toolbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .category-toolbar::-webkit-scrollbar { display: none; }
  .filter-button { flex: 0 0 auto; }
  .newsletter-band { padding: 34px 0; }
  .newsletter-row { gap: 8px; }
  .events-grid { grid-template-columns: 1fr; }
  .event-card { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; padding-bottom: 14px; }
  .event-card > img { width: 120px; height: 90px; aspect-ratio: auto; }
  .event-body { padding-top: 0; }
  .event-card h3 { font-size: 20px; }
  .event-card p { display: none; }
  .support-grid,
  .directory-grid { gap: 24px; }
  .support-card h3 { font-size: 22px; }
  .footer-grid { gap: 22px; }

  body:has(.article-main) .masthead-row { min-height: 76px; }
  body:has(.article-main) .modal-card { width: min(100% - 22px, 1220px) !important; }
  body:has(.article-main) .article-body { padding: 28px 0 48px; }
  .article-main h1,
  .article-body h1 { max-width: none; font-size: clamp(38px, 11.5vw, 49px); line-height: 1; }
  .article-standfirst { font-size: 18px; }
  .article-copy { font-size: 18.5px; line-height: 1.68; }
  .article-sidebar { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-image-wrap img { transition: none; }
}


/* ---------- Headline safety ----------
   A single long word ("Gillingham", "Littleborough") set at display size will
   overflow any narrow column, and wrapping is cheaper than discovering it on a
   phone. But `anywhere` plus `hyphens: auto` is too strong a cure: it breaks
   ordinary words at any point and inserts hyphens, so the front page printed
   "Inquest reveals details of fatal crash into Heywoo/d pub after po/lice
   chase". A broadsheet does not hyphenate its front-page headline.

   `break-word` only breaks a word that genuinely cannot fit on a line of its
   own, which is the case this rule was written for, and `hyphens: manual`
   honours a soft hyphen an editor types deliberately while adding none. */
.lead-headline, .secondary-headline, .card-headline,
.panel-title, .section-title {
  overflow-wrap: break-word;
  hyphens: manual;
}

/* ==========================================================================
   Read next — end-of-story recirculation.

   Placed where the story ends, before the legal note. Sizing is driven by
   thumb reach rather than by how much fits: every tap target clears 48px, the
   lead card is a single full-width hit area, and the columns stack on a phone
   so nothing needs a second hand or a stretch to the top of the screen.
   ========================================================================== */
.read-next {
  margin: var(--space-7) 0 var(--space-6);
  padding-top: var(--space-5);
  border-top: 3px solid var(--brand-navy);
}
.rn-lead-heading {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 var(--space-4);
}

/* The lead card: one large, unambiguous target. */
.rn-card {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 112px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rn-card:hover, .rn-card:focus-visible { border-color: var(--brand-accent); box-shadow: var(--shadow-sm); }
.rn-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-text { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.rn-kicker {
  font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.rn-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink);
  overflow-wrap: anywhere;
}
.rn-meta { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* Two browsable columns: locality first, then section. */
.rn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.rn-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  margin: 0 0 var(--space-2); padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--line);
}
.rn-more { font-size: var(--text-xs); letter-spacing: .04em; color: var(--brand-accent); text-decoration: none; white-space: nowrap; }
.rn-more:hover { text-decoration: underline; }
.rn-item {
  display: flex; align-items: center;
  min-height: 48px;                 /* thumb target, not a text link */
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  font-size: var(--text-md); line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.rn-item:last-child { border-bottom: 0; }
.rn-item:hover, .rn-item:focus-visible { color: var(--brand-accent); }
.rn-all {
  display: block; margin-top: var(--space-5); padding: var(--space-4);
  text-align: center; text-decoration: none;
  font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-navy); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); min-height: 48px;
}
.rn-all:hover { background: var(--surface-2); }

@media (max-width: 620px) {
  /* Stack the card: a 168px image column leaves too little for a headline on
     a phone, which is the same mistake the lead grid was making. */
  .rn-card { grid-template-columns: 1fr; }
  .rn-card img { aspect-ratio: 16 / 9; height: auto; }
  .rn-text { padding: var(--space-4); }
  .rn-cols { gap: var(--space-6); }
}

/* ==========================================================================
   Next bar — the thumb-reach exit from a story.

   Sits in the bottom third of the screen because that is where a thumb rests
   on a one-handed grip, and carries the real next headline so the reader knows
   what they are moving to rather than tapping a blind arrow. Phones only:
   on desktop the sidebar and the Read-next block already do this job.
   ========================================================================== */
.next-bar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 900;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "title arrow";
  align-items: center;
  gap: 0 var(--space-3);
  padding: 10px var(--space-4);
  min-height: 56px;                       /* comfortably above the 48px floor */
  background: var(--brand-navy);
  color: var(--on-dark);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transform: translateY(calc(100% + 20px));
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  /* keep clear of the iOS home indicator */
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.next-bar.is-visible { transform: translateY(0); opacity: 1; }
.next-bar-label {
  grid-area: label;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent-lift);
}
.next-bar-title {
  grid-area: title;
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; line-height: 1.25; color: var(--on-dark);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.next-bar-arrow { grid-area: arrow; font-size: 28px; line-height: 1; color: var(--brand-accent-lift); }

/* A brief acknowledgement that the swipe registered, so the tap does not feel
   like nothing happened while the next page loads. */
body.is-advancing { opacity: .55; transition: opacity .18s ease; }

@media (min-width: 821px) { .next-bar { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .next-bar { transition: none; }
  body.is-advancing { transition: none; opacity: 1; }
}

/* ==========================================================================
   The river — endless local news, honestly labelled.
   ========================================================================== */
.river { padding: var(--space-7) 0 var(--space-8); border-top: 3px solid var(--brand-navy); margin-top: var(--space-7); }
.river-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.river-head h2 {
  font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700;
  letter-spacing: .01em; color: var(--ink); margin: 0;
}
.river-head p { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.river-stream { display: grid; gap: 0; }
.river-day {
  margin: var(--space-6) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.river-day:first-child { margin-top: 0; }
.river-item {
  display: grid; gap: 4px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  min-height: 56px;                       /* thumb target */
}
.river-item:hover .river-title, .river-item:focus-visible .river-title { color: var(--brand-accent); }
.river-meta {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.river-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink);
  overflow-wrap: anywhere;
}
.river-standfirst { font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

/* The honest boundary between news and archive. */
.river-marker {
  display: grid; justify-items: center; gap: 4px;
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}
.river-marker-line { width: 44px; height: 3px; background: var(--brand-accent); border-radius: 2px; margin-bottom: var(--space-3); }
.river-marker-text {
  font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700; color: var(--ink);
}
.river-marker-note { font-size: var(--text-sm); color: var(--muted); max-width: 34ch; }

.river-status { padding: var(--space-7) 0 0; text-align: center; }
.river-end-title { font-family: var(--font-ui); font-weight: 700; font-size: var(--text-md); color: var(--ink); margin: 0 0 6px; }
.river-end-note { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.river-end-note a { color: var(--brand-accent); }
.river-sentinel { height: 1px; }

/* ---------------------------------------------------------- pull to refresh */
.ptr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  height: 52px; margin-top: -52px;
  background: var(--brand-navy); color: var(--on-dark);
  font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: .02em;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
}
.ptr.is-active { opacity: 1; }
.ptr.is-busy { transform: translateY(52px) !important; }
@media (prefers-reduced-motion: reduce) { .ptr { transition: none; } }

/* Crime and court reporting: comments closed, and said plainly rather than
   silently omitted, so the absence does not look like a fault. */
.comments-closed {
  margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--breaking); background: var(--surface);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.comments-closed p { margin: 0; }
.comments-closed a { color: var(--brand-accent); }

/* ---------------------------------------------------------- daily briefing */
.brief-area {
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent);
}
.article-copy h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.article-copy ul { padding-left: 0; list-style: none; margin: 0; }
.article-copy ul li {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line); line-height: var(--leading-snug);
}
.article-copy ul li:last-child { border-bottom: 0; }
.brief-foot {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--muted);
}

/* ==========================================================================
   Filter bar — two axes, clearly separate from navigation.

   The main nav used to carry category filters, township filters, a page anchor
   and an external link in one undifferentiated row, so a reader could not tell
   what a click would do, and at 1440px the row clipped and the townships were
   simply unreachable. Filters now live here, labelled by axis and scrollable
   so nothing can ever be cut off again.
   ========================================================================== */
/* The filter bar speaks the same language as the primary nav: plain uppercase
   labels, no borders, no pills, the accent underline for the active one. Two
   rows of bordered pills read as a second, louder navigation system fighting
   the first; two quiet rows of text read as part of the same paper. */
.filter-bar {
  display: grid; gap: 0;
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.filter-row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  align-items: center; gap: var(--space-2);
}
.filter-row + .filter-row { border-top: 1px solid var(--line); }
.filter-label {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; line-height: 1;
}
.filter-bar .category-toolbar,
.filter-bar .area-toolbar {
  display: flex; flex-wrap: nowrap; gap: 0; margin: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* fade at the right edge says "more" without a scrollbar */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.filter-bar .category-toolbar::-webkit-scrollbar,
.filter-bar .area-toolbar::-webkit-scrollbar { display: none; }
.filter-bar .filter-button {
  flex: 0 0 auto; min-height: 44px; padding: 0 12px;
  font-family: var(--utility); font-size: 13px; font-weight: 700;
  letter-spacing: .025em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  white-space: nowrap;
}
.filter-bar .filter-button:first-child { padding-left: 0; }
.filter-bar .filter-button:hover,
.filter-bar .filter-button.active {
  background: transparent; border: 0;
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.filter-bar .filter-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Navigation is now destinations only, so it can wrap instead of clipping. */
.nav-list { flex-wrap: wrap; }

@media (max-width: 620px) {
  .filter-row { grid-template-columns: 64px minmax(0, 1fr); }
  .filter-label { font-size: 10px; }
  .filter-bar .filter-button { font-size: 12px; padding: 0 10px; }
  /* On a phone the heading, the "updated" stamp and "Show all" fought for one
     row and every one of them wrapped. Heading on its own line; the two small
     items share the next one. */
  .section-head { flex-wrap: wrap; row-gap: 4px; }
  .section-head .section-title { flex: 1 0 100%; }
  .section-head .feed-status { margin-left: 0; white-space: nowrap; }
  .section-head .section-link { margin-left: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------- cookie banner
   The full policy filled two thirds of the first screen a new reader ever saw,
   which cost more readers than any feature on the page could win back. Same
   choices, same consent, far less of their screen. */
.cookie-short { display: none; }
@media (max-width: 820px) {
  .cookie { padding: var(--space-3) 0; }
  .cookie-long { display: none; }
  .cookie-short { display: block; font-size: 13px; line-height: 1.45; }
  .cookie-short a { color: var(--brand-accent-lift); }
  .cookie-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .cookie-actions button { width: 100%; min-height: 44px; }
}


/* Homepage leaderboard: the design draws this slot at 970 wide, centred.
   site.css sets .ad-slot.ad-live to width:100%/max-width:100% once a creative
   renders, which is why capping it from index.html's inline block did nothing -
   that rule loads later and ties on specificity. Matching .ad-live here wins.
   Footprint note: the booked creatives are 728x90, so at 970 wide they render
   970x120, not 970x90. A 728-wide image cannot be 970 wide and 90 tall at the
   same time; a true 970x90 needs 970x90 artwork from the advertiser. */
/* 15 Sep: the cap is gone. 970 was the canvas's nominal slot size, but on the
   page it left the leaderboard 270px narrower than every rule beneath it, so
   the paper appeared to start below the advert. The band is the paper's width
   and the creative sits centred inside it at its own size. */
.ad-slot.ad-live[data-ad-slot="home-leaderboard"],
.ad-slot[data-ad-slot="home-leaderboard"] {
  max-width: 100%;
  margin-inline: auto;
}


/* ---------------------------------------------------------------------------
 * Just in — the design's exact shape: a 56px thumbnail, a kicker, a serif
 * headline at 16px and a meta line, separated by dotted rules. The old markup
 * was a bare link with the time underneath, which is why the column read as a
 * list of links rather than as a column of stories.
 * ------------------------------------------------------------------------- */
.front-just-in .panel-title {
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Brick, not ink: the one warm accent in the column, as the design has it. */
  color: var(--breaking);
}
.front-just-in .latest-item {
  border-bottom: 1px dotted var(--line);
  padding: 13px 0;
}
.front-just-in .latest-item:last-child { border-bottom: 0; }
.front-just-in .latest-item > a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.latest-thumb {
  flex: none;
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-body { min-width: 0; display: grid; gap: 5px; }
.latest-kicker {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.latest-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.front-just-in .latest-time {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.front-just-in .latest-item > a:hover .latest-title { color: var(--accent); }

/* Section heads and rail labels share one treatment with the design. */
.front-rail .rail-title { font-size: 11.5px; letter-spacing: .18em; }


/* The centre column's own head: serif 20px against the same ink rule the two
   rail labels use, so all three columns start on one line. */
.front-main > .section-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  border-top: 0;
  padding: 0 0 7px;
  margin: 0 0 18px;
}
.front-main > .section-head .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
}
.front-main > .section-head .section-link {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}


/* Weather in the rail is the design's seven-column strip: day, glyph, degrees,
   one column per day. It was seven full-width rows carrying the condition text
   as well, which is a different component in the same space — and at 310px the
   rail could not hold "Light rain shower" beside a temperature anyway. */
.front-rail .weather-days {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.front-rail .weather-day {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.front-rail .weather-day.today { border: 0; background: transparent; }
/* The condition words do not fit a 40px column and the glyph already says it. */
.front-rail .weather-cond { display: none; }
.front-rail .weather-glyph { font-size: 17px; line-height: 1; color: var(--accent); }
.front-rail .weather-temp { color: var(--ink); font-weight: 600; font-size: 11px; }
.front-rail .weather-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.front-rail .weather-place { font-family: var(--font-ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.front-rail .rail-copy, .front-rail .weather-note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

/* The report box is a rail block now, not a boxed card. */
.front-rail .report-box { border: 0; background: transparent; padding: 0; }
.front-rail .report-box h3 {
  margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--ink);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}