/* =================================================================
   Long Island Live Events
   Design tokens
================================================================= */
:root{
  --ink: #15181E;
  --ink-raised: #1D2129;
  --paper: #F7F1E3;
  --paper-dim: #EDE4CE;
  --marigold: #F5B400;
  --marigold-dim: #C99000;
  --coral: #E8543A;
  --line-on-ink: rgba(247,241,227,0.14);
  --line-on-paper: rgba(21,24,30,0.14);
  --muted-on-ink: #9C9789;
  --muted-on-paper: #6B6455;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-stub: 4px;
  --shadow-stub: 0 2px 0 rgba(21,24,30,0.9);
}

/* =================================================================
   Reset / base
================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
h1, h2, h3, h4{ margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
p{ margin: 0; }

:focus-visible{
  outline: 3px solid var(--marigold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.on-paper{ background: var(--paper); color: var(--ink); }

/* =================================================================
   Header
================================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line-on-ink);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark{
  position: relative;
  width: 76px;
  height: 34px;
  background: var(--marigold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transform: rotate(-4deg);
  overflow: hidden;
  padding: 0 5px;
}
/* Long Island itself IS the mark, at full strength rather than a
   28%-opacity ghost behind an "LI" monogram — at that weight nobody
   could tell what the shape was, which defeated the point.

   The outline is GEOGRAPHIC, not stylised: the path in chrome.js is
   generated from real coastline coordinates on an equirectangular
   projection true at 40.9N, so it reads like a chart rather than a
   drawing. An earlier caricature squashed the island to ~1:2.6 to make
   the forks legible at nav size, which was the wrong trade — asked for
   map-accurate, and accuracy turns out to cost less than feared,
   because the island runs WSW-ENE and its true bounding box is about
   2.8:1 rather than its 1:5.5 width-to-length. The mark is wider to
   suit that box. If you regenerate the path, keep the projection: a
   plain lon/lat plot stretches the island east-west and stops looking
   like the real thing. */
.brand-island{
  position: relative;
  width: 100%;
  transform: rotate(4deg);
}
.brand-island path{
  fill: var(--ink);
}
.brand-word{
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.brand-word span{ display: block; color: var(--marigold); font-size: 12px; letter-spacing: 0.12em; margin-top: 3px; }

.main-nav{
  display: flex;
  align-items: center;
  gap: 30px;
  /* Wrap whole links, never the words inside one. Without these the
     flex line is nowrap, so a nav too wide for its container shrinks
     the items instead and each label breaks mid-phrase ("This
     Weekend" over two lines). This is a safety net for the narrow
     band above the hamburger breakpoint, not the primary mechanism —
     the gap below and the breakpoint are what keep it on one row. */
  flex-wrap: wrap;
  justify-content: flex-end;
}
.main-nav a{ white-space: nowrap; }

/* Eight links at 30px gaps spend 210px on whitespace alone, which was
   enough to push a 1024-wide laptop into the mobile menu. Tightening
   the gap just above the hamburger breakpoint buys back ~80px and
   keeps those screens on a single row with their navigation visible. */
@media (max-width: 1200px){
  .main-nav{ gap: 18px; }
}
.main-nav a{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--paper);
  opacity: 0.82;
  position: relative;
  padding: 6px 0;
}
.main-nav a:hover{ opacity: 1; }
.main-nav a[aria-current="page"]{ opacity: 1; }
.main-nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--marigold);
  border-radius: 2px;
}

.header-actions{ display: flex; align-items: center; gap: 14px; }

/* Shown only in the mobile nav panel — see responsive section.
   Scoped to `.main-nav` deliberately: a bare `.main-nav-cta` rule
   has the same specificity as the `.btn` rule below it, so `.btn`
   won on source order and this CTA was rendering on desktop too —
   a second "Get Updates" button overlapping the real one and
   eating ~130px of nav width. */
.main-nav .main-nav-cta{ display: none; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 3px;
  border: none;
  white-space: nowrap;
}
.btn-marigold{ background: var(--marigold); color: var(--ink); }
.btn-marigold:hover{ background: #ffc627; }
.btn-outline{ background: transparent; color: var(--paper); border: 1.5px solid var(--line-on-ink); }
.btn-outline:hover{ border-color: var(--marigold); color: var(--marigold); }
.btn-ink{ background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }
.btn-ink:hover{ background: var(--ink-raised); }
.btn-block{ width: 100%; justify-content: center; }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  padding: 8px;
}
.nav-toggle svg{ width: 24px; height: 24px; }

