/* ==========================================================================
   Vipul Nagnesia — official site
   Light "ivory & gold" system. Palette derived from the VN logo gradient.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Grounds */
  --ivory:        #FBF8F2;
  --ivory-2:      #F5EEE1;
  --ivory-3:      #EFE5D4;
  --paper:        #FFFFFF;

  /* Ink */
  --ink:          #2B1E12;
  --ink-2:        #5B4733;
  --ink-3:        #8A7560;
  --ink-on-dark:  #F7EFE2;
  --ink-on-dark-2:#D6C3A8;

  /* Gold, sampled from the logo gradient */
  --gold-1:       #EBAE45;
  --gold-2:       #C9862F;
  --gold-3:       #A2621F;
  --gold-soft:    #F0D9AE;
  --gold-wash:    #FAEFDA;

  /* Deep bronze for drenched bands */
  --bronze:       #40290F;
  --bronze-2:     #573A17;

  --line:         rgba(43, 30, 18, .14);
  --line-soft:    rgba(43, 30, 18, .08);
  --line-on-dark: rgba(247, 239, 226, .18);

  --grad-gold: linear-gradient(103deg, var(--gold-1) 0%, var(--gold-2) 48%, var(--gold-3) 100%);
  /* Button-only gradient: stops at gold-2 so espresso text clears WCAG AA across
     the whole fill. The full gradient stays for decorative use. */
  --grad-gold-btn: linear-gradient(103deg, var(--gold-1) 0%, var(--gold-2) 100%);
  --espresso: #34220E;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --pad:       clamp(20px, 5vw, 64px);
  --section-y: clamp(40px, 5.2vw, 78px);
  --maxw:      1320px;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;

  --shadow-1: 0 1px 2px rgba(43,30,18,.06), 0 8px 24px rgba(43,30,18,.06);
  --shadow-2: 0 2px 6px rgba(43,30,18,.08), 0 22px 60px rgba(43,30,18,.13);

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  /* `clip` rather than `hidden`: it prevents sideways scroll without turning the
     root into a scroll container, which would break position: sticky. */
  overflow-x: clip;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
/* Components below set `display`, which outranks the UA rule for [hidden]. */
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-1); color: #2B1E12; }

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

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tint  { background: var(--ivory-2); }
.section--tint2 { background: var(--ivory-3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bronze); color: var(--ink-on-dark);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.022em;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-3);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px;
  background: var(--grad-gold); flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 34px; height: 1px;
  background: var(--grad-gold); flex: none;
}
.eyebrow--light { color: var(--gold-1); }

.h-sec {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-top: 18px;
}
.h-sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.012em;
}
.lede {
  font-size: clamp(1.02rem, 1.55vw, 1.24rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.prose p { color: var(--ink-2); margin-bottom: 1.05em; max-width: 66ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* background-clip:text paints only inside the element's own box. On a
     display:block line that box is exactly line-height tall, so a descender
     hanging below it gets no paint at all and the glyph appears sliced. The
     padding grows the paint area; the negative margin keeps layout identical. */
  padding-bottom: .3em;
  margin-bottom: -.3em;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--espresso);
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  border: 0; border-radius: 100px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--btn-fg);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn > * { position: relative; z-index: 2; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: var(--grad-gold-btn);
  transition: transform .5s var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: var(--bronze);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover {
  --btn-fg: var(--ink-on-dark);       /* fill becomes bronze on hover */
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(162, 98, 31, .3);
}
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-fg: var(--ink); }
.btn--ghost::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost::after { background: var(--gold-wash); }
.btn--ghost:hover { --btn-fg: var(--ink); box-shadow: none; }

.btn--onDark { --btn-fg: var(--ink-on-dark); }
.btn--onDark::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-on-dark); }
.btn--onDark::after { background: var(--grad-gold); }
.btn--onDark:hover { --btn-fg: #34220E; }

.btn .ic { width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.btn:hover .ic { transform: translateX(3px); }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--gold-3);
  padding-bottom: 3px;
  background-image: var(--grad-gold);
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out);
}
.textlink:hover { background-size: 100% 1.5px; }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
  padding-block: 18px;
}
.hdr::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(251, 248, 242, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transition: opacity .45s var(--ease);
}
.hdr.is-stuck { padding-block: 10px; }
.hdr.is-stuck::before { opacity: 1; }

.hdr__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px;
}
.brand { display: block; line-height: 0; }
.brand img {
  /* The wordmark sits in the lower ~9% of the artwork, so the logo needs real
     height for "VIPUL NAGNESIA" to stay legible. */
  height: 68px; width: auto;
  transition: height .45s var(--ease), opacity .35s var(--ease);
}
.brand:hover img { opacity: .82; }
.hdr.is-stuck .brand img { height: 54px; }

.nav { display: flex; align-items: center; gap: 30px; justify-self: end; }
.burger { justify-self: end; }
.nav a {
  font-size: 11.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-2); position: relative; padding-block: 6px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--grad-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-active { color: var(--gold-3); }

.burger {
  /* Flex column, not grid: an auto-row grid stretches its rows to fill the 44px
     button, which pushed the bars apart so the close state formed a chevron
     instead of an X. Flex keeps the rows content-sized. */
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; justify-self: end;
  flex-direction: column; align-items: center; justify-content: center;
}
.burger span {
  display: block; width: 22px; height: 1.6px; background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ivory);
  padding: 110px var(--pad) 40px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%);
  transition: transform .6s var(--ease-out);
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); }
/* Direct children only: the CTA inside .drawer__foot is a .btn and must keep
   its own type, not inherit the big serif nav treatment. */
.drawer > a {
  font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 600;
  letter-spacing: -.02em; padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(14px);
}
.drawer.is-open > a { animation: drawerIn .55s var(--ease-out) forwards; }
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer__foot { margin-top: auto; padding-top: 28px; display: flex; gap: 14px; }

