/* Light 70s beach theme. Tweak the tokens below to re-skin. */
:root {
  --bg: #f3e7cd;
  --surface: #ffffff;
  --ink: #3d2b1f;
  --muted: #8a7766;
  --orange: #c4532b;
  --mustard: #e0a526;
  --teal: #2f7f7a;
  --sand: #ead9b6;
  /* The five 70s bands, inner (pale) to outer (brown). The header stripe stacks them outer-first. */
  --band-1: #e8c98a;
  --band-2: #ecb237;
  --band-3: #eb8c38;
  --band-4: #ec6236;
  --band-5: #7d332b;
  --bands-h: 66px; /* 5 bands x 10px + 4 gaps x 4px; must match shared/_stripe_corner and _stripe_turn */
  --band-stops: var(--band-5) 0 10px, transparent 10px 14px, var(--band-4) 14px 24px, transparent 24px 28px,
    var(--band-3) 28px 38px, transparent 38px 42px, var(--band-2) 42px 52px, transparent 52px 56px, var(--band-1) 56px 66px;
  --bands: linear-gradient(to bottom, var(--band-stops));
  --radius: 14px;
  --display: "Shrikhand", Georgia, serif;
  --body: "Work Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--body); }
/* Inline links: a mustard highlighter stroke that floods up behind the text on hover. */
a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--mustard), var(--mustard)) 0 100% / 100% 0.3em no-repeat;
  transition: background-size 0.18s ease-out;
}
a:hover { background-size: 100% 100%; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; display: block; }
h1, h2, h3, .brand { font-family: var(--display); font-weight: 400; line-height: 1.15; }
h1 { color: var(--orange); }
h2 { margin-top: 2.5rem; }
h3 { margin: 0.25rem 0; }
h3 a, h1 a { color: inherit; font-weight: inherit; background-size: 100% 0; background-image: linear-gradient(var(--sand), var(--sand)); }
h3 a:hover, h1 a:hover { background-size: 100% 0.45em; }

/* The retro stripe */
.site-header {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  margin-bottom: calc(var(--bands-h) + 2rem); position: relative;
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--bands-h); background: var(--bands); }
.brand { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--orange); background: none; }
.brand span { color: var(--teal); }
nav { display: flex; gap: 1.25rem; }
nav a { background: none; padding: 0.3rem 0.8rem; border-radius: 999px; border: 2px solid transparent; }
nav a:hover { border-color: var(--ink); background: var(--sand); }
/* Phones/tablets: the nav becomes a drawer from the right, toggled by drawer_controller.js. */
.menu-toggle, .menu-close { display: none; }
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; padding: 0.5rem; line-height: 0; }
  .menu-close { display: block; align-self: flex-end; margin-bottom: 1rem; }
  .site-nav {
    position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(18rem, 85vw); overflow-y: auto;
    flex-direction: column; gap: 0.25rem; padding: 1.25rem; background: var(--surface); border-left: 2px solid var(--ink);
    box-shadow: -6px 0 0 var(--band-4), -12px 0 0 var(--band-2);
    transform: translateX(calc(100% + 12px)); visibility: hidden; transition: transform 0.2s, visibility 0.2s;
  }
  .nav-open .site-nav { transform: none; visibility: visible; }
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 3rem; }

.card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--sand); }
.card > img:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-body { padding: 1rem 1.25rem; }
/* One continuous stripe framing the public site on wide screens: across the top, a loop in the corner,
   down the left rail, and round the corner into the footer. Phones get the plain header/footer stripes. */
.stripe-art { display: none; position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.stripe-art path { fill: none; stroke-width: 10; }
.stripe-art .band-1 { stroke: var(--band-1); }
.stripe-art .band-2 { stroke: var(--band-2); }
.stripe-art .band-3 { stroke: var(--band-3); }
.stripe-art .band-4 { stroke: var(--band-4); }
.stripe-art .band-5 { stroke: var(--band-5); }
@media (min-width: 900px) {
  .framed .stripe-art { display: block; }
  /* Pinned to the header's bottom (rail starts 98px below it), so a header that wraps taller can't break the stripe. */
  .framed .stripe-corner { height: 206px; top: auto; bottom: -98px; }
  .framed .stripe-turn { height: 81px; }
  .framed .site-header::after, .framed .site-footer::before { display: none; }
  /* Header text sits right of the loop, above the runs (which start 108px down). */
  .framed .site-header { min-height: 108px; padding-left: 202px; margin-bottom: 98px; }
  .framed .rail { position: relative; padding-left: 202px; }
  .framed .rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 108px; width: var(--bands-h); background: linear-gradient(to left, var(--band-stops)); }
  .framed .site-footer { margin-top: 0; padding-top: calc(81px + 2rem); }
}
.hero-stage { display: grid; gap: 1.5rem 2.5rem; align-items: start; }
.hero-stage:has(.hero-pic) { grid-template-columns: minmax(0, 36rem) minmax(240px, 1fr); }
.hero-pic { grid-column: 2; grid-row: 1; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; justify-self: start; align-self: start;
  border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--band-2), 12px 12px 0 var(--band-4); }
