/* ==========================================================================
   SAURAV DAS — portfolio
   Two modes: [data-mode="ink"] (default, dark newsroom) and
              [data-mode="paper"] (newsprint reading mode)
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: clamp(18px, 4vw, 64px);
  --r: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

html[data-mode="ink"]{
  --bg:#08090a;
  --bg-2:#0e1012;
  --card:#121417;
  --fg:#f5f3ee;
  --muted:#8e918f;
  --line:rgba(245,243,238,.13);
  --accent:#d4ff3f;
  --accent-ink:#08090a;
  --hot:#ff3b1f;
  --grain:.055;
  --img-filter: grayscale(1) contrast(1.15) brightness(.86);
  /* nav island: a clear tonal step up from --bg so the bar is visibly a surface */
  --nav-bg:rgba(27,30,35,.9);
  --nav-line:rgba(245,243,238,.2);
  --nav-shadow:rgba(0,0,0,.85);
  --nav-sheen:rgba(255,255,255,.07);
  /* tricolour, brightened so it reads on near-black */
  --saffron:#ff9d3d;
  --india-green:#3ec463;
}
html[data-mode="paper"]{
  --bg:#f2ede3;
  --bg-2:#e9e3d6;
  --card:#faf7f0;
  --fg:#14120f;
  --muted:#6d675c;
  --line:rgba(20,18,15,.16);
  --accent:#e8452b;
  --accent-ink:#fffaf2;
  --hot:#14120f;
  --grain:.09;
  --img-filter: grayscale(1) contrast(1.35) brightness(1.02);
  /* paper: go brighter than the cream page instead of darker */
  --nav-bg:rgba(255,254,250,.93);
  --nav-line:rgba(20,18,15,.2);
  --nav-shadow:rgba(60,50,35,.34);
  --nav-sheen:rgba(255,255,255,.7);
  /* tricolour, darkened so it reads on cream */
  --saffron:#c25f00;
  --india-green:#0f6b23;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
/* author display rules outrank the UA's [hidden]{display:none} — force it back,
   or anything hidden from JS that has an explicit display stays visible */
[hidden]{display:none!important}

/* ---------- SHARED BITS ---------- */
section[id]{scroll-margin-top:88px}   /* keep anchor targets clear of the fixed nav */
.sec-head{padding:clamp(70px,10vw,140px) var(--pad) clamp(28px,4vw,52px);max-width:1500px;margin:0 auto}
.sec-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,9vw,8rem); line-height:.86;
  text-transform:uppercase; letter-spacing:-.02em;
}
.sec-title em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;color:var(--accent);margin-left:.28em}
.sec-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:18px;max-width:44ch}
.sec-kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform 1s var(--ease)}
.in .word i,[data-split].in .word i{transform:none}

/* ---------- FX LAYERS ---------- */
.fx-grain{
  position:fixed;inset:-150%;z-index:9000;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(4%,-6%)}
  60%{transform:translate(-3%,-3%)} 80%{transform:translate(5%,5%)} 100%{transform:translate(0,0)}
}
.fx-scan{
  position:fixed;inset:0;z-index:8999;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.11) 3px 4px);
  mix-blend-mode:multiply;
}
html[data-mode="paper"] .fx-scan{opacity:.18}
/* The custom cursor (trailing ring, lime dot, hover label) and the
   mouse-tracking spotlight used to live here. Both removed — the normal
   system pointer is used throughout. */

/* ---------- PRELOADER ---------- */
.loader{position:fixed;inset:0;z-index:9800;background:var(--bg);display:grid;place-items:center;padding:var(--pad)}
.loader.done{transform:translateY(-101%);transition:transform 1.1s var(--ease)}
.loader__inner{width:min(1100px,100%)}
.loader__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.loader__word{font-family:var(--display);font-size:clamp(2.5rem,11vw,9rem);line-height:.9;text-transform:uppercase;margin:14px 0 22px;letter-spacing:-.02em}
.loader__word span{display:block;opacity:0;transform:translateY(60%);animation:lIn .9s var(--ease) forwards}
.loader__word span:nth-child(2){animation-delay:.1s;color:var(--accent)}
.loader__word span:nth-child(3){animation-delay:.2s;font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0}
@keyframes lIn{to{opacity:1;transform:none}}
.loader__bar{height:2px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- PROGRESS ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:8000;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- NAV ----------
   A floating island, not a flush bar. The old version was a near-black strip on
   a near-black page — technically present, tonally invisible. This sits on its
   own clearly lighter surface with edges on all four sides and a shadow under
   it, so it reads as an object hovering above the page. */
.nav{
  position:fixed;top:clamp(10px,1.1vw,16px);left:0;right:0;margin:0 auto;z-index:8500;
  width:calc(100% - clamp(16px,2.4vw,44px));max-width:1620px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:9px 10px 9px 16px;
  border-radius:100px;
  background:var(--nav-bg);
  border:1px solid var(--nav-line);
  backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:
    0 18px 44px -20px var(--nav-shadow),
    0 2px 8px -4px var(--nav-shadow),
    inset 0 1px 0 var(--nav-sheen);
  transition:background .4s,border-color .4s,box-shadow .4s,top .4s var(--ease);
}
.nav.stuck{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--nav-line));
  box-shadow:
    0 22px 52px -18px var(--nav-shadow),
    0 2px 10px -4px var(--nav-shadow),
    inset 0 1px 0 var(--nav-sheen);
}
.nav__brand{display:flex;align-items:center;gap:13px}
.nav__mark{
  display:grid;place-items:center;width:50px;height:50px;border-radius:13px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--display);font-size:1.42rem;letter-spacing:.03em;
  transition:transform .5s var(--ease)
}
.nav__brand:hover .nav__mark{transform:rotate(-8deg) scale(1.06)}
.nav__name{
  font-family:var(--mono);font-weight:700;font-size:1.12rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg)
}
/* no inner capsule — the island itself is the container now */
.nav__links{display:flex;align-items:center;gap:clamp(2px,.5vw,8px)}
.nav__links a{
  font-family:var(--mono);font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;
  position:relative;padding:8px clamp(9px,1.1vw,15px);border-radius:100px;
  color:var(--muted);transition:color .3s,background .3s
}
.nav__links a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.nav__links a.active{
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)
}