/* ==========================================================================
   Hero
   Layered editorial composition: the name runs the full width, the second line
   is indented, and the portrait sits in front of the type's right edge so the
   two overlap instead of dividing the screen down the middle.
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(116px, 14vw, 156px);
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(1100px, 118vw); aspect-ratio: 1;
  right: -18%; top: -34%;
  background: radial-gradient(circle at 50% 50%,
      rgba(235,174,69,.34) 0%,
      rgba(235,174,69,.14) 34%,
      rgba(235,174,69,0) 68%);
  animation: breathe 13s var(--ease) infinite;
}
.hero__glow--2 {
  right: auto; left: -26%; top: 34%;
  width: min(760px, 90vw);
  background: radial-gradient(circle at 50% 50%,
      rgba(201,134,47,.20) 0%, rgba(201,134,47,0) 66%);
  animation-delay: -6s;
}
@keyframes breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: .9; }
  50%      { transform: scale(1.13) translate(-2%, 3%); opacity: 1; }
}

.hero__stage {
  position: relative;
  /* Tall enough to contain the portrait, so it never rides up under the header. */
  min-height: clamp(440px, 80vh, 820px);
}

.hero__title {
  /* Poster scale: the name has to run wide enough to reach the portrait,
     otherwise the two sit apart and it reads as an ordinary split. */
  font-size: clamp(2.9rem, 14.5vw, 12rem);
  margin-top: clamp(12px, 1.4vw, 20px);
}
/* The indent is what breaks the block out of a plain stacked headline. */
.hero__ln2 { padding-left: 9%; }

/* overflow:hidden drives the reveal, but with line-height .95 it sliced 27px off
   the descenders of "p" and "g". Pad the clip box, then pull it back so the
   visual line spacing is unchanged. */
/* The clip box drives the reveal, but with line-height .95 the descenders of "p"
   and "g" fall outside it. Pad generously and cancel the padding with an equal
   negative margin, so the glyphs get room without changing line spacing.
   .42em is well past any Fraunces descender; the earlier .22em left only ~13px,
   which canvas measureText reported as safe but a variable font with optical
   sizing can exceed. */
.hero__title .ln {
  display: block; overflow: hidden;
  padding-bottom: .42em; margin-bottom: -.42em;
}
.hero__title .ln > span {
  display: block;
  /* Must clear the padded box, not just the content box, or the glyph tops peek
     into the padding before the animation runs. 150% is measured against the
     span's own height, which the .gold-text padding above enlarges. */
  transform: translateY(160%);
  animation: lineUp 1.05s var(--ease-out) forwards;
}
.hero__title .ln:nth-child(2) > span { animation-delay: .1s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero__figure {
  /* Positioned but deliberately z-index:auto. That paints it above the flowed
     headline while leaving the root stacking context intact, so the multiply
     below can still see the page behind it. Adding a z-index here breaks it. */
  position: absolute;
  /* Width-driven, not height-driven: left 60% + max width 40% can never exceed the
     stage, so the portrait cannot be clipped by the hero's overflow at any width.
     Sizing by height instead let it run past the right edge below ~1010px. */
  left: 60%; bottom: 0;
  width: min(40%, 520px);
  animation: figIn 1.1s var(--ease) .2s backwards;
}
/* Opacity only. A transform would reintroduce the stacking context. */
@keyframes figIn { from { opacity: 0; } }
.hero__figure img {
  width: 100%; height: auto;
  /* The studio backdrop is a cool light grey (~240,238,243), not white. Lifting it
     to clipping point and multiplying melts it into the ivory ground; the radial
     mask dissolves the frame edge. The source file is never modified. */
  /* The backdrop is not flat: ~246 at centre, ~233 in the corners. 1.06 clipped the
     centre to white but left the corners a shade dark, which showed as a faint
     rectangle. A touch more lift plus an earlier, softer mask falloff removes it. */
  filter: brightness(1.09) saturate(1.06);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 50% 44%, #000 40%, transparent 92%);
          mask-image: radial-gradient(ellipse 66% 64% at 50% 44%, #000 40%, transparent 92%);
}

.hero__copy {
  position: relative; z-index: 1;     /* sits above the portrait */
  max-width: min(46%, 540px);
  margin-top: clamp(18px, 2vw, 26px);
}

/* Chips rather than dot-separated text. A separated list can only wrap badly:
   at any width the break leaves a dangling separator at the start of a line.
   Self-contained chips wrap cleanly at every size. Pill radius matches the
   buttons. */
.hero__roles {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px;
  /* The four chips measure 725px together; 58% gave only 691 and pushed one on to
     a second row. 62% clears it, and still lands in the portrait's transparent
     left margin rather than over him. */
  max-width: min(62%, 820px);
  margin-top: clamp(20px, 2.6vw, 30px);
}
.hero__roles span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255, 255, 255, .55);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.hero__roles span:hover { border-color: var(--gold-2); color: var(--gold-3); }
.hero__lede { margin-top: 22px; font-size: clamp(1.02rem, 1.5vw, 1.22rem); max-width: 42ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: clamp(26px, 3vw, 36px); }

/* ---------- Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line-soft);
  background: var(--ivory-2);
  padding-block: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group span {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.3vw, 1.9rem);
  letter-spacing: -.01em; color: var(--ink); padding-inline: 26px; white-space: nowrap;
}
.marquee__group i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--grad-gold);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Split blocks (about / dual identity)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5.4vw, 78px);
  align-items: center;
}
.split--flip > :first-child { order: 2; }

.figframe {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, var(--gold-wash), var(--ivory-3));
  box-shadow: var(--shadow-2);
  /* Contains the multiply below, so the portrait blends with this frame's warm
     gradient instead of punching through to the page. */
  isolation: isolate;
}
.figframe img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  /* Same treatment as the hero: lift the cool studio grey to white, then multiply
     so the backdrop takes on the frame's gold wash. Source files stay untouched. */
  filter: brightness(1.06) saturate(1.06);
  mix-blend-mode: multiply;
}
.figframe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(162,98,31,.10), transparent 44%);
}
.figframe--tall img {
  aspect-ratio: 3 / 4;
  /* Full-length studio portrait: whole figure, headroom on top. */
  object-fit: contain; object-position: 50% 100%;
  padding-top: 6%;
  /* Feather the photo's own backdrop edges into the frame, so no box shows. */
  -webkit-mask-image: linear-gradient(90deg, transparent 9%, #000 24%, #000 79%, transparent 91%), linear-gradient(180deg, transparent 6%, #000 9%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 9%, #000 24%, #000 79%, transparent 91%), linear-gradient(180deg, transparent 6%, #000 9%);
          mask-composite: intersect;
}

.figcap {
  /* Sits under the portrait, not over it, so the full figure stays visible. */
  position: relative; z-index: 2;
  padding: 16px 26px 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
}
.figcap b { display: block; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.figcap span { font-size: 12.5px; color: var(--ink-2); letter-spacing: .05em; }

/* ==========================================================================
   Numbers, as a keyboard
   He took up harmonium and keyboard at twelve, so the keys reference his own
   instrument rather than being arbitrary decoration.
   ========================================================================== */
.keyboard {
  position: relative;
  margin-top: 0;
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze));
  border-radius: 12px 12px 16px 16px;
  padding: 16px 5px 5px;
  box-shadow: 0 18px 44px rgba(43, 30, 18, .22);
}

