/* ==========================================================================
   NC Arts Directory: shared shell (round 3)
   --------------------------------------------------------------------------
   One stylesheet for every page. It owns the header, footer, layout grid,
   cards, event card, chips, buttons, forms, search bar and utilities.

   It is section-agnostic. Each page sets a section class on <body>
   (e.g. <body class="sec-music">) and everything here reads the --sec-*
   variables that class defines. Section files (assets/sections/<slug>.css)
   add the object world (sleeves, playbills, frames...) and may override
   --sec-display-* but never restyle shared components.

   The nine section palettes live HERE, not in the section files, because
   shared components show other sections' colors on any page: the section
   switcher, cross-section event cards (events.html), search results.

   Rules this file enforces:
   - Renders fully with JavaScript disabled. Nothing starts hidden.
   - Motion is CSS-only and honours prefers-reduced-motion, plus a no-JS
     "Pause motion" checkbox (#motion-pause) for WCAG 2.2.2.
   - All text pairs below were measured >= 4.5:1 (see 01-art-direction.md).
   - --sec-accent is for DARK grounds only. On light grounds use --sec-ink.
   ========================================================================== */

/* ---------- 1. Base tokens (fixed everywhere) ---------- */
:where(:root) {
  /* neutrals */
  --paper: #F7F4EC;        /* default page ground */
  --card: #FFFFFF;
  --ink: #17181A;          /* body text: 17.0:1 on card */
  --muted: #55595F;        /* secondary text: >= 5.6:1 on every paper/tint */
  --line: #DCD6CA;         /* hairlines on light */
  --night: #111214;        /* header + footer ground */
  --night-2: #1B1C1F;
  --night-text: #ECE9E2;   /* 15.9:1 on --night */
  --night-muted: #A9A6A0;  /* 7.6:1 on --night */
  --focus: #FFD84D;        /* focus ring core (paired with a dark halo) */

  /* type */
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* scale (8px rhythm) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --block-y: clamp(56px, 8vw, 104px);   /* vertical padding of a landing block */
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  --r-card: 4px; --r-ctl: 6px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(17,18,20,.06), 0 2px 8px rgba(17,18,20,.06);
  --shadow-2: 0 2px 4px rgba(17,18,20,.08), 0 12px 28px rgba(17,18,20,.14);

  /* hero display cap from the brief: never larger than this */
  --hero-size: clamp(2.5rem, 5vw, 4.25rem);
  --h2-size: clamp(1.85rem, 3.3vw, 2.75rem);
}

/* ---------- 2. Section palettes ----------
   Every section defines the same variable set:
   --sec-deep     dark ground (hero, card art band, event date stub)
   --sec-deep-2   raised dark (panels on deep)
   --sec-accent   accent ON DARK ONLY (display emphasis, buttons on deep)
   --sec-ink      accent ON LIGHT (links, eyebrows, primary button fill)
   --sec-on-ink   text on --sec-ink (always white here)
   --sec-tint     light tinted panel
   --sec-paper    page ground for the section
   --sec-mist     secondary text on --sec-deep
   --sec-sig      signature swatch (switcher tab, color bars). Decorative.
   --sec-display  display face family (headings in this section)
   --sec-display-weight / -case / -track / -leading
   Optional (fall back to the shared default when unset):
   --sec-h2-size  block-title size, if the display face needs a smaller h2
   --sec-tab-bg / --sec-tab-fg  active switcher tab (default deep / accent);
                  set them when the hero is light so the tab opens into it
   -------------------------------------------------------------------- */