/* ---------- DONATE BUTTON — the one accent-filled thing in the bar ---------- */
.nav__donate{
  flex:0 0 auto;
  font-family:var(--mono);font-weight:800;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);
  padding:14px clamp(22px,2.2vw,32px);border-radius:100px;
  border:2px solid var(--accent);
  transition:transform .4s var(--ease),box-shadow .4s,background .3s,color .3s;
  animation:donatePulse 2.5s ease-in-out infinite;
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 40%,transparent);
}
.nav__donate:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--accent) 70%,transparent);
  animation-play-state:paused
}
/* already on the page — keep it identifiable but stop shouting */
.nav__donate[aria-current]{
  background:transparent;color:var(--accent);animation:none
}
.nav__donate[aria-current]:hover{background:var(--accent);color:var(--accent-ink)}
@keyframes donatePulse{
  0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--accent) 40%,transparent),0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}
  50%{box-shadow:0 0 20px color-mix(in srgb,var(--accent) 60%,transparent),0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent)}
}
.nav__tools{display:flex;align-items:center;gap:14px}

/* ---------- SOCIALS — icon-only, riding just right of Donate ----------
   A hairline separates them from the button so the accent pill keeps its
   own space instead of reading as the first item in a row of five. */
.nav__socials{display:flex;align-items:center;gap:6px;padding-left:14px;position:relative}
.nav__socials::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:24px;background:var(--line)
}
.nav__social{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  transition:background .3s,transform .4s var(--ease)
}
/* Brand colours. X has no colour of its own — it is the foreground, which is
   what makes it flip correctly between the ink and paper modes. Instagram is
   painted by the gradient defined inside its own svg. */
.nav__social[data-brand="X"]{color:var(--fg)}
.nav__social[data-brand="Facebook"]{color:#1877F2}
.nav__social[data-brand="Instagram"]{color:#E1306C}
.nav__social:hover{
  background:color-mix(in srgb,var(--fg) 10%,transparent);
  transform:translateY(-2px) scale(1.06)
}
.nav__social svg{display:block}

.nav__cmd{display:flex;gap:3px}
.nav__cmd kbd,.cmd__hint kbd{
  font-family:ui-sans-serif,system-ui,var(--mono);font-size:.62rem;line-height:1;
  padding:4px 6px;border:1px solid var(--line);border-radius:5px;color:var(--muted)
}
.nav__cmd:hover kbd{color:var(--fg);border-color:var(--fg)}
.nav__burger{display:none;position:relative;width:34px;height:34px;flex:0 0 auto}
.nav__burger i{position:absolute;left:7px;width:20px;height:1.5px;background:var(--fg);transition:transform .45s var(--ease),opacity .3s}
.nav__burger i:first-child{top:14px}
.nav__burger i:last-child{top:20px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:900px){
  .nav{padding:8px 9px 8px 14px}
  .nav__links,.nav__cmd{display:none}
  .nav__burger{display:block}
  .nav__tools{gap:10px}
  .nav__donate{font-size:.74rem;padding:9px 15px;letter-spacing:.08em}
  .nav__socials{gap:3px;padding-left:11px}
  .nav__social{width:38px;height:38px}
}
/* phone: brand + Donate + burger is already a full bar — the sheet carries
   the socials from here down */
@media (max-width:620px){
  .nav__socials{display:none}
}
@media (max-width:520px){
  .nav__name{display:none}
  .nav__mark{width:44px;height:44px;font-size:1.24rem}
  .nav__donate{font-size:.7rem;padding:9px 13px;letter-spacing:.04em}
}
/* and make it obvious in the full-screen menu too */
.sheet__nav a[href*="donate/index.html"]{color:var(--accent)}

/* ---------- SHEET MENU ---------- */
.sheet{
  position:fixed;inset:0;z-index:8400;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:30px;padding:90px var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none
}
.sheet.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.sheet__nav a{
  display:flex;align-items:baseline;gap:16px;
  font-family:var(--display);font-size:clamp(2.2rem,12vw,5rem);line-height:1;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding:12px 0;transition:color .3s,padding-left .4s var(--ease)
}
.sheet__nav a em{font-family:var(--mono);font-size:.7rem;font-style:normal;color:var(--accent);letter-spacing:.1em}
.sheet__nav a:active,.sheet__nav a:hover{color:var(--accent);padding-left:10px}
.sheet__foot{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sheet__foot a:hover{color:var(--accent)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:15px 26px;border-radius:100px;border:1px solid var(--fg);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s
}
.btn::before{content:'';position:absolute;inset:0;background:var(--accent);z-index:-1;transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn__arrow{transition:transform .45s var(--ease)}
.btn:hover .btn__arrow{transform:translateY(3px)}
.btn--send:hover .btn__arrow{transform:translateX(5px)}
.btn--big{padding:18px 32px}

/* ---------- HERO ---------- */
.hero{
  /* + 74px clears the floating nav island with room to breathe */
  position:relative;min-height:100svh;padding:calc(var(--pad) + 74px) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow:hidden;z-index:2
}
.hero__grid{
  position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(48px,7vw,110px) clamp(48px,7vw,110px);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 85%)
}
.hero__top{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px}
.hero__top > *{min-width:0;max-width:100%}

/* ---------- ROLE CHIPS ---------- */
.hero__roles{display:flex;flex-wrap:wrap;gap:9px}
.hero__roles .role{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.72rem,1vw,.92rem);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:8px 15px;border-radius:100px;white-space:nowrap;
  transition:background .35s,transform .35s var(--ease)
}
.hero__roles .role:hover{background:color-mix(in srgb,var(--accent) 24%,transparent);transform:translateY(-2px)}

/* The "Proud Indian | Bhartiya" pill and its little flag used to sit here.
   The tricolour now reads as a soft wash behind the photographs instead —
   see TRICOLOUR WASH further down. */
@media (max-width:700px){
  .hero__roles{gap:7px}
  .hero__roles .role{font-size:.66rem;letter-spacing:.09em;padding:7px 12px}
}

/* left half = copy, right half = the pair of shots */
.hero__main{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,56px);align-items:center;
  padding:clamp(20px,3vw,40px) 0
}
.hero__copy{display:flex;flex-direction:column;gap:clamp(22px,3vw,40px);min-width:0}

.hero__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,10.4vw,10rem);line-height:.82;letter-spacing:-.025em;
  text-transform:uppercase;position:relative;z-index:3
}
.hero__title .line{
  display:block;overflow:hidden;white-space:nowrap;
  /* the clip box is tighter than the glyphs (line-height < 1), which shears the
     italic Q's tail — extend it downward and cancel the space in layout */
  padding-bottom:.18em;margin-bottom:-.18em
}
.hero__title .line > i{display:block;font-style:normal;transform:translateY(125%);opacity:0;transition:transform 1.2s var(--ease),opacity .8s}
.ready .hero__title .line > i{transform:none;opacity:1}
.hero__title .line:nth-child(2) > i{transition-delay:.09s}
.hero__title .line:nth-child(3) > i{transition-delay:.18s}
.hero__title .accent{
  font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;color:var(--accent)
}
.hero__title .accent::after{content:'';display:inline-block;width:.12em;height:.12em;border-radius:50%;background:var(--hot);margin-left:.02em;vertical-align:.02em}

