/* ==========================================================================
   Dott Daley — design system
   ========================================================================== */

:root {
  --ink: #141010;
  --ink-2: #1e1917;
  --ink-3: #2b2422;
  --paper: #f4efe3;
  --paper-dim: #e7e0d0;
  --orange: #ff4d20;
  --acid: #d8ff47;
  --purple: #6b39ff;
  --line: rgba(20, 16, 16, .16);
  --line-strong: rgba(20, 16, 16, .3);
  --line-dark: rgba(244, 239, 227, .16);
  --pad: clamp(20px, 4.2vw, 72px);
  --header: 72px;
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, .68, .3, 1);
  --ticker: 48px; /* the acid ticker band, borders included */
}

/* Inter Tight (SIL Open Font License), self-hosted. Picked as the closest
   free match to Neue Haas Grotesk, the licensed face posh.vip uses. One
   variable file covers every weight the site uses (400-600). */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Browsers default headings to 700, past the font's 600 ceiling; Posh sets
   headings at a medium weight. */
h1, h2, h3, h4 { font-weight: 500; }
strong, b { font-weight: 600; }

a { color: inherit; text-decoration: none; }
img { width: 100%; display: block; }
button { font: inherit; color: inherit; }
::selection { color: var(--paper); background: var(--purple); }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.dark :focus-visible { outline-color: var(--acid); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- type -------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
  margin: 0 0 18px;
  opacity: .72;
}

.display {
  font-size: clamp(52px, 8.4vw, 124px);
  line-height: .92;
  letter-spacing: -.033em;
  font-weight: 500;
  margin: 0;
}

/* One typeface throughout, like Posh: the accent word is set apart by
   colour alone, not a second serif face. */
.display em,
.section-head h2 em,
.contact-band h2 em {
  font-style: normal;
}

.display em { color: var(--orange); }

.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  max-width: 48ch;
  margin: 0;
  opacity: .82;
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #ff6338; }

.btn-acid { background: var(--acid); color: var(--ink); }
.btn-acid:hover { background: #e4ff6f; }

.btn-ghost { border-color: currentColor; background: transparent; }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dark .btn-ghost:hover,
.contact-band .btn-ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-solid-ink { background: var(--ink); color: var(--paper); }
.btn-solid-ink:hover { background: var(--ink-3); }

.btn-sm { padding: 10px 18px; font-size: 14px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid currentColor;
  font-size: 14px;
  font-weight: 500;
  transition: gap .2s var(--ease);
}

.text-link:hover { gap: 14px; }

/* --- header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header);
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s, border-color .3s, color .3s;
}

/* Over the dark hero the header inverts until the page scrolls past it. */
.site-header.on-dark {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
}

.site-header.scrolled {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-bottom-color: var(--line);
  color: var(--ink);
}

.brand {
  display: block;
  /* The vector logo has no built-in padding, so it is sized to sit inside
     the header with room to breathe (about 55px tall at most). */
  width: clamp(58px, 5.2vw, 70px);
  line-height: 0;
  flex: none;
}

.brand img { width: 100%; height: auto; }
.brand .mark-light { display: none; }
.site-header.on-dark .brand .mark-dark { display: none; }
.site-header.on-dark .brand .mark-light { display: block; }

.site-header nav {
  justify-self: center;
  display: flex;
  gap: clamp(18px, 2.6vw, 38px);
}

.site-header nav a {
  position: relative;
  font-size: 14px;
  padding: 6px 0;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0; right: 100%;
  bottom: 0;
  background: var(--orange);
  transition: right .28s var(--ease);
}

.site-header nav a:hover::after,
.site-header nav a[aria-current="page"]::after { right: 0; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger: two lines that fold into an X. */
.menu-button {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-button span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), top .5s cubic-bezier(.16, 1, .3, 1);
}

.menu-button span:nth-child(1) { top: 17px; }
.menu-button span:nth-child(2) { top: 25px; }
.menu-button[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* While the menu is open the header sits on the menu's ink, so it takes the
   light treatment regardless of where the page is scrolled. */
.site-header.menu-open {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--paper);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.menu-open .brand .mark-dark { display: none; }
.site-header.menu-open .brand .mark-light { display: block; }

/* Full-screen menu sheet (phones and small tablets). Built by site.js and
   kept outside the header, so the header's blur can't trap or clip it. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header) + 28px) var(--pad) max(28px, env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s .6s;
}

.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s 0s;
}

.mobile-menu nav { display: flex; flex-direction: column; }

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .4s ease, transform .4s ease, color .2s;
}

.mobile-menu nav a small {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--orange);
  transform: translateY(-1.2em);
}

.mobile-menu nav a[aria-current="page"] { color: var(--acid); }
.mobile-menu nav a:active { color: var(--orange); }

.mobile-menu-foot {
  margin-top: auto;
  padding-top: 32px;
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .4s ease, transform .4s ease;
}

.mobile-menu-foot .btn { justify-content: center; padding-block: 17px; font-size: 16px; }

.mobile-menu-foot .menu-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  font-size: 14px;
  opacity: .7;
}

/* Links rise in one after another once the sheet has dropped. */
.mobile-menu.is-open nav a,
.mobile-menu.is-open .mobile-menu-foot {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), color .2s;
}

.mobile-menu.is-open nav a:nth-child(1) { transition-delay: .18s; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: .24s; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: .30s; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: .36s; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: .42s; }
.mobile-menu.is-open .mobile-menu-foot { transition-delay: .46s; }

@media (min-width: 861px) {
  .mobile-menu { display: none; }
}

/* --- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  margin-top: calc(var(--header) * -1);
  padding-top: var(--header);
  overflow: hidden;
}

/* Desktop: the hero is exactly one screen with the ticker as its last row,
   so the strip is always visible without scrolling. Type, card and spacing
   scale with the screen's height; extras drop out on short screens. */
@media (min-width: 901px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 540px;
  }
  .hero > .hero-inner { flex: 1 1 auto; min-height: 0; }
  .hero > .ticker { flex: none; }
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding: clamp(16px, 4svh, 56px) var(--pad);
}

