/* ============ reset ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img{max-width:100%;height:auto;display:block}
button,input{font-family:inherit}

/* ============ tokens ============ */

/* --ink-3 is the muted ink, and every one of its three dozen uses is small
   text — 11.5px card datelines, the 12.5px .meta line, the masthead
   datestamp. At its drawn value of #8C84A5 that measured 3.52:1 on white,
   under the 4.5:1 WCAG AA asks of text this size, and an accessibility audit
   flagged the card datelines for it. #78718E is the same hue and chroma
   walked down in linear light until it measures 4.61:1 — still clearly the
   quiet third tone against --ink (#292244) and --ink-2 (#5B5379), just
   readable. Only ever used on paper: the dark band and footer re-state their
   own muted tones as rgba over --deep and do not touch this. */
:root{
  --paper:#FDFAF4; --surface:#FFFFFF;
  --ink:#292244; --ink-2:#5B5379; --ink-3:#78718E;
  --line:#E7E1F2; --line-2:#D3CBE8;
  --mint:#2FB89A; --sky:#3C99E4; --lilac:#7B5EE4; --butter:#D9930F; --coral:#E85C46; --lime:#5FA82B;
  --t-mint:#E2F8F1; --t-sky:#E3F1FD; --t-lilac:#EEE9FE; --t-butter:#FEF2DA; --t-coral:#FEEAE5; --t-lime:#EEF8E1;
  --deep:#241D3C; --deep-ink:#EFEAFB;
  --on-bg:#292244; --on-fg:#FDFAF4;
  --sh-sm:0 1px 2px rgba(41,34,68,.05), 0 4px 14px -8px rgba(41,34,68,.18);
  --sh-md:0 2px 4px rgba(41,34,68,.05), 0 16px 38px -18px rgba(41,34,68,.28);
  --sh-lg:0 4px 8px rgba(41,34,68,.06), 0 32px 70px -28px rgba(41,34,68,.38);
  --r:16px;
}


/* ============ font fallback metrics ============ */
/*
 * Sized to match Inter, so the swap from fallback to webfont does not change
 * a single line box. Without it the gallery reflows the moment Inter lands:
 * captions live in a `columns` layout, where one caption growing by a line
 * pushes every tile below it and shifts the columns after it too.
 */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  ascent-override:90.2%;
  descent-override:22.48%;
  line-gap-override:0%;
  size-adjust:107.4%;
}

/* ============ base ============ */
html{background:var(--paper);color-scheme:light}

/* ============ scrollbar ============ */
/* Standard properties — Chrome 121+, Firefox, Safari 18.2+. Where these are
   honoured the ::-webkit- pseudo-elements below are ignored outright, so the
   two blocks are alternatives, not layers. Older WebKit drops the invalid
   scrollbar-color and picks up the pseudo-elements instead. */
html{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--lilac) 55%,var(--line)) var(--paper);
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--lilac) 55%,var(--line));
  border-radius:999px;
  border:3px solid var(--paper);   /* insets the thumb off the track edges */
}
::-webkit-scrollbar-thumb:hover{background:var(--lilac)}
::-webkit-scrollbar-corner{background:var(--paper)}
body{
  background:transparent;color:var(--ink);
  font-family:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* one measure for the whole page: identical to .hero so every section edge
   lines up with the hero card's edge */
.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(18px,3vw,52px)}
a{color:inherit;text-decoration:none}

.serif,h1,h2,h3,h4,.wordmark{
  font-family:"Fraunces","Georgia",serif;font-variation-settings:"opsz" 40;
  letter-spacing:-.015em;line-height:1.16;font-weight:700;
}
body.lang-hi .serif,body.lang-hi h1,body.lang-hi h2,body.lang-hi h3,body.lang-hi h4,body.lang-hi .wordmark{
  font-family:"Tiro Devanagari Hindi","Fraunces",Georgia,serif;letter-spacing:0;line-height:1.42;font-weight:400;
}
.kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.kicker::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--k,var(--lilac))}
body.lang-hi .kicker{letter-spacing:.06em;text-transform:none;font-size:13px}

.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
body.lang-hi .chip{letter-spacing:.03em;text-transform:none;font-size:12.5px}

.meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-3)}
.meta .cat{font-weight:700;color:var(--c,var(--lilac))}
.meta .sep{opacity:.5}

.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  background:var(--on-bg);color:var(--on-fg);padding:13px 24px;border-radius:999px;
  font-size:14px;font-weight:600;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,filter .22s;box-shadow:var(--sh-sm);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md);filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--lilac);color:var(--lilac);box-shadow:none}
.btn.sm{padding:10px 18px;font-size:13px}
.btn .arw{transition:transform .22s}
.btn:hover .arw{transform:translateX(3px)}

/* ============ site header · morphs C -> B -> E on scroll ============ */
html{scroll-padding-top:96px}

.site-head{
  position:fixed;top:0;left:0;right:0;z-index:40;
  --p:0;
  --photoW:calc(190px + (46px - 190px) * var(--p));
  --photoH:calc(228px + (46px - 228px) * var(--p));
  --photoR:calc(20px + (23px - 20px) * var(--p));
  --nameS:calc(50px + (19px - 50px) * var(--p));
  --padY:calc(22px + (14px - 22px) * var(--p));
  --gapX:calc(30px + (13px - 30px) * var(--p));
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.site-head.compact{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(41,34,68,.6)}

.hd-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;filter:blur(62px);
  opacity:calc(.5 * (1 - var(--p)));
  background:
    radial-gradient(closest-side,var(--lilac),transparent) 10% 55%/40% 92% no-repeat,
    radial-gradient(closest-side,var(--mint),transparent) 50% 18%/40% 88% no-repeat,
    radial-gradient(closest-side,var(--butter),transparent) 90% 60%/40% 92% no-repeat;
}

