@charset "UTF-8";
/* ==========================================================================
   Broadway Ramleela — broadwayramleela.com
   Public site for Aryan Heritage Foundation.
   Single stylesheet, no build step. Dark theatre palette: gold on night.
   ========================================================================== */

:root{
  /* Ground */
  --night:      #0D0A10;
  --night-2:    #14101A;
  --panel:      #1A1420;
  --panel-2:    #221A29;

  /* Ink */
  --cream:      #F4EDE0;
  --cream-soft: rgba(244,237,224,.74);
  --cream-dim:  rgba(244,237,224,.52);

  /* Brand */
  --gold:       #D4A548;
  --gold-lt:    #F1DCA6;
  --gold-deep:  #9A7326;
  --maroon:     #7A1E2B;
  --maroon-lt:  #A32E3F;

  /* Lines & shadow */
  --line:       rgba(212,165,72,.18);
  --line-soft:  rgba(244,237,224,.09);
  --shadow:     0 18px 50px rgba(0,0,0,.55);

  /* Type */
  --display: "Cinzel", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --dev:     "Tiro Devanagari Hindi", "Nirmala UI", "Noto Sans Devanagari", serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --wrap: 1160px;
  --r:   14px;
  --r-sm: 9px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:78px }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
}

body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:600; text-wrap:balance; line-height:1.15 }
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }
img{ max-width:100%; height:auto; display:block }
a{ color:var(--gold); text-decoration:none }
a:hover{ color:var(--gold-lt) }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px }

.dev{ font-family:var(--dev) }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px }

/* Any value the Foundation still has to supply is marked with .tbc so it is
   impossible to ship by accident. Delete the class along with the text. */
.tbc{
  color:var(--maroon-lt);
  border-bottom:1px dashed var(--maroon-lt);
  font-style:italic;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--night); padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0 }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  font-size:14.5px; font-weight:600; letter-spacing:.04em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px) }
/* Written as a.btn-* so these always outrank the context link colours they sit
   inside (.nav a, .foot-nav a). The ink is near-black brown on gold: about 9:1,
   which stays legible on a phone in daylight. */
a.btn-gold, .btn-gold{
  background:linear-gradient(160deg,#F3DFAB 0%,var(--gold) 58%,#BE8C30 100%);
  color:#221708; border-color:#EBD9A6;
  font-weight:700; letter-spacing:.05em;
  box-shadow:0 10px 26px rgba(212,165,72,.22);
}
a.btn-gold:hover, .btn-gold:hover{
  color:#221708;
  background:linear-gradient(160deg,#F8E9C0 0%,#DDB055 58%,#C89736 100%);
}
a.btn-ghost, .btn-ghost{ border-color:var(--line); color:var(--cream); background:rgba(244,237,224,.03) }
a.btn-ghost:hover, .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-lt) }
.btn-sm{ padding:9px 18px; font-size:13.5px }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(13,10,16,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:border-color .25s ease, background .25s ease;
}
.site-head.scrolled{ border-bottom-color:var(--line); background:rgba(13,10,16,.94) }
.head-in{ display:flex; align-items:center; gap:18px; height:70px }

.brand{ display:flex; align-items:center; gap:12px; color:var(--cream); flex:none }
.brand img{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--gold); object-fit:cover }
.brand-txt b{
  display:block; font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:.06em; line-height:1.2;
}
.brand-txt b .dev{ letter-spacing:0 }
.brand-txt small{
  display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-top:2px;
}

.nav{ margin-left:auto; display:flex; align-items:center; gap:26px }
/* :not(.btn) matters — without it this beats .btn-gold on specificity and paints
   pale cream text onto the gold button. */
.nav a:not(.btn){
  color:var(--cream-soft); font-size:14px; font-weight:500; letter-spacing:.02em;
  position:relative; padding:4px 0;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .22s ease;
}
.nav a:not(.btn):hover{ color:var(--cream) }
.nav a:not(.btn):hover::after{ right:0 }
.nav .btn{ margin-left:4px }

.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; flex:none;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav-toggle span{ display:block; width:19px; height:1.5px; background:var(--cream); transition:transform .25s, opacity .2s }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(72px,11vw,132px) 0 clamp(64px,8vw,96px);
  background:
    radial-gradient(120% 80% at 50% 0%, #241A16 0%, transparent 62%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  border-bottom:1px solid var(--line-soft);
}
/* The loop sits under everything at zero opacity and is only faded up once it is
   genuinely playing, so a missing file never shows as a black rectangle. */
