/* =========================================================
   Manchester Cocktail Festival — holding page
   Palette: Bumblebee #efb91c, Cotton #f4dde6, Red #e34f33
   Type: BluuNext (display), Share Tech Mono (mono)
   ========================================================= */

@font-face {
  font-family: "BluuNext";
  src: url("../Fonts/BluuNext-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BluuNext";
  src: url("../Fonts/BluuNext-Bolditalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ShareTechMono";
  src: url("../Fonts/Share-TechMono.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --yellow: #efb91c;
  --cotton: #f4dde6;
  --red:    #e34f33;
  --ink:    #191512;
  --display: "BluuNext", Georgia, "Times New Roman", serif;
  --mono: "ShareTechMono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { background: var(--ink); overscroll-behavior: none; }
body {
  font-family: var(--mono);
  color: var(--ink);
  background: var(--ink);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  /* Share Tech Mono ships broken fi and fl ligature glyphs, which render as a
     single dot, so "confines" comes out as "con.nes". Turn them off here and
     switch them back on for the display face, whose ligatures are fine. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.66rem, 1.4vw, 0.8rem);
  margin-bottom: 1.2rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(1.4rem, 4vw, 2.4rem);
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem);
  background: var(--ink);
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s ease; z-index: 0;
}
.hero-bg.is-active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.55) 0%, rgba(20, 16, 12, 0.42) 42%, rgba(20, 16, 12, 0.72) 100%);
}
.hero-logo, .hero-eyebrow, .scroll-cue { position: relative; z-index: 2; }
.hero-logo { width: min(80%, 600px); height: auto; filter: brightness(0) invert(1); }
.hero-eyebrow {
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.34em;
  font-size: clamp(0.85rem, 2.1vw, 1.12rem);
  color: var(--yellow);
}
.hero-sub {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(1.5rem, 5vw, 3rem); line-height: 1.1;
  color: var(--cotton);
}
.scroll-cue {
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.24em; font-size: 0.72rem; text-decoration: none;
  color: var(--cotton);
  border: 1.5px solid var(--cotton); border-radius: 100px;
  padding: 0.7rem 1.4rem; transition: background-color 0.2s ease, color 0.2s ease;
}
.scroll-cue:hover { background: var(--cotton); color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 3rem); }
.section-inner { max-width: 640px; margin: 0 auto; }
.section--cotton { background: var(--cotton); }
/* centres everything inside a section, used on the passes page */
.section--center .section-inner { text-align: center; }
/* an h1 used as the page's opening title, where there is no .page-head
   above it. Matches .page-head h1, with clearance for the fixed nav. */
.section--center h1 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 1rem;
}
.page-body > .section:first-child { padding-top: clamp(7rem, 15vw, 11rem); }
/* extra specificity so it beats .section .lead further down the sheet */
.section.section--center .lead {
  margin-left: auto; margin-right: auto;
  margin-bottom: 1.1rem;            /* match the paragraph rhythm below it */
}
.section--ink { background: var(--ink); color: var(--cotton); }
.section--ink .kicker { color: var(--yellow); }
.section-inner p + p { margin-top: 1.1rem; }
/* Shaker: small fixed top-left brand mark, turns 45deg and shakes on hover */
.shaker {
  position: fixed; top: clamp(0.9rem, 2vw, 1.5rem); left: clamp(1rem, 3vw, 1.9rem); z-index: 100;
  display: block; width: clamp(30px, 4.2vw, 42px); height: auto;
  transform-origin: center; will-change: transform;
}

.section h2 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(1.8rem, 5.5vw, 3rem); line-height: 1.05; margin-bottom: 1rem;
}
.section .lead { font-size: clamp(0.95rem, 1.9vw, 1.1rem); margin-bottom: 2.4rem; }

/* ---------- Form ---------- */
/* copy sitting directly above a form needs the same gap a .lead gives */
.form-intro { margin-bottom: 2.4rem; }
.gi-form { display: grid; gap: 1.1rem; }
.gi-form label {
  display: flex; flex-direction: column; gap: 0.45rem;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem;
}
.gi-form input,
.gi-form textarea {
  font-family: var(--mono); font-size: 0.95rem; color: var(--ink);
  background: #fffdf7; border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 0.8rem 0.9rem; width: 100%;
}
.gi-form input:focus,
.gi-form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.gi-form textarea { resize: vertical; min-height: 7rem; }
/* Primary action, used on every form across the site */
/* Larger call to action. Not currently used on the passes page, which
   embeds Stripe's own button, but kept for any other buy CTA. */
.btn--buy {
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  padding: 1.15rem 2.6rem;
  margin-top: 0.6rem;
}
.btn--buy:hover { transform: translateY(-2px); }

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.8rem; color: var(--cotton); background: var(--red);
  border: 1.5px solid var(--red); border-radius: 100px; padding: 0.85rem 1.8rem;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--ink); border-color: var(--ink); }

.gi-form .btn { justify-self: start; margin-top: 0.4rem; }
.hp { position: absolute; left: -9999px; }
.form-note { margin-top: 1.2rem; font-size: 0.78rem; opacity: 0.75; }

/* ---------- Partners ---------- */
.partners { text-align: center; background: var(--yellow); }
.logo-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem); margin-top: 0.5rem;
}
.logo-slot {
  width: clamp(130px, 22vw, 180px); aspect-ratio: 5 / 3;
  display: flex; align-items: center; justify-content: center;
}
/* the slots are links now, so give them something to say so on hover */
a.logo-slot img { transition: opacity 0.2s ease, transform 0.3s ease; }
a.logo-slot:hover img,
a.logo-slot:focus-visible img { opacity: 0.55; transform: scale(1.04); }
/* Open slots: dotted rather than dashed, so they read as an invitation
   rather than as artwork that failed to load. */