.hero-copy { display: flex; flex-direction: column; gap: clamp(14px, 3.4svh, 30px); }

.hero-copy .display { font-size: clamp(44px, min(7.4vw, 12svh), 112px); }
.hero-copy .lede { font-size: clamp(15px, min(1.5vw, 2.6svh), 21px); }

@media (min-width: 901px) {
  .next-up { gap: clamp(10px, 1.8svh, 16px); }
  .next-card { grid-template-columns: minmax(0, clamp(104px, 19svh, 150px)) minmax(0, 1fr); }
  .next-card-body h3 { font-size: clamp(19px, min(2.1vw, 3.6svh), 31px); }
}
/* Short screens: the "Recently" row goes first, then the countdown. */
@media (min-width: 901px) and (max-height: 860px) {
  .next-up .queue-label, .next-up .next-queue { display: none; }
}
@media (min-width: 901px) and (max-height: 620px) {
  .next-up .countdown { display: none; }
}
.hero-copy .display em { color: var(--acid); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Background film behind the hero. Dimmed hard, and darker on the left
   where the headline sits, so the copy always reads. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink) url("video/hero-poster.jpg") center / cover no-repeat;
}

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero-media video.is-playing { opacity: 1; }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 16, 16, .9) 0%, rgba(20, 16, 16, .72) 45%, rgba(20, 16, 16, .62) 100%),
    linear-gradient(0deg, rgba(20, 16, 16, .85) 0%, rgba(20, 16, 16, 0) 30%),
    linear-gradient(180deg, rgba(20, 16, 16, .7) 0%, rgba(20, 16, 16, 0) 22%);
}

@media (max-width: 860px) {
  /* Stacked layout puts text over the whole frame, so dim it evenly and a
     little harder. */
  .hero-media::after { background: rgba(20, 16, 16, .86); }
}

/* --- next-up panel ----------------------------------------------------- */

.next-up { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.next-up-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.next-up-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}

.next-up-head a { font-size: 13px; opacity: .7; }
.next-up-head a:hover { opacity: 1; }

.next-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background: rgba(244, 239, 227, .055);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s, background-color .25s, transform .3s var(--ease);
}

.next-card:hover {
  border-color: rgba(244, 239, 227, .34);
  background: rgba(244, 239, 227, .085);
  transform: translateY(-3px);
}

.next-card-art {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}

.next-card-art img { height: 100%; object-fit: cover; }

.next-card-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.next-card-body h3 {
  margin: 0;
  font-size: clamp(21px, 2.1vw, 31px);
  line-height: .98;
  letter-spacing: -.024em;
}

.next-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  opacity: .78;
}

.next-meta span { display: flex; align-items: center; gap: 8px; }

.countdown {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
}

.countdown-unit {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 9px 4px;
  border-radius: var(--radius-sm);
  background: rgba(244, 239, 227, .07);
}

.countdown-unit strong {
  display: block;
  font-size: clamp(16px, 1.7vw, 22px);
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
}

.countdown-unit span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .6;
}

.next-queue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.queue-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-dark);
  background: rgba(244, 239, 227, .04);
  transition: background-color .25s, transform .25s var(--ease);
}

.queue-card:hover { background: rgba(244, 239, 227, .09); transform: translateY(-2px); }

.queue-card .queue-art {
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
}

.queue-art img { height: 100%; object-fit: cover; }

.queue-card time {
  font-size: 12px;
  opacity: .62;
}

.queue-card strong {
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -.012em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Label above the strip under the featured card. It says whether those cards
   are more upcoming dates or recent work. */
.queue-label {
  margin: 4px 0 -4px;
  font-size: 12px;
  opacity: .5;
}

/* Shown when nothing upcoming is scheduled. */
.next-empty {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--radius);
  border: 1px dashed var(--line-dark);
  background: rgba(244, 239, 227, .04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.next-empty h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: .98;
  letter-spacing: -.024em;
}

.next-empty p { margin: 0; opacity: .76; max-width: 38ch; }

/* --- status badges ----------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-on-sale { background: var(--acid); color: var(--ink); }
.badge-free { background: var(--purple); color: #fff; }
.badge-sold-out { background: var(--orange); color: #fff; }
.badge-announced { background: rgba(127, 127, 127, .22); color: inherit; }
.badge-past { background: rgba(127, 127, 127, .18); color: inherit; opacity: .8; }

.ev-art .badge-past,
.ev-art .badge-announced {
  background: rgba(20, 16, 16, .76);
  color: var(--paper);
  opacity: 1;
  backdrop-filter: blur(6px);
}
.badge-draft { background: transparent; border: 1px dashed currentColor; opacity: .7; }

/* --- ticker ------------------------------------------------------------
   site.js fills the track from the live calendar and repeats it until it is
   always wider than the screen, so the loop never shows a gap, and moves it
   at a constant speed whatever its length. The CSS animation is only the
   no-JS fallback. */

.ticker {
  position: relative;
  z-index: 3;
  height: var(--ticker);
  overflow: hidden;
  background: var(--acid);
  color: var(--ink);
  border-block: 1px solid var(--ink);
}

.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ticker 40s linear infinite;
  will-change: transform;
}

