/* ============================================================
   HOUSE CIRCUIT — INNER PAGES (gallery, contact)
============================================================ */

/* ------------------------------------------------------------
   PAGE HEAD
------------------------------------------------------------ */
.page-head {
  position: relative;
  padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) 0 clamp(28px, 5vh, 56px);
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(57, 255, 127, 0.12), transparent 70%),
    linear-gradient(transparent calc(100% - 1px), var(--line) 0) 0 0 / 100% 100%;
  overflow: hidden;
}
/* Faint board grid behind the heading */
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(214, 255, 226, 0.035) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(214, 255, 226, 0.035) 47px 48px);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
          mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
  pointer-events: none;
}
.page-head-grid {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: end;
}
@media (min-width: 960px) {
  .page-head-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr); gap: 64px; }
}
.page-head .stop { margin-bottom: clamp(18px, 2.4vh, 28px); }
.page-head-aside { display: grid; gap: 14px; max-width: 46ch; }

/* ------------------------------------------------------------
   GALLERY — filter chips + masonry wall
------------------------------------------------------------ */
.gallery-section { padding: clamp(32px, 5vh, 56px) 0 clamp(96px, 14vh, 160px); }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 calc(var(--gutter) * -1) clamp(24px, 4vh, 40px);
  padding: 2px var(--gutter) 8px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.chip span { color: var(--text-3); }
.chip:hover { border-color: var(--signal); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.chip[aria-pressed="true"] span { color: rgba(2, 20, 8, 0.6); }

.wall {
  columns: 1;
  column-gap: clamp(8px, 1vw, 16px);
}
@media (min-width: 560px)  { .wall { columns: 2; } }
@media (min-width: 900px)  { .wall { columns: 3; } }
@media (min-width: 1400px) { .wall { columns: 4; } }
@media (min-width: 2200px) { .wall { columns: 5; } }

.shot {
  break-inside: avoid;
  margin-bottom: clamp(8px, 1vw, 16px);
}
.shot-link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.shot-link img {
  width: 100%;
  height: auto;
  min-height: 120px;
  object-fit: cover;
  filter: brightness(0.88) saturate(0.9);
  transition: transform 0.9s var(--ease-out), filter var(--t-mid);
}
.shot-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 4px;
  padding: 40px 14px 14px;
  background: linear-gradient(transparent, rgba(3, 5, 4, 0.9));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.shot-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
}
.shot-cap .label { color: var(--signal); font-size: 11px; }
.shot-link:hover,
.shot-link:focus-visible { border-color: var(--signal); }
.shot-link:hover img,
.shot-link:focus-visible img { transform: scale(1.04); filter: none; }
.shot-link:hover .shot-cap,
.shot-link:focus-visible .shot-cap { opacity: 1; transform: none; }
@media (hover: none) {
  .shot-cap { opacity: 1; transform: none; padding-top: 28px; }
  .shot-title { font-size: 18px; }
}

.empty-state {
  display: grid;
  gap: 16px;
  justify-items: start;
  max-width: 560px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed var(--line-2);
}

/* ------------------------------------------------------------
   CONTACT — channel tabs + forms
------------------------------------------------------------ */
.contact-section { padding: clamp(32px, 5vh, 56px) 0 clamp(96px, 14vh, 160px); }

.channels {
  display: grid;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  margin-bottom: clamp(28px, 5vh, 48px);
}
@media (min-width: 820px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 32px);
  border: 0;
  background: var(--ink);
  color: var(--text-2);
  text-align: left;
  transition: background-color var(--t-mid) var(--ease-out);
}
.channel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.channel-no {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text-2);
  transition: background-color var(--t-mid), color var(--t-mid), border-color var(--t-mid);
}
.channel-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 1.9vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}
.channel-desc { font-size: var(--fs-small); }
.channel:hover { background: var(--ink-2); }
.channel[aria-selected="true"] {
  background: radial-gradient(120% 100% at 0% 100%, rgba(57, 255, 127, 0.12), transparent 60%), var(--ink-2);
}
.channel[aria-selected="true"]::after { transform: scaleX(1); }
.channel[aria-selected="true"] .channel-no { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.channel:focus-visible { outline-offset: -3px; }
/* Without JS the channels are just a legend; every form shows. */
html:not(.js) .channels { display: none; }

.form-view { scroll-margin-top: calc(var(--header-h) + 24px); }
html:not(.js) .form-view + .form-view { margin-top: 64px; }
.js .form-view:not(.is-active) { display: none; }   /* switching channels swaps the form at once */

.cform {
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line-2);
  background: var(--ink-2);
}
.fgrid {
  display: grid;
  gap: 22px 20px;
}
@media (min-width: 720px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgroup--full { grid-column: 1 / -1; }
}
.fgroup { display: grid; gap: 8px; align-content: start; }
.flabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.freq { color: var(--signal); }
.fopt { color: var(--text-3); letter-spacing: 0.08em; text-transform: lowercase; }
.ferror {
  display: none;
  font-size: var(--fs-small);
  color: var(--danger);
}
.ferror.is-visible { display: block; }