/* =================================================================
   Hero (marquee)
================================================================= */
.hero{
  position: relative;
  padding: 76px 0 84px;
  border-bottom: 1px solid var(--line-on-ink);
  background:
    radial-gradient(ellipse 700px 380px at 82% -10%, rgba(245,180,0,0.16), transparent 60%);
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow{
  color: var(--marigold);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  display: block;
}
.hero h1{
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 0.96;
  color: var(--paper);
}
.hero h1 em{
  font-style: normal;
  color: var(--marigold);
}
.hero-sub{
  margin-top: 22px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--muted-on-ink);
}
.hero-actions{ margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-search{
  margin-top: 30px;
  display: flex;
  max-width: 480px;
  border: 1.5px solid var(--line-on-ink);
  border-radius: 3px;
  overflow: hidden;
}
.hero-search input{
  flex: 1;
  background: var(--ink-raised);
  border: none;
  color: var(--paper);
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-body);
}
.hero-search input::placeholder{ color: var(--muted-on-ink); }
.hero-search button{
  background: var(--marigold);
  border: none;
  padding: 0 22px;
  font-weight: 700;
  color: var(--ink);
}

/* Ticket-stub illustration in hero */
.hero-ticket{
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 30px 26px;
  transform: rotate(3deg);
  box-shadow: 0 22px 50px rgba(0,0,0,0.35);
}
.hero-ticket::before,
.hero-ticket::after{
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  background: var(--ink);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.hero-ticket::before{ left: -17px; }
.hero-ticket::after{ right: -17px; }
.hero-ticket-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--line-on-paper);
}
.hero-ticket-kicker{ font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted-on-paper); }
.hero-ticket-band{ font-family: var(--font-display); font-size: 30px; margin-top: 4px; line-height: 1; }
.hero-ticket-num{ font-family: var(--font-display); font-size: 13px; color: var(--muted-on-paper); text-align: right; }
.hero-ticket-body{ padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.hero-ticket-field{ }
.hero-ticket-field .label{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--muted-on-paper); }
.hero-ticket-field .value{ font-size: 15.5px; font-weight: 700; margin-top: 3px; }
.hero-ticket-admit{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--line-on-paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-ticket-admit .admit{ font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; color: var(--coral); }
.hero-ticket-admit .price{ font-family: var(--font-display); font-size: 20px; }

/* =================================================================
   Section scaffolding
================================================================= */
.section{ padding: 70px 0; }
.section + .section{ border-top: 1px solid var(--line-on-ink); }
.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }
.section-head .sub{ color: var(--muted-on-ink); font-size: 15px; max-width: 44ch; }
.section-link{ font-weight: 700; font-size: 14.5px; color: var(--marigold); white-space: nowrap; }
.section-link:hover{ text-decoration: underline; }

.on-paper .section-head .sub{ color: var(--muted-on-paper); }
.on-paper .section + .section{ border-top-color: var(--line-on-paper); }

/* =================================================================
   Event rail (horizontal scroll) + grid
================================================================= */
.rail{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  /* Deliberately NOT `scroll-behavior: smooth`. Smooth scrolling was
     measured doing nothing at all here — both
     scrollBy({behavior:"smooth"}) and, once this property was set, a
     plain scrollLeft assignment left the rail at 0 — while
     behavior:"auto" scrolled correctly every time. Rather than ship an
     animation that couldn't be verified and whose failure mode is a
     button that appears dead, the buttons jump. A working control
     beats a prettier one that might not move. */
}
.rail::-webkit-scrollbar{ height: 8px; }
.rail::-webkit-scrollbar-thumb{ background: var(--line-on-ink); border-radius: 8px; }
.rail .ticket-card{ flex: 0 0 300px; scroll-snap-align: start; }

/* The rail used to be scroll-only, which on a trackpad-less desktop
   left no visible way to reach the cards past the fold. These are
   deliberately solid marigold discs rather than the usual ghosted
   chevrons — on this dark ground a subtle control reads as decoration
   and gets missed entirely, which was the original complaint. */
