/* Horsforth.co.uk — conservation-area green and gold leaf, millstone neutrals. */

:root{
  --stone:#F4F2EC; --surface:#FBFAF6; --surface-2:#EEEBE2;
  --ink:#14231C; --ink-2:#3A4A42; --muted:#67736C;
  --line:#DCD8CC; --line-2:#C7C2B4;
  --accent:#17513C; --accent-soft:#E2EDE6;
  --gold:#8A6614; --gold-bright:#B58B2A; --gold-soft:#F2E9D3;
  --amber:#8A5A12; --amber-soft:#F5E7CF;
  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#111814; --surface:#19211D; --surface-2:#212A25;
    --ink:#EDEFE9; --ink-2:#C3CCC6; --muted:#8F9C95;
    --line:#2C3730; --line-2:#3D4A42;
    --accent:#5FBE95; --accent-soft:#1D2F27;
    --gold:#D9AE4F; --gold-bright:#E5C275; --gold-soft:#2E2718;
    --amber:#D9A759; --amber-soft:#2E2517;
  }
}
:root[data-theme="dark"]{
  --stone:#111814; --surface:#19211D; --surface-2:#212A25;
  --ink:#EDEFE9; --ink-2:#C3CCC6; --muted:#8F9C95;
  --line:#2C3730; --line-2:#3D4A42;
  --accent:#5FBE95; --accent-soft:#1D2F27;
  --gold:#D9AE4F; --gold-bright:#E5C275; --gold-soft:#2E2718;
  --amber:#D9A759; --amber-soft:#2E2517;
}

*{box-sizing:border-box}
/* Every card on this site sets display:flex or grid, which beats the browser's
   own [hidden]{display:none}. Without this, any script that sets el.hidden
   updates the count and leaves the element on screen — which is what the
   directory search did for months. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stone);color:var(--ink);font-family:var(--f-body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.015em}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--surface);
  padding:10px 16px;z-index:100}
.skip:focus{left:0}
.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---- artwork tokens ---- */
:root{
  --art-sky-1:#E7EEE8; --art-sky-2:#F6F4EE; --art-sun:#EBDCAE;
  --art-far:#C4D1C6; --art-mid:#9BAF9F; --art-mid-2:#7B8F84;
  --art-near:#2C4839; --art-ground:#17513C; --art-lit:#F4E6C0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --art-sky-1:#18241E; --art-sky-2:#111814; --art-sun:#3E3722;
    --art-far:#1B2922; --art-mid:#233428; --art-mid-2:#2E4136;
    --art-near:#080D0A; --art-ground:#0A0F0C; --art-lit:#D9AE4F;
  }
}
:root[data-theme="dark"]{
  --art-sky-1:#18241E; --art-sky-2:#111814; --art-sun:#3E3722;
  --art-far:#1B2922; --art-mid:#233428; --art-mid-2:#2E4136;
  --art-near:#080D0A; --art-ground:#0A0F0C; --art-lit:#D9AE4F;
}
.art{display:block;width:100%}
.art-hero{height:clamp(150px,22vw,215px);margin-top:26px}
.art-band{height:auto;margin-top:20px;margin-bottom:-1px;opacity:.9}
.catmark{width:1.05em;height:1.05em;vertical-align:-.14em;margin-right:.42em;
  color:var(--accent);flex:none}
.tile .catmark{width:22px;height:22px;margin:0 0 6px;display:block}
h1 .catmark{width:.78em;height:.78em;margin-right:.3em}
.pagehead{padding-bottom:0;overflow:hidden}
.pagehead .wrap{padding-bottom:4px}
.hero{padding-bottom:0;overflow:hidden}

/* ---- header ---- */
.masthead{border-bottom:1px solid var(--line);background:var(--surface)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:16px 0}
.wordmark{display:flex;align-items:baseline;gap:1px;text-decoration:none;color:var(--ink)}
.wordmark b{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.035em}
.wordmark span{font-family:var(--f-mono);font-size:11px;color:var(--accent);font-weight:600}
nav.main{display:flex;gap:4px;flex-wrap:wrap;min-width:0}
nav.main a{font-size:14px;text-decoration:none;color:var(--ink-2);padding:7px 11px;border-radius:2px}
nav.main a:hover{background:var(--surface-2);color:var(--ink)}
nav.main a[aria-current="page"]{background:var(--accent);color:var(--surface)}

/* Below the width where all eight nav items fit on one line, stop wrapping and
   scroll instead. Four stacked rows of navigation pushed the page's actual
   content off the bottom of a phone screen. */
@media (max-width:900px){
  /* The nav bleeds to the screen edge with margin:0 -22px, which put its right
     edge 22px past the viewport and let the whole PAGE scroll sideways. clip
     contains it without creating a scroll container of its own. */
  .masthead{overflow-x:clip}
  /* flex-wrap:wrap survives from the base rule, and a WRAPPING column
     container sizes its line to the widest item's intrinsic width — so the
     nav's full 844px beat the 390px viewport and overflow-x:auto never got
     the chance to clip. nowrap makes it one column at the container width. */
  .mast-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding-bottom:0}
  .wordmark{padding:4px 0 10px}
  nav.main{
    flex-wrap:nowrap;overflow-x:auto;gap:2px;
    /* No negative-margin bleed: it pushed the first item off the left edge and
       the last past the right, which is what let the page scroll sideways.
       Starting at the content edge also lines the nav up with the wordmark. */
    margin:0;padding:0 0 10px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{flex:none;white-space:nowrap;scroll-snap-align:start}
}