/* thin strip: date + socials — folds away first */
.hd-top{
  position:relative;z-index:1;overflow:hidden;
  height:calc(40px * (1 - var(--p)));
  opacity:calc(1 - var(--p) * 2);
}
.hd-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px}
#datestamp{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.socials{display:flex;gap:6px}
.socials a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);transition:background .2s,color .2s,transform .2s}
.socials a:hover{transform:translateY(-2px)}
.socials a:nth-child(1):hover{background:var(--t-coral);color:var(--coral)}
.socials a:nth-child(2):hover{background:var(--t-lilac);color:var(--lilac)}
.socials a:nth-child(3):hover{background:var(--t-sky);color:var(--sky)}
.socials a:nth-child(4):hover{background:var(--t-butter);color:var(--butter)}
.socials a:nth-child(5):hover{background:var(--t-mint);color:var(--mint)}
.socials a[data-todo]{opacity:.55}
.socials a[data-todo]:hover{opacity:1}
.socials svg{width:15px;height:15px;fill:currentColor}


/* the identity row */
.hd-row{
  position:relative;z-index:1;
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0 var(--gapX);
  /* vertical only — the horizontal padding is .wrap's, and zeroing it here
     would leave the masthead hanging outside the page's measure */
  padding-top:var(--padY);padding-bottom:var(--padY);
}
.hd-photo{
  flex:none;position:relative;
  width:var(--photoW);height:var(--photoH);border-radius:var(--photoR);
  transform:translateY(calc(var(--p) * (1 - var(--p)) * -18px));
}
.hd-photo img{
  position:relative;z-index:1;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;box-shadow:var(--sh-md);
}
.hd-blob{
  position:absolute;inset:-9% -11% -9% -5%;z-index:0;
  border-radius:38% 62% 55% 45%/50% 42% 58% 50%;
  background:linear-gradient(150deg,var(--lilac),var(--mint) 55%,var(--butter));
  opacity:calc(.46 * (1 - var(--p)));
}
.hd-id{
  flex:1 1 300px;min-width:0;
  flex-grow:calc(1 - var(--p) * .995);
  flex-basis:calc(300px + (176px - 300px) * var(--p));
  transform:translateY(calc(var(--p) * (1 - var(--p)) * -34px));
}
.hd-name{
  font-family:"Fraunces",Georgia,serif;font-weight:900;font-variation-settings:"opsz" 144;
  font-size:var(--nameS);letter-spacing:-.035em;line-height:1.08;margin:0;color:var(--ink);white-space:nowrap;
}
body.lang-hi .hd-name{font-family:"Tiro Devanagari Hindi",serif;font-weight:400;letter-spacing:-.01em;line-height:1.3}
.hd-swash{
  display:block;border-radius:99px;
  height:calc(7px * (1 - var(--p)));
  width:calc(190px * (1 - var(--p)));
  margin-top:calc(13px * (1 - var(--p)));
  background:linear-gradient(90deg,var(--coral),var(--butter),var(--lime),var(--mint),var(--sky),var(--lilac));
}
.hd-sub{
  margin:calc(14px * (1 - var(--p))) 0 0;
  font-size:calc(16px * (1 - var(--p)));
  max-height:calc(54px * (1 - var(--p)));
  opacity:calc(1 - var(--p) * 1.7);
  color:var(--ink-2);line-height:1.5;overflow:hidden;max-width:36ch;
}
.hd-tags{
  display:flex;gap:8px;flex-wrap:wrap;overflow:hidden;
  margin-top:calc(16px * (1 - var(--p)));
  max-height:calc(30px * (1 - var(--p)));
  opacity:calc(1 - var(--p) * 1.9);
}
.chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
body.lang-hi .chip{letter-spacing:.03em;text-transform:none;font-size:12.5px}

/* nav links: own line at rest, folds up beside the name when compact */
.hd-nav{
  flex:1 1 calc((1 - var(--p)) * 100%);
  display:flex;justify-content:center;
  margin-top:calc(14px * (1 - var(--p)));
  position:relative;z-index:1;
}
.hd-track{
  display:flex;gap:2px;flex-wrap:wrap;justify-content:center;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:4px;box-shadow:var(--sh-sm);
}
.navlink{
  padding:8px 15px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink);white-space:nowrap;position:relative;
  transition:background .2s,color .2s;
}
.navlink::after{
  content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;border-radius:2px;
  background:currentColor;opacity:0;transform:scaleX(.4);transform-origin:center;
  transition:opacity .22s,transform .22s;
}
.navlink:hover{background:var(--t-lilac);color:var(--lilac)}
.navlink:hover::after{opacity:.55;transform:scaleX(1)}
/* .active is set by the front page's scroll-spy, .is-active server-side for
   the section being viewed. Same look, two different owners.

   Colour and a rule under the word, not a filled pill. The filled pill said
   "current page" in exactly the language the row's call to action uses, and
   with the two of them side by side there was no telling which of the two
   dark shapes meant "you are here" and which meant "press this". The
   underline is the one ::after already draws on hover, held on and taken up
   to full strength. */
.navlink.active,.navlink.is-active{background:transparent;color:var(--lilac-ink)}
.navlink.active::after,.navlink.is-active::after{
  opacity:1;transform:scaleX(1);background:currentColor
}

