/* ============================================================================
   ISM 2026 site design system.
   Used by the new shell (common/header-2026.php + common/footer-2026.php) and
   the converted content pages. Ticketing pages stay on the legacy styles.css.
   Fonts (Space Mono + Archivo Black) are loaded by the shell.
   ========================================================================== */

:root {
  --ink: #0d0d0d;
  --paper: #ffffff;
  --muted: #6b6b66;
  --rule: 3px solid var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

a { color: var(--ink); }
a:hover { color: var(--ink); background: var(--ink); color: var(--paper); }

h1, h2, h3, h4 {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  margin: 0 0 0.5em;
}

img { max-width: 100%; }

@keyframes ism-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ism-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- top nav ------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 40px);
  border-bottom: var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 20;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.site-nav .brand {
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav .brand:hover { background: none; color: var(--ink); }
.site-nav .brand span { display: inline-block; }
.site-nav .brand span:nth-child(1) { transform: rotate(-4deg); }
.site-nav .brand span:nth-child(2) { transform: rotate(3deg) translateY(1px); }
.site-nav .brand span:nth-child(3) { transform: rotate(-2deg); }
.site-nav .links {
  display: flex;
  gap: clamp(6px, 1.6vw, 16px);
  flex-wrap: wrap;
  text-transform: uppercase;
  font-weight: 700;
}
.site-nav .links a {
  padding: 2px 6px;
  text-decoration: none;
}
.site-nav .links a.current { background: var(--ink); color: var(--paper); }

/* --- page shell ---------------------------------------------------------- */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(16px, 3vw, 40px);
}
.page-title {
  font-size: clamp(34px, 6vw, 68px);
  margin: 0 0 clamp(20px, 3vw, 36px);
}
.page h2 { font-size: clamp(24px, 3.4vw, 40px); margin-top: 1.4em; }
.page h3 { font-size: clamp(18px, 2.2vw, 26px); margin-top: 1.3em; }
.page p { font-size: 15px; }
.muted { color: var(--muted); }
.backlink { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

hr {
  border: 0;
  border-top: var(--rule);
  margin: clamp(28px, 4vw, 44px) 0;
}

/* --- buttons ------------------------------------------------------------- */
.ism-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 24px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform 0.08s ease, background 0.08s ease, color 0.08s ease;
}
.ism-btn:hover { transform: rotate(-1deg) scale(1.03); background: var(--ink); color: var(--paper); }
.ism-btn.ghost { background: var(--paper); color: var(--ink); }
.ism-btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* --- flash --------------------------------------------------------------- */
.ism-flash {
  padding: 12px clamp(16px, 3vw, 40px);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--rule);
}
.ism-flash.success { background: var(--ink); color: var(--paper); }
.ism-flash.error { background: #b00020; color: var(--paper); }

/* --- lists --------------------------------------------------------------- */
.artist-list,
.venue-list {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.2em 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
}
.artist-list li,
.venue-list li { padding: 6px 0; border-bottom: 2px solid var(--ink); }
.artist-list a,
.venue-list a { text-decoration: none; display: block; }
.artist-list a:hover,
.venue-list a:hover { background: var(--ink); color: var(--paper); }

/* --- lineup columns (home + archive reuse) ------------------------------ */
.ism-lineup {
  columns: 2;
  column-gap: clamp(24px, 4vw, 64px);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  line-height: 2.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ism-name { transition: background 0.08s ease, color 0.08s ease; }
.ism-name:hover { background: var(--ink); color: var(--paper); }

/* --- category filter + pills -------------------------------------------- */
.lineup-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.lineup-filter-btn {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(11px, 1.2vw, 13px);
  padding: 6px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
}
.lineup-filter-btn:hover { background: var(--ink); color: var(--paper); }
.lineup-filter-btn.is-active { background: var(--ink); color: var(--paper); }

.artist-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -8px 0 20px;
}
.cat-pill {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(11px, 1.2vw, 13px);
  padding: 4px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}

/* --- archive ------------------------------------------------------------- */
.archive-years {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  padding: 0.5rem 0;
}
a.archive-year-card,
a.archive-year-card:link,
a.archive-year-card:visited {
  color: var(--ink);
  background: var(--paper);
  border: var(--rule);
  display: block;
  padding: 2rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 3px 4px 0 rgba(13,13,13,0.85);
}
a.archive-year-card:hover { transform: translate(-1px, -2px) rotate(-1deg); color: var(--ink); background: var(--paper); }
.archive-year-title { font-family: "Archivo Black", sans-serif; font-size: 1.8em; text-transform: uppercase; }
.archive-section { margin: clamp(24px, 4vw, 44px) 0; }
.archive-poster { text-align: center; padding: 1rem 0; }
.archive-poster img { max-width: 100%; max-height: 640px; border: var(--rule); }
.coming-soon { color: var(--muted); font-style: italic; }

/* --- photo gallery grid + lightbox (shared with gallery.js) -------------- */
.gallery-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 1.25rem;
}
.gallery-filter-form select,
.gallery-filter-form input[type="text"] {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.gallery-filter-form input[type="text"] {
  min-width: 10rem;
}
.gallery-filter-form .ism-btn {
  padding: 8px 16px;
}
.gallery-filter-form a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gallery-grid,
.archive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}
.gallery-tile,
.archive-gallery .gallery-item {
  padding: 0;
  margin: 0;
  border: 2px solid var(--ink);
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
}
.gallery-tile img,
.archive-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.gallery-tile:hover img,
.gallery-tile:focus-visible img,
.archive-gallery .gallery-item:hover img {
  transform: scale(1.05);
  filter: contrast(1.08) saturate(1.1);
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.95);
  align-items: center;
  justify-content: center;
  padding: 2.5rem 3.5rem;
}
.lightbox.is-open { display: flex; }
.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.lightbox-figure img { max-width: 100%; max-height: 82vh; object-fit: contain; border: 3px solid var(--paper); }
.lightbox-figure figcaption { color: var(--paper); font-size: 0.9rem; text-align: center; max-width: 60ch; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--paper);
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
}
.lightbox button:hover { opacity: 1; }
.lightbox-close { top: 0.75rem; right: 1.25rem; font-size: 2.4rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 3rem; padding: 0 0.5rem; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

/* --- videos -------------------------------------------------------------- */
.archive-videos { display: flex; flex-direction: column; gap: 2rem; }
.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: var(--rule); }

