/* Hash bumped 31 Aug 2026, deliberately and for one reason: to hand every
   reader a stylesheet URL no cache has ever seen.

   That morning a hashed stylesheet URL was requested in the seconds before
   its deploy landed. Cloudflare Pages had no 404 page for this site, so it
   answered with generic HTML and a 200 status; `_headers` matches on path
   rather than content, so that HTML was cached — at the edge and in
   browsers — as though it were the stylesheet, marked never-recheck. The
   live site rendered unstyled for everyone until the URL was purged by
   hand, and browsers that fetched it in the window stayed stuck, because
   `immutable` means they never ask again. A refresh does not rescue them.
   A new URL does.

   Both causes are now closed: src/404.njk makes a missing asset return a
   real 404 instead of a fake success, and `_headers` no longer says
   immutable, so a wrong answer can be recovered by a reload. The full
   account is in DEPLOY.md under "When it breaks".

   Nothing below this line changed. Editing this file for any reason has
   the same effect, so this comment need not be preserved for its own
   sake — but do not delete the 404 page or restore immutable. */

/* largs.org design system — from the homepage mock-up.
   Palette and type are fixed by the project brief; change only by agreement. */

:root{
  --slate:#17333A;
  --slate-deep:#0F262C;
  --paper:#FBF8F1;
  --sand:#EDE5D4;
  --card:#FFFFFF;
  --foam:#BFDED2;
  --foam-tint:#E6F0EA;
  --water-tint:#DCE8F4;
  --sky-tint:#F3E9C9;
  /* Deeper cousins of the two tints, for the weather glyph: the pastel
     fills read as background washes, but a glyph at 46px needs enough
     saturation to say "sun" and "rain" at a glance. Same hues, turned up. */
  --sun:#E3B93E;
  --rain:#5B87BC;
  /* Cloud grey. Measured, not eyeballed: 3.0:1 on paper, 3.2:1 on a
     tile card - the WCAG floor for non-text contrast. Do not lighten.
     Separate from --slate because a cloud is a thing the board depicts,
     not chrome: slate at 11:1 read as a storm on a bright day. */
  --cloud:#849295;
  --teal:#25655C;
  --red:#C03B2B;
  --ink:#22383C;
  --muted:#5B6E6D;
  --ok:#2F7D4F;
  --warn:#B07A1F;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px}
body{
  font-family:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
}
a{color:var(--teal)}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--teal);outline-offset:2px;border-radius:2px;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
/* Classes that share an element with .wrap (class="board wrap" and the
   like) set ONLY padding-top and padding-bottom, never the shorthand. A
   shorthand later in this file ties on specificity and wins on order, and
   its middle value of 0 silently removes the 20px gutter above -- which is
   how every page title, the Today board, What's on and the newsletter band
   sat flush against the screen edge on phones until 15 September 2026.
   The gutter belongs to .wrap; the sections own the vertical rhythm. */

/* ---------- masthead ---------- */
.masthead{background:var(--slate);color:var(--paper)}
.masthead-inner{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:26px 0 14px;flex-wrap:wrap;
}
/* The dateline sits on the baseline of "…for you", not of the ship.
   With the longship first in .brand, plain baseline alignment took the
   brand's baseline from the ship's bottom edge, ~6px below the
   handwriting. "last baseline" takes it from .brand's last item, the
   text block, whose last line is the tagline. Browsers without it
   (pre-2022) keep the line above and land where they did before. */
@supports (align-items:last baseline){
  .masthead-inner{align-items:last baseline}
}
.wordmark{
  font-family:"Marcellus",serif;font-size:2.5rem;letter-spacing:.04em;
  color:var(--paper);text-decoration:none;line-height:1;
}
.wordmark span{color:var(--foam)}
/* "Largs.scot", 26 Sep 2026: the address in the masthead, so readers who
   came from a shared link or word of mouth see where they are and can
   type it again. Marcellus has one weight, so the town leads by size
   and colour: .scot in foam at 62%. Screen readers hear "Largs.scot". */
.wordmark .tld{font-size:.62em;letter-spacing:.03em}
.tagline{
  font-family:"Caveat","Spline Sans Mono",monospace;font-size:1.25rem;font-weight:600;
  letter-spacing:.01em;color:var(--foam);
}
.dateline{
  font-family:"Spline Sans Mono",monospace;font-size:.78rem;color:#B9CCC6;
}
.mainnav{border-top:1px solid rgba(255,255,255,.14)}
.mainnav ul{
  list-style:none;display:flex;gap:4px;flex-wrap:wrap;padding:8px 0;
}
.mainnav a{
  display:block;padding:6px 12px;color:var(--paper);text-decoration:none;
  font-weight:500;font-size:.95rem;border-radius:4px;
}
.mainnav a:hover{background:rgba(255,255,255,.1)}
.mainnav a[aria-current="page"]{background:var(--teal)}

/* ---------- horizon signature ---------- */
/* The band stretches; the objects do not. --wl is the waterline, and both
   objects are bottom-aligned to it. The SVG's viewBox is in the same
   pixels as --h, so a change of --h or --wl must be matched in the SVG
   in base.njk (viewBox height, rect heights, and every y). 84/61.5 from
   26 Sep 2026: 4px more sky above the same scene, because the Pencil,
   lifted onto its rise, had 1.5px of headroom and looked jammed. Now 5.5.

   Selectors are class-on-class (.horizon .horizon-bg) rather than
   class-on-element, so they outrank any older `.horizon svg` rule that
   might linger. */
.horizon{
  background:var(--foam);
  position:relative;
  overflow:hidden;
  --h:84px;
  --wl:61.5px;
  height:var(--h);
}
.horizon .horizon-bg{display:block;width:100%;height:var(--h)}
/* The Cumbraes, 26 Sep 2026. Stretched with the band, they were long and
   low on a wide screen (as the islands really are from the prom) but were
   squeezed into humps on a phone, where the same 35px of height had a
   third of the width. Their own layer's height now follows the screen
   width: the full 35px from ~1200px wide, down to 16px on phones, so the
   islands keep roughly the same long, low proportions everywhere. Sits on
   the waterline, 1px into the sea so no hairline shows between them. */