/* Home is the one item drawn as a mark instead of a word — the row has no
   width for an eighth label, and this is the destination nobody needs one for.
   Squarer padding so the pill sits round the glyph rather than round the space
   a word would have taken, and the underline pulled in to match it. The label
   is still in the markup, hidden the way core hides one; the phone panel below
   turns it back on. */
.navlink-home{display:inline-flex;align-items:center;gap:8px;padding:8px 12px}
.navlink-ico{display:block;flex:none}
.navlink-home::after{left:11px;right:11px}
.navlink-home-txt{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* The rule between the sections and the offer. A real element, not a ::before
   on the pill — .is-feature is overflow:hidden for its flare and would clip
   one. */
.hd-sep{
  flex:none;width:1px;height:20px;margin:0 9px 0 5px;
  background:var(--line-2);border-radius:1px;
}

/* The one item in the row that is an offer rather than an archive. A filled
   pill, because six links and a seventh link is not a call to action — and
   --lilac-ink rather than --lilac, which is the same hue taken down far enough
   for white to clear AA on it (5.9:1 against 4.6:1) at this weight and size. */
.navlink.is-feature{
  background:var(--lilac-ink);color:#FFF;overflow:hidden;
  box-shadow:0 1px 2px rgba(41,34,68,.14), 0 6px 16px -8px rgba(103,68,228,.6)
}
.navlink.is-feature:hover{background:var(--lilac-ink);color:#FFF;filter:brightness(1.1)}
/* A flare crossing the pill every few seconds, so the row's one call to action
   keeps catching the eye without the pill itself moving and reflowing the row.
   ::after is free to be it here — the underline it draws on the other links is
   off on a filled pill anyway. The reduced-motion block at the end of the file
   stops it, as it does every other animation. */
.navlink.is-feature::after{
  content:"";position:absolute;top:0;bottom:0;left:0;right:auto;
  width:42%;height:auto;border-radius:0;opacity:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5) 50%,transparent);
  transform:translateX(-170%) skewX(-18deg);
  animation:navFlare 4.5s ease-in-out 1.2s infinite;
}
/* The sweep is ~a third of the cycle; the rest of it is the pause before the
   next one, which is what keeps a repeating shine from reading as a spinner. */
@keyframes navFlare{
  0%{transform:translateX(-170%) skewX(-18deg)}
  32%,100%{transform:translateX(340%) skewX(-18deg)}
}
/* On its own page it keeps the filled look — a CTA that goes flat once you
   arrive reads as disabled — and takes a ring to say you are already here. */
.navlink.is-feature.active,.navlink.is-feature.is-feature.is-active{
  background:var(--lilac-ink);color:#FFF;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb,var(--lilac) 55%,transparent)
}

/* The phone menu's two controls. Both live in the markup at every width and
   both are hidden above 900px, where the links are a row and there is no panel
   to open. The bar takes the full measure and says where it goes; the X is
   fixed over the panel, which is the only time it is on screen. */
.hd-menubtn{
  display:none;width:100%;align-items:center;justify-content:center;gap:10px;
  /* tightens as the masthead compacts, so the scrolled bar stays shallow */
  padding:calc(10px + 3px * (1 - var(--p))) 18px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--surface);box-shadow:var(--sh-sm);
  font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.hd-menubtn:hover{border-color:var(--lilac);color:var(--lilac)}
.hd-menubtn-ico{display:grid;gap:3px;width:16px}
.hd-menubtn-ico i{display:block;height:2px;border-radius:2px;background:currentColor}

.hd-close{
  display:none;position:fixed;z-index:70;top:14px;right:clamp(14px,4vw,26px);
  width:44px;height:44px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);
  place-items:center;cursor:pointer;
}
.hd-close span{position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor}
.hd-close span:nth-child(1){transform:rotate(45deg)}
.hd-close span:nth-child(2){transform:rotate(-45deg)}

