/* ============================================================
   The Sevenoaks Online — UK local newspaper theme
   White page, black ink, news-red accent (Newsquest/Iconic feel)
   ============================================================ */

:root{
  --accent:#c8102e;
  --accent-dark:#9e0c24;
  --ink:#16181c;
  --ink-soft:#3a3f47;
  --muted:#62686f;
  --line:#e2e4e8;
  --line-strong:#c9ccd2;
  --bg:#ffffff;
  --bg-tint:#f6f7f8;
  --bg-dark:#16181c;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --display:"Georgia","UnifrakturMaguntia",Georgia,serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1038px;
  --gut:20px;
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden; /* belt-and-braces: no sideways scroll on any device */
}
/* long headlines and slugs wrap instead of forcing horizontal overflow */
.lead-title,.article-title,.card-title,.rail-headline,.hub-head h1,.brand-name{
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gut);
}

/* ---- Accessibility helpers ---- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:200;
  background:var(--accent);color:#fff;font-weight:700;
  padding:10px 16px;border-radius:0 0 var(--radius) var(--radius);
  transition:top .15s ease;
}
.skip-link:focus{top:0;text-decoration:none}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{border-bottom:3px solid var(--accent)}

.utility-bar{
  background:var(--bg-tint);
  border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.utility-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:34px;gap:16px;
}
.utility-date{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.utility-links{display:flex;gap:18px;align-items:center}
.utility-links a{
  color:var(--ink-soft);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:11.5px;
}
.utility-links a:hover{color:var(--accent-dark);text-decoration:none}
.utility-subscribe{color:var(--accent-dark)!important}

/* ---- Masthead / nameplate ---- */
.masthead{background:var(--bg);padding:20px 0 16px}
.masthead-inner{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%}
.brand{
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--ink);text-decoration:none;text-align:center;
  max-width:100%;
}
.brand:hover{text-decoration:none}
.brand svg,.brand img{height:46px;width:auto;display:block;flex:0 0 auto}
.brand-name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,7vw,64px);
  line-height:1;
  letter-spacing:.01em;
  color:var(--ink);
  min-width:0;
  overflow-wrap:break-word;
}
.brand-strap{
  margin:0;
  font-family:var(--sans);
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);text-align:center;
}

/* ---- Primary red nav ---- */
.primary-nav{background:var(--accent)}
.nav-inner{
  position:relative;
  display:flex;align-items:center;
  min-height:46px;
}
.nav-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
}
.nav-links a{
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:13px 15px;
  border-bottom:3px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  background:var(--accent-dark);
  border-bottom-color:#fff;
  text-decoration:none;
  outline-offset:-3px;
}
.nav-links a.active{background:var(--accent-dark);border-bottom-color:#fff}
.nav-links .nav-subscribe{margin-left:auto;background:rgba(0,0,0,.16)}
.nav-links .nav-subscribe:hover{background:var(--accent-dark)}

/* CSS-only mobile menu (toggle leaves the tab order on desktop, where the drawer it controls is hidden) */
.nav-toggle{display:none}
.nav-burger{display:none}
.nav-backdrop{display:none}
.nav-drawer{display:none}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.section{
  padding-top:30px;
  padding-bottom:8px;
  border-top:1px solid var(--line);
  margin-top:4px;
}
main > .container:first-child{padding-top:6px}
.section-title{
  font-family:var(--sans);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--ink);
  margin:0 0 18px;
  padding-bottom:7px;
  border-bottom:3px solid var(--accent);
  display:inline-block;
}

/* Onward link under the home 'Latest news' grid into the full News hub
   (rendered only when site.latest_more_url is set). */
.section-more{
  display:flex;
  justify-content:center;
  margin:24px 0 6px;
}
.section-more-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent);
  text-decoration:none;
  border:2px solid var(--accent);
  border-radius:6px;
  padding:11px 24px;
  line-height:1;
  transition:background .12s,color .12s;
}
.section-more-link:hover{background:var(--accent);color:#fff}
.section-more-link svg{width:15px;height:15px;flex:0 0 auto}

/* ---- Section kicker / category label ---- */
.kicker{
  display:inline-block;
  font-size:11.5px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--cat,var(--accent));
  margin:0 0 7px;
}
.kicker a{color:var(--cat,var(--accent))}

/* ---- Breadcrumb ---- */
.breadcrumb{
  font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  padding:14px 0 0;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent-dark)}
/* Only the aria-hidden separators get the faint line colour; the current-page
   crumb (a bare span on hub pages) reads in --muted so it is legible, not the
   near-invisible #c9ccd2 it inherited when this rule caught every span. */
.breadcrumb span[aria-hidden]{margin:0 7px;color:var(--line-strong)}
.breadcrumb span:not([aria-hidden]){color:var(--muted)}

/* ============================================================
   LEAD / HERO BLOCK (Top Stories)
   ============================================================ */
section.lead{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:30px;
  /* top/bottom only: the shorthand's zero X-padding was overriding .container's
     side padding (section.lead outweighs .container), so the Top Stories rail
     sat flush against the screen edge on phones. */
  padding-top:24px;
  padding-bottom:26px;
  align-items:start;
}
/* Directory pages reuse class="lead" for their intro paragraph; style it as a
   readable standfirst, not the home-hero grid. */
.prose p.lead{
  font-size:1.12rem;
  line-height:1.65;
  color:#333;
  margin:.1em 0 1.3em;
  max-width:46em;
}
.lead-feature{
  position:relative;
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-dark);
}
.lead-media{
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--bg-tint);
  aspect-ratio:16/10;
  margin:0;
}
/* The hero is the front's biggest CTA, so it gets the same gentle zoom-on-hover
   every card and the section-hub lead already use, rather than sitting inert while
   the smaller cards react. Hovering anywhere on the feature (image or headline)
   drives it, matching .card:hover .thumb-img. Disabled under prefers-reduced-motion
   by the global reduce rule. */
.lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lead-feature:hover .lead-media img{transform:scale(1.04)}
.lead-feature-body{
  position:absolute;left:0;right:0;bottom:0;
  padding:70px 30px 24px;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 48%,rgba(0,0,0,0));
}
.lead-feature .kicker{
  color:#fff;background:var(--cat,var(--accent));
  padding:3px 9px;border-radius:2px;margin:0 0 10px;
}
.lead-title{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(25px,3.3vw,40px);
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0;
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}
.lead-title a{color:#fff}
.lead-title a:hover{color:#fff;text-decoration:underline}
.lead-meta{
  margin:11px 0 0;
  font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:rgba(255,255,255,.82);
}
.lead-meta time{color:inherit}
.lead-dek{
  margin:9px 0 0;
  max-width:42em;
  font-family:var(--sans);
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.45;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.lead-readmore{display:none}

/* ---- Lead rail (Latest news river) ---- */
.lead-rail{
  border-left:1px solid var(--line);
  padding-left:26px;
}
.rail-title{
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink);margin:0 0 10px;padding-bottom:7px;
  border-bottom:3px solid var(--accent);display:inline-block;
}
.rail-list{list-style:none;margin:0;padding:0;counter-reset:rail}
.rail-item{
  display:flex;gap:13px;align-items:flex-start;
  padding:13px 0;border-top:1px solid var(--line);
  counter-increment:rail;
}
.rail-item:first-child{border-top:0;padding-top:4px}
.rail-link{display:flex;gap:13px;align-items:flex-start;color:inherit;width:100%}
.rail-link:hover{text-decoration:none}
.rail-link:hover .rail-headline{color:var(--accent-dark)}
.rail-thumb{
  position:relative;overflow:hidden;
  flex:0 0 84px;width:84px;height:60px;object-fit:cover;
  border-radius:2px;background:var(--bg-tint);
}
/* Number each top story like a newspaper top-stories list: a small badge on the
   thumbnail giving the rail a clear scan order and visual identity. overflow:hidden
   above also clips the thumbnail to the same rounded corner as every other thumb. */
.rail-thumb::after{
  content:counter(rail);
  position:absolute;top:0;left:0;
  min-width:21px;height:21px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-family:var(--sans);font-weight:800;font-size:12px;line-height:1;
  border-radius:0 0 4px 0;
}
.rail-link:hover .thumb-img{transform:scale(1.05)}
.rail-text{display:flex;flex-direction:column;min-width:0}
.rail-headline{
  font-family:var(--sans);
  font-weight:700;
  font-size:15.5px;
  line-height:1.25;
  color:var(--ink);
  margin:0;
}
.rail-text .card-meta{margin-top:5px}

/* ============================================================
   CARD GRID
   ============================================================ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px 24px;
  padding-bottom:26px;
}
.card{
  display:flex;flex-direction:column;
  min-width:0;
}
.card-media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--bg-tint);aspect-ratio:16/10;margin-bottom:12px;
}
.card-media a{display:block;height:100%}
.thumb-img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.card:hover .thumb-img{transform:scale(1.035)}
.thumb-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef0f3,#dde1e6);
  color:var(--muted);font-family:var(--serif);font-weight:800;
  font-size:30px;letter-spacing:.02em;
}
.card-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.card-title{
  font-family:var(--sans);
  font-weight:800;
  font-size:20px;
  line-height:1.18;
  margin:4px 0 0;
  color:var(--ink);
  transition:color .12s ease;
}
/* The whole card is the anchor, so the title is a plain span: give it the same
   accent-dark headline hover the rail, hub lead and feature already use, so every
   clickable card across the home, hubs, related and directory reads as live. */
.card:hover .card-title{color:var(--accent-dark)}
.card-dek{
  font-size:15px;line-height:1.45;color:var(--ink-soft);
  margin:8px 0 0;
}
.card-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:11px;
  font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;font-weight:600;
}
/* On the headline-only grid cards, headlines run 1 to 3 lines, so the date landed
   at a different height on every card and a row read as a ragged staircase. Let the
   body grow and pin its meta to the bottom so the dates sit on one baseline across
   the row: a tidy shelf, the way quality news grids align their card furniture. The
   11px min gap survives via padding, and this is scoped to the grid card's own meta
   so the rail's inline date (inside .rail-text, not .card-body) is untouched. */
.card-body > .card-meta{margin-top:auto;padding-top:11px}
.card-meta .byline{color:var(--ink-soft);font-weight:700}
.card-meta .dot{color:var(--line-strong)}
.card-meta time{color:var(--muted)}

/* ============================================================
   ARTICLE
   ============================================================ */
.article{
  max-width:760px;
  margin:0 auto;
  padding:8px var(--gut) 40px;
}
.article-head{padding-top:18px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.article-title{
  font-family:var(--serif);
  font-weight:800;
  font-size:clamp(30px,5vw,48px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:8px 0 0;
  color:var(--ink);
}
.article-dek{
  font-size:20px;line-height:1.45;color:var(--ink-soft);
  margin:14px 0 0;
}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:18px;font-size:13.5px;color:var(--muted);
}
.article-meta .byline{color:var(--ink);font-weight:700}
.article-meta .byline strong{color:var(--accent-dark)}
.article-meta .dot{color:var(--line-strong)}
.article-hero{
  margin:0 0 8px;
  border-radius:var(--radius);overflow:hidden;background:var(--bg-tint);
}
.article-hero img{width:100%;height:auto}
.article-hero figcaption{
  font-size:12.5px;color:var(--muted);padding:8px 2px 0;line-height:1.4;
}

/* ---- Prose ---- */
.article-body{margin-top:8px}
.prose{font-size:18.5px;line-height:1.7;color:var(--ink)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{
  font-family:var(--sans);font-weight:900;font-size:26px;line-height:1.2;
  margin:1.7em 0 .5em;color:var(--ink);
}
.prose h3{
  font-family:var(--sans);font-weight:800;font-size:21px;line-height:1.25;
  margin:1.5em 0 .45em;color:var(--ink);
}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--accent)}
/* Mark off-site links so readers can see at a glance which take them out to the
   original source. Internal links are relative (start with "/"), so this only
   catches genuine external URLs; the glyph inherits the link colour via mask. */
.prose a[href^="http"]:not([href*="sevenoaksonline.co.uk"])::after{
  content:"";display:inline-block;width:.6em;height:.6em;
  margin:0 .04em 0 .2em;vertical-align:-.01em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h12v12h-3V9.1L6.1 20 4 17.9 14.9 7H8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h12v12h-3V9.1L6.1 20 4 17.9 14.9 7H8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* In-body data chart / key-facts graphic (own SVG, drawn from the story's figures). */
.article-figure{margin:1.7em 0}
.article-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px;background:#fff}
.article-figure figcaption{margin-top:7px;font-size:13.5px;color:var(--muted);font-style:italic}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin:0 0 .45em}
.prose li::marker{color:var(--accent)}
.prose blockquote{
  margin:1.5em 0;padding:6px 0 6px 22px;
  border-left:4px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.35;
  color:var(--ink);
}
.prose .service-alert{
  margin:1.6em 0;padding:14px 18px;
  background:var(--bg-tint);
  border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);
  font-family:var(--sans);font-size:16.5px;line-height:1.55;color:var(--ink);
}
.prose .service-alert p{margin:0}
.prose .service-alert strong{color:var(--accent-dark)}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--bg-tint);
  padding:2px 6px;border-radius:3px;border:1px solid var(--line);
}
.prose pre{
  background:var(--bg-dark);color:#f3f4f6;padding:16px 18px;border-radius:var(--radius);
  overflow:auto;font-size:14.5px;line-height:1.5;margin:0 0 1.3em;
}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose table{
  width:100%;border-collapse:collapse;margin:1.4em 0;font-size:16px;
}
.prose th,.prose td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;
  /* Tabular figures so digits sit in clean vertical columns across rows:
     this site's tables are mostly numeric (council tax bands, crime counts,
     sold prices), where proportional figures misalign place values. */
  font-variant-numeric:tabular-nums;
}
.prose th{
  background:var(--bg-tint);font-weight:800;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.04em;color:var(--ink);
  border-bottom:2px solid var(--line-strong);
}
/* Zebra striping makes dense data tables easier to read across a row; the even
   tint sits between white and the darker header tint so the header still leads. */
