/* ==========================================================================
   Shaheedi Bunga — Design System
   Palette sampled directly from the organisation's logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   Palette sampled from the Gurmat Vidyala seal: navy, antique gold, cream.
   The seal has no third accent, so navy carries the actions and gold the
   ornament — there is deliberately no orange in this design.

   Dark mode re-points the SAME token names rather than adding new ones, so
   every component below inherits it without a single extra rule.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand */
  --navy:        #1A1E3E;
  --navy-deep:   #12162E;
  --navy-soft:   #2B3157;
  --gold:        #B2A672;
  --gold-bright: #CDBF8E;
  --gold-deep:   #6E653C;
  --cream:       #F2E9DC;
  --cream-dim:   #E7DBC9;
  --paper:       #FBF7F0;
  --white:       #FFFFFF;

  /* RGB triplets, for compositing with alpha */
  --gold-rgb:    178 166 114;   /* gold stays gold in both themes */
  --line-rgb:    26 30 62;      /* borders — flips light on dark */
  --shadow-rgb:  26 30 62;      /* shadows stay dark in both themes */
  --on-dark-rgb: 242 233 220;   /* text sitting on always-dark surfaces */
  --scrim-rgb:   18 22 46;      /* hero overlay, solid header */

  /* Text */
  --ink:         #1A1E3E;
  --ink-muted:   #4E5270;
  --ink-faint:   #6F7288;
  --on-dark:     #F2E9DC;
  --on-dark-mut: #B4B2C2;

  /* Roles */
  --accent:       #1A1E3E;      /* primary action */
  --accent-hover: #2B3157;
  --on-accent:    #F7F3EA;      /* text on a primary button */
  --flag:         #6E653C;      /* "sample data" / "coming soon" badges */
  --focus:        #1A1E3E;
  --field-bg:     #FFFFFF;

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-gurmukhi: "Noto Serif Gurmukhi", "Mukta Mahee", var(--font-body);

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.36vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.3rem + 0.66vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.65rem + 2.1vw, 3.5rem);
  --step-5:  clamp(2.6rem, 1.7rem + 4.2vw, 5.2rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --maxw: 1200px;
  --maxw-narrow: 720px;

  --radius: 4px;
  --radius-lg: 8px;
  --arch: 50% 50% 0 0 / 14% 14% 0 0;

  --shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 2px 8px rgb(var(--shadow-rgb) / 0.04);
  --shadow-md: 0 4px 12px rgb(var(--shadow-rgb) / 0.08), 0 12px 32px rgb(var(--shadow-rgb) / 0.07);
  --shadow-lg: 0 10px 30px rgb(var(--shadow-rgb) / 0.11), 0 30px 70px rgb(var(--shadow-rgb) / 0.1);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 76px;
  --topbar-h: 76px; /* overwritten by site.js with the measured height */
}

/* --------------------------------------------------------------------------
   Dark theme
   --------------------------------------------------------------------------
   Surfaces move down rather than simply inverting: the page sits at the old
   navy, cards lift slightly above it, and the sections that were dark bands
   on a light page go DEEPER than the page so the banding still reads.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --cream:       #12162E;   /* page */
  --cream-dim:   #171B36;   /* alternating band */
  --paper:       #1C2142;   /* cards, lifted above the page */

  --navy:        #0C0F22;   /* was a dark band on light — now deeper still */
  --navy-deep:   #080A18;
  --navy-soft:   #272D50;

  --ink:         #F2E9DC;
  --ink-muted:   #BAB8C8;
  --ink-faint:   #8E8CA4;

  --line-rgb:    178 166 114;   /* borders pick up gold on dark */
  --shadow-rgb:  0 0 6;

  --gold-deep:   #CDBF8E;   /* eyebrows and labels must lighten */
  --accent:       #B2A672;
  --accent-hover: #CDBF8E;
  --on-accent:    #12162E;
  --flag:         #CDBF8E;
  --focus:        #CDBF8E;
  --field-bg:     #171B36;
}