@media(max-width:900px){
  .site-head{
    --photoW:calc(104px + (40px - 104px) * var(--p));
    --photoH:calc(126px + (40px - 126px) * var(--p));
    --photoR:calc(16px + (20px - 16px) * var(--p));
    --nameS:calc(31px + (17px - 31px) * var(--p));
    --padY:calc(16px + (12px - 16px) * var(--p));
    --gapX:calc(18px + (11px - 18px) * var(--p));
  }
  /* Two lines and an ellipsis. The max-height alone cut the third line in
     half, which reads as a rendering fault rather than a shortened line. */
  .hd-sub{
    font-size:calc(14px * (1 - var(--p)));max-height:calc(44px * (1 - var(--p)));
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  }
  /* Five chips only sit on one line on a wide screen. Two rows from here down,
     or the last three are cut off by the row's own height. */
  .hd-tags{max-height:calc(64px * (1 - var(--p)))}
  .hd-id{flex-basis:200px}
  .socials{display:none}
  /*
   * The links stop being a row here and become a panel. Nothing else fits: the
   * pill track squeezed to nothing and wrapped one link per line, and a row
   * that scrolls sideways keeps whatever you have not swiped to out of sight —
   * on a seven-item nav that is most of the site. The button above opens this
   * and closes it; the track itself is the panel, so there is one nav in the
   * markup and no second copy of the links to keep in step.
   */
  /* Scoped to html.js: with scripting off nothing can open the panel, and the
     links stay the row they are without one. */
  .js .hd-menubtn{display:flex}
  .js body.nav-open .hd-close{display:grid}
  .hd-nav{flex:1 0 100%;margin-top:calc(10px + 4px * (1 - var(--p)))}
  .js .hd-track{
    position:fixed;inset:0;z-index:60;
    flex-direction:column;flex-wrap:nowrap;justify-content:center;align-items:stretch;
    gap:4px;padding:96px clamp(20px,7vw,48px) max(40px,env(safe-area-inset-bottom));
    background:var(--paper);border:0;border-radius:0;box-shadow:none;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .24s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .24s;
  }
  body.nav-open .hd-track{opacity:1;visibility:visible;transform:none}
  /* The page behind must not scroll under the panel. */
  body.nav-open{overflow:hidden}
  .js .hd-track .navlink{
    padding:15px 18px;border-radius:16px;font-size:19px;font-weight:700;
    border-bottom:1px solid var(--line);
  }
  .js .hd-track .navlink:last-child{border-bottom:0}
  /* Stacked, the links are words, so Home is one too — the icon stays as its
     bullet. Padding back to what the rows either side of it use. */
  .js .hd-track .navlink-home{padding:15px 18px}
  .js .hd-track .navlink-home-txt{
    position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible
  }
  /* Stacked, there is no row for a vertical rule to divide. */
  .hd-sep{display:none}
  /* The one filled pill keeps its shape and sits at the end with air around
     it, where a call to action belongs rather than in the list. */
  .js .hd-track .navlink.is-feature{
    margin-top:18px;text-align:center;border-bottom:0;border-radius:999px;
  }
}
@media(max-width:560px){
  /* The name is one unbreakable line beside a 104px portrait, so on a 320px
     screen it has 162px to live in and a fixed 26px ran off the edge. Fluid
     up to 26px, which is what it is from about 380px on. */
  .site-head{--nameS:calc(min(26px,6.9vw) + (16px - min(26px,6.9vw)) * var(--p))}

  /*
   * The identity block stops being a column beside the portrait. Next to a
   * 104px photo it is about 215px wide, and neither the tagline nor five chips
   * fit in that: the tagline lost its last line to the ellipsis and three of
   * the chips were cut off below the fold of their own row. display:contents
   * lifts its children into the masthead's grid, so the name sits beside the
   * portrait and everything under it gets the width of the screen.
   */
  .hd-row{
    display:grid;grid-template-columns:var(--photoW) 1fr;
    column-gap:var(--gapX);align-items:center;
  }
  /* A grid item's automatic minimum is its content, and one long word in any
     of them would push the masthead wider than the screen. */
  .hd-row > *{min-width:0}
  .hd-id{display:contents}
  .hd-photo{grid-area:1 / 1 / 3 / 2}
  .hd-name{grid-area:1 / 2 / 2 / 3;align-self:end}
  .hd-swash{grid-area:2 / 2 / 3 / 3;align-self:start}
  .hd-sub,.hd-tags,.hd-nav{grid-column:1 / -1}
  /* Its fixed 190px is wider than the cell on a small phone, and a grid track
     grows to fit its widest item — the whole masthead was being pushed past
     the screen by a decorative rule. */
  .hd-swash{width:calc(min(190px,100%) * (1 - var(--p)))}

  /* Both lines of it, across the full width — no clamp left to cut. */
  .hd-sub{-webkit-line-clamp:none;display:block;max-height:calc(66px * (1 - var(--p)))}

  /* A size down, so all five make two rows rather than three. */
  .chip{font-size:10.5px;padding:4px 10px;letter-spacing:.07em}
  .hd-tags{gap:6px;max-height:calc(58px * (1 - var(--p)))}
}

/* ============ ticker ============ */
.ticker{display:flex;background:var(--t-butter);overflow:hidden;border-bottom:1px solid var(--line)}
.ticker-tag{flex:none;display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--butter);color:#2A1B00;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
body.lang-hi .ticker-tag{letter-spacing:.02em;text-transform:none;font-size:13px}
.blip{width:7px;height:7px;border-radius:50%;background:#8A3A0B;animation:blip 1.7s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.ticker-track{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.ticker-move{display:flex;gap:40px;white-space:nowrap;padding-left:24px;animation:slide 42s linear infinite;font-size:13.5px;color:#5A3A05;font-weight:500}
.ticker-track:hover .ticker-move{animation-play-state:paused}
.ticker-move b{color:var(--coral)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ hero ============ */
.hero{
  margin:28px auto 0;
  width:100%;
  max-width:1560px;
  padding:0 clamp(18px,3vw,52px);
}
.hero-card{
  position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-md);
  background:var(--surface);
  display:grid;grid-template-columns:1.02fr 1fr;
}
.hero-glow{
  position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side at 8% 14%,var(--t-coral),transparent 70%),
    radial-gradient(closest-side at 58% 6%,var(--t-sky),transparent 68%),
    radial-gradient(closest-side at 30% 96%,var(--t-lilac),transparent 68%),
    radial-gradient(closest-side at 88% 84%,var(--t-mint),transparent 68%);
  transform:translate3d(calc(var(--px,0) * 1%),calc(var(--py,0) * 1%),0);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.hero-text,.hero-recent{position:relative;z-index:1}
.hero-text{
  padding:clamp(28px,2.5vw,42px) clamp(22px,1.8vw,32px) clamp(28px,2.5vw,42px) clamp(24px,2.5vw,44px);
  display:flex;flex-direction:column;justify-content:center;
}
.leadpic{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:21/8;max-height:clamp(132px,13.5vw,196px);
  margin:0 0 20px;box-shadow:var(--sh-sm);
}
.leadpic svg{position:absolute;inset:0;width:100%;height:100%}
.hero h1{font-size:clamp(25px,2.5vw,40px);margin:13px 0 14px;font-variation-settings:"opsz" 100;max-width:20ch}
.hero .dek{font-size:clamp(14.5px,1.15vw,16.5px);color:var(--ink-2);margin:0 0 22px;max-width:48ch;line-height:1.6}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-recent{
  padding:clamp(28px,2.5vw,42px) clamp(24px,2.5vw,44px) clamp(26px,2.2vw,38px) clamp(22px,1.8vw,32px);
  border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;
}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:14px 0 16px}
.rcard{
  background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;
  box-shadow:var(--sh-sm);transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s;
  display:flex;flex-direction:column;
}
.rcard .pic{position:relative;height:clamp(70px,6vw,92px);overflow:hidden;flex:none}
.rcard .pic svg{position:absolute;inset:0;width:100%;height:100%}
.rcard .b{
  padding:11px 13px 12px;display:flex;flex-direction:column;gap:6px;flex:1;
}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.rcard .t{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(14.5px,1vw,16px);line-height:1.28;letter-spacing:-.01em}
body.lang-hi .rcard .t{font-family:"Tiro Devanagari Hindi",serif;font-weight:400;line-height:1.45;font-size:13.5px}
.rcard:hover .t{color:var(--lilac)}
.rcard .ago{font-size:11.5px;color:var(--ink-3);margin-top:auto}