.rail-wrap{ position: relative; }
.rail-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--marigold);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.rail-btn:hover{ transform: translateY(-50%) scale(1.08); }
.rail-btn:focus-visible{ outline: 3px solid var(--paper); outline-offset: 2px; }
.rail-btn svg{
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-prev{ left: -18px; }
.rail-next{ right: -18px; }
/* Hidden rather than merely dimmed at the ends: a button that cannot
   do anything shouldn't invite a click. */
.rail-btn[hidden]{ display: none; }

@media (max-width: 680px){
  /* No room to sit outside the rail on a phone, and touch scrolling
     makes them redundant there anyway. */
  .rail-btn{ display: none; }
}

.event-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Ticket-stub card */
.ticket-card{
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.ticket-card:hover{ transform: translateY(-3px); }
.ticket-card-top{
  padding: 18px 18px 16px;
  border-bottom: 2px dashed var(--line-on-paper);
  position: relative;
}
.ticket-card-top::before,
.ticket-card-top::after{
  content: "";
  position: absolute;
  bottom: -10px;
  width: 20px; height: 20px;
  background: var(--ink);
  border-radius: 50%;
}
.ticket-card-top::before{ left: -10px; }
.ticket-card-top::after{ right: -10px; }
.ticket-genre{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--coral);
  margin-bottom: 8px;
}
.ticket-title{
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.05;
}
.ticket-card-body{
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ticket-meta-row{
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted-on-paper);
  gap: 10px;
}
.ticket-meta-row strong{ color: var(--ink); font-weight: 700; }
.ticket-blurb{ font-size: 14px; color: var(--muted-on-paper); flex: 1; }
.ticket-card-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.ticket-price{ font-family: var(--font-display); font-size: 17px; }
.ticket-card-cta{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-on-paper);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--coral);
}
.ticket-card:hover .ticket-card-cta{ color: var(--marigold-dim); }
.badge{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--marigold);
}

/* =================================================================
   Newsletter band
================================================================= */
.band{
  background: var(--marigold);
  color: var(--ink);
  padding: 54px 0;
}
.band .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.band h2{ font-size: clamp(26px, 3.2vw, 36px); max-width: 16ch; }
.band-sub{ font-size: 15px; margin-top: 8px; max-width: 40ch; }
.band-form{ display: flex; gap: 10px; flex-wrap: wrap; }
.band-form input{
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 13px 16px;
  border-radius: 3px;
  font-size: 15px;
  min-width: 240px;
}
.form-note{ font-size: 12.5px; margin-top: 8px; opacity: 0.75; }

/* =================================================================
   Venue cards
================================================================= */
.venue-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.venue-card{
  background: var(--ink-raised);
  border: 1px solid var(--line-on-ink);
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.venue-swatch{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--marigold) 0%, var(--coral) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.venue-swatch svg{
  width: 42%;
  height: 42%;
  opacity: 0.92;
}

/* Real venue imagery. The icon stays in the DOM underneath and is
   hidden only while an image is actually showing, so a dead URL falls
   back to it via the img's onerror with no markup rebuild. */
.venue-swatch.has-image svg,
.venue-swatch.has-image > span{ /* kind label is re-shown below, over the image */ }
.venue-swatch.has-image svg{ display: none; }
.venue-swatch img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* A photograph fills the frame. */
.venue-swatch.is-photo img{ object-fit: cover; }
.venue-swatch.is-photo::after{
  /* keeps the kind label legible over a bright photo */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  pointer-events: none;
}
/* A logo is contained on a light panel — cropping one cuts the
   wordmark in half, and most are dark ink on transparency, which would
   vanish against the card's own dark ground. */
.venue-swatch.is-logo{ background: #f4f1ea; }
.venue-swatch.is-logo img{ object-fit: contain; padding: 14px; }
.venue-swatch.is-logo > span{
  color: var(--ink);
  background: rgba(255,255,255,0.82);
  padding: 2px 7px;
  border-radius: 4px;
}
.venue-swatch.has-image > span{ z-index: 2; }
.venue-credit{
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 2;
  max-width: 62%;
  font-size: 9.5px;
  line-height: 1.25;
  text-align: right;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.venue-swatch.is-logo .venue-credit{
  color: rgba(0,0,0,0.55);
  text-shadow: none;
}
.venue-credit:hover{ text-decoration: underline; }
.venue-swatch span{
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  background: rgba(247,241,227,0.85);
  padding: 3px 8px;
  border-radius: 3px;
}
.venue-name{ font-family: var(--font-display); font-size: 22px; }
.venue-town{ color: var(--marigold); font-size: 13px; font-weight: 700; }
.venue-facts{ display: flex; gap: 16px; font-size: 13px; color: var(--muted-on-ink); }
.venue-blurb{ font-size: 14.5px; color: var(--muted-on-ink); flex: 1; }

/* =================================================================
   Footer
================================================================= */
.site-footer{
  background: var(--ink);
  border-top: 1px solid var(--line-on-ink);
  padding: 56px 0 30px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .brand{ margin-bottom: 14px; }
.footer-tagline{ color: var(--muted-on-ink); font-size: 14.5px; max-width: 32ch; }
.footer-col h4{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--marigold);
  margin-bottom: 14px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ font-size: 14.5px; color: var(--muted-on-ink); }
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line-on-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-on-ink);
}
.footer-bottom a{ color: var(--muted-on-ink); }
.footer-bottom a:hover{ color: var(--marigold); }

/* =================================================================
   Inner page headers
================================================================= */
.page-header{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line-on-ink);
}
.page-header h1{ font-size: clamp(38px, 5vw, 58px); }
.page-header .sub{ margin-top: 14px; color: var(--muted-on-ink); font-size: 16.5px; max-width: 58ch; }