.horizon .horizon-hills{
  position:absolute;left:0;width:100%;display:block;
  bottom:calc(var(--h) - var(--wl) - 1px);
  height:clamp(16px,2.9vw,35px);
}
.horizon .horizon-obj{
  position:absolute;
  bottom:calc(var(--h) - var(--wl));
  width:auto;
  display:block;
}
/* Percentages, so both stay in the same relative place as the band
   stretches. The ferry sits mid-crossing between Cumbrae and the shore;
   the Pencil keeps clear of the masthead's right edge, which is why the
   old SVG group carried translate(-145,0) — same position, stated directly.
   Ferry at 75% of its first size (40 → 30px, phones 30 → 22.5px) from
   26 Sep 2026: it is two miles out mid-crossing, and the Pencil — the
   one object only Largs has — should be the tallest thing on the line. */
.horizon .horizon-ferry{height:30px;left:57%}
.horizon .horizon-pencil{height:52px;left:84%;bottom:calc(var(--h) - var(--wl) + 4px)}

/* The shore the Pencil stands on (26 Sep 2026), so it reads as on land
   rather than floating. One drawn shoreline, horizon-shore.svg, 800x14,
   the same slate as Cumbrae and the sea: a low rise under the Pencil
   (flat, 5px above the water, x 52-68 in the file) and rocks 2-5px high
   running off the right edge. Not a repeating tile: a repeat read as a
   harbour wall. 800px covers the 16% right of the Pencil on screens up
   to ~4,700px wide; .horizon's overflow:hidden trims the rest.
   Placed by the Pencil's centre: the file's x=60 sits at 84% + 8.8px
   (half the Pencil's 17.7px width at 52px tall). The file's waterline
   is 3px above its bottom edge, hence the -3px, so the rocks overlap
   the sea rather than leave a seam. The Pencil is lifted 4px to stand
   on the rise; its tip clears the top of the band by 5.5px (84px band). */
.horizon .horizon-shore{
  position:absolute;display:block;
  width:800px;height:14px;max-width:none;
  left:calc(84% + 8.8px - 60px);
  bottom:calc(var(--h) - var(--wl) - 3px);
}

/* On a phone the band is the same 84px but the window is a third of the
   width, so the ferry took up far too much of it and crowded the Pencil.
   Only the ferry shrinks: the Pencil anchors the right edge and reads
   correctly at 52px on both. 18px from 26 Sep 2026, once the islands were
   lowered on phones (above) and a 22.5px ferry looked oversized beside them. */
@media (max-width:600px){
  .horizon .horizon-ferry{height:18px}
}

/* ---------- today board ---------- */
.board{padding-top:34px;padding-bottom:8px}
.kicker{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--teal);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;flex-wrap:wrap;
}
.kicker .stamp{color:var(--muted);letter-spacing:.08em;text-transform:none}
.tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:12px;
}
/* Two tiles across on a phone, said outright. The auto-fit above gave two
   columns on a 390px phone only while the board had no side gutter (see
   .wrap): with the 20px restored there is 350px, and a 178px floor would
   collapse the board to one column of very tall tiles. ~160px is the width
   the tiles were designed and read at on a phone. Under 360px -- an old SE
   -- the floor stands and one column is right. */
@media (max-width:600px) and (min-width:360px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}
.tile{
  background:var(--card);border:1px solid var(--sand);border-radius:10px;
  padding:14px 16px 12px;
}
.tile .label{
  font-family:"Spline Sans Mono",monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px;margin-bottom:6px;flex-wrap:wrap;
}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.tile .figure{
  font-family:"Marcellus",serif;font-size:1.5rem;line-height:1.2;color:var(--slate);
}
/* Figures that are sentences rather than numbers. "Usually every 20 min"
   and "Usually hourly, less in the evening" wrap at full size, and beside a
   hero that pushes the tile past its neighbours — the grid equalises row
   height, so one tall tile drags four others with it.
   The words stay: "normally" and "usually" are what stops a timetable
   reading as a promise. The type gives way instead. */
.tile .figure.compact{font-size:.95rem;line-height:1.3}
.tile .sub{
  font-size:.86rem;color:var(--muted);margin-top:3px;
}
.tile .sub .mono{font-family:"Spline Sans Mono",monospace;font-size:.8rem;color:var(--ink)}
.tile .sub a{color:var(--teal)}