/* ============ homepage split ============ */
/*
 * Two feeds at the head of the page: what he wrote for this site on the left,
 * what the papers printed on the right. Both cards take the hero's own
 * furniture — the 24px radius, the border, the pastel glow — so the split
 * reads as one masthead block rather than two widgets that happen to be
 * adjacent. It sits inside .hero, which is what gives it the page measure.
 */
.hp{
  display:grid;grid-template-columns:minmax(0,1.82fr) minmax(0,1fr);
  gap:22px;align-items:stretch;
}
/* One half with nothing to show and the other takes the width on its own. */
.hp-solo{grid-template-columns:minmax(0,1fr)}

.hp-main,.hp-side{
  position:relative;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-md);background:var(--surface);
  padding:clamp(24px,2.1vw,34px) clamp(20px,1.9vw,32px) clamp(26px,2.2vw,36px);
  display:flex;flex-direction:column;
}

/*
 * The two cards end level, whichever half happens to run longer: the grid
 * stretches them to a shared height, and inside each one the list of rows
 * takes the slack. Left to themselves they differ by a headline or two —
 * a lead with a three-line title against five cuttings with two — and two
 * cards of a matched design ending at different heights reads as a mistake
 * rather than as content.
 *
 * The slack goes into the rows rather than into a gap at the foot: flex:1 0
 * auto shares the extra height equally between them and never takes a row
 * below the height of its own headline, so the dotted rules stay evenly
 * spaced instead of collecting at the bottom.
 */
/*
 * flex:1 0 auto, not flex:1. The shorthand flex:1 means 1 1 0% — a zero basis
 * that the browser is free to shrink from, so the lists were sized to the flex
 * line rather than to their rows and the last row hung 18px out of the bottom
 * of its own <ul>. The button's margin then measured from a container that had
 * already ended. Basis auto means "at least as tall as the rows", and the
 * grow factor still takes the slack.
 */
.hp-split,.hp-rows,.hp-news{flex:1 0 auto}
.hp-rows,.hp-news{display:flex;flex-direction:column}
.hp-rows li,.hp-news li{flex:1 0 auto;display:flex;flex-direction:column}
.hp-rows li a,.hp-news li a{flex:1}
/* Everything but the glow, which stays behind at z-index 0. */
.hp-main>*:not(.hero-glow),.hp-side>*:not(.hero-glow){position:relative;z-index:1}

/* The rule under a section title. The 64px bar takes the card's own --k, set
   on the element in the template, the way .kicker::before already does. */
.hp-head{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.hp-head::before{
  content:"";position:absolute;left:0;bottom:-1px;
  width:64px;height:3px;border-radius:2px;background:var(--k,var(--lilac));
}
.hp-title{font-size:clamp(19px,1.6vw,25px);margin:0}
.hp-more{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--ink-2);transition:color .2s;
}
.hp-more:hover{color:var(--lilac)}

/* left: the lead, and the five beside it */
.hp-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(20px,2vw,32px)}
.hp-lead-pic{
  display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  border-radius:14px;margin:0 0 15px;box-shadow:var(--sh-sm);background:var(--paper);
}
.hp-lead-t{font-size:clamp(20px,1.85vw,29px);margin:0 0 10px;font-variation-settings:"opsz" 100}
.hp-lead .meta{margin:0}
.hp-dek{margin:12px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.65}

.hp-rows,.hp-news{list-style:none;margin:0;padding:0}
.hp-rows li a,.hp-news li a{
  display:flex;flex-direction:row;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px dotted var(--line-2);
}
.hp-rows li:first-child a,.hp-news li:first-child a{padding-top:0}
.hp-rows li:last-child a,.hp-news li:last-child a{border-bottom:0;padding-bottom:0}
.hp-th{
  flex:none;position:relative;width:96px;aspect-ratio:16/11;
  border-radius:11px;overflow:hidden;
}
.hp-b{min-width:0}
.hp-rows h3,.hp-news h3{
  margin:0 0 6px;font-size:16px;line-height:1.3;transition:color .2s;
}
.hp-m{display:block;font-size:11.5px;color:var(--ink-3)}

/* right: the press column */
.hp-side-dek{margin:-6px 0 14px;color:var(--ink-2);font-size:13.5px;line-height:1.6;flex:none}
/*
 * A fixed gap, not margin-top:auto. The list above already carries flex:1 and
 * takes every spare pixel of the card's height, so "auto" had nothing left to
 * push with and the button sat hard against the last cutting.
 */