@media (max-width: 760px) {
  .hero-stage:has(.hero-pic) { grid-template-columns: 1fr; }
  .hero-pic { grid-column: 1; justify-self: start; max-width: calc(100% - 12px); }
}
.card-pic { width: 100%; aspect-ratio: 600 / 340; object-fit: cover; object-position: top left; }
.wide-pic { width: 100%; aspect-ratio: 12 / 5; object-fit: cover; object-position: top left; }
.hero-copy { max-width: 36rem; }
.hero-copy h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0.25rem 0 0.5rem; }
.hero-copy .eyebrow { color: var(--band-5); }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.eyebrow, .when { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; color: var(--orange); margin: 0; }
.meta, .muted { color: var(--muted); margin: 0.25rem 0; }
.tag { display: inline-block; background: var(--sand); border-radius: 999px; padding: 0.1rem 0.65rem; font-size: 0.8rem; margin-right: 0.35rem; }
.tag-sponsored { background: var(--mustard); }
/* Venue / artist chips: small tags you can tap, each marked by what it is. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2rem 0.75rem 0.2rem 0.55rem;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--surface);
  font-size: 0.85rem; line-height: 1.3; transition: background-color 0.15s, color 0.15s;
}
.chip { max-width: 100%; white-space: nowrap; }
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip::before { flex-shrink: 0; }
.chip-venue::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); }
.chip-artist::before { content: "♪"; color: var(--teal); font-size: 1.05em; line-height: 1; }
.chip-venue:hover { background: var(--orange); color: #fff; }
.chip-artist:hover { background: var(--teal); color: #fff; }
.chip-venue:hover::before { background: #fff; }
.chip-artist:hover::before { color: #fff; }

/* Secondary actions: outlined pill. */
.cal-link {
  display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; border: 2px dashed var(--teal);
  color: var(--teal); font-size: 0.85rem; background: none; transition: background-color 0.15s, color 0.15s;
}
.cal-link:hover { border-style: solid; background: var(--teal); color: #fff; }
.more { margin-top: 2rem; }

/* Add-to-calendar menu: a native <details> that drops a small card of calendar apps. */
.cal-menu { position: relative; display: inline-block; }
.cal-menu summary { list-style: none; }
.cal-menu summary::-webkit-details-marker { display: none; }
.cal-menu summary::after { content: ""; display: inline-block; margin-left: 0.5em; border: 0.3em solid transparent; border-top-color: currentColor; vertical-align: 0.05em; transition: transform 0.15s; transform-origin: 50% 25%; }
.cal-menu[open] summary::after { transform: rotate(180deg); }
.cal-options {
  position: absolute; z-index: 10; top: calc(100% + 0.6rem); left: 0; min-width: 14rem;
  display: grid; padding: 0.4rem; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--band-2), 8px 8px 0 var(--band-4);
}
.cal-options a { padding: 0.55rem 0.75rem; border-radius: 8px; background: none; white-space: nowrap; }
.cal-options a:hover { background: var(--sand); }

/* Buttons wear the header's stripe as a stacked shadow and press down into it when clicked. */
.button, input[type=submit], button {
  display: inline-block; background: var(--orange); color: #fff; border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.5rem 1.25rem; font: 600 0.95rem var(--body); cursor: pointer;
  box-shadow: 3px 3px 0 var(--mustard), 6px 6px 0 var(--teal);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
  margin: 0 6px 6px 0;
}
.button-alt { background: var(--teal); box-shadow: 3px 3px 0 var(--mustard), 6px 6px 0 var(--orange); }
.button:hover, input[type=submit]:hover, button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--mustard), 8px 8px 0 var(--teal); }
.button-alt:hover { box-shadow: 4px 4px 0 var(--mustard), 8px 8px 0 var(--orange); }
.button:active, input[type=submit]:active, button:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--mustard), 0 0 0 var(--teal); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

