/* ==========================================================================
   Zauk Music — unplugged qawwali
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:          #2A1709;
  --ink-deep:     #1D0F05;
  --cream:        #EFE9DE;
  --cream-bright: #F3EADA;
  --cream-soft:   #E7DCC9;
  --cream-form:   #E7DFD1;
  --sand:         #D6C6AD;
  --gold:         #E2B97F;
  --gold-deep:    #C9955A;
  --gold-pale:    #D8B98A;
  --gold-light:   #E9D7B4;
  --rust:         #A8541F;
  --rust-deep:    #8A4114;
  --brown:        #6A5138;
  --brown-deep:   #584227;
  --muted:        #9A7850;
  --dim:          #957956;

  --f-display: "Playfair Display", Georgia, serif;
  --f-body:    "Cormorant Garamond", Georgia, serif;
  --f-ui:      "Jost", system-ui, sans-serif;
  --f-urdu:    "Noto Nastaliq Urdu", serif;
  --f-script:  "Allura", "Snell Roundhand", cursive;

  --pad-x: clamp(20px, 6vw, 96px);
  --pad-y: clamp(90px, 13vw, 190px);
  /* Where two adjacent sections share a background colour, their stacked
     padding reads as one long void rather than a section break. Those two
     edges use --pad-seam instead of --pad-y. */
  --pad-seam: clamp(60px, 8vw, 120px);
  --shell: 1240px;
  --ease:  cubic-bezier(.2, .75, .2, 1);
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--ink); }

/* height:auto is load-bearing — without it the width/height attributes act as
   presentational hints and any image we scale by width keeps its literal
   pixel height, which distorts it. Elements that want a fixed height
   (the hero backdrop, the wordmarks) override this in their own rules. */
img { max-width: 100%; height: auto; }
input, textarea, select, button { font: inherit; }
::selection { background: var(--rust); color: var(--cream); }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--cream-bright);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: top .25s ease;
}
.skip-link:focus { top: 16px; }

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

/* --- Shared pieces ------------------------------------------------------ */
.shell { max-width: var(--shell); margin: 0 auto; }

.section { padding: var(--pad-y) var(--pad-x); }

/* keep anchored sections clear of the fixed nav */
[id] { scroll-margin-top: 90px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(44px, 7vw, 110px);
  align-items: center;
}

.col { display: flex; flex-direction: column; }

.eyebrow {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow--rust { color: var(--rust); }

.rule {
  width: 64px;
  height: 1px;
  background: var(--gold-deep);
  margin: clamp(28px, 4vw, 46px) 0 0;
}
.rule--soft { background: rgba(201, 149, 90, .6); }

.figure { justify-self: center; width: 100%; }
.figure img { width: 100%; display: block; }

.urdu { font-family: var(--f-urdu); font-size: .92em; }

/* mid-page parallax subjects (offset is set on `translate` from main.js) */
[data-drift] { will-change: translate; }

/* Scroll-triggered reveal. Only armed once JS confirms it can undo it. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s ease, transform 1.1s var(--ease);
}
.js .reveal--slow { transition-duration: 1.3s; }
.js .reveal--d1 { transition-delay: .12s; }
.js .reveal--d2 { transition-delay: .24s; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes zk-drift { from { transform: scale(1.06); } to { transform: scale(1.16); } }
@keyframes zk-up  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes zk-cue { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(6px); } }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.nav.is-scrolled {
  background: rgba(29, 15, 5, .94);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(201, 149, 90, .2);
}

.nav__brand { display: flex; align-items: baseline; gap: 12px; }
.nav__brand img { height: 17px; width: auto; }
.nav__brand span {
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 38px);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.nav__links a { color: var(--cream-soft); }
.nav__links a:hover { color: #fff; }

.nav__cta {
  padding: 11px 22px;
  border: 1px solid rgba(231, 220, 201, .55);
  color: var(--cream-bright);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.nav__cta:hover {
  background: var(--cream-soft);
  color: var(--ink);
  border-color: var(--cream-soft);
}

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(231, 220, 201, .4);
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 1px;
  margin: 4px auto;
  background: var(--cream-soft);
  transition: transform .3s ease, opacity .3s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(96px, 13vh, 150px) clamp(20px, 5vw, 72px) clamp(64px, 10vh, 110px);
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 88%;
  animation: zk-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
/* Everything that makes up the sky, moved as one by the scroll parallax. */
.hero__scene { position: absolute; inset: 0; }

/* --- Drifting cloud layers ---
   Each layer is twice the container wide and carries the tile at exactly the
   container's width, so translating it by half its own width advances the
   texture by precisely one tile and the loop is seamless. */
.hero__clouds {
  position: absolute;
  left: 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  pointer-events: none;
  will-change: transform;
}
.hero__clouds--far {
  top: 2%;
  height: 60%;
  background-image: url("../img/clouds-far.webp");
  opacity: .55;
  animation: zk-cloud 200s linear infinite;
}
.hero__clouds--near {
  top: 16%;
  height: 56%;
  background-image: url("../img/clouds-near.webp");
  opacity: .3;
  animation: zk-cloud 125s linear infinite;
}
@keyframes zk-cloud { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(42, 23, 9, .62) 0%,
    rgba(42, 23, 9, .18) 34%,
    rgba(42, 23, 9, .36) 68%,
    var(--ink) 100%);
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  text-align: center;
}
.hero__mark {
  margin: 0;
  font-size: 0;
  animation: zk-up 1.7s .15s both var(--ease);
}
.hero__mark img { width: min(560px, 74vw); height: auto; }
.hero__tagline {
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: .02em;
  color: var(--gold);
  animation: zk-up 1.7s .5s both var(--ease);
}
/* Holds the "next show" line. It was a row of two - a call to action and
   this - until the show sold out and the button came off. */
.hero__actions {
  margin-top: clamp(18px, 3.6vh, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 30px);
  animation: zk-up 1.7s .75s both var(--ease);
}
.hero__next {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--f-ui);
  font-weight: 300;
  text-transform: uppercase;
}
.hero__next-label {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold-pale);
}
.hero__next-row {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero__next-date {
  position: relative;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: .18em;
  color: var(--cream-bright);
}
.hero__next-date sup { font-size: .68em; }

.hero__soldout {
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--gold);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  /* Five pulses, then it rests lit. WCAG 2.2.2 asks that blinking stop within
     five seconds unless there is a control to stop it; an endless blink in a
     hero is also the kind of thing that reads as a broken ad. */
  animation: zk-fade-in .4s .95s both, zk-blink .85s 1.35s 5 both;
}