.ticker.is-live .ticker-track { animation: none; }

.ticker-track > span,
.ticker-group {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.ticker-track > span { padding: 0 24px; }
.ticker i { color: var(--orange); font-style: normal; padding: 0 6px; }

.ticker-item { padding: 0 16px; letter-spacing: -.005em; }
.ticker-item.is-series { font-weight: 600; }

.ticker-sep {
  color: var(--orange);
  font-size: 13px;
  line-height: 1;
}

/* The live "next up" date, set apart as a dark pill. */
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
}

.ticker-pill b {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--acid);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
}

/* On phones the strip moves into the hero, between the next-up card and the
   "recently" row, and bleeds to the screen edges. */
.ticker.is-inset {
  margin: 4px calc(var(--pad) * -1) 6px;
  border-color: transparent;
}

@keyframes ticker { to { transform: translateX(-50%); } }

/* --- sections ---------------------------------------------------------- */

.section { padding: clamp(52px, 6vw, 94px) var(--pad); }
.section-tight { padding-block: clamp(44px, 5vw, 72px); }
.section.dark { background: var(--ink); color: var(--paper); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
  padding-bottom: 26px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.dark .section-head { border-bottom-color: var(--line-dark); }

.section-head h2 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: .92;
  letter-spacing: -.033em;
}

.section-head h2 em { color: var(--orange); }
.dark .section-head h2 em { color: var(--acid); }
.section-head p { margin: 0; opacity: .76; max-width: 46ch; }
/* Pinned to the right edge, opposite the heading. */
.section-head .head-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* The heading's link reads as a button: pill plus an arrow chip that slides
   on hover and press. */
.head-actions .btn {
  gap: 12px;
  padding: 7px 7px 7px 18px;
}

.head-actions .btn::after {
  content: "→";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  transition: transform .3s var(--ease);
}

.head-actions .btn-acid::after { background: var(--ink); color: var(--acid); }
.head-actions .btn:hover::after,
.head-actions .btn:active::after { transform: translateX(3px); }

/* --- event grid -------------------------------------------------------- */

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.event-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.ev-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.ev-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}

.ev-art img {
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.ev-card:hover .ev-art img { transform: scale(1.04); }

/* Keeps the date and badge legible over any flyer. */
.ev-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

.ev-date {
  position: absolute;
  z-index: 2;
  top: 12px; left: 12px;
  display: grid;
  place-items: center;
  width: 54px;
  padding: 8px 0 9px;
  border-radius: var(--radius-sm);
  background: rgba(244, 239, 227, .93);
  color: var(--ink);
  backdrop-filter: blur(6px);
  line-height: 1;
}

.ev-date strong { font-size: 21px; letter-spacing: -.024em; }

.ev-date span {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
}

.ev-art .badge { position: absolute; z-index: 2; top: 12px; right: 12px; }

.ev-venue-strip {
  position: absolute;
  z-index: 2;
  left: 12px; right: 12px; bottom: 11px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.ev-body { display: flex; flex-direction: column; gap: 7px; }

.ev-body h3 {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.02;
  letter-spacing: -.021em;
}

.ev-card:hover .ev-body h3 { color: var(--orange); }
.dark .ev-card:hover .ev-body h3 { color: var(--acid); }

.ev-body p {
  margin: 0;
  font-size: 13px;
  opacity: .7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-type {
  font-size: 12px;
  opacity: .55;
}

/* --- event rows (list view) -------------------------------------------- */

.event-rows { display: flex; flex-direction: column; }

.ev-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 68px minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}

.dark .ev-row { border-bottom-color: var(--line-dark); }
.ev-row:hover { padding-left: 10px; }

.ev-row-date {
  text-align: center;
  line-height: 1;
  padding: 9px 0;
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
}

.dark .ev-row-date { background: rgba(244, 239, 227, .08); }
.ev-row-date strong { display: block; font-size: 22px; letter-spacing: -.024em; }

.ev-row-date span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  opacity: .66;
}

.ev-row-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--ink-2);
}

.ev-row-thumb img { height: 100%; object-fit: cover; }
.ev-row-main { min-width: 0; }

.ev-row-main h3 {
  margin: 0 0 5px;
  font-size: clamp(19px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -.024em;
}

.ev-row:hover .ev-row-main h3 { color: var(--orange); }
.dark .ev-row:hover .ev-row-main h3 { color: var(--acid); }

.ev-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  opacity: .68;
}