input, select, textarea { font: inherit; padding: 0.5rem 0.75rem; border: 1px solid var(--sand); border-radius: 10px; background: var(--surface); color: var(--ink); max-width: 100%; }
/* Shows filter: labeled cells with icons over a search box. */
.filters { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; padding: 1rem; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); }
.filters svg { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; }
.filter-cell, .filter-search { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.filter-cell + .filter-cell { border-left: 2px solid var(--sand); padding-left: 1rem; }
.filter-cell > span, .filter-search > span { display: grid; flex: 1; min-width: 0; }
.filter-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; font-weight: 600; }
.filters select, .filters input[type=search] { border: 0; padding: 0; background: none; color: var(--muted); font-size: 1.1rem; width: 100%; }
.filters select:focus-visible, .filters input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.filter-search { border: 2px solid var(--sand); border-radius: 10px; padding: 0.6rem 1rem; }
.filter-search:focus-within { border-color: var(--teal); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.stacked-form { display: grid; gap: 0.4rem; max-width: 520px; }
.stacked-form label { font-weight: 600; margin-top: 0.6rem; }
.stacked-form .button { justify-self: start; margin-top: 1rem; }

.flash { background: var(--sand); padding: 0.75rem 1rem; border-radius: var(--radius); }
.error { color: var(--orange); margin: 0.25rem 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.site-footer { background: var(--sand); text-align: center; padding: calc(var(--bands-h) + 2rem) 1rem 2rem; position: relative; margin-top: 3rem; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--bands-h); background: var(--bands); transform: scaleY(-1); }

/* Admin */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.toolbar > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
form.inline, .actions form { display: inline; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--sand); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sand); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
.actions { white-space: nowrap; }
.actions > * { margin-right: 0.6rem; }
.small { font-size: 0.85rem; }
.checkbox { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; margin-top: 0.6rem; }
.link-button, .link-button:hover, .link-button:active {
  background: none; color: var(--ink); padding: 0; margin: 0; border: 0; font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--mustard); text-decoration-thickness: 0.2em; box-shadow: none; transform: none;
}
.danger, .link-button.danger { color: var(--orange); }
.button-danger { background: var(--orange); margin-top: 2rem; }

/* Results bar: segmented list/calendar toggle + download link */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.view-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--sand); border-radius: 999px; }
.view-toggle a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.95rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color 0.15s, background-color 0.15s; }
.view-toggle a:hover { color: var(--ink); }
.view-toggle a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(61 43 31 / 0.18); }
.view-toggle svg, .ics-link svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ics-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--teal); text-decoration: none; }
.ics-link:hover { text-decoration: underline; }
/* The month replaces the date filter in calendar view. */
.filters:has(~ #events .cal-grid) .filter-dates { display: none; }
.filters:has(~ #events .cal-grid) .filter-row { grid-template-columns: 1fr; }
.filters:has(~ #events .cal-grid) .filter-cell + .filter-cell { border-left: 0; padding-left: 0; }

/* Month calendar: 7-column grid, collapsing to an agenda of days with shows on phones */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.cal-nav h3 { margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head { font-weight: 600; font-size: 0.85rem; text-align: center; color: var(--muted); padding-bottom: 0.25rem; }
.cal-day { min-height: 6.5rem; background: var(--surface); border: 1px solid var(--sand); border-radius: 8px; padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-outside { opacity: 0.45; }
.cal-today { border: 2px solid var(--orange); }
.cal-date { font-weight: 600; font-size: 0.9rem; }
.cal-dow { display: none; }
.cal-event { font-size: 0.8rem; line-height: 1.25; text-decoration: none; color: var(--ink); background: var(--sand); border-radius: 6px; padding: 0.15rem 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event:hover { background: var(--teal); color: #fff; }
.cal-event time { font-weight: 600; color: var(--teal); }
.cal-event:hover time { color: inherit; }
@media (max-width: 760px) {
  .cal-grid { grid-template-columns: 1fr; }
  .cal-head, .cal-day:not(:has(.cal-event)) { display: none; }
  .cal-day { min-height: 0; }
  .cal-dow { display: inline; }
  .cal-event { white-space: normal; font-size: 0.95rem; padding: 0.4rem 0.5rem; }
}

.back-link { display: inline-block; margin-bottom: 0.75rem; font-weight: 600; color: var(--teal); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* Admin navigation: grouped links; a sticky sidebar on desktop, the drawer on phones. */
.admin-nav .nav-heading { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.9rem 0.8rem 0.2rem; }
.admin-nav .nav-heading:first-of-type { padding-top: 0; }
.admin-nav .nav-foot { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; padding-top: 1.25rem; }
.admin-nav a[aria-current] { background: var(--sand); border-color: var(--ink); }
@media (min-width: 900px) {
  .admin-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
  .admin-sidebar.site-header {
    position: sticky; top: 0; height: 100vh; overflow-y: auto; margin: 0;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 1.5rem;
    padding: 1.5rem calc(1rem + 20px) 1.5rem 1rem; background: var(--surface);
  }
  /* The five bands run down the sidebar's right edge. */
  .admin-sidebar.site-header::after {
    top: 0; bottom: 0; left: auto; right: 0; width: 20px; height: auto;
    background: linear-gradient(to left, var(--band-5) 0 4px, var(--band-4) 4px 8px, var(--band-3) 8px 12px, var(--band-2) 12px 16px, var(--band-1) 16px 20px);
  }
  .admin-sidebar .brand { font-size: 1.7rem; padding-left: 0.8rem; }
  .admin-sidebar .brand span { display: block; font-size: 1.1rem; }
  .admin-nav { flex: 1; flex-direction: column; gap: 0.15rem; }
  .admin-nav a { border-radius: 10px; padding: 0.4rem 0.8rem; }
  .admin-shell > main { width: 100%; padding-top: 2rem; }
}