.hero__base{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,30px);width:100%}
.hero__dek{font-size:clamp(.95rem,1.35vw,1.15rem);color:var(--muted);opacity:0;transform:translateY(20px);transition:all 1s var(--ease) .5s}
@media (max-width:900px){.hero__dek{max-width:46ch}}
.ready .hero__dek{opacity:1;transform:none}
#heroCta{opacity:0;transform:translateY(20px);transition:all 1s var(--ease) .62s, color .4s, border-color .4s}
.ready #heroCta{opacity:1;transform:none}

/* ---------- HERO GALLERY (the pair of shots) ---------- */
.hero__gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px);
  align-items:start;min-width:0;position:relative;
  /* cap it: past this the 4:5 frames get tall enough to push the hero off-screen,
     and the sources (335px / 873px wide) start visibly upscaling */
  max-width:46rem;margin-inline:auto;width:100%
}
.shot{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  opacity:0;transform:translateY(38px) rotate(var(--tilt,0deg));
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)
}
.shot:nth-child(1){--tilt:-1.6deg}
.shot:nth-child(2){--tilt:1.6deg;margin-top:clamp(16px,3.4vw,52px)}
.ready .shot{opacity:1;transform:rotate(var(--tilt,0deg))}
/* the grayscale lives on the image layer, not the frame — a filter on the frame
   would desaturate the tricolour wash sitting above it */
.shot__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:var(--img-filter);
  transition:transform 1s var(--ease),filter .6s
}
.shot::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--bg) 70%,transparent));
  mix-blend-mode:multiply
}
.shot:hover .shot__img{transform:scale(1.06);filter:none}
/* ---------- TRICOLOUR WASH ----------
   Saffron falling from the top right, green rising from the bottom left, a pale
   diagonal between them — the watercolour tricolour, whispered. It has to stay
   faint enough to read as warmth behind the photographs rather than a flag laid
   over them, so the aura is heavily blurred and the on-image tint is soft-light. */
.hero__gallery::before,
.about__frame::before{
  content:'';position:absolute;inset:-7% -9%;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 84% 10%, color-mix(in srgb,var(--saffron) 62%,transparent), transparent 68%),
    radial-gradient(56% 52% at 14% 90%, color-mix(in srgb,var(--india-green) 56%,transparent), transparent 68%),
    linear-gradient(208deg, transparent 26%, color-mix(in srgb,#fff 20%,transparent) 47% 55%, transparent 74%);
  filter:blur(40px);opacity:.4
}
.hero__gallery > *,
.about__frame > *{position:relative;z-index:1}
/* the same diagonal, barely there, across the photograph itself */
.shot::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(208deg,
    color-mix(in srgb,var(--saffron) 34%,transparent) 0%,
    transparent 38% 62%,
    color-mix(in srgb,var(--india-green) 34%,transparent) 100%);
  mix-blend-mode:soft-light
}
.about__frame{position:relative}

.shot figcaption{
  position:absolute;left:10px;bottom:10px;z-index:4;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:4px 8px;border-radius:4px
}

@media (max-width:900px){
  .hero{gap:26px}
  .hero__main{grid-template-columns:1fr;gap:30px;align-items:stretch}
  .hero__title{font-size:clamp(2.9rem,14vw,7rem)}
  .hero__gallery{gap:12px}
  .shot:nth-child(2){margin-top:26px}
}

.hero__scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.3em;color:var(--muted)}
.hero__scroll i{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:drop 1.9s var(--ease-io) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){.hero__scroll{display:none}}