/* Follow the operating system until the visitor picks a side. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cream: #12162E; --cream-dim: #171B36; --paper: #1C2142;
    --navy: #0C0F22; --navy-deep: #080A18; --navy-soft: #272D50;
    --ink: #F2E9DC; --ink-muted: #BAB8C8; --ink-faint: #8E8CA4;
    --line-rgb: 178 166 114; --shadow-rgb: 0 0 6;
    --gold-deep: #CDBF8E;
    --accent: #B2A672; --accent-hover: #CDBF8E; --on-accent: #12162E;
    --flag: #CDBF8E; --focus: #CDBF8E; --field-bg: #171B36;
  }
}

@media (max-width: 800px) { :root { --header-h: 64px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

/* Pages without a hero start below the fixed stack rather than under it. */
body:not(.has-hero) { padding-top: var(--topbar-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

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

::selection { background: var(--gold); color: var(--navy); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 999;
  background: var(--navy); color: var(--on-dark);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

.display {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-muted);
  font-weight: 350;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 1px;
  background: currentColor; opacity: 0.65;
}
.eyebrow--center::after {
  content: ""; width: 2.2rem; height: 1px;
  background: currentColor; opacity: 0.65;
}

.gurmukhi {
  font-family: var(--font-gurmukhi);
  font-weight: 500;
  line-height: 1.55;
}
.gurmukhi-label {
  display: block;
  font-family: var(--font-gurmukhi);
  font-size: var(--step-1);
  color: var(--gold-deep);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}

.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.1em; color: var(--ink-muted); }
.prose h2 { margin: 2em 0 0.6em; }
.prose h3 { margin: 1.8em 0 0.5em; }
.prose ul { margin: 0 0 1.2em; }
.prose ul li {
  position: relative; padding-left: 1.6em; margin-bottom: 0.5em;
  color: var(--ink-muted);
}
.prose ul li::before {
  content: ""; position: absolute; left: 0.3em; top: 0.75em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--gold);
}
.prose a {
  color: var(--gold-deep); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--ink); }
.prose strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--wide { max-width: 1400px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--dim { background: var(--cream-dim); }
.section--navy { background: var(--navy); color: var(--on-dark); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--on-dark); }
.section--navy .lede { color: var(--on-dark-mut); }
.section--navy .eyebrow { color: var(--gold); }

.section-head { margin-bottom: var(--sp-7); max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   5. Ornaments — derived from the logo's guilloche ring
   -------------------------------------------------------------------------- */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); color: var(--gold);
  margin-block: var(--sp-6);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; flex: 1; max-width: 140px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.ornament::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornament span {
  width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid currentColor; flex: none;
}

.rule-gold {
  height: 3px; border: 0; width: 64px;
  background: var(--gold);
  margin: 0 0 var(--sp-5);
}
.section-head--center .rule-gold { margin-inline: auto; }

/* Dashed gold ring frame, echoing the logo border */
.ring-frame { position: relative; display: inline-block; }
.ring-frame::before, .ring-frame::after {
  content: ""; position: absolute; inset: -14px;
  border-radius: 50%; pointer-events: none;
}
.ring-frame::before { border: 1px solid var(--gold); }
.ring-frame::after {
  inset: -22px;
  border: 1px dashed var(--gold);
  opacity: 0.55;
}
.ring-frame img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em;
  padding: 0.9em 1.75em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.25s var(--ease);
  cursor: pointer; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn--navy { background: var(--navy); color: var(--on-dark); }
.btn--navy:hover { background: var(--navy-soft); box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background: var(--gold-bright); box-shadow: var(--shadow-md); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cream); }

.btn--ghost-light { border-color: rgb(var(--on-dark-rgb) / 0.5); color: var(--on-dark); }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }

.btn--sm { padding: 0.65em 1.2em; font-size: 0.78rem; }
.btn--lg { padding: 1.05em 2.2em; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.section-head--center .btn-row, .center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */
/* The draft note, announcement bar and header share one fixed stack so they
   can never overlap. JS measures its height into --topbar-h. */
.topbar { position: fixed; inset: 0 0 auto; z-index: 100; }

.site-header {
  position: relative;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header--transparent { background: transparent; }
.site-header--solid {
  background: rgb(var(--scrim-rgb) / 0.96);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom-color: rgb(var(--gold-rgb) / 0.28);
}
body:not(.has-hero) .site-header { background: rgb(var(--scrim-rgb) / 0.96); border-bottom-color: rgb(var(--gold-rgb) / 0.28); }

.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-size: 1.32rem;
  font-weight: 600; color: var(--on-dark); letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
@media (max-width: 400px) { .brand img { width: 38px; height: 38px; } .brand-name { font-size: 1.1rem; } }

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav-list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav-list a {
  position: relative; font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.05em; color: var(--on-dark);
  padding-block: 0.4rem; transition: color 0.2s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.nav-list a[aria-current="page"] { color: var(--gold); }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--on-dark);
}
.nav-toggle span {
  display: block; position: relative; width: 24px; height: 1.5px;
  background: currentColor; transition: background 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 1.5px;
  background: currentColor; transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: var(--topbar-h) 0 0;
    background: var(--navy-deep);
    flex-direction: column; justify-content: center;
    gap: var(--sp-6); padding: var(--sp-6) var(--gutter);
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    overflow-y: auto;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; gap: var(--sp-5); }
  .nav-list a { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; }
  .nav-list a::after { display: none; }
  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   8. Announcement bar
   -------------------------------------------------------------------------- */
.announce {
  position: relative;
  background: var(--gold); color: var(--navy);
  font-size: var(--step--1); font-weight: 500;
  text-align: center;
}
.announce .container {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  padding-block: 0.6rem; min-height: 42px;
  /* keep the text clear of the absolutely positioned close button */
  padding-inline-end: calc(var(--gutter) + 2.5rem);
}
.announce a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.announce-close {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.1rem; line-height: 1;
  transition: background 0.2s var(--ease);
}
.announce-close:hover { background: rgb(var(--line-rgb) / 0.12); }
.announce[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: center;
  padding-top: calc(var(--topbar-h) + var(--sp-7));
  padding-bottom: var(--sp-8);
  background: var(--navy-deep);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / 0.82) 0%, rgb(var(--scrim-rgb) / 0.5) 38%, rgb(var(--scrim-rgb) / 0.88) 100%),
    linear-gradient(90deg, rgb(var(--scrim-rgb) / 0.75) 0%, rgb(var(--scrim-rgb) / 0.2) 65%);
}
.hero__watermark {
  position: absolute; z-index: -1;
  right: -12%; bottom: -22%;
  width: min(56vw, 600px); opacity: 0.09;
  pointer-events: none; user-select: none;
}
.hero__inner { max-width: 780px; color: var(--on-dark); }
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: var(--white); }
.hero__lede {
  margin-top: var(--sp-5);
  font-size: var(--step-1); line-height: 1.6;
  color: rgb(var(--on-dark-rgb) / 0.88);
  max-width: 54ch; font-weight: 350;
}
.hero .btn-row { margin-top: var(--sp-6); }

.hero--page {
  min-height: min(52vh, 460px);
  padding-block: calc(var(--topbar-h) + var(--sp-7)) var(--sp-7);
}
.hero--page h1 { max-width: 20ch; }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid rgb(var(--gold-rgb) / 0.35);
}
.hero__stat strong {
  display: block; font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 600; color: var(--gold);
  line-height: 1;
}
.hero__stat span {
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / 0.7);
}