@keyframes zk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.hero__cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold-pale);
  animation: zk-cue 3s ease-in-out infinite;
}

/* --- Discover ----------------------------------------------------------- */
.discover {
  padding-top: clamp(100px, 14vw, 200px);
  padding-bottom: var(--pad-seam); /* seam: discover and zauk are both dark */
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(42,23,9,0) 22%, rgba(42,23,9,0) 74%, var(--ink) 100%),
    radial-gradient(130% 80% at 26% 44%, #3D2512 0%, #2E1A0B 62%, var(--ink) 100%);
}
.discover__title {
  margin: 22px 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.01em;
  color: var(--cream-bright);
  text-wrap: balance;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%238A5A2A' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M12 0.5 L23.5 12 L12 23.5 L0.5 12Z'/%3E%3Cpath d='M12 6 L18 12 L12 18 L6 12Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23A8541F' opacity='.65'/%3E%3C/svg%3E"),
    linear-gradient(120deg, var(--cream-bright) 0%, var(--gold) 48%, var(--cream-bright) 100%);
  background-size: 24px 24px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.discover__still {
  margin-top: 16px;
  font-size: clamp(21px, 2.2vw, 30px);
  font-style: italic;
  color: var(--gold);
}
.discover__body {
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  max-width: 34ch;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.62;
  color: var(--sand);
  text-wrap: pretty;
}
.discover .figure { max-width: 520px; }
.discover .figure img { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .7); }

/* --- Zauk / meaning ----------------------------------------------------- */
.meaning {
  padding-top: var(--pad-seam); /* seam: pairs with .discover's bottom */
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(42,23,9,0) 26%, rgba(42,23,9,0) 76%, var(--ink) 100%),
    radial-gradient(120% 70% at 62% 50%, #3A2310 0%, var(--ink) 74%);
}
.meaning .figure { max-width: 480px; }
.meaning__title {
  margin: 22px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.06;
  color: var(--cream-bright);
}
.meaning__lede {
  margin: 18px 0 0;
  max-width: 26ch;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.45;
  font-style: italic;
  color: var(--gold);
  text-wrap: pretty;
}
.meaning__body {
  margin: clamp(26px, 3.6vw, 38px) 0 0;
  max-width: 42ch;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.68;
  color: var(--sand);
  text-wrap: pretty;
}

/* --- Shows -------------------------------------------------------------- */
.shows {
  background: var(--cream);
  padding-bottom: var(--pad-seam); /* seam: shows and book are both cream */
}
.shows__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.04;
  color: var(--ink);
}
.shows__list {
  margin: clamp(34px, 4.4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
  border-top: 1px solid rgba(42, 23, 9, .2);
}
.show {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 38px);
  align-items: start;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid rgba(42, 23, 9, .2);
}
.show__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
}
.show__month {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.show__day {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(46px, 5.6vw, 72px);
  line-height: .94;
  /* The tight line-height crops the line box inside the glyph, so numerals
     with a descending tail — Playfair's 5, 3, 7, 9 — run into the year below.
     Padding, not line-height, so the gap above "Oct" is unaffected and the
     baseline alignment of the stacked row on phones still holds. */
  padding-bottom: .12em;
  color: var(--ink);
}
.show__year {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brown);
}
.show__meta { display: flex; flex-direction: column; gap: 7px; }
.show__venue {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--ink);
}
.show__place { font-size: clamp(18px, 1.6vw, 23px); color: var(--brown); }
.show__time {
  margin-top: 6px;
  font-size: clamp(18px, 1.6vw, 23px);
  font-style: italic;
  color: var(--rust-deep);
}
.show__note {
  margin-top: 8px;
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brown);
}
.shows__pending {
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid rgba(42, 23, 9, .12);
  font-size: clamp(17px, 1.5vw, 21px);
  font-style: italic;
  color: var(--brown);
}
/* Empty state. With no date and no flyer beside it, the two-column layout
   would leave a large blank half that reads as something failing to load —
   so this centres instead, which reads as deliberate. */
.shows__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.shows__empty .rule { margin-top: clamp(30px, 4vw, 46px); }
.shows__none {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  color: var(--ink);
}
.shows__hint {
  margin: 14px 0 0;
  max-width: 36ch;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.6;
  font-style: italic;
  color: var(--brown);
  text-wrap: pretty;
}
.shows__empty .shows__ask { align-self: center; }