/* =================================================================
   Filter bar (Events page)
================================================================= */
.filter-bar{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-on-ink);
  margin-bottom: 34px;
  position: sticky;
  top: 76px;
  background: var(--ink);
  z-index: 20;
}
.filter-field select,
.filter-field input{
  background: var(--ink-raised);
  border: 1.5px solid var(--line-on-ink);
  color: var(--paper);
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 14px;
  font-family: var(--font-body);
}
.filter-field select:focus, .filter-field input:focus{ border-color: var(--marigold); }
.filter-search{ flex: 1; min-width: 200px; }
.filter-search input{ width: 100%; }
.filter-count{ font-size: 13.5px; color: var(--muted-on-ink); margin-left: auto; white-space: nowrap; }
.filter-reset{
  background: none;
  border: none;
  color: var(--marigold);
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px;
}
.empty-state{
  padding: 60px 20px;
  text-align: center;
  color: var(--muted-on-ink);
  border: 1px dashed var(--line-on-ink);
  border-radius: 8px;
}
.empty-state h3{ font-family: var(--font-display); color: var(--paper); font-size: 22px; margin-bottom: 8px; }

/* =================================================================
   About / Contact pages
================================================================= */
.prose{ max-width: 62ch; font-size: 16.5px; color: var(--muted-on-ink); display: flex; flex-direction: column; gap: 18px; }
.prose strong{ color: var(--paper); }
/* A link in body copy inherited the paragraph's own muted colour with
   no underline, so it was indistinguishable from the text around it —
   privacy.html had been working around that with an inline style on its
   one link. Colour alone is not enough to mark a link in any case; the
   underline is what makes it identifiable without relying on colour
   perception. */
.prose a{ color: var(--marigold); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover, .prose a:focus-visible{ color: var(--paper); text-decoration-thickness: 2px; }
.prose ul{ margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.stat-row{ display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.stat{ }
.stat .num{ font-family: var(--font-display); font-size: 40px; color: var(--marigold); line-height: 1; }
.stat .label{ font-size: 13px; color: var(--muted-on-ink); margin-top: 6px; }

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-form{ display: flex; flex-direction: column; gap: 16px; }
.field label{ display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 7px; color: var(--muted-on-ink); }
.field input, .field select, .field textarea{
  width: 100%;
  background: var(--ink-raised);
  border: 1.5px solid var(--line-on-ink);
  color: var(--paper);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 15px;
  font-family: var(--font-body);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--marigold); }
.field-error{ font-size: 12.5px; color: var(--coral); margin-top: 6px; display: none; }
.field.invalid input, .field.invalid textarea{ border-color: var(--coral); }
.field.invalid .field-error{ display: block; }
.form-status{
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--ink-raised);
  border: 1px solid var(--marigold);
  color: var(--marigold);
  font-size: 14.5px;
  font-weight: 600;
  display: none;
}
.form-status.show{ display: block; }

.info-card{
  background: var(--ink-raised);
  border: 1px solid var(--line-on-ink);
  border-radius: 8px;
  padding: 26px;
}
.info-card h3{ font-family: var(--font-display); font-size: 20px; margin-bottom: 16px; }
.info-list{ display: flex; flex-direction: column; gap: 14px; }
.info-list .row{ font-size: 14.5px; }
.info-list .row .k{ display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted-on-ink); margin-bottom: 3px; }
.info-list .row a{ color: var(--marigold); font-weight: 600; }

/* =================================================================
   Responsive
================================================================= */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-ticket{ transform: none; max-width: 420px; }
  .event-grid, .venue-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
}