.hero-video{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-video.on{ opacity:.34 }
.hero-video video{ width:100%; height:100%; object-fit:cover; display:block }

/* Keeps the gold wordmark legible over moving footage. Inert until there is video. */
.hero-scrim{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.2s ease }
.hero.playing .hero-scrim{
  opacity:1;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(13,10,16,.62) 0%, rgba(13,10,16,.86) 100%),
    linear-gradient(180deg, rgba(13,10,16,.5) 0%, transparent 30%, var(--night) 100%);
}

.hero-glow{
  position:absolute; inset:auto 50% -34% auto; transform:translateX(50%);
  width:min(880px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(212,165,72,.16) 0%, rgba(212,165,72,.05) 42%, transparent 68%);
  pointer-events:none;
}
.hero-in{ position:relative; text-align:center }

.eyebrow{
  font-size:11.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
}

/* The wordmark is leafed gold. Plain gold is the fallback — the gradient is
   only ever applied where the text-clip is actually supported, so the title
   can never end up transparent-on-black. */
.hero-title{ margin:0 }
.hero-title .l1{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(38px,8.6vw,86px); letter-spacing:.13em; line-height:1;
  color:var(--gold-lt);
}
.hero-title .l2{
  display:block; margin-top:6px;
  font-size:clamp(44px,10.5vw,104px); line-height:1.12; letter-spacing:.01em;
  color:var(--gold-lt);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title .l1, .hero-title .l2{
    background:linear-gradient(175deg,#FBEFCB 6%,var(--gold) 49%,var(--gold-deep) 96%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}

.hero-tag{
  font-size:clamp(17px,2.4vw,23px); color:var(--cream); margin:18px 0 0;
  letter-spacing:.02em;
}
.hero-tag::before, .hero-tag::after{ content:"—"; color:var(--gold); margin:0 14px; opacity:.6 }

.hero-sub{
  max-width:660px; margin:22px auto 0; color:var(--cream-soft); font-size:17px;
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px }

/* Third-tier action — present, but not competing with the two buttons above it. */
.hero-link{ margin:18px 0 0 }
.hero-link a{
  font-size:14px; letter-spacing:.06em; color:var(--cream-dim);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:color .2s, border-color .2s;
}
.hero-link a::before{ content:"\25B8"; color:var(--gold); margin-right:8px }
.hero-link a:hover{ color:var(--gold-lt); border-bottom-color:var(--gold-deep) }

.hero-facts{
  list-style:none; margin:56px 0 0; padding:26px 0 0;
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.hero-facts li{ text-align:center }
.hero-facts b{
  display:block; font-family:var(--display); font-size:19px; color:var(--gold-lt);
  letter-spacing:.05em; font-weight:500;
}
.hero-facts span{
  display:block; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cream-dim); margin-top:5px;
}

/* ---------- Slogan strip ---------- */
.strip{
  background:linear-gradient(90deg,var(--maroon) 0%,#5C1620 55%,var(--maroon) 100%);
  border-top:1px solid var(--gold-deep); border-bottom:1px solid var(--gold-deep);
  padding:15px 0;
}
.strip p{
  margin:0; text-align:center; font-family:var(--display); font-size:15px;
  letter-spacing:.14em; color:var(--gold-lt); text-transform:uppercase;
}
.tagx{ font-family:var(--sans); letter-spacing:.04em; color:rgba(244,237,224,.62); text-transform:none; font-size:13.5px }

/* ==========================================================================
   Section frame
   ========================================================================== */
.sec{ padding:clamp(64px,8.5vw,110px) 0 }
.sec-alt{ background:var(--night-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft) }

.sec-eyebrow{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin:0 0 12px;
}
.sec-title{
  font-family:var(--display); font-size:clamp(28px,4.4vw,44px);
  letter-spacing:.04em; margin:0 0 18px; color:var(--cream);
}
.sec-title .dev{ letter-spacing:0 }
.sec-intro{ color:var(--cream-soft); max-width:640px; font-size:17px; margin:0 0 44px }

.lead{ font-size:19px; color:var(--cream); line-height:1.6 }

/* The paragraph that carries a section's argument, before the supporting grid. */
.sec-lead{
  max-width:64ch; margin:-24px 0 42px; font-size:17.5px; line-height:1.72;
  color:var(--cream-soft); padding-left:20px; border-left:2px solid var(--gold-deep);
}
/* A closing beat under a grid. */
.sec-foot{
  margin:32px 0 0; text-align:center; font-family:var(--display);
  font-size:clamp(17px,2.3vw,21px); letter-spacing:.04em; color:var(--gold-lt);
}

/* ---------- Foundation ---------- */
.two-col{ display:grid; grid-template-columns:1.55fr 1fr; gap:52px; align-items:start }
.two-col p{ color:var(--cream-soft) }
.two-col .lead{ color:var(--cream) }

.factcard{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--shadow); position:sticky; top:96px;
}
.factcard h3{
  font-family:var(--display); font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.factcard dl{ margin:0 }
.factcard dt{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim); margin-top:17px;
}
.factcard dd{ margin:3px 0 0; font-size:15.5px; color:var(--cream) }

/* ---------- Pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px }
.pillar{
  position:relative; padding:30px 30px 30px 32px;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r);
  transition:border-color .25s ease, transform .25s ease;
}
.pillar::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:2px;
  background:linear-gradient(180deg,var(--gold),transparent); border-radius:2px;
}
.pillar:hover{ border-color:var(--line); transform:translateY(-3px) }
.pnum{
  display:block; font-family:var(--display); font-size:12.5px; letter-spacing:.24em;
  color:var(--gold-deep); margin-bottom:12px;
}
.pillar h3{ font-family:var(--display); font-size:20px; letter-spacing:.03em; margin-bottom:10px }
.pillar p{ color:var(--cream-soft); font-size:15.5px; margin:0 }

/* ---------- Entry passes ----------
   The panel is shaped like the thing it is asking for: a torn ticket, stub on the
   left, dashed perforation down the middle, notches punched out of both edges. */
.passes{ padding:clamp(10px,3vw,26px) 0 clamp(56px,7vw,88px) }

.passband{
  display:grid; grid-template-columns:230px 1fr;
  border:1px solid var(--gold-deep); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(105deg, rgba(122,30,43,.55) 0%, rgba(26,20,32,.96) 46%, var(--panel) 100%);
  box-shadow:var(--shadow);
}

.stub{
  position:relative; padding:32px 26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center;
  background:linear-gradient(170deg, rgba(212,165,72,.14), rgba(212,165,72,.03));
  border-right:2px dashed var(--gold-deep);
}
/* The two punched notches. They are filled with the page ground, so they read as
   holes rather than dots — keep this colour equal to the section background. */
.stub::before, .stub::after{
  content:""; position:absolute; right:-11px; width:20px; height:20px;
  border-radius:50%; background:var(--night); border:1px solid var(--gold-deep);
}
.stub::before{ top:-11px }
.stub::after{ bottom:-11px }

.stub-k{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.stub-n{
  font-family:var(--display); font-size:46px; font-weight:700; line-height:1;
  color:var(--gold-lt); letter-spacing:.02em;
}
.stub-n small{ font-size:15px; letter-spacing:.08em }
.stub-b{
  font-family:var(--display); font-size:12px; letter-spacing:.14em; color:var(--cream-soft);
  padding-top:8px; margin-top:2px; border-top:1px solid rgba(212,165,72,.25);
}
.stub-b .dev{ letter-spacing:0 }

.passband-txt{ padding:34px 38px }
.passband-txt h2{
  font-family:var(--display); font-size:clamp(22px,3vw,31px); letter-spacing:.03em;
  margin:0 0 14px; color:var(--cream);
}
.passband-txt p{ color:var(--cream-soft); max-width:56ch }
.btn-lg{ padding:16px 34px; font-size:15.5px; margin-top:8px }
.passband-note{
  margin-top:14px !important; font-size:13px; color:var(--cream-dim); letter-spacing:.02em;
}
.mono{ font-family:var(--mono); color:var(--gold) }

/* ---------- Editions ---------- */
.editions{ display:flex; flex-direction:column; gap:28px }

.edition{
  display:grid; grid-template-columns:300px 1fr; gap:0;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow);
}
.ed-poster{ position:relative; background:#0A0709; border-right:1px solid var(--line) }
.ed-poster img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.ed-body{ padding:32px 34px }

.ed-year{
  display:inline-block; font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.22em; color:var(--gold); border:1px solid var(--line);
  border-radius:999px; padding:5px 15px; margin-bottom:14px;
}
.ed-body h3{ font-family:var(--display); font-size:27px; letter-spacing:.05em; margin-bottom:18px }

.ed-meta{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px }
.ed-meta li{ font-size:15.5px; color:var(--cream) }
.ed-meta .k{
  display:inline-block; min-width:78px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-dim);
}
.ed-note{ color:var(--cream-soft); font-size:15.5px }

.ed-sponsors{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft) }
.ed-sponsors .k{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:11px;
}
.ed-sponsors ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px }
.ed-sponsors li{
  font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--gold-lt);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 14px;
  background:rgba(212,165,72,.05);
}