/* --- filter bar -------------------------------------------------------- */

.filter-bar {
  position: sticky;
  top: var(--header);
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px var(--pad);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .count { opacity: .55; margin-left: 6px; }

.filter-search {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}

.filter-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  outline: none;
}

.view-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line-strong); }

.view-toggle button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* --- empty state ------------------------------------------------------- */

.empty-state {
  padding: clamp(44px, 7vw, 86px) clamp(22px, 4vw, 48px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.dark .empty-state { border-color: var(--line-dark); }

.empty-state h3 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: .95;
  letter-spacing: -.03em;
}

.empty-state p { margin: 0; max-width: 44ch; opacity: .74; }
.empty-state .btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* --- series / feature --------------------------------------------------- */

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  padding: 24px;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.series-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.series-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .1) 100%);
}

.series-card:hover img { transform: scale(1.05); }

.series-card h3 {
  margin: 0 0 8px;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: .95;
  letter-spacing: -.027em;
}

.series-card p { margin: 0 0 16px; font-size: 14px; opacity: .85; }
.series-card .series-logo { width: min(78%, 260px); margin-bottom: 14px; line-height: 0; }
/* A card can carry a logo in place of its title text (the title stays for
   screen readers and search). */
.series-card h3 .series-logo-img {
  position: static;
  z-index: auto;
  display: block;
  width: min(78%, 260px);
  height: auto;
  margin-bottom: 14px;
  object-fit: contain;
  transform: none;
}
.series-card h3 .series-logo-img[hidden] { display: none; }
.series-card h3 .series-logo-img:not([hidden]) + span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.series-card:hover h3 .series-logo-img { transform: none; }
.series-card .series-logo img { position: static; z-index: auto; width: 100%; height: auto; object-fit: contain; transform: none; }
.series-card p:last-child { margin-bottom: 0; }


/* --- proof band -------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.proof div { background: var(--paper); padding: clamp(28px, 4vw, 48px) var(--pad); }

.proof strong {
  display: block;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .9;
  letter-spacing: -.036em;
}

.proof span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  opacity: .62;
}

/* --- gallery ----------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  background: var(--ink);
}

.gallery figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.gallery figure:nth-child(2) { aspect-ratio: 3 / 3.4; align-self: center; }

.gallery img {
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: filter .45s, transform .8s var(--ease);
}

.gallery figure:hover img { filter: none; transform: scale(1.04); }

/* --- contact band ------------------------------------------------------ */

.contact-band {
  background: var(--purple);
  color: #fff;
  padding: clamp(60px, 8vw, 110px) var(--pad);
}

.contact-band h2 {
  margin: 0;
  font-size: clamp(50px, 10vw, 150px);
  line-height: .92;
  letter-spacing: -.042em;
}

.contact-band h2 em { color: var(--acid); }
.contact-band .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

.contact-links {
  border-top: 1px solid rgba(255, 255, 255, .42);
  margin-top: 46px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 30px;
  font-size: 14px;
}

/* --- footer ------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 5vw, 64px) var(--pad) 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 32px;
}

.site-footer h4 {
  margin: 0 0 14px;
  font-size: 13px;
  opacity: .55;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.site-footer a:hover { color: var(--acid); }

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  opacity: .55;
}

/* --- page intro -------------------------------------------------------- */

.page-intro {
  background: var(--ink);
  color: var(--paper);
  margin-top: calc(var(--header) * -1);
  padding: calc(var(--header) + clamp(42px, 5.5vw, 76px)) var(--pad) clamp(34px, 4vw, 54px);
  position: relative;
  overflow: hidden;
}

.page-intro-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(22px, 4vw, 64px);
  align-items: end;
}

.page-intro h1 { font-size: clamp(50px, 8.6vw, 122px); }
.page-intro h1 em { color: var(--acid); }
.page-intro .lede { opacity: .8; }
.page-intro .intro-side { display: flex; flex-direction: column; gap: 20px; }

/* --- about ------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding: clamp(44px, 5vw, 76px) var(--pad);
}

.about-copy { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 34px); }

.about-hero .display { font-size: clamp(50px, 7.6vw, 108px); }

.about-portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 620px;
  background: var(--ink-2);
}

/* The portrait is a tall seated shot with the face near the top — anchoring
   high keeps it in frame at every crop. */
.about-portrait img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.fact-grid div { background: var(--paper); padding: 22px var(--pad); }

/* The in-column variant is a bordered card rather than a full-bleed band. */
.fact-grid.inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.fact-grid.inline div { padding: 18px 20px; }
.fact-grid span { display: block; font-size: 12px; opacity: .55; }
.fact-grid strong { display: block; margin-top: 7px; font-size: 16px; letter-spacing: -.012em; }

.timeline { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }

.timeline-row {
  background: var(--paper);
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 26px var(--pad);
}

.timeline-row span { font-size: 14px; opacity: .55; }
.timeline-row h3 { margin: 0 0 7px; font-size: clamp(19px, 2vw, 26px); letter-spacing: -.021em; }
.timeline-row p { margin: 0; opacity: .76; max-width: 62ch; font-size: 15px; }

