/* Community Newsletter – shared styles. Mobile-first, no external fonts, no trackers.
   Each town page sets its own accent with  <body style="--town:#1b6fae">  */
:root{
  --ink:#1c2430; --muted:#55606e; --bg:#fbfaf7; --card:#ffffff; --line:#e3e0d8;
  --brand:#1b6fae; --brand-dark:#124d7a; --town:var(--brand); --warm:#f4efe4;
  --radius:12px; --max:62rem;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-underline-offset:.15em}
a:hover{color:var(--town)}
:focus-visible{outline:3px solid #f0a020;outline-offset:2px;border-radius:4px}
h1,h2,h3{line-height:1.2;margin:1.4em 0 .5em}
h1{font-size:clamp(1.8rem,6vw,2.7rem);margin-top:.4em}
h2{font-size:clamp(1.35rem,4vw,1.8rem)}
h3{font-size:1.15rem}
p,ul,ol{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.1rem}

/* Top bar */
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1rem;padding-top:.7rem;padding-bottom:.7rem}
.logo{font-weight:800;text-decoration:none;color:var(--ink);font-size:1.1rem;letter-spacing:-.01em}
.logo span{color:var(--brand)}
.nav{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:0;padding:0;list-style:none;font-size:.97rem}
.nav a{text-decoration:none;color:var(--muted);padding:.35rem 0;display:inline-block}
.nav a[aria-current="page"],.nav a:hover{color:var(--ink);text-decoration:underline}

/* Hero */
.hero{background:linear-gradient(135deg,#123a5c,#1b6fae);color:#fff;padding:2.4rem 0 2.6rem}
.hero h1{margin-top:0}
.hero p{font-size:1.15rem;max-width:40rem}
.hero a:not(.btn){color:#fff}

/* Town banner image (with CSS fallback if the image is missing) */
.banner{background:linear-gradient(120deg,#0e2438 0%,var(--town) 100%);color:#fff;position:relative}
.banner picture,.banner img{width:100%;aspect-ratio:3/1;object-fit:cover}
.banner .fallback{display:none;padding:2.5rem 1.1rem}
.banner.no-img picture{display:none}
.banner.no-img .fallback{display:block}

/* Buttons */
.btn{display:inline-block;background:var(--town);color:#fff;font-weight:700;text-decoration:none;padding:.85rem 1.4rem;border-radius:999px;border:2px solid transparent;font-size:1.05rem;line-height:1.2;cursor:pointer}
.btn:hover{background:var(--brand-dark);color:#fff}
.btn-light{background:#fff;color:var(--brand-dark)}
.btn-light:hover{background:var(--warm);color:var(--brand-dark)}
.btn-ghost{background:transparent;color:var(--brand-dark);border-color:currentColor}
.btn-ghost:hover{background:var(--warm);color:var(--brand-dark)}

/* Layout pieces */
section{padding:1.2rem 0}
.lead{font-size:1.15rem;color:var(--muted)}
.small{font-size:.92rem;color:var(--muted)}
.grid{display:grid;gap:1rem;grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;overflow:hidden}
.card h3{margin-top:0}
.card.town{padding:0;display:flex;flex-direction:column}
.card.town .body{padding:1rem 1.2rem 1.2rem}
.card.town img{aspect-ratio:16/9;object-fit:cover;width:100%}
.tag{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.02em;padding:.15rem .6rem;border-radius:999px;background:#e3f1e6;color:#1d5e2c}
.tag.soon{background:#eef0f3;color:#4a5563}
.ticks{list-style:none;padding:0}
.ticks li{padding-left:1.7rem;position:relative;margin-bottom:.55rem}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:800;color:var(--town)}
.panel{background:var(--warm);border-radius:var(--radius);padding:1.3rem 1.2rem}
.signup{background:#fff;border:2px solid var(--town);border-radius:var(--radius);padding:1.3rem 1.2rem;margin:1.2rem 0}
.signup p:last-child{margin-bottom:0}
.highlights{list-style:none;padding:0;margin:0}
.highlights li{border-bottom:1px solid var(--line);padding:.8rem 0}
.highlights li:last-child{border-bottom:0}
.highlights .when{display:block;font-size:.95rem;color:var(--muted)}
.todo{background:#fff4d6;border:2px dashed #c98a00;border-radius:8px;padding:.1rem .45rem;font-weight:700;color:#6b4a00}
.todo-block{background:#fff4d6;border:2px dashed #c98a00;border-radius:var(--radius);padding:1rem 1.2rem;margin:1rem 0}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
th,td{text-align:left;padding:.75rem .8rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--warm)}
.price{font-weight:800;white-space:nowrap}
.table-scroll{overflow-x:auto}

/* Forms */
form .field{margin-bottom:1rem}
label{display:block;font-weight:600;margin-bottom:.3rem}
.hint{font-weight:400;color:var(--muted);font-size:.92rem}
input[type=text],input[type=email],input[type=url],input[type=date],textarea,select{width:100%;font:inherit;padding:.65rem .75rem;border:1.5px solid #9aa3ae;border-radius:8px;background:#fff;color:var(--ink)}
textarea{min-height:7rem}
fieldset{border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;margin:0 0 1rem}
legend{font-weight:600;padding:0 .3rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.check input{margin-top:.35rem;width:1.15rem;height:1.15rem;flex:none}
.req{color:#a3261b}

/* Footer */
.site-foot{margin-top:2.5rem;background:#16212d;color:#d6dde6;padding:2rem 0;font-size:.95rem}
.site-foot a{color:#fff}
.site-foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem}

@media (min-width:42rem){
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .hero{padding:3.4rem 0 3.6rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}