.edition-next{ grid-template-columns:1fr; border-style:dashed; background:none; box-shadow:none }
.edition-next .ed-body{ padding:30px 34px }
.ed-year-next{ color:var(--gold-lt); border-color:var(--gold); background:rgba(212,165,72,.08) }
.row-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }

/* ---------- Gallery ---------- */
.sub-h{
  font-family:var(--display); font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px; padding-bottom:11px; border-bottom:1px solid var(--line-soft);
  scroll-margin-top:90px;
}
.gal + .gal-note + .sub-h, .gal-note + .sub-h{ margin-top:52px }

/* Video cards are a facade: only the poster loads, and the real <video> is
   swapped in on tap. A card whose files are missing falls back to a label. */
.vgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.vcard{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:#0A0709;
  transition:border-color .22s ease, transform .22s ease;
}
.vcard:hover{ border-color:var(--gold) }
.vcard:hover:not(.playing){ transform:translateY(-3px) }
.vposter{ width:100%; height:100%; object-fit:cover }
.vcard video{ width:100%; height:100%; object-fit:contain; background:#000; display:block }

.vplay{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center; border:0; background:none; cursor:pointer;
}
.vplay i{
  width:64px; height:64px; border-radius:50%;
  border:1.5px solid var(--gold-lt); background:rgba(13,10,16,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  display:grid; place-items:center;
  transition:transform .22s ease, background .22s ease;
}
.vplay i::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:19px solid var(--gold-lt);
  border-top:12px solid transparent; border-bottom:12px solid transparent;
}
.vplay:hover i{ transform:scale(1.08); background:rgba(122,30,43,.7) }

.vmeta{
  position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px;
  background:linear-gradient(180deg,transparent,rgba(10,7,9,.9));
  pointer-events:none;
}
.vmeta b{ display:block; font-family:var(--display); font-size:17px; letter-spacing:.05em; color:var(--cream) }
.vmeta b .dev{ letter-spacing:0 }
.vmeta span{ display:block; font-size:13px; color:var(--cream-dim); margin-top:2px }

/* Playing: the chrome gets out of the way. */
.vcard.playing .vplay, .vcard.playing .vmeta, .vcard.playing .vposter{ display:none }

/* Files not in place yet. */
.vcard.missing{
  border-style:dashed; background:
    repeating-linear-gradient(135deg, rgba(212,165,72,.05) 0 12px, transparent 12px 24px), var(--panel);
}
.vcard.missing .vposter, .vcard.missing .vplay{ display:none }
.vcard.missing .vmeta{
  position:static; padding:0; background:none;
  height:100%; display:grid; place-content:center; text-align:center;
}
.vcard.missing .vmeta span::after{ content:" · clip to be added"; color:var(--maroon-lt) }
.vcard.missing:hover{ transform:none; border-color:var(--line) }

.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.gtile{
  margin:0; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  border:1px dashed var(--line); background:
    repeating-linear-gradient(135deg, rgba(212,165,72,.05) 0 12px, transparent 12px 24px), var(--panel);
  display:grid; place-items:center; position:relative;
}
.gtile-wide{ grid-column:span 2; aspect-ratio:8/3 }
.gtile span{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-dim);
  text-align:center; padding:0 14px;
}
.gtile img{ width:100%; height:100%; object-fit:cover }
.gtile:has(img){ border-style:solid; background:none }
.gal-note{ margin-top:20px; font-size:13.5px; color:var(--cream-dim); letter-spacing:.04em }