.logo-slot:empty,
.logo-slot--open {
  border: 1.5px dotted rgba(25, 21, 18, 0.45); border-radius: 6px;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(25, 21, 18, 0.5);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.partners .logo-row:hover .logo-slot--open { border-color: rgba(25, 21, 18, 0.7); color: rgba(25, 21, 18, 0.75); }

.partners-note {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: clamp(0.66rem, 1.4vw, 0.78rem);
  color: rgba(25, 21, 18, 0.75);
}
.partners-note a { color: var(--ink); text-underline-offset: 4px; }
.partners-note a:hover { color: var(--red); }
/* Optical sizing. Wide wordmarks all land on the same width; a squarer or
   angled mark is capped by height instead, so it does not tower over them. */
.logo-slot img {
  width: auto; height: auto;
  max-width: 80%; max-height: 55%;
  object-fit: contain;
}
.logo-slot--tall img { max-width: 62%; max-height: 66%; }

/* ---------- Site nav ---------- */
/* Full-width so the scrim keeps the links legible over the cotton and yellow
   sections as they scroll past; pointer-events let clicks through to the shaker. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: flex-end;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(0.95rem, 2vw, 1.6rem) clamp(1.25rem, 4vw, 2.4rem);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: clamp(0.62rem, 1.4vw, 0.74rem);
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.8) 0%, rgba(20, 16, 12, 0) 100%);
  pointer-events: none;
}
.site-nav a {
  pointer-events: auto;
  white-space: nowrap;
  text-decoration: none; color: var(--cotton);
  padding-bottom: 3px; border-bottom: 1.5px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover { color: var(--yellow); }
.site-nav a[aria-current="page"] { color: var(--yellow); border-bottom-color: var(--yellow); }

/* Shaker doubles as the home link on inner pages */
.shaker-home {
  position: fixed; z-index: 101; display: block;
  top: clamp(0.9rem, 2vw, 1.5rem); left: clamp(1rem, 3vw, 1.9rem);
  width: clamp(30px, 4.2vw, 42px);
}
.shaker-home .shaker { position: static; width: 100%; }

/* ---------- Inner page header ---------- */
.page-head {
  background: var(--ink); color: var(--cotton); text-align: center;
  padding: clamp(7rem, 15vw, 11rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.page-head .kicker { color: var(--yellow); }
.page-head h1 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 1rem;
}
.page-head .lead {
  margin: 0 auto; max-width: 52ch;
  font-size: clamp(0.95rem, 1.9vw, 1.1rem);
}

/* Outline button for use on the dark page header */
.btn-ghost {
  display: inline-block; margin-top: clamp(1.4rem, 3vw, 2rem);
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.24em; font-size: 0.72rem; text-decoration: none;
  color: var(--cotton);
  border: 1.5px solid var(--cotton); border-radius: 100px;
  padding: 0.8rem 1.6rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover { background: var(--cotton); color: var(--ink); }

/* ---------- Portfolio grid (brands, bars) ---------- */
/* Tiles are square. Placement is the product: tier--2 is the paid headline row,
   tier--4 is standard. tier--3 is there if a middle tier is ever needed.
   Everything is greyscale until hover, then it comes up in colour. */
.section-inner--wide { max-width: 1240px; }

/* Section label above each partner group. Sits tight to its own grid and
   keeps clear air above, so the groups read as separate blocks. */
/* Section title as a full-bleed yellow band with the text in ink. The
   section is flush (no padding of its own) so the band runs edge to edge
   and the heading carries its own padding. The page head above is outside
   this section, so the top of the page is untouched. */
/* Full-bleed yellow band holding a kicker and the section title, both in
   ink. The section is flush so the band runs edge to edge. The page head
   above sits outside this section, so the top of the page is untouched. */
.tier-band {
  background: var(--yellow);
  color: var(--ink);
  padding: clamp(2.8rem, 6.5vw, 4.4rem) clamp(1.25rem, 5vw, 3rem) clamp(1.6rem, 3.6vw, 2.4rem);
  text-align: center;
}
.tier-kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.66rem, 1.4vw, 0.8rem);
  margin-bottom: 0.25rem;
  color: var(--ink);
}
/* selector carries h2 so it outranks .section h2, whose margin-bottom
   would otherwise show as a dark strip under the band */
.section h2.tier-heading {
  margin: 0;
  color: var(--ink);
}
.tier-band + .tier { margin-top: 0; }

.tier {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
/* One tile running the full width, used for a single-partner section */
.tier--1 { grid-template-columns: 1fr; }
.tier--1 .tile { aspect-ratio: 5 / 1; }

.tier--2 { grid-template-columns: repeat(2, 1fr); }
/* Paid placements are double WIDTH, not double height. Without this they
   inherit the square aspect of .tile and tower over the standard grid. */
.tier--2 .tile { aspect-ratio: 2 / 1; }
.tier--3 { grid-template-columns: repeat(3, 1fr); }
.tier--4 { grid-template-columns: repeat(4, 1fr); }
.tier--6 { grid-template-columns: repeat(6, 1fr); }
.tier--7 { grid-template-columns: repeat(7, 1fr); }

.tile {
  position: relative; display: flex;
  align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; overflow: hidden;
  text-decoration: none; text-align: center;
  padding: 1rem;
  /* shows through until a photo is dropped in, so a tile with no image
     reads as deliberate rather than broken */
  background: var(--ink);
}

/* works as an <img> or as a <span> with a background-color stand-in */
.tile-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.55s ease, transform 0.7s ease;
}
.tile:hover .tile-media,
.tile:focus-visible .tile-media { filter: grayscale(0); transform: scale(1.05); }

.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(20, 16, 12, 0.45);
  transition: background-color 0.45s ease;
}
.tile:hover::after,
.tile:focus-visible::after { background: rgba(20, 16, 12, 0.25); }