/* ---- hero ---- */
.hero{background:var(--surface);border-bottom:1px solid var(--line);padding:34px 0 30px}
.hero h1{font-size:clamp(30px,5.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.hero p.lede{color:var(--ink-2);font-size:17px;max-width:52ch;margin:12px 0 0}
.statstrip{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:26px}
.stat{flex:1 1 130px;padding:12px 14px 2px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media (max-width:560px){
  /* Wrapping to two rows left a border hanging off the end of each row. */
  .statstrip{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding-bottom:10px}
  .stat:nth-child(odd){border-right:1px solid var(--line);padding-right:14px}
  .stat:nth-last-child(-n+2){border-bottom:0}
}
.stat b{display:block;font-family:var(--f-display);font-weight:600;font-size:23px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat .eyebrow{font-size:10px}

/* ---- page header (inner pages) ---- */
.pagehead{background:var(--surface);border-bottom:1px solid var(--line);padding:28px 0}
.pagehead h1{font-size:clamp(26px,4vw,38px);font-weight:600}
.pagehead p{color:var(--ink-2);margin:9px 0 0;max-width:64ch;font-size:15.5px}
.crumbs{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin-bottom:9px;
  letter-spacing:.04em}
.crumbs a{color:var(--muted)}

section{padding:40px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:6px}
.sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:600}
.sec-sub{color:var(--muted);font-size:14.5px;max-width:64ch;margin:8px 0 24px}

/* ---- listing grid ---- */
/* The hairline between cards is each card's own 1px outline meeting its
   neighbour's across a 1px gap — not a coloured grid background showing
   through. A painted background leaves grey blocks wherever the last row is
   short, which on 286 listings in 4 columns was two dead cells on every
   directory and category page. */
.dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:1px}
.lcard{background:var(--surface);box-shadow:0 0 0 1px var(--line);
  padding:15px 16px 14px;display:flex;flex-direction:column;
  gap:6px;text-decoration:none;color:inherit;transition:background .12s ease}
.lcard:hover{background:var(--surface-2)}
.lc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.lcard h3{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.lcard .cat{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase}
.lcard .addr{font-size:13px;color:var(--ink-2);line-height:1.4}
.lcard .desc{font-size:13px;color:var(--muted);line-height:1.45}
.lcard.is-pending,.lcard.is-trace{background:var(--surface-2)}
.lcard.is-pending h3,.lcard.is-trace h3{color:var(--muted);font-weight:500}
.lcard.is-pending .addr,.lcard.is-pending .desc,
.lcard.is-trace .addr,.lcard.is-trace .desc{color:var(--muted)}
.lcard.is-pending:hover,.lcard.is-trace:hover{background:var(--surface)}
.lcard.is-trace h3{text-decoration:line-through;text-decoration-color:var(--line-2);
  text-decoration-thickness:1px}

.badge{flex:none;font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  padding:2px 6px;border-radius:2px;margin-top:2px;white-space:nowrap}
.b-ok{background:var(--accent-soft);color:var(--accent)}
.b-check{background:var(--amber-soft);color:var(--amber)}
.b-trace{background:transparent;color:var(--muted);border:1px dashed var(--line-2)}

.fhrs{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  border:1px solid var(--line-2);border-radius:2px;padding:3px 8px 3px 3px;
  color:var(--ink-2);margin-top:2px}
.fhrs b{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:17px;
  border-radius:1px;font-size:11px;font-weight:600;background:var(--line-2);color:var(--surface)}
.fhrs.r5 b{background:#1E7A46;color:#fff}
.fhrs.r4 b{background:#4E9A3E;color:#fff}
.fhrs.r3 b{background:#B08A18;color:#fff}
.fhrs.r2 b,.fhrs.r1 b,.fhrs.r0 b{background:#B4442C;color:#fff}
.fhrs.stale{border-color:var(--amber);color:var(--amber)}

.meta-line{font-family:var(--f-mono);font-size:11px;line-height:1.5;color:var(--accent);
  background:var(--accent-soft);padding:5px 7px;border-radius:2px;margin-top:2px}
.src-note{font-family:var(--f-mono);font-size:10.5px;line-height:1.5;color:var(--muted);
  padding-top:8px;margin-top:2px;border-top:1px dotted var(--line-2)}

/* ---- category / area index ---- */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tile{background:var(--surface);padding:16px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:4px;transition:background .12s ease}
.tile:hover{background:var(--surface-2)}
.tile b{font-family:var(--f-display);font-size:16px;font-weight:600}
.tile span{font-family:var(--f-mono);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ---- listing detail ---- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.detail dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:22px 0 0;font-size:15px}
.detail dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding-top:3px}
.detail dd{margin:0;color:var(--ink-2)}
.panel{background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:2px}
.panel h2{font-size:16px;font-weight:600;margin-bottom:8px}
.panel p{font-size:13.5px;color:var(--ink-2);margin:0 0 12px;line-height:1.55}
.panel + .panel{margin-top:16px}
.btn{display:inline-block;border:1px solid var(--accent);background:var(--accent);
  color:var(--surface);padding:10px 16px;border-radius:2px;font-size:14px;cursor:pointer;
  text-decoration:none;font-family:var(--f-body)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:hover{opacity:.9}
form.claim label{display:block;font-size:12px;font-family:var(--f-mono);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin:10px 0 4px}
form.claim input,form.claim textarea{width:100%;font:inherit;font-size:14px;padding:9px 10px;
  border:1px solid var(--line-2);border-radius:2px;background:var(--stone);color:var(--ink)}
form.claim textarea{min-height:78px;resize:vertical}
form.claim .btn{margin-top:14px;width:100%;text-align:center}

.notice-strip{background:var(--amber-soft);border:1px solid var(--amber);padding:13px 15px;
  border-radius:2px;font-size:13.5px;color:var(--ink);margin-top:20px}
.notice-strip b{color:var(--amber)}

/* ---- what's on ---- */
.weekgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.wcard{background:var(--surface);padding:18px 18px 16px;display:flex;flex-direction:column;gap:9px}
.wcard-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kind{font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px}
.k-offer{background:var(--accent);color:var(--surface)}
.k-event{background:var(--gold-bright);color:#1B1608}
.k-new{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.k-special{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.example{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;
  color:var(--amber);border:1px dashed var(--amber);padding:2px 6px;border-radius:2px}
.wcard h3{font-size:17px;font-weight:600;line-height:1.28}
.wcard .venue{font-family:var(--f-mono);font-size:12px;color:var(--accent);font-weight:500}
.wcard .venue a{color:inherit}
.wcard .when{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.wcard .src{margin-top:auto;padding-top:10px;border-top:1px dotted var(--line-2);
  font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.wcard.featured{background:var(--gold-soft);border-left:3px solid var(--gold-bright)}

.outlink{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--accent);font-weight:600;margin-top:2px;
}
.lcard.is-pending .outlink,.lcard.is-trace .outlink{color:var(--muted)}

/* ---- sponsor slot on the what's-on board ---- */
.sponsorcard{
  background:var(--gold-soft);border-left:3px solid var(--gold-bright);
  position:relative;overflow:hidden;gap:10px;padding-bottom:52px;
  justify-content:flex-start;
}
.k-sponsor{
  background:var(--gold-bright);color:#1B1608;align-self:flex-start;
}
.sponsorcard h3{color:var(--ink);font-size:18px;line-height:1.25;letter-spacing:-.02em}
.sponsor-line{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:30ch;
}
.sponsor-cta{
  align-self:flex-start;background:var(--gold-bright);color:#1B1608;
  text-decoration:none;font-size:13px;font-weight:600;padding:8px 14px;border-radius:2px;
  position:relative;z-index:1;
}
.sponsor-cta:hover{background:var(--gold);color:var(--surface)}
.sponsor-art{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:46px;
  color:var(--gold-bright);opacity:.28;pointer-events:none;
}

/* ---- search ---- */
.searchbar{display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:2px;padding:0 13px;max-width:520px}
.searchbar input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;
  font-size:15px;padding:12px 0;outline:none;min-width:0}
.searchbar svg{flex:none;color:var(--muted)}
.resultline{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding:14px 0;
  letter-spacing:.03em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:2px;
  padding:6px 11px;font-size:13.5px;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--accent)}
.chip[aria-current="page"]{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.chip .n{font-family:var(--f-mono);font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}

/* ---- ads ---- */
.adslot{border:1px dashed var(--line-2);background:repeating-linear-gradient(45deg,
  transparent,transparent 9px,var(--surface-2) 9px,var(--surface-2) 10px);
  padding:24px 20px;text-align:center;border-radius:2px;margin:8px 0}
.adslot .eyebrow{color:var(--muted)}
.adslot p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.lcard.featured{background:var(--gold-soft);border-left:3px solid var(--gold-bright)}
.lcard.featured .cat{color:var(--gold)}

.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.data{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);
  border:1px solid var(--line)}
table.data th,table.data td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line)}
table.data th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface-2)}
table.data td{color:var(--ink-2)}
table.data tr:last-child td{border-bottom:0}
table.data .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:13px}
table.data th.num{text-align:right}
.tag-new{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;background:var(--accent-soft);
  color:var(--accent);padding:1px 5px;border-radius:2px;white-space:nowrap}
.formnote{font-size:12px;color:var(--muted);line-height:1.5;margin:11px 0 0}
.formnote b{color:var(--ink-2);font-weight:500}
.attrib{font-family:var(--f-mono);font-size:11px;color:var(--muted);line-height:1.6;margin-top:14px;
  max-width:78ch}

table.data .totalrow td{border-top:2px solid var(--line-2);font-weight:600;color:var(--ink);
  background:var(--surface-2)}
table.data .up{color:var(--accent)}
table.data .down{color:var(--amber)}
.tag-part{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;background:var(--amber-soft);
  color:var(--amber);padding:1px 5px;border-radius:2px;white-space:nowrap}
table.data tbody tr[hidden]{display:none}

table.data .rk{width:34px;font-family:var(--f-mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:left}
table.data th.rk{width:34px}
table.data.ranked tr:nth-child(-n+4) .rk{color:var(--accent);font-weight:600}
table.data.ranked td a{font-weight:500}
table.data tr.thin td{color:var(--muted)}

/* ---- prose ---- */
.prose{max-width:68ch}
.prose h2{font-size:22px;font-weight:600;margin:30px 0 10px}
.prose h3{font-size:17px;font-weight:600;margin:22px 0 6px}
.prose p{margin:0 0 14px;color:var(--ink-2)}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.prose li{margin-bottom:6px}
.prose code{font-family:var(--f-mono);font-size:13px;background:var(--surface-2);
  padding:1px 5px;border-radius:2px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:30px 0 44px;
  font-size:13.5px;color:var(--muted);margin-top:20px}
.footcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;
  margin-bottom:22px}
.footcols h3{font-size:12px;font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.footcols a{display:block;color:var(--ink-2);text-decoration:none;padding:3px 0;font-size:13.5px}
.footcols a:hover{color:var(--accent);text-decoration:underline}
footer p{margin:0 0 6px;max-width:74ch;line-height:1.6}

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

/* --- travel ------------------------------------------------------------- */
.board{min-height:70px}
.boardmsg{font-family:var(--f-mono);font-size:13px;color:var(--muted);padding:16px 0}
.boardmsg.warn{color:var(--amber)}
.boardfoot{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:8px}
table.data .ontime{color:var(--accent);font-weight:500}
table.data .late{color:var(--amber);font-weight:600}
table.data .op{font-size:12px;color:var(--muted)}
.board-note{background:var(--surface-2);border-left:3px solid var(--line-2);
  padding:11px 14px;font-size:13.5px;color:var(--ink-2);margin-bottom:20px}
.stopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stopgrid[data-single="1"]{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.stopcard{background:var(--surface);padding:16px 17px 15px;display:flex;
  flex-direction:column;gap:11px}
.stopcard-head h3{font-size:16px;font-weight:600;line-height:1.25}
.stopcard-head h3 a{color:var(--ink);text-decoration:none}
.stopcard-head h3 a:hover{color:var(--accent);text-decoration:underline}
.routeline{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.routepill{font-family:var(--f-mono);font-size:11px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);padding:2px 6px;border-radius:2px}
.routeline .muted{font-size:12.5px;color:var(--muted)}
.nextwrap{display:flex;flex-direction:column;gap:10px}
.dirname{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.nextfall{font-size:12.5px;color:var(--muted)}
.nextlist{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.nextlist li{display:flex;align-items:baseline;gap:9px;font-size:13.5px}
.nextlist .rt{font-family:var(--f-mono);font-size:12.5px;min-width:34px;color:var(--accent)}
.nextlist .t{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.nextlist .wait{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.ttday{font-size:15px;font-weight:600;margin:20px 0 8px}
.nosvc{font-size:13px;color:var(--muted);padding:6px 0 2px}
.freshness{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);
  line-height:1.6;margin-top:14px;padding-top:11px;border-top:1px dotted var(--line-2)}
.freshness.stale{color:var(--amber);border-top-color:var(--amber);font-weight:500}
/* The trains section left the whole right-hand side of the page empty, and the
   board itself had no frame — so before live data arrives it read as a blank
   gap rather than a departure board waiting to fill. */
/* Every link in this chain needs min-width:0 or the departure table's natural
   width wins and pushes the whole page sideways on a phone. It only showed up
   the day the rail feed was switched on, because until then the board never
   had a table in it — a layout bug that lay dormant behind a 503. */
.railgrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px;align-items:start}
.railgrid > *{min-width:0}
@media (max-width:820px){.railgrid{grid-template-columns:1fr}}
.board{min-width:0;min-height:120px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
.board .scroller{align-self:stretch;min-width:0;max-width:100%}
.board table.data{border:0}
.boardmsg{font-family:var(--f-mono);font-size:13px;color:var(--muted);
  padding:26px 18px;margin:0;text-align:center}
.stationcard{background:var(--surface);border:1px solid var(--line);padding:17px 18px}
.stationcard h3{font-family:var(--f-display);font-size:16px;font-weight:600;margin-bottom:12px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13.5px}
dl.facts dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);padding-top:2px}
dl.facts dd{margin:0;color:var(--ink-2);line-height:1.45}
.crs{font-family:var(--f-mono);font-weight:600;background:var(--accent-soft);
  color:var(--accent);padding:1px 6px;letter-spacing:.06em}
.facts-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:13px;
  padding-top:11px;border-top:1px dotted var(--line-2)}
/* --- homepage departures strip ------------------------------------------ */
.stripsec{padding-bottom:6px}
.sec-head .seeall{font-family:var(--f-mono);font-size:12px;color:var(--accent);
  text-decoration:none;white-space:nowrap;padding-bottom:3px}
.sec-head .seeall:hover{text-decoration:underline}
.stripgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stripcard{background:var(--surface);padding:15px 16px 14px;display:flex;
  flex-direction:column;gap:10px;min-width:0}
.striphead{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);font-weight:600}
.striphead span{color:var(--muted);font-weight:400;letter-spacing:.05em}
.stripboard .boardmsg{padding:14px 0;text-align:left;font-size:12.5px}
.stripboard table.data{border:0;font-size:13px}
.stripboard table.data th{display:none}
.stripboard table.data td{padding:5px 8px 5px 0;border-bottom:1px dotted var(--line)}
.stripboard table.data td.op{display:none}
.stripboard .boardfoot{display:none}
.stripattrib{margin-top:auto;padding-top:8px;font-size:10px}
.stripfoot{margin-top:auto;padding-top:9px;border-top:1px dotted var(--line-2);
  font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.stripfoot a{color:var(--accent)}
.ofsted-note{background:var(--surface-2);border-left:3px solid var(--line-2);
  padding:15px 17px;margin-top:26px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ofsted-note p{margin:0 0 9px}
.ofsted-note p:last-child{margin-bottom:0;font-size:12.5px;color:var(--muted)}
.ofsted-note b{color:var(--ink)}
.b-own{background:transparent;color:var(--ink-2);border:1px solid var(--line-2);
  align-self:flex-start;letter-spacing:.07em}
.lcard .b-own{margin-top:-3px}
dl .b-own{margin-right:8px;display:inline-block;vertical-align:1px}
.hours-meta{font-family:var(--f-mono);font-size:11px;color:var(--muted);line-height:1.5}

/* --- services directory -------------------------------------------------- */
.tradegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:1px;
  margin-bottom:26px}
.tradecard{background:var(--surface);box-shadow:0 0 0 1px var(--line);
  padding:15px 16px 14px;display:flex;flex-direction:column;
  gap:8px;text-decoration:none;color:inherit}
.tradecard:hover{background:var(--surface-2)}
.tradecard h3{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.tradecard .desc{font-size:13px;color:var(--muted);line-height:1.45}
.regline{font-family:var(--f-mono);font-size:11px;color:var(--accent);line-height:1.45;
  margin-top:auto;padding-top:8px;border-top:1px dotted var(--line-2)}
.regline.muted{color:var(--muted)}
.r-law{background:var(--accent);color:var(--surface)}
.r-scheme{background:var(--accent-soft);color:var(--accent)}
.r-part{background:var(--amber-soft);color:var(--amber)}
.r-none{background:transparent;color:var(--muted);border:1px dashed var(--line-2)}
.reggroup{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:26px 0 12px;
  font-family:var(--f-display);font-size:16px;font-weight:600}
.reggroup-note{font-family:var(--f-body);font-size:13px;font-weight:400;color:var(--muted);
  max-width:58ch;line-height:1.45}
.regstate{margin-top:12px}
.checkgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
@media (max-width:860px){.checkgrid{grid-template-columns:1fr}}
.lawtext{font-size:15.5px;color:var(--ink-2);line-height:1.6;max-width:64ch;margin:0}
.watchfor{background:var(--amber-soft);border-left:3px solid var(--amber);padding:13px 15px;
  margin-top:24px;font-size:14px;color:var(--ink-2);line-height:1.55;max-width:66ch}
.watchfor b{color:var(--amber)}


/* ---- Service provider listings ---------------------------------------- */
.provlist{display:grid;gap:1px;
  /* auto-fill, not auto-fit: with no painted grid background an empty track is
     invisible, and auto-fit would stretch a single card across the page. */
  grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.provcard{background:var(--surface);box-shadow:0 0 0 1px var(--line);
  padding:16px 18px 15px;display:flex;flex-direction:column;gap:7px}
.provcard{gap:6px}
.pc-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.provcard h3{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink);flex:1 1 auto;min-width:0}
.pc-badge{flex:none;font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:2px;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pc-trade{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.pc-desc{font-size:13px;color:var(--ink-2);line-height:1.5}
.pc-where{font-size:12.5px;color:var(--muted);line-height:1.45}
.pc-note{font-size:12.5px;color:var(--muted);line-height:1.45;font-style:italic}
.pc-hours{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.pc-hsrc{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.pc-links{font-size:13.5px;margin-top:auto;padding-top:8px}
.pc-links .sep{margin:0 7px;color:var(--line-2)}
.pc-check{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);line-height:1.5;
  padding-top:7px;border-top:1px dotted var(--line-2)}
.pc-check a{color:var(--accent)}
.provcard:not(:has(.pc-links)) .pc-check{margin-top:auto}
.prov-foot{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:64ch}
.prov-empty{border:1px solid var(--line);background:var(--surface-2);padding:18px 20px;max-width:70ch}
.prov-empty h2{font-size:16px;font-weight:600;margin-bottom:8px}
.prov-empty p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0;max-width:62ch}
@media (max-width:560px){.provlist{grid-template-columns:1fr}}


/* ---- Services index, grouped by job ----------------------------------- */
/* A long badge ("Government-authorised scheme") cannot share a line with the
   title inside a 252px card, so give it its own. */
.tradecard .lc-top{flex-wrap:wrap;gap:6px 8px}
.tradecard .lc-top h3{flex:1 1 100%}
.chips button.chip{font:inherit;cursor:pointer}
.chips .chip{font:inherit}
#tgrid{margin-top:14px}
.tc-count{font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.reglegend{margin-top:36px;padding:20px 22px;background:var(--surface-2);
  border:1px solid var(--line)}
.reglegend h2{font-size:16px;font-weight:600;margin-bottom:6px}
.reglegend > p{font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:64ch;margin-bottom:14px}
.reglegend dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:baseline;margin:0}
.reglegend dt{margin:0}
.reglegend dd{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}
@media (max-width:560px){
  .reglegend dl{grid-template-columns:1fr;gap:3px}
  .reglegend dd{margin-bottom:9px}
}


/* ---- Services: trade strip under the businesses ----------------------- */
.tradestrip{display:grid;gap:1px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.tstrip{display:flex;align-items:baseline;gap:9px;padding:10px 13px;
  background:var(--surface);box-shadow:0 0 0 1px var(--line);
  text-decoration:none;color:inherit;font-size:13.5px}
.tstrip:hover{background:var(--surface-2)}
.ts-name{flex:1 1 auto;font-weight:600;min-width:0}
.ts-n{flex:none;font-family:var(--f-mono);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums}
/* The provider card is an .lcard that is not a link, so cancel the link hover. */
.lcard.provcard{cursor:default}
.lcard.provcard:hover{background:var(--surface)}
/* The trade label links to that trade's guide. It should read as a label that
   happens to be clickable, not as a blue link in the middle of a card. */
.lcard.provcard .cat a{color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--line-2)}
.lcard.provcard .cat a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.lcard.provcard .outlink{color:var(--accent)}
.lcard.provcard .outlink a{color:var(--accent)}
.lcard.provcard .outlink .sep{margin:0 7px;color:var(--line-2)}
.lcard .pc-check{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);
  padding-top:8px}
/* Service areas run long on a few of these; two lines is plenty on a card. */
.lcard.provcard .addr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.emptynote{font-size:14px;color:var(--muted);line-height:1.6;max-width:62ch;
  padding:16px 0 0}

/* ---- the claims log -------------------------------------------------------
   A table of what businesses have asked us to change. It needs to read as a
   record rather than a feature, so: no zebra stripes, no card, just rules. The
   old value sits above the new one in muted type, because the change is the
   point and the direction of travel should be obvious without a legend. */
.claims{width:100%;border-collapse:collapse;font-size:14px;margin:18px 0}
.claims th{text-align:left;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line-2);padding:0 14px 8px 0;font-weight:500}
.claims td{vertical-align:top;padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line)}
.claims td:first-child{white-space:nowrap;font-family:var(--f-mono);
  font-size:12.5px;color:var(--ink-2)}
.claims .was{color:var(--muted);font-size:12.5px;text-decoration:line-through;
  text-decoration-color:var(--line-2)}
/* The note on how it was checked is not an old value, so it must not be struck
   through — same muted weight, no line. */
.claims .how-note{color:var(--muted);font-size:12.5px}
.claims hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media (max-width:640px){
  .claims,.claims tbody,.claims tr,.claims td{display:block;width:100%}
  .claims thead{display:none}
  .claims tr{border-bottom:1px solid var(--line-2);padding-block:10px}
  .claims td{border:0;padding:2px 0}
}

/* --- weather ------------------------------------------------------------- */
/* The icons are drawn in the client script on currentColor, so the only thing
   the stylesheet decides is what colour each kind of weather is. Keeping that
   here rather than in the SVG is what makes them work in both themes. */
.wxicon{width:30px;height:32px;flex:none;color:var(--ink-2)}
.wx-clear{color:var(--gold-bright)}
.wx-partly{color:var(--gold)}
.wx-drizzle,.wx-rain,.wx-showers{color:var(--accent)}
.wx-thunder{color:var(--amber)}
.wx-snow,.wx-fog{color:var(--muted)}

/* ---- homepage strip ---- */
.wxcard .wxout{min-width:0}
.wxbig{display:flex;align-items:center;gap:12px}
.wxbig .wxicon{width:42px;height:45px}
.wxtemp{font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1;
  letter-spacing:-.02em;display:block}
.wxbig .wxwords{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.wxline{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin:8px 0 0;
  line-height:1.5}
.wxmini{list-style:none;margin:10px 0 0;padding:9px 0 0;display:flex;gap:4px;
  border-top:1px dotted var(--line-2)}
.wxmini li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.wxmini .wxicon{width:22px;height:24px}
.wxd{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.wxmx{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.wxmn{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- the hero: the town, drawn under whatever the sky is doing ---- */
.wxtop{padding:0;background:var(--surface);border-bottom:1px solid var(--line)}
.wxhero{display:grid;grid-template-columns:minmax(290px,1fr) 1.22fr;gap:34px;
  align-items:center;padding:30px 0 34px}
.wxread h1{font-size:clamp(27px,4vw,38px);font-weight:600;margin-bottom:18px}
.wxart{margin:0;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-2);
  display:flex;min-height:290px}
.wxart .wxsky{width:100%;height:auto;min-height:290px;align-self:stretch}

/* Which parts of the drawing are showing is the only thing the script decides.
   Everything is in the page already, so a failed fetch leaves the town on a
   fair day rather than an empty frame. */
.wxart .wx-rain,.wxart .wx-snow,.wxart .wx-fog,.wxart .wx-moon,.wxart .wx-stars,
.wxart .wx-clouds{display:none}
.wxart[data-wx="cloud"] .wx-clouds,.wxart[data-wx="wet"] .wx-clouds,
.wxart[data-wx="snow"] .wx-clouds,.wxart[data-wx="thunder"] .wx-clouds{display:block}
.wxart[data-wx="wet"] .wx-rain,.wxart[data-wx="thunder"] .wx-rain{display:block}
.wxart[data-wx="snow"] .wx-snow{display:block}
.wxart[data-wx="fog"] .wx-fog{display:block}
.wxart[data-wx="cloud"] .wx-sun,.wxart[data-wx="wet"] .wx-sun,
.wxart[data-wx="snow"] .wx-sun,.wxart[data-wx="fog"] .wx-sun,
.wxart[data-wx="thunder"] .wx-sun{display:none}
.wxart[data-night="1"] .wx-sun{display:none}
.wxart[data-night="1"] .wx-stars{display:block}
.wxart[data-night="1"][data-wx="clear"] .wx-moon,
.wxart[data-night="1"][data-wx="cloud"] .wx-moon{display:block}

/* Mood palettes. Daylight values first, as everywhere else in this file. */
.wxart{--art-wet:#5F7F89;--art-fog:#E9EBE6;--art-cloud:#F1F2EE}
.wxart[data-wx="clear"]{--art-sky-1:#ADCFE0;--art-sky-2:#EDF2EC;--art-sun:#EFD999}
.wxart[data-wx="cloud"]{--art-sky-1:#C4CBC9;--art-sky-2:#E6E7E2}
.wxart[data-wx="wet"],.wxart[data-wx="thunder"]{--art-sky-1:#96A3A5;--art-sky-2:#C8CDC8;
  --art-far:#A1AFA6;--art-mid:#7D9085;--art-cloud:#7E8C8E}
.wxart[data-wx="snow"]{--art-sky-1:#C1C9CE;--art-sky-2:#E9EBE7;--art-wet:#FDFDFB;
  --art-far:#C9D1CA;--art-mid:#A7B4AA;--art-cloud:#DDE2E4}
.wxart[data-wx="fog"]{--art-sky-1:#D4D6D2;--art-sky-2:#E6E7E3;--art-far:#C6CCC6;
  --art-mid:#B0BAB2;--art-fog:#EEEFEB}
.wxart[data-night="1"]{--art-sky-1:#152430;--art-sky-2:#2A3835;--art-far:#1F2B24;
  --art-mid:#19251E;--art-mid-2:#243229;--art-near:#0F1710;--art-ground:#0A100B;
  --art-lit:#EAD08A;--art-sun:#EADDB2;--art-wet:#80959C;--art-fog:#2B3936;--art-cloud:#2E3D41}

/* After dark the page's own night palette is already the right sky, so the
   moods only decide what is falling through it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wxart[data-wx]{
    --art-sky-1:#16242C;--art-sky-2:#232F2C;--art-far:#1B2922;--art-mid:#233428;
    --art-mid-2:#2E4136;--art-near:#080D0A;--art-ground:#0A0F0C;--art-sun:#4A4229;
    --art-lit:#D9AE4F;--art-wet:#6E8790;--art-fog:#25332F;--art-cloud:#2A3A3E}
  :root:not([data-theme="light"]) .wxart[data-wx="clear"]{--art-sky-1:#11283A;--art-sun:#6B5C31}
  :root:not([data-theme="light"]) .wxart[data-wx="wet"],
  :root:not([data-theme="light"]) .wxart[data-wx="thunder"]{--art-sky-1:#192225;--art-sky-2:#222A28}
}
:root[data-theme="dark"] .wxart[data-wx]{
  --art-sky-1:#16242C;--art-sky-2:#232F2C;--art-far:#1B2922;--art-mid:#233428;
  --art-mid-2:#2E4136;--art-near:#080D0A;--art-ground:#0A0F0C;--art-sun:#4A4229;
  --art-lit:#D9AE4F;--art-wet:#6E8790;--art-fog:#25332F;--art-cloud:#2A3A3E}

/* ---- the reading ---- */
.wxnowrow{display:flex;align-items:center;gap:17px}
.wxnowrow .wxicon{width:58px;height:62px}
.wxbignum{font-family:var(--f-display);font-size:clamp(44px,8vw,62px);font-weight:600;
  line-height:.92;letter-spacing:-.035em;display:block}
.wxreadout .wxwords{display:block;font-size:16.5px;color:var(--ink);margin-top:7px}
.wxfeels{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.wxchips{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.wxchips li{background:var(--stone);padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.wxchips span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.wxchips b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.wxstamp{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin:16px 0 0;
  line-height:1.6}

/* ---- the shape of the day ---- */
#wxhours .scroller{border:1px solid var(--line);background:var(--surface)}
.wxchart{display:block}
.wxnight{fill:var(--surface-2)}
.wxaxis{stroke:var(--line-2);stroke-width:1}
.wxbar{fill:var(--accent);opacity:.62}
.wxline2{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;
  stroke-linecap:round}
.wxdot{fill:var(--surface);stroke:var(--accent);stroke-width:1.7}
.wxtlab{font-family:var(--f-mono);font-size:12px;font-weight:500;fill:var(--ink);
  text-anchor:middle}
.wxxlab{font-family:var(--f-mono);font-size:10.5px;fill:var(--muted);text-anchor:middle}
.wxnote{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);margin:11px 0 0}

/* ---- the week ---- */
.wxweeklist{list-style:none;margin:0;padding:0;border:1px solid var(--line);
  background:var(--surface)}
.wxweeklist li{display:grid;
  grid-template-columns:54px 26px minmax(0,1.1fr) 38px minmax(90px,2.2fr) 38px 44px;
  align-items:center;gap:13px;padding:11px 16px;border-top:1px solid var(--line)}
.wxweeklist li:first-child{border-top:0}
.wxwday{font-weight:600;font-size:14px}
.wxwic{display:flex}
.wxwic .wxicon{width:24px;height:26px}
.wxwwords{font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.wxwlo,.wxwhi{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.wxwlo{color:var(--muted);text-align:right}
.wxwhi{font-weight:600}
.wxwbar{position:relative;height:8px;background:var(--surface-2);border-radius:99px}
.wxwbar i{position:absolute;top:0;height:8px;border-radius:99px;background:var(--accent)}
.wxwbar i.cold{background:#6E93A8}
.wxwbar i.warm{background:var(--gold-bright)}
.wxwpop{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);text-align:right}
.wxwpop.wet{color:var(--accent);font-weight:600}
.sec-head.wxweek{margin-top:38px}
.wxwhy{padding-top:14px}

@media (max-width:860px){
  .wxhero{grid-template-columns:1fr;gap:24px;padding:26px 0 30px}
  .wxart{min-height:210px;order:-1}
  .wxart .wxsky{min-height:210px}
}
@media (max-width:640px){
  .wxweeklist li{grid-template-columns:52px 24px 34px minmax(60px,1fr) 34px 42px;
    gap:9px;padding:10px 13px}
  .wxwwords{display:none}
  .wxnowrow .wxicon{width:46px;height:50px}
  .wxchips{grid-template-columns:repeat(2,1fr)}
}

/* --- travel: two modes, told apart --------------------------------------- */
/* The page was one flat run of h2s — trains, then three bus sections at the
   same level — so nothing said where one mode ended and the other began. Each
   mode now opens with a rule, a mark and its name, and everything under it is
   a subhead rather than a peer. */
.modejump{display:flex;gap:8px;margin-top:16px}
.modejump a{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--accent);
  background:var(--accent-soft);border:1px solid transparent;padding:6px 14px;
  border-radius:99px}
.modejump a:hover{border-color:var(--accent)}

.mode{padding:34px 0 40px}
.mode + .mode{padding-top:8px}
.modehead{display:flex;align-items:center;gap:16px;padding-bottom:16px;
  margin-bottom:26px;border-bottom:2px solid var(--ink)}
.modemark{width:38px;height:38px;flex:none;color:var(--accent)}
.modehead h2{font-size:clamp(26px,4vw,34px);font-weight:600;line-height:1;
  letter-spacing:-.02em}
.modehead p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;max-width:62ch}
.modehead b{color:var(--ink);font-weight:600}

/* Subheads sit clearly below a mode, and clearly above a grid of cards whose
   own titles are the same tag. Mono and rules, so they never read as peers. */
h3.subhead{font-family:var(--f-mono);font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  margin:38px 0 0;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.mode > .wrap > h3.subhead:first-of-type{margin-top:0}
h3.subhead + .sec-sub{margin-top:12px}

@media (max-width:560px){
  .modehead{gap:12px;align-items:flex-start}
  .modemark{width:30px;height:30px;margin-top:2px}
  .mode{padding:26px 0 30px}
}

/* --- services: the trade guides -------------------------------------------
   These had a heading promising "every trade, and what can be checked" and no
   trades under it — tradeCard() was written, styled, and never called, so two
   guides were reachable from nowhere on the site and the rest only by way of
   a provider that happened to list that trade first. */
.tradegroups{display:flex;flex-direction:column;gap:26px;margin-bottom:34px}
.tg-head{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.tg-head h3{font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);margin:0}
.tg-head p{margin:5px 0 0;font-size:13.5px;color:var(--muted);max-width:62ch}

/* ---- news ----------------------------------------------------------------
   Cards are whole-card links: the headline is the link target, so there is no
   "read more" to aim at. Grid children get min-width:0 because without it a
   long unbroken headline sets the column width and pushes the page sideways —
   the same fault that put a 29px overflow on /travel/ for weeks. */
.newslist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.newslist > *{min-width:0}
.newslist-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (min-width:900px){ .newslist-3{grid-template-columns:repeat(3,1fr)} }

.ncard{
  background:var(--surface);padding:16px 17px 14px;
  display:flex;flex-direction:column;gap:9px;
  color:inherit;text-decoration:none;
  border-left:3px solid transparent;
  transition:border-color .12s ease, background .12s ease;
}
.ncard:hover,.ncard:focus-visible{border-left-color:var(--accent);background:var(--surface-2)}
.n-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.n-meta time{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.n-cat{font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 6px;border-radius:2px;white-space:nowrap}
.n-council{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.n-sport{background:var(--gold-bright);color:#1B1608}
.n-event{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
/* Amber, like every other "handle with care" marker on this site. */
.n-incident{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
.n-other{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.ncard h3{font-size:16.5px;font-weight:600;line-height:1.3;margin:0;
  overflow-wrap:break-word}
.ncard:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.n-outlet{margin-top:auto;padding-top:10px;border-top:1px dotted var(--line-2);
  font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.n-outlet::after{content:" \2192"}

.newsstrip{padding-top:4px}