@import url("../fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════
   JWRC — Jaipur World Record Carnival
   Design system derived from the JWRC logo and business card.
   Concept: the jharokha — every frame is a carved window onto
   something larger than the person looking through it.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. Tokens ---------- */
:root {
  /* The brand flame reads beautifully at display size, but white text on it
     lands at 3.9:1 — under the 4.5:1 floor. So the palette carries three
     weights of the same colour: --flame for large type, rules and glows;
     --flame-btn behind white button text (5.1:1); --flame-deep for small
     type sitting on ivory or sand (5.4:1 / 4.8:1). Same hue throughout, so
     nothing about the identity changes — only the legibility. */
  --flame:      #E8461C;
  --flame-2:    #FF6A3D;
  --flame-btn:  #C93A15;
  --flame-deep: #BE3411;
  --ember:      #F4813A;
  --gold:       #D9A441;
  --gold-lt:    #F0C87A;

  --navy:       #1B2334;
  --navy-2:     #121828;
  --navy-3:     #0B101B;
  --indigo:     #23406B;
  --teal:       #2C6E80;
  --crimson:    #B92B2C;
  --leaf:       #2E6A50;

  /* ── brand colours ──
     These are the identity and they do not move. --ivory in particular is
     the ink used on every dark ground on the site; if it were remapped for
     a dark theme, every headline standing on navy would turn navy too. */
  --ivory:      #FCF8F0;
  --sand:       #F4EADA;
  --sand-2:     #E9DAC2;

  /* ── surfaces and ink ──
     These are what a theme changes. The light grounds and the text that
     stands on them are named separately from the brand colours precisely
     so that a dark theme can swap the grounds without touching anything
     that is already dark. In the light theme they are the same values the
     site has always used. */
  --bg:         #FFFAF2;   /* the page itself — a shade warmer and brighter
                              than the old cream, so the light theme reads
                              as daylight rather than as paper */
  --bg-2:       #FBF1E0;   /* a panel raised off it */
  --bg-3:       #F0E1C6;   /* a well sunk into it, and image placeholders */
  --ink:        #191510;
  --ink-soft:   #4C443A;
  /* Carries every small uppercase label on the page. At its old value it sat
     at 3.6:1 on ivory and 3.3:1 on sand — the classic grey-on-cream that
     looks refined on a designer's monitor and vanishes in daylight on a
     phone. Two steps darker clears 4.5:1 on all three light grounds and
     still reads as the quiet tone it is meant to be. */
  --ink-faint:  #6E6558;
  --line:       rgba(25,21,16,.12);
  --line-lt:    rgba(252,248,240,.14);


  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --deva: "Noto Sans Devanagari", var(--body);

  /* Composed from the --sh-* colour tokens in 1b, so one set of shadows
     serves both themes: warm brown on paper, near-black on a dark ground. */
  --sh-1: 0 1px 2px var(--sh-a), 0 8px 20px -10px var(--sh-b);
  --sh-2: 0 2px 6px var(--sh-a), 0 22px 46px -18px var(--sh-c);
  --sh-3: 0 4px 10px var(--sh-a), 0 44px 80px -28px var(--sh-d);

  --gut: clamp(20px, 5vw, 84px);
  --maxw: 1280px;
  --nav-h: 74px;

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

  /* one focus ring for the whole site, in the brand colour, defined once so
     no component has to reinvent it or switch it off */
  --focus: var(--flame);
  --focus-halo: rgba(232,70,28,.22);
  --tap: 44px;                     /* the smallest thing a thumb should hit */
  --tap-min: 0px;                  /* raised to --tap on touch screens, below */
}

/* ---------- 1b. The themes ----------

   Every themed colour is declared once, as light-dark(light, dark), and
   which half applies is decided by color-scheme further down. There is no
   second copy of the palette anywhere in this file.

   That is not tidiness. The previous version wrote the dark palette out
   twice — once for a stated choice, once for a device preference — and the
   two drifted within a day: --band was #2B1A15 in one and #2E1A13 in the
   other, so somebody who pressed the dark button saw different colours
   from somebody whose phone asked for dark. Nobody would ever notice, and
   it would never come right.

   The plain light value is declared first on every token. A browser too
   old for light-dark() throws the second declaration away as invalid and
   keeps the light palette, which is a working site rather than an unstyled
   one.

   ── what a theme changes ──
   Surfaces (--bg*), the bands (--band*), the ink standing on them, the
   rules, and the colours inside the shadows. The brand colours never move:
   --ivory is the ink on every dark ground here, so remapping it would turn
   every headline standing on a band into the band.

   ── the bands ──
   These used to be the navy the site was designed around, #1B2334 and
   #0B101B, at 1.7% and 0.6% relative luminance. Five of them down one page
   is a great deal of weight, and the site read heavy — nearer a printed
   annual report than a carnival. They are now a block-print indigo around
   7%, four times lighter, which still leaves body copy on them at 5.2:1
   against a 4.5 floor. The measured ceiling is about #42528C, where
   72%-alpha body copy lands at 4.55:1; these sit short of it on purpose,
   so the margin is real rather than nominal. */

:root {
  /* surfaces — the page, a panel raised off it, a well sunk into it */
  --bg:   #FFFBF3;
  --bg:   light-dark(#FFFBF3, #1C1731);
  --bg-2: #FDF4E7;
  --bg-2: light-dark(#FDF4E7, #251F42);
  --bg-3: #F6E7D2;
  --bg-3: light-dark(#F6E7D2, #312956);

  /* the bands: a feature band, the hero/overlay tone, and the deepest one
     which the footer also uses. Light runs indigo, dark runs ember, so in
     both themes a band is a change of temperature as well as of tone. */
  --band:      #3A4A80;
  --band:      light-dark(#3A4A80, #3B251B);
  --band-2:    #2F3C68;
  --band-2:    light-dark(#2F3C68, #241D3E);
  --band-deep: #26314F;
  --band-deep: light-dark(#26314F, #171227);

  /* ink */
  --ink:       #191510;
  --ink:       light-dark(#191510, #F6F0E6);
  --ink-soft:  #4C443A;
  --ink-soft:  light-dark(#4C443A, rgba(246,240,230,.78));
  /* Carries every small uppercase label. Two steps darker than it once was,
     which clears 4.5:1 on all three light grounds and still reads quiet. */
  --ink-faint: #6E6558;
  --ink-faint: light-dark(#6E6558, rgba(246,240,230,.64));
  --line:      rgba(25,21,16,.12);
  --line:      light-dark(rgba(25,21,16,.12), rgba(246,240,230,.16));

  /* Shadow colours are tokens so the shadows themselves can be written
     once. light-dark() takes colours only, never a whole shadow. */
  --sh-a: rgba(70,46,26,.05);
  --sh-a: light-dark(rgba(70,46,26,.05), rgba(0,0,0,.42));
  --sh-b: rgba(70,46,26,.16);
  --sh-b: light-dark(rgba(70,46,26,.16), rgba(0,0,0,.58));
  --sh-c: rgba(70,46,26,.26);
  --sh-c: light-dark(rgba(70,46,26,.26), rgba(0,0,0,.7));
  --sh-d: rgba(70,46,26,.36);
  --sh-d: light-dark(rgba(70,46,26,.36), rgba(0,0,0,.8));

  /* Small type on a dark ground wants the lighter flame; the deep one was
     mixed for contrast against ivory and goes muddy there. */
  --flame-deep: #BE3411;
  --flame-deep: light-dark(#BE3411, #FF7A4D);

  /* ── accents ──
     The flames and the golds were mixed against a near-black band. Now
     that a band is a mid indigo, flame on it is 2.15:1 — it disappears.
     So every accent that colours TEXT reads through these tokens, and a
     band context re-points them at a marigold that clears 5.29:1 on the
     lightest band. Marigold and saffron are the right answer twice over:
     they are legible on indigo, and they are what actually hangs over a
     doorway in Jaipur.

     Backgrounds, borders and rules keep the brand flame — this is about
     text only, where contrast is a requirement rather than a preference. */
  --acc:      var(--flame);        /* display-size accent */
  --acc-sm:   var(--flame-deep);   /* small-text accent */
  --acc-gold: var(--gold);         /* the gold accent */

  /* How strongly the glows on a band read. A lighter band needs less of
     them: at the old near-black they were barely visible, and at that same
     strength on indigo they would look like a lens flare. */
  --glow-flame: .17;
  --glow-flame: light-dark(.17, .3);
  --glow-teal:  .15;
  --glow-teal:  light-dark(.15, .24);
  --glow-gold:  .13;
  --glow-gold:  light-dark(.13, .18);
}

/* Which half of every light-dark() applies. This is the whole switch. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Two glows over the band colour keep a dark section from reading as a flat
   rectangle. Layered gradients rather than a pseudo-element, so no section
   has to give up its own ::before to get them. */
.dark {
  background:
    radial-gradient(78% 62% at 8% -4%, rgba(232,70,28,var(--glow-flame)), transparent 68%),
    radial-gradient(70% 56% at 96% 104%, rgba(44,110,128,var(--glow-teal)), transparent 70%),
    radial-gradient(46% 40% at 62% 34%, rgba(244,169,58,var(--glow-gold)), transparent 72%),
    var(--band);
  color: var(--ivory);
}
.deep {
  background:
    radial-gradient(66% 56% at 90% 0%, rgba(244,169,58,var(--glow-gold)), transparent 68%),
    radial-gradient(78% 62% at 6% 100%, rgba(232,70,28,var(--glow-flame)), transparent 70%),
    var(--band-deep);
  color: var(--ivory);
}

/* The console is a back office, always dark by its own design, and must not
   inherit bands meant for the public pages. */
body.admin {
  --band: var(--navy); --band-2: var(--navy-2); --band-deep: var(--navy-3);
}

/* The grain is a paper texture; on a dark ground it reads as dust. Opacity
   is not a colour, so this is the one thing light-dark() cannot carry. */
:root[data-theme="dark"] body::after { opacity: .1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::after { opacity: .1; }
}

/* Components write `min-height: max(<design height>, var(--tap-min))`, so the
   thumb floor arrives by inheritance rather than by a later rule having to
   out-specify them. Load order stops mattering, which is what went wrong when
   this lived in a media query: the page stylesheet loads after the design
   system, so its 38px chips beat the 44px floor every time. */
@media (pointer: coarse) { :root { --tap-min: var(--tap); } }

/* Everything that paints itself dark declares it once, here. The flame focus
   ring disappears into navy, so it swaps to gold (7:1 on every dark ground
   used on this page), and outline buttons pick up ivory instead of ink. */
/* ── the dark surfaces ──
   Two lists, and they differ by exactly one entry, so they are written
   next to each other and any new dark surface must be added to both. That
   has now been the cause of three separate contrast bugs — the outline
   button on each new dark section, and the drawer's row numbers — every
   one of them a surface that was added to one list and not the other. */

.dark, .deep, .ph, .hero-c, .nav, .foot, .drawer {
  --focus: var(--gold); --focus-halo: rgba(217,164,65,.24);
  --ghost-fg: var(--ivory);
  --ghost-line: rgba(252,248,240,.34);
  --ghost-hov: var(--gold);
}

/* The same list minus .nav, which re-points the text accents at marigold.
   The nav stays out on purpose: its ground is a hardcoded near-black
   rather than a band, so flame is legible on it and the wordmark keeps the
   brand colour. */
.dark, .deep, .ph, .hero-c, .foot, .drawer, .rec-hero, .tp-hero {
  --acc:      #FFC24D;
  --acc-sm:   #FFC24D;
  --acc-gold: var(--gold-lt);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* clip, not hidden. Both stop a stray element widening the page, but
     overflow-x:hidden makes the body a scroll container — which computes
     overflow-y to auto and quietly kills position:sticky for everything
     inside it. The legal pages' contents list scrolled away with the page
     and looked simply broken; the cause was five hundred lines away, in a
     rule about horizontal overflow. clip clips without scrolling, so
     sticky descendants stick to the viewport as intended. Declared as
     hidden first for anything too old to know clip. */
  overflow-x: hidden;
  overflow-x: clip;
}
/* Deliberately empty of anything that moves the page. overflow:hidden here
   would clamp the scrolling element's scrollTop to zero the moment it is
   applied, which is exactly the bug it looks like it is preventing. The
   holding is done in app.js instead, by stopping Lenis and refusing wheel
   and touch outside the sheet. The class stays as a hook. */
html.is-locked { }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* Keyboard focus, everywhere, once. :focus-visible means a mouse click never
   paints a ring while a Tab press always does, so this costs the pointer user
   nothing and gives the keyboard user a way through the page. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Off-screen until it is tabbed to, then it becomes the first thing on the
   page — so a keyboard or screen-reader visitor is not walked through the
   whole navigation before reaching the biography. */
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  display: inline-flex; align-items: center; min-height: var(--tap);
  transform: translateY(-150%);
  padding: 14px 22px; border-radius: 999px;
  background: var(--flame-btn); color: #fff; text-decoration: none;
  font: 600 13.5px/1 var(--body); letter-spacing: .03em;
  box-shadow: var(--sh-2); transition: transform .25s var(--ease-out);
}
.skip:focus-visible { transform: translateY(0); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--flame); color: #fff; }

/* Paper grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 400;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.07;
  letter-spacing: -.018em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.2vw, 78px); font-variation-settings: "SOFT" 22, "WONK" 1; }
h2 { font-size: clamp(28px, 3.5vw, 50px); }
h3 { font-size: clamp(19px, 1.9vw, 26px); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- 3. Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 760px; }
.pad { padding-block: clamp(70px, 8.5vw, 148px); }
.pad-sm { padding-block: clamp(50px, 6vw, 96px); }
section { position: relative; }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4.5vw,72px); }
.split.wide-l { grid-template-columns: 1.15fr .85fr; }
.split.wide-r { grid-template-columns: .85fr 1.15fr; }

/* A short headline beside a long column of prose leaves a half-page hole
   under the headline. Pinning it means it travels down beside the paragraph
   it introduces — the reader keeps the subject in view while they read, and
   the hole closes on its own. Only worth doing when there is room to scroll
   past, so it is off on narrow screens where the columns stack. */
@media (min-width: 861px) {
  .split.pin > :first-child { position: sticky; top: calc(var(--nav-h) + 56px); align-self: start; }
}
.flex { display: flex; } .center { align-items: center; } .between { justify-content: space-between; }
.wrapf { flex-wrap: wrap; }
.gs { gap: 12px; } .gm { gap: 24px; } .gl { gap: 44px; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 52px; } .mt-xl { margin-top: 84px; }
.mb-m { margin-bottom: 28px; } .mb-l { margin-bottom: 52px; }
.tc { text-align: center; } .mxa { margin-inline: auto; }

/* Two glows over the band colour keep a dark section from reading as a
   flat rectangle. Layered gradients rather than a pseudo-element, so no
   section has to give up its own ::before to get them. */
.dark {
  background:
    radial-gradient(78% 62% at 8% -4%, rgba(232,70,28,.26), transparent 68%),
    radial-gradient(70% 56% at 96% 104%, rgba(44,110,128,.24), transparent 70%),
    radial-gradient(46% 40% at 62% 34%, rgba(217,164,65,.10), transparent 72%),
    var(--band);
  color: var(--ivory);
}
.deep {
  background:
    radial-gradient(66% 56% at 90% 0%, rgba(217,164,65,.20), transparent 68%),
    radial-gradient(78% 62% at 6% 100%, rgba(232,70,28,.22), transparent 70%),
    var(--band-deep);
  color: var(--ivory);
}
.sandbg { background: var(--bg-2); }
.dark h1,.dark h2,.dark h3,.deep h1,.deep h2,.deep h3 { color: var(--ivory); }

/* ---------- 4. Typographic bits ---------- */
.eyebrow {
  font: 600 11.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
  /* 11.5px uppercase is small type: it takes the deeper flame so it clears
     4.5:1 on ivory and on sand. The display flame stays for headlines. */
  color: var(--acc-sm); display: inline-flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.dark .eyebrow, .deep .eyebrow, .eyebrow.gold { color: var(--acc-gold); }

.lede { font-size: clamp(18px, 1.55vw, 22px); line-height: 1.62; color: var(--ink-soft); }
.dark .lede, .deep .lede { color: rgba(252,248,240,.74); }

.chapter-no { font: 600 11.5px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); }
.dark .chapter-no, .deep .chapter-no { color: rgba(252,248,240,.5); }

.chead { display: flex; align-items: baseline; gap: 22px; margin-bottom: 34px; }
.chead .rule { flex: 1; height: 1px; background: var(--line); }
.dark .chead .rule, .deep .chead .rule { background: var(--line-lt); }

.deva { font-family: var(--deva); font-weight: 600; }
.pull {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(24px, 3vw, 44px); line-height: 1.26; letter-spacing: -.02em;
}
.hl { color: var(--acc); }
.deep .hl, .dark .hl { color: var(--acc); }

/* ---------- 5. Buttons ---------- */
.btn {
  --bg: var(--flame-btn); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap);
  font: 600 13.5px/1 var(--body); letter-spacing: .03em;
  padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg); overflow: hidden;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--bg) 90%, transparent);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28), transparent 62%);
  transform: translateX(-110%); transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--bg) 88%, transparent); }
.btn:hover::before { transform: translateX(110%); }
.btn > * { position: relative; z-index: 1; }
.btn svg { flex: none; transition: transform .4s var(--ease-out); position: relative; z-index: 1; }
.btn:hover svg { transform: translateX(4px); }
/* While an enquiry is being sent, both send buttons are disabled so it
   cannot be sent twice. Without this they still lifted on hover and still
   looked pressable — a button saying it will do something it will not. */
.btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.btn[disabled]:hover { transform: none; box-shadow: none; }
.btn[disabled]:hover::before { transform: translateX(-110%); }
.btn.gold { --bg: var(--gold); --fg: #251B06; }
/* The outline button takes its ink from whatever ground it stands on, rather
   than from a list of section classes it has to be kept in sync with — the
   hero used to be missing from that list, so "Get in touch" was navy on navy
   and effectively invisible. --ghost-fg is set once per ground, above. */
/* The fallback is currentColor, not --ink. Any section that sets its own
   text colour gets a correct outline button for free — which is the whole
   problem this had three times running, once per new dark section added:
   the rule listed section class names, and a new section was never on the
   list, so the button rendered navy on navy and vanished. --ghost-fg is
   still honoured where a ground wants to override it. */
.btn.ghost {
  --bg: transparent; --fg: var(--ghost-fg, currentColor); box-shadow: none;
  border: 1.5px solid var(--ghost-line, var(--line));
}
.btn.ghost:hover {
  border-color: var(--ghost-hov, var(--flame-deep));
  color: var(--ghost-hov, var(--flame-deep));
  box-shadow: none;
}
.btn.sm { padding: 12px 20px; font-size: 12.5px; }
.btn.block { width: 100%; justify-content: center; padding-block: 18px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-sm); position: relative; padding-bottom: 4px;
  min-height: var(--tap);
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); transform-origin: left; }
.link-arrow svg { transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.dark .link-arrow, .deep .link-arrow { color: var(--acc-gold); }

/* ---------- 6. Preloader ---------- */
#preload {
  position: fixed; inset: 0; z-index: 1000; background: var(--band-2);
  display: grid; place-items: center; transition: opacity .7s var(--ease), visibility .7s;
}
#preload.done { opacity: 0; visibility: hidden; }
#preload .mark { width: 132px; color: var(--acc-gold); }
#preload .mark svg circle, #preload .mark svg path { opacity: 0; animation: pop .5s var(--ease-out) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
#preload .cap {
  margin-top: 26px; text-align: center; font-family: var(--deva); font-size: 20px;
  color: var(--acc-gold); opacity: 0; animation: fadeUp .8s .7s var(--ease-out) forwards;
}
#preload .bar { width: 148px; height: 2px; background: rgba(252,248,240,.15); margin: 20px auto 0; overflow: hidden; }
#preload .bar i { display: block; height: 100%; width: 0; background: var(--flame); animation: load 1.5s var(--ease) forwards; }
@keyframes load { to { width: 100%; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 7. Scroll progress ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 950;
  background: linear-gradient(90deg, var(--flame), var(--gold));
}

/* ---------- 8. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: var(--gut);
  background: linear-gradient(rgba(13,18,31,.94), rgba(13,18,31,.80));
  border-bottom: 1px solid rgba(252,248,240,.08);
  transition: background .45s var(--ease), height .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.scrolled { background: rgba(11,16,27,.94); height: 64px; box-shadow: 0 12px 34px -22px #000; }

.logo { display: flex; align-items: center; gap: 11px; }
.logo .mark { width: 38px; flex: none; transition: transform .5s var(--ease-out); }
.logo:hover .mark { transform: rotate(-4deg) scale(1.06); }
.logo .l1 {
  display: block; font: 800 19px/1 var(--body); letter-spacing: -.02em;
  text-transform: uppercase;
  /* The brand mark, not an accent: it stays flame wherever it stands. At
     19px/800 it counts as large text, and flame clears 3.26:1 even on the
     footer's band. */
  color: var(--flame);
}
.logo .l2 {
  display: block; font: 600 10px/1.4 var(--body); letter-spacing: .18em;
  text-transform: uppercase; color: rgba(252,248,240,.82); margin-top: 4px;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a {
  position: relative; font: 500 13px/1 var(--body); color: rgba(252,248,240,.76);
  padding: 10px 13px; border-radius: 999px; transition: color .3s, background .3s;
}
.nav-links > a:hover { color: var(--ivory); background: rgba(252,248,240,.08); }
.nav-links > a.on { color: var(--ivory); }
.nav-links > a.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--flame);
}
.nav .btn { margin-left: 10px; }

