/* NOLA.Show web components (nsc-). Plain CSS over the tokens in tokens.css / ns-tokens.css.
   One stylesheet for every page type. Phone first; one breakpoint at 800px.
   Themes: White (default) and Navy, by [data-theme] or by prefers-color-scheme.
   No JS is required for layout; behaviors (snap tab sync, menu, filters) are in main.js. */

/* ---------- Base ---------- */
:root { color-scheme: light; }
[data-theme="navy"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="white"]) { color-scheme: dark; } }
/* The hidden attribute wins over any component's display. */
[hidden] { display: none !important; }
.nsc-site {
  margin: 0;              /* the UA body margin; every component preview resets it (html,body{margin:0}) */
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
.nsc-site a { color: inherit; }
.nsc-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nsc-site :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nsc-icon { display: block; flex: 0 0 auto; }
.nsc-num { font-variant-numeric: tabular-nums; }

/* Page width. Listings and grids: 1200px. The desktop grid may widen to 1376px. Articles: 720px column. */
.nsc-page { max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.nsc-page--wide { max-width: 1376px; }
.nsc-col { max-width: 720px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* Early-morning highlight (shows starting midnight to 6am). Used inline in copy too. */
.nsc-early { background: var(--early-morning); color: var(--ink); padding: 0 4px; }

/* ---------- Logo: swaps by theme ---------- */
.nsc-logo { display: block; flex: 0 0 auto; }
.nsc-logo img { display: block; width: 152px; height: auto; }
.nsc-logo .nsc-logo--on-navy { display: none; }
[data-theme="navy"] .nsc-logo .nsc-logo--on-white { display: none; }
[data-theme="navy"] .nsc-logo .nsc-logo--on-navy { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="white"]) .nsc-logo .nsc-logo--on-white { display: none; }
  :root:not([data-theme="white"]) .nsc-logo .nsc-logo--on-navy { display: block; }
}

/* ---------- Pill: nav links, date pills, tabs, sub-nav ---------- */
.nsc-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--pill-line); border-radius: 9999px;
  background: var(--pill); color: var(--ink);
  font: inherit; font-size: 13px; line-height: 16px; font-weight: 700;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.nsc-pill--quiet { background: transparent; border-color: transparent; }
.nsc-pill[aria-pressed="true"],
.nsc-pill[aria-current="page"],
.nsc-pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.nsc-pill .nsc-icon { width: 14px; height: 14px; }
.nsc-pills {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 2px 16px;
}
.nsc-pills::-webkit-scrollbar { display: none; }
.nsc-pills--tight { gap: 4px; }
.nsc-pills__label {
  display: none; align-self: center; margin-right: 8px; flex: 0 0 auto;
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Segmented: the When control (desktop) ---------- */
.nsc-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9999px; background: var(--pill); }
.nsc-segmented button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 9999px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; line-height: 16px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.nsc-segmented button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- Field: date, search, venue combobox ---------- */
.nsc-field {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px; box-sizing: border-box;
  border-radius: 9999px; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-line);
  font-size: 13px; line-height: 16px; color: var(--ink);
}
.nsc-field:focus-within { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.nsc-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; color: inherit;
}
.nsc-field input::placeholder { color: var(--ink-muted); opacity: 1; }
.nsc-field__label { font-weight: 700; color: var(--ink-muted); }
.nsc-field .nsc-icon { width: 15px; height: 15px; color: var(--ink-muted); }
.nsc-field--date { gap: 6px; padding: 0 10px; }
.nsc-field--date input { width: 116px; }
.nsc-field--block { display: flex; height: 36px; font-size: 14px; }

