/* towns_site.css - towns.cafe "Fair Day" landing.
 * Print rules: 2px ink borders, 6px corners, hard offset shadows (no blur), flat inks.
 * Display type uses --towns-font-display (ADR-TOWNS-07); body and UI type come from type-system.css.
 * Motion: transform and opacity only, everything gated on prefers-reduced-motion.
 */

/* Base -------------------------------------------------------------- */
html { scroll-padding-top: 116px; }
:target { scroll-margin-top: 116px; }
.towns_body {
  color: var(--color-text);
  font-size: var(--font-size-body);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.towns_body a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
.towns_body a:hover { color: var(--color-text); }
/* Two-tone ring: blue outline with a paper-coloured gap, so it clears 3:1 next to dark, blue and green fills. */
.towns_body :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-bg); border-radius: 4px; }
.towns_org :focus-visible { outline-color: #FFFDF7; box-shadow: 0 0 0 2px #0F3324; }
.towns_org .towns_flyerform :focus-visible { outline-color: var(--color-focus); box-shadow: 0 0 0 2px #FFFDF7; }
.towns_body ul, .towns_body ol { list-style: none; }
.towns_body p { max-inline-size: 62ch; }

.towns_wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.towns_display { font-family: var(--towns-font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; font-synthesis: none; }
.towns_h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.02; }
.towns_h3 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.05; }
.towns_muted { color: var(--color-text-muted); }
.towns_sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.towns_hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.towns_icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

.towns_skip { position: absolute; left: var(--space-4); top: -100px; z-index: 40; background: var(--towns-ink); color: var(--color-bg) !important; padding: var(--space-2) var(--space-4); border-radius: 6px; text-decoration: none !important; }
.towns_skip:focus { top: var(--space-3); }

/* Printed buttons ----------------------------------------------------- */
.towns_btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5); border-radius: 6px; white-space: nowrap; cursor: pointer;
  border: 2px solid var(--towns-ink); border-bottom-width: 4px;
  text-decoration: none !important;
}
.towns_btn--green { background: var(--color-accent); color: var(--color-on-accent) !important; }
.towns_btn--green:hover { background: var(--color-accent-hover); }
.towns_btn--paper { background: var(--color-surface); color: var(--color-text) !important; }
.towns_btn--paper:hover { background: var(--towns-paper-deep); }
.towns_btn--sm { min-height: 44px; padding: 0 var(--space-4); }
@media (max-width: 479px) { .towns_btn:not(.towns_btn--sm) { white-space: normal; text-align: center; padding-block: var(--space-2); } }
.towns_btn:disabled, .towns_btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .towns_btn { transition: transform 120ms ease, background-color 120ms ease, border-width 120ms ease; }
  .towns_btn:active { transform: translateY(2px); border-bottom-width: 2px; }
}

