/* DEVIKA — site system. Black silk, gold thread.
   Headings: upright Georgia. Body and UI: system sans at a readable weight.
   Devanagari stays a faint watermark only. */
@font-face{font-family:"Noto Serif Devanagari";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/noto-serif-devanagari-sub.woff2") format("woff2")}

:root{
  --ink:#0a0908;
  --ink-2:#121010;
  --velvet:#17100f;
  --ivory:#f1eadc;
  --ivory-2:rgba(241,234,220,.82);
  --ivory-3:rgba(241,234,220,.68);
  --gold:#d9b777;
  --gold-2:#b89455;
  --gold-line:rgba(217,183,119,.30);
  --gold-faint:rgba(217,183,119,.12);
  --display:Georgia,"Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --deva:"Noto Serif Devanagari",serif;
  --max:1280px;
  --gutter:clamp(20px,5vw,72px);
  --nav-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-weight:400;font-size:1.125rem;line-height:1.65;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Cookie Settings reopens Osano's own drawer. A button for semantics, drawn
   exactly like the legal links beside it so the footer rule is unchanged. */
.linkish{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:none;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
::selection{background:var(--gold);color:var(--ink)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
.display{font-family:var(--display);font-weight:700;font-style:normal;line-height:1.15;letter-spacing:0;margin:0}
.display--xl{font-size:clamp(4.2rem,11vw,9.5rem);line-height:1.05}
.display--l{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1.12}
.display--m{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.18}
.display--s{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25}
.display i,.display em{font-style:normal;font-weight:700;color:var(--gold)}
/* Event evening line. Exact sentence case, upright Georgia, ivory then gold. */
.display.event-evening{font-family:Georgia,"Times New Roman",Times,serif;font-style:normal;font-weight:700;text-transform:none;letter-spacing:0}
.display.event-evening em{font-family:Georgia,"Times New Roman",Times,serif;font-style:normal;font-weight:700;color:var(--gold)}
.lede{font-size:clamp(1.1875rem,1.6vw,1.375rem);font-weight:400;line-height:1.6;color:var(--ivory-2);max-width:34em;margin:0}
p{margin:0 0 1.1em}
.muted{color:var(--ivory-3)}
.small{font-size:1rem;line-height:1.55}
.deva{font-family:var(--deva);font-weight:400}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.band{padding-block:clamp(72px,10vw,140px)}
.band--tight{padding-block:clamp(48px,6vw,88px)}
.band--velvet{background:var(--velvet)}
.band--ink2{background:var(--ink-2)}
.hair{border:0;border-top:1px solid var(--gold-line);margin:0}
.grid{display:grid;gap:clamp(24px,4vw,56px)}
.grid--2{grid-template-columns:1fr 1fr}
.grid--split{grid-template-columns:5fr 7fr;align-items:center}
.grid--split-r{grid-template-columns:7fr 5fr;align-items:center}
@media (max-width:860px){.grid--2,.grid--split,.grid--split-r{grid-template-columns:1fr}}

/* jaali — Mughal lattice texture, drawn once, used faintly */
.jaali{position:relative;isolation:isolate}
.jaali::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='none' stroke='%23d9b777' stroke-opacity='.16' stroke-width='.8'><path d='M48 4 60 36 92 48 60 60 48 92 36 60 4 48 36 36Z'/><path d='M48 4 48 92M4 48 92 48'/><path d='M20 20 76 76M76 20 20 76' stroke-opacity='.07'/><circle cx='48' cy='48' r='9'/></g></svg>");
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%)}

/* ornament divider — boteh (paisley) between hairlines */
.orn{display:flex;align-items:center;gap:18px;color:var(--gold);margin:0 auto}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.orn::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.orn svg{width:84px;height:28px;flex:none}
.orn--left{justify-content:flex-start}.orn--left::before{display:none}.orn--left::after{flex:0 0 120px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(10,9,8,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--gold-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-block;font-family:Georgia,"Times New Roman",Times,serif;font-weight:700;font-style:normal;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ivory);line-height:1;margin-right:-.04em}
.brand i,.brand span{font-style:normal;font-weight:inherit;color:var(--ivory)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,3vw,40px);list-style:none;margin:0;padding:0}
.nav__links a{font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-2);position:relative;padding:.4rem 0}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nav__links a:not(.btn):hover::after,.nav__links a[aria-current]::after{right:0}
.nav__links .btn{color:var(--gold)}
.nav__links .btn:hover{color:var(--ink)}
.nav__links a[aria-current]{color:var(--ivory)}
/* The link rule above zeros horizontal padding. This restores an even gold
   box on the ticket control only: equal inline padding, equal block padding,
   border-box, centered wrap, and the whole padded box as the tap target. */