.keys {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.key {
  position: relative;
  min-height: clamp(170px, 18vw, 236px);
  padding: 18px 15px 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, #FFFDF8 0%, #F6EDDE 100%);
  border-radius: 3px 3px 10px 10px;
  /* Reads as a key resting on the bed: a lip at the bottom, a shadow underneath. */
  box-shadow:
    inset 0 -4px 0 rgba(43, 30, 18, .09),
    0 3px 0 rgba(20, 12, 4, .30);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .35s var(--ease);
}
/* Pressed. */
.key:hover {
  transform: translateY(4px);
  background: linear-gradient(180deg, #FFFAEE 0%, var(--gold-wash) 100%);
  box-shadow:
    inset 0 -1px 0 rgba(43, 30, 18, .09),
    0 0 0 rgba(20, 12, 4, 0);
}

.key__n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1; letter-spacing: -.03em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.key__l {
  margin-top: 9px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}

/* Sharps. Four of them, on the gaps a six-white-key run actually has: after the
   1st, 2nd, 4th and 5th. The gap after the 3rd is the E/F pair, which has none. */
.key__black {
  position: absolute; top: 16px; z-index: 2;
  width: 6.6%; height: 47%;
  background: linear-gradient(180deg, #543A1B 0%, #241606 100%);
  border-radius: 2px 2px 6px 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 235, 200, .16);
  pointer-events: none;
}
.key__black:nth-of-type(1) { left: calc(16.667% - 3.3%); }
.key__black:nth-of-type(2) { left: calc(33.333% - 3.3%); }
.key__black:nth-of-type(3) { left: calc(66.667% - 3.3%); }
.key__black:nth-of-type(4) { left: calc(83.333% - 3.3%); }

@media (max-width: 860px) {
  /* Turn the keyboard on its side: keys become stacked bars and press sideways.
     Six upright keys at this width would be ~50px each, far too narrow to read. */
  .keys { grid-template-columns: 1fr; gap: 4px; }
  .key {
    min-height: 0;
    flex-direction: row; align-items: baseline; gap: 16px;
    justify-content: flex-start;
    padding: 13px 16px;
    border-radius: 3px 8px 8px 3px;
    box-shadow: inset -4px 0 0 rgba(43, 30, 18, .09), 3px 0 0 rgba(20, 12, 4, .28);
  }
  .key:hover {
    transform: translateX(4px);
    box-shadow: inset -1px 0 0 rgba(43, 30, 18, .09), 0 0 0 rgba(20, 12, 4, 0);
  }
  .key__n { font-size: 1.7rem; flex: none; min-width: 62px; }
  .key__l { margin-top: 0; }
  .key__l br { display: none; }
  /* The sharps rotate with the keyboard instead of disappearing. The keys press
     rightwards here, so their rounded front edge is on the right, which puts the
     black keys against the left rail, straddling the same four gaps as above. */
  .key__black {
    top: auto; left: 5px;
    width: 30%; height: 5.4%; min-height: 12px;
    border-radius: 6px 2px 2px 6px;
    box-shadow: 4px 0 0 rgba(0, 0, 0, .38), inset 1px 0 0 rgba(255, 235, 200, .16);
    background: linear-gradient(90deg, #543A1B 0%, #241606 100%);
  }
  .key__black:nth-of-type(1) { top: calc(16.667% - 2.7%); left: 5px; }
  .key__black:nth-of-type(2) { top: calc(33.333% - 2.7%); left: 5px; }
  .key__black:nth-of-type(3) { top: calc(66.667% - 2.7%); left: 5px; }
  .key__black:nth-of-type(4) { top: calc(83.333% - 2.7%); left: 5px; }
  .keyboard { padding: 5px; border-radius: 12px; }
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.tl { position: relative; margin-top: 40px; }
.tl::before {
  content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 1px;
  background: var(--line);
}
.tl__fill {
  position: absolute; left: 11px; top: 6px; width: 1px;
  background: var(--grad-gold);
  height: 0; transition: height .18s linear;
}
.tl__item { position: relative; padding-left: 46px; padding-bottom: 44px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot {
  position: absolute; left: 4px; top: 5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease-out);
}
.tl__item.is-in .tl__dot { box-shadow: inset 0 0 0 4.5px var(--gold-2); transform: scale(1.12); }
.tl__age {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-3);
}
.tl__t { margin-top: 7px; }
.tl__d { margin-top: 9px; color: var(--ink-2); max-width: 62ch; font-size: 15.5px; }

@media (min-width: 900px) {
  .tl::before, .tl__fill { left: 50%; }
  .tl__item { width: 50%; padding-left: 0; padding-right: 52px; text-align: right; }
  .tl__item:nth-child(even) {
    margin-left: 50%; padding-right: 0; padding-left: 52px; text-align: left;
  }
  .tl__dot { left: auto; right: -7.5px; }
  .tl__item:nth-child(even) .tl__dot { left: -7.5px; right: auto; }
  .tl__d { max-width: none; }
  .tl__item { padding-bottom: 52px; }
}

/* ==========================================================================
   Featured music player
   Portrait on the left, an overlapping white panel on the right holding the
   YouTube stage and the track list.
   ========================================================================== */
.player {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-bottom: 34px;            /* room for the More Music tab */
}

.player__media {
  grid-area: 1 / 1 / 2 / 8;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(168deg, var(--gold-wash), var(--ivory-3));
  box-shadow: var(--shadow-2);
}
.player__media img {
  /* 2:3 is the source photo's native ratio, so nothing is cropped, and it makes
     the portrait taller than the panel which is what gives the overlap its
     asymmetry. At 3:4 the two blocks came out the same height and the
     composition read flat. */
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3;
  filter: brightness(1.06) saturate(1.06);
  mix-blend-mode: multiply;
}

.player__panel {
  grid-area: 1 / 6 / 2 / 13;
  z-index: 2;
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: clamp(20px, 2.4vw, 32px);
}

.player__top { padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }

.btn-outline {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.btn-outline:hover { border-color: var(--gold-2); color: var(--gold-3); background: var(--gold-wash); }

.player__now { text-align: center; padding: 24px 0 20px; }
.player__now h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.08rem, 1.9vw, 1.4rem);
  letter-spacing: .05em; text-transform: uppercase; color: var(--gold-3);
}
.player__now p { margin-top: 7px; font-size: 14.5px; color: var(--ink-2); }

.player__stage {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--r-sm); overflow: hidden; background: var(--bronze);
}
.player__stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Poster stands in until the viewer asks for the video, so no YouTube payload
   loads on first paint. */
.facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--bronze);
  overflow: hidden;
}
.facade img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(43,30,18,.52), rgba(43,30,18,.04));
}
.facade:hover img { transform: scale(1.05); }
.facade__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(251, 248, 242, .94);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(43, 30, 18, .34);
  transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.facade__play svg { width: 20px; height: 20px; fill: var(--bronze); margin-left: 3px; }