/* --- artist bio ------------------------------------------------------------ */
.artist-info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5em 1.2em;
  margin: 1.2em 0;
  font-size: 15px;
}
.artist-info dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--muted);
}
.artist-info dd { margin: 0; }
.artist-player { margin: 1.2em 0; max-width: 480px; }
.artist-player iframe { width: 100%; border: 2px solid var(--ink); display: block; }

/* --- tickets --------------------------------------------------------------- */
.ticket-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5em 0;
}
.ticket-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(16px, 2.5vw, 24px);
  border: var(--rule);
  box-shadow: 3px 4px 0 rgba(13,13,13,0.85);
}
.ticket-info { flex: 1 1 240px; }
.ticket-name {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 26px);
}
.ticket-desc {
  margin: 0.4em 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.ticket-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.ticket-price {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  white-space: nowrap;
}
.ticket-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ticket-qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ticket-qty input {
  width: 4rem;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
}
.ticket-form .ism-btn { cursor: pointer; }
.ticket-cart-link { margin-top: 1.5em; }

/* --- cart / checkout ------------------------------------------------------ */
.cart-wrap { overflow-x: auto; margin: 1em 0 1.75em; }
.cart-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.cart-table th {
  text-align: left;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 3px solid var(--ink);
}
.cart-table td {
  padding: 12px;
  border-bottom: 2px solid var(--ink);
  vertical-align: middle;
}
.cart-table .cart-total td {
  font-weight: 700;
  text-transform: uppercase;
  border-top: 3px solid var(--ink);
  border-bottom: none;
  font-size: 15px;
}
.cart-table input[type="number"] {
  width: 4.5rem;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
}
.cart-table .inline-form {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  align-items: center;
}
.cart-table button {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease;
}
.cart-table button:hover { background: var(--ink); color: var(--paper); }

/* --- order confirmation --------------------------------------------------- */
.order-status {
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 1em;
}
.order-status.pending::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.15em;
  background: var(--ink);
  vertical-align: text-bottom;
  animation: ism-blink 1.1s step-end infinite;
}
.order-items { margin: 1em 0; font-size: 15px; line-height: 1.9; }
.redeem-box {
  border: var(--rule);
  box-shadow: 3px 4px 0 rgba(13,13,13,0.85);
  padding: clamp(20px, 4vw, 36px);
  margin: 1.5em 0;
  text-align: center;
}
.redeem-box .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0;
}
.redeem-code {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(34px, 8vw, 60px);
  letter-spacing: 0.12em;
  margin: 0.15em 0 0.3em;
  line-height: 1;
}