.hp-side-more{margin-top:26px;align-self:flex-start}

/* Crops, all of them, follow the archive rule: fill the window and anchor to
   the top. Most cuttings are portrait, so the crop is vertical, and the top is
   the half carrying the masthead strip and the headline. See the block above
   .feature .pic img in style.css. */
.hp-lead-pic img,.hp-th img{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:top;
}

/* The underline affordance the rest of the page uses. */
.hp-lead-t a,.hp-rows h3,.hp-news h3{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:transparent;transition:color .2s,text-decoration-color .25s;
}
.hp-lead-t a:hover{color:var(--coral);text-decoration-color:currentColor}
.hp-rows li a:hover h3,.hp-news li a:hover h3{
  color:var(--c,var(--lilac));text-decoration-color:currentColor;
}

/* Devanagari and Gurmukhi headlines need the leading the Latin ones do not,
   and neither is drawn by Fraunces. */
.hp-lead-t:lang(hi),.hp-rows h3:lang(hi),.hp-news h3:lang(hi),
.hp-dek:lang(hi){
  font-family:"Tiro Devanagari Hindi",Georgia,serif;font-weight:400;line-height:1.5;
}
.hp-lead-t:lang(pa),.hp-rows h3:lang(pa),.hp-news h3:lang(pa),
.hp-dek:lang(pa){
  font-family:"Noto Sans Gurmukhi",sans-serif;font-weight:500;line-height:1.55;
}
.hp-dek:lang(hi),.hp-dek:lang(pa){font-size:14px}

/* ============ sections ============ */
section{padding:76px 0 0}
.sechead h2{font-size:clamp(25px,3.5vw,38px);margin:12px 0 0}
.sechead p{margin:9px 0 0;color:var(--ink-2);font-size:15px;max-width:48ch}

/* writing split */
.wsplit{display:grid;grid-template-columns:1.04fr 1fr;gap:46px;align-items:start;margin-top:28px}

/* featured article */
.feature{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.feature .pic{position:relative;aspect-ratio:16/9;overflow:hidden}
.feature .pic svg{position:absolute;inset:0;width:100%;height:100%}
.feature .body{padding:22px 24px 24px}
.feature h3{font-size:clamp(21px,2.5vw,29px);margin:12px 0 10px}
.feature p{margin:0 0 16px;color:var(--ink-2);font-size:15px;line-height:1.65}

/* compact article rows */
.rows{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.rows li a{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rows .th{flex:none;width:104px;aspect-ratio:16/11;border-radius:11px;overflow:hidden;position:relative}
.rows .th svg{position:absolute;inset:0;width:100%;height:100%}
.rows h4{margin:0 0 7px;font-size:16.5px;line-height:1.3;transition:color .2s}
.rows li a:hover h4{color:var(--c,var(--lilac))}

/* @STBA */
/* .wsplit is align-items:start, so the panel would end short of the article
   column. Stretch just this cell and let the footer take up the slack — the
   tile grid keeps its natural row height either way. */
#stba{align-self:stretch}
.stba{
  background:
    radial-gradient(closest-side at 88% 6%,var(--t-mint),transparent 74%),
    radial-gradient(closest-side at 6% 94%,var(--t-butter),transparent 74%),
    var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:28px 26px 30px;box-shadow:var(--sh-sm);
  height:100%;display:flex;flex-direction:column;
}
.stba-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.stba-badge{
  flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--t-lilac);color:var(--lilac);font-family:"Fraunces",Georgia,serif;font-weight:900;font-size:15px;letter-spacing:-.02em;
}
.stba h3{font-size:23px;margin:0}
.stba .school{font-size:13px;color:var(--ink-3);margin:2px 0 0}
.stba .lede{font-size:14px;color:var(--ink-2);margin:14px 0 20px;line-height:1.65}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stile{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s;
}
.stile:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.stile .pic{aspect-ratio:16/10;position:relative;display:grid;place-items:center}
.stile .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stile .pic svg.ic{width:34px;height:34px;position:relative;z-index:1;stroke-width:1.7;fill:none;stroke:currentColor}
.stile .b{padding:13px 14px 15px}
.stile h4{margin:0 0 5px;font-size:14.5px;line-height:1.3}
body.lang-hi .stile h4{font-size:14px;line-height:1.45}
.stile .m{font-size:11.5px;color:var(--ink-3)}
.stba-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{border-radius:var(--r);padding:28px 22px;text-align:center}
.stat .n{font-family:"Fraunces",Georgia,serif;font-weight:900;font-variation-settings:"opsz" 144;font-size:clamp(30px,4.4vw,48px);line-height:1;letter-spacing:-.03em}
.stat .l{margin-top:11px;font-size:13px;color:var(--ink-2);line-height:1.5}

/* link affordance across the page */
.rcard .t,.rows h4,.feature h3,.clip .clip-t,.stile h4{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  text-decoration-color:transparent;transition:color .2s,text-decoration-color .25s;
}
.rcard:hover .t,.rows li a:hover h4,.feature:hover h3,.clip:hover .clip-t,.stile:hover h4{
  text-decoration-color:currentColor;
}
footer ul li a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(239,234,251,.32);transition:color .2s,text-decoration-color .2s;
}
footer ul li a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--lilac);outline-offset:2px;border-radius:8px}