/* source badges — live vs timetable vs sample */
.badge{
  margin-left:auto;font-family:"Spline Sans Mono",monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;border-radius:999px;
  padding:1px 8px;flex:none;
}
.badge.live{background:var(--foam-tint);color:var(--teal)}
.badge.timetable{background:var(--sand);color:var(--muted)}
.badge.sample{background:#F6EEDD;color:var(--warn)}
.badge.model{background:var(--sand);color:var(--muted)}
.badge.daily{background:var(--foam-tint);color:var(--teal)}
.board-legend{
  font-family:"Spline Sans Mono",monospace;font-size:.68rem;color:var(--muted);
  letter-spacing:.04em;margin-top:10px;
}

/* ---------- main columns ---------- */
.cols{
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;
  padding:36px 0 8px;align-items:start;
}
h2{
  font-family:"Marcellus",serif;font-weight:400;font-size:1.55rem;
  color:var(--slate);margin-bottom:4px;
}
.rule{height:3px;background:var(--foam);width:56px;border-radius:2px;margin-bottom:18px}

/* events */
.event{
  display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--sand);
}
.event:last-of-type{border-bottom:none}
.when{
  flex:none;width:64px;text-align:center;background:var(--foam-tint);
  border-radius:8px;padding:7px 4px 8px;height:fit-content;
}
.when .dow{
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.when .dom{font-family:"Marcellus",serif;font-size:1.35rem;line-height:1.1;color:var(--slate)}
.event h3{font-size:1.06rem;font-weight:700;color:var(--slate)}
.event .meta{
  font-family:"Spline Sans Mono",monospace;font-size:.76rem;color:var(--muted);margin:1px 0 3px;
}
.event p{font-size:.95rem;color:var(--ink)}
/* min-width:0 lets a long title wrap instead of stretching the flex row. */
.event-body{flex:1;min-width:0}
/* DATE, THEN PICTURE, THEN WORDS. .event-main is the row holding the last
   two, so an image is a column rather than a float at the right-hand edge:
   a reader working left to right meets it before the blurb, where at the
   far right it was not being looked at. A row with a picture starts its
   text further right than one without; that unevenness was weighed against
   the picture being seen, and lost (31 Aug 2026). */
.event-main{display:flex;gap:16px;flex:1;min-width:0;align-items:flex-start}
/* A FIXED SQUARE, like the directory's logo box. Every listing gets exactly
   the same room, so no one can buy a bigger space with a bigger file and
   the column edge stays straight.

   It was `contain` at first — each image keeping its own shape, on the
   grounds that a poster is designed to be read whole. With one image on the
   page that looked fine. With two it did not: a square poster beside a
   landscape photograph gave a ragged column and two listings that plainly
   did not match. So: ask for a square (the submission list on this page
   says so) and `cover` crops anything else centrally to fit.

   ONE NUMBER TO NUDGE: the 200. Whatever it becomes, keep width and height
   equal, and tell people the new number on the submission list. */
.event-img{
  flex:none;width:200px;height:200px;object-fit:cover;
  border-radius:8px;background:var(--card);
}
.more{
  display:inline-block;margin-top:14px;font-weight:700;text-decoration:none;
}
.more:hover{text-decoration:underline}

/* council corner */
.council{
  background:var(--card);border:1px solid var(--sand);border-radius:12px;
  padding:22px 22px 18px;
}
.council h2{font-size:1.35rem}
.digest-item{padding:12px 0;border-bottom:1px solid var(--sand)}
.digest-item:last-of-type{border-bottom:none}
.digest-item .decided{font-weight:700;font-size:.98rem;color:var(--slate)}
.digest-item .who{
  font-family:"Spline Sans Mono",monospace;font-size:.74rem;color:var(--muted);margin-top:2px;
}
.chip{
  display:inline-block;font-family:"Spline Sans Mono",monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;border-radius:999px;
  padding:2px 9px;margin-top:6px;
}
.chip.progress{background:var(--foam-tint);color:var(--teal)}
.chip.done{background:#E7F0E7;color:var(--ok)}
.chip.watching{background:#F6EEDD;color:var(--warn)}
.council h4{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin:20px 0 8px;
}
.council ul{list-style:none}
.council ul li{
  font-size:.93rem;padding:5px 0;border-bottom:1px dotted var(--sand);
}
.council ul li:last-child{border-bottom:none}
.council ul li .mono{font-family:"Spline Sans Mono",monospace;font-size:.78rem;color:var(--muted)}

/* ---------- newsletter ---------- */
.newsletter{background:var(--foam-tint);border-top:1px solid var(--foam);border-bottom:1px solid var(--foam);margin-top:38px}
.newsletter-inner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-top:26px;padding-bottom:26px;flex-wrap:wrap;
}
.newsletter h2{margin-bottom:2px}
.newsletter p{color:var(--muted);font-size:.95rem}
.signup{display:flex;gap:8px;flex-wrap:wrap}
.signup input{
  font:inherit;padding:10px 14px;border:1px solid var(--sand);border-radius:8px;
  background:var(--card);min-width:230px;
}
.signup button{
  font:inherit;font-weight:700;padding:10px 20px;border:none;border-radius:8px;
  background:var(--teal);color:#fff;cursor:pointer;
}
.signup button:hover{background:#1D544C}

/* ---------- directory ---------- */
.directory{padding:36px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.chips a{
  text-decoration:none;background:var(--card);border:1px solid var(--sand);
  color:var(--slate);font-weight:500;font-size:.92rem;
  padding:8px 15px;border-radius:999px;
}
.chips a:hover{border-color:var(--teal);color:var(--teal)}
/* Directory hub index. The same chip as the home page, plus a count — a
   reader should be able to see which categories have something in them
   without clicking into an empty one, which was half the reason for giving
   the directory a front door at all. The count sits inside the chip in a
   lighter weight so it reads as a footnote, not a second label. */
.dir-index{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 8px}
.dir-index-item{
  text-decoration:none;background:var(--card);border:1px solid var(--sand);
  color:var(--slate);font-weight:500;font-size:.92rem;
  padding:8px 15px;border-radius:999px;
  display:inline-flex;align-items:baseline;gap:7px;
}
.dir-index-item:hover{border-color:var(--teal);color:var(--teal)}
.dir-index-sub{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;
  color:var(--muted);font-weight:400;white-space:nowrap;
}
.dir-index-item:hover .dir-index-sub{color:var(--teal)}
/* Nine chips on one line from 1100px up. Tightened on WIDE SCREENS ONLY —
   below this the padding and size are untouched, because a smaller tap target
   is the wrong direction for a reader holding a phone. If a tenth category is
   ever added this will wrap again, which is fine; two rows is not a fault. */
@media (min-width:1100px){
  .chips{gap:7px;flex-wrap:nowrap}
  .chips a{padding:8px 12px;font-size:.88rem;white-space:nowrap}
}
.note{color:var(--muted);font-size:.92rem;margin-top:12px;max-width:70ch}

/* ---------- footer ---------- */
footer{background:var(--slate-deep);color:#C9D8D2;margin-top:44px}
.foot{
  display:grid;grid-template-columns:1.5fr 1fr;gap:36px;padding:36px 0 28px;
}
.founder{
  border-left:3px solid var(--foam);padding-left:18px;
}
.founder h3{
  font-family:"Marcellus",serif;font-weight:400;color:var(--paper);
  font-size:1.15rem;margin-bottom:6px;
}
.founder p{font-size:.93rem;line-height:1.65}
.founder a{color:var(--foam)}
.foot-meta h4{
  font-family:"Spline Sans Mono",monospace;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--foam);margin-bottom:8px;
}
.foot-meta p{font-size:.9rem;line-height:1.7}
.foot-meta a{color:#C9D8D2}
.colophon{
  border-top:1px solid rgba(255,255,255,.12);padding:14px 0 18px;
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.06em;
  color:#8AA39B;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.colophon a{color:inherit}

/* ---------- responsive & motion ---------- */
@media (max-width:880px){
  .cols{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .wordmark{font-size:2rem}
  .tagline{font-size:1rem}
}
a,button,.chips a,.tile{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- getting about: works map & list ---------- */
.page-intro{max-width:70ch;margin-bottom:6px}
.works-legend{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;color:var(--muted);
  letter-spacing:.04em;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin:10px 0 4px;
}
.works-legend .swatch{
  width:11px;height:11px;border-radius:50%;display:inline-block;
  margin-right:6px;vertical-align:-1px;border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--sand);
}
.swatch.active{background:var(--red)}
.swatch.planned{background:var(--warn)}
#works-map{
  height:430px;border:1px solid var(--sand);border-radius:12px;
  margin:12px 0 20px;background:var(--foam-tint);
}
.work-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--sand);align-items:baseline}
.work-row:last-of-type{border-bottom:none}
.work-row .chip{flex:none;margin-top:0}
.chip.active{background:#F6E1DD;color:var(--red)}
.chip.planned{background:#F6EEDD;color:var(--warn)}
.work-main{flex:1}
.work-main h3{font-size:1.02rem;font-weight:700;color:var(--slate)}
.work-main .meta{font-family:"Spline Sans Mono",monospace;font-size:.76rem;color:var(--muted);margin-top:2px}

/* ---------- council corner page ---------- */
.council-page{padding:26px 20px 4px}
.council-page.council-last{padding-bottom:14px}
.mono-h{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin:14px 0 6px;
}
.sample-note{
  background:#F6EEDD;border:1px solid var(--sand);border-radius:8px;
  padding:10px 14px;font-size:.93rem;max-width:70ch;margin:0 0 14px;
}
.cc-note{
  background:var(--foam-tint);border-radius:8px;padding:12px 16px;
  font-size:.93rem;max-width:70ch;margin:16px 0 6px;
}
.meeting-line{font-size:1.02rem;max-width:70ch;margin-bottom:10px}
.fact-list{list-style:none;max-width:70ch}
.fact-list li{padding:7px 0;border-bottom:1px dotted var(--sand);font-size:.95rem}
.fact-list li:last-child{border-bottom:none}
.mono{font-family:"Spline Sans Mono",monospace;font-size:.85em}
.councillor-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin:14px 0 8px;
}
.councillor{
  background:var(--card);border:1px solid var(--sand);border-radius:10px;
  padding:14px 16px;
}
.councillor .name{font-weight:700;color:var(--slate);font-size:1.02rem}
/* One muted style for every party label — identical treatment is the point. */
.councillor .party{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:2px 0 8px;
}
.councillor .clink{display:block;font-size:.9rem;padding:2px 0}
.verified-note{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;color:var(--muted);
  margin-top:10px;
}
.route-row{
  display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--sand);
  align-items:baseline;flex-wrap:wrap;
}
.route-row:last-of-type{border-bottom:none}
.route-row .problem{flex:none;width:240px;font-weight:700;color:var(--slate)}
.route-row .route{flex:1;min-width:250px;font-size:.95rem}
.route-row .route a{margin-left:4px}
@media (max-width:880px){
  .route-row{flex-direction:column;gap:2px}
  .route-row .problem{width:auto}
}
.aside-sample{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;color:var(--warn);
  margin:2px 0 4px;
}

/* ---------- digest freshness note ---------- */
.freshness{
  background:var(--foam-tint);border-left:3px solid var(--foam);
  padding:12px 16px;border-radius:0 8px 8px 0;margin-bottom:14px;
  font-size:.93rem;max-width:68ch;
}
.freshness strong{color:var(--slate)}

/* ---------- today quick-link cards ---------- */
.today-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;padding-top:24px;padding-bottom:8px;
}
.today-link-card{
  display:flex;flex-direction:column;gap:4px;
  background:var(--card);border:1px solid var(--sand);border-radius:10px;
  padding:16px 18px;text-decoration:none;
}
.today-link-card:hover{border-color:var(--teal)}
.today-link-label{
  font-family:"Marcellus",serif;font-size:1.15rem;color:var(--slate);
}
.today-link-sub{
  font-size:.88rem;color:var(--teal);
}

/* ---------- what's on page ---------- */
.whatson-section{padding-top:28px;padding-bottom:8px}
.no-events{color:var(--muted);font-size:.97rem;padding:20px 0}
.featured-events{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}
.when-inline{
  display:flex;align-items:baseline;gap:6px;margin-bottom:8px;
}
.when-dow{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.when-dom{
  font-family:"Marcellus",serif;font-size:1.5rem;line-height:1;color:var(--slate);
}
.event-title{
  font-family:"Marcellus",serif;font-weight:400;font-size:1.4rem;
  color:var(--slate);margin-bottom:4px;
}
.event-link{
  display:inline-block;margin-top:10px;font-weight:700;font-size:.93rem;
}
.whatson-subhead{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin:4px 0 16px;
}
.event-list{margin-bottom:8px}
.whatson-submit{padding-top:28px;padding-bottom:36px;border-top:2px solid var(--foam);margin-top:20px}
.whatson-submit p{max-width:60ch;font-size:.97rem;margin-bottom:14px}
.submit-list{
  list-style:none;display:flex;flex-direction:column;gap:6px;max-width:50ch;
}
.submit-list li{
  font-size:.95rem;padding-left:18px;position:relative;color:var(--ink);
}
.submit-list li::before{
  content:"→";position:absolute;left:0;color:var(--teal);font-weight:700;
}
@media (max-width:600px){
  /* NOT A ROW ON A PHONE. Beside a 64px date chip and two gaps there is not
     enough width for a picture and readable text side by side, so
     .event-main stops being a row and the image sits above the words.
     Settled by looking, with a designer, on 31 Aug 2026 — and 88% of
     readers are on a phone, so this is the case that decides. Do not
     "tidy" it into agreement with the desktop rule above. */
  .event-main{display:block}
  .event-img{width:190px;height:190px;margin:0 0 10px}
}

/* ---------- tide curve sparkline ---------- */
.tide-curve{display:block;width:100%;height:44px;margin-top:10px}

/* ---------- photos gallery ---------- */
.photos-coming{padding-top:60px;padding-bottom:60px;text-align:center}
.coming-card{
  display:inline-block;background:var(--card);border:1px solid var(--sand);
  border-radius:14px;padding:40px 48px;max-width:480px;
}
.coming-card .coming-icon{font-size:2.4rem;margin-bottom:12px}
.coming-card h2{font-family:"Marcellus",serif;font-weight:400;color:var(--slate);margin-bottom:8px}
.coming-card p{color:var(--muted);font-size:.97rem;line-height:1.6}
.month-rule{
  font-family:"Marcellus",serif;font-weight:400;font-size:1.3rem;
  color:var(--slate);margin:32px 0 14px;padding-top:8px;
  border-top:2px solid var(--foam);
}
.month-rule:first-of-type{border-top:none;margin-top:8px}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;margin-bottom:6px;
}
.photo-thumb{
  display:block;position:relative;overflow:hidden;
  border-radius:10px;aspect-ratio:4/3;
  background:var(--sand);text-decoration:none;
}
.photo-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;display:block;
}
.photo-thumb:hover img,.photo-thumb:focus-visible img{transform:scale(1.04)}
.photo-caption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(15,38,44,.72));
  padding:28px 12px 10px;
  opacity:0;transition:opacity .2s ease;
}
.photo-thumb:hover .photo-caption,
.photo-thumb:focus-visible .photo-caption{opacity:1}
.caption-title{
  display:block;color:#fff;font-weight:700;font-size:.93rem;line-height:1.3;
}
.caption-copy{
  display:block;font-family:"Spline Sans Mono",monospace;
  font-size:.68rem;color:rgba(255,255,255,.75);margin-top:2px;
  letter-spacing:.06em;
}
@media (max-width:600px){
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .photo-thumb img,.photo-caption{transition:none}
}