/* ---------- Support cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.card{
  padding:28px 26px; background:var(--panel); border:1px solid var(--line-soft);
  border-radius:var(--r); transition:border-color .25s ease, transform .25s ease;
}
.card:hover{ border-color:var(--line); transform:translateY(-3px) }
.card h3{ font-family:var(--display); font-size:18px; letter-spacing:.04em; color:var(--gold-lt); margin-bottom:11px }
.card p{ font-size:15px; color:var(--cream-soft); margin:0 }

.cta-bar{
  margin-top:44px; padding:30px 34px; border-radius:var(--r);
  background:linear-gradient(100deg,rgba(122,30,43,.4),rgba(212,165,72,.09));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
}
.cta-bar p{ margin:0; font-family:var(--display); font-size:21px; letter-spacing:.04em }

/* The 80G line sits under the ask, where a donor is already reading. */
.tax-note{
  display:flex; align-items:flex-start; gap:16px;
  margin:20px 0 0; padding:18px 22px;
  border:1px solid var(--line-soft); border-radius:var(--r);
  font-size:14.5px; color:var(--cream-soft); line-height:1.6;
}
.tax-note b{ color:var(--cream); font-weight:600 }
.seal{
  flex:none; margin-top:1px;
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--gold-lt); border:1px solid var(--gold-deep); border-radius:999px;
  padding:5px 13px; background:rgba(212,165,72,.07);
}