/* Scroll cue */
.hero__cue {
  position: absolute; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  color: rgb(var(--on-dark-rgb) / 0.55);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.hero__cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (max-width: 800px) { .hero__cue { display: none; } }

/* --------------------------------------------------------------------------
   10. Placeholder images  — REPLACE THESE (see PHOTOS.md)
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--gold-rgb) / 0.09) 0 12px,
      transparent 12px 24px),
    linear-gradient(140deg, var(--navy) 0%, var(--navy-soft) 55%, var(--navy-deep) 100%);
  color: rgb(var(--on-dark-rgb) / 0.72);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.ph::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px dashed rgb(var(--gold-rgb) / 0.45);
  pointer-events: none;
}
.ph__label {
  position: relative; text-align: center;
  padding: var(--sp-5);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; line-height: 1.7;
}
.ph__label b {
  display: block; color: var(--gold); font-weight: 600;
  font-size: 0.62rem; letter-spacing: 0.22em; margin-bottom: 0.4rem;
}
.ph--square { aspect-ratio: 1; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--hero { aspect-ratio: auto; height: 100%; width: 100%; }
.ph--arch { border-radius: var(--arch); }

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card__media { position: relative; overflow: hidden; }
.card__media img, .card__media .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }
.card__body h3 { font-size: var(--step-2); }
.card__body p { color: var(--ink-muted); font-size: 0.96rem; }
.card__body .link-arrow { margin-top: auto; padding-top: var(--sp-3); }
.card--link::after {
  content: ""; position: absolute; inset: 0;
}

/* Discipline card — with Gurmukhi title */
.discipline .card__body { gap: var(--sp-2); }
.discipline__gur {
  font-family: var(--font-gurmukhi); font-size: 1.15rem;
  color: var(--gold-deep); font-weight: 500;
}
.discipline__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.tag {
  display: inline-block;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; padding: 0.35em 0.7em;
  border: 1px solid rgb(var(--gold-rgb) / 0.6);
  color: var(--gold-deep); border-radius: 2px;
  background: rgb(var(--gold-rgb) / 0.08);
}
.tag--flag {
  border-color: rgb(var(--gold-rgb) / 0.55);
  color: var(--flag);
  background: rgb(var(--gold-rgb) / 0.12);
  font-weight: 700;
}
.tag--solid { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* Value / feature card, no image */
.feature {
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.32);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature__icon {
  width: 46px; height: 46px; margin-bottom: var(--sp-4);
  color: var(--accent);
}
.feature h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.feature p { color: var(--ink-muted); font-size: 0.96rem; }

/* Stat strip */
.stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: rgb(var(--gold-rgb) / 0.35);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--paper); padding: var(--sp-6) var(--sp-5); text-align: center; }
.stat strong {
  display: block; font-family: var(--font-display);
  font-size: var(--step-4); font-weight: 600; color: var(--ink); line-height: 1;
}
.stat span {
  display: block; margin-top: var(--sp-3);
  font-size: var(--step--1); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. Quote block
   -------------------------------------------------------------------------- */
.quote {
  text-align: center; max-width: 24ch; margin-inline: auto;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 500;
  line-height: 1.35; font-style: italic;
}
.quote--wide { max-width: 34ch; }
.quote cite {
  display: block; margin-top: var(--sp-5);
  font-family: var(--font-body); font-style: normal;
  font-size: var(--step--1); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}

/* --------------------------------------------------------------------------
   13. Timetable
   -------------------------------------------------------------------------- */
.filters {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-radius: var(--radius);
  margin-bottom: var(--sp-6);
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.filter-group__label {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint);
  min-width: 92px; flex: none;
}
.chip {
  font-size: 0.8rem; font-weight: 500;
  padding: 0.45em 0.95em;
  border: 1px solid rgb(var(--line-rgb) / 0.2);
  border-radius: 100px; color: var(--ink-muted);
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}

.tt-count {
  font-size: var(--step--1); color: var(--ink-faint);
  margin-bottom: var(--sp-5);
}
.tt-count strong { color: var(--ink); }

.tt-day { margin-bottom: var(--sp-7); }
.tt-day__head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgb(var(--gold-rgb) / 0.5);
}
.tt-day__head h3 { font-size: var(--step-2); }
.tt-day__head span { font-size: var(--step--1); color: var(--ink-faint); }