/* ---------- council corner: issue records ---------- */
.issues{margin:14px 0 4px}
.issue{
  background:var(--card);border:1px solid var(--sand);border-radius:12px;
  padding:16px 18px 14px;margin-bottom:12px;
}
.issue-head{
  display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start;flex-wrap:wrap;
}
.issue-title{
  font-family:"Marcellus",serif;font-weight:400;font-size:1.2rem;
  color:var(--slate);line-height:1.3;flex:1 1 320px;
}
/* Status never rides on colour alone: glyph + word carry it, the tint
   is decoration. Text/background pairs are all above WCAG AA. */
.issue-status{
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;border-radius:999px;
  padding:3px 11px;white-space:nowrap;flex:none;
}
.issue-status.raised{background:var(--foam-tint);color:var(--slate)}
.issue-status.progress{background:var(--foam);color:#1D544C}
.issue-status.completed{background:#E7F0E7;color:#27500A}
.issue-status.no-update{background:var(--sand);color:#454F4E}
.issue-summary{margin-top:8px;font-size:.97rem;max-width:70ch}
.issue-meta{
  border-top:1px solid var(--sand);margin-top:12px;padding-top:10px;
  font-size:.9rem;color:var(--muted);max-width:70ch;
}
.issue-meta div+div{margin-top:4px}
.issue-label{
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
}
.issue-history{
  font-family:"Spline Sans Mono",monospace;font-size:.76rem;margin-top:8px;
}
.status-key-head{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);font-weight:400;margin:22px 0 8px;
}
.status-key{list-style:none;max-width:70ch}
.status-key li{
  font-size:.93rem;padding:6px 0;border-bottom:1px dotted var(--sand);
}
.status-key li:last-child{border-bottom:none}
.status-key .issue-status{margin-right:8px}

/* ---------- page titles ---------- */
.page-head{padding-top:30px;padding-bottom:0}
.page-title{
  font-family:"Marcellus",serif;font-weight:400;font-size:2rem;
  line-height:1.15;color:var(--slate);
}
.page-subtitle{
  font-size:1.05rem;color:var(--muted);margin-top:6px;max-width:60ch;
}
/* The board follows the title directly — close the gap the kicker used to fill. */
.page-head + .board{padding-top:18px}
@media (max-width:600px){
  .page-title{font-size:1.7rem}
  .page-subtitle{font-size:1rem}
}

/* ---------- about these updates ---------- */
.updates-note{
  margin-top:14px;border-top:1px solid var(--sand);padding-top:10px;
  max-width:70ch;
}
.updates-note summary{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  cursor:pointer;padding:4px 0;
}
.updates-note summary:focus-visible{
  outline:3px solid var(--teal);outline-offset:2px;border-radius:2px;
}
.updates-body{padding:6px 0 4px}
.updates-body p{font-size:.93rem;color:var(--muted);margin-bottom:10px}
.badge-key{list-style:none;margin:0 0 4px}
.badge-key li{
  font-size:.92rem;padding:5px 0;border-bottom:1px dotted var(--sand);
}
.badge-key li:last-child{border-bottom:none}
/* The badges are laid out by the tiles with margin-left:auto — reset that here. */
.badge-key .badge{margin-left:0;margin-right:8px;display:inline-block}
.updates-foot{margin-bottom:0}

/* ---------- bin days ---------- */
/* Bin swatches are the council's own bin colours, not the site palette —
   they are labels for a physical object, like the works map's red. Every one
   is paired with its name in text; the colour never carries the meaning. */
.bin-now{
  display:flex;align-items:center;gap:18px;
  background:var(--card);border:1px solid var(--sand);border-radius:12px;
  padding:20px 22px;margin:14px 0 16px;max-width:70ch;
}
.bin-swatch{
  width:54px;height:64px;border-radius:6px 6px 3px 3px;flex:none;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.18);
}
.bin-swatch.small{width:20px;height:24px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.bin-now-label{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
}
.bin-now-colour{
  font-family:"Marcellus",serif;font-size:2rem;line-height:1.15;
  color:var(--slate);margin-top:2px;
}
.bin-now-sub{font-size:.95rem;color:var(--muted);margin-top:4px;max-width:52ch;text-wrap:pretty}
.bin-ahead-head{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);font-weight:400;margin:22px 0 8px;
}
.bin-ahead,.bin-key{list-style:none;max-width:70ch}
.bin-ahead li,.bin-key li{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px dotted var(--sand);
}
.bin-ahead li:last-child,.bin-key li:last-child{border-bottom:none}
.bin-ahead-colour,.bin-key-name{font-weight:700;color:var(--slate);min-width:5.5em}
.bin-ahead-when,.bin-key-holds{color:var(--muted);font-size:.93rem}
.bin-ahead-note{font-size:.93rem;color:var(--warn)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.bin-now-brown{font-size:.92rem;color:var(--muted);margin-top:6px;max-width:46ch;text-wrap:pretty}
.bin-ahead-brown{
  font-family:"Spline Sans Mono",monospace;font-size:.76rem;color:var(--muted);
}

/* ---------- tile icons ---------- */
.tile .label .tile-icon{width:26px;height:26px;flex:none}

/* ---------- daylight arc ---------- */
/* A square drawing: the circle renders at a fixed size, centred.
   (The old 52px height belonged to the semicircular dome.) */
.daylight-arc{display:block;width:104px;height:104px;margin:10px auto 0}
.work-main .work-gloss{font-size:.88rem;color:var(--muted);margin-top:2px;max-width:60ch}

/* ---- Council corner: the issue register strip -------------------
   Layout only. The glyph and the word carry the status; colour is
   deliberately absent, so this depends on no palette variable and
   nothing here conveys status by colour alone. 44px minimum touch
   target for the older audience. */
.register-nav ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; }
.register-nav a.register-tab { display: inline-flex; align-items: center;
  gap: .45em; min-height: 44px; padding: .5rem .85rem;
  border: 1px solid currentColor; border-radius: 2px;
  text-decoration: none; line-height: 1.2; }
.register-nav a.register-tab[aria-current="page"] { font-weight: 700;
  text-decoration: underline; text-underline-offset: .25em; }
.register-count { font-variant-numeric: tabular-nums; opacity: .75; }

/* ---- Public safety notice band ---------------------------------
   Palette-independent: borders and rules use currentColor, so this
   needs no variable and can't drift if the palette changes. The band
   is calm by design — no red, no warning triangle. The title is sized
   DOWN from the page h1: a notice is important, but it is not the
   identity of the page. */
.notice-band { border: 1px solid; border-left-width: 5px;
  border-radius: 3px; padding: 1.1rem 1.3rem 1rem; margin: 1.25rem 0 1.5rem; }
.notice-kicker { margin: 0 0 .35rem; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.notice-title { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.25; }
.notice-body { margin: 0 0 .7rem; }
.notice-source { margin: 0; font-size: .92rem; }

/* ---- Regular events (classes, clubs) ---------------------------
   Deliberately mirrors the .event pattern above: same flex row, same
   64px anchor block in --foam-tint, same mono metadata and --sand
   divider. Regulars sit on the same page as events and should read as
   the same kind of thing — a second visual language here would just
   look like two sites stitched together. The anchor holds the TIME
   rather than a date, because that is the fact that varies within a
   day group and the one people scan for. The day heading is mono and
   quiet: it is a label, not a title, and must not compete with the
   section heading above it. */
.regular-day{margin-bottom:18px}
.regular-dayname{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin:0 0 6px;
}
.regular{
  display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--sand);
}
.regular:last-of-type{border-bottom:none}
.regular-time{
  flex:none;width:64px;text-align:center;background:var(--foam-tint);
  border-radius:8px;padding:9px 4px;height:fit-content;
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;
  color:var(--teal);line-height:1.35;
}
.regular-body{flex:1;min-width:0}
.regular-title{font-size:1.06rem;font-weight:700;color:var(--slate);margin:0}
.regular-meta{
  font-family:"Spline Sans Mono",monospace;font-size:.76rem;color:var(--muted);
  margin:1px 0 3px;
}
.regular-blurb{font-size:.95rem;color:var(--ink);margin:0 0 4px}
.regular-contact{font-size:.9rem;color:var(--muted);margin:0}

/* Masthead tagline. Completes the wordmark as a phrase — "Largs" …
   "…for you" — and from 26 September 2026 it is handwritten: Caveat
   SemiBold, the one place on the site set in a pen hand, because the
   line is a person's aside under the formal Marcellus name and the mono
   it used to share with the category labels read as system text. Used
   for this line only; anywhere else it would turn into a greeting card.
   Kept in foam, not a warm accent, for the same reason. The font file is
   cut to these eight characters (fonts/README-caveat.txt); if the line
   changes, re-cut it. Sized up from the mono's .72rem because a hand
   face has a small x-height; the mono fallback in the stack only ever
   shows for the instant before the 3.7 KB file arrives. */
.tagline{text-transform:none;margin-top:-3px;padding-left:.06em;line-height:1.1}

/* ---- PS Waverley tile -------------------------------------------
   The one tile whose icon is the picture: her silhouette spans the
   full card width between the label and the link line. width/height
   attributes on the img prevent layout shift while it loads; the
   PNG has a transparent background with edges cut to the ink colour,
   so it sits clean on the card. */
.tile-hero{display:block;width:100%;height:auto;margin:10px 0 8px}

/* ---- The longship beside the wordmark ----------------------------
   The site's mark (the home-screen icon's ship, cream on transparent)
   locks up with "Largs …for you" the way the icon sits beside its name
   on a phone. Centred on the two-line wordmark block; the ship's own
   bottom edge then becomes the row's baseline, which is where the
   dateline aligns on desktop. Replaced Magnus in the right-hand corner
   on 26 Sep 2026 (the header is ~16px taller on desktop, a few px on a
   phone — accepted when the mock-up was chosen). */
.masthead{position:relative;overflow:hidden}
.brand{display:flex;align-items:center;gap:16px}
/* 67px (90% of the first 74px, 26 Sep 2026): a touch taller than the
   ink of "Largs …for you" (57px), which reads as the same size because
   the ship carries more detail than the letters. margin-top centres the
   ship on the ink of the two lines, not on their boxes; measured in a
   headless render, within half a pixel at 1280, 768 and 390px. The
   wordmark shrinks at 880px, hence the second value. */
.brand-mark{height:67px;width:auto;margin-top:4px;opacity:.95;flex:none}
@media (max-width:880px){.brand-mark{margin-top:2px}}
@media (max-width:600px){
  .brand{gap:11px}
  .brand-mark{height:47px}
}


/* 38px, not the 26px the tile icons use. Those label a card whose text is
   beside them; these are scanned down a column by someone looking for
   their colour, so they carry the meaning rather than decorate it. */

/* ---- Depictive fills: the water and the sky ----------------------
   The tide curve's area is water; the daylight arc's area is sky. They
   are filled accordingly, rather than in --foam-tint, which previously
   made the two graphics read as the same substance.

   THE RULE THIS SETS, and its limit: colour is used here because the
   shape DEPICTS a physical thing. It is not a licence to tint the other
   tiles. A green ferry or an amber roadworks fill would each seem as
   reasonable as this did, and together they would break the one thing
   that makes the board legible — that colour on this page means
   something. Elsewhere colour is reserved for status (the dots), for
   "now" (the teal dot), and for the bin, whose colour IS the answer.

   Both tints are matched to --foam-tint for lightness, so neither
   graphic pulls the eye harder than the seven plain tiles around it. */
.tide-curve polygon{fill:var(--water-tint)}
/* The daylight circle names its own fills in the SVG (--sky-tint for
   day, --slate-deep for night, --sun for the dot); the old override
   here was repainting the night wedge as sky. */


/* ---- Roadworks filter chips -------------------------------------
   Plain links to build-time pages, styled to match the register's
   filter strip. Not buttons: each one is a real URL. */
.works-filter{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.works-filter a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid var(--sand);border-radius:999px;
  background:var(--card);color:var(--slate);text-decoration:none;
  font-size:.95rem;
}
.works-filter a[aria-current="page"]{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.works-filter .n{font-family:ui-monospace,monospace;font-size:.85rem;opacity:.75}
.works-filter a[aria-current="page"] .n{opacity:.9}


/* ---- The sky on the weather tile ----------------------------------
   Current conditions as a picture, beside the temperature. Depictive
   colour, same licence as the tide/daylight fills and the bin: sun in
   the board's yellow, rain in its blue. The written condition always
   stands beside it. */
.weather-row{display:flex;align-items:center;gap:12px}
.weather-glyph{width:46px;height:46px;flex:none}


/* ---- The next eight hours, on the weather tile --------------------
   Four two-hour blocks, each drawn with the same condition glyph the
   tile's main sky uses — the vocabulary is already established, so a
   small cloud-with-rain needs no explaining. Times are printed under
   each because a span must say when it starts. */
.outlook{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  list-style:none;margin:12px 0 0;padding:0;
}
.outlook li{display:flex;flex-direction:column;align-items:center;gap:2px}
.outlook-glyph{width:26px;height:26px}
.outlook .mono{font-size:.68rem;color:var(--muted);letter-spacing:.02em}

/* ---------- Report a problem ----------
   A signpost page: each block is one authority's route. The emergency
   box is the page's only use of --red, and it earns it — everything
   else here is a link, but that one is a phone number for a hole in
   the road. Tips are indented under their route rather than bulleted:
   they qualify the link above them, they are not a list of equals. */
.report-emergency{
  background:var(--sand);border-left:4px solid var(--red);
  padding:16px 20px;margin:0 0 28px;border-radius:0;
}
.report-emergency p{margin:0 0 8px}
.report-emergency p:last-child{margin:0}
.report-item{margin:0 0 30px}
.report-item>p{margin:0 0 10px}
.report-tip{
  font-size:.94rem;color:var(--muted);
  border-left:3px solid var(--foam);padding-left:14px;margin-top:12px;
}
.report-lcc-head{margin-top:38px}
.report-lcc{
  background:var(--foam-tint);border-left:3px solid var(--foam);
  padding:18px 22px;margin:0 0 28px;
}
.report-lcc p{margin:0 0 12px}
.report-lcc p:last-child{margin:0}
.report-note{
  font-size:.9rem;color:var(--muted);
  border-top:1px solid var(--sand);padding-top:16px;margin-top:32px;
}

/* ---------- On the council's agenda ----------
   A dated list, so the date leads and everything else hangs off it —
   the same 64px anchor block as the roadworks and register rows, which
   is why the metrics match rather than being chosen afresh. Forthcoming
   meetings get a foam left edge: the one piece of colour on the page,
   and it means "not yet decided", which is the whole point of it. */
.agenda-intro{margin:0 0 28px}
.agenda-list{list-style:none;margin:0 0 28px;padding:0}
.agenda-row{
  display:grid;grid-template-columns:104px 1fr;gap:2px 18px;
  padding:14px 0;border-top:1px solid var(--sand);
}
.agenda-row:last-child{border-bottom:1px solid var(--sand)}
.agenda-when{
  grid-row:1 / span 2;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;color:var(--muted);margin:0;padding-top:2px;
}
.agenda-what{margin:0;font-size:1.05rem}
.agenda-detail{margin:0;font-size:.94rem;color:var(--muted)}
.agenda-ahead{
  border-left:3px solid var(--foam);padding-left:14px;
  background:var(--foam-tint);
}
.agenda-none,.agenda-empty{
  color:var(--muted);background:var(--sand);
  padding:14px 18px;margin:0 0 28px;
}
.agenda-earlier,.agenda-how{margin:0 0 24px}
.agenda-earlier summary,.agenda-how summary{
  cursor:pointer;font-size:.95rem;color:var(--teal);padding:8px 0;
}
.agenda-how p{font-size:.94rem;color:var(--muted);margin:0 0 10px}
.agenda-meta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.agenda-note{
  font-size:.94rem;border-top:1px solid var(--sand);
  padding-top:16px;margin-top:32px;
}
@media (max-width:600px){
  .agenda-row{grid-template-columns:1fr;gap:2px}
  .agenda-when{grid-row:auto}
}

/* Month headings on the scheduled page sit lighter than page headings —
   they divide a diary, they do not announce sections. The "papers out"
   tag is the only thing on that page carrying information, so it is the
   only thing allowed to stand out. */
.agenda-month{
  font-size:1.1rem;margin:28px 0 4px;padding-bottom:6px;
  border-bottom:2px solid var(--foam);
}
.agenda-tag{
  font-size:.85rem;color:var(--teal);background:var(--foam-tint);
  padding:2px 8px;border-radius:3px;white-space:nowrap;
}
.agenda-forward{
  background:var(--foam-tint);border-left:3px solid var(--foam);
  padding:14px 18px;margin:0 0 28px;
}
.agenda-forward a{font-size:1.05rem}

/* Bus services passing a works. Quieter than the row it hangs off:
   useful when it applies, never competing with the street name. */
.work-buses {
  margin: .3rem 0 0;
  font-size: .95rem;
  color: #3B565C;
}


/* ---------- fuel prices ---------- */
/* Filling up around Largs. The whole block is self-contained: it adds
   selectors, it does not alter any. Delete from this marker to the closing
   one to remove the page's styling entirely. */

/* Standing notice. Funnel red, which the design system reserves for status
   and alerts. Its one use now is the noscript block: a page that cannot show
   prices needs to say so where it cannot be missed. */
.fuel-notice{
  border:1px solid var(--red);border-left-width:5px;border-radius:8px;
  background:#FBEEEB;color:var(--ink);
  padding:11px 14px;margin:0 0 14px;font-size:.95rem;max-width:70ch;
}
.fuel-notice strong{color:var(--red)}

/* Fuel chips. Same shape as the roadworks filter strip; the count slot
   carries the cheapest price for that grade, so the chip row doubles as
   an at-a-glance answer to "petrol or diesel, and how much?". */
.fuel-filter{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.fuel-filter a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid var(--sand);border-radius:999px;
  background:var(--card);color:var(--slate);text-decoration:none;
  font-size:.95rem;
}
.fuel-filter a[aria-current="page"]{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.fuel-filter .n{font-family:"Spline Sans Mono",monospace;font-size:.85rem;opacity:.75}
.fuel-filter a[aria-current="page"] .n{opacity:.9}

.fuel-legend{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;color:var(--muted);
  letter-spacing:.04em;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin:10px 0 4px;
}
.fuel-legend .swatch{
  width:11px;height:11px;border-radius:50%;display:inline-block;
  margin-right:6px;vertical-align:-1px;border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--sand);
}
.swatch.sells{background:var(--teal)}

/* Taller than the works map, and deliberately. The corridor is 39 km down
   and 16 km across, so a short wide box forces Leaflet to zoom out until
   the width is showing Arran and Falkirk. Every 100px of height here is
   most of a zoom level back. */
#fuel-map{
  height:620px;border:1px solid var(--sand);border-radius:12px;
  margin:12px 0 20px;background:var(--foam-tint);
}

/* Price pins. Every one identical -- no colour band, no highlight on the
   cheapest. The number is the fact; the reader ranks. Anything else would
   be the site passing judgement on a named local business.
   Kept compact: at a zoom that frames the whole corridor the Ardrossan and
   Irvine clusters overlap, and every millimetre of pill is more collision. */
.fuel-pin{
  display:inline-block;min-width:46px;text-align:center;
  font-family:"Spline Sans Mono",monospace;font-size:.68rem;font-weight:600;
  padding:2px 4px;border-radius:999px;
  background:var(--teal);color:var(--paper);
  border:2px solid var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.3);
  white-space:nowrap;
}
/* The list. Price is the left column at size in the mono face, so the
   whole thing can be read down the left edge without reading a word. */