.shows__ask {
  color: var(--rust-deep);
  margin-top: clamp(24px, 3vw, 34px);
  align-self: flex-start;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(168, 84, 31, .4);
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
/* Primary call to action for the listed show. Solid ink on the cream section,
   matching the booking form's submit button, so it carries real weight rather
   than reading as another small link. */
/* Two buttons on one row: tickets solid, the guide outlined so it reads as
   the secondary of the pair. The margin that used to sit on the button now
   sits on the row. */
.shows__ctas {
  margin-top: clamp(30px, 4vw, 46px);
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.shows__cta {
  padding: 19px 46px;
  background: var(--ink);
  color: var(--cream-bright);
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  transition: background .35s ease, color .35s ease;
}
.shows__cta:hover { background: var(--rust); color: var(--cream-bright); }

.shows__cta--ghost {
  background: none;
  color: var(--ink);
  border: 1px solid rgba(42, 23, 9, .4);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.shows__cta--ghost:hover {
  background: var(--ink);
  color: var(--cream-bright);
  border-color: var(--ink);
}

.shows .figure { max-width: 460px; }
.shows .figure img {
  border-radius: 18px;
  box-shadow: 0 34px 70px -40px rgba(42, 23, 9, .6);
}

/* --- Booking ------------------------------------------------------------ */
.book {
  padding-top: var(--pad-seam); /* seam: pairs with .shows's bottom */
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 72%, #E4D9C6 92%, #D8C9B0 100%);
}
/* The intro is about half the form's height. Top-aligning the two columns (as
   the export did) dumps all the difference under the intro as dead space, so
   centre them and let the slack sit evenly above and below. */
.book .split { align-items: center; gap: clamp(44px, 6vw, 96px); }
.book__intro { order: 0; }
.book__title {
  margin: 22px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  color: var(--ink);
  text-wrap: pretty;
}
.book__contact {
  margin-top: clamp(28px, 3.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: clamp(19px, 1.7vw, 24px);
}
.book__contact a { color: var(--brown-deep); }
.book__contact a:hover { color: var(--rust); }
.book__contact a.is-accent { color: var(--rust-deep); }
.book__contact a.is-accent:hover { color: var(--ink); }

.form {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 26px);
  padding: clamp(28px, 3.6vw, 48px);
  background: var(--cream-form);
  border: 1px solid rgba(42, 23, 9, .16);
}
.form__eyebrow {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field > span {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brown-deep);
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(42, 23, 9, .26);
  padding: 9px 2px;
  font-family: var(--f-body);
  font-size: 20px;
  color: var(--ink);
  outline: none;
  transition: border-color .3s ease;
}
.field select { background: var(--cream-form); }
.field input[type="date"] { color-scheme: light; }
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--rust); }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(20px, 2.4vw, 26px);
}
.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__submit {
  margin-top: 6px;
  padding: 17px;
  border: 0;
  background: var(--ink);
  color: var(--cream-bright);
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .35s ease;
}
.form__submit:hover:not(:disabled) { background: var(--rust); }
.form__submit:disabled { opacity: .65; cursor: default; }
.form__note {
  min-height: 20px;
  font-size: 17px;
  color: var(--brown-deep);
}
.form__note.is-error { color: #8E2B14; }

/* --- Merch -------------------------------------------------------------- */
.merch {
  padding: clamp(80px, 12vw, 170px) var(--pad-x) clamp(70px, 10vw, 140px);
  background: var(--ink);
}
.merch .split { gap: clamp(40px, 6vw, 80px); }
.merch__mark { width: min(300px, 64%); height: auto; align-self: flex-start; }
.merch__label {
  margin-top: 20px;
  font-size: clamp(23px, 2.2vw, 30px);
  color: var(--gold);
}
.merch__title {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  color: var(--gold-light);
}
.merch__body {
  margin: 22px 0 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.64;
  color: var(--sand);
  text-wrap: pretty;
}
.merch__stack {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.merch__stack > * { display: block; }
.merch__stack img {
  width: 100%;
  display: block;
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .75);
}
.merch__stack > :nth-child(1) { grid-column: 4 / 13; grid-row: 1; z-index: 1; }
.merch__stack > :nth-child(2) { grid-column: 1 / 10; grid-row: 2; margin-top: -9%;  z-index: 3; }
.merch__stack > :nth-child(3) { grid-column: 4 / 13; grid-row: 3; margin-top: -11%; z-index: 2; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  padding: clamp(56px, 8vw, 96px) var(--pad-x) 40px;
  background: var(--ink-deep);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(34px, 5vw, 72px);
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col--brand { gap: 16px; }
.footer__wordmark { height: 24px; width: auto; align-self: flex-start; }
.footer__tagline { font-size: 20px; color: var(--sand); }
/* The brush-drawn ذوق that closes the footer. It is artwork rather than set
   type, so it comes in as an image at the size the mark was drawn for. */
.footer__mark {
  align-self: flex-start;
  width: min(130px, 36%);
  height: auto;
  margin-top: clamp(10px, 2vw, 20px);
}
.footer__head {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__col a { font-size: 19px; color: var(--sand); }
.footer__col a:hover { color: var(--cream-bright); }
.footer__col a.is-accent { color: var(--gold); }
.footer__meta {
  margin-top: clamp(34px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(201, 149, 90, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Narrow screens: once .split has collapsed to a single column, the calligraphy
   would stack above the copy at full width. Shrink it instead and sit it to the
   right of "Taste." Desktop keeps the design's full-size figure on the left. */
@media (max-width: 800px) {
  .meaning .split {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: clamp(12px, 3vw, 24px);
  }
  .meaning .col { order: 1; grid-column: 1; }
  .meaning .figure {
    order: 2;
    grid-column: 2;
    width: clamp(112px, 34vw, 172px);
    max-width: none;
    justify-self: end;
    align-self: start;
    margin-top: 4px;
    /* let the mark run into the page gutter so it can be this size without
       squeezing the column of type beside it */
    margin-right: calc(var(--pad-x) * -0.55);
  }
}

/* The bar carries six items, one of them "Lyrics & Meaning", so it runs out
   of room before the rest of the layout does. It folds into the menu at
   1000px while everything else keeps its own 860px breakpoint below. */
@media (max-width: 1000px) {
  .nav { padding: 14px 20px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 26px;
    background: rgba(29, 15, 5, .97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201, 149, 90, .2);
    font-size: 12px;
    letter-spacing: .26em;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 16px 0; border-bottom: 1px solid rgba(201, 149, 90, .12); }
  .nav__cta {
    margin-top: 18px;
    border-bottom: 1px solid rgba(231, 220, 201, .55);
    text-align: center;
  }
}

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 860px) {
  .show { grid-template-columns: 1fr; gap: 12px; }
  .show__date { flex-direction: row; align-items: baseline; gap: 10px; }
  .show__day { font-size: 40px; }
  .merch__stack > :nth-child(1),
  .merch__stack > :nth-child(3) { grid-column: 3 / 13; }
  .merch__stack > :nth-child(2) { grid-column: 1 / 11; }
}

/* --- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__bg img { animation: none; }
  [data-drift] { will-change: auto; translate: none; }
  .hero__clouds { animation: none; transform: none; will-change: auto; }
}

/* ==========================================================================
   Event / ticket page  (/tickets/)
   Shares every token and most components with the homepage; only the hero
   split and the ticket panel are particular to it.
   ========================================================================== */

.evt {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(110px, 14vh, 150px) clamp(20px, 5vw, 72px) clamp(70px, 10vh, 110px);
  isolation: isolate;
}
.evt__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
.evt__scene { position: absolute; inset: 0; }
.evt__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 88%;
  animation: zk-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
/* darker on the sides than the homepage, so the type and the panel hold up */
.evt__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(42,23,9,.82) 0%, rgba(42,23,9,.5) 48%, rgba(42,23,9,.62) 100%),
    linear-gradient(180deg, rgba(42,23,9,.5) 0%, rgba(42,23,9,0) 30%, rgba(42,23,9,0) 70%, var(--ink) 100%);
}

.evt__grid {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
}
.evt__lead { display: flex; flex-direction: column; align-items: flex-start; }

.evt__title {
  margin: 0;
  line-height: 0;
  animation: zk-up 1.6s .25s both var(--ease);
}
.evt__title img { width: min(640px, 100%); height: auto; display: block; }

.evt__by {
  margin: clamp(18px, 2.8vh, 30px) 0 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  animation: zk-up 1.6s .4s both var(--ease);
}
.evt__by img { height: clamp(30px, 3.6vw, 48px); width: auto; }
.evt__by-word {
  font-size: clamp(22px, 2.2vw, 30px);
  font-style: italic;
  color: var(--gold);
}
.evt__by-music {
  font-family: var(--f-ui);
  font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-pale);
  align-self: flex-end;
  padding-bottom: .35em;
}

.evt__facts {
  margin: clamp(30px, 4.4vh, 46px) 0 0;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  animation: zk-up 1.6s .55s both var(--ease);
}
.evt__fact {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid rgba(226, 185, 127, .22);
}
.evt__fact:last-child { border-bottom: 1px solid rgba(226, 185, 127, .22); }
.evt__fact dt {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  padding-top: 5px;
}
.evt__fact dd {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--cream-bright);
}
.evt__fact sup { font-size: .52em; }

/* --- Ticket panel --------------------------------------------------------- */
.ticket {
  width: 100%;
  max-width: 500px;
  justify-self: start;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 46px);
  background: rgba(29, 15, 5, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 185, 127, .28);
  color: var(--cream-bright);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .8);
  animation: zk-up 1.6s .55s both var(--ease);
  scroll-margin-top: 100px;
}
.ticket__eyebrow {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}
.ticket__price {
  margin: 24px 0 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.ticket__now {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 7vw, 96px);
  line-height: 1;
  color: var(--cream-bright);
}
.ticket__was {
  position: relative;
  font-size: clamp(28px, 2.8vw, 38px);
  color: #A98B63;
}
.ticket__was span {
  position: absolute;
  left: -4px; right: -4px;
  top: 52%;
  height: 2px;
  background: #C0562C;
  transform: rotate(-8deg);
}
.ticket__note {
  margin-top: 4px;
  font-size: 19px;
  font-style: italic;
  color: var(--sand);
}
.ticket__note:first-of-type { margin-top: 12px; }
.ticket__note--gold { color: var(--gold); }
.ticket__rule {
  margin-top: clamp(26px, 3vw, 36px);
  height: 1px;
  background: rgba(201, 149, 90, .28);
}
/* The terms notice closes the panel, below the capacity note. Fine print, so
   sized down, but kept on --sand for contrast rather than dimmed further. */