.tt-list { display: grid; gap: var(--sp-3); }
.tt-item {
  display: grid; gap: var(--sp-3) var(--sp-5);
  grid-template-columns: 1fr;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.3);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  transition: box-shadow 0.25s var(--ease), border-left-color 0.25s var(--ease);
}
.tt-item:hover { box-shadow: var(--shadow-sm); border-left-color: var(--accent); }
@media (min-width: 780px) {
  .tt-item { grid-template-columns: 130px 1.2fr 1.4fr auto; align-items: center; }
}
.tt-time {
  font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 600; color: var(--ink); line-height: 1.2;
}
.tt-time small { display: block; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-top: 2px; }
.tt-class strong { display: block; font-size: 1.05rem; font-weight: 600; }
.tt-class .discipline__gur { font-size: 1rem; }
.tt-venue { font-size: 0.92rem; color: var(--ink-muted); }
.tt-venue strong { display: block; color: var(--ink); font-weight: 600; }
.tt-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.tt-empty {
  padding: var(--sp-8) var(--sp-5); text-align: center;
  border: 1px dashed rgb(var(--gold-rgb) / 0.6);
  border-radius: var(--radius); color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   14. Events
   -------------------------------------------------------------------------- */
.event {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (min-width: 760px) { .event { grid-template-columns: 108px 1fr auto; align-items: center; } }
.event__date {
  display: grid; place-items: center; align-content: center;
  padding: var(--sp-4); background: var(--navy); color: var(--on-dark);
  border-radius: var(--radius); text-align: center;
}
.event__date .d { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--gold); }
.event__date .m { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; }
.event__date .y { font-size: 0.66rem; color: var(--on-dark-mut); margin-top: 2px; }
.event__body h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.event__body p { color: var(--ink-muted); font-size: 0.94rem; }
.event__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-faint); }
.event__meta span { display: inline-flex; align-items: center; gap: 0.4em; }

.event--past { opacity: 0.75; }
.event--past .event__date { background: var(--cream-dim); color: var(--ink-muted); }
.event--past .event__date .d { color: var(--ink-muted); }

/* Countdown */
.countdown { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.countdown div {
  min-width: 74px; padding: var(--sp-4) var(--sp-3); text-align: center;
  border: 1px solid rgb(var(--gold-rgb) / 0.4); border-radius: var(--radius);
  background: rgb(var(--gold-rgb) / 0.07);
}
.countdown strong {
  display: block; font-family: var(--font-display);
  font-size: var(--step-3); font-weight: 600; color: var(--gold); line-height: 1;
}
.countdown span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-mut); }

/* --------------------------------------------------------------------------
   15. Resources
   -------------------------------------------------------------------------- */
.res {
  display: flex; gap: var(--sp-5); align-items: flex-start;
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid rgb(var(--gold-rgb) / 0.35);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.res:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.res__icon {
  flex: none; width: 52px; height: 62px;
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 2px;
  color: var(--gold-deep); background: rgb(var(--gold-rgb) / 0.08);
  font-size: 0.6rem; letter-spacing: 0.1em; font-weight: 700;
}
.res__body { flex: 1; }
.res__body h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.res__body p { font-size: 0.92rem; color: var(--ink-muted); margin-bottom: var(--sp-3); }
.res__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.gallery-item {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1; background: var(--cream-dim); cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0; padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgb(var(--scrim-rgb) / 0.9));
  color: var(--on-dark); font-size: 0.82rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery-item:hover figcaption, .gallery-item:focus-within figcaption { opacity: 1; transform: none; }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 1/2; }
@media (max-width: 640px) { .gallery-item--tall { grid-row: span 1; aspect-ratio: 1; } }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(var(--scrim-rgb) / 0.96);
  display: grid; place-items: center; padding: var(--sp-6);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img, .lightbox .ph { max-width: min(92vw, 1100px); max-height: 82vh; width: auto; }