.facade:hover .facade__play { transform: translate(-50%, -50%) scale(1.12); background: var(--gold-1); }

.tracks { list-style: none; margin: 24px 0 0; padding: 0; }
.tracks li + li { border-top: 1px solid var(--line-soft); }
.track {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 14px 8px; border: 0; background: transparent;
  cursor: pointer; text-align: left;
  transition: background .4s var(--ease), padding-left .4s var(--ease-out);
}
.track:hover { background: var(--gold-wash); padding-left: 16px; }
.track__n { font-size: 12.5px; font-weight: 600; color: var(--gold-3); }
.track__t { font-size: 15px; color: var(--ink); }
.track__t em { font-style: normal; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.track__d { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.track.is-active { background: var(--gold-wash); }
.track.is-active .track__t { color: var(--gold-3); font-weight: 600; }

.player__more {
  position: absolute; z-index: 3;
  left: 50%; bottom: 0; transform: translateX(-50%);
  background: var(--bronze); color: var(--ink-on-dark);
  padding: 20px 34px;
  font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .45s var(--ease), transform .45s var(--ease-out), color .3s var(--ease);
}
.player__more:hover {
  background: var(--gold-2); color: #34220E;
  transform: translateX(-50%) translateY(-3px);
}

@media (max-width: 900px) {
  .player { grid-template-columns: 1fr; padding-bottom: 0; }
  .player__media { grid-area: auto; }
  .player__media img { aspect-ratio: 4 / 5; object-position: 50% 20%; }  /* 4:3 cut his head off */
  .player__panel { grid-area: auto; margin-top: -46px; margin-inline: clamp(0px, 3vw, 20px); }
  .player__more {
    position: static; transform: none;
    display: block; width: fit-content; margin: 28px auto 0;
  }
  .player__more:hover { transform: translateY(-3px); }
}

/* ==========================================================================
   Genre cards
   ========================================================================== */
.gcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  margin-top: clamp(28px, 3.4vw, 44px);
}

.gcard {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line-soft);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.gcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

.gcard__art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Matches the artwork's own cream ground, so no seam shows while it loads. */
  background: #FDF5E2;
}
.gcard__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.gcard:hover .gcard__art img { transform: scale(1.06); }
.gcard__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grad-gold);
  opacity: 0; mix-blend-mode: multiply;
  transition: opacity .55s var(--ease);
}
.gcard:hover .gcard__art::after { opacity: .07; }

.gcard__body {
  padding: 18px clamp(16px, 1.5vw, 20px) 20px;
  border-top: 1px solid var(--line-soft);
}
.gcard__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.18; letter-spacing: -.012em;
  color: var(--ink);
}
.gcard__tag {
  margin-top: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  transition: color .45s var(--ease);
}
.gcard:hover .gcard__tag { color: var(--gold-3); }

@media (max-width: 1100px) {
  .gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Gallery carousel
   Native scroll-snap rather than a JS transform track: it gives real momentum
   swipe on touch for free, keeps keyboard and screen-reader scrolling intact,
   and degrades to a plain scroller if the script never runs.
   ========================================================================== */
.carousel {
  --cg: clamp(10px, 1.1vw, 16px);
  --per: 1;                          /* slides in view */
  position: relative;
  margin-top: clamp(26px, 3.2vw, 42px);
}
@media (min-width: 601px)  { .carousel { --per: 2; } }
@media (min-width: 1001px) { .carousel { --per: 3; } }

.carousel__viewport {
  display: flex;
  gap: var(--cg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Room for the hover lift and its shadow, cancelled so the track still lines
     up with the section's text above it. */
  padding: 6px 2px 12px;
  margin: -6px -2px -12px;
}
.carousel__viewport::-webkit-scrollbar { display: none; }

.gal__i {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--cg)) / var(--per));
  scroll-snap-align: start;
  display: block;
  padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ivory-3);
  box-shadow: 0 1px 0 var(--line-soft);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.gal__i img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.gal__i:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.gal__i:hover img { transform: scale(1.04); }