/* ---------- Venue chip: an applied filter ---------- */
.nsc-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 2px 0 12px;
  border-radius: 9999px; background: var(--ink); color: var(--ground);
  font-size: 13px; line-height: 16px; font-weight: 700;
}
.nsc-chip button {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: inherit; cursor: pointer; border-radius: 9999px;
}
.nsc-chip .nsc-icon { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.nsc-header { border-bottom: 1px solid var(--hairline); background: var(--ground); }
.nsc-header__in {
  max-width: 1200px; margin: 0 auto; box-sizing: border-box;
  min-height: 60px; padding: 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
}
.nsc-nav { display: none; flex-wrap: wrap; gap: 4px; }
.nsc-nav .nsc-pill { text-decoration: none; }
.nsc-nav .nsc-pill:not([aria-current="page"]):hover { text-decoration: underline; text-underline-offset: 4px; }
.nsc-menu-btn {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.nsc-menu-btn .nsc-icon { width: 20px; height: 20px; }
.nsc-menu-btn .nsc-icon--close { display: none; }
.nsc-menu-btn[aria-expanded="true"] .nsc-icon--menu { display: none; }
.nsc-menu-btn[aria-expanded="true"] .nsc-icon--close { display: block; }

/* ---------- Menu: phone overlay under the header ---------- */
.nsc-menu {
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 20;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ground); color: var(--ink);
  padding: 8px 0 24px;
}
.nsc-menu[hidden] { display: none; }
.nsc-menu__group { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.nsc-menu__title {
  padding: 8px 16px 4px;
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted);
}
.nsc-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 16px; text-decoration: none; color: var(--ink);
  font-size: 18px; line-height: 24px; font-weight: 700;
}
.nsc-menu__item--sub { font-size: 16px; font-weight: 400; }
.nsc-menu__item > span { display: flex; align-items: center; gap: 10px; }
.nsc-menu__item[aria-current="page"] > span::before {
  content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--ink);
}
.nsc-menu__item .nsc-icon { width: 16px; height: 16px; color: var(--ink-muted); }
.nsc-menu__apps { padding: 16px 16px 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.nsc-menu__apps a { text-decoration: underline; text-underline-offset: 3px; }
body.nsc-menu-open { overflow: hidden; }

/* ---------- Footer ---------- */
.nsc-footer { border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.nsc-footer__in { max-width: 1200px; margin: 0 auto; padding: 24px 16px 32px; box-sizing: border-box; }
.nsc-footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page intro: H1 and lede ---------- */
.nsc-intro { padding: 20px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.nsc-intro h1 {
  margin: 0; font-family: var(--font-display);
  font-size: 32px; line-height: 1.05; font-weight: 900; letter-spacing: -0.04em;
}
.nsc-intro p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 820px; }
.nsc-note { margin: 0; padding: 8px 0 32px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nsc-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Filters toolbar ---------- */
.nsc-filters { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.nsc-filters__desktop { display: none; }
.nsc-filters__desktop--open { display: contents; }   /* the phone Dates pill opened it (main.js) */
.nsc-filters__venue { display: flex; align-items: center; gap: 8px; }
.nsc-filters__venue > .nsc-label,
.nsc-label { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Listing: day blocks and rows (one markup, two layouts) ---------- */
.nsc-listing { display: flex; flex-direction: column; gap: 16px; margin: 0 -4px; }
.nsc-listing__head { display: none; }
.nsc-day { background: var(--surface-block); border-radius: 8px; padding: 0 4px 4px; }
.nsc-day__head {
  position: sticky; top: 0; z-index: 1;
  margin: 0; height: 44px; box-sizing: border-box; padding: 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-block); border-radius: 8px 8px 0 0;
  font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 900; letter-spacing: -0.03em;
}
.nsc-day__count {
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.nsc-day__rows { border-radius: 6px; overflow: hidden; }

.nsc-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 36px;
  grid-template-areas: "time title more" "time venue more" "time price more";
  column-gap: 10px; align-items: start;
  padding: 10px 0 10px 8px;
  background: var(--surface-row);
}
.nsc-row:nth-child(even) { background: var(--surface-row-alt); }
.nsc-row--early, .nsc-row--early:nth-child(even) { background: var(--early-morning); }
.nsc-row__date { display: none; grid-area: date; }
.nsc-row__time {
  grid-area: time; font-size: 14px; line-height: 24px; font-weight: 700; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.nsc-row__title { grid-area: title; font-size: 16px; line-height: 24px; font-weight: 700; min-width: 0; }
.nsc-row__venue { grid-area: venue; margin-top: 1px; font-size: 14px; line-height: 20px; color: var(--ink-muted); min-width: 0; }
.nsc-row__venue a { color: inherit; text-decoration: none; }
.nsc-row__venue a:hover { text-decoration: underline; }
.nsc-row__price { grid-area: price; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.nsc-row__price:empty { display: none; }
.nsc-row__door { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; white-space: normal; }
.nsc-row__more { grid-area: more; display: flex; justify-content: flex-end; }
.nsc-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 44px; margin-top: -10px; color: var(--ink);
}
.nsc-more .nsc-icon { width: 20px; height: 20px; }

/* ---------- Snap group: Grid and Cubes columns ----------
   A .nsc-snap wraps the tabs and the scroller and is the size container.
   Column count comes from the container width, not the device:
     fit  = how many columns of at least --min fit beside the pinned column
     cols = min(--count, fit); each column = min(--max, (width - pin - peek) / cols)
   --count (nights or stages) is set inline on .nsc-snap with a matching data-count.
   When every column fits, the tabs hide and the header row sticks to the page.
   Otherwise the scroller snaps one column at a time, a 32px sliver of the next
   column shows at the right edge (--peek), and the sticky tabs show which
   columns are in view (nsc.js). */
.nsc-snap { container: nsc-snap / inline-size; }
.nsc-snap[data-count="1"] .nsc-tabs { display: none; }
.nsc-snap[data-count="1"] .nsc-grid,
.nsc-snap[data-count="1"] .nsc-cubes { --peek: 0px; overflow-x: clip; scroll-snap-type: none; }

/* Tabs: sticky night or stage switcher; ‹ › step buttons on pointer devices. */
.nsc-tabs {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  margin: 0 -16px 8px; padding: 8px 16px;
  background: var(--ground); border-bottom: 1px solid var(--grid-line);
}
.nsc-tabs__list { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nsc-tabs__list::-webkit-scrollbar { display: none; }
.nsc-tabs--even .nsc-tabs__list { display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); }
.nsc-tabs--even .nsc-pill { padding: 0 4px; }
.nsc-tabs__step {
  display: none; flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--pill-line); border-radius: 9999px; background: var(--pill); color: var(--ink); cursor: pointer;
}
.nsc-tabs__step:disabled { opacity: 0.4; cursor: default; }
.nsc-tabs__step .nsc-icon { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .nsc-tabs__step { display: inline-flex; } }

/* ---------- Grid: Jazzfest night grids (a table) ---------- */
.nsc-grid {
  --pin: 124px; --min: 180px; --max: 320px; --fit: 1;
  --cols: min(var(--count, 4), var(--fit));
  --peek: 32px;   /* a sliver of the next column while any are hidden */
  --col: min(var(--max), (100cqw - var(--pin) - var(--peek)) / var(--cols));
  width: fit-content; max-width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pin);
  overscroll-behavior-x: contain; scrollbar-width: none;
  outline: 1px solid var(--grid-line); border-radius: 8px;
}
.nsc-grid::-webkit-scrollbar { display: none; }
.nsc-grid table {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: calc(var(--pin) + var(--count, 4) * var(--col));
  font-size: 14px; line-height: 20px;
}
.nsc-grid th, .nsc-grid td {
  box-sizing: border-box; vertical-align: top; text-align: left;
  border-bottom: 1px solid var(--grid-line); border-right: 1px solid var(--grid-line);
}
/* Sticky to the page whenever the scroller clips instead of scrolling (every column fits). */
.nsc-grid thead th { position: sticky; top: 0; padding: 10px 12px; background: var(--surface-head); z-index: 2; }
.nsc-grid__corner,
.nsc-grid__venue { position: sticky; left: 0; z-index: 1; width: var(--pin); }
.nsc-grid thead .nsc-grid__corner { z-index: 3; }
.nsc-grid__corner { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); }
.nsc-grid__night { width: var(--col); scroll-snap-align: start; scroll-snap-stop: always; }
.nsc-grid__night-short { display: block; font-size: 15px; line-height: 16px; font-weight: 900; letter-spacing: -0.02em; }
.nsc-grid__night-long { display: none; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-muted); }
.nsc-grid__venue { padding: 12px; background: var(--ground); }
.nsc-grid__venue-name { display: block; font-size: 14px; line-height: 18px; font-weight: 700; }
.nsc-grid__venue-addr { display: block; margin-top: 4px; font-size: 11px; line-height: 15px; font-weight: 400; color: var(--ink-muted); }
.nsc-grid__cell { padding: 10px 12px; background: var(--ground); }
.nsc-grid__cell--empty { background: var(--surface-head); }
.nsc-grid__gigs { display: flex; flex-direction: column; gap: 10px; }
/* The venue column widens once all four nights can sit beside it. */
@container nsc-snap (min-width: 920px) {
  .nsc-grid { --pin: 200px; }
  .nsc-grid__corner { padding: 14px; }
  .nsc-grid__venue { padding: 12px 14px; }
  .nsc-grid__venue-name { font-size: 15px; line-height: 20px; }
  .nsc-grid__venue-addr { font-size: 12px; line-height: 16px; }
}
@container nsc-snap (min-width: 516px) { .nsc-grid { --fit: 2; } }
@container nsc-snap (min-width: 696px) { .nsc-grid { --fit: 3; } }
@container nsc-snap (min-width: 952px) { .nsc-grid { --fit: 4; } }
@container nsc-snap (min-width: 1132px) { .nsc-grid { --fit: 5; } }
@container nsc-snap (min-width: 1312px) { .nsc-grid { --fit: 6; } }
@container nsc-snap (min-width: 1492px) { .nsc-grid { --fit: 7; } }
@container nsc-snap (min-width: 484px) { .nsc-snap--grid[data-count="2"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="2"] .nsc-grid { --fit: 2; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 664px) { .nsc-snap--grid[data-count="3"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="3"] .nsc-grid { --fit: 3; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 920px) { .nsc-snap--grid[data-count="4"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="4"] .nsc-grid { --fit: 4; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1100px) { .nsc-snap--grid[data-count="5"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="5"] .nsc-grid { --fit: 5; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1280px) { .nsc-snap--grid[data-count="6"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="6"] .nsc-grid { --fit: 6; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1460px) { .nsc-snap--grid[data-count="7"] .nsc-tabs { display: none; } .nsc-snap--grid[data-count="7"] .nsc-grid { --fit: 7; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }

/* Gig: one show in a grid cell. Every gig is a box; linked gigs carry the info icon. */
.nsc-gig {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 4px; background: var(--surface-block);
  color: inherit; text-decoration: none;
}
.nsc-gig--early { background: var(--early-morning); }
.nsc-gig__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.nsc-gig__time { font-weight: 700; }
.nsc-gig__price { color: var(--ink-muted); }
.nsc-gig__meta .nsc-icon { margin-left: auto; width: 16px; height: 16px; }
.nsc-gig__act { font-size: 15px; line-height: 22px; font-weight: 700; }
a.nsc-gig:hover .nsc-gig__act { text-decoration: underline; }

/* ---------- Cubes: the fest-day stage schedule ---------- */
.nsc-cubes {
  --slot: 10px;             /* one 5-minute slot, at every width */
  --hour: calc(12 * var(--slot));
  --pin: 52px; --min: 160px; --max: 320px; --fit: 1;
  --cols: min(var(--count, 5), var(--fit));
  --peek: 32px;   /* a sliver of the next column while any are hidden */
  --col: min(var(--max), (100cqw - var(--pin) - var(--peek)) / var(--cols));
  width: fit-content; max-width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--pin);
  overscroll-behavior-x: contain; scrollbar-width: none;
  outline: 1px solid var(--grid-line); border-radius: 8px;
}
.nsc-cubes::-webkit-scrollbar { display: none; }
.nsc-cubes__grid {
  display: grid;
  grid-template-columns: var(--pin) repeat(var(--count, 5), var(--col));
  width: calc(var(--pin) + var(--count, 5) * var(--col));
}
.nsc-cubes__corner,
.nsc-cubes__stage {
  padding: 9px 8px; background: var(--surface-head); border-bottom: 1px solid var(--grid-line);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
}
.nsc-cubes__corner { left: 0; z-index: 3; }
.nsc-cubes__stage { scroll-snap-align: start; scroll-snap-stop: always; overflow-wrap: anywhere; }
.nsc-cubes__times,
.nsc-cubes__col {
  position: relative; height: calc(var(--slots, 60) * var(--slot));
  background-image: repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--hour));
}
.nsc-cubes__times { position: sticky; left: 0; z-index: 2; background-color: var(--ground); }
.nsc-cubes__hour {
  position: absolute; left: 6px; top: calc(var(--i) * var(--hour) + 4px);
  font-size: 11px; line-height: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nsc-cubes__hour--long { display: none; }
.nsc-set {
  position: absolute; left: 3px; right: 3px;
  top: calc(var(--start) * var(--slot) + 2px);
  height: calc(var(--len) * var(--slot) - 3px);
  box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: 4px; background: var(--surface-block);
  color: inherit; text-decoration: none;
}
.nsc-set:hover { background: var(--surface-hover); }
/* One column: the large set type. Two or more: the compact set type. */
.nsc-set__name { font-size: 14px; line-height: 18px; font-weight: 700; }
.nsc-set__time { font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@container nsc-snap (min-width: 372px) {
  .nsc-set { left: 2px; right: 2px; padding: 6px 8px; }
  .nsc-set__name { font-size: 12px; line-height: 16px; }
  .nsc-set__time { font-size: 11px; line-height: 14px; }
}
@container nsc-snap (min-width: 404px) { .nsc-cubes { --fit: 2; } }
@container nsc-snap (min-width: 564px) { .nsc-cubes { --fit: 3; } }
@container nsc-snap (min-width: 724px) { .nsc-cubes { --fit: 4; } }
@container nsc-snap (min-width: 896px) { .nsc-cubes { --fit: 5; } }
@container nsc-snap (min-width: 1056px) { .nsc-cubes { --fit: 6; } }
@container nsc-snap (min-width: 1216px) { .nsc-cubes { --fit: 7; } }
@container nsc-snap (min-width: 1376px) { .nsc-cubes { --fit: 8; } }
@container nsc-snap (min-width: 1536px) { .nsc-cubes { --fit: 9; } }
@container nsc-snap (min-width: 1696px) { .nsc-cubes { --fit: 10; } }
@container nsc-snap (min-width: 372px) { .nsc-snap--cubes[data-count="2"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="2"] .nsc-cubes { --fit: 2; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 532px) { .nsc-snap--cubes[data-count="3"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="3"] .nsc-cubes { --fit: 3; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 692px) { .nsc-snap--cubes[data-count="4"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="4"] .nsc-cubes { --fit: 4; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 864px) { .nsc-snap--cubes[data-count="5"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="5"] .nsc-cubes { --fit: 5; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1024px) { .nsc-snap--cubes[data-count="6"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="6"] .nsc-cubes { --fit: 6; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1184px) { .nsc-snap--cubes[data-count="7"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="7"] .nsc-cubes { --fit: 7; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1344px) { .nsc-snap--cubes[data-count="8"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="8"] .nsc-cubes { --fit: 8; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1504px) { .nsc-snap--cubes[data-count="9"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="9"] .nsc-cubes { --fit: 9; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
@container nsc-snap (min-width: 1664px) { .nsc-snap--cubes[data-count="10"] .nsc-tabs { display: none; } .nsc-snap--cubes[data-count="10"] .nsc-cubes { --fit: 10; --peek: 0px; overflow-x: clip; scroll-snap-type: none; } }
.nsc-cubes-head { display: flex; flex-direction: column; gap: 10px; padding: 24px 0 12px; }
.nsc-cubes-head h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.05; font-weight: 900; letter-spacing: -0.04em; }
.nsc-cubes-head p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Search: hits are outlined, everything else dims (cubes.js). */
.nsc-set--dim { opacity: 0.35; }
.nsc-set--hit { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
/* Set overlay: name, time and stage beside the tapped set (cubes.js positions it). */
.nsc-overlay-backdrop { position: fixed; inset: 0; z-index: 30; }
.nsc-overlay {
  position: fixed; z-index: 31; width: 300px; box-sizing: border-box; padding: 12px 14px;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
}
.nsc-overlay__name { font-size: 16px; line-height: 24px; font-weight: 700; }
.nsc-overlay__detail, .nsc-overlay__stage { font-size: 14px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Wide band: the cubes break out of the article column to 1200px. */
.nsc-cubes-wide { max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* ---------- DatesTable: a festival's dates, on the body scale ---------- */
.nsc-dates { width: 100%; border-collapse: collapse; margin: 0; }
.nsc-dates th, .nsc-dates td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.nsc-dates th { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 2px solid var(--ink); }
.nsc-dates td { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }
.nsc-dates td strong { font-weight: 700; }
.nsc-dates td a { font-weight: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nsc-dates td:last-child a, .nsc-dates td:last-child span { white-space: nowrap; }
.nsc-dates__link { margin-top: var(--space-6); font-size: 16px; line-height: 24px; font-weight: 700; }
.nsc-dates__link a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Article ---------- */
.nsc-article__head { padding: 32px 0 8px; display: flex; flex-direction: column; gap: 14px; }
.nsc-article__head h1 {
  margin: 0; font-family: var(--font-display);
  font-size: 32px; line-height: 1.05; font-weight: 900; letter-spacing: -0.05em;
}
.nsc-article__lede { margin: 0; font-size: 18px; line-height: 26px; color: var(--ink-muted); }
.nsc-prose { padding: 16px 0 32px; font-size: 17px; line-height: 28px; }
.nsc-prose > * { margin: 0; }
.nsc-prose > * + * { margin-top: 18px; }
.nsc-prose > h2 { margin-top: 48px; font-family: var(--font-display); font-size: 32px; line-height: 1.05; font-weight: 900; letter-spacing: -0.04em; }
.nsc-prose > h2:first-child { margin-top: 0; }
.nsc-prose > h3 { font-size: 20px; line-height: 26px; font-weight: 700; }
.nsc-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Section badge: a quiet label pill that opens a run of entries. */
.nsc-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 9999px; background: var(--surface-block);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.nsc-prose > .nsc-badge-row { margin-top: 26px; }

/* Entry: a venue write-up or an FAQ item, separated by a hairline. */
.nsc-entry { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.nsc-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.nsc-entry__name { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; }
.nsc-entry__addr { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nsc-entry p { margin: 0; }
.nsc-entry--compact { gap: 2px; padding: 12px 0 0; }
.nsc-entry--compact .nsc-entry__name { font-size: 17px; line-height: 26px; }
.nsc-entry--compact p { font-size: 16px; line-height: 26px; }

/* Tonight: the live list inside an article (single column at every width). */
.nsc-tonight { background: var(--surface-block); border-radius: 8px; padding: 0 4px 4px; }
.nsc-tonight__head {
  padding: 16px 12px 12px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
}
.nsc-tonight__head h2 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 900; letter-spacing: -0.04em; }
.nsc-tonight__date { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nsc-tonight__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nsc-tonight__venue { padding: 12px 14px; background: var(--surface-raised); border-radius: 4px; }
.nsc-tonight__venue h3 {
  margin: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-muted);
}
.nsc-tonight__venue h3 a { text-decoration: none; }
.nsc-tonight__venue h3 a:hover { text-decoration: underline; }
.nsc-tonight__show { display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 10px; padding: 3px 0; }
.nsc-tonight__time { font-size: 14px; line-height: 24px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.nsc-tonight__name { font-size: 16px; line-height: 24px; font-weight: 700; }
.nsc-tonight__name a { text-decoration: none; }
.nsc-tonight__name a:hover { text-decoration: underline; }
.nsc-tonight__price { display: block; font-size: 14px; line-height: 20px; font-weight: 400; }

/* App card with the official store badges. */
.nsc-appcard { background: var(--surface-block); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.nsc-appcard h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 900; letter-spacing: -0.02em; }
.nsc-appcard p { margin: 0; font-size: 16px; line-height: 24px; }
.nsc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.nsc-badges a { display: block; }
.nsc-badges a[hidden] { display: none; }
.nsc-badges img { display: block; height: 40px; width: auto; }

/* ---------- Desktop: 800px and up ---------- */
@media (min-width: 800px) {
  .nsc-page, .nsc-col { padding: 0 32px; }
  .nsc-pills { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .nsc-pills__label { display: block; }

  .nsc-header__in { padding: 16px 32px; }
  .nsc-logo img { width: 180px; }
  .nsc-nav { display: flex; }
  .nsc-menu-btn, .nsc-menu { display: none; }
  .nsc-footer__in { padding: 24px 32px; }

  .nsc-intro { padding: 28px 0 18px; gap: 18px; }
  .nsc-intro h1 { font-size: 48px; line-height: 1; letter-spacing: -0.05em; }
  .nsc-intro p { font-size: 16px; line-height: 24px; }

  .nsc-filters { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 18px; }
  .nsc-filters__phone { display: none; }
  .nsc-filters__desktop { display: contents; }
  .nsc-filters__search { margin-left: auto; width: 260px; }

  .nsc-listing { gap: 14px; margin: 0; }
  .nsc-listing__head {
    display: grid; padding: 0 4px;
    grid-template-columns: 96px 88px minmax(0, 3fr) minmax(0, 2fr) 80px 48px;
    font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-muted);
  }
  .nsc-listing__head > span { padding: 0 12px; text-align: left; }
  .nsc-listing__head > .nsc-right { text-align: right; }
  .nsc-day__head { height: auto; padding: 10px 12px; align-items: baseline; }
  .nsc-day__rows { font-size: 14px; line-height: 20px; }
  .nsc-row {
    grid-template-columns: 96px 88px minmax(0, 3fr) minmax(0, 2fr) 80px 48px;
    grid-template-areas: "date time title venue price more";
    align-items: center; min-height: 42px; padding: 0; column-gap: 0;
  }
  .nsc-row > * { padding: 9px 12px; }
  .nsc-row__date { display: block; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 20px; }
  .nsc-row__time { font-size: 14px; line-height: 20px; }
  .nsc-row__title { font-size: 15px; line-height: 22px; }
  .nsc-row__venue { margin-top: 0; color: var(--ink); }
  .nsc-row__price, .nsc-row__price:empty { display: block; text-align: right; white-space: nowrap; }
  .nsc-row__more { padding: 0 4px 0 0; }
  .nsc-more { width: 40px; height: 40px; margin-top: 0; }

  .nsc-grid { margin-top: 8px; }
  .nsc-grid__cell { padding: 12px 14px; }
  .nsc-grid thead th { padding: 12px 14px; border-bottom-color: var(--hairline); }
  .nsc-grid__night-short { font-size: 20px; line-height: 24px; letter-spacing: -0.03em; }
  .nsc-grid__night-long { display: block; }
  .nsc-grid__gigs { gap: 12px; }
  .nsc-gig__meta { gap: 8px; }
  .nsc-tabs { margin: 0 0 8px; padding: 8px 0; }

  .nsc-cubes { --pin: 64px; }
  .nsc-cubes__hour { left: 8px; }
  .nsc-cubes__hour--short { display: none; }
  .nsc-cubes__hour--long { display: block; }
  .nsc-cubes-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding: 28px 0 14px; }
  .nsc-cubes-head h2 { font-size: 32px; }
  .nsc-cubes-head .nsc-field { width: 280px; }
  .nsc-cubes-wide { padding: 0 32px; }

  .nsc-article__head h1 { font-size: 56px; line-height: 1; }
}