/* Partner logo, sitting where the name would. The artwork is knocked out
   white, so it reads straight off the scrim. Width is capped rather than
   height because the logos run from very wide to nearly square. */
.tile-logo {
  position: relative; z-index: 2;
  width: min(46%, 168px); max-height: 34%;
  height: auto; object-fit: contain;
  filter: drop-shadow(0 2px 12px rgba(20, 16, 12, 0.5));
}

.tile-name {
  position: relative; z-index: 2;
  font-family: var(--display); font-weight: 700; line-height: 1.05;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  color: var(--cotton);
  text-shadow: 0 1px 3px rgba(20, 16, 12, 0.55), 0 2px 22px rgba(20, 16, 12, 0.45);
}
.tier--2 .tile-name { font-size: clamp(1.5rem, 4.2vw, 3.2rem); }
.tier--3 .tile-name { font-size: clamp(1.1rem, 2.8vw, 2.1rem); }
.tier--4 .tile-name { font-size: clamp(0.9rem, 2.1vw, 1.7rem); }

.tile:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

@media (max-width: 900px) {
  .tier--4 { grid-template-columns: repeat(2, 1fr); }
  .tier--3 { grid-template-columns: repeat(2, 1fr); }
  .tier--6 { grid-template-columns: repeat(3, 1fr); }
  .tier--7 { grid-template-columns: repeat(3, 1fr); }
  .tier--1 .tile { aspect-ratio: 3 / 1; }
  .tier--4 .tile-name { font-size: clamp(1.1rem, 3.6vw, 1.8rem); }
}
@media (max-width: 560px) {
  /* trailing half of a lead that is not worth the extra line on a phone */
  .lead-rest { display: none; }
  .tier--2 { grid-template-columns: 1fr; }
  .tier--6 { grid-template-columns: repeat(2, 1fr); }
  .tier--7 { grid-template-columns: repeat(2, 1fr); }
  .tier--1 .tile { aspect-ratio: 2 / 1; }
}