/* ==========================================================================
   How to reach (second page)
   ========================================================================== */
.pagehead{
  padding:clamp(46px,7vw,80px) 0 clamp(34px,4vw,48px);
  background:
    radial-gradient(120% 90% at 50% 0%, #241A16 0%, transparent 64%),
    linear-gradient(180deg, var(--night-2), var(--night));
  border-bottom:1px solid var(--line-soft);
}
.crumb{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:16px }
.crumb a{ color:var(--gold) }
.crumb span[aria-hidden]{ margin:0 8px; opacity:.5 }
.pagehead h1{
  font-family:var(--display); font-size:clamp(32px,6vw,54px); letter-spacing:.05em; color:var(--cream);
}
.pagehead-sub{ margin:16px 0 0; max-width:56ch; color:var(--cream-soft); font-size:17px }

.reach{ display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:44px; align-items:start }

.mapcard{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); position:sticky; top:96px;
}
/* A drawn pin rather than an embedded map — an iframe here would need a Google
   API key and would load a tracker on every visit. The buttons do the real work. */
.mappin{
  height:132px; display:grid; place-items:center; position:relative;
  background:
    repeating-linear-gradient(0deg,  rgba(212,165,72,.08) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(212,165,72,.08) 0 1px, transparent 1px 34px),
    linear-gradient(150deg, rgba(122,30,43,.4), rgba(26,20,32,.9));
  border-bottom:1px solid var(--line);
}
.pin{
  width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:linear-gradient(160deg,var(--gold-lt),var(--gold)); border:1px solid var(--gold-deep);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.pin::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:9px; height:9px; border-radius:50%; background:var(--night);
}
.mapcard-b{ padding:24px 26px }
.mapcard .k{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 10px;
}
.mapcard .addr{ line-height:1.8; color:var(--cream); margin:0 0 20px }
.mapcard .addr b{ font-family:var(--display); font-size:18px; letter-spacing:.04em }
.mapbtns{ display:flex; flex-direction:column; gap:10px }
.mapbtns .btn{ width:100% }
.mapnote{ margin:14px 0 0; font-size:12.5px; color:var(--cream-dim) }

.reach-modes{ display:grid; gap:20px }
.mode{
  padding:26px 28px; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:var(--r);
  border-left:2px solid var(--gold-deep);
}
.mode h2{ font-family:var(--display); font-size:20px; letter-spacing:.05em; color:var(--gold-lt); margin-bottom:10px }
.mode p{ color:var(--cream-soft); font-size:15.5px }
.mode b{ color:var(--cream); font-weight:600 }
.mode-note{ margin-top:10px !important; font-size:14px; color:var(--cream-dim) }