.nav__links a.btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:100%;
  padding:.85rem 1.05rem;
  border:1px solid var(--gold);
  line-height:1.3;
  white-space:normal;
  overflow-wrap:break-word;
}
.nav__cta{margin-left:8px}
.nav__toggle{display:none;background:none;border:1px solid var(--gold-line);color:var(--ivory);font:inherit;font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;padding:.6rem .9rem;cursor:pointer}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__toggle{display:inline-block}
  .nav.is-open{background:var(--ink);border-color:var(--gold-line)}
  .nav.is-open .nav__links{display:flex;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:var(--nav-h);padding:24px var(--gutter) 32px;gap:22px;background:var(--ink);border-bottom:1px solid var(--gold-line)}
  .nav.is-open .nav__links a{font-size:.95rem}
  .nav__cta{align-self:stretch;width:100%;max-width:100%;margin-left:0}
  .nav.is-open .nav__links a.btn{width:100%;padding:.9rem 1rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:52px;padding:.95rem 1.7rem;border:1px solid var(--gold);color:var(--gold);font-family:var(--sans);font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;cursor:pointer;background:transparent;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn--solid{background:var(--gold);color:var(--ink)}
.btn--solid:hover{background:var(--ivory);border-color:var(--ivory)}
.btn--ghost{border-color:var(--gold-line);color:var(--ivory)}
.btn--ghost:hover{border-color:var(--gold);background:transparent;color:var(--gold)}
.btn--sm{min-height:44px;padding:.7rem 1.2rem;font-size:.875rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (max-width:520px){.btn-row>.btn{flex:1 1 100%}.btn-row--inline>.btn{flex:0 1 auto}}
.link{color:var(--gold);border-bottom:1px solid var(--gold-line);transition:border-color .3s}
.link:hover{border-color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:grid;align-items:end;overflow:hidden;padding-top:var(--nav-h)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,9,8,.42) 0%,rgba(10,9,8,0) 30%,rgba(10,9,8,.2) 55%,rgba(10,9,8,.96) 100%),
  linear-gradient(90deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,0) 55%)}