.links-list { display: grid; gap: 8px; }
.link-row { display: flex; gap: 8px; }
.link-remove {
  flex-shrink: 0;
  width: 52px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: none;
  color: var(--text-2);
}
.link-remove:hover { border-color: var(--danger); color: var(--danger); }
.add-link {
  justify-self: start;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
}
.add-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.factions {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-top: 8px;
}
.turnstile-slot:empty { display: none; }
.turnstile-slot { width: 100%; max-width: 420px; }
.btn-send { min-width: 200px; }
.send-busy { display: none; align-items: center; gap: 10px; }
.btn-send.is-busy .send-idle { display: none; }
.btn-send.is-busy .send-busy { display: inline-flex; }
.spin {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fstatus { min-height: 1.2em; font-size: var(--fs-small); color: var(--danger); }
.fstatus:empty { display: none; }

.sent {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(57, 255, 127, 0.5);
  background: radial-gradient(70% 90% at 0% 0%, rgba(57, 255, 127, 0.12), transparent 60%), var(--ink-2);
}
.sent:focus { outline: none; }
.sent-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 26px;
  box-shadow: 0 0 30px var(--signal-glow);
}

/* ------------------------------------------------------------
   EVENT PAGE (/events/<id>-<slug>): one night, the dossier as a page
------------------------------------------------------------ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 3vh, 32px);
  color: var(--text-3);
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--signal); }
.crumbs [aria-current] { color: var(--text); overflow-wrap: anywhere; }
.event-layout {
  position: relative;
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 720px) {
  .event-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.event-poster { margin: 0; border: 1px solid var(--line-2); }
/* The poster follows the details in the markup (the h1 is read first) and
   takes the left column from 720px. */
@media (min-width: 720px) {
  .event-poster { order: -1; position: sticky; top: calc(var(--header-h) + 24px); }
}
/* One column (phones): the name, date and tickets come first, then the
   poster (about half a screen), then the description and lineup, so the first
   screen answers what, when and where instead of showing only the poster. */
@media (max-width: 719px) {
  .event-layout { row-gap: 20px; }
  .event-layout .event-info { display: contents; }
  .event-poster { order: 1; max-height: min(58vh, 560px); max-height: min(58svh, 560px); }
  .event-about { order: 2; }
}
.event-info { display: grid; align-content: start; gap: 20px; }
.event-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: anywhere;
}
.event-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 720px) {
  .event-cta + .event-about { margin-top: 12px; }
}
/* Up to tablets (a narrow info column): tickets on a full-width row, the
   calendar buttons share the next one or stack at full width. */
@media (max-width: 1023px) {
  .event-cta .btn { flex: 1 1 auto; justify-content: center; }
  .event-cta .btn-signal { flex-basis: 100%; }
}
.event-about { display: grid; gap: 10px; }
.event-about p { max-width: 62ch; color: var(--text-2); }
.event-lineup { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.event-lineup li {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text);
}
.event-photos,
.event-more { padding: clamp(32px, 6vh, 64px) 0; }
.event-photos .label,
.event-more .label { margin-bottom: 16px; }
.event-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-photo-grid a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: #000; }
.event-photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.event-photo-grid a:hover img { transform: scale(1.05); }
.event-more-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.event-more-list a {
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  background: var(--ink-2);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.event-more-list a:hover,
.event-more-list a:focus-visible { border-color: var(--signal); background: var(--ink-3); }
.event-more-list strong { font-family: var(--f-display); font-size: 22px; text-transform: uppercase; }
.event-more-list span { font-size: var(--fs-small); color: var(--text-3); }