/* Header and dateline ------------------------------------------------- */
.towns_header { position: sticky; top: 0; z-index: 30; background: var(--color-bg); border-bottom: 2px solid var(--towns-ink); }
.towns_header_row { display: flex; align-items: center; gap: var(--space-5); height: 64px; }
.towns_brand { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text) !important; text-decoration: none !important; }
.towns_brand_word { font-size: 1.5rem; }
.towns_nav { display: none; gap: var(--space-5); margin-left: auto; }
.towns_nav a { color: var(--color-text) !important; text-decoration: none !important; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.towns_nav a:hover { border-bottom-color: var(--color-accent); }
.towns_header .towns_btn { margin-left: auto; }
@media (max-width: 359px) { .towns_hide_xs { display: none; } .towns_brand_word { font-size: 1.3rem; } }
.towns_dateline { border-top: 1px solid var(--towns-ink); background: var(--color-bg); }
.towns_dateline_row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.towns_dateline_row span + span { display: none; }
@media (min-width: 900px) {
  .towns_nav { display: flex; }
  .towns_header .towns_btn { margin-left: var(--space-3); }
  .towns_dateline_row span + span { display: inline; }
}

/* Poster hero ----------------------------------------------------------- */
.towns_hero { position: relative; overflow: hidden; padding-block: calc(44px + var(--space-6)) var(--space-7); }
.towns_hero > .towns_bunting { top: 0; }
.towns_hero_grid { display: grid; gap: var(--space-7); align-items: center; }
.towns_hero_copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.towns_poster { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.towns_townpick_select { min-width: 0; }
.towns_poster { font-family: var(--towns-font-display); font-weight: 400; font-size: clamp(2.7rem, 1.4rem + 4.6vw, 5.75rem); line-height: 0.95; letter-spacing: -0.02em; display: grid; gap: 0.06em; }
.towns_poster_line { display: block; }
.towns_poster_line--town { color: var(--towns-music); }
.towns_townpick { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.towns_townpick_select {
  appearance: none; -webkit-appearance: none; font: inherit; letter-spacing: inherit; color: inherit; line-height: 1.05;
  background: transparent; border: 0; border-bottom: 0.07em solid currentColor; border-radius: 0;
  padding: 0 0.48em 0.02em 0; cursor: pointer; max-width: 100%;
}
.towns_townpick_select option { font-family: var(--font-sans); font-size: 1rem; color: var(--towns-ink); }
.towns_townpick_caret { position: absolute; right: 0; width: 0.36em; height: 0.36em; pointer-events: none; }
.towns_hero_sub { max-width: 36ch; }
.towns_signup { display: grid; gap: var(--space-2); max-width: 32rem; }
.towns_signup_row { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .towns_signup_row { grid-template-columns: 1fr auto; } }
.towns_input {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--towns-border-input); border-radius: 6px; background: var(--color-surface); color: var(--color-text);
}
textarea.towns_input { resize: vertical; min-height: 96px; }
.towns_input:focus-visible { border-color: var(--towns-ink); }
.towns_input[aria-invalid="true"] { border-color: var(--towns-error-text); }
.towns_form_msg:empty { display: none; }
.towns_form_msg[data-state="error"] { color: var(--towns-error-text); }
.towns_form_msg[data-state="ok"] { color: var(--color-accent); font-weight: var(--weight-medium); }
.towns_field { display: grid; gap: var(--space-2); }

.towns_hero_art { position: relative; margin-inline: calc(var(--gutter) * -1); }
.towns_scene { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; }
@media (max-width: 1023px) { .towns_scene { max-height: 44vh; } }
.towns_hero_art {
  --scene-sky: #1F4E9C; --scene-sun: #F2C230; --scene-grass: #2F7A55; --scene-grass-deep: #1B5E43;
  --scene-tree: #1B5E43; --scene-tree-hi: #2F7A55; --scene-wall: #FFFDF7; --scene-window: #1F4E9C;
  --scene-stars: 0; --scene-moon: 0; --scene-sunop: 1; --scene-lights: 0; --scene-dots: 1;
}
.towns_hero_art[data-phase="dawn"] {
  --scene-sky: #EDA889; --scene-sun: #F9D978; --scene-grass: #3E7F5A; --scene-grass-deep: #255E45;
  --scene-tree: #255E45; --scene-tree-hi: #3E7F5A; --scene-wall: #FFF6EC; --scene-window: #8A6FA8;
  --scene-stars: 0.25; --scene-dots: 0.6;
}
.towns_hero_art[data-phase="dusk"] {
  --scene-sky: #C9532F; --scene-sun: #FFD36B; --scene-grass: #2A5C45; --scene-grass-deep: #173A2C;
  --scene-tree: #193F31; --scene-tree-hi: #2A5C45; --scene-wall: #F8E2D2; --scene-window: #F7C948;
  --scene-stars: 0.35; --scene-lights: 0.9; --scene-dots: 0.5;
}
.towns_hero_art[data-phase="night"] {
  --scene-sky: #141B33; --scene-sun: #F2C230; --scene-grass: #1C3A2D; --scene-grass-deep: #0F2219;
  --scene-tree: #102A20; --scene-tree-hi: #1C3A2D; --scene-wall: #C9CFDE; --scene-window: #FFD66B;
  --scene-stars: 1; --scene-moon: 1; --scene-sunop: 0; --scene-lights: 1; --scene-dots: 0.25;
}
.towns_scene_stars { opacity: var(--scene-stars); }
.towns_scene_moon { opacity: var(--scene-moon); }
.towns_scene_sun { opacity: var(--scene-sunop); }
.towns_scene_lights { opacity: var(--scene-lights); }
.towns_scene_dots { opacity: var(--scene-dots); }
@media (prefers-reduced-motion: no-preference) {
  .towns_scene_skyfill, .towns_scene path, .towns_scene rect, .towns_scene circle, .towns_scene polygon { transition: fill 1.6s ease; }
  .towns_scene_stars, .towns_scene_moon, .towns_scene_sun, .towns_scene_lights, .towns_scene_dots { transition: opacity 1.6s ease, transform 1.6s ease; }
  .towns_hero_art[data-phase="night"] .towns_scene_stars circle:nth-child(3n) { animation: towns_twinkle 3.4s ease-in-out infinite; }
  .towns_hero_art[data-phase="night"] .towns_scene_stars circle:nth-child(5n) { animation: towns_twinkle 4.6s ease-in-out infinite 1.2s; }
  @keyframes towns_twinkle { 50% { opacity: 0.25; } }
}
.towns_scene_sign { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; fill: #FFFDF7; }
.towns_textlink { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding-block: var(--space-2); color: var(--color-text) !important; }
@media (min-width: 1024px) {
  .towns_hero { padding-block: calc(44px + var(--space-7)) var(--space-8); }
  .towns_hero_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .towns_hero_art { margin-inline: 0 calc((min(1240px, 100vw) - 100vw) / 2 - var(--gutter)); }
  .towns_scene { aspect-ratio: auto; border-radius: 6px 0 0 6px; border: 2px solid var(--towns-ink); border-right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .towns_scene_wheel { animation: towns_spin 80s linear infinite; }
  @keyframes towns_spin { to { transform: rotate(360deg); } }
}

/* The weekend board --------------------------------------------------- */
.towns_weekend { background: var(--towns-paper-deep); border-block: 2px solid var(--towns-ink); padding-block: var(--space-7) var(--space-8); }
.towns_weekend_head { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.towns_example { display: inline-flex; gap: var(--space-2); align-items: flex-start; justify-self: start; background: var(--towns-note-bg); color: var(--towns-note-text); border: 1.5px dashed var(--towns-note-text); padding: var(--space-2) var(--space-3); border-radius: 6px; }
.towns_example .towns_icon { margin-top: 2px; }
@media (min-width: 900px) { .towns_weekend_head { grid-template-columns: 1fr auto; align-items: end; } }

/* Day strip: ticket tabs */
.towns_days { display: flex; gap: var(--space-3); overflow-x: auto; padding: 8px; margin-inline: -8px; scroll-padding-inline: 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.towns_day { scroll-snap-align: start; }
@media (max-width: 899px) { .towns_days { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.towns_days:focus-within { -webkit-mask-image: none; mask-image: none; }
.towns_days::-webkit-scrollbar { display: none; }
.towns_day {
  position: relative; /* keeps the visually hidden date text inside the scroller */
  flex: none; display: grid; justify-items: start; align-content: center; gap: 2px; min-width: 88px; min-height: 76px;
  padding: var(--space-2) var(--space-4); border: 2px solid var(--towns-ink); border-radius: 6px;
  background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left;
}
.towns_day_num { font-family: var(--towns-font-display); font-size: 2rem; line-height: 1; }
.towns_day_word { font-family: var(--towns-font-display); font-size: 1.25rem; line-height: 1.05; }
.towns_day[aria-pressed="true"] { background: var(--towns-ink); color: var(--color-bg); border-bottom: 4px solid var(--color-accent); }

/* Category ribbons */
.towns_ribbons { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.towns_ribbon {
  --rib: var(--color-surface); --rib-on: var(--color-text); --rib-icon: var(--color-text);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6) 0 var(--space-4); border: 0; background: transparent; cursor: pointer; color: var(--rib-on);
  filter: drop-shadow(2px 0 0 var(--towns-ink)) drop-shadow(-2px 0 0 var(--towns-ink)) drop-shadow(0 2px 0 var(--towns-ink)) drop-shadow(0 -2px 0 var(--towns-ink));
}
.towns_ribbon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rib); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.towns_ribbon .towns_icon { color: var(--rib-icon); }
.towns_ribbon[data-cat="fest"] { --rib-icon: var(--towns-fest-ink); }
.towns_ribbon[data-cat="music"] { --rib-icon: var(--towns-music-ink); }
.towns_ribbon[data-cat="comedy"] { --rib-icon: var(--towns-comedy-ink); }
.towns_ribbon[data-cat="market"] { --rib-icon: var(--towns-market-ink); }
.towns_ribbon[data-cat="family"] { --rib-icon: var(--towns-family-ink); }
.towns_ribbon[data-cat="free"] { --rib-icon: var(--towns-free-ink); }
.towns_ribbon[aria-pressed="true"] { --rib: var(--towns-ink); --rib-on: var(--color-bg); --rib-icon: var(--color-bg); }
.towns_ribbon[data-cat="fest"][aria-pressed="true"] { --rib: var(--towns-fest); --rib-on: var(--towns-fest-on); --rib-icon: var(--towns-fest-on); }
.towns_ribbon[data-cat="music"][aria-pressed="true"] { --rib: var(--towns-music); --rib-on: var(--towns-music-on); --rib-icon: var(--towns-music-on); }
.towns_ribbon[data-cat="comedy"][aria-pressed="true"] { --rib: var(--towns-comedy); --rib-on: var(--towns-comedy-on); --rib-icon: var(--towns-comedy-on); }
.towns_ribbon[data-cat="market"][aria-pressed="true"] { --rib: var(--towns-market); --rib-on: var(--towns-market-on); --rib-icon: var(--towns-market-on); }
.towns_ribbon[data-cat="family"][aria-pressed="true"] { --rib: var(--towns-family); --rib-on: var(--towns-family-on); --rib-icon: var(--towns-family-on); }
.towns_ribbon[data-cat="free"][aria-pressed="true"] { --rib: var(--towns-free); --rib-on: var(--towns-free-on); --rib-icon: var(--towns-free-on); }
.towns_ribbon:focus-visible { outline-offset: 5px; }
.towns_ribbon[aria-pressed="true"] > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

/* Board layout */
.towns_board { display: grid; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
@media (min-width: 1024px) {
  .towns_board { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-7); }
  .towns_mapcard { position: sticky; top: calc(64px + 36px + var(--space-5)); }
}
@media (min-width: 1024px) and (max-height: 820px) { .towns_mapcard { position: static; } }
.towns_count { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.towns_widen { margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-left: 4px solid var(--color-accent); background: var(--color-surface); }
.towns_linkbtn { border: 0; padding: 0; background: none; color: var(--color-link); font: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; cursor: pointer; }
.towns_more { margin-top: var(--space-5); }
.towns_more[hidden] { display: none; }

/* Day groups and ticket stubs */
.towns_daygroup + .towns_daygroup { margin-top: var(--space-6); }
.towns_daygroup_head { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 3px double var(--towns-ink); }
.towns_daygroup_head h3 { font-family: var(--towns-font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1; }
.towns_daygroup_head span { color: var(--color-text-muted); }
.towns_daygroup ol { display: grid; gap: var(--space-4); }

.towns_ticket {
  --cat: var(--towns-ink); --cat-on: var(--color-bg);
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr);
  background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: var(--towns-print-shadow);
}
.towns_ticket[data-cat="fest"] { --cat: var(--towns-fest); --cat-on: var(--towns-fest-on); }
.towns_ticket[data-cat="music"] { --cat: var(--towns-music); --cat-on: var(--towns-music-on); }
.towns_ticket[data-cat="comedy"] { --cat: var(--towns-comedy); --cat-on: var(--towns-comedy-on); }
.towns_ticket[data-cat="market"] { --cat: var(--towns-market); --cat-on: var(--towns-market-on); }
.towns_ticket[data-cat="family"] { --cat: var(--towns-family); --cat-on: var(--towns-family-on); }
.towns_stub {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; padding: var(--space-3) var(--space-2);
  background: var(--cat); color: var(--cat-on); border-right: 2px dashed var(--towns-ink); border-radius: 4px 0 0 4px;
}
.towns_stub::before, .towns_stub::after {
  content: ""; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--towns-paper-deep); border: 2px solid var(--towns-ink);
}
.towns_stub::before { top: -10px; clip-path: inset(50% 0 0 0); }
.towns_stub::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.towns_stub_time { font-family: var(--towns-font-display); font-size: 1.6rem; line-height: 1; font-variant-numeric: lining-nums; }
.towns_stub_ampm { font-size: var(--font-size-caption); font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; }
.towns_stub_free { margin-top: var(--space-2); font-size: var(--font-size-caption); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 8px; border: 1.5px solid currentColor; border-radius: 3px; }
.towns_ticket_body { min-width: 0; display: grid; gap: 6px; padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); }
.towns_ticket_title { font-size: 1.25rem; font-weight: var(--weight-semibold); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.towns_ticker { font-size: var(--font-size-caption); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.towns_ticket_row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.towns_tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-caption); font-weight: var(--weight-medium); padding: 3px 10px; border-radius: 4px; border: 1.5px solid var(--towns-ink); background: var(--color-surface); color: var(--color-text); }
.towns_tag .towns_icon { width: 1.1em; height: 1.1em; }
.towns_tag[data-cat="fest"] .towns_icon { color: var(--towns-fest-ink); }
.towns_tag[data-cat="music"] .towns_icon { color: var(--towns-music-ink); }
.towns_tag[data-cat="comedy"] .towns_icon { color: var(--towns-comedy-ink); }
.towns_tag[data-cat="market"] .towns_icon { color: var(--towns-market-ink); }
.towns_tag[data-cat="family"] .towns_icon { color: var(--towns-family-ink); }
.towns_tag--free { background: var(--towns-free); color: var(--towns-free-on); border-color: var(--towns-free); }
.towns_tag--example { border-style: dashed; color: var(--color-text-muted); background: transparent; }
.towns_source { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.towns_ticket_action { justify-self: start; grid-column: 2; padding: 0 var(--space-4) var(--space-4) var(--space-5); }
.towns_stub { grid-row: 1 / span 2; }
.towns_actionlink { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); margin-left: calc(var(--space-3) * -1); border: 0; border-radius: 6px; background: transparent; color: var(--color-link); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
.towns_actionlink:hover { background: var(--towns-paper-deep); }
.towns_actionlink--pass { color: var(--color-accent); }
.towns_tag--price { font-variant-numeric: tabular-nums; }
.towns_ticket_note { grid-column: 1 / -1; margin: 0; padding: var(--space-3) var(--space-4); border-top: 2px dashed var(--towns-ink); background: var(--towns-note-bg); color: var(--towns-note-text); border-radius: 0 0 4px 4px; }
@media (min-width: 640px) {
  .towns_ticket { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .towns_ticket_action { grid-column: 3; grid-row: 1; align-self: center; padding: 0 var(--space-5) 0 0; }
  .towns_actionlink { margin-left: 0; }
  .towns_stub { grid-row: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .towns_ticket { animation: towns_drop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; animation-delay: calc(var(--i, 0) * 45ms); }
  @keyframes towns_drop { from { opacity: 0; transform: translateY(10px) rotate(-0.6deg); } to { opacity: 1; transform: none; } }
  .towns_ticket.is-torn .towns_stub { animation: towns_tear 520ms cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: 100% 0; }
  @keyframes towns_tear { 0% { transform: none; } 35% { transform: rotate(-7deg) translate(-4px, 3px); } 100% { transform: none; } }
}

.towns_empty { padding: var(--space-6); border: 2px dashed var(--towns-ink); border-radius: 6px; background: var(--color-surface); display: grid; gap: var(--space-3); justify-items: start; }
.towns_empty_title { font-family: var(--towns-font-display); font-size: 1.6rem; line-height: 1.05; }

/* Map card */
.towns_mapcard { background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; padding: var(--space-5); display: grid; gap: var(--space-4); }
.towns_mapcard_head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.towns_radius { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }
.towns_select { appearance: auto; min-height: 44px; padding: 0 var(--space-3); border: 2px solid var(--towns-border-input); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
.towns_map { position: relative; aspect-ratio: 5 / 6; color-scheme: light; border-radius: 4px; border: 2px solid var(--towns-ink); overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgb(47 122 85 / .16) 0 18%, transparent 19%),
    radial-gradient(circle at 72% 64%, rgb(47 122 85 / .14) 0 14%, transparent 15%),
    #E9EFDD; }
.towns_map_roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.towns_map_roads path { fill: none; stroke: #FFFDF7; stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-width: 7px; stroke-linecap: round; }
.towns_map_roads .towns_map_rail { stroke: #1D2333; stroke-width: 2px; stroke-dasharray: 6 5; }
.towns_pin {
  position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px;
  background: none; border: 0; padding: 0; cursor: pointer; color: #1D2333;
}
.towns_pin_dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFFDF7; border: 2px solid #1D2333; box-shadow: 2px 2px 0 #1D2333; font-family: var(--towns-font-display); font-size: 1.1rem; line-height: 1; }
.towns_pin_name { font-size: 12px; font-weight: var(--weight-medium); background: #FFFDF7; padding: 1px 6px; border-radius: 3px; border: 1px solid #1D2333; white-space: nowrap; }
.towns_pin[data-empty="true"] .towns_pin_dot { color: #545A68; border-style: dashed; }
.towns_pin[aria-pressed="true"] .towns_pin_dot { background: #1F4E9C; color: #FFFDF7; box-shadow: 0 0 0 4px #FFFDF7, 0 0 0 6px #1D2333; }
.towns_pin:focus-visible { outline: none; box-shadow: none; z-index: 2; }
.towns_pin:focus-visible .towns_pin_dot { outline: 3px solid var(--towns-music); outline-offset: 4px; }
.towns_map_ring { position: absolute; border: 2px dashed #1D2333; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; background: rgb(31 78 156 / .06); }
@media (max-width: 639px) {
  .towns_map { aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); background: #E9EFDD; }
  .towns_map_roads, .towns_map_ring { display: none; }
  .towns_pin { position: static; transform: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 2px 10px 2px 2px; border: 1px solid #1D2333; border-radius: 999px; background: #FFFDF7; }
  .towns_pin_dot { width: 36px; height: 36px; box-shadow: none; font-size: 1rem; }
  .towns_pin_name { border: 0; padding: 0; font-size: 14px; background: none; }
}
@media (prefers-reduced-motion: no-preference) { .towns_map_ring { transition: width 300ms ease, height 300ms ease, left 300ms ease, top 300ms ease; } }

/* Story: corkboard + the Thursday List ------------------------------- */
.towns_story { padding-block: var(--space-section); }
.towns_story_title { max-width: 18ch; }
.towns_story_grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-7); align-items: start; }
@media (min-width: 1024px) { .towns_story_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.towns_corkboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); gap: var(--space-4) var(--space-3); padding: var(--space-6) var(--space-5) var(--space-4); border: 2px solid var(--towns-ink); border-radius: 6px;
  background: #C9A36B radial-gradient(rgb(29 35 51 / .12) 1px, transparent 1.4px) 0 0 / 7px 7px; box-shadow: inset 0 0 0 6px #A8834C; }
.towns_flyer { position: relative; display: grid; align-self: start; gap: var(--space-2); align-content: start; min-height: 120px; padding: var(--space-5) var(--space-4) var(--space-4); background: #FFFDF7; color: #1D2333; border: 1.5px solid #1D2333; box-shadow: 3px 4px 0 rgb(29 35 51 / .35); }
.towns_flyer::before { content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--towns-fest); border: 2px solid #1D2333; box-shadow: 1px 2px 0 rgb(29 35 51 / .4); }
.towns_flyer .towns_display { font-size: 1.3rem; line-height: 1.05; }
.towns_flyer .t-caption { color: #545A68; }
.towns_flyer--1 { grid-column: 1 / 5; grid-row: 1 / 3; transform: rotate(-2deg); border-top: 10px solid var(--towns-music); }
.towns_flyer--1 .towns_display { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.towns_flyer--2 { grid-column: 4 / 7; grid-row: 2 / 4; transform: rotate(3deg); background: #FFF1C2; z-index: 1; }
.towns_flyer--3 { grid-column: 1 / 4; grid-row: 3 / 5; transform: rotate(1.4deg); border-top: 10px solid var(--towns-fest); }
.towns_flyer--4 { grid-column: 3 / 7; grid-row: 4 / 6; transform: rotate(-1.6deg); background: #F5E9F0; z-index: 2; }
.towns_flyer--4::before { background: var(--towns-music); }

.towns_paper { position: relative; background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: var(--towns-print-shadow); padding: var(--space-6); display: grid; gap: var(--space-5); }
.towns_paper_mast { text-align: center; display: grid; gap: var(--space-1); justify-items: center; padding-bottom: var(--space-4); border-bottom: 4px double var(--towns-ink); }
.towns_paper_mast .t-overline { color: var(--color-accent); }
.towns_paper_title { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1; }
.towns_paper_cols { display: grid; gap: var(--space-4); }
.towns_paper_cols > div { display: grid; gap: var(--space-1); align-content: start; }
.towns_paper_cols p { margin: 0; }
.towns_paper_cols li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: var(--space-2); }
.towns_paper_day { font-size: 1.25rem; border-bottom: 1px solid var(--towns-ink); padding-bottom: 2px; margin-bottom: 2px !important; }
.towns_paper_time { display: inline-block; min-width: 5.2em; color: var(--color-accent); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
  .towns_paper_cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .towns_paper_cols > div { padding-inline: var(--space-3); }
  .towns_paper_cols > div + div { border-left: 1px solid var(--towns-ink); }
  .towns_paper_cols li { display: block; }
  .towns_paper_time { display: block; min-width: 0; }
}
.towns_paper_cta { justify-self: start; }

/* Classifieds ------------------------------------------------------------ */
.towns_classifieds { padding-block: var(--space-section); background: var(--color-surface); border-block: 2px solid var(--towns-ink); }
.towns_class_mast { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding-bottom: var(--space-5); border-bottom: 4px double var(--towns-ink); }
.towns_class_mast .t-overline { color: var(--towns-fest-ink); }
.towns_class_mast p { margin-inline: auto; }
.towns_class_title { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.25rem); line-height: 0.98; max-width: 16ch; }
.towns_class_cols { columns: 1; column-gap: var(--space-6); column-rule: 1px solid var(--towns-ink); margin-top: var(--space-6); }
@media (min-width: 640px) { .towns_class_cols { columns: 2; } }
@media (min-width: 1024px) { .towns_class_cols { columns: 3; } }
.towns_ad { break-inside: avoid; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--towns-border-strong); }
.towns_ad_title { display: grid; justify-items: start; gap: var(--space-2); margin-bottom: var(--space-2); font: inherit; }
.towns_ad_head { font-weight: var(--weight-semibold); }
.towns_ad_kind { display: inline-block; padding: 2px 8px; background: var(--towns-ink); color: var(--color-bg); font-size: var(--font-size-caption); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; }
.towns_ad strong { font-weight: var(--weight-semibold); }
.towns_ad--big { padding: var(--space-4); border: 2px solid var(--towns-ink); background: #FFF1C2; color: #1D2333; }
.towns_ad--big .towns_ad_kind { background: var(--towns-fest); color: #FFFDF7; }
.towns_ad--big .towns_ad_head { font-weight: 400; font-size: 1.75rem; line-height: 1.02; }
.towns_class_foot { display: grid; gap: var(--space-3); justify-items: center; text-align: center; margin-top: var(--space-5); }

/* Host: green band, flyer form --------------------------------------------- */
.towns_org { background: var(--color-accent); color: var(--color-on-accent); padding-block: var(--space-section); }
.towns_org a { color: var(--color-on-accent) !important; }
.towns_org_grid { display: grid; gap: var(--space-8); align-items: center; }
.towns_org_copy { display: grid; gap: var(--space-5); }
.towns_org_copy .t-lead { max-width: 40ch; }
.towns_stamps { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.towns_stamps li { padding: var(--space-2) var(--space-3); border: 2px dashed var(--color-on-accent); border-radius: 4px; }
.towns_stamps li:nth-child(1) { transform: rotate(-1.5deg); }
.towns_stamps li:nth-child(3) { transform: rotate(1deg); }
.towns_flyerwrap { position: relative; }
.towns_flyerwrap::before { content: ""; position: absolute; inset: 0; background: #FFFDF7; border: 2px solid #1D2333; box-shadow: 10px 10px 0 #0F3324; transform: rotate(1.4deg); }
.towns_flyerform { position: relative; display: grid; gap: var(--space-4); padding: var(--space-7) var(--space-6) var(--space-6); color: #1D2333; }
.towns_flyerform .towns_muted { color: #545A68; }
.towns_flyerform .towns_input { background: #FFFFFF; color: #1D2333; border-color: #7D735F; }
.towns_flyerform select.towns_input { appearance: auto; }
.towns_flyerform .towns_form_msg[data-state="ok"] { color: #1B5E43; }
.towns_flyerform .towns_form_msg[data-state="error"] { color: #A3211A; }
.towns_flyerform .towns_btn { justify-self: start; }
.towns_flyerform_title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); color: #B3261E; line-height: 1; }
.towns_tape { position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgb(242 194 48 / .75); border: 1px solid rgb(29 35 51 / .25); transform: rotate(-3deg); }
@media (min-width: 1024px) { .towns_org_grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-9); } }

/* Request a town ---------------------------------------------------- */
.towns_request { border-block: 2px solid var(--towns-ink); background: var(--towns-paper-deep); padding-block: var(--space-6); }
.towns_request_row { display: grid; gap: var(--space-5); align-items: end; }
.towns_request_row > div { display: grid; gap: var(--space-2); }
.towns_request_form { display: grid; gap: var(--space-3); align-items: end; }
.towns_request_form .towns_form_msg, .towns_request_help { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .towns_request_row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .towns_request_form { grid-template-columns: 1fr 1fr auto; }
}

/* FAQ ---------------------------------------------------------------------- */
.towns_faq { padding-block: var(--space-section); }
.towns_faq_grid { display: grid; gap: var(--space-6); }
.towns_qa { display: grid; gap: var(--space-6) var(--space-7); }
.towns_qa > div { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--towns-ink); }
.towns_qa dd { color: var(--color-text-muted); max-width: 52ch; }
@media (min-width: 900px) { .towns_faq_grid { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); } .towns_qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Close --------------------------------------------------------------- */
.towns_close { position: relative; padding-block: calc(44px + var(--space-8)) var(--space-9); text-align: center; overflow: hidden; }
.towns_bunting { position: absolute; top: 0; left: 0; right: 0; height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='44'%3E%3Cpath d='M0 3 Q90 14 180 3' fill='none' stroke='%231D2333' stroke-width='2'/%3E%3Cpolygon points='4,4 40,8 22,40' fill='%23B3261E' stroke='%231D2333' stroke-width='1.5'/%3E%3Cpolygon points='48,8 84,10 66,42' fill='%23F2C230' stroke='%231D2333' stroke-width='1.5'/%3E%3Cpolygon points='92,10 128,9 110,42' fill='%231F4E9C' stroke='%231D2333' stroke-width='1.5'/%3E%3Cpolygon points='136,8 172,4 154,40' fill='%23FFFDF7' stroke='%231D2333' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 0 / 180px 44px; }
.towns_close_inner { display: grid; gap: var(--space-6); justify-items: center; }
.towns_close_title { font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem); line-height: 0.95; max-width: 12ch; }
.towns_close_inner > p { margin-inline: auto; }

/* Footer -------------------------------------------------------------- */
.towns_footer { border-top: 2px solid var(--towns-ink); padding-block: var(--space-7); background: var(--color-surface); }
.towns_footer_grid { display: grid; gap: var(--space-6); }
.towns_footer_word { font-size: 2rem; }
.towns_footer_grid .t-overline { margin-bottom: var(--space-2); }
.towns_footer_links a { color: var(--color-text) !important; display: inline-block; padding-block: 5px; }
.towns_footer_towns { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.towns_footer_towns .towns_footer_links { justify-content: flex-start; }
.towns_footer_legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--towns-ink); }
.towns_footer_legal .towns_footer_links { justify-content: flex-start !important; }
.towns_footer_links { display: flex; flex-wrap: wrap; gap: 2px var(--space-5); }
@media (min-width: 900px) { .towns_footer_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .towns_footer_links { justify-content: flex-end; } }

/* Reveal (added by JS only when motion is allowed) ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .towns_reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), transform 650ms cubic-bezier(0.16, 1, 0.3, 1); }
  .towns_reveal.is-in { opacity: 1; transform: none; }
}

/* View transitions for the list */
::view-transition-old(towns-list), ::view-transition-new(towns-list) { animation-duration: 220ms; }

/* Reduced motion and forced colours -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .towns_flyer, .towns_flyerwrap::before, .towns_stamps li { transform: none !important; }
}
@media (forced-colors: active) {
  .towns_ribbon { filter: none; border: 2px solid ButtonText; }
  .towns_ribbon::before { display: none; }
  .towns_stub { border-right: 2px dashed CanvasText; }
  /* Selected states must survive Windows High Contrast (F-11) */
  .towns_ribbon[aria-pressed="true"], .towns_day[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .towns_ribbon[aria-pressed="true"] .towns_icon { color: HighlightText; }
  .towns_pin[aria-pressed="true"] .towns_pin_dot { border: 4px double CanvasText; }
  .towns_body :focus-visible { outline-color: Highlight; }
}

/* Opening-soon panel (cities not open yet) ------------------------------ */
.towns_soon { display: grid; gap: var(--space-6); align-items: start; margin-top: var(--space-2); }
.towns_soon_copy { display: grid; gap: var(--space-4); justify-items: start; }
.towns_soon_title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1; }
.towns_soon_card { background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: var(--towns-print-shadow); padding: var(--space-5); display: grid; gap: var(--space-4); }
.towns_soon_card_title { font-size: 1.5rem; line-height: 1.1; padding-bottom: var(--space-3); border-bottom: 3px double var(--towns-ink); }
.towns_soon_facts { display: grid; gap: var(--space-3); }
.towns_soon_facts > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--towns-border-strong); }
.towns_soon_facts dt { color: var(--color-text-muted); }
.towns_soon_facts dd { text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .towns_soon { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-8); } }
.towns_mapcard[hidden] { display: none; }

/* Hero illustration pause control (F-08) ------------------------------- */
.towns_motion { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2; min-height: 36px; padding: 0 var(--space-3);
  border: 2px solid #1D2333; border-radius: 6px; background: #FFFDF7; color: #1D2333; cursor: pointer; font-weight: var(--weight-medium); }
.towns_motion:hover { background: #F3EEE4; }
.towns_hero_art.is-paused *, .towns_hero_art.is-offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .towns_motion { display: none; } }

.towns_noscript_towns { max-width: 40ch; }
.towns_soon_title { margin: 0; }

/* Policy and confirmation pages ----------------------------------------- */
.towns_doc { padding-block: var(--space-7) var(--space-section); }
.towns_doc_inner { display: grid; gap: var(--space-4); max-width: 46rem; }
.towns_doc_inner h2 { margin-top: var(--space-5); }
.towns_doc_inner p, .towns_doc_inner li { max-inline-size: 66ch; }
.towns_doc_list { display: grid; gap: var(--space-2); padding-left: 1.2em; list-style: disc !important; }
.towns_doc_list li::marker { color: var(--color-accent); }
.towns_docpage .towns_header .towns_btn { margin-left: auto; }

/* Print (F-16) ------------------------------------------------------------- */
@media print {
  html { scroll-padding-top: 0; }
  .towns_body { background: #FFFFFF; color: #000000; }
  .towns_reveal { opacity: 1 !important; transform: none !important; }
  .towns_header { position: static; border-bottom: 1px solid #000000; }
  .towns_skip, .towns_bunting, .towns_hero_art, form, .towns_textlink, .towns_mapcard, .towns_days, .towns_ribbons, .towns_more,
  .towns_btn, .towns_nav, .towns_request, .towns_close, .towns_ticket_action, .towns_widen { display: none !important; }
  .towns_org, .towns_weekend, .towns_classifieds, .towns_footer, .towns_paper, .towns_ticket, .towns_ad--big, .towns_corkboard { background: none !important; color: #000000 !important; box-shadow: none !important; }
  .towns_org a, .towns_org .t-lead, .towns_stamps li { color: #000000 !important; border-color: #000000 !important; }
  .towns_stub, .towns_ribbon, .towns_ad_kind, .towns_pin_dot { background: none !important; color: #000000 !important; }
  .towns_ticket { break-inside: avoid; animation: none !important; }
  .towns_flyer { transform: none !important; box-shadow: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

/* Merged 2026-11-01 from the parallel session (social sections, real-listing links) ------------- */
/* Round up your people: plan maker and neighbor tables (social) -------- */
.towns_plan { padding-block: var(--space-section); }
.towns_plan_head { display: grid; gap: var(--space-3); max-width: 44rem; }
.towns_plan_grid { display: grid; gap: var(--space-7); margin-top: var(--space-6); align-items: start; }
@media (min-width: 1024px) { .towns_plan_grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-8); } }
.towns_crew { border: 0; padding: 0; margin: 0; min-width: 0; }
.towns_crew legend { padding: 0; margin-bottom: var(--space-3); }
.towns_crew_opts { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .towns_crew_opts { grid-template-columns: 1fr 1fr; } }
.towns_crew_opt {
  --crew: var(--color-surface); --crew-on: var(--color-text);
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  min-height: 88px; padding: var(--space-4); cursor: pointer;
  background: var(--crew); color: var(--crew-on); border: 2px solid var(--towns-ink); border-radius: 6px;
}
.towns_crew_opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.towns_crew_opt .towns_icon { grid-row: 1 / span 2; width: 2rem; height: 2rem; }
.towns_crew_name { font-size: 1.35rem; line-height: 1.05; }
.towns_crew_opt .t-body-sm { color: inherit; }
.towns_crew_opt:hover { background: var(--towns-paper-deep); }
.towns_crew_opt:has(input:checked) { box-shadow: var(--towns-print-shadow); }
.towns_crew_opt[data-crew="family"]:has(input:checked) { --crew: var(--towns-family); --crew-on: var(--towns-family-on); }
.towns_crew_opt[data-crew="date"]:has(input:checked) { --crew: var(--towns-fest); --crew-on: var(--towns-fest-on); }
.towns_crew_opt[data-crew="friends"]:has(input:checked) { --crew: var(--towns-comedy); --crew-on: var(--towns-comedy-on); }
.towns_crew_opt[data-crew="solo"]:has(input:checked) { --crew: var(--towns-music); --crew-on: var(--towns-music-on); }
.towns_crew_opt:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-bg); }

.towns_plancard { position: relative; display: grid; gap: var(--space-4); padding: var(--space-7) var(--space-6) var(--space-6); background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--towns-ink); }
.towns_plancard .t-overline { color: var(--color-accent); }
.towns_plancard_title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height: 1; }
.towns_plan_steps { display: grid; gap: 0; counter-reset: towns-step; }
.towns_plan_step { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-6); border-top: 1.5px dashed var(--towns-ink); }
.towns_plan_step::before { counter-increment: towns-step; content: counter(towns-step); position: absolute; left: 0; top: var(--space-3); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--towns-ink); color: var(--color-bg); font-family: var(--towns-font-display); font-size: 0.95rem; line-height: 1; }
.towns_plan_when { font-family: var(--towns-font-display); font-size: 1.15rem; line-height: 1.1; white-space: nowrap; }
@media (max-width: 420px) { .towns_plan_step { grid-template-columns: 1fr; gap: 2px; } }
.towns_plan_what { display: grid; gap: 2px; min-width: 0; }
.towns_plan_what strong { font-weight: var(--weight-semibold); }
.towns_plan_stop { padding: var(--space-3); border: 1.5px dashed var(--towns-note-text); background: var(--towns-note-bg); color: var(--towns-note-text); border-radius: 4px; }
.towns_plan_stop:empty { display: none; }
.towns_plan_actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  .towns_plancard.is-shuffled { animation: towns_flip 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
  @keyframes towns_flip { 0% { transform: rotate(0); } 40% { transform: rotate(-1.6deg) translateY(-4px); } 100% { transform: none; } }
}

.towns_tables { margin-top: var(--space-8); display: grid; gap: var(--space-5); }
.towns_tables_head { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .towns_tables_head { grid-template-columns: 1fr auto; align-items: end; } }
.towns_tables_list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.towns_table { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; }
.towns_table_title { font-size: 1.4rem; line-height: 1.05; }
.towns_table .towns_btn { justify-self: start; margin-top: var(--space-2); }
.towns_table .towns_btn[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent) !important; }
.towns_seats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.towns_seats i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--towns-ink); background: var(--color-surface); }
.towns_seats i.is-taken { background: var(--towns-ink); }
.towns_seats i.is-you { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--towns-ink); }
@media (prefers-reduced-motion: no-preference) { .towns_seats i.is-you { animation: towns_pop 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } @keyframes towns_pop { from { transform: scale(0.3); } to { transform: none; } } }

/* Main Street drops (local commerce) ----------------------------------- */
.towns_main { padding-block: var(--space-section); background: var(--towns-paper-deep); border-block: 2px solid var(--towns-ink); }
.towns_main_head { display: grid; gap: var(--space-3); max-width: 46rem; }
.towns_shops { display: grid; gap: var(--space-5); margin-top: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.towns_shop { --awn: var(--towns-fest); display: grid; background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: var(--towns-print-shadow); overflow: hidden; }
.towns_shop[data-awning="blue"] { --awn: var(--towns-music); }
.towns_shop[data-awning="yellow"] { --awn: var(--towns-comedy); }
.towns_shop[data-awning="green"] { --awn: var(--towns-free); }
.towns_awning {
  height: 46px; border-bottom: 2px solid var(--towns-ink);
  background: repeating-linear-gradient(90deg, var(--awn) 0 28px, #FFFDF7 28px 56px);
  -webkit-mask: radial-gradient(14px at 50% 100%, #0000 97%, #000) 0 0 / 28px 100%, linear-gradient(#000 0 0) top / 100% 32px no-repeat;
          mask: radial-gradient(14px at 50% 100%, #0000 97%, #000) 0 0 / 28px 100%, linear-gradient(#000 0 0) top / 100% 32px no-repeat;
}
.towns_shop_body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); align-content: start; }
.towns_shop_kind { display: inline-flex; align-items: center; gap: var(--space-2); }
.towns_shop_name { font-size: 1.5rem; line-height: 1.02; }
.towns_drop { font-family: var(--towns-font-display); font-size: 1.15rem; line-height: 1.1; padding: var(--space-2) var(--space-3); background: var(--towns-note-bg); color: var(--towns-note-text); border: 1.5px dashed var(--towns-note-text); border-radius: 4px; }
.towns_shop_near { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .towns_shop { transition: transform 160ms ease, box-shadow 160ms ease; }
  .towns_shop:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--towns-ink); }
}
.towns_main_foot { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-7); padding: var(--space-6); background: var(--color-accent); color: var(--color-on-accent); border: 2px solid var(--towns-ink); border-radius: 6px; }
.towns_main_foot .towns_btn--green { background: var(--color-surface); color: var(--color-text) !important; }
@media (min-width: 900px) { .towns_main_foot { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); } .towns_main_foot p { margin: 0; } }

.towns_textbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-block-size: 24px; }
.towns_ticket_links { margin: 0; }
.towns_nav .towns_nav_wide { display: none; }
@media (min-width: 1100px) { .towns_nav .towns_nav_wide { display: inline; } }
.towns_ticket_note p { margin: 0; }
.towns_ticket_note p + p { margin-top: var(--space-2); }
.towns_ticket_links a, .towns_ticket_links .towns_textbtn { color: inherit; }
.towns_ticket_body .towns_ticket_links { margin-top: 2px; }
@media (forced-colors: active) { .towns_crew_opt:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
@media print { .towns_plan, .towns_main { display: none !important; } }

/* Town picker: themed and searchable (replaces the browser's native list, which on macOS
   copies the giant headline font size) ------------------------------------------------ */
.towns_hero_copy { position: relative; }
.towns_townpick.is-enhanced .towns_townpick_select,
.towns_townpick.is-enhanced > .towns_townpick_caret { display: none; }
.towns_townpick_btn {
  font: inherit; letter-spacing: inherit; line-height: 1.05; color: inherit; text-align: left;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 4px;
  display: inline-flex; align-items: flex-end; flex-wrap: nowrap; max-width: 100%;
}
.towns_townpick_btn .towns_townpick_name { min-width: 0; overflow-wrap: anywhere; }
.towns_townpick.is-enhanced { display: inline; }
.towns_townpick_name { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.towns_townpick_icon { flex: none; width: 0.36em !important; height: 0.36em !important; margin: 0 0 0.2em 0.14em; }
.towns_townpick_btn:hover .towns_townpick_name { text-decoration-color: var(--towns-fest); }
@media (prefers-reduced-motion: no-preference) {
  .towns_townpick_icon { transition: transform 160ms ease; }
}
.towns_townpick_btn[aria-expanded="true"] .towns_townpick_icon { transform: rotate(180deg); }

.towns_townpanel {
  position: absolute; z-index: 25; width: min(24rem, 100%);
  display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3);
  font-family: var(--font-sans); font-size: 1rem; letter-spacing: normal; line-height: 1.4; color: var(--color-text);
  background: var(--color-surface); border: 2px solid var(--towns-ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--towns-ink);
}
.towns_townpanel[hidden] { display: none; }
.towns_townpanel::before { /* a little ticket tab pointing at the town name */
  content: ""; position: absolute; top: -9px; left: 28px; width: 14px; height: 14px;
  background: var(--color-surface); border-left: 2px solid var(--towns-ink); border-top: 2px solid var(--towns-ink); transform: rotate(45deg);
}
.towns_townpanel_label { color: var(--color-text-muted); }
.towns_townpanel_field { position: relative; display: flex; align-items: center; }
.towns_townpanel_field .towns_icon { position: absolute; left: 12px; width: 1.1rem; height: 1.1rem; color: var(--color-text-muted); pointer-events: none; }
.towns_townpanel_input {
  width: 100%; min-height: 44px; padding: 0 var(--space-3) 0 40px; font: inherit;
  border: 2px solid var(--towns-border-input); border-radius: 6px; background: var(--color-bg); color: var(--color-text);
}
.towns_townpanel_input:focus-visible { border-color: var(--towns-ink); }
.towns_townpanel_list { max-height: min(19rem, 46vh); overflow-y: auto; overscroll-behavior: contain; margin-inline: calc(var(--space-2) * -1); padding-inline: var(--space-2); scrollbar-width: thin; }
.towns_townpanel_group + .towns_townpanel_group { margin-top: var(--space-2); }
.towns_townpanel_head { position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-2) 6px; background: var(--color-surface); color: var(--color-text-muted); border-bottom: 1px dashed var(--towns-border-strong); }
.towns_townpanel_opt {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-2);
  border-radius: 4px; cursor: pointer; font-size: 1rem;
}
.towns_townpanel_opt:hover { background: var(--towns-paper-deep); }
.towns_townpanel_opt.is-active { background: var(--towns-paper-deep); box-shadow: inset 0 0 0 2px var(--towns-ink); }
.towns_townpanel_dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--towns-ink); background: transparent; }
.towns_townpanel_group[data-open="true"] .towns_townpanel_dot { background: var(--color-accent); border-color: var(--color-accent); }
.towns_townpanel_name { flex: 1; min-width: 0; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.towns_townpanel_state { flex: none; font-size: var(--font-size-caption); font-weight: var(--weight-medium); letter-spacing: 0.08em; color: var(--color-text-muted); }
.towns_townpanel_here { flex: none; font-size: var(--font-size-caption); font-weight: var(--weight-semibold); padding: 1px 8px; border-radius: 999px; background: var(--towns-ink); color: var(--color-bg); }
.towns_townpanel_opt[aria-selected="true"] .towns_townpanel_name { font-weight: var(--weight-semibold); }
.towns_townpanel_empty { padding: var(--space-3) var(--space-2); margin: 0; }
.towns_townpanel_status { margin: 0; color: var(--color-text-muted); }
.towns_townpanel_status:empty { display: none; }
@media (forced-colors: active) {
  .towns_townpanel_opt.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .towns_townpanel_group[data-open="true"] .towns_townpanel_dot { background: CanvasText; }
}
@media print { .towns_townpanel, .towns_townpick_icon { display: none !important; } }