.ticket__terms {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(201, 149, 90, .22);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sand);
  text-align: center;
  text-wrap: pretty;
}
.ticket__terms a {
  color: var(--gold);
  border-bottom: 1px solid rgba(226, 185, 127, .45);
}
.ticket__terms a:hover { color: var(--cream-bright); border-bottom-color: var(--cream-bright); }

.ticket__buy {
  margin-top: clamp(26px, 3vw, 36px);
  display: block;
  padding: 19px;
  text-align: center;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  transition: background .35s ease, color .35s ease;
}
.ticket__buy:hover { background: var(--cream-bright); color: var(--ink); }
.ticket__blurb {
  margin: 20px 0 0;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--sand);
  text-align: center;
  text-wrap: pretty;
}
.ticket__blurb span { color: var(--gold); }

/* --- "The night" ---------------------------------------------------------- */
.evt__night {
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(42,23,9,0) 26%, rgba(42,23,9,0) 76%, var(--ink) 100%),
    radial-gradient(120% 70% at 38% 50%, #3A2310 0%, var(--ink) 74%);
}
.evt__night .figure { max-width: 440px; }
.evt__night-title {
  margin: 22px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  color: var(--cream-bright);
  text-wrap: balance;
}
.evt__night-body {
  margin: clamp(26px, 3.6vw, 38px) 0 0;
  max-width: 40ch;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.66;
  color: var(--sand);
  text-wrap: pretty;
}
.evt__night-cta {
  margin-top: clamp(28px, 3.6vw, 40px);
  align-self: flex-start;
  padding: 15px 34px;
  border: 1px solid rgba(226, 185, 127, .55);
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream-bright);
  transition: background .35s ease, color .35s ease;
}
.evt__night-cta:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 800px) {
  /* the ticket panel reads better full width once the columns stack */
  .ticket { max-width: none; }
  .evt__fact { grid-template-columns: 84px 1fr; gap: 14px; }
  /* this page's calligraphy keeps the design's full-width placement */
  .evt__night .figure { order: 0; width: 100%; max-width: 440px; justify-self: center; margin-right: 0; }
  .evt__night .split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .evt__bg img { animation: none; }
}

/* The flyer in the homepage's Shows section links through to the ticket page.
   It carries its own artwork, so it needs no panel behind it — the rounded
   corners and shadow come from the shared `.shows .figure img` rule. */
.shows__poster { display: block; transition: opacity .35s ease; }
.shows__poster:hover { opacity: .88; }
.shows__poster img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Terms & Ticket Policy  (/terms/)
   ========================================================================== */

/* An ink band at the top carries the title and, just as importantly, gives the
   fixed nav something dark to sit on — the nav is transparent until you scroll,
   and its cream links would be invisible against a cream page. */
.legal__head {
  padding: clamp(140px, 20vh, 210px) var(--pad-x) clamp(56px, 8vw, 90px);
  background: var(--ink);
}
.legal__title {
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.04;
  color: var(--cream-bright);
  text-wrap: balance;
}
.legal__updated {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

.legal {
  padding: clamp(64px, 9vw, 110px) var(--pad-x) clamp(80px, 11vw, 140px);
  background: var(--cream);
}
/* A readable measure for long-form text, sitting inside .shell rather than on
   it, so the column starts on the same edge as the title in the band above
   instead of being centred independently. */
.legal__body { max-width: 68ch; }

.legal__item + .legal__item { margin-top: clamp(38px, 5vw, 60px); }
.legal__item h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--ink);
}
.legal__item p {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.72;
  color: var(--brown-deep);
  text-wrap: pretty;
}
.legal__item a {
  color: var(--rust-deep);
  border-bottom: 1px solid rgba(138, 65, 20, .35);
}
.legal__item a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Longer policy pages: sub-headings, lists, contents --------------------- */
.legal__intro p {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.68;
  color: var(--ink);
  text-wrap: pretty;
}
.legal__intro { margin-bottom: clamp(38px, 5vw, 56px); }