/* The slide-in menu takes over at tablet widths.

   This was briefly set to 1080px, tuned to what the nav measured as
   needing on one line — which was the wrong instinct: it took the
   measurement as fixed and handed a mobile menu to 1024x768 laptops
   and landscape iPads, machines with a mouse and every reason to
   expect visible navigation. The measurement was mostly `gap`, so it
   got tightened above instead (and the nav lost a redundant link),
   leaving this free to sit where it belongs — real tablets and
   phones. Anything still too narrow wraps cleanly rather than
   mangling its labels. */
@media (max-width: 900px){
  .main-nav{
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    /* Reset the horizontal nav's right-alignment: in this column
       layout `flex-end` stacks the links against the bottom of the
       panel instead of the top. */
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 24px 28px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0.25s;
    /* `visibility: hidden` while closed keeps the panel's ten links out
       of the tab order and the accessibility tree; without it they are
       focusable off-screen. The transition on `visibility` is what lets
       the slide-out still be seen — it holds the panel visible for the
       duration of the transform.

       It is NOT here to stop horizontal overflow, and nothing else
       needs to be either: `document.body.scrollWidth` does report
       456px against a 390px viewport, but the panel is
       `position: fixed`, and the page does not actually scroll
       sideways (verified by scrolling it: `window.scrollX` stays 0).
       An earlier pass here added `overflow-x: clip` to <body> to
       "fix" that reading and was reverted — the number was
       misleading, not the behaviour. */
    /* The closed panel sits a full viewport-width off to the right,
       which made every page horizontally scrollable on a phone —
       body.scrollWidth was 456px against a 390px viewport, so a
       sideways swipe revealed an empty strip. Pre-existing on every
       page, not specific to any one of them.
       `visibility: hidden` takes it out of the scrollable area (and out
       of the tab order and the accessibility tree, which it should
       have been anyway) without breaking the slide-in, because the
       transition on `visibility` holds it visible for the duration of
       the transform. Fixing it here rather than with `overflow-x:
       hidden` on <body> keeps position:sticky working. */
    visibility: hidden;
  }
  .main-nav.open{ transform: translateX(0); visibility: visible; }
  .main-nav a{ padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line-on-ink); opacity: 1; }
  .nav-toggle{ display: block; }
  .header-actions .btn-marigold{ display: none; } /* replaced on mobile by .main-nav-cta below, so the CTA isn't lost, just relocated */
  .main-nav .main-nav-cta{ display: flex; justify-content: center; margin-top: 20px; width: 100%; }
}

@media (max-width: 680px){
  .event-grid, .venue-grid{ grid-template-columns: 1fr; }
  .band .wrap{ flex-direction: column; align-items: flex-start; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px; }
  .filter-bar{ position: static; }
  .hero{ padding: 50px 0 60px; }
  .section{ padding: 50px 0; }
}

/* Footer sub-items: "Public Library Events" and the two exclusion
   views read as narrower slices of the entry above them, so they're
   indented and set slightly smaller rather than sitting flush as
   siblings. The left border does the grouping work at a glance
   without needing a nested <ul>, which screen readers would announce
   as a whole new list. */
.footer-col .footer-sub{
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--line-on-ink);
}
.footer-col .footer-sub a{
  font-size: 13px;
  opacity: 0.78;
}
.footer-col .footer-sub a:hover{ opacity: 1; }

/* Checkbox filters sit in the same bar as the selects. They're
   toggles rather than another dropdown because they're independent of
   each other and of everything else — "exclude bookstores" and
   "exclude book clubs" can both be on, and a select would imply a
   single choice. */
.filter-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper);
  opacity: 0.85;
  white-space: nowrap;
  cursor: pointer;
  padding: 0 4px;
}
.filter-toggle:hover{ opacity: 1; }
/* The one exclusion that is common enough to earn a place outside the
   filter menu (107 of this site's entries are libraries). Styled as a
   real control rather than a bare checkbox so it doesn't read as menu
   overflow sitting next to the selects. */
.filter-toggle-strong{
  opacity: 1;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 700;
}
.filter-toggle-strong:hover{ background: rgba(255,255,255,0.13); }
.filter-toggle-strong:has(input:checked){
  background: rgba(245,183,0,0.16);
  border-color: var(--marigold);
}

/* Exclusion menu on the events page. A <details> rather than a custom
   popover so it opens with the keyboard and works with no JS at all;
   the script only closes it on an outside click and keeps the count
   badge current. The panel is absolutely positioned so opening it
   doesn't reflow the filter bar underneath it. */