.fuel-row{
  display:flex;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--sand);align-items:baseline;
}
.fuel-row:last-of-type{border-bottom:none}
.fuel-price{
  flex:none;min-width:5.4rem;
  font-family:"Spline Sans Mono",monospace;font-size:1.32rem;font-weight:600;
  color:var(--slate);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.fuel-price .pence{font-size:.82rem;font-weight:400;color:var(--muted);margin-left:1px}
/* The waiting state, before the fetch lands. Deliberately not a spinner and
   not a zero: three dots say "not yet" without implying a number. */
.fuel-price .pval{color:var(--sand)}
.fuel-price.has-price .pval{color:var(--slate)}
.fuel-price.none{color:var(--sand)}
.fuel-main{flex:1}
.fuel-main h3{font-size:1.02rem;font-weight:700;color:var(--slate)}
.fuel-where{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
  margin-left:7px;vertical-align:1px;
}
.fuel-main .meta{font-family:"Spline Sans Mono",monospace;font-size:.76rem;color:var(--muted);margin-top:2px}
.fuel-row.nosell .fuel-main h3{color:var(--muted);font-weight:500}
.fuel-sub{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 2px;font-weight:500;
}

/* Anchored from a map popup: the same teal flash the overhead page uses,
   so a reader who taps "full details" can see which row answered. */
.fuel-row:target{background:var(--foam-tint);border-radius:8px}

@media (max-width:600px){
  /* A phone is narrow and tall, which suits a 39 km corridor far better
     than a desktop window does. Give it the height to use. */
  #fuel-map{height:480px}
  .fuel-price{min-width:4.6rem;font-size:1.18rem}
}
/* ---------- end fuel prices ---------- */


/* ---------- date badge year ---------- */
/* The year, under the day, only on events outside the current year.
   Small and muted: it is a disambiguator, not part of the date proper --
   the month and the day are what a reader is scanning for. */
.when-yr, .yr{
  display:block;
  font-family:"Spline Sans Mono",monospace;
  font-size:.62rem;letter-spacing:.06em;
  color:var(--muted);line-height:1.3;margin-top:1px;
}
/* ---------- end date badge year ---------- */

/* Bins tile — label on the conditional bin (hero v3).
   at-brown is the BROWN BIN'S CENTRE measured in the 720x420 pair images
   (bins-<colour>-brown.png). If those PNGs are ever regenerated with a
   different scale or gap, re-measure it or the label drifts off its bin.
   Only brown is labelled: the coloured bin is town-wide and needs no
   qualifier, and the tile is too narrow (about 130-160px of content) for two
   captions at a size anyone can read. Kept quiet deliberately — the label
   qualifies the picture, it does not compete with the colour name. */
.bin-labels{position:relative;height:1.15em;margin-top:-2px}
.bin-label{
  position:absolute;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:"Spline Sans Mono",monospace;
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.bin-label.at-brown{left:69.2%}

/* Bin days page — the retro bin, in the collection colour (matches the Today
   board hero). Height-driven, width auto: the illustration is 385x480, so the
   old square glyph sizing would have squashed it. Two numbers to tune if
   the balance looks wrong on the page — nothing else here depends on them.

   The colour is carried entirely by the file (bin-<colour>.png, painted from
   the swatches in bins.cjs), so the swatch hex is no longer passed to markup
   on this page. The SVG glyph rules and the bin() macro that went with them
   have since been removed. */
.bin-pic{display:block;width:auto;flex:none}
.bin-pic-lg{height:120px}
.bin-pic-sm{height:52px}

/* ---- Power cut notice ------------------------------------------------
   Appears on the Today board only while SPEN's feed shows a live fault
   in KA30 and our snapshot is fresh (under 30 min). The left border is
   the one legitimate use of --red on the board: an alert, alerting.
   Quiet otherwise -- card surfaces, house type, no new colours. */
.power-notice{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--sand);
  border-left:4px solid var(--red);border-radius:10px;
  padding:12px 16px;margin-top:18px;
}
.power-notice-badge{
  font-family:"Spline Sans Mono",monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--red);border-radius:999px;padding:3px 10px;
  flex:none;
}
.power-notice-text{font-size:.95rem;color:var(--ink)}
.power-notice-text a{color:var(--teal);font-weight:500}
.power-notice-src{
  font-family:"Spline Sans Mono",monospace;font-size:.7rem;
  color:var(--muted);margin-left:auto;flex:none;
}

/* "On now" -- an event whose run includes today, on What's On. Sits in
   the meta line rather than the badge, because the badge keeps the START
   date: on a chronological list that is the anchor and the sort key. Teal
   rather than red: this is a fact about an event, not an alert. */
.on-now{
  color:var(--teal);
  font-weight:500;
}

/* ------------------------------------------------------------------
   Self-hosted webfonts. Served from largs.scot, so no request leaves
   for a third party and no visitor IP is disclosed to load a typeface.
   All three families are SIL Open Font Licence 1.1; the licence text
   travels with them in /assets/fonts/, as the OFL requires.

   font-display:swap renders immediately in the fallback and swaps when
   the real face lands. Same-origin now, so the window is short. The two
   faces needed for first paint are preloaded in base.njk.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Alegreya Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-400i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-400i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Alegreya Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/marcellus-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/marcellus-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat: the masthead tagline's hand. One weight, eight characters --
   see fonts/README-caveat.txt. No unicode-range: the file IS the range. */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/caveat-600-tagline.woff2') format('woff2');
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Spline Sans Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/spline-sans-mono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}