.legal__toc {
  margin-bottom: clamp(44px, 6vw, 70px);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 36px);
  background: rgba(42, 23, 9, .05);
  border-left: 2px solid var(--gold-deep);
}
.legal__toc h2 {
  margin: 0 0 14px;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.legal__toc ol {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 7px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.4;
  color: var(--brown);
}
.legal__toc a { color: var(--brown-deep); }
.legal__toc a:hover { color: var(--rust-deep); }

.legal__item h3 {
  margin: clamp(26px, 3vw, 34px) 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--ink);
}
.legal__item ul {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  padding-left: 1.3em;
  display: grid;
  gap: 6px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--brown-deep);
}
.legal__item ul::marker, .legal__item li::marker { color: var(--gold-deep); }
.legal__address {
  padding-left: 1em;
  border-left: 1px solid rgba(201, 149, 90, .5);
}

/* each section is a scroll target from the contents list */
.legal__item { scroll-margin-top: 110px; }

/* --- Sold out, and the waitlist that replaces the buy button --------------- */
.ticket__now--past {
  color: #A98B63;
  text-decoration: line-through;
  text-decoration-color: #C0562C;
  text-decoration-thickness: 3px;
}
.ticket__soldout {
  font-family: var(--f-ui);
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.ticket__lead {
  margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.3;
  color: var(--cream-bright);
}
.ticket__copy {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--sand);
  text-wrap: pretty;
}


/* ==========================================================================
   Partner with Zauk  (/partners/)
   A sales page: alternating dark and cream bands, image-led, little text.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.pt-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: center;
  padding: clamp(150px, 22vh, 230px) var(--pad-x) clamp(80px, 12vh, 130px);
  isolation: isolate;
}
.pt-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.pt-hero__scene { position: absolute; inset: 0; }
.pt-hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 88%;
  animation: zk-drift 30s ease-in-out infinite alternate;
  will-change: transform;
}
.pt-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(42,23,9,.88) 0%, rgba(42,23,9,.55) 55%, rgba(42,23,9,.7) 100%),
    linear-gradient(180deg, rgba(42,23,9,.55) 0%, rgba(42,23,9,0) 34%, rgba(42,23,9,0) 62%, var(--ink) 100%);
}
.pt-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.pt-hero__title {
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(42px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--cream-bright);
  text-wrap: balance;
  animation: zk-up 1.6s .15s both var(--ease);
}
.pt-hero__lede {
  margin: clamp(24px, 3vw, 34px) 0 0;
  max-width: 30ch;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.45;
  color: var(--sand);
  text-wrap: pretty;
  animation: zk-up 1.6s .35s both var(--ease);
}

/* shared call to action for this page */
.pt-cta {
  margin-top: clamp(28px, 3.6vw, 40px);
  align-self: flex-start;
  padding: 18px 44px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  transition: background .35s ease, color .35s ease;
  animation: zk-up 1.6s .55s both var(--ease);
}
.pt-cta:hover { background: var(--cream-bright); color: var(--ink); }

.pt-h2 {
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06;
  text-wrap: balance;
}
.pt-body {
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.66;
  text-wrap: pretty;
}
.pt-head { margin-bottom: clamp(44px, 6vw, 72px); }

/* --- Proof: three numbers ------------------------------------------------ */
.pt-proof {
  background: var(--ink);
  padding-top: clamp(70px, 9vw, 110px);
  padding-bottom: clamp(70px, 9vw, 110px);
}
.pt-stats {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(30px, 4vw, 60px);
}
.pt-stat {
  display: flex; flex-direction: column;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(226, 185, 127, .3);
}
.pt-stat__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1;
  color: var(--gold);
}
.pt-stat__label {
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.pt-stat__note {
  margin-top: 14px;
  max-width: 28ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--sand);
  text-wrap: pretty;
}

/* --- Audience ------------------------------------------------------------ */
.pt-audience { background: var(--cream); }
.pt-audience .pt-h2 { color: var(--ink); }
.pt-audience .pt-body { color: var(--brown-deep); }
.pt-audience .eyebrow { color: var(--rust-deep); }

.pt-tags {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.pt-tag {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(24px, 3vw, 36px) clamp(12px, 2vw, 20px);
  background: #E7DFD1;
  border: 1px solid rgba(42, 23, 9, .12);
  text-align: center;
}
.pt-tag svg {
  width: clamp(30px, 3.4vw, 40px); height: auto;
  fill: none;
  stroke: var(--rust-deep);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pt-tag span {
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brown-deep);
}

/* --- What partnership looks like ----------------------------------------- */
.pt-what { background: var(--ink); }
.pt-what .pt-h2 { color: var(--cream-bright); }
.pt-what .pt-body { color: var(--sand); }

.pt-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.pt-feature + .pt-feature { margin-top: clamp(60px, 8vw, 110px); }
.pt-feature--flip .pt-feature__text { order: 2; }
.pt-feature__n {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold-deep);
}
.pt-feature__title {
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  color: var(--cream-bright);
  text-wrap: balance;
}
.pt-feature__img img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 34px 70px -40px rgba(0, 0, 0, .8);
}
.pt-caption {
  display: block;
  margin-top: 14px;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

/* the third feature puts its three social frames in a row below the copy */
.pt-feature--wide { grid-template-columns: 1fr; }
.pt-social {
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.pt-social img {
  width: 100%; height: auto; display: block;
  border-radius: 4px;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8);
}

/* --- Packages ------------------------------------------------------------ */
.pt-packages { background: var(--cream); }
.pt-packages .pt-h2 { color: var(--ink); }
.pt-packages .eyebrow { color: var(--rust-deep); }

.pt-tiers {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}
.pt-tier {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 42px);
  background: #E7DFD1;
  border: 1px solid rgba(42, 23, 9, .14);
}
/* the exclusive tier is the one to look at first */
.pt-tier--lead {
  background: var(--ink);
  border-color: rgba(226, 185, 127, .3);
}
.pt-tier__flag {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 7px 14px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.pt-tier__name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--ink);
}
.pt-tier__price {
  margin: 10px 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 56px);
  line-height: 1;
  color: var(--ink);
}
.pt-tier--lead .pt-tier__name { color: var(--cream-bright); }
.pt-tier--lead .pt-tier__price { color: var(--gold); }

.pt-list {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0; list-style: none;
  display: grid; gap: 11px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.45;
  color: var(--brown-deep);
}
.pt-list li { padding-left: 22px; position: relative; }
.pt-list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--gold-deep);
}
.pt-tier--lead .pt-list { color: var(--sand); }
.pt-tier--lead .pt-list li::before { background: var(--gold); }