/* ---------- Carousel controls ---------- */
.carousel__ctl {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(20px, 2.2vw, 30px);
}
.carousel__nav {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .4s var(--ease-out);
}
.carousel__nav:hover:not(:disabled) {
  background: var(--grad-gold-btn); color: var(--espresso); border-color: transparent;
}
.carousel__nav--prev:hover:not(:disabled) { transform: translateX(-3px); }
.carousel__nav--next:hover:not(:disabled) { transform: translateX(3px); }
.carousel__nav:disabled { opacity: .32; cursor: default; }
.carousel__nav svg { width: 20px; height: 20px; }

.carousel__dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: width .4s var(--ease-out), background .35s var(--ease), border-radius .4s var(--ease-out);
}
.carousel__dot:hover { background: var(--gold-2); }
.carousel__dot.is-on { width: 26px; border-radius: 100px; background: var(--grad-gold-btn); }

/* Twenty photos at one-per-view on a phone is twenty dots, which reads as
   noise rather than as a position. Past eight pages the dots give way to a
   bar and a count, which stay legible at any length. */
.carousel__prog { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 16px); }
.carousel__prog-track {
  position: relative;
  width: clamp(90px, 22vw, 160px); height: 3px;
  border-radius: 100px; background: var(--line); overflow: hidden;
}
.carousel__prog-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 100px; background: var(--grad-gold-btn);
  transition: width .35s var(--ease-out);
}
.carousel__count {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* Studio shots only: the backdrop is a cool light grey, so lift it and multiply
   it into the warm ground. Applying this to a real event photo would crush it. */
.gal__i--studio {
  isolation: isolate;
  background: linear-gradient(168deg, var(--gold-wash), var(--ivory-3));
}
.gal__i--studio img {
  filter: brightness(1.06) saturate(1.06);
  mix-blend-mode: multiply;
  /* Full-length portraits: show the whole figure, never crop head or feet.
     The blended backdrop makes the spare room read as part of the frame. */
  object-fit: contain; object-position: 50% 100%;
  padding-top: 7%;
  /* Feather the photo's own backdrop edges into the frame, so no box shows. */
  -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 26%, #000 76%, transparent 88%), linear-gradient(180deg, transparent 7%, #000 10%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 12%, #000 26%, #000 76%, transparent 88%), linear-gradient(180deg, transparent 7%, #000 10%);
          mask-composite: intersect;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(29, 19, 10, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb__stage { margin: 0; display: grid; justify-items: center; gap: 14px; }
.lb__img {
  /* max-height:100% is circular here: the grid row is sized by this item, so the
     percentage never resolves and tall images overflow the viewport. */
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
  transform: scale(.97);
  transition: transform .4s var(--ease-out), opacity .25s var(--ease);
}
.lb.is-open .lb__img { transform: none; }
.lb__img.is-swapping { opacity: 0; }

.lb__count {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-on-dark-2); font-variant-numeric: tabular-nums;
}

.lb__x, .lb__nav {
  position: absolute; z-index: 2;
  border: 0; cursor: pointer;
  background: rgba(251,248,242,.13); color: var(--ink-on-dark);
  display: grid; place-items: center;
  transition: background .35s var(--ease), transform .4s var(--ease-out), color .3s;
}
.lb__x {
  top: 20px; right: 20px;
  width: 46px; height: 46px; border-radius: 50%;
}
.lb__x:hover { background: var(--grad-gold); color: var(--espresso); transform: rotate(90deg); }
.lb__x svg { width: 18px; height: 18px; }

.lb__nav {
  top: 50%; margin-top: -28px;
  width: 56px; height: 56px; border-radius: 50%;
}
.lb__nav--prev { left: clamp(10px, 2.5vw, 34px); }
.lb__nav--next { right: clamp(10px, 2.5vw, 34px); }
.lb__nav:hover { background: var(--grad-gold); color: var(--espresso); }
.lb__nav--prev:hover { transform: translateX(-3px); }
.lb__nav--next:hover { transform: translateX(3px); }
.lb__nav svg { width: 24px; height: 24px; }

@media (max-width: 640px) {
  /* Side arrows overlap a near-full-width image here and disappear against a
     light photo. Put them under it instead, flanking the counter. */
  .lb { padding: 16px 16px 86px; }
  .lb__img { max-height: 64vh; }
  .lb__nav {
    top: auto; bottom: 20px; margin-top: 0;
    width: 46px; height: 46px;
    background: rgba(251, 248, 242, .18);
  }
  .lb__nav--prev { left: 50%; margin-left: -70px; }
  .lb__nav--next { right: 50%; margin-right: -70px; }
  .lb__nav--prev:hover, .lb__nav--next:hover { transform: none; }
  .lb__nav svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   Bronze drenched band
   ========================================================================== */
.band {
  background: var(--bronze);
  color: var(--ink-on-dark);
  position: relative; overflow: hidden;
}
.band::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(900px, 110vw); aspect-ratio: 1; right: -16%; bottom: -46%;
  background: radial-gradient(circle at 50% 50%, rgba(235,174,69,.22), rgba(235,174,69,0) 66%);
}
.band .wrap { position: relative; z-index: 2; }
.band .h-sec { color: var(--ink-on-dark); }
.band .lede, .band .prose p { color: var(--ink-on-dark-2); }
.band .prose strong { color: var(--gold-1); }
.band .figframe {
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
  background: linear-gradient(168deg, var(--gold-wash), var(--ivory-3));
}

.duo {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: 44px;
}
.duo__c {
  padding: 30px 28px;
  border: 1px solid var(--line-on-dark); border-radius: var(--r-md);
  background: rgba(247,239,226,.035);
  transition: background .5s var(--ease), transform .5s var(--ease-out), border-color .5s;
}
.duo__c:hover { background: rgba(247,239,226,.07); transform: translateY(-4px); border-color: rgba(235,174,69,.45); }
.duo__ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-gold); margin-bottom: 18px;
}
.duo__ic svg { width: 21px; height: 21px; stroke: #34220E; fill: none; stroke-width: 1.7; }
.duo__c h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink-on-dark); }
.duo__c p { margin-top: 10px; color: var(--ink-on-dark-2); font-size: 15.5px; }