.prose tbody tr:nth-child(even) td{background:#fafbfc}
.prose tbody tr:hover td{background:#edeff1}
/* A table caption names what the reader is looking at (and screen readers announce
   it), set apart from the body as small muted furniture rather than another paragraph. */
.prose caption{
  caption-side:top;text-align:left;color:var(--muted);
  font-size:13px;letter-spacing:.02em;padding:0 0 8px;
}
/* Wide comparison tables (e.g. the car-park tariffs) can be broader than a phone
   screen; this wrapper lets one scroll sideways on its own instead of stretching
   the whole page. Narrow two-column tables never overflow, so they are unaffected. */
.prose .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0}
.prose .table-scroll table{margin:0;min-width:33rem}
/* Scroll-cue: on a narrow screen a wide table is clipped at the right edge with
   nothing to show the last column continues off-screen. When the base.html script
   detects real overflow it adds .is-scrollable and keeps .at-start/.at-end in step
   with the scroll position; this soft-fades whichever edge still has hidden columns
   past it, so the cut is obvious and the fade clears once you reach that end. The
   fade lifts while the region is keyboard-focused so the focus ring is never
   clipped, and with no JavaScript nothing changes. */
.prose .table-scroll.is-scrollable:not(:focus-visible){
  --fade:2.2rem;--l:transparent;--r:transparent;
  -webkit-mask-image:linear-gradient(to right,var(--l) 0,#000 var(--fade),#000 calc(100% - var(--fade)),var(--r) 100%);
          mask-image:linear-gradient(to right,var(--l) 0,#000 var(--fade),#000 calc(100% - var(--fade)),var(--r) 100%);
}
.prose .table-scroll.is-scrollable.at-start:not(:focus-visible){--l:#000}
.prose .table-scroll.is-scrollable.at-end:not(:focus-visible){--r:#000}
.prose img{margin:1.3em 0;border-radius:var(--radius)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* ---- Related ---- */
.related{
  border-top:1px solid var(--line);
  margin-top:34px;padding-top:22px;
}
.related .section-title{margin-bottom:16px}

/* ---- Home orientation block ----
   The closing "what this site is" copy on the news front. With no measure it ran
   the full grid width (a ~1100px reading line) and sat flush against the cards
   above. Set it apart with a rule like the related block, pull it into the same
   reading column the articles use, and lift the opening line into a standfirst. */
.explainer{
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:clamp(26px,4vw,40px);
  padding-bottom:8px;
}
.explainer .prose{max-width:720px;margin-inline:auto}
.explainer .prose>p:first-of-type{
  font-size:20px;line-height:1.55;color:var(--ink-soft);
}

/* ============================================================
   HUB / CATEGORY HEAD
   ============================================================ */
.hub-head{
  border-bottom:1px solid var(--line);
  padding-top:22px;
  padding-bottom:22px;margin-bottom:8px;
}
.hub-head .eyebrow{
  display:inline-block;
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;background:var(--accent);
  padding:4px 10px;border-radius:2px;margin:0 0 12px;
}
.hub-head h1{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:-.01em;
  margin:0;color:var(--ink);
}
.hub-head p,.hub-head .article-dek{
  font-size:18px;color:var(--ink-soft);margin:12px 0 0;max-width:62ch;
}

/* ---- Lead feature on section hubs: the newest dated story (News, What's On)
   or, on a thin evergreen section (Property, Local Info), the top reference page ---- */
.hub-lead{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:26px;align-items:center;
  padding:22px 0 4px;
  color:inherit;
}
.hub-lead:hover{text-decoration:none}
.hub-lead:hover .hub-lead-title{color:var(--accent-dark)}
.hub-lead-media{
  display:block;position:relative;overflow:hidden;
  border-radius:var(--radius);background:var(--bg-tint);
  aspect-ratio:16/10;
}
.hub-lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hub-lead:hover .hub-lead-media img{transform:scale(1.035)}
.hub-lead-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hub-lead-title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(22px,2.6vw,31px);line-height:1.12;letter-spacing:-.005em;
  color:var(--ink);margin:10px 0 0;
}
.hub-lead-dek{
  font-size:15.5px;line-height:1.5;color:var(--ink-soft);
  margin:10px 0 0;
}
.hub-lead .card-meta{margin-top:10px}

/* Onward section links for a thin hub (a single lead with no "More" grid, e.g.
   Property) so the page never dead-ends on one card. Purpose-built nav tiles,
   not story cards: each carries a coloured spine in the section's own colour,
   its blurb, and a clear hover lift into the rest of the site. */
.hub-more{padding-top:30px;padding-bottom:10px;border-top:1px solid var(--line);margin-top:4px}
.hub-more-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  padding-bottom:26px;
}
.hub-more-card{
  display:flex;flex-direction:column;
  padding:18px 20px;
  background:var(--bg);
  border:1px solid var(--line);
  border-left:4px solid var(--cat,var(--accent));
  border-radius:var(--radius);
  color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;
}
.hub-more-card:hover{
  text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.hub-more-card .kicker{margin-bottom:8px}
.hub-more-title{
  font-family:var(--sans);font-weight:800;font-size:19px;line-height:1.2;
  color:var(--ink);margin:0;
}
.hub-more-card:hover .hub-more-title{color:var(--accent-dark)}
.hub-more-dek{
  font-family:var(--sans);font-size:14.5px;line-height:1.45;
  color:var(--ink-soft);margin:8px 0 0;
}

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.newsletter{
  background:var(--accent);
  color:#fff;
  margin-top:34px;
}
.newsletter-inner{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:28px;align-items:center;
  padding:34px var(--gut);
}
.newsletter .kicker{color:#ffd9df}
.newsletter-title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(24px,3.4vw,34px);line-height:1.1;margin:0;color:#fff;
}
.newsletter-blurb{
  font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.92);
  margin:10px 0 0;max-width:54ch;
}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-form input[type=email]{
  flex:1 1 220px;min-width:0;
  font-family:var(--sans);font-size:16px;
  padding:13px 15px;border:0;border-radius:var(--radius);
  background:#fff;color:var(--ink);
}
.newsletter-form input[type=email]::placeholder{color:var(--muted)}
.newsletter-form button{
  flex:0 0 auto;
  font-family:var(--sans);font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.04em;
  padding:13px 26px;border:2px solid #fff;border-radius:var(--radius);
  background:var(--bg-dark);color:#fff;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.newsletter-form button:hover{background:#fff;color:var(--accent-dark)}
.newsletter-note{flex:1 1 100%;margin:4px 0 0;font-size:14.5px;line-height:1.45;color:#ffd9df}
.newsletter-form button:focus-visible{outline-color:#fff}
/* The newsletter band sits on --accent (red), so the global red focus ring is
   invisible on it. The button already overrides to white; the email input beside
   it needs the same, else keyboard focus on the field has no visible indicator. */
.newsletter-form input[type=email]:focus-visible{outline-color:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--bg-dark);
  color:#cfd3d9;
  border-top:3px solid var(--accent);
  margin-top:0;
  padding:36px 0 26px;
  font-size:15px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:30px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .brand--footer .brand-name{
  color:#fff;font-size:30px;
}
.footer-brand .brand--footer svg,
.footer-brand .brand--footer img{filter:brightness(0) invert(1);height:34px}
.footer-tagline{
  color:#9aa0a8;margin:12px 0 0;font-size:14px;max-width:42ch;line-height:1.5;
}
.footer-col h3{
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 9px}
.footer-col a{color:#cfd3d9}
.footer-col a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  padding-top:20px;font-size:13px;color:#9aa0a8;
}
.footer-parent{margin:0;font-weight:700;color:#cfd3d9;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.footer-legal{margin:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  section.lead{grid-template-columns:1fr;gap:24px}
  .hub-lead{grid-template-columns:1fr;gap:14px}
  .lead-rail{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:18px}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  .hub-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter-inner{grid-template-columns:1fr;gap:18px}
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width:680px){
  body{font-size:16px}
  .utility-links a:not(.utility-subscribe){display:none}
  /* the long tagline must not push the utility bar wider than the screen */
  .utility-inner{gap:12px}
  .utility-date{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:11px;letter-spacing:.04em;
  }
  .utility-links{flex:0 0 auto}
  .utility-links a.utility-subscribe{display:inline-flex;align-items:center;min-height:34px;padding:4px 2px}
  .card-grid{grid-template-columns:1fr;gap:22px}
  .hub-more-grid{grid-template-columns:1fr}
  .card{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:start}
  .card-media{margin-bottom:0;aspect-ratio:4/3}
  .card-title{font-size:17px}
  .card-dek{display:none}
  .prose{font-size:17px}
  /* Bare markdown tables (house prices, train times, crime figures) can be wider
     than a phone screen. The body carries overflow-x:hidden, so an unwrapped wide
     table had its right-hand columns clipped out of reach. Let each one scroll
     sideways on its own instead, the same treatment the manually wrapped
     .table-scroll tables already get. Scoped to direct children of .prose so the
     wrapped tables (which have their own scroll box) are left untouched, and
     narrow two-column tables, which never overflow, are unaffected. */
  .prose > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .footer-grid{grid-template-columns:1fr}

  /* ---- Mobile nav: burger + off-canvas drawer ---- */
  .nav-inner{justify-content:flex-start}
  /* zero-size but NOT display:none, so the toggle stays keyboard-operable here */
  .nav-toggle{display:block;position:absolute;opacity:0;pointer-events:none;width:0;height:0}
  .nav-toggle:focus-visible ~ .nav-burger{outline:2px solid #fff;outline-offset:-4px;border-radius:6px}
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:46px;cursor:pointer;margin-left:-8px;
  }
  .nav-burger span{
    display:block;width:24px;height:2.5px;background:#fff;border-radius:2px;
    transition:transform .2s ease,opacity .2s ease;
  }
  .nav-burger::after{
    content:"Menu";position:absolute;left:46px;
    color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;
  }
  .nav-links{display:none}

  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:90;
    background:rgba(0,0,0,.5);opacity:0;visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
  }
  .nav-drawer{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;z-index:100;
    width:82%;max-width:320px;
    background:var(--bg);color:var(--ink);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .25s ease,visibility .25s ease;
    box-shadow:2px 0 18px rgba(0,0,0,.2);
    overflow-y:auto;
  }
  .nav-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--accent);color:#fff;
    padding:14px 18px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  }
  .nav-close{font-size:28px;line-height:1;cursor:pointer;color:#fff;padding:0 4px}
  .nav-drawer a{
    display:block;color:var(--ink);font-weight:800;font-size:16px;
    text-transform:uppercase;letter-spacing:.02em;
    padding:15px 18px;border-bottom:1px solid var(--line);
  }
  .nav-drawer a:hover{background:var(--bg-tint);text-decoration:none;color:var(--accent-dark)}
  .nav-drawer a.active{background:var(--bg-tint);color:var(--accent-dark);box-shadow:inset 4px 0 0 var(--accent)}
  .nav-drawer .nav-subscribe{color:var(--accent-dark);margin-left:0;background:none}

  .nav-toggle:checked ~ .nav-backdrop{opacity:1;visibility:visible}
  .nav-toggle:checked ~ .nav-drawer{transform:translateX(0);visibility:visible}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .article-title{font-size:30px}
  .lead-title{font-size:25px}
  .lead-feature-body{padding:42px 18px 16px}
  .brand-strap{letter-spacing:.1em;font-size:10px;line-height:1.4}

  /* masthead must never overflow the viewport on phones */
  .masthead{padding:16px 0 14px}
  .brand{gap:9px}
  .brand svg,.brand img{height:38px}
  .brand-name{font-size:clamp(26px,8.5vw,40px)}

  /* share buttons hit 44px tap targets on touch screens */
  .news-article .sbtn{width:40px;height:40px}
  .news-article .article-share{row-gap:12px}
}

/* very narrow phones (iPhone SE / 360px Androids): tighten the blackletter so
   "The Sevenoaks Online" always fits without a sideways scroll. Blackletter glyphs
   are wide, so this is sized smaller than a normal serif would need. */
@media (max-width:420px){
  :root{--gut:16px}
  .brand{flex-wrap:wrap;justify-content:center;gap:6px}
  .brand svg,.brand img{height:30px}
  /* block + full width forces the wide blackletter to wrap at spaces instead of
     overflowing the viewport; centred so it reads as a stacked nameplate */
  .brand-name{
    display:block;width:100%;
    font-size:clamp(22px,7vw,30px);
    letter-spacing:0;
    line-height:1.06;
    text-align:center;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .brand-strap{font-size:9.5px;letter-spacing:.06em}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Print: drop the screen chrome, keep the story, and, above all for a site whose
   trust rests on citing its sources, spell out every off-site link so a printed
   story stays checkable on paper. Screen rendering is untouched. */
@media print{
  .site-header,.newsletter,.site-footer,.skip-link,.lead-rail,.related,
  .article-share,.comments,.comments-pill,.breadcrumb,.toc,.js-copy-link{display:none!important}
  html,body{background:#fff!important;color:#000;font-size:12pt}
  .container{max-width:100%!important}
  a{color:#000;text-decoration:underline}
  /* Coloured label chips lose their background when printing; force them legible. */
  .kicker,.article-tagrow .tag,.article-tagrow .topic-tag,.article-tagrow .updated{
    color:#000!important;background:none!important;border-color:#bbb!important}
  /* Spell out off-site targets (the Sources list most of all) so a printed page stays actionable. */
  .prose a[href^="http"]:not([href*="sevenoaksonline.co.uk"])::after{
    content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  /* Keep figures, tables and headings whole across page breaks. */
  figure,table,tr{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
}
/* serif headlines (Bucks Herald feel); small-caps labels + body stay sans */
.lead-title,.rail-headline,.card-title,.article-title,.hub-head h1,.related .card-title,.prose h2,.prose h3{font-family:var(--serif)}
.section-title{font-family:var(--sans)}

/* news listings: headline-only cards, no excerpt blurb (News Shopper style) */
.card-dek{display:none}

/* ============================================================
   NEWS ARTICLE (Newsquest / News Shopper layout)
   ============================================================ */
/* every block in the article shares ONE left/right edge (kill nested container padding) */
.news-article{max-width:720px}
.news-article > .container,
.news-article > * > .container,
.news-article .container{padding-left:0;padding-right:0}
.news-article .article-head{padding:22px 0 0}
.news-article .article-head .breadcrumb{padding-top:0;margin-bottom:10px}
.news-article .article-title{margin:0}
.news-article .article-tagrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;
  margin:14px 0 4px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
}
.news-article .article-tagrow .ago{color:var(--ink-soft)}
.news-article .article-tagrow .updated{color:var(--ink-soft)}
.news-article .article-tagrow .readtime{color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.news-article .article-tagrow .readtime::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.65}
/* The category link takes its section's own colour (News red, What's On purple,
   Local Info teal, Property green) via --cat, so it reads as part of the sitewide
   category-colour system used on every kicker, not a one-off orphan gold. Every
   category colour clears WCAG AA on white (5.8:1+); the --accent-dark fallback
   (8:1) covers any uncategorised page. */
.news-article .article-tagrow .tag{color:var(--cat,var(--accent-dark));text-decoration:underline;text-underline-offset:3px}
.news-article .article-tagrow .tag:hover{color:var(--accent-dark)}
/* Topic tags are a different control to the section link above: pill chips, and they open a site-search in a new tab, so they are styled distinctly rather than mimicking the internal category link. */
.news-article .article-tagrow .topic-tag{
  color:var(--ink-soft);text-decoration:none;
  background:var(--bg-tint);border:1px solid var(--line);
  padding:3px 11px;border-radius:999px;
  font-size:11.5px;letter-spacing:.04em;line-height:1.6;
  transition:color .12s ease,border-color .12s ease,background .12s ease;
}
/* Small outward arrow marking these chips as an external, new-tab link (WCAG G201):
   the chip otherwise looked identical to the internal category link beside it. It is
   a decorative cue only, the same warning is carried in each chip's accessible name,
   so it stays aria-hidden and slightly muted, then firms up on hover/focus with the
   rest of the pill. */
.news-article .article-tagrow .topic-tag::after{
  content:"\2197";speak:none;
  margin-left:4px;font-size:.9em;opacity:.6;
}
.news-article .article-tagrow .topic-tag:hover,
.news-article .article-tagrow .topic-tag:focus-visible{
  color:var(--accent-dark);border-color:var(--accent);background:#fff;text-decoration:none;
}
.news-article .article-tagrow .topic-tag:hover::after,
.news-article .article-tagrow .topic-tag:focus-visible::after{opacity:1}

/* hero with red caption bar */
.news-article .article-hero{margin:16px 0 0;border-radius:0;overflow:hidden;background:none}
/* Cap the hero height so a tall or portrait image renders as a landscape band, not
   a towering full-width column. The generator uses any slug-named file in static/img
   over the frontmatter image, and the news cron can output a portrait one (e.g. the
   roadworks story's 1200x1600 station photo, which otherwise stands about 930px tall
   in the 720px article column). The 560px cap sits above every current landscape hero
   (the tallest, a 4:3 at that width, is about 525px), so only genuinely tall images
   are cropped, and object-fit keeps them centred rather than squashed. */
.news-article .article-hero img{width:100%;height:auto;max-height:560px;object-fit:cover;object-position:center;display:block}
.news-article .hero-cap{
  display:block;background:var(--accent);color:#fff;
  padding:11px 16px;font-size:14px;line-height:1.45;
}
.news-article .hero-cap .cap-text{font-weight:700}
.news-article .hero-cap .cap-credit{font-style:italic;font-size:12.5px;opacity:.95}
.news-article .hero-cap .cap-credit a{color:#fff;text-decoration:underline}

/* byline */
.news-article .article-byline{padding:16px 0 0;line-height:1.3}
.news-article .article-byline .by{display:block;font-weight:700;color:var(--ink);font-size:16px}
.news-article .article-byline .by a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .12s ease,color .12s ease}
.news-article .article-byline .by a:hover{color:var(--accent-dark);border-bottom-color:var(--accent)}
.news-article .article-byline .role{display:block;color:var(--muted);font-size:13.5px;margin-top:1px}
.news-article .article-rule{border:0;border-top:1px solid var(--line-strong);margin:16px 0 0}

/* share + comments row */
.news-article .article-share{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0 6px;flex-wrap:wrap;
}
.news-article .share-left{display:flex;align-items:center;gap:10px}
.news-article .share-label{font-weight:700;color:var(--ink);font-size:15px;margin-right:2px}
.news-article .sbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;flex:0 0 auto;
  transition:transform .12s ease,opacity .12s ease;
}
.news-article .sbtn:hover{transform:translateY(-1px);text-decoration:none;opacity:.92}
.news-article .sbtn--wa{background:#25d366}
.news-article .sbtn--fb{background:#1877f2}
.news-article .sbtn--x{background:#000}
.news-article .sbtn--bsky{background:#1185fe}
.news-article .sbtn--email{background:var(--accent)}
/* Copy-link button: a real <button>, so reset the native chrome and match the
   round icon-button shape. Neutral slate so it reads as a utility, not a network. */
.news-article button.sbtn{border:0;padding:0;font:inherit;cursor:pointer}
.news-article .sbtn--copy{background:#475569}
.news-article .sbtn--copy .copy-i--done{display:none}
.news-article .sbtn--copy.is-copied{background:#1f9d55}
.news-article .sbtn--copy.is-copied .copy-i--link{display:none}
.news-article .sbtn--copy.is-copied .copy-i--done{display:block}
.news-article .comments-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fdf1cf;color:#5b4a16;font-weight:700;font-size:14px;
  padding:9px 16px;border-radius:22px;
}
.news-article .comments-pill:hover{background:#fbe8ad;text-decoration:none}

/* bold standfirst */
.news-article .standfirst{
  font-family:var(--sans);font-weight:700;
  font-size:21px;line-height:1.4;color:var(--ink);
  margin:14px 0 22px;
}

/* article body: tuned for maximum readability (Georgia is built for screen reading) */
.news-article .prose{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  line-height:1.78;
  letter-spacing:.002em;
  color:#1c1f24;
}
.news-article .prose p{margin:0 0 1.2em}
.news-article .prose h2{font-size:27px;margin-top:1.6em;scroll-margin-top:18px}
.news-article .prose h3{font-size:22px}
/* "The quick answer" callout. The answer-first summary these local-info pages
   (parking, council tax) lead with earns a red-accented panel, so a reader after
   only the bottom line spots it at once instead of reading it as one more
   identical section. The heading becomes a small red label welded to the answer
   paragraph beneath it. Presentation only: with no .quick-answer class (added in
   the Markdown as {: .quick-answer }) the heading renders as an ordinary H2. */
.news-article .prose h2.quick-answer{
  font-family:var(--sans);font-size:12.5px;font-weight:800;line-height:1.2;
  text-transform:uppercase;letter-spacing:.07em;color:var(--accent);
  margin:1.9em 0 0;padding:15px 20px 0;
  background:var(--bg-tint);
  border-left:4px solid var(--accent);
  border-radius:0 var(--radius) 0 0;
}
.news-article .prose h2.quick-answer + p{
  margin:0 0 1.5em;padding:8px 20px 16px;
  background:var(--bg-tint);
  border-left:4px solid var(--accent);
  border-radius:0 0 var(--radius) 0;
}

/* "On this page" jump list (built by article.html on long reference pieces) */
.toc{
  margin:0 0 26px;padding:15px 20px 17px;
  background:var(--bg-tint);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);
}
.toc-title{
  margin:0 0 11px;font-family:var(--sans);
  font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink);
}
.toc ol{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;
  counter-reset:toc;
}
.toc li{counter-increment:toc;font-family:var(--sans);font-size:15px;line-height:1.35}
.toc li a{color:var(--ink-soft);display:block}
.toc li a::before{content:counter(toc) ". ";color:var(--accent);font-weight:700}
.toc li a:hover{color:var(--accent-dark);text-decoration:none}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (max-width:560px){.toc ol{grid-template-columns:1fr}}

/* References apparatus: the Sources list and image credit at the foot of a story,
   tagged by article.html and demoted to muted, smaller citation furniture so it
   reads as references rather than competing with the reporting. */
.news-article .prose .article-refs{font-size:15px;line-height:1.55;color:var(--muted)}
.news-article .prose .article-refs a{color:var(--accent-dark)}
.news-article .prose ul.article-refs{margin-bottom:1em}
.news-article .prose ul.article-refs li{margin-bottom:.55em}
.news-article .prose p.article-refs-head,
.news-article .prose h2.article-refs-head{
  margin:1.8em 0 .6em;font-family:var(--sans);
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);
}
.news-article .prose p.article-refs-head strong{font-weight:inherit}
.news-article .prose p.article-refs-credit{font-style:normal}

/* comments section */
.news-article .comments{margin-top:36px;padding-top:6px;border-top:1px solid var(--line)}
.news-article .comments-head{display:flex;align-items:baseline;gap:14px;margin-top:18px}
.news-article .comments-count{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.news-article .comment-compose{display:flex;gap:14px;margin:18px 0 14px}
.news-article .avatar{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,#dfe3e8,#c6ccd4);
}
.news-article .compose-main{flex:1 1 auto;min-width:0}
.news-article .compose-main textarea{
  width:100%;min-height:84px;resize:vertical;
  font-family:var(--sans);font-size:15.5px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;
}
.news-article .compose-main textarea:focus{outline:none;border-color:var(--accent)}
/* Keyboard focus keeps the site's standard 3px ring: the plain :focus rule above
   drops it (a 1px border-colour shift is too weak a cue on its own), so restore it
   for keyboard users while mouse clicks keep the quieter border-only treatment. */
.news-article .compose-main textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.news-article .compose-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;flex-wrap:wrap}
.news-article .compose-note{color:var(--muted);font-size:12.5px}
.news-article .post-comment{
  font-family:var(--sans);font-weight:800;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent);color:#fff;border:0;border-radius:5px;
  padding:11px 22px;cursor:pointer;transition:background .12s ease;
}
.news-article .post-comment:hover{background:var(--accent-dark)}
.news-article .comment-sent{margin:10px 0 2px;font-size:13.5px;line-height:1.5;color:var(--accent-dark);font-weight:600}
.news-article .comments-empty{color:var(--muted);font-size:15px;padding:8px 0 4px}

@media (max-width:680px){
  .news-article .standfirst{font-size:19px}
  .news-article .prose{font-size:18.5px;line-height:1.72}

  /* share row: bigger touch targets; let the comments pill drop to its own line */
  .news-article .article-share{gap:12px 10px}
  .news-article .share-left{gap:12px}
  .news-article .sbtn{width:44px;height:44px}
  .news-article .sbtn svg{width:20px;height:20px}
  .news-article .comments-pill{padding:13px 18px}
  .news-article .article-tagrow{gap:6px 14px}

  /* hero caption: room for long captions + credit to wrap */
  .news-article .hero-cap{padding:10px 14px;font-size:13.5px}

  /* comments composer stays usable: textarea full width, action stacks neatly */
  .news-article .comments-head{flex-wrap:wrap;gap:6px 14px}
  .news-article .compose-foot{gap:10px}
  .news-article .post-comment{padding:14px 24px;min-height:44px}

  /* prevent any long unbroken slug/URL in the prose from forcing a sideways scroll */
  .news-article .prose{overflow-wrap:break-word;word-break:break-word}
}

@media (max-width:480px){
  /* newsletter sign-up button goes full width when it wraps under the input */
  .newsletter-form input[type=email]{flex:1 1 100%}
  .newsletter-form button{flex:1 1 100%}
}

/* Directory search autocomplete dropdown (dir-autocomplete.js).
   Appended to <body> and positioned with position:fixed by the script, so it is
   never clipped by the search hero (which has overflow:hidden). News-red palette. */
.soac{position:fixed;z-index:9999;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #f0d6da;border-radius:10px;box-shadow:0 12px 30px rgba(70,20,30,.18);max-height:300px;overflow:auto;font-family:var(--sans)}
.soac[hidden]{display:none}
.soac li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;font-size:14.5px;color:#402024;line-height:1.2;cursor:pointer}
.soac li:hover,.soac li.is-active{background:#fbeef0;color:#9e0c24}
.soac-ic{flex:0 0 auto;display:flex;color:#c8102e}

/* ============================================================
   DIRECTORY: bring the shared generator onto the news-red brand
   ------------------------------------------------------------
   The directory pages (landing, profiles, search) are rendered by
   the shared src/portfolio/build/directory.py, whose inline <style>
   hardcodes Build Journal's brand yellow (#ffcc00 / #f0c000, amber
   #e0a800) on several controls whatever site accent it is passed:
   the search-hero button, the "Unclaimed" badge, the "Visit website"
   CTA, the empty-review star and the search-result "Call" pill. On
   this red masthead that yellow reads as another site's brand, and
   it appears nowhere else on Sevenoaks Online. Re-tint it to the red
   palette here rather than in the shared generator, so Build Journal,
   where the yellow IS the brand, stays untouched. The generator's
   inline block loads after this stylesheet, so each rule is scoped
   one level deeper (.dir / .ds-wrap ancestor) to win on specificity,
   the same linked-stylesheet override pattern already used elsewhere. */

/* Search-hero button sits on the red gradient hero, where a red fill
   would vanish, so mirror the newsletter's on-red CTA: a dark fill
   that inverts to white on hover, distinct from the white input row. */
.dir .dir-searchform button{background:var(--bg-dark);color:#fff;border:2px solid #fff}
.dir .dir-searchform button:hover{background:#fff;color:var(--accent-dark)}

/* Yellow icon in the hero stats pill -> white, matching its own text. */
.dir .dir-hero-stats-line svg{color:#fff}

/* "Visit website" hero CTA: drop the yellow fill for the site's outline
   button, exactly how the same link already renders in the sidebar. */
.dir .dir-btn-quote{background:#fff;border-color:var(--accent);color:var(--accent-dark)}
.dir .dir-btn-quote:hover{background:var(--bg-tint)}

/* Empty-review star: every listing here is unrated, so an amber star
   implies a score it does not have. Mute it to the "not rated yet"
   grey (it is aria-hidden, so the low contrast is intentional). */
.dir .dir-star-ico{color:var(--line-strong)}

/* "Unclaimed" status pill -> neutral grey, not a brand-yellow alert. */
.dir .dir-badge{background:var(--bg-tint);color:var(--muted);border-color:var(--line-strong)}

/* "Call" pill on the search-result cards -> solid red, the site's
   primary-action colour, matching the Call button on the profiles. */
.ds-wrap .ds-card .ds-call{background:var(--accent);color:#fff}
.ds-wrap .ds-card .ds-call:hover{background:var(--accent-dark)}

/* Search-input placeholder contrast. The shared directory.py sets the
   search-page field placeholder to #a8929a, which measures ~2.7:1 on the
   field's tinted #fdf6f7 background, below the WCAG AA 4.5:1 floor for text;
   the landing hero inputs carry no placeholder colour at all and fall back to
   the browser default, which is inconsistent across engines. Point both to
   the site's own --muted (#62686f = ~5.3:1 on the tinted field, ~5.7:1 on
   white), the same token the newsletter placeholder already uses, so every
   directory search box reads legibly and matches. Scoped under .ds-wrap /
   .dir so it wins over the generator's later inline block and leaves Build
   Journal, which renders the same generator, untouched. */
.ds-wrap .ds-field input::placeholder{color:var(--muted)}
.dir .dir-searchform input::placeholder,
.dir .dir-areas-filter-input::placeholder{color:var(--muted)}

/* mobile gutter for the zero-padding 720px article column */
@media (max-width:760px){.news-article{padding-left:var(--gut);padding-right:var(--gut)}}

/* mobile full-bleed hero (Liam, 2026-08-05) */
/* On phones the lead story image runs edge to edge like a printed front page:
   break out of the container gutters and drop the card radius. */
@media (max-width:680px){
  section.lead .lead-feature{
    margin-left:calc(-1 * var(--gut));
    margin-right:calc(-1 * var(--gut));
    border-radius:0;
  }
}
/* ===== QA FIXES 2026-08-05 (responsive sweep) ===== */

/* D2: share row overflowed 390px viewports (6 x 44px buttons, nowrap) */
@media (max-width:680px){ .news-article .share-left{flex-wrap:wrap;gap:12px 10px} }
/* D4: bare <figure> charts inherited UA 40px side margins + body-size captions */
.prose figure{margin:1.7em 0}
.prose figure > figcaption{margin-top:7px;font-size:13.5px;color:var(--muted);font-style:italic}
/* D5: charts unreadable at phone width; give them the wide-table treatment */
@media (max-width:680px){
  .prose figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose figure img{min-width:33rem}
}
/* D6: .nav-links shrink-wrapped, so Subscribe's margin-left:auto had no room */
.nav-links{flex:1 1 auto}
/* D8: word-break:break-word split ordinary words (table header BAN/D); keep the
   aggressive break for long URLs only */
.news-article .prose{word-break:normal}
.news-article .prose a{word-break:break-word}
/* D9: wide-table captions were as wide as the scrolling table; pin to viewport */
@media (max-width:680px){
  .prose .table-scroll table > caption{position:sticky;left:0;width:calc(100vw - 2*var(--gut));white-space:normal}
}
/* D10: narrow-phone masthead centering rule also caught the footer nameplate */
.footer-brand .brand--footer .brand-name{width:auto;text-align:left}
.footer-brand .brand--footer .brand{justify-content:flex-start}
/* D11: hero kicker legibility over light photo areas */
.lead-feature .kicker{text-shadow:0 1px 10px rgba(0,0,0,.55)}


/* D3 (overlay kits): long lead headlines pushed the absolute body above the
   image, clipping the kicker; one grid cell lets the image grow instead */
@media (max-width:680px){
  section.lead .lead-feature{display:grid}
  section.lead .lead-media{grid-area:1/1;height:100%;aspect-ratio:16/10}
  section.lead .lead-feature-body{grid-area:1/1;position:relative;align-self:end}
}
/* D7 REVERTED (Liam, 2026-08-05): stretching the hero to match the rail blew
   the featured image up and pushed the grid below the fold. The original 16:10
   hero with some white space under it is the preferred look. */

/* lead-more: headline list filling the column under the compact hero
   (Liam, 2026-08-05: no giant image, no white gap; content instead) */
.lead-more{display:flex;flex-direction:column;margin-top:14px}
.lead-more-item{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.lead-more-item:first-child{border-top:2px solid var(--ink)}
.lead-more-item:hover .lead-more-title{text-decoration:underline}
.lead-more-title{font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.3}
.lead-more .kicker{flex-shrink:0}
@media (max-width:980px){.lead-more{display:none}}
/* the hero + lead-more share one grid cell so the headline list fills the gap */
.lead-col{display:flex;flex-direction:column;min-width:0}

/* honest email-feedback block replacing the decorative comment composer */
.comments-note{color:var(--muted);font-size:15.5px;max-width:46em}
.comments-mailto{font-weight:700}

/* lead-more alignment (Liam, 2026-08-06): fixed kicker column so every headline
   starts at the same x regardless of the kicker's width */
.lead-more-item{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:baseline}
.lead-more .kicker{justify-self:start}

/* NEWSLETTER BAND 2026-08-07 */
.nl-band{background:var(--ink,#1c2a24);color:#fff;padding-top:34px;padding-bottom:34px}
.nl-inner{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.nl-copy h2{margin:0 0 6px;font-size:1.35rem;color:#fff}
.nl-copy p{margin:0;opacity:.75;font-size:.95rem;max-width:34em}
.nl-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative;min-width:min(100%,380px)}
.nl-form input[type=email]{flex:1;min-width:210px;padding:11px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit}
.nl-form input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.nl-form button{padding:11px 20px;border-radius:8px;border:0;background:var(--accent,#1a5632);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.nl-form button:disabled{opacity:.6}
.nl-note{flex-basis:100%;margin:2px 0 0;font-size:.85rem;opacity:.85;min-height:1.2em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:680px){.nl-inner{flex-direction:column;align-items:stretch}}

/* ===== BRAND KIT (Chichester Live, scaffolded 2026-08-04) =====================
   Applied over the shared base stylesheet. Axes: Yrsa nameplate
   + headlines, Nunito Sans body, masthead left, hero
   split, kicker underline. Hand-tweaks below this block survive
   re-scaffolds only with --force off, so append rather than regenerate. */
body { font-family: 'Nunito Sans',sans-serif; }
.brand-name { font-family: 'Yrsa',serif; letter-spacing: 0; }
.lead-title, .card-title, .article-title, .rail-headline,
.prose h2, .prose h3, .section-title, .newsletter-title {
  font-family: 'Yrsa',serif;
}

/* masthead: left-aligned nameplate (the base is a centered column flex, so the
   cross-axis property is the one that moves it) */
.masthead-inner { align-items: flex-start; }
.masthead-inner .brand { justify-content: flex-start; text-align: left; }
.brand-strap { text-align: left; margin-left: 2px; }

/* hero: split lead (image beside headline stack) instead of the overlay */
.lead-feature { position: static; display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 22px; align-items: center; }
.lead-feature .lead-media { aspect-ratio: 16/10; }
.lead-feature-body { position: static; background: none; padding: 0; }
.lead-feature-body .lead-title { color: var(--ink, #16181c); text-shadow: none; }
.lead-feature-body .lead-dek { display: block; color: var(--muted, #62686f); }
@media (max-width: 720px) { .lead-feature { grid-template-columns: 1fr; } }

/* kicker: underlined label instead of the filled pill */
.kicker { background: none !important; color: var(--cat, var(--accent));
  padding: 0 0 2px; border-radius: 0; border-bottom: 2px solid currentColor; }

/* ===== SPLIT-HERO REPAIR 2026-08-13 =====
   The kit patch above restyled the lead into a grid but left the overlay hero's
   dark slab and white text in force. Undo all three. ============================ */
.lead-feature { background: none; }
.lead-feature .lead-media { border-radius: var(--radius); }
.lead-feature-body .lead-title a { color: inherit; }
.lead-feature-body .lead-meta { color: var(--muted, #62686f); }
.lead-feature .kicker { color: var(--cat, var(--accent)); text-shadow: none; }

/* ===== SPLIT-HERO REPAIR 2026-08-13b (text-shadow) ===== ==================
   The overlay hero's dark glow has no job on a light lead; it just smears. */
.lead-feature-body .lead-title { text-shadow: none; }
.lead-feature-body .lead-dek { text-shadow: none; }

/* Group nameplate (Liam 2026-09-03): the flagship blackletter wordmark */
.brand-name{font-family:"UnifrakturCook","UnifrakturMaguntia",Georgia,serif;font-weight:700}

/* Advertise button in the footer brand column (2026-09-08). The old link was a
   13px text link in the legal row and readers could not find it. */
.footer-col a.footer-adv{
  display:inline-block;margin-top:14px;padding:11px 20px;
  background:var(--accent);color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.02em;text-decoration:none;border-radius:var(--radius,3px);
  line-height:1.2;
}
.footer-col a.footer-adv:hover,.footer-col a.footer-adv:focus-visible{background:var(--accent-dark,var(--accent));color:#fff}

/* ===== MOBILE SPLIT-HERO FIX 2026-09-09 =====
   The D3 one-cell stack above is for overlay kits (white text on a dark gradient).
   On a split kit the gradient is gone, so it laid dark text straight over the photo
   (Clapham News on Liam's phone). Stack image, then text, on phones. */
@media (max-width:680px){
  section.lead .lead-feature{display:grid;grid-template-columns:1fr;gap:12px}
  section.lead .lead-media{grid-area:auto;height:auto;aspect-ratio:16/10}
  section.lead .lead-feature-body{grid-area:auto;position:static;align-self:auto;padding:0 var(--gut) 4px}
}

/* ==== uk-wave2 2026-09-12: accessibility, kicker chip, More-from, phone-first ==== */
/* 1. Footer bar links inherited the site accent on the near-black footer: 1.24:1 at
   11px, the one hard axe failure on every page (docs/expansion-build/a11y-uk-baseline.md). */
.footer-bottom a,.footer-links-row a{color:#d5d8dc;text-decoration:underline;text-underline-offset:2px}
.footer-bottom a:hover,.footer-bottom a:focus-visible{color:#fff}
/* 2. Form fields: the inline 25% black border was 1.6:1 against white (WCAG 1.4.11
   non-text contrast). Inline styles need !important to lose. */
.comment-form input:not([type=checkbox]),.comment-form textarea,.tip-form input:not([type=checkbox]),.tip-form textarea,.so-form input,.so-form textarea,.so-form select{border:1px solid #6b6b6b!important;background-color:#fff!important;color:#16181c!important}
/* 3. Keyboard focus: the accent ring vanished on the accent-coloured nav and the dark
   footer. A white halo outside the ring shows on any surface; on the dark and accent
   surfaces the ring itself turns white with a dark halo. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 6px #fff}
.primary-nav :focus-visible,.nav-drawer-head :focus-visible,.site-footer :focus-visible,.newsletter :focus-visible,.utility-bar :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--accent-dark,#000)}
.skip-link:focus{box-shadow:none}
/* 4. Lead kicker: a solid chip, so its contrast never depends on the hero behind it
   (light SVG key-facts panels, pale skies). The category colour is darkened by a
   fifth, which takes the lightest category colour in the estate past 4.5:1 with white;
   browsers without color-mix keep the plain category colour. Kits that set the kicker
   as bare coloured text (three of them with !important) are overridden here on purpose. */
.lead-feature .kicker{color:#fff!important;background:var(--cat,var(--accent))!important;background:color-mix(in srgb,var(--cat,var(--accent)) 80%,#000)!important;padding:4px 9px;border-radius:2px;text-shadow:none;display:inline-block;line-height:1.2;border-bottom:0}
.lead-feature .kicker a{color:#fff}
/* 4b. BBC story order (Liam, 13 Sept 2026): headline alone with clear space under it,
   hero, byline, then a quiet meta row, then the standfirst as the BOLD opening paragraph
   of the body (sans 700, 19px desktop, 18px phone, ink). The meta row moved out of the
   header in the template; this spaces the two. */
.news-article .article-title{margin:0 0 4px}
.news-article .article-tagrow.container{margin:10px 0 0}
.news-article .standfirst{font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.5;color:var(--ink);margin:0 0 1em}
/* 5. "More from <town>": four newest stories in the 720px reading column (two by two
   on desktop, one thumbnail row each on phones) and a row of utility links. */
.more-from{border-top:1px solid var(--line);margin-top:34px;padding-top:22px}
.more-from .section-title{margin-bottom:16px}
.more-from .more-from-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;padding-bottom:18px}
.more-from .card-title{font-size:18px;line-height:1.22}
.more-from-utility{border-top:1px solid var(--line);padding-top:14px;margin-bottom:6px}
.more-from-utility ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.more-from-utility li{margin:0}
.more-from-utility a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong,#c9ccd2);border-radius:999px;color:var(--ink);font-weight:700;font-size:14.5px;line-height:1.2;text-decoration:none;background:var(--bg)}
.more-from-utility a:hover,.more-from-utility a:focus-visible{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
/* 6. Phone-first story layout. Measured 12 Sept 2026 at 390px: the standfirst began
   about 1,000px down and the first paragraph 1,350 to 1,540px, because the byline,
   rule and share row (about 300px) sat between the hero and the body. On phones the
   share row now follows the body, the hero is capped, and the head is tightened, so
   the headline, standfirst and opening paragraph fit one screen. Desktop unchanged. */
@media (max-width:680px){
  .news-article{display:flex;flex-direction:column}
  .news-article > *{width:100%;box-sizing:border-box}
  .news-article .article-share{order:1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
  .news-article .more-from{order:2}
  .news-article .comments{order:3}
  .news-article .article-head{padding-top:12px}
  .news-article .article-title{font-size:27px;line-height:1.12}
  .news-article .article-tagrow{margin-top:10px}
  .news-article .article-tagrow .tag,.news-article .article-tagrow .topic-tag,.news-article .article-tagrow .updated,.news-article .article-tagrow .readtime,.news-article .article-tagrow time{display:inline-block;padding:4px 0;line-height:1.3}
  .news-article .breadcrumb a{display:inline-block;padding:5px 0}
  .news-article .article-tagrow.container{margin-top:8px}
  .news-article .article-hero{margin-top:12px}
  .news-article .article-hero img{max-height:200px}
  .news-article .hero-cap{font-size:13px;line-height:1.4;padding:8px 12px}
  .news-article .toc a,.news-article .article-byline a{display:inline-block;padding:3px 0}
  .news-article .article-byline{padding-top:10px}
  .news-article .article-rule{margin-top:10px}
  .news-article .article-body{margin-top:2px}
  .news-article .standfirst{font-size:18px;line-height:1.5;margin:0 0 .9em}
  .news-article .prose{font-size:17.5px;line-height:1.65}
  .news-article .sbtn{width:44px;height:44px}
  .news-article .comments-pill{min-height:44px}
  .more-from{margin-top:22px;padding-top:16px}
  .more-from .more-from-grid{grid-template-columns:1fr;gap:16px}
  .more-from .card-title{font-size:16.5px}
}
/* 8. Phone hero: never text over the photo (Liam, 13 Sept 2026, Fleet & Hook News: the
   two faces in the lead photo were hidden under the scrim and headline). Below 680px
   the lead photo shows whole, at its own aspect ratio, and the kicker, headline, date
   and standfirst stack beneath it in ink on the page background. This overrides the
   August D3 grid-cell overlay and the phone scrim in every kit, overlay and split. */
@media (max-width:680px){
  section.lead .lead-feature{display:block;background:none;border-radius:0}
  section.lead .lead-media{aspect-ratio:auto;height:auto;grid-area:auto;background:var(--bg-tint)}
  section.lead .lead-media img{width:100%;height:auto;object-fit:contain;transform:none}
  section.lead .lead-feature-body{position:static;grid-area:auto;background:none;padding:14px var(--gut) 4px;align-self:auto}
  section.lead .lead-feature--noimg .lead-feature-body{padding-top:0}
  section.lead .lead-title,section.lead .lead-title a{color:var(--ink);text-shadow:none}
  section.lead .lead-title a:hover{color:var(--accent-dark)}
  section.lead .lead-meta,section.lead .lead-meta time{color:var(--muted)}
  section.lead .lead-dek{color:var(--ink-soft);text-shadow:none;-webkit-line-clamp:3;line-clamp:3;font-size:16px}
}
/* 9. Desktop lead (lead's decision, 14 Sept 2026, after Fleet & Hook's headline sat over the
   two faces at 1280px): the photo is never covered at any width. Above 680px the lead is
   the photo whole at 16/9 across the lead column, then the kicker chip, headline, time and
   intro below it in the site's ink colours. No scrim, no overlay. Overrides the overlay
   kits' absolute body and the split kits' side-by-side grid; the phone rule (8) covers the
   rest. Each site keeps its own type, colours and spacing. */
@media (min-width:681px){
  section.lead .lead-feature{display:block;position:static;background:none;grid-template-columns:none}
  section.lead .lead-media{aspect-ratio:16/9;height:auto;grid-area:auto}
  section.lead .lead-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
  section.lead .lead-feature-body{position:static;grid-area:auto;background:none;padding:16px 0 4px;align-self:auto}
  section.lead .lead-feature--noimg .lead-feature-body{padding-top:0}
  section.lead .lead-title,section.lead .lead-title a{color:var(--ink);text-shadow:none}
  section.lead .lead-title a:hover{color:var(--accent-dark)}
  section.lead .lead-meta,section.lead .lead-meta time{color:var(--muted)}
  section.lead .lead-dek{color:var(--ink-soft);text-shadow:none}
  section.lead .lead-feature .kicker{margin-bottom:10px}
}
/* ==== /uk-wave2 ==== */

/* ==== uk-wave2 shopper layout (News Shopper pattern, prototype 2026-09-13) ==== */
/* Section label (kicker link) under the masthead on phones; the breadcrumb serves desktop. */
.news-article--shopper .kicker--section{display:none}
/* Single grey time line under the headline (phones); the meta row carries it on desktop. */
.news-article--shopper .article-time{display:none;margin:10px 0 0;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* Byline row: the site favicon as a 44px avatar, bold name, "Published <date>" in grey, thin rule. */
.news-article--shopper .article-byline{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;padding:16px 0 14px;border-bottom:1px solid var(--line);line-height:1.25}
.news-article--shopper .byline-avatar{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:block;object-fit:cover}
.news-article--shopper .article-byline .by{display:block;font-weight:800;font-size:15.5px;color:var(--ink)}
.news-article--shopper .article-byline .by a{color:inherit;text-decoration:none;border-bottom:0;padding:0}
.news-article--shopper .article-byline .role{display:block;color:var(--muted);font-size:13.5px;margin:2px 0 0;grid-column:2}
/* Share and comments pills. */
.news-article--shopper .share-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 0 0}
.news-article--shopper .share-pill,.news-article--shopper .comments-count{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font-family:var(--sans);font-weight:700;font-size:14.5px;line-height:1;text-decoration:none;cursor:pointer}
.news-article--shopper .share-pill{border:1px solid var(--line-strong,#c9ccd2);background:var(--bg);color:var(--ink)}
.news-article--shopper .share-pill[hidden]{display:none}
.news-article--shopper .comments-count{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark);border:0}
.news-article--shopper .share-links{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.news-article--shopper .share-links[hidden]{display:none}
.news-article--shopper .share-links a,.news-article--shopper .share-links button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong,#c9ccd2);background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
/* Newsletter box between the byline and the story. */
.news-article--shopper .story-signup{background:var(--accent);color:#fff;border-radius:var(--radius,4px);padding:20px 18px;margin:16px 0 22px}
.news-article--shopper .story-signup-title{margin:0 0 6px;font-family:var(--sans);font-size:20px;line-height:1.2;color:#fff}
.news-article--shopper .story-signup-blurb{margin:0 0 12px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.92)}
.news-article--shopper .story-signup-form{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.news-article--shopper .story-signup-form input[type=email]{flex:1 1 200px;min-height:44px;padding:0 12px;border:0;border-radius:6px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.news-article--shopper .story-signup-form button{min-height:44px;padding:0 18px;border:0;border-radius:6px;background:var(--ink);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.news-article--shopper .story-signup-form .newsletter-note,.news-article--shopper .story-signup-form .newsletter-terms{flex-basis:100%;margin:6px 0 0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.92)}
.news-article--shopper .story-signup-form .newsletter-note:empty{display:none}
.news-article--shopper .story-signup-form .newsletter-terms a{color:#fff}
.news-article--shopper .story-signup-form input:focus-visible,.news-article--shopper .story-signup-form button:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--accent-dark,#000)}
@media (max-width:680px){
  .news-article--shopper .breadcrumb{display:none}
  .news-article--shopper .kicker--section{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark);text-decoration:none;border-bottom:2px solid var(--accent);padding:6px 0 3px;margin:2px 0 10px}
  .news-article--shopper .article-head{border-bottom:0;margin-bottom:0;padding-top:12px}
  .news-article--shopper .article-title{font-size:28px;line-height:1.1;margin:0}
  .news-article--shopper .article-time{display:block}
  .news-article--shopper .article-hero{margin:14px calc(-1 * var(--gut)) 0;width:calc(100% + 2 * var(--gut))}
  .news-article--shopper .article-hero img{aspect-ratio:16/10;max-height:none;height:auto;width:100%;object-fit:cover;object-position:50% 35%}
  .news-article--shopper .hero-cap{background:none;color:var(--muted);font-size:13px;line-height:1.4;padding:6px var(--gut) 0;font-weight:400}
  .news-article--shopper .hero-cap .cap-text{font-weight:600}
  .news-article--shopper .hero-cap .cap-credit{opacity:1}
  .news-article--shopper .hero-cap a,.news-article--shopper .hero-cap .cap-credit a{color:var(--accent-dark);text-decoration:underline;text-decoration-color:var(--line-strong,#c9ccd2)}
  .news-article--shopper .article-tagrow.container{order:1;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line)}
  .news-article--shopper .more-from{order:2}
  .news-article--shopper .comments{order:3}
  .news-article--shopper .story-signup{border-radius:0;margin:16px calc(-1 * var(--gut)) 20px;width:calc(100% + 2 * var(--gut));padding:20px var(--gut)}
  /* Home hero on phones: a fixed landscape crop, faces kept (they sit in the upper part of
     most photos), text below as before, never over the image. */
  section.lead .lead-media{aspect-ratio:16/10}
  section.lead .lead-media img{height:100%;object-fit:cover;object-position:50% 35%}
}
/* ==== /uk-wave2 shopper ==== */

/* ==== uk-wave2 comments 2026-09-15: threaded replies, like/dislike, card badge ==== */
/* Comment indicator on a story card, list row or lead (Liam, 15 September 2026:
   "if an article has comments, could that show up on the home page under the
   article ... makes the home page look more legit"). It is emitted inside the
   existing meta line by templates/_commentbadge.html, so it takes that line's
   size and the site's own muted colour; a story with no comments renders nothing
   at all, never a zero. The meta line is a flex row with its own gap, so the
   badge needs no margin there; the lead's meta is a paragraph, so it does. */
.card-comments{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.card-comments svg{display:block;flex:0 0 auto}
.lead-meta .card-comments{margin-left:9px;color:inherit}
/* Sevenoaks Online's archive rows: date and badge travel together, because the
   row is a baseline flex with space-between. */
.archive-meta{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:7px;margin-left:auto}
/* Only a row that actually carries a badge may wrap: with the badge added, the
   date no longer fits beside a long headline at phone width and was clipped at
   the right edge. Letting every row wrap made the whole back-numbers list a line
   taller per row, which is a worse trade than one wrapped row. Browsers without
   :has() keep the layout they have today. */
.archive-link:has(.card-comments){flex-wrap:wrap}
/* Comments: threaded replies and like/dislike (15 September 2026). The reply and
   vote controls are hidden in the markup and revealed by the page's own script,
   so [hidden] has to win over the display rule above it. */
.comments-list{list-style:none;margin:0 0 1.3em;padding:0}
.comments-list > .comment{border-top:1px solid var(--line);padding:14px 0 8px}
.comment-meta{margin:0 0 6px;font-size:14px;line-height:1.45;color:var(--muted)}
.comment-author{color:var(--ink)}
.comment-inreply{color:var(--muted)}
.comment-text{margin:0;line-height:1.55}
.comment-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:9px 0 0}
.comment-vote,.comment-replybtn,.comment-reply-cancel{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line-strong,#c9ccd2);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer}
.comment-vote[hidden],.comment-replybtn[hidden],.comment-replying[hidden]{display:none}
.comment-vote{color:var(--muted)}
.comment-vote svg{display:block}
.comment-vote .vote-n{font-variant-numeric:tabular-nums}
.comment-vote:hover,.comment-replybtn:hover,.comment-reply-cancel:hover{border-color:var(--accent);color:var(--accent-dark)}
.comment-vote[aria-pressed=true]{border-color:var(--accent);color:var(--accent-dark);font-weight:700}
.comment-replies{list-style:none;margin:12px 0 0;padding:0 0 0 15px;border-left:3px solid var(--line)}
.comment-replies > .comment{padding:6px 0 2px}
.comment-replies > .comment + .comment{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.comment-replying{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 .8em;font-size:14px;color:var(--muted)}
.comment-reply-cancel{min-height:32px;padding:0 11px;font-size:13px}
/* The form, moved under the comment being answered, needs a visible edge or it
   reads as part of the last reply above it. */
li.comment > .comment-form{margin:14px 0 6px;padding-top:12px;border-top:1px dashed var(--line-strong,#c9ccd2)}
.comment-submit{min-height:44px}
@media (max-width:680px){
  .comment-replies{padding-left:11px}
  .comment-actions{gap:6px}
  .comment-vote,.comment-replybtn{min-height:40px;padding:0 12px}
}
/* ==== /uk-wave2 comments ==== */