.pt-tier__cta {
  margin-top: auto;
  padding-top: clamp(26px, 3vw, 34px);
  align-self: flex-start;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.pt-tier__cta span {
  border-bottom: 1px solid rgba(138, 65, 20, .4);
  padding-bottom: 4px;
}
.pt-tier__cta:hover span { border-bottom-color: var(--ink); }
.pt-tier__cta:hover { color: var(--ink); }
.pt-tier--lead .pt-tier__cta { color: var(--gold); }
.pt-tier--lead .pt-tier__cta span { border-bottom-color: rgba(226, 185, 127, .5); }
.pt-tier--lead .pt-tier__cta:hover { color: var(--cream-bright); }
.pt-tier--lead .pt-tier__cta:hover span { border-bottom-color: var(--cream-bright); }

.pt-ast { color: var(--rust); }
.pt-tier--lead .pt-ast { color: var(--gold); }
.pt-footnote {
  margin: clamp(26px, 3vw, 36px) 0 0;
  font-size: 16px;
  font-style: italic;
  color: var(--brown);
}

/* --- Close --------------------------------------------------------------- */
.pt-close {
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(42,23,9,0) 30%, rgba(42,23,9,0) 70%, var(--ink) 100%),
    radial-gradient(120% 80% at 50% 50%, #3A2310 0%, var(--ink) 72%);
  text-align: center;
}
.pt-close__inner { display: flex; flex-direction: column; align-items: center; }
.pt-close__title {
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.06;
  color: var(--cream-bright);
  max-width: 18ch;
  text-wrap: balance;
}
.pt-close__body { color: var(--sand); max-width: 42ch; }
.pt-close__links {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 30px);
}
.pt-close .pt-cta { align-self: center; }
.pt-close__alt {
  margin-top: clamp(28px, 3.6vw, 40px);
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.pt-close__alt:hover { color: var(--cream-bright); }

@media (max-width: 800px) {
  .pt-feature--flip .pt-feature__text { order: 0; }
  .pt-social { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-hero__bg img { animation: none; }
}

/* The booth photo is a crop from the sponsorship deck and only 356px wide, so
   it is capped at its own resolution rather than being blown up beside the
   full-size backdrop shot. Swap in a proper photo and remove this. */
.pt-feature__img--small img { max-width: 420px; }

/* ==========================================================================
   Guest guide  (/guide/)

   Read on a phone, often in a car park, often in a hurry — so this page is
   built to be scanned, not read front to back. Three decisions carry it:

   1. Body copy is set in --f-ui (Jost), not the site's Cormorant Garamond.
      Cormorant is a high-contrast display serif with a small x-height and
      thin strokes: right for six words on the homepage, punishing for a
      thousand words of instructions at arm's length. Headings stay Playfair,
      so the page still sounds like Zauk.
   2. Sections are full-bleed bands that alternate cream / tint / ink, so the
      eye can tell where one answer stops and the next begins. The two ink
      bands are deliberate: the ticket rules, and the goodbye.
   3. Every band has a numbered rail. On desktop it is its own column and
      sticks while you read that band; on mobile it folds into a single line
      above the content. It gives the page a spine.
   ========================================================================== */

.gd-head,
.gd-band {
  --gd-pad-x: clamp(24px, 6vw, 96px);
  --gd-rail: 210px;
  --gd-gap: clamp(26px, 3.6vw, 56px);
  --gd-measure: 60rem;
  --gd-prose: 38rem;
}

/* --- Hero --------------------------------------------------------------- */

.gd-head {
  padding: clamp(132px, 19vh, 190px) var(--gd-pad-x) clamp(40px, 5vw, 60px);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(201, 149, 90, .16), transparent 60%),
    var(--ink);
}
.gd-title {
  margin: 18px 0 0;
  max-width: 18ch;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.04;
  color: var(--cream-bright);
  text-wrap: balance;
}
.gd-date {
  margin: clamp(16px, 2.2vw, 22px) 0 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-pale);
}

/* Jump chips: the whole point of the page is that someone wants one answer.
   Squared, not pill-shaped — the rest of the site has no rounded corners. */
.gd-jump {
  margin: clamp(28px, 4vw, 44px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gd-jump a {
  padding: 9px 15px;
  border: 1px solid rgba(216, 185, 138, .3);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-pale);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.gd-jump a:hover,
.gd-jump a:focus-visible {
  border-color: var(--gold);
  background: rgba(226, 185, 127, .1);
  color: var(--cream-bright);
}

/* --- Bands -------------------------------------------------------------- */

.gd { background: var(--cream); }

.gd-band { padding: clamp(50px, 7vw, 92px) var(--gd-pad-x); }
.gd-band--tint { background: var(--cream-soft); }
.gd-band--ink  { background: var(--ink); }
.gd-band--open { padding-top: clamp(44px, 6vw, 72px); }

.gd-grid {
  display: grid;
  grid-template-columns: var(--gd-rail) minmax(0, var(--gd-measure));
  gap: var(--gd-gap);
}
@media (max-width: 880px) {
  .gd-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 28px); }
}

/* --- The numbered rail -------------------------------------------------- */

.gd-rail { align-self: start; }
@media (min-width: 881px) {
  .gd-rail { position: sticky; top: 104px; }
}
/* --rust, not --gold-deep: the gold is only 2.2:1 on cream, which fails even
   the 3:1 large-text threshold. Rust reads as the same warm accent at 4.4:1. */
.gd-rail__no {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  color: var(--rust);
}
.gd-band--ink .gd-rail__no { color: var(--gold); }

.gd-rail__t {
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(23px, 2.5vw, 31px);
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
}
.gd-band--ink .gd-rail__t { color: var(--cream-bright); }

