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

/* ---------- 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;
}
.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)}
.tagline{
  font-family:"Spline Sans Mono",monospace;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;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 ---------- */
.horizon{background:var(--foam);display:block}
.horizon svg{display:block;width:100%;height:64px}

/* ---------- today board ---------- */
.board{padding:34px 0 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;
}
.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);
}
.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)}
.event-body{flex:1;min-width:0}
.event-img{
  display:block;width:100%;max-height:200px;object-fit:cover;
  border-radius:8px;margin-bottom:10px;
}
.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:26px 0;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)}
.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}
}
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:24px 0 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:28px 0 8px}
.no-events{color:var(--muted);font-size:.97rem;padding:20px 0}
.featured-events{display:flex;flex-direction:column;gap:20px;margin-bottom:28px}
.event-featured{
  display:grid;grid-template-columns:320px 1fr;gap:0;
  background:var(--card);border:1px solid var(--sand);border-radius:12px;
  overflow:hidden;
}
.event-featured-img{
  width:100%;height:100%;object-fit:cover;display:block;min-height:220px;
}
.event-featured-body{padding:22px 24px}
.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:28px 0 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:720px){
  .event-featured{grid-template-columns:1fr}
  .event-featured-img{min-height:200px;max-height:240px}
}

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

/* ---------- photos gallery ---------- */
.photos-coming{padding:60px 0;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:30px 0 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}
.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:44ch}
.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 ---------- */
.daylight-arc{display:block;width:100%;height:52px;margin-top:10px}
.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" — so it is set lowercase: an ellipsis implies speech
   carrying on, while the small-caps mono used elsewhere on the site
   (SAMPLE, TIMETABLE, TRAINS TO GLASGOW) is the vocabulary of category
   labels, and the two read against each other. Tracking is tightened
   from the .28em used for those labels so the ellipsis sits close to
   the word it leads into. */
.tagline{text-transform:none;letter-spacing:.06em;
  margin-top:-2px;padding-left:.05em;word-spacing:-.12em}

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

/* ---- Magnus in the masthead -------------------------------------
   Cream line-art of the seafront Viking statue, standing at the right
   of the banner. Absolutely positioned so he costs the header no
   height; bottom-aligned to the masthead's lower edge so he stands on
   the horizon strip. pointer-events none so he never intercepts a tap
   meant for the nav. Hidden below 900px — on a phone the header has
   no spare width and he would crowd the dateline. */
.masthead{position:relative;overflow:hidden}
.masthead-magnus{
  /* height tracks the band itself: spear tip near the top edge, feet
     at the horizon, and he grows or shrinks with the masthead rather
     than living at a magic number. */
  position:absolute;right:3.5%;bottom:7px;height:calc(100% - 14px);width:auto;
  opacity:.9;pointer-events:none;
}
/* On a phone the dateline drops to its own line, leaving the space to
   the right of the wordmark empty. Magnus moves into it: top-aligned,
   sized to the wordmark block rather than the whole band, and lightened
   so he reads as part of the banner rather than competing with the nav
   below him. To remove him from phones again, replace this whole block
   with:  @media (max-width:900px){.masthead-magnus{display:none}}  */
@media (max-width:900px){
  .masthead-magnus{display:none}
}

/* Below 600px the dateline drops to its own line and the space beside
   the wordmark is free, so Magnus comes back there — small, top-aligned
   and lightened. Between 600 and 900px, which includes a phone held
   landscape, the dateline still shares a row with the wordmark and he
   would sit on top of it, so he stays hidden. */
@media (max-width:600px){
  .masthead-magnus{
    display:block;
    right:5%;
    bottom:auto;
    top:10px;
    height:56px;
    opacity:.55;
  }
}