.filter-menu{ position: relative; }
.filter-menu > summary{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--paper);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 9px 14px;
  white-space: nowrap;
}
.filter-menu > summary::-webkit-details-marker{ display: none; }
.filter-menu > summary::after{
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.filter-menu[open] > summary::after{ transform: translateY(1px) rotate(-135deg); }
.filter-menu > summary:hover{ background: rgba(255,255,255,0.13); }
.filter-menu-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--marigold);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 800;
}
/* `display: inline-flex` above out-specifies the browser's default
   `[hidden]{display:none}`, so the count badge rendered a literal "0"
   when nothing was excluded. */
.filter-menu-count[hidden]{ display: none; }

.filter-menu-panel{
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: min(88vw, 460px);
  max-height: 62vh;
  overflow-y: auto;
  padding: 16px 18px;
  border-radius: 12px;
  background: #1d2129;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.filter-menu-hint{
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--paper);
  opacity: 0.6;
}
.filter-menu-panel fieldset{
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.filter-menu-panel fieldset:last-child{ margin-bottom: 0; }
.filter-menu-panel legend{
  padding: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--marigold);
}
.filter-menu-group{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 18px;
}
.filter-menu-group .filter-toggle{
  padding: 3px 0;
  white-space: normal;
}
@media (max-width: 560px){
  .filter-menu-panel{ left: auto; right: 0; }
  .filter-menu-group{ grid-template-columns: 1fr; }
}
.filter-toggle input{
  width: 15px;
  height: 15px;
  accent-color: var(--marigold);
  cursor: pointer;
}

/* Leaflet needs an explicit height or it collapses to nothing. */
#venue-map{
  height: 620px;
  border-radius: 14px;
  border: 1px solid var(--line-on-ink);
  overflow: hidden;
  background: var(--ink-2, #1a1815);
}
@media (max-width: 680px){ #venue-map{ height: 460px; } }
/* Leaflet's popups default to white-on-white; match the site instead. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--line-on-ink);
}
.leaflet-popup-content{ font-size: 13.5px; line-height: 1.5; }
.leaflet-popup-content a{ color: var(--marigold); font-weight: 700; }
.leaflet-container{ background: #101827; font-family: inherit; }

/* Event poster. A 4:3 slot rather than 16:9 — posters are mostly
   square, and the wider slot was cropping about half the height off a
   typical one. */
.ticket-card-media{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--line-on-ink);
  flex: 0 0 auto;
}
/* A blurred, darkened copy of the poster fills whatever the contained
   image doesn't, so a square or portrait poster sits on something that
   belongs to it rather than on empty letterbox bars. */
.ticket-card-media.has-poster::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.5) saturate(1.15);
  transform: scale(1.2);
}
.ticket-card-media img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* `contain`, not `cover`: show the whole poster. Cropping was tried
     and rejected — it guarantees a full card but silently cuts the
     bottom off tall flyers, and a gig poster's own text is part of the
     artwork. Where the image doesn't fill the 4:3 slot, the blurred
     copy of itself behind it (`--poster`, above) fills the rest, so a
     square or portrait poster sits on something that belongs to it
     rather than in empty bars. Nothing is scaled non-uniformly, so no
     logo or lettering is ever stretched. */
  object-fit: contain;
  object-position: 50% 50%;
}
/* A borrowed venue photograph is scenery, not the subject, so it is
   centred and held back a little from the event's own artwork. */
.ticket-card-media.is-venue-photo img{
  object-position: 50% 50%;
  filter: saturate(0.9) brightness(0.82);
}
/* A borrowed venue LOGO is not scenery and must not be cropped: a
   wordmark sliced in half reads as a broken image, and most of these
   are dark ink on transparency, so they would disappear against the
   card's dark ground. Contained on a light plate they read as a
   deliberate brand panel — the same treatment the Venues page gives
   them. The blurred `--poster` backdrop is suppressed for the same
   reason: a blown-up logo behind a logo just looks like a mistake. */
.ticket-card-media.is-venue-logo{ background: #f4f1ea; }
.ticket-card-media.is-venue-logo::before{ display: none; }
.ticket-card-media.is-venue-logo img{
  object-fit: contain;
  object-position: 50% 50%;
  padding: 16px;
}

/* The picture and the title open the venue's listing; the price opens
   the box office. Both are real links now that the card is no longer
   one big anchor. */
.ticket-card-media-link{ display: block; }
.ticket-title-link{ color: inherit; text-decoration: none; }
.ticket-title-link:hover .ticket-title{ text-decoration: underline; }
.ticket-price-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--marigold);
}
.ticket-price-link:hover{ color: var(--coral); }
/* Sits behind the poster and shows through only when there isn't one
   (or it failed to load). */