.backhome{ margin:38px 0 0; text-align:center }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:52px }
.contact h3{ font-family:var(--display); font-size:19px; letter-spacing:.05em; color:var(--gold-lt); margin-bottom:14px }
.contact p{ color:var(--cream-soft) }
.addr{ line-height:1.9 }
.social{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap }
.social a{ font-size:14px; letter-spacing:.06em }

.linklist{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.linklist li{ padding:16px 20px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--panel) }
.linklist a{ font-size:16px; font-weight:600 }
.linklist span{ display:block; font-size:13.5px; color:var(--cream-dim); margin-top:3px }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{ background:var(--night); border-top:1px solid var(--line); padding:44px 0 34px }
.foot-in{ display:grid; gap:26px; justify-items:center; text-align:center }
.foot-brand{ display:flex; align-items:center; gap:13px }
.foot-brand img{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--gold); object-fit:cover }
.foot-brand b{ display:block; font-family:var(--display); font-size:15px; letter-spacing:.07em }
.foot-brand span{ display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.foot-nav{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center }
.foot-nav a{ font-size:13.5px; color:var(--cream-soft) }
.foot-nav a:hover{ color:var(--gold-lt) }
.foot-legal{ margin:0; font-size:12.5px; color:var(--cream-dim); letter-spacing:.04em }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .two-col{ grid-template-columns:1fr; gap:34px }
  .factcard{ position:static }
  .pillars{ grid-template-columns:1fr }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .contact{ grid-template-columns:1fr; gap:38px }
  .reach{ grid-template-columns:1fr; gap:28px }
  .mapcard{ position:static }
  .mapbtns{ flex-direction:row; flex-wrap:wrap }
  .mapbtns .btn{ width:auto; flex:1 1 200px }
  .edition{ grid-template-columns:1fr }
  .ed-poster{ border-right:none; border-bottom:1px solid var(--line); max-height:340px }
  .ed-poster img{ object-position:center 22% }
  .gal{ grid-template-columns:repeat(2,1fr) }
  .gtile-wide{ grid-column:span 2; aspect-ratio:16/9 }

  /* Ticket turns portrait: the stub sits on top, perforation runs across. */
  .passband{ grid-template-columns:1fr }
  .stub{
    flex-direction:row; gap:16px; padding:20px 26px;
    border-right:none; border-bottom:2px dashed var(--gold-deep);
  }
  .stub::before, .stub::after{ right:auto; bottom:-11px; top:auto }
  .stub::before{ left:-11px }
  .stub::after{ right:-11px }
  .stub-n{ font-size:34px }
  .stub-b{ border-top:none; padding-top:0; margin-top:0 }
  .passband-txt{ padding:28px 26px }
}

/* Raised from 800px when "How to reach" joined the bar — seven links plus the
   brand and the gold button no longer fit on one line below this. */
@media (max-width:940px){
  .nav-toggle{ display:flex }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--night-2); border-bottom:1px solid var(--line);
    padding:10px 24px 22px; margin:0;
    display:none;
  }
  .nav.open{ display:flex }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:15.5px }
  .nav a:not(.btn)::after{ display:none }
  .nav .btn{ margin:16px 0 0; align-self:flex-start; border-bottom:none }
}

@media (max-width:640px){
  body{ font-size:16px }
  .wrap{ padding:0 20px }
  .hero-facts{ grid-template-columns:repeat(2,1fr); gap:24px 16px }
  .hero-tag::before, .hero-tag::after{ margin:0 9px }
  .hero-cta .btn{ width:100%; }
  .cards{ grid-template-columns:1fr }
  .ed-body{ padding:26px 22px }
  .ed-meta .k{ display:block; min-width:0; margin-bottom:1px }
  .cta-bar{ flex-direction:column; align-items:flex-start }
  .cta-bar .btn{ width:100% }
  .gal{ grid-template-columns:1fr }
  .gtile, .gtile-wide{ grid-column:span 1; aspect-ratio:4/3 }
  .vgrid{ grid-template-columns:1fr }
  .vplay i{ width:54px; height:54px }
  .vplay i::after{ border-left-width:16px; border-top-width:10px; border-bottom-width:10px }
  .strip p{ font-size:12.5px; letter-spacing:.1em }
}

/* ---------- Print ---------- */
@media print{
  .site-head,.nav-toggle,.hero-cta,.cta-bar,.site-foot{ display:none }
  body{ background:#fff; color:#000 }
  .reveal{ opacity:1; transform:none }
}