/* =====================================================================
   Around California | site.css | claude-design-v3
   One stylesheet for every page: umbrella, town front page, guides,
   details. Built from direction G, with folds from D (ticket-stub
   dates), E (drive-time figure + direction arrow) and F (fit reasons).
   Fonts are relative for the file:// prototype; production uses
   root-relative /assets/fonts/.
   ===================================================================== */
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-tight-var.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* Coastal Fog */
  --fog:#E9EDEC; --fog-2:#DDE3E2; --card:#F5F6F3; --card-2:#ECEEEA; --white:#fff;
  --ink:#16252C; --ink-2:#42565E; --ink-3:#4C5E66;
  --navy:#10242B; --navy-2:#16323F; --navy-3:#1D4150; --on-navy:#E9EDEC; --on-navy-2:#B9C8C9;
  --sea:#1F7A6B; --sea-text:#125B50; --sea-light:#83D0C7;
  --sand:#FFB758; --sand-2:#C98A52; --sand-text:#9A6334;
  --line:rgba(22,37,44,.13); --line-2:#6E7E81;
  /* guide accents: base, text-safe, tint (existing site tokens) */
  --g-todo:#2f7d9c; --g-todo-t:#1d5f79; --g-todo-bg:#dceaf0;
  --g-date:#c06b86; --g-date-t:#9c4763; --g-date-bg:#f3e1e7;
  --g-concert:#6f6bc4; --g-concert-t:#514da3; --g-concert-bg:#e6e5f5;
  --g-fairs:#cf7b3c; --g-fairs-t:#8a4f1d; --g-fairs-bg:#f6e6d8;
  --g-market:#b03348; --g-market-t:#7f2337; --g-market-bg:#f4dfe2;
  --g-hidden:#1f7a6b; --g-hidden-t:#125b50; --g-hidden-bg:#dbece8;
  --g-service:#2f7a52; --g-service-t:#1f5d3c; --g-service-bg:#dfece3;
  /* type, space, shape, motion */
  --disp:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px; --r-s:10px; --r-l:22px; --tap:44px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;
  --page:1200px; --gut:max(16px,env(safe-area-inset-left));
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* guide accent binding (CSP-safe: classes, not inline styles) */
.k-todo{--a:var(--g-todo);--at:var(--g-todo-t);--ab:var(--g-todo-bg)}
.k-date{--a:var(--g-date);--at:var(--g-date-t);--ab:var(--g-date-bg)}
.k-concert{--a:var(--g-concert);--at:var(--g-concert-t);--ab:var(--g-concert-bg)}
.k-fairs{--a:var(--g-fairs);--at:var(--g-fairs-t);--ab:var(--g-fairs-bg)}
.k-market{--a:var(--g-market);--at:var(--g-market-t);--ab:var(--g-market-bg)}
.k-hidden{--a:var(--g-hidden);--at:var(--g-hidden-t);--ab:var(--g-hidden-bg)}
.k-service{--a:var(--g-service);--at:var(--g-service-t);--ab:var(--g-service-bg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--ink);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--sea-text);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sea-text);outline-offset:2px;border-radius:6px}
.on-navy :focus-visible{outline-color:var(--sand)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.mt{margin-top:8px}
.stack{display:grid;gap:16px;align-content:start}
.rot-0{transform:rotate(0)}.rot-45{transform:rotate(45deg)}.rot-90{transform:rotate(90deg)}.rot-135{transform:rotate(135deg)}.rot-180{transform:rotate(180deg)}.rot-225{transform:rotate(225deg)}.rot-270{transform:rotate(270deg)}.rot-315{transform:rotate(315deg)}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-80px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:50;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.tag-proto{margin:0;background:var(--ink);color:#fff;font-size:.75rem;font-weight:600;padding:4px 16px;text-align:center}
.sec{padding-block:28px}
.sec--tight{padding-block:20px}
.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:16px}
.sec__head h2{font-size:clamp(1.55rem,1.25rem + 1.2vw,2.15rem)}
.sec__sub{color:var(--ink-2);font-size:.9375rem}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.src{font-size:.8125rem;color:var(--ink-3)}
.src a{color:var(--ink-2)}
.meta{font-size:.9375rem;color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:650}

/* ---------- header ---------- */
.top{background:var(--fog);border-bottom:1px solid var(--line)}
.top__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.town{position:relative}
.town>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;min-height:var(--tap);padding-right:6px;border-radius:12px}
.town>summary::-webkit-details-marker{display:none}
.town__mark{width:38px;height:38px;flex:none}
.town__name{display:block;font-family:var(--disp);font-weight:700;font-size:1.22rem;line-height:1.05;letter-spacing:-.01em}
.town__pub{display:block;font-size:.8125rem;color:var(--ink-3);line-height:1.2;margin-top:2px}
.town__chev{width:18px;height:18px;flex:none;color:var(--ink-3);transition:transform var(--dur) var(--ease)}
.town[open] .town__chev{transform:rotate(180deg)}
.town__panel{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(340px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(22,37,44,.22);padding:14px}
.town__panel .town__h{font:700 .75rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:2px 4px 10px}
.town__opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-s);min-height:var(--tap);text-decoration:none;color:var(--ink)}
a.town__opt:hover{background:var(--card-2)}
.town__opt[aria-current]{background:var(--fog-2);font-weight:650}
.town__opt small{color:var(--ink-3);font-size:.8125rem;font-weight:500}
.town__soon{margin-top:8px;padding:10px 12px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-2)}
.town__soon b{font-weight:650;color:var(--ink)}
.btn-email{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 16px;border-radius:999px;background:var(--navy);color:var(--on-navy);font-weight:650;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.btn-email:hover{background:var(--navy-3)}
.btn-email svg{width:18px;height:18px}
.nav{border-top:1px solid var(--line)}
.nav ol{display:flex;gap:4px;overflow-x:auto;padding-block:6px;scrollbar-width:none}
.nav ol::-webkit-scrollbar{display:none}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.9375rem;white-space:nowrap}
.nav a:hover{background:var(--card-2);color:var(--ink)}
.nav a[aria-current]{background:var(--ink);color:#fff}
.nav .sw{width:8px;height:8px;border-radius:50%;background:var(--a,var(--sea))}
.crumbs{font-size:.8125rem;color:var(--ink-3);padding-top:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li::before{content:"/";margin-right:4px;color:var(--line-2)}
.crumbs a{color:var(--ink-2)}

/* ---------- buttons, chips, play ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:8px 16px;border-radius:12px;font-weight:650;font-size:.9375rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);text-align:center;line-height:1.2}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--sea-text);color:#fff}
.btn--primary:hover{background:#0e4a41}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--quiet:hover{background:var(--card-2)}
.btn:active{transform:translateY(1px)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-weight:600;font-size:.9375rem;white-space:nowrap;cursor:pointer;transition:background var(--dur) var(--ease)}
.chip:hover{background:var(--card-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"]::before{content:"";width:12px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.play{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;font-weight:600;font-size:.9375rem;text-align:left}
.play:hover{background:var(--g-concert-bg)}
.play__ic{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--g-concert-t);color:#fff;flex:none}
.play__ic svg{width:14px;height:14px}
.play .i-pause{display:none}
.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}
.play[aria-pressed="true"] .play__ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--g-concert);animation:ring 1.2s var(--ease) infinite}
@keyframes ring{from{transform:scale(.85);opacity:1}to{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.play[aria-pressed="true"] .play__ic::after{animation:none;opacity:.6}}
.play small{display:block;font-size:.75rem;color:var(--ink-3);font-weight:500}

/* ---------- today band (town front page) ---------- */
.today{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.sky{position:absolute;inset:0 0 auto 0;height:170px;transition:background 900ms var(--ease);background:linear-gradient(180deg,#1d4150 0%,var(--navy) 100%)}
@media (prefers-reduced-motion:reduce){.sky{transition:none}}
.today[data-sky="fog"] .sky{background:linear-gradient(180deg,#4f666b 0%,#2d4a52 60%,var(--navy) 100%)}
.today[data-sky="clear"] .sky{background:linear-gradient(180deg,#2c6b68 0%,#1f5552 55%,var(--navy) 100%)}
.today[data-sky="cloud"] .sky{background:linear-gradient(180deg,#556b70 0%,#34505a 55%,var(--navy) 100%)}
.today[data-sky="rain"] .sky{background:linear-gradient(180deg,#3d555d 0%,#2a434c 55%,var(--navy) 100%)}
.today[data-sky="dusk"] .sky{background:linear-gradient(180deg,#7a5537 0%,#5a4a42 35%,#1d4150 75%,var(--navy) 100%)}
.ridge{position:absolute;left:0;right:0;top:92px;width:100%;height:86px}
.today__in{position:relative;padding-top:20px;padding-bottom:24px}
.today__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;min-height:120px;padding-bottom:14px}
.today__date{font-size:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.today h1{font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);color:#fff;margin-top:6px;max-width:16ch}
.cond{display:flex;align-items:center;gap:12px;background:rgba(16,36,43,.72);border:1px solid rgba(233,237,236,.18);border-radius:999px;padding:8px 16px 8px 12px;font-size:.9375rem}
.cond__t{font:700 1.35rem/1 var(--disp);color:#fff}
.cond small{display:block;color:var(--on-navy-2);font-size:.8125rem}
.today__grid{display:grid;gap:12px}
.tcard{background:var(--card);color:var(--ink);border-radius:var(--r);padding:16px;display:grid;gap:8px;align-content:start}
.tcard__k{font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--at,var(--ink-3));display:flex;align-items:center;gap:8px}
.tcard__k i{width:8px;height:8px;border-radius:50%;background:var(--a,var(--sea))}
.tcard h3{font-size:1.25rem}
.tcard h3 a{color:var(--ink);text-decoration:none}
.tcard h3 a:hover{text-decoration:underline}
.why{font-size:.9375rem;color:var(--ink-2)}
.leave{display:block;font-size:.8125rem;color:var(--sand-text);font-weight:650;margin-top:2px}
.subnote{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:2px}
.proto-note{margin-top:14px;font-size:.8125rem;color:var(--on-navy-2)}

/* ---------- the listing row (shared everywhere) ---------- */
.list{display:grid;gap:12px}
.row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.row.is-on{border-color:var(--sand-2);box-shadow:0 0 0 3px rgba(255,183,88,.35)}
/* D fold: the date as a ticket stub, perforated against the listing */
.stub{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;padding:10px 4px;border-radius:12px;background:var(--fog-2);text-align:center;align-self:start}
.stub::after{content:"";position:absolute;right:-8px;top:6px;bottom:6px;border-right:2px dotted var(--line-2)}
.stub__dow{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.stub__n{font:700 1.75rem/1 var(--disp);font-variant-numeric:tabular-nums}
.stub__m{font-size:.75rem;font-weight:600;color:var(--ink-3)}
.stub__plus{font-size:.75rem;color:var(--ink-3);font-weight:650;margin-top:2px}
.pin{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--sand);font:700 .75rem/1 var(--sans);margin-top:6px}
.row__main{min-width:0}
.row__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start}
.row__kind{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--at,var(--ink-3))}
.row h3{font-size:1.2rem;margin-top:2px;overflow-wrap:anywhere}
.row h3 a{color:var(--ink);text-decoration:none}
.row h3 a:hover{text-decoration:underline}
/* E fold: drive time set like a guide-sign distance, arrow toward the venue */
.drive{display:grid;justify-items:end;text-align:right;gap:3px;padding-top:2px}
.drive__n{font:700 1.35rem/1 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap}
.drive__n small{font:600 .75rem var(--sans);color:var(--ink-3);margin-left:3px}
.drive__dir{display:inline-flex;align-items:center;gap:4px;font-size:.75rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.drive__dir svg{width:14px;height:14px;color:var(--sea-text)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:10px 0 0;font-size:.9375rem}
.facts div{min-width:0}
.facts .wide{grid-column:1/-1}
.facts dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:2px 0 0;color:var(--ink)}
.facts .unk{color:var(--ink-2)}
.facts .unk::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:5px;font-size:.75rem;font-weight:800;box-shadow:inset 0 0 0 1px var(--line-2);vertical-align:1px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.row .src{margin-top:8px}
/* F fold: when filters are on, each row says why it fits */
.reason{display:none;align-items:center;gap:8px;grid-column:1/-1;margin:-14px -14px 12px;padding:8px 14px;border-radius:var(--r) var(--r) 0 0;background:var(--g-hidden-bg);color:var(--sea-text);font-size:.875rem;font-weight:650}
.reason svg{width:16px;height:16px;flex:none}
.is-filtered .reason{display:flex}
.row--compact{grid-template-columns:56px minmax(0,1fr)}
.row--compact h3{font-size:1.05rem}

/* filters */
.fit{display:grid;gap:10px;margin-bottom:14px}
.fit__label{font-size:.9375rem;color:var(--ink-2)}
.fit__row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin-inline:-2px;scrollbar-width:thin}
.fit__count{font-size:.9375rem;color:var(--ink-2)}
.fit__count b{color:var(--ink)}
.fit__names{display:block;font-size:.8125rem;color:var(--ink-3)}
.fit__note{font-size:.8125rem;color:var(--ink-3)}
.empty{background:var(--card);border:1px dashed var(--line-2);border-radius:var(--r);padding:20px}
.empty h3{font-size:1.15rem}
.empty p{color:var(--ink-2);margin-top:6px}
.fold{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.fold__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--g-market-bg);color:var(--g-market-t);margin-inline:auto}
.fold__ic svg{width:22px;height:22px}
.fold h3{font-size:1.05rem}
.fold ul{display:grid;gap:4px;margin-top:6px;font-size:.9375rem;color:var(--ink-2)}
.fold li b{color:var(--ink);font-weight:650}

/* ---------- compass (signature) ---------- */
.compass{background:var(--navy);color:var(--on-navy);border-radius:var(--r-l);padding:18px;align-self:start}
.compass h3{font-size:1.1rem;color:#fff}
.compass p{font-size:.875rem;color:var(--on-navy-2);margin-top:4px}
.compass svg{width:100%;height:auto;margin-top:8px}
.cmp-ring{fill:none;stroke:rgba(233,237,236,.22);stroke-width:1}
.cmp-ring--lab{font:600 11px var(--sans);fill:var(--on-navy-2)}
.cmp-lbl{font:600 12px var(--sans);fill:var(--on-navy)}
.cmp-lbl--dim{fill:var(--on-navy-2);font-weight:500}
.cmp-pt circle{fill:var(--navy);stroke:var(--sand);stroke-width:2.5;transition:fill var(--dur) var(--ease)}
.cmp-pt text{font:800 11px var(--sans);fill:var(--sand)}
.cmp-mk{fill:var(--g-market);stroke:var(--navy);stroke-width:2}
.cmp-wedge{fill:rgba(131,208,199,.28);stroke:rgba(131,208,199,.6);transition:fill var(--dur) var(--ease)}
/* points are links; a point and its listing light together (site.js) */
.cmp-a{cursor:pointer;transition:opacity var(--dur) var(--ease)}
.cmp-hit{fill:transparent}
.cmp-a.is-on .cmp-pt circle{fill:var(--sand)}
.cmp-a.is-on .cmp-pt text{fill:var(--navy)}
.cmp-a.is-on .cmp-lbl{fill:#fff;text-decoration:underline}
.cmp-a.is-on .cmp-wedge{fill:rgba(131,208,199,.55)}
.cmp-a.is-on .cmp-mk{stroke:var(--sand);stroke-width:3}
.cmp-a:focus-visible{outline:none}
.cmp-a:focus-visible .cmp-hit,.cmp-a--wedge:focus-visible .cmp-wedge{stroke:var(--sand);stroke-width:2.5}
.cmp-a.is-out{opacity:.28}
.fold li.is-on b{text-decoration:underline;text-decoration-color:var(--sand-2);text-decoration-thickness:2px}
.cmp-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.8125rem;color:var(--on-navy-2)}
.cmp-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2.5px solid var(--sand);vertical-align:-2px;margin-right:6px}
.cmp-legend i.sq{border-radius:3px;border:0;background:var(--g-market)}
.cmp-legend i.wd{border-radius:3px;border:0;background:rgba(131,208,199,.35)}
.weekend{display:grid;gap:24px}
.weekend>*{min-width:0}

/* ---------- email ---------- */
.email{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;display:grid;gap:18px}
.email h2{font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.email p{color:var(--ink-2);margin-top:8px;max-width:52ch}
.email form{display:grid;gap:10px}
.email label,.email legend{font-weight:650;font-size:.9375rem;color:var(--ink)}
.email fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.email__row{display:flex;flex-wrap:wrap;gap:8px}
.input{flex:1 1 220px;min-height:var(--tap);padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);font:inherit;min-width:0}
.input:focus-visible{outline:3px solid var(--sea-text);outline-offset:1px}
.input[aria-invalid="true"]{border:2px solid var(--g-market)}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio span{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-weight:650;cursor:pointer}
.radio input:checked+span{background:var(--sea-text);border-color:var(--sea-text);color:#fff}
.radio input:focus-visible+span{outline:3px solid var(--sea-text);outline-offset:2px}
.radio input[aria-invalid="true"]+span{border:2px solid var(--g-market)}
.email .err{font-size:.875rem;font-weight:650;color:var(--g-market-t)}
.fine{font-size:.8125rem;color:var(--ink-3)}
.email .sent{font-size:.9375rem;font-weight:650;color:var(--sea-text)}

/* ---------- next 14 days ---------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(64px,1fr);gap:6px;overflow-x:auto;padding:2px 2px 8px;margin-inline:-2px}
.cell{position:relative;display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:96px}
a.cell:hover{border-color:var(--ink-3)}
.cell--today{background:var(--navy);color:#fff;border-color:var(--navy)}
.cell--wk{background:var(--card-2)}
.cell__dow{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.cell__n{font:700 1.3rem/1 var(--disp)}
.dots{display:flex;gap:3px;min-height:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--sea)}
.cell--today .dots i{background:var(--sand)}
.cell__m{font-size:.75rem;color:var(--ink-3)}
.cell--today .cell__m{color:var(--on-navy-2)}
.days{display:grid;gap:10px;margin-top:16px}
.dayline{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);scroll-margin-top:12px}
.dayline h3{font:700 .9375rem/1.3 var(--sans);letter-spacing:0}
.dayline ul{display:grid;gap:4px;font-size:.9375rem;color:var(--ink-2)}
.dayline li b{color:var(--ink);font-weight:650}
.dayline a{color:inherit;text-decoration-color:var(--line-2)}
.dayline a:hover{text-decoration-color:currentColor}
.dayline a b{color:var(--sea-text)}

/* ---------- stages, credit, footer ---------- */
.credit{font-size:.8125rem;color:var(--ink-3)}
.stages{display:grid;gap:8px;font-size:.9375rem}
.stages li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.s-ic{width:14px;height:14px;border-radius:50%;margin-top:4px}
.s-cov{background:var(--sand);box-shadow:0 0 0 2px var(--navy)}
.s-next{border:2px solid var(--ink)}
.s-later{width:8px;height:8px;margin:7px 3px 0;background:var(--ink-3)}
.stages b{font-weight:650}
/* one line that scales to any number of towns: guides live in the top menu, towns in the switcher */
.foot{background:var(--navy);color:var(--on-navy-2);margin-top:32px;padding-block:20px 26px;font-size:.875rem}
.foot__in{display:grid;gap:6px 24px}
.foot__brand{color:#fff;font:700 1rem/1.3 var(--disp)}
.foot__brand span{font:500 .875rem var(--sans);color:var(--on-navy-2)}
.foot__links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot__links a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--sea-light)}
.foot__fine{font-size:.8125rem;max-width:90ch;padding-top:8px;border-top:1px solid rgba(255,255,255,.14);grid-column:1/-1}

/* ---------- guide page ---------- */
.ghero{background:var(--ab);border-bottom:1px solid var(--line)}
.ghero__in{padding-block:22px 26px;display:grid;gap:16px}
.ghero h1{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem)}
.ghero .lead{color:var(--ink-2);max-width:60ch;margin-top:6px;font-size:1.0625rem}
.ghero__meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8125rem;color:var(--ink-3);margin-top:8px}
.listen{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.listen__row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.listen__row .play{flex:none}
.month{display:flex;align-items:baseline;gap:12px;margin:18px 0 4px;padding-top:10px;border-top:2px solid var(--ink);scroll-margin-top:12px}
.list--items>.month:first-child{margin-top:0}
.month h2{font-size:1.2rem}
.month span{font-size:.875rem;color:var(--ink-3)}
.guide-layout{display:grid;gap:18px}
.guide-layout>*{min-width:0}
.rail{display:grid;gap:14px;align-content:start}
.rail .fit{margin:0}
.monthnav{display:grid;gap:8px}
.monthnav ol{display:flex;flex-wrap:wrap;gap:6px}
.monthnav a{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:.875rem}
.monthnav a:hover{background:var(--card-2)}
.monthnav a span{color:var(--ink-3);font-weight:500}
.hint{font-size:.875rem;color:var(--ink-3);margin-bottom:10px}
/* compact item: one scannable line that opens in place (native <details>) */
.list--items{gap:6px}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;scroll-margin-top:12px;transition:border-color var(--dur) var(--ease)}
.item:hover{border-color:var(--line-2)}
.item:has(details[open]){border-color:var(--at);box-shadow:0 0 0 1px var(--at)}
.item__sum{display:grid;grid-template-columns:52px minmax(0,1fr) auto 20px;gap:12px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none;border-radius:12px;min-height:var(--tap)}
.item__sum::-webkit-details-marker{display:none}
.item__date{display:grid;justify-items:center;padding:5px 2px;border-radius:9px;background:var(--fog-2);text-align:center;line-height:1.1;align-self:start}
.item__date b{font:700 1.25rem/1.05 var(--disp)}
.item__date span{font-size:.75rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.item__date .item__plus{text-transform:none;letter-spacing:0;font-weight:650}
.item__main{min-width:0;display:grid;gap:2px}
.item__title{font:650 1.0625rem/1.25 var(--disp);color:var(--ink);overflow-wrap:anywhere}
.item__meta{font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.item__stale{color:var(--ink-3);font-style:italic}
.item__md{display:none}
.item__reason{display:none;font-size:.8125rem;font-weight:650;color:var(--sea-text)}
.is-filtered .item__reason{display:block}
.item__drive{display:grid;justify-items:end;gap:2px;font:700 1.1rem/1 var(--disp);white-space:nowrap;text-align:right}
.item__drive small{font:600 .75rem var(--sans);color:var(--ink-3)}
.item__chev{display:grid;place-items:center;color:var(--ink-3)}
.item__chev svg{width:18px;height:18px;transition:transform var(--dur) var(--ease)}
details[open]>.item__sum .item__chev svg{transform:rotate(180deg)}
.item__body{padding:2px 14px 14px 76px}
.item__body .facts{margin-top:0}
.item__body .why{margin-top:10px}
.item__body .src{margin-top:8px}

/* ---------- detail page ---------- */
.dhead{padding-block:4px 16px}
.dhead h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.7rem);margin-top:8px;overflow-wrap:anywhere}
.dhead .lead{color:var(--ink-2);margin-top:10px;max-width:62ch;font-size:1.0625rem}
.dgrid{display:grid;gap:14px;padding-bottom:16px}
.dgrid>*{min-width:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.panel h2{font-size:1.2rem;margin-bottom:10px}
.occs{display:grid;gap:10px}
.occ{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 14px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.occ h3{font-size:1.05rem}
.tiers{width:100%;border-collapse:collapse;font-size:.9375rem;margin-top:4px}
.tiers th,.tiers td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line)}
.tiers th{font-weight:600;color:var(--ink-2)}
.tiers td{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.unknowns{display:grid;gap:6px;font-size:.9375rem;color:var(--ink-2)}
.unknowns li{display:flex;gap:8px;align-items:flex-start}
.unknowns li::before{content:"?";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:.75rem;font-weight:800;box-shadow:inset 0 0 0 1px var(--line-2);margin-top:2px}
.tier-one{font-size:1rem;font-weight:600}
.unkp{display:flex;gap:8px;align-items:flex-start;font-size:.875rem;color:var(--ink-2);padding:0 4px}
.unkp::before{content:"?" / "";flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:.75rem;font-weight:800;box-shadow:inset 0 0 0 1px var(--line-2)}
.unkp b{color:var(--ink);font-weight:650}
.backline{padding-top:12px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-weight:650;text-decoration:none;color:var(--ink)}
.back svg{width:18px;height:18px}
.back:hover{text-decoration:underline}
.dhead__sum{margin-top:8px;color:var(--ink-2)}
.dhead__sum b{color:var(--ink);font-weight:650}
.gt__fig{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 14px;border-radius:var(--r-s);background:var(--fog-2)}
.gt__fig .drive{justify-items:start;text-align:left;padding:0}
.gt__fig .drive__n{font-size:1.6rem}
.gt__fig .leave{margin:0;font-size:.875rem}
.addr{font-size:.9375rem;margin-top:12px;line-height:1.45}
.addr b{font-weight:650}
.p-gt .meta{margin-top:6px}
.fixit{font-size:.875rem;color:var(--ink-3);padding:0 4px}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.pager a{display:grid;gap:2px;align-content:start;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);text-decoration:none}
.pager a:hover{border-color:var(--line-2)}
.pager a span{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pager a b{font:650 1rem/1.25 var(--disp);overflow-wrap:anywhere}
.pager a small{font-size:.8125rem;color:var(--ink-3)}
.pager__next{text-align:right}

/* ---------- umbrella ---------- */
.brand-link{display:flex;align-items:center;gap:10px;min-height:var(--tap);text-decoration:none;color:inherit}
.pill{border-radius:999px;list-style:none}
.pill::-webkit-details-marker{display:none}
.town__panel--right{left:auto;right:0}
.eyebrow--light{color:var(--on-navy-2)}
.eyebrow--sand{color:var(--sand)}
.btn--light{background:transparent;color:#fff;border-color:rgba(233,237,236,.5)}
.btn--light:hover{background:rgba(233,237,236,.1)}
.h2-mid{font-size:clamp(1.5rem,1.25rem + 1vw,2rem)}
.welcome{background:var(--navy);color:var(--on-navy)}
.welcome__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-block:12px}
.welcome a{color:var(--sand);font-weight:700}
.uhero{padding-block:22px 16px}
.uhero h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem);line-height:1.05}
.uhero .lead{color:var(--ink-2);max-width:62ch;margin-top:8px;font-size:1.0625rem}
.poster{display:grid;background:var(--navy);color:var(--on-navy);border-radius:var(--r-l);overflow:hidden}
.poster__img{aspect-ratio:2.83/1;background:var(--navy-2)}
.poster__img img{width:100%;height:100%;object-fit:cover}
.poster__band{position:relative;padding:18px 20px 22px;display:grid;gap:12px}
.poster__word{font:800 clamp(3.2rem,2rem + 6vw,6.5rem)/.9 var(--disp);letter-spacing:-.035em;color:var(--sand);text-transform:uppercase;margin-top:-4px}
.poster__week{display:grid;gap:8px;margin-top:4px}
.poster__week li{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(233,237,236,.14);font-size:.9375rem}
.poster__week .d{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.poster__week .t{color:#fff;font-weight:600;text-decoration:none}
.poster__week .t b{font-weight:650;text-decoration:underline;text-decoration-color:rgba(233,237,236,.45);text-underline-offset:.18em}
.poster__week .t:hover b{text-decoration-color:currentColor}
.poster__week .t span{display:block;color:var(--on-navy-2);font-weight:500;font-size:.875rem}
.poster__week .m{color:var(--on-navy-2);font-size:.875rem;white-space:nowrap}
.poster__cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn--sand{background:var(--sand);color:var(--navy)}
.btn--sand:hover{background:#ffc779}
.poster .credit{color:var(--on-navy-2);padding:0}
.poster .credit a{color:var(--sea-light)}
.corridor{display:grid;gap:18px;align-items:center}
.corridor svg{width:100%;height:auto}
.cor-water{fill:#d8ece8}
.cor-coast{fill:none;stroke:var(--sea);stroke-width:2}
.cor-lbl{font:600 12px var(--sans);fill:var(--ink)}
.cor-lbl--dim{fill:var(--ink-3);font-weight:500}
.cor-it{font-style:italic}
.cor-b{font-weight:800;font-size:13px}

/* ---------- rule-composed front page and listing states ---------- */
.lead{color:var(--ink-2);font-size:1.0625rem;max-width:62ch}
.h3{font-size:1.25rem;margin-bottom:6px}
.mt-l{margin-top:28px}
.bullets{display:grid;gap:6px;padding-left:20px;list-style:disc;font-size:.9375rem}
.tag-proto--sim{background:var(--sand);color:var(--navy)}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;font:700 .75rem/1.5 var(--sans);letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.tag--sold{background:var(--g-market-bg);color:var(--g-market-t)}
/* a place that is open, not an event: the stub names the days instead of a date */
.stub--open{background:var(--ab,var(--fog-2))}
.stub--open .stub__dow{color:var(--at,var(--ink-3))}
.stub__d{font:700 .875rem/1.25 var(--disp)}
.drive__n small:first-child:not(:last-child){margin:0 2px 0 0}
.divider{padding-top:10px;margin-top:4px;border-top:2px solid var(--ink)}
.divider h3{font:700 1rem/1.35 var(--sans);letter-spacing:0}
.more{margin-top:12px;font-size:.9375rem;color:var(--ink-2)}
.status{margin-top:12px;padding:12px 14px;border-radius:var(--r-s);border-left:4px solid var(--line-2);background:var(--card);font-size:.9375rem;max-width:68ch}
.status b{font-weight:700;color:var(--ink)}
.status span{display:block;font-size:.8125rem;color:var(--ink-3);margin-top:4px}
.status--cancelled,.status--postponed,.status--sold_out{border-left-color:var(--g-market);background:var(--g-market-bg)}
.tablewrap{overflow-x:auto;margin-top:10px}
.heldback{width:100%;min-width:520px;border-collapse:collapse;font-size:.875rem}
.heldback th,.heldback td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-bottom:1px solid var(--line)}
.heldback th{font-size:.75rem;color:var(--ink-3);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.heldback td:first-child{font-weight:650}

/* ---------- corridor map: a quiet reference map from Census data ---------- */
.refmap{border-radius:var(--r);border:1px solid var(--line)}
.map-sea{fill:#dde9e8}
.map-land{fill:#f6f6f2;fill-rule:evenodd}
.map-coast{fill:none;stroke:#7e9c99;stroke-width:1;stroke-linejoin:round}
.map-county{fill:none;stroke:#a3aeb0;stroke-width:1;stroke-dasharray:5 3;stroke-linejoin:round}
.map-region{font:600 9.5px var(--sans);letter-spacing:.14em;fill:#8a979a}
.map-sea-lbl{font:italic 500 12px var(--sans);fill:#5f8481;letter-spacing:.02em}
.map-covered{fill:var(--sand);stroke:var(--navy);stroke-width:2.5}
.map-researching{fill:#fff;stroke:var(--ink);stroke-width:2}
.map-later{fill:var(--ink-3)}
.map-town{font:500 12px var(--sans);fill:var(--ink-2)}
.map-town--covered{font-weight:750;font-size:13px;fill:var(--ink)}
.map-town--researching{fill:var(--ink)}
.map-town--later{font-size:11.5px;fill:var(--ink-3)}
.map-scale path{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.map-scale text,.map-credit{font:500 10px var(--sans);fill:var(--ink-3)}
.map-north path{fill:var(--ink-3)}
.map-north text{font:700 10px var(--sans);fill:var(--ink-3)}
.cor-mine{fill:none;stroke:var(--sea);stroke-width:2.5;opacity:0}
.is-mine .cor-mine{opacity:1}
.cor-a{cursor:pointer}
.cor-a:hover .map-town,.cor-a:focus-visible .map-town{text-decoration:underline}
.cor-a:focus-visible{outline:none}
.cor-a:focus-visible .map-covered{stroke:var(--sea-text);stroke-width:3.5}
.townlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:.9375rem}
.townlist a,.townlist li{display:inline-flex;align-items:center;min-height:36px;font-weight:600}
.ahead{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.ahead h3{font:700 .9375rem/1.3 var(--sans);letter-spacing:0;color:var(--g-fairs-t)}
.ahead ul{display:grid;gap:4px;margin-top:6px;font-size:.9375rem;color:var(--ink-2)}
.ahead a{color:var(--ink);text-decoration-color:var(--line-2)}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .today__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .email{grid-template-columns:1fr 1fr;align-items:center;padding:32px}
  .facts{grid-template-columns:1.25fr 1fr 1.15fr}
  .facts .wide{grid-column:auto}
  .poster__band{padding:22px 28px 26px}
}
@media (min-width:960px){
  .today__grid{grid-template-columns:1.25fr 1fr 1fr}
  .today__grid--2{grid-template-columns:1.25fr 1fr}
  .today__grid--1{grid-template-columns:minmax(0,640px)}
  .weekend{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
  .compass{position:sticky;top:16px}
  .foot__in{grid-template-columns:auto 1fr;align-items:center}
  .foot__links{justify-content:flex-end}
  .sec{padding-block:40px}
  .sec--tight{padding-block:28px}
  .guide-layout{grid-template-columns:minmax(0,1fr) 280px}
  .rail{position:sticky;top:16px;order:2}
  .rail .fit__row{flex-wrap:wrap;overflow:visible}
  /* markup order is the phone reading order; on wide screens the same panels sit in two columns by area */
  .dgrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"when tix" "hear gt" "unk fix";align-items:start}
  .p-when{grid-area:when}.p-tix{grid-area:tix}.p-gt{grid-area:gt}.p-hear{grid-area:hear}.p-unk{grid-area:unk}.p-fix{grid-area:fix}
  .poster{grid-template-columns:1fr 1fr}
  .poster__img{aspect-ratio:auto;min-height:100%}
  .corridor{grid-template-columns:1fr 1.1fr}
}
@media (max-width:600px){
  /* phones: the map shrinks, so its labels grow; later towns keep their dots and are named in the list above */
  .corridor svg .map-town{font-size:15px}
  .corridor svg .map-town--later,.corridor svg .map-region{display:none}
  .item__sum{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:10px}
  .item__drive,.item__chev{display:none}
  .item__title{font-size:1rem}
  .item__ven{display:block}
  .item__body .facts{grid-template-columns:1fr}
  .item__sep{display:none}
  .item__md{display:inline}
  .item__body{padding:2px 12px 12px}
  .monthnav ol{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .monthnav li{flex:none}
}
/* below desktop the two detail columns merge, so the order follows the reader: when, tickets, getting there */
@media (max-width:959px){
}
@media (max-width:420px){
  .row,.fold,.occ{grid-template-columns:52px minmax(0,1fr);gap:0 10px;padding:12px}
  .reason{margin:-12px -12px 10px;padding:8px 12px}
  .stub__n{font-size:1.45rem}
  .drive__n{font-size:1.1rem}
  .row__top{grid-template-columns:1fr}
  .row__top .drive{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;justify-items:start;text-align:left;padding:0;margin-top:2px}
  .btn-email span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .btn-email{padding:0 12px}
  .town__pub{display:none}
  .dayline{grid-template-columns:1fr;gap:4px}
  .poster__week li{grid-template-columns:60px 1fr}
  .poster__week .m{grid-column:2}
  .item__body{padding:2px 12px 12px}
  .pager{grid-template-columns:1fr}
  .pager__next{text-align:left}
}
@media (max-width:340px){.town__name{font-size:1.05rem}.row__top{grid-template-columns:1fr}.drive{justify-items:start;text-align:left}}
@media print{.nav,.email,.compass,.tag-proto,.listen,.pager,.rail{display:none}}

/* ---- production additions for the shared event page (ADR 9 b, g; gap-ed-listed-by, gap-ed-getting-there-multitown).
   Appended after the pinned design stylesheet; nothing above this line changed. */
.listed-by{margin-top:6px}
.gt__towns{list-style:none;margin:0 0 12px;padding:0}
.gt__towns li+li{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.gt__towns .gt__fig{margin-bottom:4px}
.p-gt details{margin:0 0 12px}
.p-gt details>summary{cursor:pointer;font-weight:650;min-height:var(--tap);display:flex;align-items:center}