/* ---------- TICKER ---------- */
.ticker{
  position:relative;z-index:3;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--accent);color:var(--accent-ink);padding:12px 0
}
.ticker__row{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__row span{
  font-family:var(--display);font-size:clamp(1rem,2.4vw,1.9rem);text-transform:uppercase;letter-spacing:.01em;
  padding:0 24px;display:flex;align-items:center;gap:24px;white-space:nowrap
}
.ticker__row span::after{content:'✳';font-family:var(--sans);font-size:.6em;opacity:.55}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- STATS ---------- */
.stats{padding:clamp(60px,9vw,130px) var(--pad);max-width:1500px;margin:0 auto}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line)}
.stat{background:var(--bg);padding:clamp(22px,3vw,40px) clamp(18px,2vw,28px);position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.stat.in::after{transform:scaleX(1)}
.stat__n{font-family:var(--display);font-size:clamp(2.6rem,6vw,5rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat__n sup{font-family:var(--sans);font-size:.32em;font-weight:500;color:var(--accent);top:-1.4em;position:relative;left:.05em}
.stat__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;max-width:22ch}

/* ---------- WORK (pinned rail) ---------- */
.work{position:relative;background:var(--bg-2)}
.work__pin{position:relative;padding:clamp(40px,6vw,80px) 0}
.work__head{padding:0 var(--pad);position:relative}
.work__head .sec-title{font-size:clamp(2.2rem,5.6vw,5.2rem)}
.work__head .sec-note{margin-top:12px;font-size:.66rem;max-width:52ch}
.work__count{position:absolute;right:var(--pad);top:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;color:var(--muted);display:flex;gap:4px}
.work__count span:first-child{color:var(--accent);font-size:1.6rem;line-height:1;font-family:var(--display)}
.work__count i{font-style:normal;opacity:.4}
.work__slider{position:relative;margin-top:clamp(20px,2.6vw,34px)}
.work__rail{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--pad);overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.work__rail::-webkit-scrollbar{display:none}
.work__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,opacity .2s}
.work__arrow:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.work__arrow--left{left:8px}
.work__arrow--right{right:8px}
.work__arrow:disabled{opacity:0;pointer-events:none}

.card{
  flex:0 0 auto;width:clamp(272px,27vw,382px);scroll-snap-align:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.card__media > div{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--img-filter);transition:transform .9s var(--ease),filter .6s}
.card:hover .card__media > div{transform:scale(1.07);filter:none}
.card__tag{
  position:absolute;left:12px;top:12px;z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:5px 9px;border-radius:100px
}
.card__year{position:absolute;right:12px;top:12px;z-index:2;font-family:var(--display);font-size:1.1rem;color:var(--accent)}
.card__body{padding:clamp(16px,1.7vw,22px);flex:1;display:flex;flex-direction:column}
.card__kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.card__title{font-family:var(--display);font-size:clamp(1.4rem,2.3vw,2rem);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin:9px 0 10px}
.card__dek{font-size:.86rem;line-height:1.45;color:var(--muted);max-width:38ch}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.card__dek{margin-bottom:16px}
.card__outlet{font-family:var(--serif);font-size:1.15rem;letter-spacing:.01em}
.card__read{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:8px;color:var(--muted);transition:color .3s}
.card:hover .card__read{color:var(--accent)}
.card__read i{transition:transform .4s var(--ease)}
.card:hover .card__read i{transform:translateX(5px)}

@media (max-width:900px){
  .work__pin{padding:40px 0}
  .card{width:min(80vw,360px);scroll-snap-align:center}
  .work__count{position:static;margin-top:14px}
  .work__arrow{width:36px;height:36px;font-size:1.2rem}
}

/* ---------- MOTION ---------- */
.motion{padding-bottom:clamp(60px,8vw,120px)}
.motion__grid{
  display:grid;gap:clamp(12px,1.6vw,22px);padding:0 var(--pad);max-width:1500px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}
.reel{position:relative;aspect-ratio:9/13;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.reel > .reel__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:var(--img-filter);transition:transform 1s var(--ease),filter .6s}
.reel:hover > .reel__bg{transform:scale(1.08);filter:none}
.reel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72))}
.reel__play{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;z-index:2;
  background:color-mix(in srgb,var(--accent) 92%,transparent);color:var(--accent-ink);
  transform:scale(.85);transition:transform .5s var(--ease)
}
.reel:hover .reel__play{transform:scale(1)}
.reel__play::before{content:'';width:0;height:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.reel__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px}
.reel__meta h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;line-height:1.25;color:#fff}
.reel__meta p{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:8px;font-weight:500}
.reel__outlet{display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);padding:4px 10px;border-radius:100px;margin-bottom:8px;font-weight:600}
.reel__below{padding:10px 4px 0;display:flex;flex-direction:column;gap:4px}
.reel__channel{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--fg);line-height:1.3}
.reel__date{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.reel__wrap{display:flex;flex-direction:column}
.reel__prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);z-index:3;transition:width .1s linear}

/* ---------- ABOUT ---------- */
.about{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,80px);padding:clamp(70px,10vw,150px) var(--pad);max-width:1500px;margin:0 auto;align-items:start
}
.about__sticky{position:sticky;top:14vh}
.about__kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.about__card{
  aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;position:relative;
  background-size:cover;background-position:center;filter:var(--img-filter);border:1px solid var(--line)
}
.about__card::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 8px,color-mix(in srgb,var(--accent) 14%,transparent) 8px 9px);
  opacity:0;transition:opacity .6s
}
.about__card:hover::after{opacity:1}
.about__body p{
  font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.32;letter-spacing:-.01em;
  margin-bottom:clamp(20px,2.6vw,36px)
}
.about__body b{font-style:italic;color:var(--accent);font-weight:400}
.about__sig{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);text-transform:uppercase;letter-spacing:-.01em;border-top:1px solid var(--line);padding-top:22px;display:flex;align-items:baseline;gap:14px}
.about__sig em{font-family:var(--mono);font-size:.62rem;font-style:normal;letter-spacing:.2em;color:var(--muted)}
@media (max-width:900px){
  .about{grid-template-columns:1fr}
  .about__sticky{position:static}
  .about__card{aspect-ratio:16/12}
}