.lightbox__cap { color: var(--on-dark-mut); margin-top: var(--sp-4); text-align: center; font-size: 0.9rem; }
.lightbox__close, .lightbox__nav {
  position: absolute; color: var(--on-dark);
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid rgb(var(--on-dark-rgb) / 0.3); border-radius: 50%;
  font-size: 1.3rem; transition: background 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgb(var(--on-dark-rgb) / 0.15); }
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__nav--prev { left: var(--sp-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-5); top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); }
.field label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; }
.field label .req { color: var(--flag); }
.field .hint { font-size: 0.78rem; color: var(--ink-faint); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8em 1em;
  background: var(--field-bg);
  border: 1px solid rgb(var(--line-rgb) / 0.22);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  font-size: 0.98rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2355597A' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 0.25);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3); }
.field--check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--accent); }
.field--check label { font-weight: 400; font-size: 0.88rem; color: var(--ink-muted); line-height: 1.55; }

.form-note {
  font-size: 0.82rem; color: var(--ink-faint);
  padding: var(--sp-4); border-left: 2px solid var(--gold);
  background: rgb(var(--gold-rgb) / 0.08);
}

.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* --------------------------------------------------------------------------
   18. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid rgb(var(--gold-rgb) / 0.45); }
.accordion details { border-bottom: 1px solid rgb(var(--gold-rgb) / 0.45); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  transition: color 0.2s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--accent); }
.accordion summary::after {
  content: "+"; flex: none; font-family: var(--font-body); font-size: 1.4rem;
  color: var(--gold-deep); transition: transform 0.3s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details > div { padding-bottom: var(--sp-5); color: var(--ink-muted); max-width: 68ch; }

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); color: var(--on-dark);
  text-align: center;
}
.cta-band__watermark {
  position: absolute; z-index: -1; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 560px); opacity: 0.08;
  pointer-events: none;
}
.cta-band h2 { color: var(--white); max-width: 20ch; margin-inline: auto; }
.cta-band p { color: var(--on-dark-mut); max-width: 52ch; margin: var(--sp-4) auto 0; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-mut); font-size: 0.92rem; }
.site-footer a { transition: color 0.2s var(--ease); }
.site-footer a:hover { color: var(--gold); }
.footer-top {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1fr;
  padding-block: var(--sp-8);
}
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer-brand img { width: 76px; margin-bottom: var(--sp-4); }
.footer-brand p { max-width: 34ch; margin-top: var(--sp-3); }
.footer-col h4 {
  color: var(--gold); font-family: var(--font-body);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--sp-4); font-weight: 600;
}
.footer-col li + li { margin-top: var(--sp-3); }

.socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgb(var(--gold-rgb) / 0.4); border-radius: 50%;
  color: var(--on-dark); transition: all 0.25s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5);
  align-items: center; justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: 1px solid rgb(var(--gold-rgb) / 0.22);
  font-size: 0.82rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-credit { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   22. Draft banner — remove before launch
   -------------------------------------------------------------------------- */
.draft-note {
  background: repeating-linear-gradient(45deg, var(--navy-soft) 0 10px, var(--navy) 10px 20px);
  color: var(--gold-bright);
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 0.55rem var(--gutter); font-weight: 600;
}

/* --------------------------------------------------------------------------
   23. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav, .announce, .cta-band, .draft-note, .filters { display: none !important; }
  body { background: #fff; }
  .hero { min-height: auto; padding-top: 0; background: #fff; }
  .hero__media, .hero__watermark { display: none; }
  .hero__inner { color: #000; }
  .hero h1, .hero .eyebrow { color: #000 !important; }
  .tt-item { break-inside: avoid; border: 1px solid #999; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   24. Zoom page transition
   --------------------------------------------------------------------------
   Two halves of one move, across two documents: the leaving page scales up
   and fades out, and the arriving page settles back down out of it, so the
   pair reads as one continuous push through the page.

   Pure CSS, so the arriving page animates from its very first paint — an
   inline script in each <head> sets .is-zooming-in before anything renders.
   js/page-transition.js only handles the hand-off and the cleanup.
   -------------------------------------------------------------------------- */

/* A scaled body enlarges the scrollable area, which flashes a horizontal
   scrollbar mid-move. `clip` (not `hidden`) suppresses it without turning the
   root into a scroll container, so vertical scrolling is left alone. */
.is-zooming-in,
.is-zooming-out { overflow-x: clip; }

.is-zooming-out body {
  animation: zoomOut 460ms cubic-bezier(0.55, 0, 0.85, 0.25) both;
  pointer-events: none;               /* nothing is clickable on the way out */
}

.is-zooming-in body {
  transform-origin: 50% 45vh;         /* an arriving page is always at scroll 0 */
  animation: zoomIn 680ms var(--ease) both;
}

/* A transformed <body> becomes the containing block for fixed descendants, so
   the top bar would otherwise snap to the top of the document mid-zoom.
   page-transition.js pins it to the current scroll offset first. */
.is-zooming-out .topbar { position: absolute; }

@keyframes zoomOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(1.14); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(1.07); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .is-zooming-in body,
  .is-zooming-out body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   25. Wordmark band
   --------------------------------------------------------------------------
   Giant "SHAHEEDI BUNGA" sitting below the hero. The letterforms are a window
   onto several gradient layers that drift at different rates, so the movement
   reads only inside the type. Pure CSS — no JS, no canvas.
   -------------------------------------------------------------------------- */
.wordmark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
  padding-block: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

/* A slow aura behind the whole band, for depth behind the letters. */
.wordmark::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(38% 55% at 25% 45%, rgb(var(--gold-rgb) / 0.16), transparent 70%),
    radial-gradient(34% 50% at 75% 55%, rgb(var(--gold-rgb) / 0.14), transparent 70%);
  animation: wordmarkAura 22s ease-in-out infinite alternate;
}

.wordmark__gur {
  font-family: var(--font-gurmukhi);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.wordmark__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.28em;

  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.94;
  font-size: clamp(2.9rem, 13.2vw, 13rem);

  /* Fallback for anything without background-clip: text — solid gold, no
     transparent fill, so the words are never invisible. */
  color: var(--gold);
  margin: 0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wordmark__text {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Listed top layer first; the solid gold base is last so the letters
       always have something behind them. */
    background-image:
      linear-gradient(100deg, transparent 38%, rgba(255, 252, 245, 0.75) 50%, transparent 62%),
      radial-gradient(62% 130% at 18% 50%, rgb(205 191 142 / 0.95), transparent 62%),
      radial-gradient(58% 130% at 74% 42%, rgb(var(--gold-rgb) / 0.9), transparent 62%),
      repeating-linear-gradient(112deg,
        rgba(255, 255, 255, 0.14) 0 10px,
        rgba(255, 255, 255, 0) 10px 30px),
      linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright), var(--gold));

    background-size:
      230% 100%,
      190% 100%,
      210% 100%,
      280% 100%,
      100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;

    animation: wordmarkDrift 16s linear infinite;
  }
}

/* Each layer travels a different distance over the same cycle, which reads as
   different speeds. The base gradient stays put. */
@keyframes wordmarkDrift {
  from {
    background-position: -70% 0, 0% 50%, 100% 50%, 0 0, 0 0;
  }
  to {
    background-position: 170% 0, 100% 50%, 0% 50%, 360px 0, 0 0;
  }
}

@keyframes wordmarkAura {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

.wordmark__sub {
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--on-dark-rgb) / 0.55);
}