/* ==========================================================================
   Vision / mission
   ========================================================================== */
.mission { margin-top: 32px; display: grid; gap: 2px; }
.mission__i {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 26px 24px; background: var(--paper); border-radius: var(--r-md);
  box-shadow: 0 1px 0 var(--line-soft);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.mission__i:hover { transform: translateX(6px); box-shadow: var(--shadow-1); }
.mission__b {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--gold-wash); color: var(--gold-3);
  font-size: 12.5px; font-weight: 700; font-family: var(--display);
}
.mission__i p { color: var(--ink-2); font-size: 15.8px; }

/* ==========================================================================
   Booking
   ========================================================================== */
.book { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); }
.avail { margin-top: 24px; display: grid; gap: 10px; }
.avail__i {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--r-sm);
  background: var(--paper); box-shadow: 0 1px 0 var(--line-soft);
  font-size: 15.5px; font-weight: 500;
  transition: transform .45s var(--ease-out), box-shadow .45s;
}
.avail__i:hover { transform: translateX(5px); box-shadow: var(--shadow-1); }
.avail__i svg { width: 17px; height: 17px; stroke: var(--gold-2); fill: none; stroke-width: 2.2; flex: none; }

.form {
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--shadow-2);
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15.5px; color: var(--ink);
  transition: border-color .35s, box-shadow .35s, background .35s;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-2); background: var(--paper);
  box-shadow: 0 0 0 3px rgba(235,174,69,.2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B4442F; }
.field__err { display: none; margin-top: 6px; font-size: 12.5px; color: #B4442F; }
.field.has-error .field__err { display: block; }

.form__note { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.form__ok {
  display: none; margin-top: 16px; padding: 15px 18px; border-radius: var(--r-sm);
  background: var(--gold-wash); color: var(--gold-3); font-size: 14.5px; font-weight: 500;
}
.form__ok.is-on { display: block; animation: drawerIn .5s var(--ease-out) forwards; opacity: 0; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: var(--bronze); color: var(--ink-on-dark-2); padding-block: clamp(52px, 7vw, 82px) 34px; }
.ftr__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 42px; border-bottom: 1px solid var(--line-on-dark);
}
.ftr__logo { width: 64px; margin-bottom: 14px; }
.ftr__name {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.01em; color: var(--ink-on-dark); margin-bottom: 16px;
}
.ftr h4 {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-1); margin-bottom: 16px;
}
.ftr__links { display: grid; gap: 9px; }
.ftr__links a { font-size: 14.5px; color: var(--ink-on-dark-2); transition: color .3s; width: fit-content; }
.ftr__links a:hover { color: var(--gold-1); }

.social { display: flex; gap: 11px; margin-top: 4px; }
.social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-on-dark); color: var(--ink-on-dark);
  transition: background .4s var(--ease), transform .45s var(--ease-out), color .3s, border-color .3s;
}
.social a svg { width: 18px; height: 18px; fill: currentColor; }
.social a:hover { background: var(--grad-gold); color: #34220E; transform: translateY(-3px); border-color: transparent; }

.ftr__bot {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  padding-top: 26px; font-size: 12.5px; color: rgba(214,195,168,.72);
}

/* ==========================================================================
   Reveal animation
   ========================================================================== */
[data-rv] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out);
  transition-delay: var(--rv-d, 0ms);
  will-change: opacity, transform;
}
[data-rv="left"]  { transform: translateX(-30px); }
[data-rv="right"] { transform: translateX(30px); }
[data-rv="zoom"]  { transform: scale(.955); }
[data-rv].is-in { opacity: 1; transform: none; }
/* Drop the hint once revealed. Left in place it keeps a stacking context alive,
   which would stop the hero portrait's multiply blend from seeing the page. */
[data-rv].is-in { will-change: auto; }

/* ==========================================================================
   Subpage header
   Shorter than the home hero on purpose: a listing page's job is to get the
   reader to the first card, not to hold them at the top.
   ========================================================================== */
.pagehead {
  position: relative;
  padding-top: clamp(112px, 13vw, 168px);
  padding-bottom: clamp(28px, 3.6vw, 52px);
  overflow: hidden;
}
.pagehead__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(900px, 116vw); aspect-ratio: 1;
  right: -14%; top: -52%;
  background: radial-gradient(circle at 50% 50%,
      rgba(235, 174, 69, .28) 0%,
      rgba(235, 174, 69, .11) 36%,
      rgba(235, 174, 69, 0) 70%);
}
.pagehead__t {
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  margin-top: clamp(12px, 1.4vw, 18px);
}
.pagehead__d { margin-top: clamp(16px, 1.8vw, 24px); max-width: 52ch; }

/* ==========================================================================
   Article (post detail)

   A centred reading column, not the full site grid. The header is centred and
   the media breaks out wider than the text: that difference in width is what
   gives a long page its rhythm. The body copy itself stays ranged left, since
   centred paragraphs are miserable to read.
   ========================================================================== */
.article {
  --col:   min(720px, 100%);       /* text */
  --media: min(980px, 100%);       /* hero and video */
}

.article__col { width: var(--col); margin-inline: auto; }
.article__media { width: var(--media); margin-inline: auto; }