.story-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(22px, 3vw, 48px);
}

.story-columns p { margin: 0 0 1.1em; font-size: clamp(16px, 1.5vw, 19px); opacity: .84; }

/* --- services ---------------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 18px 40px -24px rgba(20, 16, 16, .5);
}

.service-num {
  font-size: 14px;
  font-weight: 500;
  color: var(--orange);
}

.service-card h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: .98;
  letter-spacing: -.024em;
}

.service-card p { margin: 0; opacity: .76; font-size: 15px; }

.service-card ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
  opacity: .78;
}

.service-card li { display: flex; gap: 9px; }
.service-card li::before { content: "→"; color: var(--orange); flex: none; }
.service-card .btn { margin-top: auto; align-self: flex-start; }

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.process div { background: var(--paper); padding: clamp(24px, 3vw, 36px); }
.process span { font-size: 13px; color: var(--orange); font-weight: 500; }
.process h3 { margin: 14px 0 8px; font-size: 20px; letter-spacing: -.018em; }
.process p { margin: 0; font-size: 14px; opacity: .74; }

/* --- service list (services page) ---------------------------------------
   Each service is a card that opens in place. site.js animates the height
   so it glides open and shut; without JS it still works as plain <details>. */

.offer-list { display: grid; gap: 12px; }

.offer {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}

.offer:hover {
  background: #fff;
  border-color: var(--line-strong);
  box-shadow: 0 22px 50px -32px rgba(20, 16, 16, .45);
  transform: translateY(-2px);
}

.offer[open] {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 30px 70px -40px rgba(20, 16, 16, .55);
  transform: none;
}

.offer summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 34px);
  cursor: pointer;
  list-style: none;
  border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
}

.offer summary::-webkit-details-marker { display: none; }
.offer summary:focus-visible { outline-offset: -4px; }

.offer-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--orange);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

.offer[open] .offer-num { background: var(--orange); color: #fff; }

.offer-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.offer-title strong {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.028em;
}

.offer-title > span { font-size: 15px; opacity: .6; }

/* A plus that rotates into a minus. */
.offer-icon {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--paper);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .5s var(--ease);
}

.offer-icon::before,
.offer-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease);
}

.offer-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.offer:hover .offer-icon { background: var(--ink); color: var(--paper); }
.offer[open] .offer-icon { background: var(--ink); color: var(--paper); transform: rotate(180deg); }
.offer[open] .offer-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.offer-body { overflow: hidden; }

.offer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 60px);
  margin: 0 clamp(18px, 2.6vw, 34px);
  padding: clamp(20px, 2.4vw, 28px) 0 clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.offer-inner p { margin: 0; font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; opacity: .8; max-width: 60ch; }

.offer-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 14px;
}

.offer-inner li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--paper);
}

.offer-inner li::before { content: "→"; color: var(--orange); flex: none; }

.offer-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

@media (hover: none) {
  .offer:hover { transform: none; box-shadow: none; }
  .offer:hover:not([open]) { background: rgba(255, 255, 255, .55); }
  .offer:hover:not([open]) .offer-icon { background: var(--paper); color: inherit; }
}

@media (max-width: 760px) {
  .offer-num { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
  .offer-icon { width: 40px; height: 40px; }
  .offer-title > span { font-size: 13px; }
  .offer-inner { grid-template-columns: 1fr; }
}

/* --- detail pages (one event, one series) -------------------------------- */

.detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* "Part of Sundays Are For Lovers →" on an event that belongs to a series. */
.series-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-dark);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .25s, border-color .25s;
}

.series-chip span:first-child { opacity: .6; }
.series-chip:hover { background: rgba(244, 239, 227, .1); border-color: rgba(244, 239, 227, .35); }

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 34px);
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  background: rgba(244, 239, 227, .05);
  transition: background-color .2s, border-color .2s, gap .25s var(--ease);
}

.detail-back span { transition: transform .25s var(--ease); }
.detail-back:hover { background: rgba(244, 239, 227, .12); border-color: rgba(244, 239, 227, .34); }
.detail-back:hover span { transform: translateX(-3px); }

.detail-hero {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(28px, 4vw, 48px) var(--pad) clamp(56px, 7vw, 90px);
}

.detail-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.detail-art {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-2);
}

.detail-art img { height: 100%; object-fit: cover; }

.detail-copy { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.detail-copy .badge { align-self: flex-start; }
.detail-copy .display { font-size: clamp(40px, 5.2vw, 72px); }
.detail-copy .lede { opacity: .82; max-width: 56ch; }

.detail-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.detail-facts div { background: rgba(244, 239, 227, .04); padding: 14px 16px; }
.detail-facts span { display: block; font-size: 12px; opacity: .55; }
.detail-facts strong { display: block; margin-top: 5px; font-size: 15px; letter-spacing: -.012em; }

.detail-cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 760px) {
  .detail-hero-inner { grid-template-columns: 1fr; }
  .detail-art { max-width: 340px; }
  .detail-facts { grid-template-columns: 1fr 1fr; }
}

/* --- contact page ------------------------------------------------------ */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.contact-card {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
}

.field { display: grid; gap: 7px; margin-bottom: 16px; }