/* ---------- PRESS ---------- */
.press{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(20px,3vw,34px) 0}
.press__row{display:flex;width:max-content;animation:slide 40s linear infinite}
.press__row span{
  font-family:var(--display);font-size:clamp(1.3rem,3.4vw,3rem);text-transform:uppercase;
  padding:0 clamp(20px,3vw,48px);color:transparent;-webkit-text-stroke:1px var(--muted);white-space:nowrap;
  transition:color .4s,-webkit-text-stroke-color .4s
}
.press__row span:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent)}

/* ---------- MOVEMENT ---------- */
.move__list{max-width:1500px;margin:0 auto;padding:0 var(--pad) clamp(60px,8vw,120px)}
.move__item{
  display:grid;grid-template-columns:clamp(80px,10vw,150px) 1fr auto;gap:clamp(14px,3vw,40px);
  align-items:baseline;padding:clamp(20px,3vw,34px) 0;border-top:1px solid var(--line);
  position:relative;transition:padding-left .5s var(--ease)
}
.move__item:last-child{border-bottom:1px solid var(--line)}
.move__item::before{
  content:'';position:absolute;left:0;top:0;height:100%;width:0;
  background:color-mix(in srgb,var(--accent) 9%,transparent);z-index:-1;transition:width .6s var(--ease)
}
.move__item:hover{padding-left:18px}
.move__item:hover::before{width:100%}
.move__year{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;color:var(--accent)}
.move__t{font-family:var(--display);font-size:clamp(1.5rem,4vw,3rem);text-transform:uppercase;line-height:.95;letter-spacing:-.015em}
.move__x{font-size:.92rem;color:var(--muted);max-width:42ch;justify-self:end;text-align:right}
@media (max-width:800px){
  .move__item{grid-template-columns:1fr;gap:8px}
  .move__x{justify-self:start;text-align:left}
}

/* ---------- QUOTES ---------- */
.quotes{padding:clamp(70px,10vw,140px) var(--pad);max-width:1200px;margin:0 auto;text-align:center}
.quotes__stage{position:relative;min-height:clamp(190px,26vw,300px)}
.quote{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:22px;opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.quote.on{opacity:1;transform:none;pointer-events:auto}
.quote p{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,3.4rem);line-height:1.14;letter-spacing:-.015em}
.quote p::before{content:'“';color:var(--accent)}
.quote p::after{content:'”';color:var(--accent)}
.quote span{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.quotes__nav{display:flex;gap:10px;justify-content:center;margin-top:34px}
.quotes__nav button{width:32px;height:3px;background:var(--line);border-radius:4px;transition:background .4s,width .4s var(--ease)}
.quotes__nav button.on{background:var(--accent);width:56px}

/* ---------- CONTACT ---------- */
.contact{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,6vw,90px);
  padding:clamp(70px,10vw,150px) var(--pad);max-width:1500px;margin:0 auto;align-items:start
}

/* There was a `display:none !important` rule here that hid .nav__donate and
   every link whose href contained "donate" — the nav chip, the mobile sheet
   entry and the footer link all vanished with it, which is why the donate page
   looked "gone" even though it was being served. Removed now that giving is
   live. To take the donate route down again, delete the markup rather than
   hiding it, so nothing links to a page that is meant to be unreachable. */

/* Temporarily hide public-facing view/metric labels */
.loader__meta,
.arch-head__meta,
#archMeta{display:none !important}

/* Hide the homepage stats section (counts like 140+, 48, 26M, 9) */
.stats{display:none !important}
.contact__h{font-family:var(--display);font-size:clamp(2.6rem,8vw,7rem);line-height:.86;text-transform:uppercase;letter-spacing:-.025em;margin:16px 0 20px}
.contact__h em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}
.contact__sub{color:var(--muted);max-width:40ch}
.contact__mail{
  display:inline-block;margin-top:24px;font-family:var(--mono);font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.02em;
  border-bottom:2px solid var(--accent);padding-bottom:8px;color:var(--accent);font-weight:600;transition:opacity .3s
}
.contact__mail:hover{opacity:.8}
.contact--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;padding:clamp(60px,10vw,120px) var(--pad);border-top:1px solid var(--line)}
.contact__left .sec-kicker{font-family:var(--mono);font-size:clamp(.7rem,1vw,.85rem);letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.contact__left .contact__h{font-family:var(--display);font-size:clamp(2.6rem,9vw,8rem);text-transform:uppercase;letter-spacing:-.02em;line-height:.86;margin-top:12px}
.contact__left .contact__h em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}
.contact__left .contact__sub{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:40ch;color:var(--muted);line-height:1.5;margin-top:20px}
.contact__right{display:flex;flex-direction:column;gap:12px}
.contact__social{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:1rem;font-weight:500;padding:16px 20px;border:1px solid var(--line);border-radius:14px;color:var(--fg);transition:border-color .3s,color .3s,background .3s,transform .3s}
.contact__social:hover{border-color:var(--accent);color:var(--accent);background:rgba(212,255,63,.06);transform:translateX(4px)}
.contact__social svg{width:22px;height:22px;flex-shrink:0}
@media(max-width:768px){.contact--split{grid-template-columns:1fr;gap:32px}}