.gd-ico {
  display: block;
  margin-top: 16px;
  width: 30px;
  height: auto;
  fill: none;
  stroke: var(--rust-deep);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gd-band--ink .gd-ico { stroke: var(--gold); }

/* On a phone the rail becomes a header line: number and icon side by side,
   title underneath. Sticky is dropped — there is no room for it to be worth
   the space it would take. */
@media (max-width: 880px) {
  .gd-rail {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(42, 23, 9, .16);
  }
  .gd-band--ink .gd-rail { border-bottom-color: rgba(226, 185, 127, .24); }
  .gd-rail__no { font-size: 26px; }
  .gd-ico { margin: 0; width: 25px; }
  .gd-rail__t { grid-column: 1 / -1; margin-top: 12px; font-size: clamp(23px, 6vw, 30px); }
}

/* --- Body copy ---------------------------------------------------------- */

.gd-c {
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.72;
  color: var(--brown-deep);
}
.gd-band--ink .gd-c { color: var(--sand); }

.gd-c p:not([class]) { margin: 0 0 1.1em; text-wrap: pretty; }
.gd-c p:not([class]):last-child { margin-bottom: 0; }

.gd-c > p,
.gd-c > ul,
.gd-c > .gd-note,
.gd-c > .gd-flag,
.gd-time { max-width: var(--gd-prose); }
.gd-c b { font-weight: 400; color: var(--ink); }
.gd-band--ink .gd-c b { color: var(--cream-bright); }

.gd-lede {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(27px, 3.6vw, 44px);
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}
.gd-intro {
  max-width: 40rem;
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.68;
  color: var(--brown-deep);
}
.gd-intro p { margin: 0 0 .9em; text-wrap: pretty; }
.gd-intro p:last-child { margin-bottom: 0; }

.gd-link {
  color: var(--rust-deep);
  border-bottom: 1px solid rgba(138, 65, 20, .4);
  padding-bottom: 2px;
}
.gd-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.gd-band--ink .gd-link { color: var(--gold); border-bottom-color: rgba(226, 185, 127, .45); }
.gd-band--ink .gd-link:hover { color: var(--cream-bright); border-bottom-color: var(--cream-bright); }

/* --- The four facts ----------------------------------------------------- */

.gd-facts {
  margin: clamp(32px, 4.5vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  background: rgba(42, 23, 9, .14);
  border: 1px solid rgba(42, 23, 9, .14);
}
.gd-fact { padding: clamp(16px, 2vw, 22px); background: var(--cream-form); }
.gd-fact svg {
  width: 22px; height: auto;
  fill: none; stroke: var(--rust-deep);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.gd-fact dt {
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.gd-fact dd {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15;
  color: var(--ink);
}

/* --- Running order ------------------------------------------------------ */

.gd-time {
  margin: 0 0 clamp(26px, 3.4vw, 36px);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}
.gd-time li {
  padding-top: 18px;
  border-top: 2px solid var(--gold-deep);
  position: relative;
}
.gd-time li::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: var(--gold-deep);
}
.gd-time__t {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--ink);
}
.gd-time__l {
  display: block;
  margin-top: 7px;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rust-deep);
}

/* --- Venue card --------------------------------------------------------- */

.gd-venue {
  max-width: 34rem;
  margin: 0 0 clamp(22px, 3vw, 30px);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--cream-form);
  border-left: 3px solid var(--rust-deep);
}
.gd-venue__n {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.3;
  color: var(--ink);
}
.gd-venue__r {
  margin: 6px 0 0;
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.gd-venue__a {
  margin: 12px 0 0;
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--brown-deep);
}
.gd-venue__map {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--cream-bright);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s var(--ease);
}
.gd-venue__map:hover { background: var(--rust-deep); color: var(--cream-bright); }

/* --- Lists -------------------------------------------------------------- */

/* Plain list: short points that read as prose. */
.gd-list {
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.gd-list:last-child { margin-bottom: 0; }
.gd-list li { padding-left: 22px; position: relative; }
.gd-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--gold-deep);
}

/* Ruled list: rules you are meant to check off one by one, so each gets its
   own row and its own hairline. Same words, easier to count. */
.gd-rules {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}
.gd-rules li {
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid rgba(42, 23, 9, .14);
  position: relative;
}
.gd-rules li:first-child { border-top: 1px solid rgba(42, 23, 9, .14); }
.gd-band--ink .gd-rules li { border-bottom-color: rgba(226, 185, 127, .2); }
.gd-band--ink .gd-rules li:first-child { border-top-color: rgba(226, 185, 127, .2); }
.gd-rules li::before {
  content: "";
  position: absolute;
  left: 2px; top: 1.42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(-45deg);
}
.gd-band--ink .gd-rules li::before { border-color: var(--gold); }

/* --- Callout ------------------------------------------------------------ */

.gd-flag {
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: 18px 22px;
  background: var(--rust-deep);
  color: var(--cream-bright);
  font-family: var(--f-ui);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.5;
}
/* --rust would be the livelier block here, but cream-bright on it lands at
   4.45:1 — just under the 4.5 needed for text this size. --rust-deep is
   6.18:1 and still reads as a warm alert against the ink band. */
.gd-band--ink .gd-flag { background: var(--rust-deep); }

.gd-note {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 16px 20px;
  background: var(--cream-form);
  border-left: 3px solid var(--gold-deep);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
}
.gd-band--tint .gd-note { background: var(--cream); }
.gd-band--ink .gd-note {
  background: rgba(226, 185, 127, .08);
  border-left-color: var(--gold);
}

/* --- Outfit chips ------------------------------------------------------- */

.gd-chips {
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.gd-chips li {
  padding: 10px 17px;
  border: 1px solid rgba(138, 65, 20, .3);
  background: var(--cream-form);
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rust-deep);
}
.gd-band--tint .gd-chips li { background: var(--cream); }

/* --- Sign-off ----------------------------------------------------------- */

.gd-sign { text-align: center; }
.gd-sign p {
  margin: 0;
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  color: var(--sand);
}
.gd-sign__off { margin-top: clamp(18px, 2.4vw, 26px) !important; font-style: italic; }
.gd-sign__name {
  margin-top: 8px !important;
  font-family: var(--f-display) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  color: var(--cream-bright) !important;
}
.gd-sign__name .urdu { color: var(--gold); font-size: .8em; }
.gd-sign__extra {
  margin-top: clamp(26px, 3.2vw, 36px) !important;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(226, 185, 127, .2);
  font-size: 15px !important;
}

/* pointer from the ticket panel to the guest guide */
.ticket__guide {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(201, 149, 90, .22);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sand);
  text-align: center;
}
.ticket__guide a { color: var(--gold); border-bottom: 1px solid rgba(226, 185, 127, .45); }
.ticket__guide a:hover { color: var(--cream-bright); border-bottom-color: var(--cream-bright); }

/* --- Floor plan ---------------------------------------------------------- */

/* Redrawn rather than dropped in as the hotel's PNG: that file is 804px wide
   with 6pt labels, and this page is read on a phone. As SVG it stays sharp at
   any zoom, carries only what a guest needs, and themes with the site. The
   hotel's original is still one tap away under the caption. */
.gd-plan { margin: clamp(26px, 3.2vw, 36px) 0 0; }

/* Below ~700px the plan is scrolled sideways rather than shrunk — labels
   small enough to fit a phone's width would not be readable. */