.ticket-card-media-icon{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(240,180,41,0.16), rgba(240,180,41,0.04));
}
.ticket-card-media.has-poster .ticket-card-media-icon{ display: none; }
.ticket-card-media-icon svg{ width: 56px; height: 56px; opacity: 0.55; }
.rail .ticket-card .ticket-card-media{ aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------
   Calendar page
----------------------------------------------------------------- */
.cal-bar{ align-items: center; }
.cal-nav{
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-arrow{
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--paper);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
}
.cal-arrow svg{ width: 20px; height: 20px; }
.cal-arrow:hover:not(:disabled){ background: rgba(255,255,255,0.15); }
.cal-arrow:disabled{ opacity: 0.32; cursor: default; }
.cal-nav .filter-field select{ min-width: 168px; }

.cal-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.cal-weekdays span{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
  padding-left: 2px;
}
.cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-cell{
  min-height: 132px;
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.cal-cell.is-empty{ background: none; border-color: transparent; }
.cal-cell.is-quiet{ background: rgba(255,255,255,0.02); }
.cal-cell.is-past{ opacity: 0.5; }
.cal-cell.is-today{
  border-color: var(--marigold);
  background: rgba(245,183,0,0.10);
}
.cal-daynum{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--paper);
}
.cal-cell.is-today .cal-daynum span{ color: var(--marigold); }
.cal-daynum em{
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  opacity: 0.8;
}
/* The day's events scroll inside their own cell rather than stretching
   the whole row — one busy Saturday shouldn't make every other week
   400px tall. */
.cal-events{
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 168px;
  scrollbar-width: thin;
}
.cal-event{
  display: block;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  border-left: 3px solid var(--marigold);
}
a.cal-event:hover{ background: #fff; border-left-color: var(--coral); }
.cal-time{
  display: block;
  font-weight: 700;
  font-size: 10px;
  opacity: 0.65;
}
.cal-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
}

/* A seven-column grid is unreadable on a phone. Below 760px the month
   becomes a vertical list of the days that actually have something on,
   which is the useful half of a calendar at that width. */
@media (max-width: 760px){
  .cal-weekdays{ display: none; }
  .cal-grid{ grid-template-columns: 1fr; gap: 6px; }
  .cal-cell{ min-height: 0; flex-direction: row; align-items: flex-start; gap: 12px; }
  .cal-cell.is-empty, .cal-cell.is-quiet{ display: none; }
  .cal-daynum{ flex: 0 0 44px; flex-direction: column; align-items: flex-start; gap: 3px; }
  .cal-events{ flex: 1; max-height: none; overflow: visible; }
  .cal-title{ -webkit-line-clamp: 3; }
}


/* ---------------------------------------------------------------
   Pagination
----------------------------------------------------------------- */
.pager{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.pager-status{
  margin: 0;
  font-size: 13.5px;
  color: var(--paper);
  opacity: 0.65;
}
.pager-status strong{ opacity: 1; }
.pager-controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pager-num,
.pager-step{
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--paper);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
}
.pager-num:hover:not(.is-current),
.pager-step:hover:not(:disabled){ background: rgba(255,255,255,0.15); }
.pager-num.is-current{
  background: var(--marigold);
  border-color: var(--marigold);
  color: var(--ink);
  cursor: default;
}
.pager-step:disabled{ opacity: 0.32; cursor: default; }
.pager-gap{ padding: 0 2px; color: var(--paper); opacity: 0.4; }

/* Several showings of the same thing on one day: one card, one link per
   showtime, because each sells separately. */
.ticket-showtimes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.ticket-showtimes-label{
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-right: 2px;
}
.ticket-showtime{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(21,24,30,0.07);
  border: 1px solid rgba(21,24,30,0.18);
  text-decoration: none;
}
a.ticket-showtime:hover{
  background: var(--marigold);
  border-color: var(--marigold);
}
.ticket-showtime.is-plain{ opacity: 0.6; }

/* The hero ticket is a link now that it carries a real event.
   NOT `color: inherit` — that inherits the hero's cream text onto the
   ticket's cream background and makes every value invisible, which is
   exactly what happened. The stub keeps its own ink colour from
   `.hero-ticket` above. */
a.hero-ticket{ text-decoration: none; color: var(--ink); display: block; }
/* `display: block` above out-specifies the browser's `[hidden]`
   default, exactly as the filter badge did. Without this the empty stub
   would show whenever events.json fails to load — the one case the
   hidden attribute exists to cover. */
a.hero-ticket[hidden]{ display: none; }
a.hero-ticket:hover{ transform: rotate(-1deg) translateY(-2px); }
.hero-ticket-band{ overflow-wrap: anywhere; }

/* Hover mini-card on the venue map. Leaflet's default tooltip is a
   small white label, so almost all of this is undoing that to let a
   real card sit inside it. */
.leaflet-tooltip.venue-tip{
  padding: 0;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
  width: 236px;
  white-space: normal;
  overflow: hidden;
}
.leaflet-tooltip.venue-tip::before{ border-top-color: var(--paper); }
.venue-tip-media{
  height: 108px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.venue-tip-media img{ width: 100%; height: 100%; display: block; }
.venue-tip-media.is-photo img{ object-fit: cover; }
.venue-tip-media.is-logo{ background: #f4f1ea; }
.venue-tip-media.is-logo img{ object-fit: contain; padding: 10px; }
.venue-tip-media.is-icon{ background: linear-gradient(135deg, var(--marigold) 0%, var(--coral) 100%); }
.venue-tip-media.is-icon svg{ width: 38%; height: 38%; }
.venue-tip-body{ padding: 10px 12px 12px; }
.venue-tip-name{ font-family: var(--font-display); font-size: 16px; line-height: 1.15; }
.venue-tip-meta{ font-size: 11.5px; opacity: 0.7; margin-top: 3px; }
.venue-tip-count{ font-size: 11.5px; font-weight: 700; margin-top: 6px; opacity: 0.55; }
.venue-tip-count.has-events{ color: var(--coral); opacity: 1; }

/* Fixture card: both clubs' badges either side of a diagonal split.
   Two flex halves with straight edges, plus a rotated bar drawn between
   them for the diagonal. An earlier version positioned both halves
   absolutely across the WHOLE card and clipped each with a percentage
   polygon; the badges were then sized against the full card rather than
   their own half, so the home crest overflowed the split and hid the
   away one. Halving the box first makes the sizing obvious. */
.ticket-card-media.is-matchup{
  display: flex;
  background: var(--ink);
}
.matchup-side{
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14% 9%;
}
.matchup-side.is-home{ background: #f4f1ea; }
.matchup-side.is-away{ background: #1d2129; }
.matchup-side img{
  /* `.ticket-card-media img` above pins every card image absolutely at
     100% x 100% for the poster treatment. A badge must opt out of that
     entirely or it fills the whole card and covers the other club —
     which is exactly what it did. */
  position: static;
  inset: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* The diagonal itself. Drawn rather than clipped so neither badge is
   ever cut into. */
.ticket-card-media.is-matchup::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: 6px;
  height: 124%;
  background: var(--marigold);
  transform: translateX(-50%) rotate(11deg);
  pointer-events: none;
}
.matchup-vs{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--marigold);
  pointer-events: none;
}

/* Calendar: a day you can open ------------------------------------- */
.cal-cell.is-openable{ cursor: pointer; }
.cal-cell.is-openable:hover,
.cal-cell.is-openable:focus-visible{
  border-color: var(--marigold);
  background: rgba(245,183,0,0.08);
  outline: none;
}

.day-dialog{
  width: min(1100px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.day-dialog::backdrop{ background: rgba(0,0,0,0.62); }
.day-dialog-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  background: var(--ink);
  border-bottom: 1px solid var(--line-on-ink);
}
.day-dialog-head h2{ margin: 0; font-size: 24px; }
.day-dialog-close{
  flex: none;
  width: 38px; height: 38px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--paper);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
}
.day-dialog-close:hover{ background: rgba(255,255,255,0.16); }
.day-dialog .event-grid{
  padding: 22px 24px 26px;
  overflow-y: auto;
  max-height: calc(88vh - 78px);
}

/* Venue contact details, under the blurb on a venue card. */
.venue-contact{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 16px;
}
.venue-contact-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--paper);
  opacity: 0.72;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.venue-contact-row:hover{ opacity: 1; color: var(--marigold); }
.venue-contact-icon{
  flex: none;
  width: 15px;
  text-align: center;
  opacity: 0.85;
}

/* A short line of context above the date — the repertory series a
   screening belongs to, or a film's director. */
.ticket-note{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--coral);
  margin-bottom: 6px;
}