.hero__ghost{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-62%);text-align:center;font-family:var(--deva);font-size:clamp(9rem,26vw,24rem);line-height:1;color:var(--ivory);opacity:.045;pointer-events:none;user-select:none;letter-spacing:.02em}
.hero__copy{position:relative;z-index:2;padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,96px)}
.hero__title{color:var(--ivory);text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero__title em{color:var(--gold)}
.hero__title--wm{font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(3.2rem,9.2vw,8rem);line-height:1.05;margin-right:-.04em;color:var(--ivory)}
.hero__title--wm i{font-style:normal;color:var(--ivory)}
.hero__lede{margin-top:1.4rem;margin-bottom:2.2rem;max-width:30em}
.hero__copy--narrow>*{max-width:760px}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:2rem;color:var(--ivory-3);font-size:.875rem;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;font-weight:600}
@media (max-width:860px){
  /* phones: image on top, copy below the fade — never over the face */
  .hero{display:block;min-height:0;padding-top:0}
  .hero__media{position:relative;aspect-ratio:4/5;max-height:72svh;margin-top:0}
  .hero__media img{object-position:50% 0%}
  .hero__media::after{background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,0) 26%,rgba(10,9,8,0) 55%,rgba(10,9,8,.92) 88%,var(--ink) 100%)}
  .hero__ghost{top:34%;font-size:clamp(7rem,30vw,11rem)}
  .hero__copy{margin-top:calc(-1 * clamp(56px,12vw,96px));padding-top:0;padding-bottom:clamp(40px,8vw,64px)}
  .hero__lede{margin-top:1rem;margin-bottom:1.6rem}
  .hero__meta{margin-top:1.4rem}
  .page-head--media{display:grid;min-height:62vh}
  .page-head--media .hero__media{position:absolute;aspect-ratio:auto;max-height:none}

  /* Event page phones only. Primary Get Tickets sits before the portrait
     so the control is fully on screen at scroll 0, with >=90px under it for
     browser chrome. The ticket note follows the portrait. The
     portrait is shorter from the bottom; object-position stays at the top
     so the face stays in frame. Desktop overlay hero is unchanged. */
  body.event-page .hero{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--nav-h) + .65rem)}
  body.event-page .hero__copy,
  body.event-page .hero .btn-row{display:contents}
  body.event-page .hero__copy > :not(.btn-row),
  body.event-page .hero .btn-row > .btn{width:min(100% - var(--gutter)*2,760px);margin-inline:auto;flex:none}
  body.event-page .hero .eyebrow{order:1}
  body.event-page .hero .hero__title{order:2}
  body.event-page .hero .hero__facts{order:3}
  body.event-page .hero a.btn--solid[data-ticket]{order:4;margin-bottom:.85rem}
  body.event-page .hero__media{order:5;align-self:stretch;width:100%;aspect-ratio:4/4.35;max-height:48svh}
  body.event-page .hero__media img{object-position:50% 0%}
  body.event-page .hero__media::after{background:linear-gradient(180deg,rgba(10,9,8,.28) 0%,rgba(10,9,8,0) 14%,rgba(10,9,8,0) 70%,rgba(10,9,8,.92) 92%,var(--ink) 100%)}
  body.event-page .hero__copy > .muted{order:7}
  body.event-page .hero__ghost{top:auto;bottom:22%;transform:none}
}

/* ---------- event band ---------- */
.event{position:relative;overflow:hidden}
.event .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:860px){.event .wrap{grid-template-columns:1fr}}
.event__title{margin:.2em 0 .25em}
.event__title .event__billing{display:block;font-size:.5em;letter-spacing:0;line-height:1.3;color:var(--ivory-2);font-style:normal;font-weight:700}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--gold-line)}
.facts li{display:grid;grid-template-columns:7.5em 1fr;gap:18px;padding:1rem 0;border-bottom:1px solid var(--gold-line);align-items:baseline}
.facts .k{font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.facts .v{font-size:1.0625rem;line-height:1.45;color:var(--ivory)}
.facts .v small{display:block;color:var(--ivory-3);font-size:1rem;line-height:1.45}
.event__cta{margin-top:1.6rem}
.event__ghost{position:absolute;right:-2vw;bottom:-6vw;font-family:var(--deva);font-size:clamp(10rem,22vw,20rem);line-height:1;color:var(--gold);opacity:.05;pointer-events:none;user-select:none}

/* ---------- art grid ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px)}
.section-head .display{margin:0}
.section-head .btn{flex:none}
@media (max-width:640px){.section-head{flex-direction:column;align-items:flex-start}}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px)}
.art-grid--4{grid-template-columns:repeat(4,1fr);row-gap:clamp(36px,4vw,56px)}
@media (max-width:1000px){.art-grid--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.art-grid,.art-grid--4{grid-template-columns:repeat(2,1fr);gap:16px}}
.tile{display:block;position:relative}
.tile__art{position:relative;aspect-ratio:1;overflow:hidden;background:var(--ink-2);border:1px solid rgba(217,183,119,.14)}
.tile__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.tile:hover .tile__art img{transform:scale(1.04)}
.tile__art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(217,183,119,0);transition:box-shadow .4s var(--ease)}
.tile:hover .tile__art::after{box-shadow:inset 0 0 0 1px var(--gold)}
.tile__meta{padding-top:14px}
.tile__title{font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.3;color:var(--ivory);margin:0 0 .25rem}
.tile__sub{font-size:1rem;line-height:1.45;letter-spacing:.02em;color:var(--ivory-3);margin:0}
.tile__year{font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 .35rem}

/* ---------- feature image bands ---------- */
.feature{position:relative;min-height:min(72vh,720px);display:grid;align-items:center;overflow:hidden}
.feature__media{position:absolute;inset:0}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.86) 0%,rgba(10,9,8,.55) 45%,rgba(10,9,8,.15) 100%)}
.feature--right .feature__media::after{background:linear-gradient(270deg,rgba(10,9,8,.86) 0%,rgba(10,9,8,.55) 45%,rgba(10,9,8,.15) 100%)}
.feature__copy{position:relative;z-index:1;max-width:560px;padding-block:clamp(72px,10vw,140px)}
.feature--right .feature__copy{margin-left:auto}
@media (max-width:860px){.feature__media::after,.feature--right .feature__media::after{background:linear-gradient(180deg,rgba(10,9,8,.2) 0%,rgba(10,9,8,.9) 70%)}.feature__copy{align-self:end}}