.gd-plan__scroll {
  overflow-x: auto;
  padding: clamp(12px, 1.8vw, 20px);
  background: var(--cream);
  border: 1px solid rgba(42, 23, 9, .18);
}
.gd-plan svg { display: block; width: 100%; min-width: 660px; height: auto; }

.gd-plan figcaption {
  margin-top: 14px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--brown);
}

.fp-wall { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.fp-room { fill: var(--cream-form); stroke: rgba(42, 23, 9, .3); stroke-width: 1.2; }
.fp-room--key { fill: var(--rust-deep); stroke: var(--rust-deep); }
.fp-div { fill: none; stroke: rgba(42, 23, 9, .26); stroke-width: 1.2; stroke-dasharray: 5 4; }

.fp-t { font-family: var(--f-ui); font-weight: 400; }
.fp-t--small { font-size: 13px; fill: var(--brown-deep); }
.fp-t--key { font-size: 16px; fill: var(--cream-bright); letter-spacing: .07em; }
.fp-t--mark { font-size: 16px; fill: var(--rust-deep); }
.fp-t--muted { font-size: 15px; fill: var(--brown-deep); }

.fp-door { stroke: var(--rust-deep); stroke-width: 6; stroke-linecap: butt; }
.fp-door--no { stroke: var(--brown); stroke-width: 4; stroke-dasharray: 4 4; }

.fp-badge { fill: var(--rust-deep); }
.fp-badge-t { fill: none; stroke: var(--cream-bright); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fp-badge-no { fill: none; stroke: var(--brown); stroke-width: 2; }
.fp-badge-x { fill: none; stroke: var(--brown); stroke-width: 2.2; stroke-linecap: round; }

.fp-arrow { fill: var(--rust-deep); }
.fp-arrow-line { fill: none; stroke: var(--rust-deep); stroke-width: 2.6; }
.fp-route { fill: none; stroke: var(--rust-deep); stroke-width: 2.6; stroke-dasharray: 7 6; stroke-linecap: round; }

.fp-n { font-family: var(--f-ui); font-size: 13px; fill: var(--brown-deep); }
.fp-n-arrow { fill: none; stroke: var(--brown-deep); stroke-width: 1.8; }
.fp-t--markb { font-size: 14px; fill: var(--rust-deep); letter-spacing: .1em; text-transform: uppercase; }
.fp-t--mutedb { font-size: 13px; fill: var(--brown); letter-spacing: .1em; text-transform: uppercase; }
.fp-n-head { fill: var(--brown-deep); }

/* the plan scrolls sideways under ~700px, so it needs to be reachable by
   keyboard — and people need telling there is more of it off to the right */
.gd-plan__scroll:focus-visible { outline: 2px solid var(--rust-deep); outline-offset: 3px; }
.gd-plan__swipe { display: none; }
@media (max-width: 700px) {
  .gd-plan__swipe { display: block; margin-top: 6px; color: var(--rust-deep); }
}

/* ==========================================================================
   Meet Zauk  (#meet on the homepage)

   Four portraits in a row; the introduction covers the portrait on hover.

   Hover alone would hide every bio on a phone, so the reveal is driven by
   three things at once: :hover for a mouse, :focus-within for a keyboard, and
   an .is-open class that main.js toggles on tap. The bio is always in the DOM
   and never display:none, so a screen reader reads all four introductions in
   order whether or not anything is "open".
   ========================================================================== */

.meet {
  padding-top: var(--pad-seam);      /* seam: .meaning above is also dark */
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(42, 23, 9, 0) 30%, rgba(42, 23, 9, 0) 100%),
    radial-gradient(90% 60% at 50% 0%, #38210F 0%, var(--ink) 70%);
}
.meet__head { text-align: center; }
.meet__title {
  margin: 14px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  color: var(--cream-bright);
}

.mz-grid {
  margin: clamp(38px, 5vw, 62px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
@media (max-width: 860px) { .mz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mz-grid { grid-template-columns: minmax(0, 1fr); } }

.mz-card {
  position: relative;
  aspect-ratio: 9 / 16;      /* the photo's own shape - no crop, full body */
  overflow: hidden;
  background: var(--ink-deep);
  border: 1px solid rgba(226, 185, 127, .16);
}
.mz-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}

/* The name and instrument are set into the photographs themselves, in the
   band's own lettering, so there is no HTML name over the portrait. The alt
   text carries those words, and .mz-card__h below is still the card's one
   real heading.

"Meet" in the body serif over the name in Playfair 900 - the pairing the
   band used on their own cards. */
.mz-card__h {
  margin: 0 0 .5em;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.02;
  color: var(--cream-bright);
}
.mz-card__h span {
  display: block;
  margin-bottom: .1em;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .56em;
  letter-spacing: .01em;
  color: var(--gold-pale);
}

/* The instrument, in the script the band used on their own cards. Allura sits
   on a small x-height, so it is set large relative to the name and pulled up
   tight underneath it. */
.mz-card__role {
  display: block;
  margin-top: -.1em;
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  font-size: .86em;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--gold-light);
}

.mz-card__bio {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6em;
  padding: clamp(15px, 1.5vw, 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(74, 42, 18, .8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
.mz-card__bio p {
  margin: 0;
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(12.5px, 1.02vw, 14.5px);
  line-height: 1.62;
  color: var(--cream-bright);
  text-wrap: pretty;
}

/* the whole card surface is the control */
.mz-card__hit {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mz-card__hit:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

.mz-card:hover .mz-card__bio,
.mz-card:focus-within .mz-card__bio,
.mz-card.is-open .mz-card__bio {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mz-card:hover img,
.mz-card:focus-within img,
.mz-card.is-open img {
  transform: scale(1.06);
  filter: blur(5px) saturate(.8) brightness(.92);
}

@media (prefers-reduced-motion: reduce) {
  .mz-card img,
  .mz-card__bio { transition: none; }
  .mz-card:hover img,
  .mz-card:focus-within img,
  .mz-card.is-open img { transform: none; filter: saturate(.8) brightness(.92); }
}

@media (max-width: 860px) {
  .mz-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: rgba(226, 185, 127, .05);
  }
  .mz-card picture { display: block; aspect-ratio: 3 / 4; }
  .mz-card__bio {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    background: none;
    padding: 16px 16px 18px;
    justify-content: flex-start;
  }
  .mz-card__hit { display: none; }          /* nothing left to reveal */
  .mz-card:hover img,
  .mz-card.is-open img { transform: none; filter: none; }
}