/* published-in band */
.pubs{
  margin-top:60px;border:1px solid var(--line);border-radius:22px;background:var(--surface);
  padding:30px 30px 32px;text-align:center;box-shadow:var(--sh-sm);
}
.pubs .lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
body.lang-hi .pubs .lbl{letter-spacing:.04em;text-transform:none;font-size:13px}
.pubs .names{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 26px;margin-top:18px;
}
.pubs .names span{
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:clamp(15px,1.5vw,19px);
  color:var(--ink);opacity:.72;letter-spacing:-.01em;transition:opacity .25s,color .25s;
}
.pubs .names span{cursor:default}
.pubs .names i{color:var(--line-2);font-style:normal}

/* on air */
.band{background:var(--deep);color:var(--deep-ink);margin-top:82px;padding:70px 0 76px}
.band h2{color:#FFF;font-size:clamp(25px,3.6vw,38px);margin:12px 0 10px}
.band .kicker{color:rgba(239,234,251,.72)}
.band .sub{color:rgba(239,234,251,.6);max-width:56ch;margin:0 0 34px;font-size:15.5px}
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.clip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s}
.clip:hover{transform:translateY(-5px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.clip .shot{aspect-ratio:16/9;position:relative;overflow:hidden}
.clip .shot svg{position:absolute;inset:0;width:100%;height:100%}
.play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .25s}
.clip:hover .play{transform:scale(1.13)}
.play::after{content:"";border-left:13px solid #241D3C;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.clip .body{padding:15px 16px 18px}
.clip .chan{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body.lang-hi .clip .chan{letter-spacing:.02em;text-transform:none;font-size:12.5px}
/* .clip-t, not the tag: the heading level is the caller's, so the card is
   styled by class and reads the same at h2, h3 or h4. */
.clip .clip-t{margin:8px 0 0;font-size:15.5px;color:#FBF9FF;font-weight:600}

/* book */
.book{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
  background:radial-gradient(closest-side at 14% 20%,var(--t-coral),transparent 72%),
             radial-gradient(closest-side at 88% 78%,var(--t-butter),transparent 72%),var(--surface);
  border:1px solid var(--line);border-radius:30px;padding:52px;box-shadow:var(--sh-sm);
}
.book-img{display:flex;justify-content:center;position:relative}
.book-img::after{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:86%;aspect-ratio:1/1;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,var(--coral),transparent);opacity:.22;filter:blur(28px)}
.book-img img{position:relative;z-index:1;max-width:290px;width:100%;transform:rotate(-3deg);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 26px 42px rgba(41,34,68,.3))}
.book-img img:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.book h2{font-size:clamp(26px,4vw,42px);margin:14px 0 8px}
.book .subt{color:var(--ink-3);font-size:14.5px;margin:0 0 18px}
.book p{color:var(--ink-2);font-size:15.5px;line-height:1.75;margin:0 0 18px;max-width:52ch}
.quote{border-left:4px solid var(--coral);padding:6px 0 6px 20px;margin:24px 0 28px;
  font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:1.5;font-weight:600;font-style:italic}
body.lang-hi .quote{font-family:"Tiro Devanagari Hindi",serif;font-style:normal;font-weight:400;line-height:1.7;font-size:17px}

.book .subt .year{color:var(--ink-3);opacity:.8}
.forthcoming{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  padding:9px 16px 9px 13px;border-radius:999px;
  border:1px dashed var(--line-2);color:var(--ink-2);font-size:13.5px;
}
.forthcoming .dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--coral);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent);
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:start}
.about-photo{position:relative}
.about-photo::before{content:"";position:absolute;inset:-14px -14px 26px 14px;border-radius:26px;z-index:0;
  background:linear-gradient(145deg,var(--mint),var(--sky) 50%,var(--lilac));opacity:.5}
.about-photo img{position:relative;z-index:1;border-radius:22px;box-shadow:var(--sh-md);width:100%}
.about h2{font-size:clamp(25px,3.6vw,38px);margin:12px 0 18px}
.about p{color:var(--ink-2);font-size:15.5px;line-height:1.78;margin:0 0 15px;max-width:68ch}  /* the wider .wrap would otherwise push the biography past 85ch */
.about p b{color:var(--ink);font-weight:600}
.tl{list-style:none;margin:30px 0 0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:12px;width:2px;background:var(--line)}
.tl li{position:relative;padding:0 0 20px 32px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.tl li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--c,var(--lilac))}
.tl .yr{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--c,var(--lilac));margin-bottom:2px}

/* strip */
.strip{margin-top:76px;border-radius:24px;overflow:hidden;position:relative;box-shadow:var(--sh-sm)}
.strip img{width:100%;object-fit:cover;max-height:230px}
.strip .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;font-size:14px;
  background:linear-gradient(to top,rgba(20,12,34,.82),transparent)}
.strip .cap b{display:block;font-family:"Fraunces",Georgia,serif;font-size:19px;margin-bottom:3px}
body.lang-hi .strip .cap b{font-family:"Tiro Devanagari Hindi",serif}

/* signup */
.signup{margin-top:76px;border-radius:30px;padding:54px 44px;text-align:center;
  background:linear-gradient(135deg,var(--t-lilac),var(--t-mint) 60%,var(--t-sky));border:1px solid var(--line)}
.signup h2{font-size:clamp(24px,3.5vw,36px);margin:14px 0 12px}
.signup p{color:var(--ink-2);max-width:50ch;margin:0 auto 28px;font-size:15.5px}
.form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap}
.form input{flex:1;min-width:210px;padding:14px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14.5px}
.form input:focus{outline:2px solid var(--lilac);outline-offset:1px}
.note{margin-top:16px;font-size:12.5px;color:var(--ink-3)}