.form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field > span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font-size:.95rem;transition:border-color .3s,background .3s;resize:vertical;width:100%
}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field.err input,.field.err textarea{border-color:var(--hot)}
.form .btn{align-self:flex-start}
.form__status{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);min-height:1.2em}
@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(40px,5vw,70px) var(--pad) 26px;overflow:hidden}
.foot__huge{
  font-family:var(--display);font-size:clamp(3rem,17vw,17rem);line-height:.78;text-transform:uppercase;letter-spacing:-.03em;
  white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line);
  transition:color .5s,-webkit-text-stroke-color .5s;cursor:default
}
.foot__huge:hover{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.foot__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;
  margin-top:clamp(30px,4vw,54px);padding-top:24px;border-top:1px solid var(--line);
  font-size:.86rem
}
.foot__lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.foot__socials{display:flex;flex-direction:column;gap:5px}
.foot__socials a{position:relative;width:fit-content}
.foot__socials a::after{content:'↗';font-size:.7em;margin-left:5px;opacity:0;transition:opacity .3s,transform .3s}
.foot__socials a:hover{color:var(--accent)}
.foot__socials a:hover::after{opacity:1;transform:translate(2px,-2px)}
.foot__copy{color:var(--muted);font-size:.78rem}
#footClock{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* ==========================================================================
   DONATE PAGE (donate/index.html)
   ========================================================================== */
.sup-head{
  position:relative;overflow:hidden;
  padding:calc(var(--pad) + 96px) var(--pad) clamp(50px,7vw,96px);
  max-width:1500px;margin:0 auto
}
.sup-head__h1{
  /* the fit uses this box, so capping it caps the type on very wide screens */
  max-width:min(100%,58rem);margin:20px 0 clamp(24px,3vw,40px)
}
.sup-head__dek{
  font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,2rem);line-height:1.32;
  max-width:34ch;opacity:0;transform:translateY(20px);transition:all 1s var(--ease) .4s
}
.ready .sup-head__dek{opacity:1;transform:none}
.sup-head__actions{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:clamp(28px,3.5vw,44px)}
.sup-head__alt{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .3s,border-color .3s
}
.sup-head__alt:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- WHY ---------- */
.sup-why{background:var(--bg-2);padding-bottom:clamp(60px,8vw,110px)}
/* borders per item so a short last row leaves nothing showing through
   (4 items in a 3-column layout used to expose a tinted empty cell) */
.sup-why__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1500px;margin:0 auto;border-bottom:1px solid var(--line)
}
.reason{
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  padding:clamp(26px,3.2vw,46px) clamp(20px,2.4vw,36px)
}
.reason__n{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--accent)}
.reason__h{
  font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:.98;
  text-transform:uppercase;letter-spacing:-.015em;margin:14px 0 14px
}
.reason__p{color:var(--muted);font-size:.98rem;max-width:44ch}

/* ---------- GIVE PANEL ---------- */
.sup-give{padding-bottom:clamp(60px,8vw,110px)}
.give{padding:0 var(--pad);max-width:1500px;margin:0 auto}

/* frequency segmented control */
.give__freq{
  display:inline-flex;gap:4px;padding:5px;margin-bottom:clamp(22px,2.6vw,34px);
  border:1px solid var(--line);border-radius:100px;
  background:color-mix(in srgb,var(--card) 60%,transparent)
}
.give__freq-btn{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 20px;border-radius:100px;color:var(--muted);
  transition:background .35s,color .3s
}
.give__freq-btn:hover{color:var(--fg)}
.give__freq-btn.is-on{background:var(--accent);color:var(--accent-ink)}

/* amount cards */
.give__tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,1.6vw,20px)
}
.tier{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px);
  transition:border-color .35s,transform .45s var(--ease),background .35s
}
.tier:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.tier--on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.tier.is-picked{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,var(--card));
  box-shadow:0 0 0 1px var(--accent) inset
}
.tier__flag{
  position:absolute;top:-11px;left:clamp(20px,2.2vw,30px);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);padding:4px 10px;border-radius:100px
}
.tier__amt{
  display:block;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1;letter-spacing:-.02em
}
.tier__amt span{font-family:var(--mono);font-size:.26em;letter-spacing:.08em;color:var(--muted);margin-left:5px}
.tier.is-picked .tier__amt{color:var(--accent)}
.tier__name{
  display:block;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--accent)
}
.tier__blurb{display:block;color:var(--muted);font-size:.9rem;line-height:1.45}

/* custom amount */
.give__custom{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.4vw,30px)}
.give__custom-lab{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.give__custom-field{
  display:flex;align-items:center;gap:8px;
  border:1px dashed var(--line);border-radius:100px;padding:9px 18px;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  transition:border-color .3s
}
.give__custom-field:focus-within{border-color:var(--accent);border-style:solid}
.give__custom-field span{font-family:var(--mono);color:var(--muted)}
.give__custom-field input{width:11ch;font-family:var(--mono);font-size:1rem}
.give__custom-field input:focus{outline:none}
.give__custom-field input::-webkit-outer-spin-button,
.give__custom-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.give__custom-field input[type=number]{-moz-appearance:textfield;appearance:textfield}
.give__err{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
html[data-mode="paper"] .give__err{color:var(--accent)}

/* what it buys */
.give__buys{
  font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.65rem);line-height:1.35;
  margin-top:clamp(20px,2.4vw,30px);max-width:48ch;
  padding-left:16px;border-left:2px solid var(--accent)
}

/* payment buttons */
.give__pay{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,38px)}
.give__primary{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);
  padding:17px 26px;border-radius:100px;
  transition:transform .4s var(--ease),box-shadow .4s,opacity .3s
}
.give__primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.give__primary-amt{
  font-family:var(--display);font-size:1.35rem;letter-spacing:0;line-height:1;
  padding-left:16px;border-left:1px solid color-mix(in srgb,var(--accent-ink) 30%,transparent)
}
.give__primary.is-off{opacity:.42;pointer-events:none}
.give__upi{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 22px;border-radius:100px;border:1px solid var(--line);color:var(--fg);
  transition:border-color .3s,color .3s,background .3s
}
.give__upi:hover{border-color:var(--accent);color:var(--accent)}