/* arch — cusped Mughal frame around a portrait */
.arch{position:relative;width:min(100%,460px);aspect-ratio:3/4;margin-inline:auto}
.arch img{width:100%;height:100%;object-fit:cover;clip-path:url(#archClip)}
.arch svg.arch__line{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);color:var(--gold);pointer-events:none}
/* Event portrait only. Clip and gold stroke share ARCH_OUTLINE on this box.
   The global svg max-width would otherwise shrink an outset stroke and leave the photo past the line. */
.arch.arch--event svg.arch__line{inset:0;width:100%;height:100%;max-width:none;overflow:visible}
@media (max-width:860px){
  /* Modestly shorter than 3/4 so the black floor under the figure is cropped, face kept at the top of the frame. */
  .arch.arch--event{aspect-ratio:3/3.28}
  .arch.arch--event img{object-position:50% 0%}
}

/* names strip */
.names{display:flex;flex-wrap:wrap;gap:.6em 2.4em;justify-content:center;font-family:var(--display);font-weight:400;font-style:normal;font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.35;color:var(--ivory-2);margin:0;padding:0;list-style:none}
.names li{position:relative}
.names li+li::before{content:"·";position:absolute;left:-1.5em;color:var(--gold)}
@media (max-width:860px){.names{flex-direction:column;align-items:center;gap:.55em}.names li+li::before{display:none}}

/* ---------- catalogue ---------- */
.year-head{display:flex;align-items:baseline;gap:20px;margin:clamp(40px,6vw,72px) 0 clamp(18px,3vw,28px)}
.year-head:first-of-type{margin-top:0}
.year-head .display{color:var(--gold)}
.year-head .hair{flex:1}
.cat-note{color:var(--ivory-3);font-size:1rem;line-height:1.55;max-width:60ch;margin-top:3rem}

/* ---------- song page ---------- */
.song{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.song{grid-template-columns:1fr}}
.song__art{position:sticky;top:calc(var(--nav-h) + 24px)}
.song__art img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid rgba(217,183,119,.18)}
@media (max-width:860px){.song__art{position:static;max-width:420px}}
.song__title{margin:.25em 0 .3em}
.song__artists{font-family:var(--display);font-weight:400;font-style:normal;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.35;color:var(--ivory-2);margin:0 0 1.8rem}
.tracklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--gold-line)}
.tracklist li{border-bottom:1px solid var(--gold-line)}
.tracklist a{display:grid;grid-template-columns:2.4em 1fr auto;gap:16px;align-items:baseline;padding:.9rem 0;transition:color .3s}
.tracklist a:hover{color:var(--gold)}
.tracklist .n{font-family:var(--display);font-weight:700;color:var(--gold);font-size:1rem}
.tracklist .t{font-size:1.0625rem;line-height:1.45}
.tracklist .d{color:var(--ivory-3);font-size:1rem;line-height:1.45;letter-spacing:.02em}
.tracklist li[aria-current] a{color:var(--gold)}