/* footer */
footer{background:var(--deep);color:var(--deep-ink);margin-top:76px;padding:58px 0 0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:44px}
.fmark{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.fmark img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.fmark span{font-family:"Fraunces",Georgia,serif;font-weight:800;font-size:20px;color:#fff;line-height:1.2}
body.lang-hi .fmark span{font-family:"Tiro Devanagari Hindi",serif;font-weight:400}
footer p{color:rgba(239,234,251,.58);font-size:14px;line-height:1.7;margin:0 0 20px;max-width:34ch}
/* .56 rather than .5: at .5 these sit at 4.45:1 on --deep, just under AA. */
/*
 * font-family and friends are re-stated because these were h5 until the
 * heading levels were corrected, and h5 is not in the .serif/h1-h4 rule
 * above — promoting them to h2 would otherwise have quietly swapped a
 * letterspaced Inter eyebrow for Fraunces at opsz 40.
 */
footer h2{
  font-family:inherit;font-variation-settings:normal;line-height:inherit;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,234,251,.56);margin:0 0 15px
}
body.lang-hi footer h2{letter-spacing:.03em;text-transform:none;font-size:13px}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:11px;font-size:14px;color:rgba(239,234,251,.75)}
footer ul li a:hover{color:var(--mint)}
.fsoc{display:flex;gap:9px}
.fsoc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);color:rgba(239,234,251,.8);transition:background .2s,color .2s,transform .2s}
.fsoc a:hover{transform:translateY(-3px);background:var(--lilac);color:#1B1430}
.fsoc svg{width:16px;height:16px;fill:currentColor}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(239,234,251,.56)}  /* .4 was 3.33:1 */
.fbot a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(239,234,251,.35)}
.fbot a:hover{text-decoration-color:currentColor}
.fbot .fsep{opacity:.45;margin:0 5px}
.flag{border:1px dashed rgba(174,150,255,.5);color:#C9B7FF;padding:3px 12px;border-radius:999px;font-size:11.5px}

/* ============ immersive layer ============ */

/* scroll progress */
.progress{
  position:fixed;top:0;left:0;height:3px;border-radius:0 2px 2px 0;width:100%;z-index:60;transform-origin:0 50%;
  transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--coral),var(--butter),var(--lime),var(--mint),var(--sky),var(--lilac));
}

/* ambient drifting field behind the whole page */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient i{
  position:absolute;display:block;border-radius:50%;filter:blur(96px);opacity:.2;
  /* the scroll drift lives here, on the blobs — NOT on .ambient. Panning the
     fixed, overflow:hidden parent moved its clip rectangle with it and left a
     hard horizontal edge cutting across the viewport. `translate` composes with
     the `transform` the drift keyframes animate, so the two do not fight. */
  translate:0 var(--pan,0px);
  will-change:transform,translate;
}
.ambient i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-6vw;background:var(--lilac);animation:drift1 26s ease-in-out infinite}
.ambient i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:18vh;background:var(--mint);animation:drift2 32s ease-in-out infinite}
.ambient i:nth-child(3){width:42vw;height:42vw;left:22vw;bottom:-12vw;background:var(--butter);animation:drift3 29s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,5vh,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,8vh,0) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5vw,-6vh,0) scale(1.1)}}

/* masthead portrait: slow float + gentle ring rotation */
.mast-photo{position:relative;animation:floatY 7.5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* hero parallax targets */
.hero-card{transition:box-shadow .5s}
.leadpic svg,.rcard .pic svg,.feature .pic svg,.clip .shot svg,.stile .pic{
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.rcard:hover .pic svg,.feature:hover .pic svg,.clip:hover .shot svg{transform:scale(1.07)}
.stile:hover .pic{transform:scale(1.06)}
.stile .pic{overflow:hidden}

/* nav active state */

/* reveal + stagger */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rcard,.stile,.clip,.stat,.rows li,.hp-rows li,.hp-news li{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms),
             box-shadow .26s,border-color .26s,background .26s;
}
.rv.in .rcard,.rv.in .stile,.rv.in .clip,.rv.in .stat,.rows.in li,
.rv.in .hp-rows li,.rv.in .hp-news li{opacity:1;transform:none}
.rcard:hover{transform:translateY(-4px)!important}
.stile:hover,.clip:hover{transform:translateY(-5px)!important}

/* responsive */
@media(max-width:1040px){
  .hp{grid-template-columns:minmax(0,1fr)}
  .hero-card{grid-template-columns:1fr}
  .hero-text{padding:42px 32px 20px}
  .hero-recent{padding:8px 32px 40px;border-left:0;border-top:1px solid var(--line);margin-top:20px;padding-top:28px}
  .wsplit{grid-template-columns:1fr;gap:44px}
  .clips{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .book,.about{grid-template-columns:1fr;gap:36px}
  .book{padding:38px}
  .about-photo{max-width:340px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .hp-split{grid-template-columns:minmax(0,1fr);gap:8px}
  .hp-rows li:first-child a{padding-top:14px;border-top:1px dotted var(--line-2)}
  .hp-th{width:82px}
  .clips,.stats,.fgrid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}
  .hero-text{padding:32px 22px 16px}
  .hero-recent{padding:24px 22px 34px}
  .book{padding:28px 22px}
  .stba{padding:24px 20px 26px}
  .signup{padding:40px 22px}
  .socials{display:none}
  .rows .th{width:84px}
  .mast-photo{width:120px;height:120px}
  nav.mainnav .wrap{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.mainnav .wrap::-webkit-scrollbar{display:none}
  .navlink{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.rcard,.stile,.clip,.stat,.rows li,.hp-rows li,.hp-news li{opacity:1;transform:none}
  .ambient,.progress{display:none}
  html{scroll-behavior:auto}
}