/* --- forms ----------------------------------------------------------------- */
.ism-form {
  max-width: 480px;
  margin: 1em 0;
}
.ism-form label {
  display: block;
  margin: 0 0 18px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ism-form input,
.ism-form textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  background: var(--paper);
  color: var(--ink);
}
.ism-form textarea { resize: vertical; }
.ism-form button {
  border-radius: 0;
  cursor: pointer;
}

/* --- support / cta ------------------------------------------------------- */
.cta-box {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(24px, 4vw, 44px);
  margin: clamp(24px, 4vw, 40px) 0;
  border: var(--rule);
}
.cta-box a { color: var(--paper); }

/* --- partner logos ------------------------------------------------------- */
.partner-logos { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: 1rem 0; }
.partner-logos img { max-width: 150px; height: auto; }

/* --- footer -------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--paper); }
.site-footer .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px clamp(16px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer a { color: var(--paper); }
.site-footer .brand { font-family: "Archivo Black", sans-serif; font-size: 15px; }
.site-footer .brand span { display: inline-block; }
.site-footer .brand span:nth-child(1) { transform: rotate(-3deg); }
.site-footer .brand span:nth-child(2) { transform: rotate(2deg); }
.site-footer .brand span:nth-child(3) { transform: rotate(-2deg); }

/* --- scroll reveal ------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .ism-lineup { columns: 1; }
  .lightbox { padding: 1rem; }
  .lightbox-prev, .lightbox-next { font-size: 2.2rem; }
}

/* --- home archive teaser tiles ------------------------------------------- */
.ism-fig { display: block; text-decoration: none; }
.ism-fig:hover { background: none; }
.ism-fig img { transition: filter 0.2s ease; }
.ism-fig:hover img { filter: contrast(1.08) saturate(1.1); }

/* --- schedule / event detail -------------------------------------------- */
.sched-day { margin: 0 0 clamp(28px, 4vw, 48px); }
.sched-day-label {
  font-size: clamp(24px, 3.4vw, 40px);
  border-bottom: var(--rule);
  padding-bottom: 0.2em;
  margin: 0 0 0.8em;
}
.sched-event { margin: 0 0 1.6em; }
.sched-venue { font-size: clamp(17px, 2.2vw, 24px); margin: 0 0 0.4em; }
.sched-venue a { text-decoration: none; }
.sched-table { width: 100%; border-collapse: collapse; max-width: 520px; }
.sched-table td { padding: 6px 0; border-bottom: 1px solid #e2e2dd; vertical-align: baseline; }
.sched-time {
  white-space: nowrap;
  padding-right: 1.2em !important;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  width: 1%;
}
.sched-act { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 14px; }
.sched-act a { text-decoration: none; }

.event-meta {
  display: flex;
  gap: 0.6em 1.2em;
  flex-wrap: wrap;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  margin: 0 0 1.2em;
}
.event-venue { background: var(--ink); color: var(--paper); padding: 2px 8px; }
.event-poster { display: block; max-width: 480px; border: 2px solid var(--ink); margin: 0 0 1.4em; }

/* Block schedule (draft) — merged schedule + lineup */
.block-lineup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 0.5em;
}
.block-artist {
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  background: #f2f1ec;
  padding: 2px 8px;
  border-radius: 2px;
}
.sched-subtitle {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: -0.6em 0 1.4em;
}