/* ---------- venue / event page ---------- */
.venue{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px)}
@media (max-width:860px){.venue{grid-template-columns:1fr}}
.address{font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.3;margin:0 0 1.2rem}
.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{padding:.6rem 0;border-bottom:1px solid var(--gold-line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.contact-list .k{color:var(--ivory-3);font-size:.875rem;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;font-weight:600}

/* sticky ticket bar (event pages, mobile) */
.ticket-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);background:rgba(10,9,8,.94);backdrop-filter:blur(12px);border-top:1px solid var(--gold-line);transform:translateY(110%);transition:transform .4s var(--ease)}
.ticket-bar.is-on{transform:none}
.ticket-bar strong{font-family:var(--display);font-weight:700;font-style:normal;font-size:1.0625rem;line-height:1.3}
.ticket-bar span{display:block;font-size:.875rem;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--ivory-3)}
@media (max-width:860px){.ticket-bar{display:flex}body.has-bar{padding-bottom:84px}}

/* ---------- prose ---------- */
.prose{max-width:62ch}
.prose p{font-size:1.125rem;line-height:1.7;color:var(--ivory-2)}
.prose p:first-of-type{color:var(--ivory)}
.prose h2{font-family:var(--display);font-weight:700;font-style:normal;font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2.2em 0 .6em;line-height:1.25}
.prose--legal p{font-size:1.0625rem;line-height:1.65;color:var(--ivory-2)}
.prose--legal h2{font-size:1.5rem;line-height:1.3}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--gold-line);padding-block:clamp(56px,7vw,96px) 40px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-weight:600;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0 0 .55rem}
.footer li a{color:var(--ivory-2);transition:color .3s}
.footer li a:hover{color:var(--gold)}
.footer__brand .brand{font-size:2rem}
.footer__deva{font-family:var(--deva);font-weight:400;font-size:2rem;line-height:1.2;color:var(--gold);margin:.9rem 0 .4rem}
.footer__fine{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--gold-line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;color:var(--ivory-3);font-size:1rem;line-height:1.5}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.12s}.rv[data-d="2"]{transition-delay:.24s}.rv[data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.tile__art img{transition:none}}

/* page header (inner pages) */
.page-head{padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px));padding-bottom:clamp(32px,5vw,64px)}
.page-head+.band{padding-top:clamp(16px,2vw,32px)}
.page-head+.band--tight{padding-top:clamp(8px,1.5vw,24px)}
.page-head .lede{margin-top:1.2rem}
.page-head--media{position:relative;min-height:62vh;display:grid;align-items:end;overflow:hidden;padding-bottom:clamp(40px,6vw,72px)}
.page-head--media .hero__media img{object-position:50% 40%}
.page-head--media .wrap{position:relative;z-index:2}

.stack>*+*{margin-top:1.1rem}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--ivory-3);font-size:.875rem;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;font-weight:600}
.center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mb-2{margin-bottom:2rem}

.svgdefs{position:absolute;width:0;height:0}
.narrow{max-width:38ch}
.mx-auto{margin-inline:auto}
.strong{font-weight:600;color:var(--ivory)}
.btn-row--center{justify-content:center}

.only-narrow{display:none}
@media (max-width:520px){.only-wide{display:none}.only-narrow{display:inline}.btn-row--inline>.btn{flex:1 1 auto;padding-inline:.8rem}}

.hero__facts{display:block}
.hero__facts .sep{color:var(--ivory-3)}
@media (max-width:520px){.hero__facts .sep{display:none}.hero__facts>span:not(.sep){display:block}}

/* ---------- Osano consent UI ----------
   Scoped override for the published container's own classes. Every selector
   below is a class that container's stylesheet ships; nothing is invented
   and nothing is a new control. This is colour, type, focus and position
   only — no rule hides, disables, reorders away or relabels a consent
   option, and no rule touches what the container decides or records.

   Osano injects its stylesheet as one inline <style> after this file, so
   declarations that have to beat it carry !important. Nothing else does. */

.osano-cm-window,
.osano-cm-window .osano-cm-dialog,
.osano-cm-window .osano-cm-info{font-family:var(--sans) !important}

/* Published colour tokens. The container sets these on .osano-cm-window in
   the stylesheet it injects after this file (dialog #180D43, accept #7A3FF1,
   on-track #37CD8F, disabled on-track #008d4f). !important is what beats that
   later assignment. Recolour only — no token hides a control. */