/* Flush layout: tiles butt against each other and run to the viewport edges.
   Bars uses .grid-flush (one flat grid). Brands keeps its tiers but drops the
   gaps and the side padding. Any .section-inner inside supplies its own padding
   so a kicker can still sit in from the edge. */
.section--flush { padding: 0; }
.section--flush .section-inner {
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.6rem);
}
.section--flush .tier { gap: 0; margin-top: 0; }

.grid-flush {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 0;
}
.grid-flush .tile-name { font-size: clamp(1.1rem, 2.6vw, 2rem); }

@media (max-width: 900px) {
  .grid-flush { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Event list (rendered from js/events-data.js) ---------- */
.event-list { margin-top: clamp(2rem, 5vw, 3rem); text-align: left; }
.events-empty { font-size: 0.95rem; opacity: 0.7; padding: 2rem 0; }

.event {
  display: grid;
  grid-template-columns: 4.5rem 6.5rem 1fr auto;
  gap: clamp(1rem, 2.5vw, 1.8rem); align-items: start;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-top: 1.5px solid rgba(25, 21, 18, 0.22);
  text-decoration: none; color: inherit;
  transition: opacity 0.2s ease;
}
.event:last-child { border-bottom: 1.5px solid rgba(25, 21, 18, 0.22); }
.event:hover { opacity: 0.62; }
.event:hover .btn-sm { background: var(--ink); color: var(--cotton); }

.event-logo-wrap { display: block; min-height: 1px; }
.event-logo {
  width: 100%; height: auto; max-height: 4.5rem;
  object-fit: contain; object-position: left top;
}

.event-when {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.6rem; padding-top: 0.15rem;
}

/* Calendar tile: inverted month strip above a big day numeral in the
   display face, so the date is the thing the eye lands on. */
.event-cal {
  display: block; width: 5.5rem;
  border: 1.5px solid var(--ink); border-radius: 5px;
  overflow: hidden; text-align: center; line-height: 1;
}
.event-cal-month {
  display: block; background: var(--ink); color: var(--cotton);
  font-family: var(--mono); text-transform: uppercase;
  font-size: 0.7rem; letter-spacing: 0.3em;
  /* wide tracking leaves a gap after the last letter, nudge it back to centre */
  text-indent: 0.3em;
  padding: 0.42rem 0 0.38rem;
}
.event-cal-day {
  display: block; font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: 2.4rem; line-height: 1; color: var(--ink);
  padding: 0.5rem 0 0.1rem;
}
.event-cal-dow {
  display: block; font-family: var(--mono); text-transform: uppercase;
  font-size: 0.62rem; letter-spacing: 0.22em; text-indent: 0.22em;
  color: rgba(25, 21, 18, 0.7); padding: 0 0 0.5rem;
}

.event-time {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: clamp(0.8rem, 1.5vw, 0.9rem); line-height: 1.3;
  color: rgba(25, 21, 18, 0.78);
}

.event-body h3 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05;
}
.event-body .venue {
  font-size: clamp(0.66rem, 1.4vw, 0.8rem); text-transform: uppercase;
  letter-spacing: 0.28em; opacity: 0.7; margin: 0.35rem 0 0.7rem;
}
.event-body p { font-size: clamp(0.95rem, 1.9vw, 1.1rem); max-width: 46ch; }

.btn-sm {
  align-self: center; white-space: nowrap; text-decoration: none;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.7rem; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 0.6rem 1.3rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Past events: still listed, but dimmed and not clickable */
.event--past { opacity: 0.42; cursor: default; }
.event--past:hover { opacity: 0.42; }
.event--past .event-logo { filter: grayscale(1); }
.event--past .event-cal-month { background: rgba(25, 21, 18, 0.6); }
.event-past {
  align-self: center; white-space: nowrap;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.7rem; color: rgba(25, 21, 18, 0.75);
  border: 1.5px dashed rgba(25, 21, 18, 0.4); border-radius: 100px;
  padding: 0.6rem 1.3rem;
}
.event-past-note {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; color: var(--red); margin-bottom: 1rem;
}

/* ---------- Single event page ---------- */
.event-hero {
  position: relative; overflow: hidden; background: var(--ink);
  min-height: 72vh; min-height: 72svh;
  display: flex; align-items: flex-end;
  padding: clamp(7rem, 15vw, 11rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 5.5rem);
}
.event-hero-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.event-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.45) 0%, rgba(20, 16, 12, 0.35) 40%, rgba(20, 16, 12, 0.88) 100%);
}
.event-hero-inner { position: relative; z-index: 2; max-width: 56rem; color: var(--cotton); }
.event-hero .kicker {
  color: var(--yellow); margin-bottom: 0.9rem;
  font-size: clamp(0.95rem, 1.9vw, 1.1rem); letter-spacing: 0.16em;
  text-shadow: 0 1px 6px rgba(20, 16, 12, 0.6);
}
.event-hero h1 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 0.7rem;
}
.event-hero-bar {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.28em; font-size: clamp(0.66rem, 1.4vw, 0.8rem);
}
.event-hero-logo {
  width: clamp(64px, 9vw, 104px); height: auto;
  margin-bottom: clamp(1rem, 3vw, 1.8rem);
}