.article__head { padding-bottom: clamp(22px, 2.6vw, 34px); }
.article__col--head { text-align: center; }

.article__back {
  /* Centred with the rest of the header, and first in the tab order after the
     site nav, so the way out is never something to hunt for. */
  justify-content: center;
  margin-bottom: clamp(20px, 2.4vw, 30px);
  color: var(--ink-3);
}
.article__back:hover { color: var(--gold-3); }
.article__back .ic { transition: transform .4s var(--ease-out); }
.article__back:hover .ic { transform: translateX(-3px); }

.article__t {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.article__lede {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 50ch;
  margin-inline: auto;
}

.article__hero {
  margin: 0 auto clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ivory-3);
  box-shadow: var(--shadow-1);
}
.article__hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article__cap {
  padding: 12px 16px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink-3); text-align: center;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}

/* ---------- Body copy ---------- */
.article__body p { font-size: clamp(1.03rem, 1.3vw, 1.13rem); max-width: none; }
.article__body em { font-style: italic; }
.article__body a {
  color: var(--gold-3);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.article__body a:hover { color: var(--gold-2); }

.article__body h2, .article__body h3 {
  font-family: var(--display); font-weight: 600;
  letter-spacing: -.018em; line-height: 1.14; color: var(--ink);
  text-wrap: balance;
}
/* Bound to the paragraph that follows, not floating between two blocks: the
   space above a heading has to be clearly larger than the space below it. */
.article__body h2 { font-size: clamp(1.42rem, 2.5vw, 1.86rem); margin: 1.9em 0 .48em; }
.article__body h3 { font-size: clamp(1.16rem, 1.8vw, 1.34rem); margin: 1.7em 0 .44em; }
.article__body h2:first-child, .article__body h3:first-child { margin-top: 0; }

.article__body ul, .article__body ol {
  margin: 0 0 1.05em; padding-left: 1.35em;
  color: var(--ink-2);
}
.article__body li { margin-bottom: .42em; }
.article__body li::marker { color: var(--gold-2); }

.article__body blockquote {
  margin: 1.7em 0;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--gold-2);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.16rem, 1.9vw, 1.38rem); line-height: 1.4;
  color: var(--ink);
}

.article__body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 2.3em 0; }

.article__foot {
  margin-top: clamp(32px, 3.8vw, 52px);
  padding-top: clamp(22px, 2.4vw, 30px);
  padding-bottom: clamp(32px, 4.2vw, 60px);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.article__foot .textlink { justify-content: center; }
.article__foot .ic { transition: transform .4s var(--ease-out); }
.article__foot .textlink:hover .ic { transform: translateX(-3px); }

/* ---------- Click-to-load YouTube ----------
   Same bargain as the home player: the poster is a local file, and nothing is
   requested from YouTube until someone presses play. */
.ytembed {
  position: relative;
  width: var(--media, min(980px, 100%));
  margin: clamp(28px, 3.4vw, 48px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bronze);
  box-shadow: var(--shadow-2);
}
.ytembed iframe { width: 100%; height: 100%; border: 0; display: block; }

.ytembed__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--bronze);
  overflow: hidden;
}
.ytembed__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ytembed__btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(43, 30, 18, .52), rgba(43, 30, 18, .04));
}
.ytembed__btn:hover img { transform: scale(1.05); }

.ytembed__play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(251, 248, 242, .94);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(43, 30, 18, .34);
  transition: transform .5s var(--ease-out), background .4s var(--ease);
}
.ytembed__play svg { width: 20px; height: 20px; fill: var(--bronze); margin-left: 3px; }
.ytembed__btn:hover .ytembed__play { transform: translate(-50%, -50%) scale(1.12); background: var(--gold-1); }

@media (max-width: 560px) {
  .ytembed__play { width: 52px; height: 52px; }
  .ytembed__play svg { width: 17px; height: 17px; }
  .article__body blockquote { padding-left: 18px; }
}

/* ==========================================================================
   News & updates
   ========================================================================== */
.news {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
/* On news.html the grid opens the section with no heading above it, so the
   heading gap would read as dead space. */
.news:first-child { margin-top: 0; }
/* Fewer than three posts: size the grid to them rather than leave an empty slot. */
@media (min-width: 901px) {
  .news:has(> .ncard:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news:has(> .ncard:only-child) { grid-template-columns: minmax(0, 560px); }
}
@media (max-width: 900px) { .news { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .news { grid-template-columns: 1fr; } }

.ncard {
  position: relative;                /* anchors the stretched link below */
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line-soft);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ncard:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

.ncard__art { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory-3); }
.ncard__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.ncard:hover .ncard__art img { transform: scale(1.06); }

.ncard__body {
  flex: 1;
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px clamp(16px, 1.5vw, 22px) 22px;
  border-top: 1px solid var(--line-soft);
}
.ncard__date {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-3);
}
.ncard__t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.06rem, 1.4vw, 1.26rem);
  line-height: 1.2; letter-spacing: -.012em; color: var(--ink);
}
.ncard__d { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ncard__foot { margin-top: auto; padding-top: 8px; }
.ncard:hover .textlink { background-size: 100% 1.5px; }

/* The whole card is the click target, but there is still only ONE link in the
   markup: the footer anchor grows an invisible layer over the card. Wrapping
   the card in an <a> instead would swallow the image and the heading into the
   link text, which is what screen readers then have to read out. */
.ncard__foot .textlink[href]::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: var(--r-md);
}
/* The visible focus ring belongs on the card, not on the small footer link. */
.ncard:has(.textlink:focus-visible) {
  outline: 2px solid var(--gold-3);
  outline-offset: 3px;
}
.ncard .textlink:focus-visible { outline: none; }

/* A card with nowhere to go yet keeps a span, and reads as inactive. */
.ncard__foot .textlink:not([href]) { color: var(--ink-3); background-image: none; }