/* unconfigured notice */
.give__notice{
  margin-top:22px;padding:16px 20px;border-radius:14px;max-width:64ch;
  border:1px dashed color-mix(in srgb,var(--hot) 55%,var(--line));
  background:color-mix(in srgb,var(--hot) 8%,transparent);
  font-size:.92rem;line-height:1.5
}
.give__notice code{font-family:var(--mono);font-size:.86em;color:var(--accent)}

/* UPI id + QR */
.give__upi-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,32px)}
.give__upi-lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.give__upi-id{
  font-family:var(--mono);font-size:.94rem;letter-spacing:.04em;
  background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:10px 16px;
  transition:border-color .3s,color .3s
}
.give__upi-id:hover{border-color:var(--accent);color:var(--accent)}
.give__upi-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7}
.give__qr{display:inline-block;margin-top:clamp(22px,2.6vw,32px);text-align:center}
.give__qr img{
  width:180px;height:180px;border-radius:12px;background:#fff;padding:10px;
  border:1px solid var(--line)
}
.give__qr figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px}
/* the frequency note sits between the control and the cards — give it room, or
   the first tier card crowds its last line */
.give__note{margin-bottom:clamp(18px,2vw,26px)}
/* the one-off-charge caveat and the live payment status, under the pay row */
.give__aside{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:14px;max-width:64ch;line-height:1.7
}
/* status is read, not scanned: bigger, sentence case, full contrast */
.give__status{font-size:.84rem;letter-spacing:.02em;text-transform:none;color:var(--fg);line-height:1.5}
.give__queries{margin-top:clamp(24px,3vw,36px);font-size:.92rem;color:var(--muted)}
.give__queries a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.give__queries a:hover{border-bottom-color:var(--accent)}

@media (max-width:560px){
  .give__primary{width:100%;justify-content:space-between}
  .give__upi{width:100%;justify-content:center}
}

/* ---------- PROMISES ---------- */
.sup-promises{padding-bottom:clamp(60px,8vw,110px)}
/* borders on the items, not a 1px gap over a tinted container — with 5 items the
   last row is short, and a tinted container shows through as an empty cell */
.promises{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1500px;margin:0 auto;border-bottom:1px solid var(--line)
}
.promise{
  display:flex;align-items:flex-start;gap:14px;
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,28px);font-size:1rem;line-height:1.45
}
.promise i{
  flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);font-style:normal;font-size:.72rem;margin-top:2px
}

/* ---------- FAQ ---------- */
.sup-faq{padding-bottom:clamp(60px,8vw,120px)}
.faq{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(18px,2.2vw,26px) 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.7rem);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;
  transition:color .3s
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__item summary i{
  flex:0 0 auto;position:relative;width:18px;height:18px
}
.faq__item summary i::before,.faq__item summary i::after{
  content:'';position:absolute;left:0;top:8px;width:18px;height:2px;background:currentColor;
  transition:transform .4s var(--ease)
}
.faq__item summary i::after{transform:rotate(90deg)}
.faq__item[open] summary{color:var(--accent)}
.faq__item[open] summary i::after{transform:rotate(0)}
.faq__a{padding:0 0 clamp(20px,2.4vw,28px);max-width:62ch}
.faq__a p{color:var(--muted);font-size:1rem;line-height:1.6}

/* ---------- WHERE IT GOES ---------- */
.sup-where{background:var(--bg-2);padding-bottom:clamp(60px,8vw,110px)}
.sup-where__wrap{padding:0 var(--pad);max-width:1500px;margin:0 auto}
.bar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,2.4fr) auto;
  align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(15px,1.8vw,22px) 0;border-bottom:1px solid var(--line)
}
.bar:first-child{border-top:1px solid var(--line)}
.bar__lab{font-size:1rem}
.bar__track{display:block;height:8px;border-radius:100px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden}
.bar__track i{display:block;height:100%;width:0;border-radius:100px;background:var(--accent);transition:width 1.2s var(--ease) .15s}
.bar.in .bar__track i{width:var(--w)}
.bar__pct{
  font-family:var(--display);font-size:1.75rem;line-height:1;color:var(--accent);
  min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums
}
.bar__pct i{font-style:normal}
.sup-where__note{
  margin-top:clamp(22px,2.6vw,34px);color:var(--muted);
  font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.4;max-width:52ch
}
@media (max-width:640px){
  .bar{grid-template-columns:1fr auto;gap:10px}
  .bar__track{grid-column:1 / -1;order:3}
}

/* ---------- OTHER WAYS ---------- */
.sup-other{padding-bottom:clamp(60px,8vw,110px)}
.sup-other__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(14px,1.8vw,26px);padding:0 var(--pad);max-width:1500px;margin:0 auto
}
.way{border-top:2px solid var(--accent);padding-top:20px}
.way h3{
  font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.9rem);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;margin-bottom:12px
}
.way p{color:var(--muted);font-size:.94rem}

/* ---------- CLOSING ---------- */
.sup-close{
  display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4vw,48px);
  text-align:center;padding:clamp(60px,9vw,130px) var(--pad);
  max-width:1000px;margin:0 auto
}
.sup-close blockquote{
  font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.2;letter-spacing:-.015em
}
.sup-close blockquote::before{content:'“';color:var(--accent)}
.sup-close blockquote::after{content:'”';color:var(--accent)}