.sec-home {
  --sec-name: "NC Arts";
  --sec-deep: var(--home-deep, #0E1A14); --sec-deep-2: var(--home-deep-2, #17291F); --sec-accent: var(--home-accent, #A6E3B0);
  --sec-ink: var(--home-ink, #2F6B45); --sec-on-ink: var(--home-on-ink, #FFFFFF); --sec-tint: var(--home-tint, #E3EEE4);
  --sec-paper: var(--home-paper, #F6F3EA); --sec-mist: var(--home-mist, #BAC5BD); --sec-sig: var(--home-sig, #7FCB93);
  --sec-display: "Instrument Serif", Georgia, serif;
  --sec-display-weight: 400; --sec-display-case: none; --sec-display-track: -0.01em; --sec-display-leading: 1.02;
}
.sec-music {
  --sec-deep: var(--music-deep, #0B1730); --sec-deep-2: var(--music-deep-2, #13284B); --sec-accent: var(--music-accent, #F2C14E);
  --sec-ink: var(--music-ink, #B42232); --sec-on-ink: var(--music-on-ink, #FFFFFF); --sec-tint: var(--music-tint, #F4EBDA);
  --sec-paper: var(--music-paper, #FBF7EF); --sec-mist: var(--music-mist, #C9D0DD); --sec-sig: var(--music-sig, #F2C14E);
  --sec-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sec-display-weight: 900; --sec-display-case: uppercase; --sec-display-track: 0; --sec-display-leading: .9;
}
.sec-theater {
  --sec-deep: var(--theater-deep, #1E0A10); --sec-deep-2: var(--theater-deep-2, #3A0E1B); --sec-accent: var(--theater-accent, #E2B86B);
  --sec-ink: var(--theater-ink, #8E1B32); --sec-on-ink: var(--theater-on-ink, #FFFFFF); --sec-tint: var(--theater-tint, #F6E9E4);
  --sec-paper: var(--theater-paper, #FBF6F0); --sec-mist: var(--theater-mist, #D9C3C3); --sec-sig: var(--theater-sig, #D2394A);
  --sec-display: "Bodoni Moda", Didot, Georgia, serif;
  --sec-display-weight: 700; --sec-display-case: none; --sec-display-track: -0.01em; --sec-display-leading: 1;
}
.sec-dance {
  /* palette A "maple & plum" (user choice 2026-10-10, replaces B): rose on plum night; maple is a floor surface in dance.css only */
  --sec-deep: var(--dance-deep, #2A1024); --sec-deep-2: var(--dance-deep-2, #3A1833); --sec-accent: var(--dance-accent, #F3A6C3);
  --sec-ink: var(--dance-ink, #8E2160); --sec-on-ink: var(--dance-on-ink, #FFFFFF); --sec-tint: var(--dance-tint, #F8E8EF);
  --sec-paper: var(--dance-paper, #FBF6F0); --sec-mist: var(--dance-mist, #E3CFDC); --sec-sig: var(--dance-sig, #D66A98);
  --sec-display: "Syne", "Arial Black", sans-serif;
  --sec-display-weight: 700; --sec-display-case: uppercase; --sec-display-track: 0.01em; --sec-display-leading: .98;
}
.sec-visual, .sec-visual-arts {
  --sec-deep: var(--visual-deep, #17181B); --sec-deep-2: var(--visual-deep-2, #24262B); --sec-accent: var(--visual-accent, #9DB0FF);
  --sec-ink: var(--visual-ink, #2338C2); --sec-on-ink: var(--visual-on-ink, #FFFFFF); --sec-tint: var(--visual-tint, #ECEEF8);
  --sec-paper: var(--visual-paper, #F7F6F2); --sec-mist: var(--visual-mist, #C3C6CF); --sec-sig: var(--visual-sig, #5B72FF);
  --sec-tab-bg: var(--visual-tab-bg, #E9E6DE); --sec-tab-fg: var(--visual-tab-fg, #2338C2);
  --sec-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif;
  --sec-display-weight: 700; --sec-display-case: none; --sec-display-track: -0.025em; --sec-display-leading: 1;
}
.sec-craft, .sec-craft-traditional {
  --sec-deep: var(--craft-deep, #2B1A12); --sec-deep-2: var(--craft-deep-2, #3E271B); --sec-accent: var(--craft-accent, #E9A46A);
  --sec-ink: var(--craft-ink, #9A4B2C); --sec-on-ink: var(--craft-on-ink, #FFFFFF); --sec-tint: var(--craft-tint, #F2E3D3);
  --sec-paper: var(--craft-paper, #F8F1E6); --sec-mist: var(--craft-mist, #D6C4B4); --sec-sig: var(--craft-sig, #E08A4F);
  --sec-display: "Fraunces", Georgia, serif;
  --sec-display-weight: 600; --sec-display-case: none; --sec-display-track: -0.01em; --sec-display-leading: 1.02;
}
.sec-literary, .sec-literary-arts {
  --sec-deep: var(--literary-deep, #1F1B2E); --sec-deep-2: var(--literary-deep-2, #2C2742); --sec-accent: var(--literary-accent, #E8DCBC);
  --sec-ink: var(--literary-ink, #4B3A9E); --sec-on-ink: var(--literary-on-ink, #FFFFFF); --sec-tint: var(--literary-tint, #ECE6F4);
  --sec-paper: var(--literary-paper, #F4EEDF); --sec-mist: var(--literary-mist, #C7C1D6); --sec-sig: var(--literary-sig, #9A86E8);
  --sec-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --sec-display-weight: 400; --sec-display-case: none; --sec-display-track: -0.005em; --sec-display-leading: 1.04;
}
.sec-film, .sec-film-media {
  --sec-deep: var(--film-deep, #0C0E10); --sec-deep-2: var(--film-deep-2, #171B1F); --sec-accent: var(--film-accent, #67D8E6);
  --sec-ink: var(--film-ink, #0B6E7C); --sec-on-ink: var(--film-on-ink, #FFFFFF); --sec-tint: var(--film-tint, #DDF0F2);
  --sec-paper: var(--film-paper, #F4F5F4); --sec-mist: var(--film-mist, #B9C2C6); --sec-sig: var(--film-sig, #67D8E6);
  --sec-display: "Courier Prime", "Courier New", monospace;
  --sec-h2-size: clamp(1.75rem, 3.1vw, 2.6rem);
  --sec-display-weight: 700; --sec-display-case: uppercase; --sec-display-track: 0; --sec-display-leading: 1.08;
}
.sec-museums, .sec-museums-heritage {
  --sec-deep: var(--museums-deep, #2A2320); --sec-deep-2: var(--museums-deep-2, #3A302B); --sec-accent: var(--museums-accent, #D3D6D8);
  --sec-ink: var(--museums-ink, #6E4526); --sec-on-ink: var(--museums-on-ink, #FFFFFF); --sec-tint: var(--museums-tint, #ECE6DA);
  --sec-paper: var(--museums-paper, #F5F1E8); --sec-mist: var(--museums-mist, #CFC6BA); --sec-sig: var(--museums-sig, #C9CDD1);
  --sec-display: "Overpass", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --sec-display-weight: 800; --sec-display-case: uppercase; --sec-display-track: 0.02em; --sec-display-leading: 1;
}

/* ---------- 3. Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sec-paper, var(--paper));
  color: var(--ink);
  font: 400 17px/1.6 var(--font-ui);
  overflow-x: clip;                     /* belt-and-braces: no horizontal page scroll */
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--sec-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }   /* never the browser's default monospace */

/* focus: one ring everywhere, legible on light and dark.
   Two tones: the yellow ring (9:1+ on dark grounds) and a dark halo (about 12:1 on paper).
   The halo carries the 3:1 on light grounds, so it is !important: components that set
   their own box-shadow (cards, event cards, tiles) must not remove it (WCAG 1.4.11 / 2.4.7). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(17,18,20,.85) !important;
  border-radius: 2px;
}

/* ---------- 4. Utilities ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--focus); color: var(--ink); padding: 10px 14px; font-weight: 700; border-radius: var(--r-ctl);
}
.skip:focus { top: 12px; }
.mono { font-family: var(--font-mono); }
.on-dark { color: var(--night-text); }
.stack > * + * { margin-top: var(--s-4); }

/* small "sample" disclosure used on illustrative content */
.sample-note {
  display: inline-block;
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.on-deep .sample-note, .sample-note--dark { color: var(--sec-mist); }

/* ---------- 5. Motion control (no JS) ----------
   <input type="checkbox" id="motion-pause" class="motion-toggle"> comes right
   after the skip link at the top of <body>, before every animated block. Its labels: one in the footer (always there, also on
   phones) and a small chip that appears on hover over a moving object
   (.motion-chip, e.g. the spinning record). Checked = every animation pauses. */
.motion-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.motion-toggle:checked ~ * *,
.motion-toggle:checked ~ * *::before,
.motion-toggle:checked ~ * *::after { animation-play-state: paused !important; }
.motion-toggle:focus-visible ~ * .motion-label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* its label sits in the footer, so the focused checkbox shows itself at the top of the screen (WCAG 2.4.7) */
.motion-toggle:focus-visible { position: fixed; top: 16px; left: 16px; z-index: 100; width: 22px; height: 22px; opacity: 1; pointer-events: auto; accent-color: var(--ink); }
.motion-label .when-paused, .motion-chip .when-paused { display: none; }
.motion-toggle:checked ~ * .motion-label .when-paused,
.motion-toggle:checked ~ * .motion-chip .when-paused { display: inline; }
.motion-toggle:checked ~ * .motion-label .when-playing,
.motion-toggle:checked ~ * .motion-chip .when-playing { display: none; }
/* hover chip on a moving object: pauses the whole page */
.motion-chip {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  background: rgba(17,18,20,.86); border: 1px solid rgba(255,255,255,.55); color: #fff;
  font: 600 12.5px/1 var(--font-ui); cursor: pointer; opacity: 0; transition: opacity .2s; pointer-events: none;   /* invisible chip never covers the links below */
}
.motion-chip::before { content: ""; width: 9px; height: 10px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.motion-toggle:checked ~ * .motion-chip::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
:hover > .motion-chip, .motion-chip:hover { opacity: 1; pointer-events: auto; }
.motion-toggle:checked ~ * .motion-chip { opacity: 1; pointer-events: auto; }   /* stays visible while paused, so it can be resumed */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .motion-label, .motion-chip { display: none; }
}

/* ==========================================================================
   6. HEADER
   Row 1 (.hdr-bar): brand | Events · Towns · Resources · About | search | List your place
   Row 2 (.switcher): the eight art-form tabs (Pause motion moved to the footer),
   control pinned at the right end of the row (away from the main links).
   Each tab carries its own section class, so it shows that section's
   swatch; the current tab is filled with the section's --sec-deep and
   visually opens into the hero below (like a folder tab).
   <header class="site-header">
     <div class="hdr-bar wrap"> .brand  nav.hdr-util  form.hdr-search  a.btn-list </div>
     <div class="switcher"><div class="switcher-row wrap">
       <nav aria-label="Sections by art form"><ul> li.sec-SLUG > a </ul></nav>
       <label class="motion-label" for="motion-pause"> </label>
     </div></div>
   </header>
   ========================================================================== */
.site-header { background: var(--night); color: var(--night-text); position: relative; z-index: 10; }
.hdr-bar {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: 88px; padding-top: 18px; padding-bottom: 18px;
}

/* brand lockup: 2x4 mosaic mark (the eight section colors) + wordmark */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--night-text); text-decoration: none; flex: none; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 700 20px/1 var(--font-ui); letter-spacing: -.01em; }
.brand-by { font: 500 9.5px/1 var(--font-mono); letter-spacing: -.01em; word-spacing: -.3em; white-space: nowrap; text-transform: uppercase; color: var(--night-muted); margin-top: 6px; }

/* main links, set off from the brand by a hairline */
.hdr-util {
  display: flex; align-items: center; gap: 4px; flex: none;
  padding-left: var(--s-6); border-left: 1px solid #34353A;
}
.hdr-util > a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  color: var(--night-text); text-decoration: none; font: 600 16px/1 var(--font-ui); letter-spacing: .005em;
  border-radius: var(--r-ctl);
}
.hdr-util > a:hover { background: var(--night-2); text-decoration: underline; text-underline-offset: .3em; }
.hdr-util > a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--focus); text-decoration-thickness: 3px; text-underline-offset: .45em;
}
.hdr-util > .hdr-search-link { display: none; }

.hdr-search { flex: 1 1 240px; max-width: 360px; display: flex; margin-left: auto; }
.hdr-search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px;
  background: var(--night-2); color: var(--night-text); font-size: 15px;
  border: 1px solid #6B6C72; border-right: 0; border-radius: var(--r-ctl) 0 0 var(--r-ctl);   /* #6B6C72: 3.6:1 on --night, 3.3:1 on --night-2 */
}
.hdr-search input::placeholder { color: var(--night-muted); }
.hdr-search button {
  height: 42px; padding: 0 16px; border: 1px solid #6B6C72; background: #26272B; color: var(--night-text);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0; cursor: pointer; font-weight: 600; font-size: 14px;
}
.hdr-search button:hover { background: #303136; }
.hdr-bar > .btn-list { flex: none; min-height: 42px; padding: 0 18px; font-size: 15px; }

/* Pause motion lives in the footer (.ftr-legal) and on hover chips, not in the header (user, 2026-10-11). */
.motion-label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  font: 500 13px/1.3 var(--font-ui); color: var(--night-muted); cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
}
.motion-label:hover { color: var(--night-text); }
.motion-label::before {
  content: ""; width: 9px; height: 10px; flex: none; text-decoration: none;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
.motion-toggle:checked ~ * .motion-label::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* section switcher */
.switcher { background: var(--night); border-top: 1px solid #26272B; }
.switcher-row { display: flex; align-items: stretch; gap: var(--s-4); }
.switcher nav { flex: 1 1 auto; min-width: 0; }
.switcher ul { list-style: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 0 48px; }   /* a focused tab scrolls clear of the right-edge fade */
.switcher ul::-webkit-scrollbar { display: none; }
.switcher li { flex: none; }
.switcher a {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 15px 15px 14px; color: var(--night-text); text-decoration: none;
  font: 600 14.5px/1 var(--font-ui); white-space: nowrap;
  border-radius: 6px 6px 0 0;
}
.switcher a::before {                      /* the section's color bar */
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px;
  background: var(--sec-sig); border-radius: 0 0 2px 2px; transition: left .2s, right .2s;
}
.switcher .sw {                            /* two-tone swatch: deep + signature */
  width: 12px; height: 12px; border-radius: 2px; flex: none;
  background: linear-gradient(135deg, var(--sec-deep) 0 50%, var(--sec-sig) 50% 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
.switcher a:hover { background: var(--night-2); }
.switcher a:hover::before { left: 0; right: 0; }
.switcher a[aria-current="page"] { background: var(--sec-tab-bg, var(--sec-deep)); color: var(--sec-tab-fg, var(--sec-accent)); }
.switcher a[aria-current="page"]::before { left: 0; right: 0; height: 4px; }

/* when the tabs no longer fit, they scroll and fade out at the right edge */
@media (max-width: 1180px) {
  .switcher ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
}
/* header, mid widths: the search box gives way to a Search link */
@media (max-width: 1240px) {   /* (was 1080; Contact joined the main links, user 2026-10-11) */
  .hdr-search { display: none; }
  .hdr-util > .hdr-search-link { display: inline-flex; }
  .hdr-bar { gap: var(--s-5); }
  .hdr-bar > .btn-list { margin-left: auto; }
  .hdr-util { gap: 0; padding-left: var(--s-4); }
}
/* header, narrow: row 1 brand + List button; row 2 the main links */
@media (max-width: 1000px) {   /* (was 860) */
  .hdr-bar { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 14px; padding-bottom: 4px; }
  .brand { order: 0; }
  .hdr-bar > .btn-list { order: 1; margin-left: auto; }
  .hdr-util {
    order: 2; flex: 1 1 100%; margin-top: 12px; padding: 4px 0 0; gap: 0;
    border-left: 0; border-top: 1px solid #26272B; margin-inline: -10px;
  }
  .hdr-util > a { padding: 0 10px; min-height: 44px; font-size: 15px; }
  .hdr-util > a.hdr-search-link { margin-left: auto; }
}
@media (max-width: 760px) {
  .brand-by { display: none; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 18px; }
  .switcher a { padding: 13px 11px 12px; font-size: 13.5px; }
  .switcher-row { gap: 8px; }
}
@media (max-width: 420px) {
  .hdr-bar > .btn-list { padding: 0 12px; font-size: 13.5px; }
  .hdr-util > a { padding: 0 8px; font-size: 14.5px; }
  .hdr-util { margin-inline: -8px; }
}
@media (max-width: 359px) {
  /* smallest phones (320): the five links fit; if a translation grows, the row wraps instead of scrolling sideways */
  .hdr-util { flex-wrap: wrap; margin-inline: -6px; }
  .hdr-util > a { padding: 0 6px; font-size: 14px; }
}

/* phone navigation (user, 2026-10-11): the main links leave the top bar.
   A hamburger (and "More" in the bottom app bar) slides them in from the right;
   a fixed bottom app bar carries Home, Events, Towns, Search. CSS only: the
   #nav-open checkbox at the top of the header drives the drawer. */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger, .nav-close, .nav-scrim, .app-bar { display: none; }
.nav-more { display: none; }
@media (max-width: 1000px) {   /* phone navigation from 1000px (was 860) */
  .hdr-bar { flex-wrap: nowrap; gap: 0 10px; padding-bottom: 14px; }
  .nav-burger {
    order: 2; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin-right: -8px; border-radius: var(--r-ctl); color: var(--night-text); cursor: pointer;
  }
  .nav-burger:hover { background: var(--night-2); }
  .nav-burger svg, .app-bar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-toggle:focus-visible ~ .hdr-bar .nav-burger { outline: 3px solid var(--focus); outline-offset: 2px; }

  /* the drawer */
  .hdr-util {
    position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    margin: 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); gap: 2px;
    flex-direction: column; align-items: stretch; overflow-y: auto;
    background: var(--night); border: 0; border-left: 1px solid #34353A; box-shadow: -18px 0 40px rgba(0,0,0,.45);
    transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s;
  }
  .nav-toggle:checked ~ .hdr-bar .hdr-util { transform: none; visibility: visible; transition: transform .28s ease; }
  .hdr-util > a, .hdr-util > a.hdr-search-link {
    display: flex; margin: 0; min-height: 52px; padding: 0 12px; font-size: 19px; border-bottom: 1px solid #26272B; border-radius: 0;
  }
  .nav-close {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; padding: 0 4px 0 12px;
    font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); cursor: pointer;
  }
  .nav-x { position: relative; width: 44px; height: 44px; }
  .nav-x::before, .nav-x::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: var(--night-text); transform: rotate(45deg); }
  .nav-x::after { transform: rotate(-45deg); }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .28s; }
  .nav-toggle:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; }

  /* the bottom app bar */
  .app-bar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(17,18,20,.97); border-top: 1px solid #34353A; box-shadow: 0 -8px 24px rgba(0,0,0,.25);
  }
  .app-bar > a, .app-bar > label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px;
    color: var(--night-muted); text-decoration: none; font: 600 11.5px/1 var(--font-ui); cursor: pointer; border-radius: var(--r-ctl);
  }
  .app-bar > a:hover, .app-bar > label:hover { color: var(--night-text); background: var(--night-2); }
  .app-bar > a[aria-current="page"] { color: var(--night-text); }
  .app-bar > a[aria-current="page"] svg { stroke: var(--focus); }
  /* the art-form tabs and the List button live in the drawer too (user, 2026-10-11 batch 2) */
  .switcher, .hdr-bar > .btn-list { display: none; }
  .nav-burger { margin-left: auto; }
  .nav-more { display: block; margin-top: 18px; }
  .nav-h { padding: 0 12px 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--night-muted); }
  .nav-forms { list-style: none; }
  .nav-forms a {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px;
    color: var(--night-text); text-decoration: none; font: 600 16.5px/1 var(--font-ui); border-radius: var(--r-ctl);
  }
  .nav-forms .sw { width: 14px; height: 14px; border-radius: 3px; flex: none;
    background: linear-gradient(135deg, var(--sec-deep) 0 50%, var(--sec-sig) 50% 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
  .nav-forms a:hover { background: var(--night-2); }
  .nav-forms a[aria-current="page"] { background: var(--night-2); box-shadow: inset 3px 0 0 var(--sec-sig); }
  .nav-list { display: flex; justify-content: center; margin-top: 20px; min-height: 48px; font-size: 16px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  html { overflow-x: clip; }   /* the closed drawer waits just off the right edge */
}
@media (max-width: 420px) {
  .brand-name { font-size: 16.5px; }
  .brand { gap: 9px; }
}
@media (max-width: 379px) {
  .hdr-bar { gap: 0 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand { gap: 7px; }
  .brand-name { font-size: 15px; }
  .hdr-bar > .btn-list { padding: 0 10px; font-size: 13px; }
  .nav-burger { width: 40px; margin-right: -6px; }
}
@media print { .app-bar, .nav-burger, .hdr-util { display: none; } }

/* ==========================================================================
   7. LANDING BLOCKS (shared scaffolding for every section landing)
   <section class="block" id="..."> → .block-head (.eyebrow, h2.block-title,
   .block-intro, .block-more) → content.
   Modifiers: .block--deep (section dark ground), .block--tint, .block--card.
   ========================================================================== */
.block { padding-block: var(--block-y); position: relative; }
.block--deep { background: var(--sec-deep); color: var(--night-text); }
.block--tint { background: var(--sec-tint); }
.block--card { background: var(--card); }
.block--tight { padding-block: calc(var(--block-y) * .6); }

.block-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: var(--s-4) var(--s-7); margin-bottom: clamp(28px, 4vw, 44px);
}
.block-head > :not(.block-more) { grid-column: 1; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px/1.2 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--sec-ink); margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.block--deep .eyebrow, .on-deep .eyebrow { color: var(--sec-accent); }
.block-title {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight);
  text-transform: var(--sec-display-case); letter-spacing: var(--sec-display-track);
  line-height: var(--sec-display-leading); font-size: var(--sec-h2-size, var(--h2-size));
  color: var(--sec-deep); text-wrap: balance;
}
.block--deep .block-title { color: var(--night-text); }
.block-intro { margin-top: 12px; max-width: 60ch; color: var(--muted); font-size: 17px; }
.block--deep .block-intro { color: var(--sec-mist); }
.block-more {
  grid-column: 2; grid-row: 1 / span 3; align-self: end;
  font: 700 15px/1 var(--font-ui); white-space: nowrap; text-decoration: none;
  color: var(--sec-ink); border-bottom: 2px solid currentColor; padding-bottom: 4px;
}
.block-more::after { content: " \2192"; }
.block--deep .block-more { color: var(--sec-accent); }
/* .block-head--stacked: one column (title, intro, then the link), e.g. beside a tall object */
.block-head--stacked { grid-template-columns: minmax(0, 1fr); }
.block-head--stacked .block-more { grid-column: 1; grid-row: auto; justify-self: start; }

/* grids */
.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
/* .grid--rail: on phones a grid becomes a horizontal snap rail (scrolls inside
   itself; the page never scrolls sideways). Use it for card grids of 4+. */

/* ==========================================================================
   8. BUTTONS + LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-ctl);
  font: 700 15px/1 var(--font-ui); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s, background-color .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--sec-ink); color: var(--sec-on-ink); }
.btn--primary:hover { box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.btn--accent { background: var(--sec-accent); color: var(--sec-deep); }           /* dark grounds only */
.btn--ghost { background: transparent; color: var(--sec-ink); border-color: currentColor; }
.block--deep .btn--ghost, .on-deep .btn--ghost { color: var(--night-text); }
:is(.card, .ev, .on-light) .btn--ghost { color: var(--sec-ink); }   /* white panel inside a dark block */
.btn--light { background: var(--card); color: var(--ink); border-color: var(--card); }
.btn-list { background: var(--focus); color: #17181A; min-height: 38px; padding: 0 14px; font-size: 14px; }   /* header CTA */
.link-arrow { font-weight: 700; text-decoration: none; color: var(--sec-ink); }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { text-decoration: underline; }

/* ==========================================================================
   9. CHIPS
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font: 600 13px/1.2 var(--font-ui); color: var(--ink);
  background: var(--sec-tint); border: 1px solid transparent; text-decoration: none;
}
a.chip:hover { border-color: var(--sec-ink); }
.chip--outline { background: transparent; border-color: var(--line); }
.chip--on { background: var(--sec-deep); color: var(--sec-accent); }
.block--deep .chip, .on-deep .chip { background: var(--sec-deep-2); color: var(--night-text); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sec-sig); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }

/* filter row of link-chips above a grid ("kinds of place") */
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
.filter-row a {
  padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--sec-deep);
  color: var(--sec-deep); font: 600 14px/1 var(--font-ui); text-decoration: none; background: var(--card);
}
.filter-row a:hover, .filter-row a[aria-current="true"] { background: var(--sec-deep); color: var(--sec-accent); }

/* ==========================================================================
   10. CARD (place / organization / person). Identical in every section.
   <a class="card" href="listing.html">
     <div class="card-art" aria-hidden="true"> section-provided art </div>
     <div class="card-body">
       <p class="card-kicker">Kind · Town</p>
       <h3 class="card-title">Name</h3>
       <p class="card-facts">Useful facts</p>
       <ul class="chips">...</ul>
     </div>
   </a>
   A card may carry a different section class than the page
   (class="card sec-dance") and it will wear that section's colors.
   ========================================================================== */
.card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card-art {
  position: relative; height: 104px; overflow: hidden;
  background: var(--sec-deep); color: var(--sec-accent);
  border-bottom: 3px solid var(--sec-sig);
}
.card-art > svg:only-child { width: 100%; height: 100%; }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-kicker { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-ink); }
.card-title { font: 700 19px/1.22 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.card:hover .card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.card-facts { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.card .chips { margin-top: auto; padding-top: 8px; }
.card .chip { font-size: 12px; padding: 4px 9px; }
/* compact card (people & groups): art becomes a 56px monogram tile */
.card--compact { flex-direction: row; align-items: stretch; }
.card--compact .card-art { width: 76px; height: auto; min-height: 92px; flex: none; border-bottom: 0; border-right: 3px solid var(--sec-sig); }
.card--compact .card-body { padding: 14px 16px; }
.card--compact .card-title { font-size: 17px; }

/* ==========================================================================
   11. EVENT CARD. Identical in every section and on events.html.
   The date stub is a ticket: section deep, perforated edge.
   <a class="ev" href="event.html">
     <div class="ev-date"><span class="ev-dow">Sat</span><span class="ev-day">17</span><span class="ev-mon">Oct</span></div>
     <div class="ev-body">
       <p class="ev-kicker"><span class="ev-sec">Music</span> · Old-time</p>
       <h3 class="ev-title">Title</h3>
       <p class="ev-where">Place · Town</p>
       <p class="sample-note">Sample event — illustrative date</p>
     </div>
   </a>
   ========================================================================== */
.ev {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); min-width: 0;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease;
}
.ev:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ev-date {
  position: relative; background: var(--sec-deep); color: var(--night-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 8px; text-align: center;
}
.ev-date::after {                       /* perforation between stub and body */
  content: ""; position: absolute; right: -5px; top: 0; bottom: 0; width: 10px;
  background: radial-gradient(circle at 5px 50%, var(--card) 3.5px, transparent 4px) 0 0 / 10px 12px repeat-y;
}
.ev-dow { font: 500 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-mist); }
.ev-day { font: 800 36px/1 var(--font-ui); letter-spacing: -.02em; color: var(--sec-accent); margin: 5px 0 4px; }
.ev-mon { font: 600 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.ev-body { padding: 14px 16px 14px 22px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.ev-kicker { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-sec { color: var(--sec-ink); font-weight: 600; }
.ev-sec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sec-sig); margin-right: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.3); vertical-align: 0; }
.ev-title { font: 700 18px/1.25 var(--font-ui); letter-spacing: -.01em; }
.ev:hover .ev-title { text-decoration: underline; text-underline-offset: .15em; }
.ev-where { font-size: 14.5px; color: var(--muted); }
.ev .sample-note { margin-top: 2px; }

/* object sprite holder: <svg class="sp-sprite"> of <symbol id="o-SLUG"> (see _partials.html) */
.sp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-obj { display: block; width: 100%; height: 100%; }

/* ---------- 10b. Cross-section card art (.sp-art) ----------
   Used wherever a card from ANY section appears outside its own landing:
   home, events, search, listing, event, town. Shared fonts only, so a
   mixed page never loads eight display faces. A section's own landing may
   use its richer art (Music .m-art) for its own cards.
   <div class="card-art sp-art" aria-hidden="true">
     <span class="sp-art-lbl">Music · Asheville</span>
     <svg class="sp-art-obj" viewBox="0 0 64 64"><use href="#o-music"/></svg>
     <span class="sp-art-est">Est.<b>2002</b></span>
   </div>
   The #o-<slug> symbols come from the object sprite in _partials.html.
   The card's own sec-* class sets the ground and texture. */
.sp-art { background: var(--sec-deep); isolation: isolate; }
.sp-art::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.sp-art-lbl {
  position: absolute; z-index: 2; left: 16px; top: 15px; max-width: calc(100% - 140px);
  font: 500 10.5px/1.25 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-mist);
}
.card-art .sp-art-obj {                 /* beats shell's .card-art svg { width:100% } */
  position: absolute; right: 14px; top: 50%; width: 90px; height: 90px; translate: 0 -50%;
  transition: rotate .5s ease, translate .3s ease;
}
.card:hover .card-art .sp-art-obj { translate: 0 -54%; }
.card.sec-music:hover .card-art .sp-art-obj { rotate: 90deg; translate: 0 -50%; }
.sp-art-est {
  position: absolute; left: 16px; bottom: 12px; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%; rotate: -8deg;
  background: var(--sec-accent); color: var(--sec-deep);
  box-shadow: 0 0 0 3px var(--sec-deep), 0 0 0 4px var(--sec-accent);
  font: 500 8px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding-top: 5px;
}
.sp-art-est b { display: block; font: 700 15px/1 var(--font-ui); letter-spacing: -.01em; margin-top: 1px; }
.sp-art-kind {
  position: absolute; left: 16px; bottom: 14px;
  font: 600 12px/1 var(--font-ui); color: var(--sec-deep); background: var(--sec-accent);
  padding: 5px 8px; border-radius: 2px;
}

/* section textures (decorative; same tokens everywhere) */
.sec-music > .sp-art::before, .sec-music.sp-tex::before {
  background: radial-gradient(circle, rgba(244,235,218,.09) 1.2px, transparent 1.6px) 0 0 / 7px 7px; }
.sec-theater > .sp-art::before, .sec-theater.sp-tex::before {
  background:
    linear-gradient(180deg, #E2B86B 0 2px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(142,27,50,.42) 0 5px, rgba(92,14,31,.25) 5px 9px, transparent 9px 16px) left / 34px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(142,27,50,.42) 0 5px, rgba(92,14,31,.25) 5px 9px, transparent 9px 16px) right / 34px 100% no-repeat; }
.sec-dance > .sp-art::before, .sec-dance.sp-tex::before {
  background:
    linear-gradient(45deg, transparent 46%, rgba(244,224,77,.55) 46% 54%, transparent 54%) 62% 70% / 16px 16px no-repeat,
    linear-gradient(-45deg, transparent 46%, rgba(244,224,77,.55) 46% 54%, transparent 54%) 62% 70% / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.07) 63px 64px); }
.sec-visual > .sp-art::before, .sec-visual.sp-tex::before {
  background:
    linear-gradient(180deg, transparent 13px, rgba(195,198,207,.25) 13px 14px, transparent 14px),
    radial-gradient(ellipse 50% 90% at 78% 0%, rgba(157,176,255,.2), transparent 70%); }
.sec-craft > .sp-art::before, .sec-craft.sp-tex::before {
  background:
    radial-gradient(circle, rgba(233,164,106,.16) 1px, transparent 1.5px) 0 0 / 9px 11px,
    radial-gradient(circle, rgba(242,227,211,.10) 1px, transparent 1.5px) 4px 5px / 13px 9px;
  outline: 1.5px dashed rgba(233,164,106,.45); outline-offset: -7px; }
.sec-literary > .sp-art::before, .sec-literary.sp-tex::before {
  background:
    linear-gradient(90deg, transparent 30px, rgba(178,58,58,.5) 30px 31px, transparent 31px),
    repeating-linear-gradient(0deg, rgba(232,220,188,.08) 0 1px, transparent 1px 15px); }
.sec-film > .sp-art::before, .sec-film.sp-tex::before {
  background:
    repeating-linear-gradient(90deg, rgba(244,245,244,.22) 0 9px, transparent 9px 20px) 0 5px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(244,245,244,.22) 0 9px, transparent 9px 20px) 0 calc(100% - 5px) / 100% 6px no-repeat,
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(103,216,230,.16), transparent 70%); }
.sec-museums > .sp-art::before, .sec-museums.sp-tex::before {
  background:
    linear-gradient(180deg, transparent 70%, rgba(211,214,216,.16) 70% calc(70% + 1px), rgba(0,0,0,.18) calc(70% + 1px)),
    radial-gradient(ellipse 70% 60% at 30% 70%, rgba(211,214,216,.08), transparent 70%); }
.sec-home > .sp-art::before, .sec-home.sp-tex::before {
  background: radial-gradient(circle, rgba(166,227,176,.08) 1.2px, transparent 1.6px) 0 0 / 8px 8px; }
.sp-tex { position: relative; isolation: isolate; }
.sp-tex::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- 11b. Event card with an object panel (.ev--art) ----------
   Third column: a full-height panel in the event's section colors holding
   that section's object, like the art panel on the event page's ticket hero
   (<svg class="ev-obj"><use href="#o-slug"/></svg>, placed after .ev-body).
   The panel is 1.5x the date stub's width (stub 72-132px, panel
   144-264px, both scaling with the card). Up to 1000px wide screens the object
   moves into the date stub so the title keeps the width.
   Selectors start at .ev.ev--art (and the grid at :is(a, div, article)) so
   they outrank the older copy of this block in sections/shared-pages.css,
   which loads later on shared pages. Delete that copy and these still work. */
.ev.ev--art,
:is(a, div, article).ev.ev--art {
  position: relative;                   /* the panel is placed in its grid column absolutely */
  grid-template-columns: clamp(72px, 20% - 36px, 132px) minmax(0, 1fr) clamp(108px, 30% - 54px, 198px);   /* 1.5x the date stub (user, 2026-10-11) */
  min-height: 136px;
}
.ev.ev--art > .ev-date { grid-column: 1; grid-row: 1; padding: 18px 8px; }
.ev.ev--art .ev-dow { font-size: 12px; }
.ev.ev--art .ev-day { font-size: 42px; margin: 7px 0 6px; }
.ev.ev--art .ev-mon { font-size: 13px; }
.ev.ev--art > .ev-body { grid-column: 2; grid-row: 1; padding: 18px clamp(12px, 5%, 22px) 18px clamp(18px, 6%, 28px); gap: 5px; }
.ev.ev--art > .ev-obj {
  grid-column: 3 / 4; grid-row: 1 / 2; position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 16px 10px; border: 0; border-left: 4px solid var(--sec-sig); border-radius: 0;
  background: radial-gradient(circle at 50% 50%, var(--sec-deep-2), var(--sec-deep) 72%);
  rotate: none; transition: none;
}
.ev.ev--art > .ev-obj use { transform-box: fill-box; transform-origin: center; transition: transform .35s ease; }
.ev.ev--art:hover > .ev-obj { rotate: none; }
.ev.ev--art:hover > .ev-obj use { transform: rotate(-5deg) scale(1.04); }
.ev.ev--art.sec-music:hover > .ev-obj use { transform: rotate(60deg); }   /* the 45 turns */

/* events strip on a section landing: list of .ev, plus links */
.ev-list { display: grid; gap: 12px; }
.ev-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: var(--s-5); }

/* event card, narrower screens: the object sits in the date stub */
@media (max-width: 1000px) {
  .ev.ev--art,
  :is(a, div, article).ev.ev--art { grid-template-columns: 92px minmax(0, 1fr); min-height: 0; }
  .ev.ev--art > .ev-date { padding: 16px 8px 70px; }
  .ev.ev--art .ev-day { font-size: 38px; margin: 5px 0 4px; }
  .ev.ev--art > .ev-body { padding: 14px 16px 14px 22px; }
  .ev.ev--art > .ev-obj {
    grid-column: 1 / 2; inset: auto 0 14px; width: 46px; height: 46px; margin-inline: auto;
    padding: 0; border: 0; background: none; z-index: 1;
  }
}
@media (max-width: 420px) {
  .ev,
  .ev.ev--art,
  :is(a, div, article).ev.ev--art { grid-template-columns: 76px minmax(0, 1fr); }
  .ev-day, .ev.ev--art .ev-day { font-size: 30px; }
  .ev-body, .ev.ev--art > .ev-body { padding: 13px 14px 13px 18px; }
  .ev.ev--art > .ev-date { padding-bottom: 62px; }
  .ev.ev--art > .ev-obj { width: 40px; height: 40px; bottom: 12px; }
}

/* ==========================================================================
   12. SEARCH (hero, section-scoped) + FORMS
   <form class="search" action="search.html" role="search">
     <div class="search-field"><label>What</label><input></div>
     <div class="search-field"><label>Where</label><input></div>
     <button class="search-go">Search music</button>
   </form>
   <p class="search-alt"><a href="search.html">Search all NC arts</a></p>
   ========================================================================== */
.search {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  background: var(--card); color: var(--ink); border-radius: var(--r-ctl);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 14px 34px rgba(0,0,0,.28); overflow: hidden;
  max-width: 680px;
}
.search-field { display: flex; flex-direction: column; padding: 10px 16px 8px; min-width: 0; }
.search-field + .search-field { border-left: 1px solid var(--line); }
.search-field label { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.search-field input {
  border: 0; padding: 4px 0 2px; background: transparent; font-size: 16.5px; min-width: 0; width: 100%;
}
.search-field input::placeholder { color: #6A6E74; }      /* 5.0:1 on white */
.search-field input:focus { outline: none; }
.search-field:focus-within { box-shadow: inset 0 -3px 0 var(--sec-ink); }
.search-go {
  border: 0; background: var(--sec-ink); color: var(--sec-on-ink); cursor: pointer;
  padding: 0 24px; font: 700 16px/1 var(--font-ui); min-height: 60px;
}
.search-go:hover { filter: brightness(1.08); }
.search-alt { margin-top: 12px; font-size: 15px; }
.search-alt a { color: inherit; font-weight: 600; }
.search-alt a::after { content: " \2192"; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.req { font-weight: 400; color: var(--muted); }   /* visible "(required)" cue in a label (WCAG 3.3.2) */
.field input, .field select, .field textarea {
  min-height: 44px; padding: 8px 12px; border: 1.5px solid #8A8D92; border-radius: var(--r-ctl); background: var(--card);
}

/* ==========================================================================
   13. LIST-YOUR-PLACE block (every page has one, id="list-your-place";
   the header button jumps to it). Sections restyle its interior art only.
   ========================================================================== */
.list-cta { background: var(--sec-ink); color: #fff; }
.list-cta .eyebrow { color: #fff; }
.list-cta .block-title { color: #fff; }
.list-cta p { color: #fff; }
.list-cta .btn--ghost { color: #fff; }
.list-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-5); }

/* ==========================================================================
   14. FOOTER
   Brand blurb, then four link columns: Art forms · Plan · Resources ·
   The Foundation. Legal line below.
   ========================================================================== */
.site-footer { background: var(--night); color: var(--night-text); }
.ftr-bars { display: grid; grid-template-columns: repeat(9, 1fr); height: 6px; }
.ftr-bars i { background: var(--sec-sig); }
.ftr-main {
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6);
  padding-top: var(--s-8); padding-bottom: var(--s-7);
}
.ftr-about p { color: var(--night-muted); font-size: 15px; margin-top: var(--s-4); max-width: 34ch; }
.ftr-about .ftr-source { margin-top: var(--s-2, 8px); font-size: 13.5px; }
.ftr-col h2 { font: 500 12px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 16px; }
.ftr-col ul { list-style: none; display: grid; gap: 4px; }
.ftr-col a {
  color: var(--night-text); text-decoration: none; font-size: 15px; line-height: 1.3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px;
}
.ftr-col a:hover { text-decoration: underline; }
.ftr-col .sw { width: 9px; height: 9px; border-radius: 2px; background: var(--sec-sig); flex: none; }
.ftr-legal {
  border-top: 1px solid #2A2B2F; padding-top: 18px; padding-bottom: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px; color: var(--night-muted);
}
.ftr-legal a { color: var(--night-muted); }
@media (max-width: 1080px) {
  .ftr-main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .ftr-about { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ftr-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   15. PHOTO PLACEHOLDER (use sparingly; illustration carries the look)
   ========================================================================== */
.ph {
  position: relative; background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 10px, transparent 10px 20px), var(--sec-tint);
  border: 1px dashed #9A9690; display: grid; place-items: center; min-height: 180px;
}
.ph span { font: 500 12px/1.4 var(--font-mono); color: var(--muted); padding: 10px; text-align: center; }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .block-head { grid-template-columns: minmax(0, 1fr); }
  .block-more { grid-column: 1; grid-row: auto; justify-self: start; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid--rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  .grid--rail > * { scroll-snap-align: start; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .filter-row a { flex: none; }
  .search { grid-template-columns: minmax(0, 1fr); }
  .search-field + .search-field { border-left: 0; border-top: 1px solid var(--line); }
  .search-go { min-height: 52px; }
}
/* print: drop chrome */
@media print {
  .site-header, .switcher, .site-footer, .motion-toggle { display: none; }
}