.burger {
  display: none; position: relative; width: 44px; height: 44px;
  border: 1px solid rgba(252,248,240,.2);
  border-radius: 50%; background: transparent; flex: none;
}
/* The bars are placed from the centre and moved only by transform, so the
   two halves of the X are guaranteed to meet. Stacking them with margins
   meant the closed spacing and the open translation had to agree by hand,
   and they did not once the device pixel ratio rounded the 1.6px bar — on
   a phone the X came out as a single diagonal stroke. */
.burger i {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; margin: -1px 0 0 -9px;
  background: var(--bg); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.burger i:nth-child(1) { transform: translateY(-6px); }
.burger i:nth-child(3) { transform: translateY(6px); }
.burger.open i:nth-child(1) { transform: rotate(45deg); }
.burger.open i:nth-child(2) { opacity: 0; }
.burger.open i:nth-child(3) { transform: rotate(-45deg); }

/* ---------- the menu, as a bottom sheet ----------

   It used to be a full-height panel hanging from the nav, with six links
   at ninety pixels each. That is 540px of nothing but labels, and the
   three things anybody actually opens the menu for — Take part, Call, the
   theme — ended up at 705px, 763px and 837px down. On a 390x844 phone the
   content overflowed its box by 108px; on a 390x668 phone, by 284px, so
   the theme control could not be reached at all without discovering that
   the panel scrolled.

   A sheet fixes both faults at once. It rises from the bottom, where the
   thumb already is, it is only as tall as it needs to be, and the actions
   sit at its bottom edge — the easiest place on a phone to reach rather
   than the hardest. */

.scrim {
  position: fixed; inset: 0; z-index: 870;
  background: rgba(8, 10, 18, .58);
  touch-action: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.scrim.open { opacity: 1; }

.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
  display: flex; flex-direction: column;
  /* Capped rather than fixed, so a short menu is a short sheet. dvh, not
     vh: on iOS the toolbar slides away and vh does not follow it, which is
     how a sheet ends up with its last row under the home indicator. */
  max-height: min(86dvh, 720px);
  background: var(--band-2); color: var(--ivory);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -18px 50px -12px rgba(0, 0, 0, .6);
  /* The home indicator on an iPhone, and the gesture bar on Android. */
  padding-bottom: max(env(safe-area-inset-bottom), 10px);
  transform: translateY(102%);
  transition: transform .42s var(--ease-out);
  overscroll-behavior: contain;
}
.drawer.open { transform: translateY(0); }

/* the handle: a real button, so it is reachable by keyboard too */
.drawer-grab {
  flex: none; width: 100%; border: 0; background: transparent;
  padding: 12px 0 8px; display: flex; justify-content: center;
  min-height: var(--tap);
}
.drawer-grab i {
  display: block; width: 42px; height: 4px; border-radius: 999px;
  background: rgba(252, 248, 240, .3);
  transition: background .3s var(--ease);
}
.drawer-grab:hover i, .drawer-grab:focus-visible i { background: rgba(252, 248, 240, .55); }

/* the links: one compact row each, not a two-line block */
.drawer-nav {
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px var(--gut) 6px;
  min-height: 0;                      /* so it, not the sheet, does the scrolling */
}
.drawer-nav a {
  display: flex; align-items: center; gap: 14px;
  min-height: max(54px, var(--tap));
  padding: 4px 0;
  border-bottom: 1px solid rgba(252, 248, 240, .1);
  color: var(--ivory);
}
.drawer-nav a:last-child { border-bottom: 0; }
.drawer-nav a .n {
  font: 600 10px/1 var(--body); letter-spacing: .18em;
  color: var(--acc); flex: none; width: 20px;
}
.drawer-nav a .t {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(19px, 5vw, 23px); line-height: 1.15;
  flex: 1 1 auto;
}
.drawer-nav a .chev { flex: none; opacity: .4; transition: transform .3s var(--ease); }
.drawer-nav a:active .chev { transform: translateX(3px); }

/* the actions, pinned at the thumb end */
.drawer-foot {
  flex: none;
  padding: 14px var(--gut) 4px;
  border-top: 1px solid rgba(252, 248, 240, .14);
  background: var(--band-2);
}
.drawer-acts { display: flex; gap: 10px; }
.drawer-acts .btn { flex: 1 1 0; justify-content: center; padding-inline: 14px; }
.drawer-acts .btn.ghost { flex: 0 0 auto; gap: 8px; }

/* ---------- 9. Jharokha frames & scenes ---------- */
svg.defs { position: absolute; width: 0; height: 0; }

.frame { position: relative; padding: 11px; background: var(--bg-3); clip-path: url(#jw-cusp); }
.frame.on-dark { background: rgba(252,248,240,.14); }
.frame > .in { display: block; clip-path: url(#jw-cusp); overflow: hidden; position: relative; }
.frame.plain { clip-path: url(#jw-arch); }
.frame.plain > .in { clip-path: url(#jw-arch); }
.frame.sq { clip-path: none; padding: 10px; border-radius: 3px; }
.frame.sq > .in { clip-path: none; border-radius: 2px; }

.scene { position: relative; display: block; width: 100%; background: var(--band-2); overflow: hidden; }
.scene svg { width: 100%; height: 100%; display: block; }
.scene::after {
  content: attr(data-cap); position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 54px 20px 16px;
  font: 500 10px/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(252,248,240,.78);
  background: linear-gradient(transparent, rgba(8,12,20,.86));
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scene[data-cap]:not([data-cap=""])::after { opacity: 1; transform: none; }
.r43 { aspect-ratio: 4/3; } .r11 { aspect-ratio: 1/1; } .r34 { aspect-ratio: 3/4; }
.r169 { aspect-ratio: 16/9; } .r32 { aspect-ratio: 3/2; } .r23 { aspect-ratio: 2/3; }

/* zoom on hover for interactive cards */
.zoom { overflow: hidden; }
.zoom .scene svg { transition: transform 1.1s var(--ease-out); }
.zoom:hover .scene svg { transform: scale(1.07); }

/* ---------- 10. Motifs & friezes ---------- */
.motif { color: var(--acc); }
.motif svg { width: 100%; height: auto; }

.jband {
  height: 44px; background-repeat: repeat-x; background-position: center bottom;
  background-size: auto 44px; background-color: var(--bg);
  border-bottom: 2px solid rgba(232,70,28,.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44' viewBox='0 0 40 44'%3E%3Cpath d='M9 44V20c0-8.6 4.9-13.4 11-13.4S31 11.4 31 20v24z' fill='%23E8461C'/%3E%3Cpath d='M20 13.8c2.8 0 5 2.2 5 5v6.2H15v-6.2c0-2.8 2.2-5 5-5z' fill='%23FCF8F0'/%3E%3Ccircle cx='16' cy='32' r='1.8' fill='%23FCF8F0'/%3E%3Ccircle cx='24' cy='32' r='1.8' fill='%23FCF8F0'/%3E%3C/svg%3E");
}
.jband.on-sand { background-color: var(--bg-2); }
.blockprint {
  height: 28px; background-repeat: repeat-x; background-size: auto 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='28' viewBox='0 0 44 28'%3E%3Cg fill='%23B92B2C'%3E%3Cpath d='M22 2l5 6.6c2.8 3.7 4.6 7.4 4.6 11.1V26H12.4v-6.3c0-3.7 1.8-7.4 4.6-11.1z'/%3E%3Ccircle cx='4' cy='22' r='2.8'/%3E%3Ccircle cx='40' cy='22' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Jaali — our reading of "glassmorphism" */
.jaali {
  position: relative; background: rgba(252,248,240,.055);
  border: 1px solid rgba(252,248,240,.14); overflow: hidden;
}
.jaali::before {
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-size: 48px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23FCF8F0' stroke-width='1.1'%3E%3Cpath d='M24 1l23 23-23 23L1 24z'/%3E%3Ccircle cx='24' cy='24' r='7.6'/%3E%3C/g%3E%3C/svg%3E");
}
.jaali > * { position: relative; }

/* ---------- 11. Cards ---------- */
.card {
  position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 30px 28px 32px; box-shadow: var(--sh-1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--flame), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: rgba(232,70,28,.3); }
.card:hover::before { transform: scaleX(1); }
.card .num { display: block; font: 600 11px/1 var(--body); letter-spacing: .2em; color: var(--acc); margin-bottom: 16px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 15.5px; }
.dark .card, .deep .card { background: rgba(252,248,240,.05); border-color: var(--line-lt); color: var(--ivory); box-shadow: none; }
.dark .card p, .deep .card p { color: rgba(252,248,240,.66); }

.itile {
  width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(150deg, rgba(232,70,28,.15), rgba(217,164,65,.18));
  clip-path: url(#jw-arch); transition: transform .5s var(--ease-out);
}
.card:hover .itile { transform: translateY(-3px) scale(1.06); }
.itile svg { width: 23px; height: 23px; fill: none; stroke: var(--flame-deep); stroke-width: 1.6; }
.dark .itile, .deep .itile { background: rgba(252,248,240,.09); }
.dark .itile svg, .deep .itile svg { stroke: var(--gold); }

/* ---------- 12. Reveal animations ---------- */
[data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
[data-rv="l"] { transform: translateX(-34px); }
[data-rv="r"] { transform: translateX(34px); }
[data-rv="s"] { transform: scale(.94); }
[data-rv].in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-stagger].in > * { opacity: 1; transform: none; }

/* headline mask reveal */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease-out); }
.in .reveal-line > span, .reveal-line.in > span { transform: none; }

/* ---------- 13. Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--ivory);
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(35,64,107,.7), transparent 58%),
    radial-gradient(100% 90% at 94% 12%, rgba(232,70,28,.34), transparent 60%),
    var(--band-2);
  padding-block: clamp(50px, 6vw, 92px) 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-size: 48px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23FCF8F0' stroke-width='1'%3E%3Cpath d='M24 1l23 23-23 23L1 24z'/%3E%3Ccircle cx='24' cy='24' r='7.6'/%3E%3C/g%3E%3C/svg%3E");
}
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(28px,4vw,64px); align-items: end; }
.hero h1 { color: var(--ivory); }
.hero h1 em { font-style: italic; color: var(--acc); }
.hero-deva { font-family: var(--deva); font-size: clamp(26px,3vw,42px); font-weight: 600; color: var(--acc-gold); line-height: 1.4; }
.hero-strip {
  margin-top: clamp(34px,4vw,64px); border-top: 1px solid rgba(252,248,240,.13);
  padding: 24px 0 32px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
}
.floatart { animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

.scrollcue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font: 600 10.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(252,248,240,.72);
}
.scrollcue i { display: block; width: 1px; height: 34px; background: linear-gradient(rgba(252,248,240,.6), transparent); animation: drop 1.9s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 14. Marquee ---------- */
.marquee { overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line-lt); background: var(--band-deep); }
.marquee .track { display: flex; gap: 0; width: max-content; animation: slide 42s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee .it {
  display: inline-flex; align-items: center; gap: 14px; padding-inline: 30px;
  font-family: var(--display); font-size: 21px; color: rgba(252,248,240,.62); white-space: nowrap;
}
.marquee .it b { color: var(--acc-gold); font-weight: 600; }
.marquee .it::after { content: "✦"; color: var(--acc); font-size: 12px; margin-left: 24px; }

/* ---------- 15. Counters ---------- */
.stat .n {
  font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(36px, 4.4vw, 62px); color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.dark .stat .n, .deep .stat .n { color: var(--acc-gold); }
.stat .k { font: 500 11px/1.5 var(--body); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }
.dark .stat .k, .deep .stat .k { color: rgba(252,248,240,.56); }

/* crowd canvas */
.crowdwrap { position: relative; height: 210px; overflow: hidden; }
.crowdwrap svg { width: 100%; height: 100%; }
.crowdwrap circle { opacity: 0; }

/* ---------- 16. Credential pills ---------- */
.creds { display: flex; flex-wrap: wrap; gap: 9px; }
.cred {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid rgba(252,248,240,.2); border-radius: 999px;
  font: 500 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(252,248,240,.84); transition: border-color .35s, color .35s, transform .35s var(--ease-out);
}
.cred::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.cred:hover { border-color: var(--gold); color: var(--acc-gold); transform: translateY(-2px); }
.creds.light .cred { border-color: var(--line); color: var(--ink-soft); }
.creds.light .cred:hover { border-color: var(--flame); color: var(--acc); }

/* ---------- 17. Step / journey ---------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); }
.step { position: relative; padding-right: 22px; }
.step::before {
  content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 5px, transparent 5px 11px);
}
.step i {
  position: relative; display: grid; place-items: center; width: 29px; height: 29px;
  border-radius: 50%; background: var(--bg); border: 1.5px solid var(--flame);
  font: 700 11.5px/1 var(--body); font-style: normal; color: var(--acc);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.step:hover i { background: var(--flame); color: #fff; transform: scale(1.14); }
.step h3 { font-size: 19px; margin: 20px 0 8px; }
.step p { font-size: 14px; color: var(--ink-soft); }

/* ---------- 18. Records: filters, grid, modal ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 11px 19px; border: 1px solid var(--line); border-radius: 999px;
  font: 600 12px/1 var(--body); color: var(--ink-soft); background: transparent;
  transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--flame); color: var(--acc); }
.chip.on { background: var(--band); border-color: var(--band); color: var(--ivory); }

.rec {
  display: block; text-align: left; width: 100%; padding: 0; border: 1px solid var(--line);
  background: var(--bg); border-radius: 4px; overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), opacity .4s;
}
.rec:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.rec .in { display: block; padding: 22px 22px 24px; }
.rec .cat { font: 600 10px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.rec h3 { font-size: 20px; line-height: 1.22; margin: 12px 0 10px; }
.rec p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 16px; }
.rec .row { display: flex;
  display: flex; justify-content: space-between; gap: 12px; padding-top: 14px;
  border-top: 1px solid var(--line); font: 500 12px/1 var(--body); color: var(--ink-faint);
}
.rec .row b { color: var(--ink); font-weight: 600; }
.rec.hide { display: none; }

.modal {
  position: fixed; inset: 0; z-index: 980; display: grid; place-items: center;
  padding: 24px; background: rgba(8,12,20,.72); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.modal.open { opacity: 1; visibility: visible; }
.modal .sheet {
  position: relative; width: min(940px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: 5px; box-shadow: var(--sh-3);
  transform: translateY(26px) scale(.98); transition: transform .5s var(--ease-out);
}
.modal.open .sheet { transform: none; }
.modal .x {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(8,12,20,.6); color: #fff; display: grid; place-items: center;
  transition: background .3s, transform .3s var(--ease-out);
}
.modal .x:hover { background: var(--flame); transform: rotate(90deg); }
.modal .body { padding: 34px clamp(24px,4vw,46px) 42px; }
.modal .meta { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); margin: 26px 0; }
.modal .meta div { background: var(--bg); padding: 17px 15px; }
.modal .meta .a { font: 600 9.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.modal .meta .b { font-family: var(--display); font-size: 21px; margin-top: 8px; }

/* ---------- 19. Stories slider ---------- */
.slider { position: relative; overflow: hidden; }
.slides { display: flex; transition: transform .8s var(--ease-out); }
.slide { min-width: 100%; padding-inline: 4px; }
.slide .q { font-family: var(--display); font-size: clamp(21px,2.4vw,33px); line-height: 1.35; font-style: italic; }
.slider-nav { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(252,248,240,.25); padding: 0; transition: all .4s var(--ease); }
.dot.on { background: var(--flame); width: 30px; border-radius: 999px; }
.sarrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(252,248,240,.24);
  background: transparent; color: var(--ivory); display: grid; place-items: center;
  transition: all .35s var(--ease);
}
.sarrow:hover { background: var(--flame); border-color: var(--flame); }

/* ---------- 20. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; gap: 20px;
  justify-content: space-between; align-items: center;
  font-family: var(--display); font-size: clamp(18px,1.8vw,22px); font-weight: 600;
  transition: color .3s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--acc); }
.acc summary i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-style: normal; color: var(--acc);
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.acc details[open] summary i { transform: rotate(45deg); background: var(--flame); color: #fff; border-color: var(--flame); }
.acc .ans { padding: 0 0 24px; color: var(--ink-soft); font-size: 15.5px; max-width: 74ch; }

/* ---------- 21. Forms ---------- */
.field { margin-bottom: 20px; }
.field label { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .17em; text-transform: uppercase; color: rgba(252,248,240,.7); margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; font: 400 15px/1.45 var(--body); border-radius: 3px;
  background: rgba(8,12,20,.5); border: 1px solid rgba(252,248,240,.22); color: var(--ivory);
  transition: border-color .35s, box-shadow .35s, background .35s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--flame); background: rgba(8,12,20,.7);
  box-shadow: 0 0 0 3px rgba(232,70,28,.18);
}
.field ::placeholder { color: rgba(252,248,240,.4); }
.field textarea { min-height: 120px; resize: vertical; }
.field.err input, .field.err textarea, .field.err select { border-color: #FF7A5C; box-shadow: 0 0 0 3px rgba(255,122,92,.16); }
.field .msg { font-size: 12px; color: #FFAF9B; margin-top: 7px; display: none; }
.field.err .msg { display: block; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pathpick { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pathpick button {
  display: flex; align-items: center; gap: 11px; text-align: left; padding: 15px 16px;
  border: 1px solid rgba(252,248,240,.2); background: transparent; color: rgba(252,248,240,.78);
  font-size: 13.5px; border-radius: 3px; transition: all .35s var(--ease);
}
.pathpick button::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(252,248,240,.4); transition: all .3s;
}
.pathpick button:hover { border-color: rgba(252,248,240,.42); color: var(--ivory); }
.pathpick button.on { border-color: var(--flame); background: rgba(232,70,28,.12); color: var(--ivory); }
.pathpick button.on::before { border-color: var(--flame); background: var(--flame); box-shadow: inset 0 0 0 3.5px var(--navy-2); }

.formsteps { display: flex; gap: 8px; margin-bottom: 30px; }
.formsteps i {
  flex: 1; height: 3px; border-radius: 3px; background: rgba(252,248,240,.16);
  transition: background .5s var(--ease);
}
.formsteps i.on { background: var(--flame); }
.fstep { display: none; }
.fstep.on { display: block; animation: fadeUp .55s var(--ease-out); }
.success { display: none; text-align: center; padding: 30px 0; }
.success.on { display: block; animation: fadeUp .6s var(--ease-out); }
.success .tick {
  width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), var(--ember)); display: grid; place-items: center;
}

/* ---------- 22. Footer ---------- */
.foot { background: var(--band-deep); color: rgba(252,248,240,.72); }
.foot h4 { font: 600 11px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--acc-gold); margin-bottom: 18px; }
.foot a {
  display: flex; align-items: center; padding: 6px 0; font-size: 14.5px;
  min-height: max(36px, var(--tap-min));
  color: rgba(252,248,240,.78); transition: color .3s, transform .3s var(--ease-out);
}
.foot a:hover { color: var(--acc); transform: translateX(3px); }
.foot .where { padding: 6px 0; font-size: 14.5px; color: rgba(252,248,240,.78); margin: 0; }
.foot .bottom {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(252,248,240,.1);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: rgba(252,248,240,.6);
}
/* Two small links between two long spans. They need to stay hittable when
   the row wraps onto three lines on a phone, which is why they carry their
   own height rather than inheriting the 13px line beside them. */
.foot-legal { display: flex; gap: 22px; align-items: center; }
.foot-legal a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min); padding: 2px 0;
  font-size: 13px; color: rgba(252,248,240,.72);
  text-decoration: none; border-bottom: 1px solid rgba(252,248,240,.24);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-legal a:hover, .foot-legal a:focus-visible {
  color: var(--ivory); border-color: var(--acc-gold);
}

/* ---------- 23. Demo banner + back to top ---------- */
.demobar {
  background: #10151F; color: rgba(255,255,255,.62); position: relative; z-index: 901;
  font: 500 11px/1.4 var(--body); letter-spacing: .05em;
  padding: 9px var(--gut); display: flex; gap: 16px; align-items: center; justify-content: center;
}
.demobar b { color: var(--acc); letter-spacing: .16em; text-transform: uppercase; font-size: 10px; }
.demobar button { background: none; border: 0; color: rgba(255,255,255,.5); font-size: 15px; line-height: 1; padding: 4px; }
.demobar.hide { display: none; }

#totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 700; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: var(--flame); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 26px -12px rgba(232,70,28,.9);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .45s var(--ease-out);
}
#totop.on { opacity: 1; visibility: visible; transform: none; }
#totop:hover { background: var(--flame-deep); transform: translateY(-3px); }

/* ---------- 24. Responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .modal .meta { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
  /* The primary call to action stays on screen. It used to be hidden below
     900px, which left a phone with no route to the one page the whole site
     funnels toward — the drawer only offered a phone number. Room is made by
     dropping the wordmark's second line, not by dropping the button. */
  .nav .btn { padding: 11px 16px; font-size: 12px; margin-left: 0; }
  .nav .btn svg { display: none; }
  .hero-grid, .split, .split.wide-l, .split.wide-r { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-grid > .hero-photo { max-width: 400px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .g2, .g3, .g4, .two, .pathpick { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-right: 0; }
  .chead { flex-wrap: wrap; gap: 12px; }
  .foot .grid { grid-template-columns: 1fr !important; }
  .marquee .it { font-size: 17px; padding-inline: 20px; }
}

/* ---------- 25. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .crowdwrap circle { opacity: 1 !important; }
}

/* ---------- 26. Mobile collapse for page-level grids ----------
   Page <style> blocks load after this sheet, so these selectors carry a
   `body` prefix to win on specificity rather than on order. */
@media (max-width: 1080px) {
  body .svc { grid-template-columns: repeat(3, minmax(0,1fr)); }
  body .values, body .crafts, body .doors, body .team, body .vol,
  body .why, body .partners { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .essay { grid-template-columns: 1fr; gap: 34px; }
  body .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  body .toc a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  body .toc a.on { border-color: var(--flame); }
}
@media (max-width: 900px) {
  body .stage { grid-template-columns: 1fr; gap: 20px; }
  body .founder, body .vm, body .ledger { grid-template-columns: 1fr; }
  body .raj { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .raj > *:nth-child(odd) { transform: none; }
  body .founder .frame { max-width: 260px; }
  body [data-rv="l"], body [data-rv="r"] { transform: translateY(28px); }
  body .modal .meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  body .svc, body .values, body .crafts, body .doors, body .team,
  body .vol, body .why, body .raj, body .aud { grid-template-columns: 1fr; }
  body .partners { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body .modal .meta { grid-template-columns: 1fr; }
  body .hstats { gap: 24px; }
  body .fbar { position: static; }
  body .demobar { flex-wrap: wrap; text-align: center; font-size: 10.5px; }
}
/* belt and braces: nothing may create a horizontal scrollbar */
html { overflow-x: clip; }

/* upcoming cards sit on a dark ground in chapter seven */
.deep #upcoming .card { background: rgba(252,248,240,.05); border-color: var(--line-lt); color: var(--ivory); }
.deep #upcoming .card h3 { color: var(--ivory); }
.deep #upcoming .card p { color: rgba(252,248,240,.66); }
.deep #upcoming .card .row { border-top-color: var(--line-lt) !important; color: rgba(252,248,240,.5) !important; }

/* ═══════════════════════════════════════════════════════════
   27. MOTION SYSTEM
   Everything below activates only when motion.js boots
   (html.has-motion). html.no-motion is the honest static site.
   ═══════════════════════════════════════════════════════════ */

/* GSAP owns the entrance choreography, so the CSS pre-hide is
   scoped to the no-JS / no-motion case only. */
.has-motion [data-anim],
.has-motion [data-stag] > * { will-change: transform, opacity; }
.no-motion [data-anim], .no-motion [data-stag] > * { opacity: 1 !important; transform: none !important; }
.sp-line { overflow: hidden; }
/* Headlines default to VISIBLE and are hidden only once motion.js has
   confirmed it is going to animate them (it sets .has-motion on <html>).
   The old default was opacity:0 with .no-motion turning it back on — which
   meant any script that threw before that class was set left every headline
   on the page permanently blank. A missing vendor plugin should cost an
   animation, not the words. */
[data-split] { opacity: 1; }
.has-motion [data-split] { opacity: 0; }

/* ---------- custom cursor ---------- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .rec,
.has-cursor .moment, .has-cursor .chip { cursor: none; }
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 9999; pointer-events: none;
  visibility: hidden; opacity: 0; mix-blend-mode: difference; }
.cursor i { position: absolute; top: 0; left: 0; display: block; border-radius: 50%;
  transform: translate(-50%, -50%); }
.cursor .dot { width: 7px; height: 7px; background: #FCF8F0; }
.cursor .ring { width: 40px; height: 40px; border: 1px solid rgba(252,248,240,.75);
  transition: width .4s var(--ease-out), height .4s var(--ease-out),
              border-color .4s, background .4s; }
.cursor.is-active .ring { width: 74px; height: 74px; background: rgba(252,248,240,.14);
  border-color: transparent; }
.cursor.is-down .ring { width: 30px; height: 30px; }
.cursor .lbl { position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
  font: 600 9.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: #FCF8F0; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.cursor.has-label .lbl { opacity: 1; }

/* ---------- tilt + glare ---------- */
.tilt { transform-style: preserve-3d; perspective: 900px; position: relative; }
.tilt .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.22), transparent 62%); }
.dark .tilt .glare, .deep .tilt .glare {
  background: radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),
    rgba(232,70,28,.24), transparent 62%); }

/* ---------- page-transition veil ---------- */
.veil { position: fixed; inset: 0; z-index: 9990; display: grid;
  grid-template-columns: repeat(5, 1fr); pointer-events: none; }
.veil.idle { display: none; }
.veil i { display: block; background: var(--band-2); height: 100%; }
.veil i:nth-child(2) { background: #16203a; }
.veil i:nth-child(4) { background: #16203a; }

/* ---------- chapter rail ---------- */
.chaprail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 700;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.chaprail button { display: flex; align-items: center; gap: 10px; background: none; border: 0;
  padding: 6px 0; color: var(--ink-faint); }
.chaprail em { font: 600 10.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
  font-style: normal; opacity: 0; transform: translateX(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.chaprail .tick { display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .3; transition: all .45s var(--ease); }
.chaprail button:hover em, .chaprail button.on em { opacity: 1; transform: none; }
.chaprail button.on { color: var(--acc-sm); }
.chaprail button.on .tick { width: 40px; opacity: 1; }
.chaprail button:hover .tick { opacity: .7; }

/* ---------- hero particle field ---------- */
#field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; }

/* ---------- horizontal pinned rail ---------- */
[data-hscroll] { overflow: hidden; }
.hs-track { display: flex; gap: 26px; width: max-content; padding-inline: var(--gut); }
.hs-track > * { width: clamp(280px, 26vw, 380px); flex: none; }
.no-motion [data-hscroll] { overflow-x: auto; }
.no-motion .hs-track { padding-bottom: 20px; }

/* ---------- aurora / mesh background ----------
   One composited layer, not three. Under smooth scroll every frame is a scroll
   frame, so anything that repaints full-viewport runs at 60Hz — three stacked
   gradient layers (and, before that, an animated blur) dominated the budget. */
.aurora { position: absolute; inset: -18%; pointer-events: none; z-index: 0; opacity: .9;
  will-change: transform; animation: drift 30s ease-in-out infinite alternate;
  background:
    radial-gradient(34% 38% at 26% 28%, rgba(232,70,28,.30), transparent 70%),
    radial-gradient(30% 34% at 76% 34%, rgba(35,64,107,.42), transparent 72%),
    radial-gradient(28% 32% at 52% 74%, rgba(217,164,65,.22), transparent 72%); }
.aurora span { display: none; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3.5%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(.96); }
}
.no-motion .aurora { animation: none; }

/* ---------- gradient + outline typography ---------- */
.grad-text { background: linear-gradient(96deg, var(--flame), var(--gold) 62%, var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.outline-text { color: transparent; -webkit-text-stroke: 1.4px var(--flame); }

/* ---------- shimmer / skeleton ---------- */
.shimmer { position: relative; overflow: hidden; background: rgba(252,248,240,.06); }
.shimmer::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(252,248,240,.14), transparent 62%);
  transform: translateX(-100%); animation: sweep 1.7s infinite; }
@keyframes sweep { to { transform: translateX(100%); } }

@media (max-width: 900px) {
  .chaprail { display: none; }
  .cursor { display: none; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: auto; }
}

/* ---------- reading progress ring (essay pages) ---------- */
.readring { position: fixed; left: 26px; bottom: 26px; z-index: 700; width: 54px; height: 54px;
  display: grid; place-items: center; }
.readring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.readring circle { fill: none; stroke: rgba(25,21,16,.14); stroke-width: 2.4; }
.readring circle.p { stroke: var(--flame); stroke-linecap: round; }
.readring em { font: 600 10px/1 var(--body); font-style: normal; letter-spacing: .06em;
  color: var(--ink-soft); }

/* ---------- arrival burst (form success) ---------- */
.burst { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }
.burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; display: block; }

@media (max-width: 900px) { .readring { display: none; } }

/* Below this the wordmark is just the mark and "JAIPUR": the second line
   costs about a hundred pixels and the button needs them more. */
@media (max-width: 560px) {
  .logo .l2 { display: none; }
  .logo .l1 { font-size: 17px; }
  .nav .btn { padding: 11px 13px; font-size: 11.5px; letter-spacing: .02em; }
}

/* ---------- 28. Cross-device hardening ----------
   iOS Safari, Android Chrome, notched phones and trackpad-less desktops. */

/* iOS: 100vh includes the address bar, so full-height blocks overflow.
   svh is the small viewport height and is what phones actually show. */
@supports (height: 100svh) {
  .hero, .hsec { min-height: min(88svh, 880px); }
}

/* Notches and rounded corners */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.foot { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
#totop { bottom: max(22px, env(safe-area-inset-bottom)); }

/* iOS zooms the page when a font under 16px is focused */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
}

/* Touch devices: no hover states, bigger targets, no custom cursor */
@media (hover: none) {
  .cursor { display: none !important; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: auto !important; }
  .tilt .glare { display: none; }
  .gal-tile .gal-cap { opacity: 1; transform: none; }   /* captions always readable */
}

/* A finger is about 9mm across; a mouse pointer is one pixel. Anything a
   thumb has to land on grows to 44px on a touch screen — via --tap-min, so
   each component keeps its own designed height on a desktop. */
.nav-links a, .foot-links a, .foot nav a, .logo, .skip,
.lb-close, .lb-prev, .lb-next, .burger, .chip, .link-arrow {
  min-height: max(var(--own-h, 0px), var(--tap-min));
}
@media (pointer: coarse) {
  .nav-links a, .foot-links a, .foot nav a { display: flex; align-items: center; }
  .lb-close, .lb-prev, .lb-next, .burger { min-width: var(--tap); }
}

/* Momentum scrolling for the horizontal rails on iOS */
.rail-scroll, .hs-track, .strip { -webkit-overflow-scrolling: touch; }

/* Windows/Android: keep long record titles from forcing a scrollbar */
h1, h2, h3, .rec-b h3 { overflow-wrap: break-word; }

/* iOS inflates text in landscape unless told not to. It is the reason a
   page looks right in portrait and enormous when the phone is turned. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* The grey box a tap leaves behind on iOS and Android. Removing it is only
   honest if something replaces it, so everything tappable dims instead. */
a, button, .btn, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  /* also drops the 300ms wait a browser keeps in case of a double-tap */
  touch-action: manipulation;
}
@media (hover: none) {
  a:active, button:active, .btn:active,
  summary:active, [role="button"]:active { opacity: .68; }
  /* the press has to be felt immediately, so this one is not eased */
  .btn:active { transform: translateY(1px); transition-duration: 0s; }
}

/* Scrolling a rail to its end must not start scrolling the page behind it,
   and must not trigger Chrome's pull-to-refresh from inside one. */
.rail-scroll, .hs-track, .strip, .ev-rail, .tally, .drawer-nav {
  overscroll-behavior-x: contain;
}

/* A sticky element measured in vh is wrong on any phone whose toolbar
   moves, which is all of them now. */
@supports (height: 100dvh) {
  .lightbox, .modal, #preload { min-height: 100dvh; }
}

/* Android Chrome renders a backdrop-filter on a scrolling ancestor by
   repainting it every frame. On the nav, which is sticky and always on
   screen, that is the single most expensive thing on the page. */
@media (max-width: 900px) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Print — a portfolio gets printed more often than people expect */
@media print {
  .nav, .chaprail, .cursor, .veil, #totop, .gal-pager, .gal-bar, #preload { display: none !important; }
  body { background: #fff; color: #000; }
  .dark, .deep, .ph { background: #fff !important; color: #000 !important; }
  .dark h1,.dark h2,.dark h3,.deep h1,.deep h2,.deep h3,.ph h1 { color: #000 !important; }
  .rec-n b { color: #000 !important; }
  a { text-decoration: underline; }
}

/* ---------- 29. The theme control ----------
   It lives in the nav and in the drawer, both of which are dark in either
   theme, so it needs one styling context rather than two. */
.theme {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  background: rgba(252,248,240,.07);
  border: 1px solid rgba(252,248,240,.14);
  border-radius: 999px;
  flex: none;
}
.th-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px;
  min-width: var(--tap-min, 0px); min-height: var(--tap-min, 0px);
  padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: rgba(252,248,240,.62);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.th-b svg { width: 16px; height: 16px; }
.th-b:hover { color: var(--ivory); background: rgba(252,248,240,.1); }
/* aria-pressed is the state, so the style hangs off it rather than off a
   class the script would have to keep in step with the attribute. */
.th-b[aria-pressed="true"] {
  background: var(--gold); color: #2A1206;
}
.th-b[aria-pressed="true"]:hover { background: var(--gold-lt); color: #2A1206; }

/* Below the burger breakpoint the nav has no room to spare — the wordmark
   and the one call to action already fill it — so the control moves into
   the drawer, where it can carry its label. */
@media (max-width: 900px) { .theme.in-nav { display: none; } }
@media (min-width: 901px) { .drawer-theme { display: none; } }

.drawer-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(252,248,240,.1);
}
.drawer-theme .lbl {
  font: 600 10.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(252,248,240,.5);
}
.theme.in-drawer .th-b { width: 44px; height: 40px; }
.theme.in-drawer .th-b svg { width: 18px; height: 18px; }

/* Used by the control and by the admin console for labels that exist for a
   screen reader and nothing else. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}