.osano-cm-window{
  --osano-dialog-background-color:var(--ink) !important;
  --osano-dialog-foreground-color:var(--ivory) !important;
  --osano-info-dialog-background-color:var(--ink-2) !important;
  --osano-info-dialog-foreground-color:var(--ivory) !important;
  --osano-link-color:var(--gold) !important;
  --osano-info-dialog-link-color:var(--gold) !important;
  --osano-button-background-color:transparent !important;
  --osano-button-border-color:var(--ivory) !important;
  --osano-button-foreground-color:var(--ivory) !important;
  --osano-button-accept-background-color:var(--gold) !important;
  --osano-button-accept-border-color:var(--gold) !important;
  --osano-button-accept-foreground-color:var(--ink) !important;
  --osano-button-deny-background-color:transparent !important;
  --osano-button-deny-border-color:var(--ivory) !important;
  --osano-button-deny-foreground-color:var(--ivory) !important;
  --osano-button-reject-all-background-color:transparent !important;
  --osano-button-reject-all-border-color:var(--ivory) !important;
  --osano-button-reject-all-foreground-color:var(--ivory) !important;
  --osano-button-manage-background-color:transparent !important;
  --osano-button-manage-border-color:var(--ivory) !important;
  --osano-button-manage-foreground-color:var(--ivory) !important;
  --osano-info-dialog-button-background-color:var(--gold) !important;
  --osano-info-dialog-button-border-color:var(--gold) !important;
  --osano-info-dialog-button-foreground-color:var(--ink) !important;
  --osano-toggle-off-track-color:var(--ink) !important;
  --osano-toggle-on-track-color:var(--gold) !important;
  --osano-toggle-off-thumb-color:var(--ivory) !important;
  --osano-toggle-on-thumb-color:var(--ink) !important;
  --osano-toggle-on-track-color-disabled:var(--gold) !important;
  --osano-toggle-on-thumb-color-disabled:var(--ink) !important;
  --osano-toggle-off-track-color-disabled:var(--ink) !important;
  --osano-toggle-off-thumb-color-disabled:var(--ivory) !important;
  --osano-info-dialog-toggle-off-track-color:var(--ink) !important;
  --osano-info-dialog-toggle-on-track-color:var(--gold) !important;
  --osano-info-dialog-toggle-off-thumb-color:var(--ivory) !important;
  --osano-info-dialog-toggle-on-thumb-color:var(--ink) !important;
  --osano-info-dialog-toggle-on-track-color-disabled:var(--gold) !important;
  --osano-info-dialog-toggle-on-thumb-color-disabled:var(--ink) !important;
  --osano-info-dialog-toggle-off-track-color-disabled:var(--ink) !important;
  --osano-info-dialog-toggle-off-thumb-color-disabled:var(--ivory) !important;
  --osano-focus-outline:3px solid var(--ivory) !important;
  --osano-focus-outline-color:var(--ivory) !important;
}

/* First layer. The container publishes it as a top bar; it belongs at the
   bottom edge, short enough that the event page's Get Tickets control stays
   on screen and clickable at 375x667. */
.osano-cm-window .osano-cm-dialog--type_bar,
.osano-cm-window .osano-cm-dialog--type_bar.osano-cm-dialog--position_top{
  position:fixed !important;
  top:auto !important;
  bottom:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-height:min(32svh,200px) !important;
  overflow-y:auto !important;
  background:var(--ink) !important;
  color:var(--ivory) !important;
  border-top:1px solid var(--gold-line) !important;
  box-shadow:0 -12px 40px rgba(0,0,0,.55) !important;
  padding:14px var(--gutter) !important;
  padding-bottom:max(14px,env(safe-area-inset-bottom)) !important;
}
@media (max-width:520px){
  .osano-cm-window .osano-cm-dialog--type_bar,
  .osano-cm-window .osano-cm-dialog--type_bar.osano-cm-dialog--position_top{
    max-height:min(26svh,150px) !important;
    padding:12px var(--gutter) !important;
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }
}
.osano-cm-window .osano-cm-dialog__content,
.osano-cm-window .osano-cm-content__message,
.osano-cm-window .osano-cm-header,
.osano-cm-window .osano-cm-description{color:var(--ivory) !important}
.osano-cm-window .osano-cm-content__message{font-size:.9375rem !important;line-height:1.5 !important}
.osano-cm-window .osano-cm-link,
.osano-cm-window .osano-cm-content__link,
.osano-cm-window .osano-cm-storage-policy,
.osano-cm-window .osano-cm-description__link,
.osano-cm-window .osano-cm-drawer-links__link{
  color:var(--gold) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}