/* ---------- COMMAND PALETTE ---------- */
.cmd{position:fixed;inset:0;z-index:9600;display:grid;place-items:start center;padding:12vh 20px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s}
.cmd.open{opacity:1;pointer-events:auto}
.cmd__box{width:min(560px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transform:translateY(-14px) scale(.98);transition:transform .45s var(--ease)}
.cmd.open .cmd__box{transform:none}
.cmd__box input{width:100%;padding:18px 20px;font-family:var(--mono);font-size:.9rem;border-bottom:1px solid var(--line)}
.cmd__box input:focus{outline:none}
.cmd__box ul{max-height:44vh;overflow:auto}
.cmd__box li{padding:13px 20px;display:flex;justify-content:space-between;gap:12px;font-size:.9rem;cursor:pointer}
.cmd__box li em{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal}
.cmd__box li.sel{background:var(--accent);color:var(--accent-ink)}
.cmd__box li.sel em{color:var(--accent-ink);opacity:.7}
.cmd__hint{display:flex;gap:6px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- BACK TO TOP ---------- */
.totop{
  position:fixed;right:var(--pad);bottom:var(--pad);z-index:8300;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .4s,transform .5s var(--ease),background .3s,color .3s
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------- VIDEO LIGHTBOX ----------
   Sits above the command palette (9600) but under the preloader (9800). */
html.lb-lock{overflow:hidden}
.lb{
  position:fixed;inset:0;z-index:9700;
  display:grid;place-items:center;padding:clamp(14px,3.5vw,52px);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)
}
.lb.is-open{opacity:1;pointer-events:auto}
.lb__back{
  position:absolute;inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(20px) saturate(1.3)
}
.lb__inner{
  position:relative;width:min(1120px,100%);
  display:flex;flex-direction:column;gap:0;
  transform:translateY(16px) scale(.985);
  transition:transform .5s var(--ease);
  background:var(--card);border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9)
}
.lb.is-open .lb__inner{transform:none}
.lb__frame{
  position:relative;width:100%;aspect-ratio:16/9;
  overflow:hidden;background:#000
}
.lb__frame iframe,.lb__frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb__details{padding:clamp(16px,2vw,24px) clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:8px}
.lb__title{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.7rem);letter-spacing:-.01em;color:#fff;font-weight:400;text-transform:uppercase}
.lb__info{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:clamp(11px,1.2vw,13px);letter-spacing:.1em;text-transform:uppercase}
.lb__info .lb__meta{color:var(--accent);font-weight:600}
.lb__info .lb__date{color:var(--muted)}
.lb__x{
  position:absolute;top:16px;right:16px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  transition:transform .4s var(--ease),background .3s
}
.lb__x::before,.lb__x::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:1.75px;
  background:currentColor;border-radius:2px
}
.lb__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb__x:hover{transform:scale(1.1);background:rgba(255,255,255,.2)}
@media (max-width:640px){
  .lb__x{top:10px;right:10px;width:36px;height:36px}
  .lb__x::before,.lb__x::after{width:14px}
}

/* ==========================================================================
   ARCHIVE PAGES (work/index.html, videos/index.html)
   Nothing new invented: the archive reuses .card and .reel wholesale and only
   overrides the sizing the pinned rail imposed on them.
   ========================================================================== */

/* ---------- "View all N stories" hand-off ---------- */
.sec-all{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:6px;
  transition:color .3s,border-color .3s,gap .35s var(--ease)
}
.sec-all:hover{color:var(--accent);border-color:var(--accent);gap:16px}
.sec-all i{font-style:normal;color:var(--accent)}
.sec-head .sec-all{margin-top:22px}

/* On the pinned rail the counter and the link share one absolutely-positioned
   column, so neither steals height from the 100svh pin. */
.work__aside{
  position:absolute;right:var(--pad);top:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right
}
.work__aside .work__count{position:static;margin-top:0}
@media (max-width:900px){
  .work__aside{position:static;align-items:flex-start;text-align:left;margin-top:16px;gap:14px}
}

/* ---------- ARCHIVE MASTHEAD ---------- */
.arch-head__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:clamp(26px,3.4vw,40px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.arch-head__meta b{color:var(--accent);font-weight:500}
.arch-head__meta a{border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .3s,border-color .3s}
.arch-head__meta a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- ARCHIVE GRIDS ---------- */
.arch{padding:0 var(--pad) clamp(70px,10vw,140px);max-width:1500px;margin:0 auto}
.arch__grid{
  display:grid;gap:clamp(16px,2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  align-items:start
}
/* the reels archive reuses .motion__grid, which already carries the page
   gutter and the max-width — so the wrapper must not add a second one */
.arch--reels{padding-left:0;padding-right:0;max-width:none}
/* the rail sized cards by hand; in a grid the track does it */
.card--arch{flex:1 1 auto;width:auto;height:100%}
@media (max-width:420px){
  .arch__grid{grid-template-columns:1fr}
}

/* a story with no public link is honest about it instead of faking a Read */
.card__nolink{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);opacity:.68
}

/* a reel with no youtube url and no link out: visible, catalogued, inert */
.reel--off{cursor:default}
.reel--off .reel__play{opacity:.2}
.reel--off:hover .reel__play{transform:scale(.85)}
.reel--off:hover > .reel__bg{transform:none;filter:var(--img-filter)}
.reel__soon{
  position:absolute;left:14px;top:14px;z-index:3;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:color-mix(in srgb,var(--bg) 82%,transparent);
  border:1px solid var(--line);border-radius:100px;padding:5px 10px
}

/* ---------- EMPTY STATE ---------- */
.blank{
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:clamp(34px,6vw,80px) clamp(22px,4vw,60px)
}
.blank__mark{
  font-family:var(--display);font-size:clamp(3rem,9vw,7rem);line-height:.78;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--line)
}
.blank__h{
  font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em
}
.blank__p{color:var(--muted);font-size:.95rem;max-width:48ch}
/* inside the pinned rail the empty state has to behave like a card */
.work__rail .blank{flex:0 0 auto;width:min(560px,80vw)}

/* ---------- MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
  .word i{transform:none}
  .fx-grain,.fx-scan{display:none}
}