/* Genre tags on the block schedule — light, readable */
.genre-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 0.6em;
  vertical-align: baseline;
}
.genre-orange { background: #f6d9a8; color: #6b3c00; }
.genre-red    { background: #f3c6c6; color: #7a1616; }
.genre-gray   { background: #e0e0e0; color: #3d3d3d; }
.genre-blue   { background: #c7d4f0; color: #1d3370; }
.genre-purple { background: #e0d0f0; color: #4a2770; }
.genre-green  { background: #cdebd0; color: #1d5c25; }
.genre-teal   { background: #c2e8e6; color: #0d5650; }
.genre-yellow { background: #f7ecc0; color: #5a4a00; }
.genre-indigo { background: #d0d4f0; color: #22286b; }
.genre-pink   { background: #f5d5e6; color: #6b1d47; }
.artist-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 14px;
}

/* ============================================================================
   Schedule editor (/schedule/editor) — drag-and-drop grid in the 2026 site's
   own design language: ink on paper, hard rules, the genre palette above.
   ========================================================================== */
/* the editor grid wants the full window — drop the `.page` 1100px cap only on
   the editor page (scoped via `.editor-wrap`, unique to /schedule/editor). */
.page:has(.editor-wrap) {
  max-width: none;
  padding-left: clamp(12px, 2.5vw, 32px);
  padding-right: clamp(12px, 2.5vw, 32px);
}
/* overflow-x: scroll (not auto) reserves a visible scrollbar track on
   platforms that show one at all (Windows/Linux Chrome, Firefox); mobile and
   overlay-scrollbar browsers hide the track regardless, which is normal and
   fine to swipe through — the hint text below covers discoverability there. */
.editor-wrap {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.sched-editor { font-size: 14px; }
.editor-scroll-hint { display: none; }
@media (max-width: 1400px) {
  .editor-scroll-hint {
    display: inline-block;
    margin-left: 10px;
    font-weight: 700;
  }
}
.editor-hint {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 1.2em;
}
.editor-undo { margin-left: 14px; font-size: 10px; padding: 3px 10px; }
.editor-undo:disabled { opacity: 0.35; cursor: default; transform: none; }
.editor-undo:disabled:hover { background: var(--paper); color: var(--ink); }
.editor-day { margin: 1.6em 0 0.4em; }
.editor-grid { margin: 0 0 2em; }

/* ---- Vertical time axis: a fixed-width gutter of hour labels down the
   left, one column per venue beside it. Each day carries its own pixel
   height (AxisPx, from the server, matching pxPerMinute) so the blocks'
   top/height percentages resolve against a real height instead of 0. Column
   headers stick to the viewport top as the page scrolls past that day. ---- */
.editor-grid-columns { display: flex; align-items: flex-start; }
.editor-time-gutter {
  position: relative;
  flex: 0 0 52px;
  margin-top: 50px; /* clears the sticky column header above the track */
}
.editor-time-gutter .editor-tick {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.editor-time-gutter .editor-tick:first-child { transform: none; }
.editor-time-gutter .editor-tick:last-child { transform: translateY(-100%); }
/* Below this width a column gets too narrow for names/times to stay
   readable — hold a real min-width and let the wrapper scroll horizontally
   on narrow screens instead of squeezing everything down. */
.editor-grid-col {
  flex: 1 1 0;
  min-width: 190px;
  border-left: 1px solid #e2e2dd;
}
.editor-grid-venue {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.editor-venue-controls { display: flex; gap: 3px; }
.editor-venue-btn,
.editor-venue-add-block {
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.editor-venue-btn:hover,
.editor-venue-add-block:hover { background: var(--ink); color: var(--paper); }
.editor-grid-track {
  position: relative;
  background: #fcfcfa;
  background-image: repeating-linear-gradient(to bottom, #e2e2dd 0, #e2e2dd 1px, transparent 1px, transparent 90px);
}
.editor-bar {
  position: absolute;
  left: 3px;
  right: 3px;
  border: 1px solid var(--ink);
  padding: 3px 6px;
  overflow: hidden;
  cursor: grab;
}
.editor-bar.editor-dragging { opacity: 0.35; cursor: grabbing; }
.editor-bar-time {
  display: block;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-bar-artist {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-bar-cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-ghost {
  pointer-events: none;
  border-style: dashed;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  display: flex;
  align-items: center;
  z-index: 2;
}
.editor-bench {
  display: flex;
  align-items: stretch;
  gap: 12px;
  border: 2px dashed var(--muted);
  padding: 10px 12px;
  margin: 0 0 2em;
  min-height: 64px;
}
.editor-bench.editor-bench-hot { border-color: var(--ink); background: #f4f4ef; }
.editor-bench-label {
  flex: 0 0 auto;
  align-self: center;
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.editor-bench-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
}
.editor-bench-bar {
  position: static;
  min-width: 140px;
  max-width: 220px;
  padding: 3px 7px;
}
.editor-bench-origin {
  display: block;
  font-size: 8px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-bench-empty { font-size: 10px; }
.editor-flash {
  font-size: 11px;
  padding: 6px 10px;
  margin: 0 0 1em;
  border: 2px solid var(--ink);
}
.editor-flash-err { border-color: #b00020; color: #b00020; }

/* Inline edit affordance on each bar (pencil, top-right) and the note mark.
   Bars are position:absolute (grid) or position:relative (bench) so the
   absolute edit button anchors to the bar itself in both cases. */
.editor-bar-edit {
  position: absolute;
  top: 2px;
  right: 2px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.55;
}
.editor-bar-edit:hover { opacity: 1; background: var(--ink); color: var(--paper); }
.editor-bar-note-mark {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 4px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  margin-top: 1px;
}
.editor-bench-bar { position: relative; }

/* ---- Venues panel + stage staff panel + venue badges ---- */
.editor-venues,
.editor-staff {
  border: 2px solid var(--ink);
  padding: 10px 12px;
  margin: 0 0 2em;
}
.editor-staff-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.editor-staff-title {
  font-family: "Archivo Black", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.editor-staff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.editor-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 2px 6px;
  font-size: 11px;
}
.staff-chip-role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.staff-chip-name { font-weight: 700; }
.staff-chip-where { color: var(--muted); font-size: 10px; }
.staff-chip-del {
  border: none;
  background: none;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
}
.staff-chip-del:hover { background: var(--ink); color: var(--paper); }

.editor-staff-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.editor-staff-add input[type="text"],
.editor-staff-add select {
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.editor-staff-add input[type="text"] { flex: 1 1 160px; }

.editor-venue-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.editor-grid-venue { flex: 0 0 180px; }
.editor-grid-venue-corner { flex: 0 0 180px; }
.editor-staff-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--ink);
  padding: 1px 4px;
  margin: 3px 3px 0 0;
  white-space: nowrap;
}

/* staff-role colour coding (matches the genre palette's ink-on-paper feel) */
.staff-role-manager  { background: var(--ink); color: var(--paper); }
.staff-role-volunteer { background: #e0e0e0; color: #3d3d3d; }
.staff-role-vj        { background: #d0d4f0; color: #22286b; }
.staff-role-manager .staff-chip-del { color: var(--paper); }
.staff-role-manager .staff-chip-del:hover { background: var(--paper); color: var(--ink); }

/* ---- Edit modal ---- */
.editor-modal {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  z-index: 100;
}
.editor-modal[hidden] { display: none; }
.editor-modal-card {
  background: var(--paper);
  border: 3px solid var(--ink);
  width: min(440px, 100%);
  box-shadow: 6px 6px 0 var(--ink);
}
.editor-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding: 8px 12px;
}
.editor-modal-title {
  font-family: "Archivo Black", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.editor-modal-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  padding: 0 4px;
}
.editor-modal-close:hover { background: var(--ink); color: var(--paper); }
#editor-edit-form { padding: 12px; }
.editor-field {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
}
.editor-field input,
.editor-field select,
.editor-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  font-family: inherit;
  font-size: 13px;
  padding: 5px 7px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.editor-field-row { display: flex; gap: 10px; }
.editor-field-row .editor-field { flex: 1 1 0; }
.editor-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.editor-modal-actions-left { margin-right: auto; display: flex; gap: 8px; }

/* --- venue cards (/map) --------------------------------------------------- */
.venue-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin: 1.5em 0;
}
.venue-card {
  border: var(--rule);
  box-shadow: 3px 4px 0 rgba(13,13,13,0.85);
  padding: 14px 16px;
}
.venue-card-name {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 15px;
  margin-bottom: 6px;
}
.venue-card-address {
  display: block;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.venue-card-address:hover { background: var(--ink); color: var(--paper); }

/* --- public schedule (/schedule): a card per venue per day ----------------- */
.sched-day-title { display: flex; align-items: baseline; gap: 0.5em; }
.sched-day-title .muted {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.45em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.sched-card {
  border: var(--rule);
  box-shadow: 3px 4px 0 rgba(13,13,13,0.85);
}
.sched-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 13px;
}
.sched-swatch { width: 10px; height: 10px; border: 1px solid var(--ink); flex: none; }
.sched-free-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: var(--ink);
  color: var(--paper);
}
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.15);
  font-size: 13px;
}
.sched-list li:last-child { border-bottom: none; }
.sched-slot-time { font-weight: 700; white-space: nowrap; color: var(--muted); font-size: 12px; }
.sched-artist { font-weight: 700; text-transform: uppercase; }
a.sched-artist { text-decoration: none; }
a.sched-artist:hover { color: var(--paper); background: var(--ink); }

.sched-color-orange { background: #d9722c; }
.sched-color-red    { background: #c23b30; }
.sched-color-gray   { background: #8a8a84; }
.sched-color-blue   { background: #2a5ea8; }
.sched-color-purple { background: #6d3fa0; }
.sched-color-green  { background: #2e7d46; }
.sched-color-teal   { background: #1b8380; }
.sched-color-yellow { background: #b8960c; }
.sched-color-indigo { background: #4a4fb0; }
.sched-color-pink   { background: #c14f8a; }

.sched-print-link { display: flex; flex-wrap: wrap; gap: 10px; margin: -0.5em 0 1.5em; }
@media print {
  .site-nav, .site-footer, .no-print { display: none; }
  /* One festival day per printed page: the venue grid right after each day
     heading rides along since nothing sits between them to hold a break. */
  .sched-day-title { page-break-before: always; break-before: page; }
  .sched-day-title:first-of-type { page-break-before: avoid; break-before: avoid; }
}

/* --- ticket price table (/tickets while sales are open) -------------------- */
.price-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  margin: 1.5em 0 0.5em;
}
.price-table th {
  text-align: left;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 12px 8px 0;
  border-bottom: 3px solid var(--ink);
}
.price-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 2px solid var(--ink);
  vertical-align: baseline;
}
.price-table td:last-child { font-weight: 700; white-space: nowrap; }

/* --- archive videos -------------------------------------------------------- */
.archive-videos { display: flex; flex-direction: column; gap: 2rem; }
.video-embed { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: var(--rule); }

/* --- archive upload + home teaser (button tiles) --------------------------- */
#upload { margin: 0 0 2em; }
button.ism-fig { border: none; cursor: pointer; font: inherit; text-align: left; }