/* Close keeps a 44px target and stays legible on the dark bar. */
.osano-cm-window .osano-cm-close{
  color:var(--ivory) !important;
  background:transparent !important;
  min-width:44px !important;
  min-height:44px !important;
}

/* Accept and reject get the same box, the same type and the same hit area.
   Ink on gold and ivory on ink both clear AA at this size; neither choice
   is the quieter one. */
.osano-cm-window .osano-cm-button,
.osano-cm-window .osano-cm-view__button{
  font-family:var(--sans) !important;
  font-weight:600 !important;
  font-size:.875rem !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  min-height:44px !important;
  padding:.65rem 1.25rem !important;
  border-radius:0 !important;
  border:1px solid var(--gold) !important;
  background:transparent !important;
  color:var(--ivory) !important;
  cursor:pointer;
}
.osano-cm-window .osano-cm-button--type_accept,
.osano-cm-window .osano-cm-button--type_accept-all,
.osano-cm-window .osano-cm-save{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:var(--ink) !important;
}
.osano-cm-window .osano-cm-button--type_deny,
.osano-cm-window .osano-cm-button--type_denyAll,
.osano-cm-window .osano-cm-button--type_manage{
  background:transparent !important;
  border-color:var(--ivory) !important;
  color:var(--ivory) !important;
}

/* One focus ring that reads on the dark bar and on the gold fill alike. */
.osano-cm-window :focus-visible,
.osano-cm-window .osano-cm-info :focus-visible{
  outline:3px solid var(--ivory) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px var(--ink) !important;
}

/* Preferences colour only. Placement, the dimmed page, and the open-state
   scroll lock live in osano-overlay.css. The dialog itself is the full-viewport
   layer behind the panel, so it does not get this opaque fill. */
.osano-cm-window .osano-cm-info,
.osano-cm-window .osano-cm-info-dialog-header,
.osano-cm-window .osano-cm-view__footer{
  background:var(--ink-2) !important;
  color:var(--ivory) !important;
}
.osano-cm-window .osano-cm-info{box-shadow:0 0 40px rgba(0,0,0,.6) !important}
.osano-cm-window .osano-cm-view__footer{border-top:1px solid var(--gold-line) !important}
.osano-cm-window .osano-cm-info-dialog-header__header,
.osano-cm-window .osano-cm-info-dialog-header__description,
.osano-cm-window .osano-cm-view__description,
.osano-cm-window .osano-cm-list-item,
.osano-cm-window .osano-cm-list-item__description,
.osano-cm-window .osano-cm-label,
.osano-cm-window .osano-cm-toggle__label,
.osano-cm-window .osano-cm-disclosure-item__title,
.osano-cm-window .osano-cm-disclosure-item__description{color:var(--ivory) !important}
.osano-cm-window .osano-cm-info-dialog-header__header{font-family:var(--display) !important}
/* The switch is Osano's own control (.osano-cm-toggle__switch paints
   --osano-toggle-track-color; the disabled on-state ships as #008d4f).
   These rules recolour the track and the thumb. They do not hide it. */
.osano-cm-window .osano-cm-toggle__input{accent-color:var(--gold)}
.osano-cm-window .osano-cm-toggle:not(.osano-cm-toggle--type_checkbox):not(.osano-cm-toggle--type_opt-out) .osano-cm-toggle__switch{
  background-color:var(--ink) !important;
  border-color:var(--ivory) !important;
}
.osano-cm-window .osano-cm-toggle:not(.osano-cm-toggle--type_checkbox):not(.osano-cm-toggle--type_opt-out) .osano-cm-toggle__switch::after{background-color:var(--ivory) !important}
.osano-cm-window .osano-cm-toggle:not(.osano-cm-toggle--type_checkbox):not(.osano-cm-toggle--type_opt-out) .osano-cm-toggle__input:checked + .osano-cm-toggle__switch{
  background-color:var(--gold) !important;
  border-color:var(--gold) !important;
}
.osano-cm-window .osano-cm-toggle:not(.osano-cm-toggle--type_checkbox):not(.osano-cm-toggle--type_opt-out) .osano-cm-toggle__input:checked + .osano-cm-toggle__switch::after{background-color:var(--ink) !important}
.osano-cm-window .osano-cm-toggle__input:focus-visible + .osano-cm-toggle__switch{
  outline:3px solid var(--ivory) !important;
  outline-offset:2px !important;
}
.osano-cm-window .osano-cm-disclosure__toggle,
.osano-cm-window .osano-cm-expansion-panel__toggle,
.osano-cm-window .osano-cm-drawer-toggle{color:var(--gold) !important;min-height:44px !important}