@media (max-width: 560px) {
  .wordmark__sub { letter-spacing: 0.14em; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark::before,
  .wordmark__text { animation: none; }
}

/* --------------------------------------------------------------------------
   26. Marquee
   --------------------------------------------------------------------------
   Continuous ticker of what we run, sitting under the wordmark band.

   The list is repeated four times. The track scrolls by exactly one copy
   (25% of its total width) and then snaps back, which is invisible because
   the next copy is identical. Four copies rather than two so there is still
   content in frame on very wide monitors — with two, the track runs out
   before the far edge of an ultrawide screen and leaves a gap.

   Only the first copy is exposed to assistive tech; the rest are aria-hidden.
   -------------------------------------------------------------------------- */
.marquee-band {
  position: relative;
  background: var(--navy-deep);
  border-top: 1px solid rgb(var(--gold-rgb) / 0.28);
  border-bottom: 1px solid rgb(var(--gold-rgb) / 0.28);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-right: var(--sp-3);
}

.marquee {
  flex: 1;
  overflow: hidden;
  padding-block: clamp(0.85rem, 1.8vw, 1.35rem);

  /* Soften both ends so items enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 34s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__group li {
  display: flex;
  align-items: center;
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgb(var(--on-dark-rgb) / 0.92);
  white-space: nowrap;
  padding-inline: clamp(1rem, 2.4vw, 2rem);
}

/* Gold diamond between items, echoing the .ornament motif. */
.marquee__group li::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  margin-left: clamp(2rem, 4.8vw, 4rem);
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  background: rgb(var(--gold-rgb) / 0.25);
}

@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}

/* Pause control — WCAG 2.2.2 requires a way to stop motion that runs for more
   than five seconds. Hover alone would not help keyboard or touch users. */
.marquee__toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--gold-rgb) / 0.45);
  color: var(--gold);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.marquee__toggle:hover {
  background: var(--gold);
  color: var(--navy);
}
.marquee__toggle svg { width: 12px; height: 12px; }
.marquee__toggle .icon-play { display: none; }

.marquee-band[data-paused="true"] .marquee__track { animation-play-state: paused; }
.marquee-band[data-paused="true"] .icon-play { display: block; }
.marquee-band[data-paused="true"] .icon-pause { display: none; }

/* Pausing on hover/focus is a convenience on top of the button. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }        /* still reachable, just not moving */
}

/* --------------------------------------------------------------------------
   27. Utility toggles — theme and language
   -------------------------------------------------------------------------- */
.utils {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.util-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  height: 34px;
  padding-inline: 0.7rem;
  border: 1px solid rgb(var(--gold-rgb) / 0.45);
  border-radius: 100px;
  color: var(--on-dark);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.util-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}
.util-btn svg { width: 15px; height: 15px; flex: none; }

/* Theme button: show the icon of the mode you would switch TO. */
.theme-btn { width: 34px; padding-inline: 0; }
.theme-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-btn .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .icon-moon { display: block; }
}

/* Language button shows the language you would switch TO. */
.lang-btn .lang-en { display: none; }
.lang-btn .lang-pa { display: inline; font-family: var(--font-gurmukhi); letter-spacing: 0; }
html[lang^="pa"] .lang-btn .lang-en { display: inline; }
html[lang^="pa"] .lang-btn .lang-pa { display: none; }

/* Gurmukhi needs a touch more line height than the Latin scale allows. */
html[lang^="pa"] body { font-family: var(--font-gurmukhi); }
html[lang^="pa"] h1, html[lang^="pa"] h2,
html[lang^="pa"] h3, html[lang^="pa"] h4 {
  font-family: var(--font-gurmukhi);
  line-height: 1.35;
  letter-spacing: 0;
}
html[lang^="pa"] .display,
html[lang^="pa"] .wordmark__text { font-family: var(--font-gurmukhi); line-height: 1.3; }
html[lang^="pa"] .eyebrow,
html[lang^="pa"] .btn { letter-spacing: 0.04em; }

/* Shown only in Punjabi, flagging that long-form copy is still English. */
.lang-note { display: none; }
html[lang^="pa"] .lang-note {
  display: block;
  background: rgb(var(--gold-rgb) / 0.14);
  border-bottom: 1px solid rgb(var(--gold-rgb) / 0.3);
  color: var(--ink-muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem var(--gutter);
}

@media (max-width: 1100px) {
  /* In the mobile overlay the toggles sit under the nav links. */
  .utils { order: 3; justify-content: center; }
  .util-btn { height: 42px; padding-inline: 1rem; font-size: 0.8rem; }
  .theme-btn { width: 42px; }
}