/* ==========================================================================
   Promo band
   Sits directly under the hero, so the newest thing he has is the first thing
   after his name. Hidden entirely until a video is set in js/config.js.
   ========================================================================== */
.promo { padding-block: clamp(36px, 4.4vw, 66px); }
.promo__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
}
@media (max-width: 900px) { .promo__in { grid-template-columns: 1fr; } }

.promo__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 100px;
  background: var(--grad-gold-btn); color: var(--espresso);
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.promo__t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.06; letter-spacing: -.02em;
  margin-top: 16px; color: var(--ink-on-dark);
}
.promo__d { margin-top: 14px; color: var(--ink-on-dark-2); max-width: 44ch; }

.promo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.promo__frame video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Opening popup
   ========================================================================== */
.pop {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(29, 19, 10, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
.pop.is-open { opacity: 1; visibility: visible; }

.pop__card {
  position: relative;
  /* Image only: the card shrinks to the poster, capped at the original
     design's 780px so a wide poster doesn't fill the whole screen. */
  max-width: min(780px, 100%);
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.97);
  transition: transform .45s var(--ease-out);
}
.pop.is-open .pop__card { transform: none; }

.pop__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(43, 30, 18, .58); color: var(--ink-on-dark);
  display: grid; place-items: center;
  transition: background .3s var(--ease), transform .4s var(--ease-out);
}
.pop__x:hover { background: var(--espresso); transform: rotate(90deg); }
.pop__x svg { width: 16px; height: 16px; }

.pop__media { display: block; }
.pop__img {
  display: block; max-width: 100%; max-height: 88vh;
  /* WP adds width/height attributes; both must be auto or max-height squashes the poster. */
  width: auto; height: auto;
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa {
  position: fixed; z-index: 110;
  right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 26px);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 24px rgba(20, 12, 4, .3);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.wa:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(20, 12, 4, .36); }
.wa svg { width: 29px; height: 29px; }
/* The ring reads as a live cue without a looping animation on the button itself. */
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  animation: waPulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%       { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%, 100%{ box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}
@media (max-width: 560px) { .wa { width: 52px; height: 52px; } .wa svg { width: 27px; height: 27px; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr__in { grid-template-columns: auto 1fr; }
  .book { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 76px; }
  /* The layered overlap needs width to read. Below this the hero stacks and the
     portrait returns to normal flow above the copy. */
  .hero__title { font-size: clamp(2.9rem, 13vw, 4.6rem); }
  .hero__ln2 { padding-left: 0; }
  .hero__stage { min-height: 0; }
  /* Budgeted against a 812px screen with an 82px fixed header: eyebrow 40 +
     title 93 + roles 82 + lede 53 + CTAs 121 leaves roughly 210px for the
     portrait if the booking CTA is to stay on the first screen. */
  .hero { padding-top: 74px; }
  /* The whole standing figure, never cropped. Sized by height so it adapts to
     the phone rather than to a fixed pixel budget; the CTAs now sit just below
     the fold on a short phone, which is the trade accepted for showing him in
     full. width:auto keeps the native 2:3 ratio, so nothing is squashed. */
  .hero__figure {
    position: static; width: auto; max-width: none; height: auto;
    margin: 16px auto 0;
    display: flex; justify-content: center;
    animation: none;
  }
  .hero__figure img {
    width: auto; max-width: 100%;
    height: auto; max-height: min(46vh, 430px);
    object-fit: contain;
  }
  .hero__copy { margin-top: 22px; }
  .hero__lede { margin-top: 16px; }
  /* The desktop 62% cap becomes ~198px here, narrow enough that chips wrapped
     inside themselves and shoved the CTAs off the first screen. */
  .hero__roles { max-width: none; gap: 6px; margin-top: 18px; }
  .hero__roles span { font-size: 10.5px; letter-spacing: .08em; padding: 7px 11px; }
  .hero__cta { margin-top: 18px; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__copy { max-width: none; }
  .split { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .duo { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .brand img { height: 52px; }
  .hdr.is-stuck .brand img { height: 44px; }
}

/* Short phones (iPhone SE and similar). Width alone is not enough here: at 667px
   tall the fixed mobile sizes pushed the booking CTA 37px below the fold. */
@media (max-width: 900px) and (max-height: 740px) {
  /* Shrink the header too, otherwise clearing it eats the content budget. */
  .hdr { padding-block: 10px; }
  .brand img { height: 38px; }
  .hdr.is-stuck .brand img { height: 34px; }
  .hero { padding-top: 70px; }
  .hero__figure { margin-top: 10px; }
  .hero__figure img { max-height: min(34vh, 260px); }
  .hero__roles { margin-top: 10px; }
  .hero__copy { margin-top: 14px; }
  .hero__lede { margin-top: 12px; }
  .hero__cta { margin-top: 12px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .ftr__top { grid-template-columns: 1fr; gap: 30px; }
  .stat { border-right: 0; }
  .brand img { height: 46px; }
  .hdr.is-stuck .brand img { height: 40px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
  .carousel__prog-fill { transition: none; }
  .pop__card { transform: none; }
  .wa::after { animation: none; }
  .wa:hover { transform: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; }
  .hero__title .ln > span { transform: none; }
  .marquee__track { animation: none; }
}

@media print {
  .hdr, .drawer, .marquee, .player__more { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Contact Form 7 — maps its markup onto the .field / .form__ok styles above
   ========================================================================== */
.wpcf7-form-control-wrap { display: block; }
.field .wpcf7-not-valid { border-color: #B4442F; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12.5px; color: #B4442F; }
.wpcf7-spinner { display: none; }
.wpcf7-form.submitting .btn { opacity: .6; pointer-events: none; }
.wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0; padding: 15px 18px; border: 0; border-radius: var(--r-sm);
  background: var(--gold-wash); color: var(--gold-3); font-size: 14.5px; font-weight: 500;
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { background: #F6E3DE; color: #B4442F; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wpcf7 .hidden-fields-container, .wpcf7-display-none { display: none; }