/* Floating launcher only. The published widget is the button
   .osano-cm-widget.osano-cm-widget--position_right (aria "Cookie Preferences",
   40px, fixed bottom/right 12px). Osano's own --hidden state only sets
   opacity:0 and visibility:hidden, so the button still occupies that corner
   and reappears when the class is removed. display:none on this one class
   takes it out of paint and hit-testing on every route. The dialog, the
   banner and the category choices do not carry .osano-cm-widget. The footer
   Cookie Settings control remains the way into the drawer. */
.osano-cm-widget{display:none !important}

/* A bottom-fixed first layer must not sit over the end of the page. While
   the container's own bar is on screen the document reserves its height, so
   the footer's Cookie Settings control — the way back into the preference
   drawer — stays reachable and clickable. Keyed on Osano's own classes, so
   the reservation disappears with the bar. */
body:has(.osano-cm-window .osano-cm-dialog--type_bar:not(.osano-cm-dialog--hidden)){padding-bottom:210px}
@media (max-width:520px){
  body:has(.osano-cm-window .osano-cm-dialog--type_bar:not(.osano-cm-dialog--hidden)){padding-bottom:160px}
}

/* ---------- Notice at collection, Do Not Sell, GPC ----------
   The under-button notice and the footer privacy controls. Every one of
   these is readable at the body text size, not shrunk below it, and the
   two button controls look and focus like the links beside them. */
.meta-notice{max-width:44ch;line-height:1.55}
.meta-notice .linkish,
.footer__privacy .linkish{color:var(--gold);text-decoration:underline;text-underline-offset:.18em}
.meta-notice .linkish:hover,
.footer__privacy .linkish:hover{color:var(--ivory)}
.meta-notice .linkish:focus-visible,
.footer__privacy .linkish:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.meta-notice--center{display:flex;justify-content:center}
.meta-notice--center .meta-notice{text-align:center;margin-left:auto;margin-right:auto}
.footer__privacy{display:block}
.footer__privacy .gpc-note{display:block;margin-top:.5rem;color:var(--ivory);max-width:52ch}

/* ---------- Press and videos ----------
   Same page-head, hairline, and square button as the rest of the site.
   One boteh per page. Stills are local. The player is added only by script. */
.press-list{list-style:none;margin:2.5rem 0 0;padding:0}
.press-item{padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--gold-line)}
.press-item time{display:block;margin:0 0 .7rem;color:var(--ivory-3);font-size:.875rem;letter-spacing:.06em;line-height:1.45;text-transform:uppercase;font-weight:600}
.press-item h2{margin:.2rem 0 .8rem}
.press-item h2 a:hover{color:var(--gold)}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,56px);margin-top:2.5rem}
@media (max-width:860px){.vgrid{grid-template-columns:1fr}}
.vcard__stage{position:relative;aspect-ratio:16/9;background:var(--ink-2);overflow:hidden}
.vcard__stage img{width:100%;height:100%;object-fit:cover}
.vcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(10,9,8,.82)}
.vcard__play:hover{background:var(--gold)}
.vcard__stage.is-playing .vcard__play,
.vcard__stage.is-playing img{visibility:hidden}
.vcard__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vcard__body{padding-top:1rem}
.vcard__year{margin:0 0 .35rem}
.vcard__yt{margin:.35rem 0 .8rem}
.vcard__denied{margin-top:.9rem}
.vcard__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.2rem}