.field label {
  font-size: 13px;
  font-weight: 500;
  opacity: .66;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font: inherit;
  font-size: 15px;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.field textarea { min-height: 128px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(107, 57, 255, .14);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.direct-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.direct-list a,
.direct-list div { background: var(--paper); padding: 20px 24px; display: grid; gap: 5px; transition: background-color .2s; }

.direct-list a:hover { background: var(--acid); }
.direct-list span { font-size: 12px; opacity: .55; }
.direct-list strong { font-size: clamp(16px, 1.8vw, 21px); letter-spacing: -.018em; }

.form-note { margin: 10px 0 0; font-size: 12px; opacity: .6; }

/* --- toast ------------------------------------------------------------- */

.toast-host {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}

.toast {
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
  animation: toast-in .3s var(--ease) both;
}

.toast.is-error { background: var(--orange); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* --- splash --------------------------------------------------------------
   Flyers settle onto a stack in the middle of the screen, the wordmark
   stamps onto the top one, then the whole cover lifts away like a curtain.
   Home page only. All motion is driven from site.js with the Web Animations
   API, on transform and opacity only, so it runs on the compositor and
   stays smooth even while the page underneath is still rendering. */

/* Covers the page until site.js builds the overlay. The delayed animation
   is a failsafe: if the script never runs, the cover lifts on its own. */
html.has-splash::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink) url("img/splash-bg.webp") center / cover no-repeat;
  animation: splash-failsafe 0s 4s forwards;
}

@keyframes splash-failsafe { to { visibility: hidden; } }

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  contain: strict;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* Three nested wrappers so each layer of motion owns its own transform:
   stage = the parallax on exit, camera = the slow pull-back while cards
   land, stack = the small give when the stamp hits. */
/* A crowd shot, pre-blurred and darkened (scripts/optimize-images.py), so
   the splash sits in a room rather than on flat ink. It drifts slowly
   closer for the whole sequence; matches the pre-paint cover at scale 1. */
.splash-bg {
  position: absolute;
  inset: 0;
  background: var(--ink) url("img/splash-bg.webp") center / cover no-repeat;
  will-change: transform;
  pointer-events: none;
}

.splash-stage,
.splash-camera {
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

.splash-stack {
  position: relative;
  width: min(62vw, 340px);
  aspect-ratio: 4 / 5;
  will-change: transform;
}

.splash-card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
  /* Two soft layers read as real depth without the cost of a huge blur. */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .35),
    0 24px 48px -18px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: rotate(var(--r));
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.splash-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* One shade over the whole stack instead of one per card, so the stamp reads
   on any flyer at the cost of a single opacity animation. It is ink on an ink
   background, so it simply covers the whole screen: no edge can ever show
   around the tilted cards or their shadows. */
.splash-shade {
  position: absolute;
  inset: -100vmax;
  z-index: 1;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* The logo SVG is used as a mask so the stamp can take any colour. Its size
   comes from two variables so another brand's logo can swap in:
   --stamp-w (width of the stack it covers) and --stamp-hr (height / width). */
.splash-stamp {
  --stamp-w: 82%;
  --stamp-hr: .805;
  position: absolute;
  z-index: 2;
  left: calc((100% - var(--stamp-w)) / 2);
  top: 50%;
  width: var(--stamp-w);
  margin-top: calc(var(--stamp-w) * var(--stamp-hr) / -2); /* half its own height */
  aspect-ratio: 1 / var(--stamp-hr);
  background: var(--orange);
  -webkit-mask: url("brand/dott-daley.svg") center / contain no-repeat;
  mask: url("brand/dott-daley.svg") center / contain no-repeat;
  opacity: 0;
  transform: rotate(-8deg);
  will-change: transform, opacity;
}

/* Sundays Are For Lovers: its own cards, room and logo, stamped in the
   series' pink-to-mint. */
html.splash-s4l .splash-stamp {
  --stamp-w: 96%;
  --stamp-hr: .531;
  background: linear-gradient(100deg, #ff9ec4 0%, #ffc7a3 48%, #96e8d2 100%);
  -webkit-mask-image: url("series/sundays4lovers/logo.svg");
  mask-image: url("series/sundays4lovers/logo.svg");
}

html.splash-s4l .splash-bg,
html.splash-s4l.has-splash::after {
  background-image: url("series/sundays4lovers/splash-bg.webp");
}

/* Hold the page's own entrance until the splash lifts, so it plays in view. */
html.splash-running .s4l-hero-copy > *,
html.splash-running .s4l-title span,
html.splash-running .s4l-brandmark {
  animation-play-state: paused !important;
}

.splash-skip {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
}

/* --- motion ------------------------------------------------------------ */

.reveal { opacity: 1; }
.reveal.visible > * { animation: rise .6s var(--ease) both; }
.reveal.visible > *:nth-child(2) { animation-delay: .07s; }
.reveal.visible > *:nth-child(3) { animation-delay: .14s; }
.reveal.visible > *:nth-child(4) { animation-delay: .21s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

.stagger > * { animation: rise .55s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .1s; }
.stagger > *:nth-child(3) { animation-delay: .16s; }
.stagger > *:nth-child(4) { animation-delay: .22s; }
.stagger > *:nth-child(5) { animation-delay: .28s; }
.stagger > *:nth-child(6) { animation-delay: .34s; }

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


/* --- mobile rails -------------------------------------------------------
   Preview sections scroll sideways on a phone instead of stacking, so a
   section costs one screen rather than six. The calendar grid deliberately
   opts out: that page is the index people scan top to bottom.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  [data-rail] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    /* Bleed past the section padding so a card peeks at the screen edge,
       which is the only affordance a rail really needs. */
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 2px;
  }

  [data-rail]::-webkit-scrollbar { display: none; }

  [data-rail] > * {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }

  /* Hover lift would be clipped by overflow-y and does not apply on touch. */
  [data-rail] .service-card:hover { transform: none; box-shadow: none; }

  .event-grid[data-rail] > * { flex: 0 0 66%; }

  .series-grid[data-rail] > * { flex: 0 0 78%; }

  .service-grid[data-rail] > * { flex: 0 0 80%; }

  /* .process fakes its dividers with a 1px gap over a tinted background,
     which does not survive becoming a rail, so each step gets a real border. */
  .process[data-rail] {
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 12px;
  }

  .process[data-rail] > div {
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  /* The gallery is a full-bleed dark band, so it keeps its own 10px inset
     rather than the section padding. */
  .gallery[data-rail] {
    margin-inline: 0;
    padding: 10px;
    gap: 10px;
    scroll-padding-inline: 10px;
  }

  .gallery[data-rail] > figure {
    flex: 0 0 76%;
    aspect-ratio: 3 / 4;
    align-self: stretch;
  }

  .next-queue[data-rail] > * { flex: 0 0 38%; }

  [data-rail]:focus-visible { outline-offset: -2px; }
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 42px; min-height: 0; padding-block: clamp(36px, 6vw, 60px); }
  .hero-copy .display { font-size: clamp(50px, 9vw, 84px); }
}

@media (max-width: 1080px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-portrait { max-width: 460px; aspect-ratio: 1 / 1; }
  .page-intro-inner { grid-template-columns: 1fr; align-items: start; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --header: 62px; }

  .site-header { grid-template-columns: auto 1fr; }

  .site-header nav { display: none; }
  .header-actions .btn { display: none; }
  .menu-button { display: inline-flex; }

  .section-head { grid-template-columns: 1fr; align-items: start; }
  /* With only a link beside it, the heading keeps the link on its row,
     pushed to the far side. */
  .section-head:has(.head-actions) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .section-head:has(.head-actions) > div:first-child { min-width: 0; }
  .section-head .head-actions { justify-content: flex-end; flex-wrap: nowrap; }

  .hero-inner { gap: 20px; padding-top: 26px; }
  .hero-copy { display: contents; }
  .hero-copy .display { order: 1; }
  .hero-copy .lede { order: 2; }
  .hero-actions { order: 3; }
  .next-up { order: 4; }
  .next-up-head h2 { font-size: 10px; }
  .next-queue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .timeline-row { grid-template-columns: 1fr; gap: 10px; }
  .field-row { grid-template-columns: 1fr; }
  .contact-links { flex-direction: column; }

  /* The ticket button moves under the title rather than being squeezed out. */
  .ev-row {
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-areas: "date main" "cta cta";
    row-gap: 12px;
    padding: 16px 0;
  }

  .ev-row-date { grid-area: date; }
  .ev-row-thumb { display: none; }
  .ev-row-main { grid-area: main; }
  .ev-row .badge { display: none; }
  .ev-row .btn { grid-area: cta; justify-content: center; width: 100%; }
  .ev-row:hover { padding-left: 0; }
}

@media (max-width: 760px) {
  /* Phones skip the countdown; the date is right there and the space is
     better spent on the strip and what's on. */
  .countdown { display: none; }
}

@media (max-width: 620px) {
  /* Footer in two columns instead of one long stack. */
  .site-footer { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-top: 36px; }
  .site-footer > div:first-child { grid-column: 1 / -1; }
  .site-footer ul { font-size: 13px; gap: 7px; }
  .next-card { grid-template-columns: minmax(0, 116px) minmax(0, 1fr); padding: 12px; gap: 14px; align-items: stretch; }
  /* The flyer stretches to the full height of the text beside it, so the
     two columns always end together. */
  .next-card-art { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .next-card-body { gap: 8px; padding-block: 2px; }
  .next-card-body h3 { font-size: 20px; line-height: 1.05; }
  .next-meta { gap: 3px; font-size: 12.5px; }
  .countdown-unit { padding: 7px 2px; }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .event-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-date { width: 46px; padding: 6px 0 7px; top: 9px; left: 9px; }
  .ev-date strong { font-size: 17px; }
  .ev-art .badge { top: 9px; right: 9px; font-size: 9px; padding: 4px 8px; }
  .ev-venue-strip { font-size: 10px; }
  .filter-bar { padding: 11px var(--pad); gap: 8px; }
  .filter-search { order: -1; width: 100%; flex: 1 0 100%; }
  .view-toggle { display: none; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 0; justify-content: center; padding-inline: 16px; }
  .contact-band .btn-row .btn { flex: 1 0 100%; justify-content: center; }
  .series-card { min-height: 330px; }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof div { padding-block: 24px; }
}

@media (max-width: 420px) {
  .section-head h2 { font-size: 32px; }
  .head-actions .btn { padding-left: 14px; font-size: 13px; }
  .next-queue:not([data-rail]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- draft preview banner (assets/cms.js, ?preview=<id>) ------------------ */

.cms-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(980px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: 18px;
  background: rgba(20, 16, 16, .94);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.cms-banner strong { color: var(--acid); font-weight: 600; }
.cms-banner-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cms-banner .cms-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.cms-banner .cms-btn:hover { background: rgba(255, 255, 255, .18); }
.cms-banner .cms-btn-go { background: var(--acid); color: var(--ink); font-weight: 600; }
html.cms-has-banner body { padding-bottom: 84px; }
html.cms-has-banner .toast-host { bottom: 90px; }
@media (max-width: 640px) {
  .cms-banner { flex-direction: column; align-items: stretch; padding: 12px; text-align: center; }
  .cms-banner-actions .cms-btn { flex: 1; justify-content: center; }
  html.cms-has-banner body { padding-bottom: 150px; }
}

/* --- lists that adapt to how many items they hold (assets/cms.js) --------
   Up to data-list-max items share the row evenly; past it the list becomes
   a sideways rail with arrows (the highlights band wraps instead). Phones
   keep their own rails from the mobile section above. */

.rail-nav { display: none; }

@media (min-width: 761px) {
  .series-grid[data-list-max],
  .service-grid[data-list-max],
  .process[data-list-max],
  .gallery[data-list-max],
  .proof[data-list-max] { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

  .series-grid[data-list-max] { --gap: clamp(16px, 2vw, 26px); }
  .service-grid[data-list-max] { --gap: clamp(16px, 2vw, 26px); }
  .process[data-list-max] { --gap: 1px; }
  .gallery[data-list-max] { --gap: 10px; }
  .gallery[data-list-max] figure:last-child { grid-column: auto; aspect-ratio: 3 / 4; }
  .gallery[data-list-max] figure:nth-child(2) { aspect-ratio: 3 / 4; align-self: stretch; }
  .gallery[data-list-max]:not(.is-overflow)[style*="--cols: 3"] figure:nth-child(2) { aspect-ratio: 3 / 3.4; align-self: center; }

  /* Fewer, wider cards get a little more presence. */
  .series-grid[data-list-max][style*="--cols: 1"] .series-card,
  .series-grid[data-list-max][style*="--cols: 2"] .series-card { min-height: 480px; }

  /* Highlights: type scales with the column count so a word never breaks. */
  .proof[data-list-max] > [data-item] { padding-inline: clamp(20px, calc(14vw / var(--cols, 4)), var(--pad)); }
  .proof[data-list-max] strong {
    font-size: clamp(28px, calc(min(100vw, 1680px) / var(--cols, 4) * .155), 66px);
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  [data-list-max].is-overflow {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  [data-list-max].is-overflow::-webkit-scrollbar { display: none; }
  [data-list-max].is-overflow > [data-item] {
    flex: 0 0 calc((100% - var(--gap) * var(--max)) / (var(--max) + .35));
    scroll-snap-align: start;
  }
  .gallery[data-list-max].is-overflow { scroll-padding-inline: 10px; }
  .gallery[data-list-max].is-overflow > figure { aspect-ratio: 3 / 4; align-self: stretch; }
  .process[data-list-max].is-overflow { background: transparent; border: 0; border-radius: 0; gap: 12px; --gap: 12px; }
  .process[data-list-max].is-overflow > div { border: 1px solid var(--line); border-radius: var(--radius); }

  /* Arrow buttons pinned to the rail's edges while it scrolls. */
  [data-list-max].is-overflow > .rail-nav {
    display: block;
    position: sticky;
    z-index: 5;
    flex: 0 0 0;
    width: 0;
    align-self: stretch;
  }
  [data-list-max].is-overflow > .rail-prev { left: 0; margin-right: calc(var(--gap) * -1); }
  [data-list-max].is-overflow > .rail-next { right: 0; margin-left: calc(var(--gap) * -1); }
  .rail-nav button {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(244, 239, 227, .94);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    transform: translateY(-50%);
    transition: opacity .2s, transform .2s var(--ease);
  }
  .rail-nav button:hover { transform: translateY(-50%) scale(1.06); }
  .rail-prev button { left: 14px; }
  .rail-next button { right: 14px; }
  [data-list-max].at-start > .rail-prev button,
  [data-list-max].at-end > .rail-next button { opacity: 0; pointer-events: none; }
}

/* Next-up panel hidden: the headline gets the whole hero. */
.hero-inner:has(> .next-up[hidden]) { grid-template-columns: minmax(0, 1fr); }
.hero-inner:has(> .next-up[hidden]) .hero-copy { max-width: 1040px; }
@media (min-width: 901px) {
  .hero-inner:has(> .next-up[hidden]) .hero-copy .display { font-size: clamp(52px, min(9vw, 14svh), 150px); }
  .hero-inner:has(> .next-up[hidden]) .hero-copy .lede { max-width: 46ch; }
}

/* A section switched off in Advanced edit stays off whatever its display. */
[data-section][hidden] { display: none !important; }