/* ============================================================
   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:30px 0 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;
  padding:24px 0 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:18px 0 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 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}
.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:22px 0 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:30px 0 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;
}
.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;
}

/* 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}

/* "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)}

/* ===== BRAND KIT (Sutton Online, scaffolded 2026-08-04) =====================
   Applied over the shared base stylesheet. Axes: Zilla Slab nameplate
   + headlines, Public Sans body, masthead left, hero
   overlay, kicker pill. Hand-tweaks below this block survive
   re-scaffolds only with --force off, so append rather than regenerate. */
body { font-family: 'Public Sans',sans-serif; }
.brand-name { font-family: 'Zilla Slab',serif; letter-spacing: 0; }
.lead-title, .card-title, .article-title, .rail-headline,
.prose h2, .prose h3, .section-title, .newsletter-title {
  font-family: 'Zilla Slab',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; }