/* The hero date sits at the bottom of a tall photo and is easy to scroll past,
   so the same information is restated at the top of the copy. */
.event-when-line {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.4rem);
  padding-bottom: clamp(0.9rem, 2.2vw, 1.3rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1.5px solid rgba(25, 21, 18, 0.25);
}
.event-when-time {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: clamp(0.95rem, 1.9vw, 1.1rem);
  color: var(--ink);
}

/* Photos dropped into a bar's images folder, 02.jpg onwards */
.bar-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  background: var(--ink);
}
.bar-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bar-gallery:empty { display: none; }
@media (max-width: 760px) { .bar-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Address and opening hours on a bar page */
.bar-facts {
  display: grid; gap: clamp(0.9rem, 2vw, 1.2rem);
  padding-bottom: clamp(1.2rem, 3vw, 1.8rem);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  border-bottom: 1.5px solid rgba(25, 21, 18, 0.25);
}
.bar-fact dt {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.28em; font-size: clamp(0.66rem, 1.4vw, 0.8rem);
  opacity: 0.7; margin-bottom: 0.3rem;
}
.bar-fact dd {
  margin: 0; font-size: clamp(0.95rem, 1.9vw, 1.1rem);
}

/* room for the copy to breathe */
.event-blurb {
  font-size: clamp(0.95rem, 1.9vw, 1.1rem);
  line-height: 1.6;
}
.event-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 2.8rem); }
.event-actions--solo { margin-top: 0; }
.event-actions .btn-ghost { margin-top: 0; color: var(--ink); border-color: var(--ink); }
.event-actions .btn-ghost:hover { background: var(--ink); color: var(--cotton); }

@media (max-width: 760px) {
  .event { grid-template-columns: 3.5rem 1fr; gap: 1rem 1.2rem; }
  .event-when { grid-column: 2; flex-direction: row; align-items: center; gap: 1rem; padding-top: 0; }
  .event-body { grid-column: 2; }
  .btn-sm, .event-past { grid-column: 2; justify-self: start; align-self: start; margin-top: 0.4rem; }
}

/* ---------- Industry gate ---------- */
.gate {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6rem, 14vw, 9rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
  background: var(--ink); color: var(--cotton); text-align: center;
}
.gate-inner { max-width: 30rem; width: 100%; }
.gate .kicker { color: var(--yellow); }
.gate h1 {
  font-family: var(--display); font-weight: 700;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1;
  font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; margin-bottom: 1rem;
}
.gate .lead { font-size: clamp(0.95rem, 1.9vw, 1.05rem); margin-bottom: 2rem; }
.gate-form { display: grid; gap: 1rem; justify-items: center; }
.gate-form input {
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.1em;
  text-align: center; color: var(--cotton);
  background: transparent; border: 1.5px solid rgba(244, 221, 230, 0.5);
  border-radius: 100px; padding: 0.85rem 1.2rem; width: 100%;
}
.gate-form input::placeholder { color: rgba(244, 221, 230, 0.4); letter-spacing: 0.2em; }
.gate-form input:focus { outline: none; border-color: var(--yellow); }
.gate-form .btn { width: 100%; }
.gate-form .btn:hover {
  background: var(--yellow); border-color: var(--yellow); color: var(--ink);
}

.gate-error {
  color: var(--red); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.gate-note { margin-top: 1.6rem; font-size: 0.72rem; opacity: 0.6; }
.gate-note a { color: var(--yellow); }

/* ---------- Footer ---------- */
.foot {
  background: #231f20; color: var(--yellow);
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--cotton); }
.foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Mobile: bring the form margins in so the fixed shaker icon doesn't clash as it scrolls past */
@media (max-width: 640px) {
  #about, #contact { padding-left: 3.4rem; padding-right: 2rem; }
}