/* ==========================================================
   ritik.wtf
   One stylesheet for every page. No framework, no build step.
   Change a token here and every page follows.
   ========================================================== */

/* ----------------------------------------------------------
   TOKENS — Mithila pigments. kajal, never pure black.
   ---------------------------------------------------------- */
:root{
  --paper:oklch(0.968 0.010 84); --paper-2:oklch(0.943 0.014 82);
  --paper-3:oklch(0.912 0.017 80);
  --hair:oklch(0.868 0.018 78);  --hair-2:oklch(0.910 0.014 80);
  --ink:oklch(0.238 0.020 58);   --ink-2:oklch(0.452 0.022 62);
  --ink-3:oklch(0.622 0.020 70);
  --geru:oklch(0.548 0.138 42);  --geru-2:oklch(0.888 0.052 52);
  --haldi:oklch(0.762 0.150 82); --neel:oklch(0.398 0.108 264);
  --pipal:oklch(0.512 0.086 148);
  --grain:0.030;
  --sp-2xs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px;
  --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; --sp-3xl:64px; --sp-4xl:96px;
  --quint:cubic-bezier(.16,1,.3,1); --fast:.26s; --mid:.44s; --slow:.68s;
  color-scheme:light;
}
html[data-time="raat"]{
  --paper:oklch(0.186 0.032 266); --paper-2:oklch(0.222 0.034 266);
  --paper-3:oklch(0.262 0.034 265);
  --hair:oklch(0.322 0.032 265);  --hair-2:oklch(0.268 0.030 266);
  --ink:oklch(0.948 0.012 84);    --ink-2:oklch(0.782 0.018 78);
  --ink-3:oklch(0.598 0.022 74);
  --geru:oklch(0.702 0.142 46);   --geru-2:oklch(0.322 0.062 44);
  --haldi:oklch(0.828 0.142 85);  --neel:oklch(0.702 0.098 262);
  --pipal:oklch(0.688 0.092 148);
  --grain:0.046;              /* dark ground eats noise, so a touch more */
  color-scheme:dark;
}

/* ----------------------------------------------------------
   GROUND
   ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hind",-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
  transition:background-color var(--slow) var(--quint), color var(--slow) var(--quint);
}
/* flat colour reads as a template. this is the paper. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:5;
  opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-time="raat"] body::after{ mix-blend-mode:screen; }
::selection{ background:var(--geru-2); color:var(--ink); }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--geru); outline-offset:3px; border-radius:2px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.bloom{ display:block; color:var(--geru); flex:none; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.skip{
  position:absolute; left:var(--sp-md); top:-100px; z-index:99;
  background:var(--paper); color:var(--ink); border:1px solid var(--geru);
  padding:var(--sp-xs) var(--sp-md); border-radius:3px; text-decoration:none;
  font-size:.84rem; font-weight:600; transition:top var(--fast) var(--quint);
}
.skip:focus{ top:var(--sp-md); }

/* ----------------------------------------------------------
   TOP BAR — solid, not glass. a hairline is enough.
   the active page is marked with aria-current, so the 5px
   lotus needs no javascript.
   ---------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:60;
  background:var(--paper); border-bottom:1px solid var(--hair-2);
  transition:background-color var(--slow) var(--quint);
}
.bar-in{
  max-width:1080px; margin:0 auto; padding:var(--sp-sm) var(--sp-lg);
  display:flex; align-items:center; gap:var(--sp-md);
}
.mark{
  font-family:"Eczar",serif; font-weight:600; font-size:1rem;
  letter-spacing:.12em; text-decoration:none; flex:none;
}
.nav{ display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  white-space:nowrap; font-size:.82rem; font-weight:500; color:var(--ink-3);
  padding:var(--sp-2xs) var(--sp-sm); transition:color var(--fast) var(--quint);
}
.nav a .bloom{ width:5px; height:5px; opacity:0; transition:opacity var(--mid) var(--quint); }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"] .bloom{ opacity:1; }
/* the lamp shows where you are going: chandra in din, surya in raat.
   bare glyph, no ring — the button box is only there for the hit area. */
.lamp{
  flex:none; width:34px; height:34px; padding:0; display:grid; place-items:center;
  cursor:pointer; border:0; background:transparent; color:var(--ink-3);
  border-radius:50%;
  transition:color var(--fast), transform var(--fast) var(--quint);
}
.lamp svg{ width:22px; height:22px; display:block; }
.lamp .sun{ display:none; }
html[data-time="raat"] .lamp .moon{ display:none; }
html[data-time="raat"] .lamp .sun{ display:block; }
.lamp:hover{ color:var(--geru); }
.lamp:active{ transform:scale(.92); }

/* ----------------------------------------------------------
   SHELL + SECTION GRAMMAR
   ---------------------------------------------------------- */
.page{ width:100%; max-width:1080px; margin:0 auto; padding:0 var(--sp-lg); }
main{ flex:1 0 auto; }
.prose{ max-width:66ch; }

/* the divider: a hairline that breaks for one small lotus.
   quiet ink, not geru, so it never competes with the section heads. */
.rule{
  display:flex; align-items:center; gap:var(--sp-md);
  margin:clamp(56px,8vw,96px) 0;
}
.rule::before,.rule::after{ content:''; flex:1; border-top:1px solid var(--hair); }
.rule .bloom{ width:15px; height:15px; color:var(--ink-3); opacity:.75; }
.head{ display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-2xl); }
.head .bloom{ width:15px; height:15px; }
.head h1,.head h2,.head .lbl{
  font-family:"Hind",sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.head .n{ margin-left:auto; font-size:.72rem; color:var(--ink-3); }
.head-link{
  margin-left:auto; font-size:.78rem; font-weight:500; color:var(--ink-3);
  text-decoration:none; white-space:nowrap; transition:color var(--fast);
}
.head-link:hover{ color:var(--geru); }
.sub{
  font-size:.72rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--sp-md);
}

/* every inner page opens the same way, compact: the caps label,
   one quiet Eczar line under it, and the divider right below. */
.page-top{ padding:clamp(24px,4vw,40px) 0 0; }
.page-top .head{ margin-bottom:var(--sp-sm); }
.page-lede{
  font-family:"Eczar",serif; font-weight:400; line-height:1.4;
  font-size:clamp(1.02rem,1.8vw,1.22rem); letter-spacing:0;
  color:var(--ink-2); margin-bottom:0;
}
/* the divider hugs the page top instead of floating far below it */
.page-top + .rule{ margin:var(--sp-lg) 0 var(--sp-2xl); }
.page-note{ color:var(--ink-2); max-width:60ch; margin-bottom:var(--sp-2xl); }

/* ----------------------------------------------------------
   THE PANELS — every page hangs one painting. home has the
   raja; the inner pages have their own, smaller, on the same
   nail. text left, painting right, stacked on a phone.
   ---------------------------------------------------------- */
.top-split{ display:grid; gap:var(--sp-xl); align-items:center; }
@media (min-width:820px){
  .top-split{ grid-template-columns:1fr 262px; gap:var(--sp-3xl); }
}
.top-art{ justify-self:center; position:relative; }
.top-art .panel{
  width:min(252px,66vw); height:auto; color:var(--geru); display:block;
}
/* the same nail and the same unsettled hang as the hero, one
   beat slower so two paintings never swing in step. */
.top-art::before{
  content:''; position:absolute; z-index:1;
  top:calc(1.7% - 3px); left:50%; margin-left:-3px;
  width:6px; height:6px; border-radius:50%; background:var(--ink);
}
.top-art .panel{ transform-origin:50% 1.7%; animation:sway 9.4s ease-in-out infinite; }
.top-art{ animation:open 1.1s var(--quint) both .2s; }

/* sections fade up once, then get out of the way.
   gated on .reveal-ready so a missing script can never hide the page. */
.reveal-ready [data-reveal]{ opacity:0; transform:translateY(16px); }
[data-reveal]{
  transition:opacity var(--slow) var(--quint), transform var(--slow) var(--quint);
}
.reveal-ready [data-reveal].seen{ opacity:1; transform:none; }

/* ----------------------------------------------------------
   HERO — A · Split
   ---------------------------------------------------------- */
.hero{
  padding:clamp(48px,7vw,76px) 0 0;
}

.h-split{
  display:grid;
  gap:var(--sp-2xl);
  align-items:center;
}

@media (min-width:860px){
  .h-split{
    grid-template-columns:1.45fr 1fr;
    gap:clamp(48px,6vw,76px);
  }
}
.nm{
  font-family:"Eczar",serif; font-weight:600; line-height:.95; letter-spacing:-.015em;
  font-size:clamp(2.8rem,7vw,4.6rem); margin-bottom:var(--sp-md);
}
.tag{
  font-family:"Eczar",serif; font-weight:400; font-size:clamp(1.1rem,2.2vw,1.36rem);
  line-height:1.42; color:var(--ink-2); margin-bottom:var(--sp-lg); max-width:30ch;
}
.bio{ color:var(--ink-2); margin-bottom:var(--sp-xl); max-width:56ch; }
.bio a{
  color:var(--ink); text-decoration-color:var(--hair); text-underline-offset:3px;
  transition:color var(--fast), text-decoration-color var(--fast);
}
.bio a:hover{ color:var(--geru); text-decoration-color:var(--geru); }
.links{ display:flex; flex-wrap:wrap; gap:var(--sp-xs) var(--sp-lg); }
.links a{ position:relative; text-decoration:none; font-size:.9rem; font-weight:500;
  padding-bottom:3px; transition:color var(--fast); }
.links a::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;

  border-top:1px solid var(--geru-2);
  border-bottom:1px solid var(--geru-2);

  background:
    repeating-linear-gradient(
      45deg,
      var(--geru) 0 1px,
      transparent 1px 6px
    );

  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--mid) var(--quint);
}
.links a:hover{ color:var(--geru); }
.links a:hover::after{ transform:scaleX(1); }
.art{ justify-self:center; position:relative; }
.art .figure{ width:min(350px,76vw); height:auto; color:var(--geru); display:block; }
.halo{
  position:absolute; inset:-10% -8%; border-radius:50%; z-index:-1; opacity:.55;
  background:radial-gradient(circle,var(--geru-2) 0%,transparent 68%);
}

/* the hero staggers in on load. the bloom opens last. */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes open{ from{ opacity:0; transform:scale(.9) rotate(-9deg); } to{ opacity:1; transform:none; } }
.h-copy > *{ animation:rise .9s var(--quint) both; }
.h-copy > *:nth-child(1){ animation-delay:.05s; }
.h-copy > *:nth-child(2){ animation-delay:.13s; }
.h-copy > *:nth-child(3){ animation-delay:.21s; }
.h-copy > *:nth-child(4){ animation-delay:.29s; }
.h-copy > *:nth-child(5){ animation-delay:.37s; }
.art{ animation:open 1.3s var(--quint) both .34s; }

/* the panel hangs off one ink nail and never quite settles.
   pivot = the nail: frame's top rule sits at 5/300 of the svg height. */
.art::before{
  content:''; position:absolute; z-index:1;
  top:calc(1.7% - 4px); left:50%; margin-left:-4px;
  width:8px; height:8px; border-radius:50%; background:var(--ink);
}
.art .figure{ transform-origin:50% 1.7%; animation:sway 8s ease-in-out infinite; }
@keyframes sway{
  0%,100%{ transform:rotate(1.8deg); }
  50%{ transform:rotate(-1.8deg); }
}

/* ----------------------------------------------------------
   BLOGS — A · Dated rows
   ---------------------------------------------------------- */
.w-rows{ display:flex; flex-direction:column; }
.w-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-md) var(--sp-lg);
  align-items:baseline; padding:var(--sp-lg) 0; text-decoration:none;
  border-top:1px solid var(--hair-2);
}
.w-row:last-child{ border-bottom:1px solid var(--hair-2); }
@media (max-width:640px){
  .w-row{ grid-template-columns:1fr auto; }
  .w-row .when{ grid-column:1/-1; }
}
.w-row .when{
  font-size:.75rem; font-weight:500; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap; min-width:5.5rem;
}
.w-row h3{
  font-family:"Eczar",serif; font-weight:500; font-size:1.24rem; line-height:1.3;
  margin-bottom:var(--sp-2xs); transition:color var(--fast);
}
.w-row p{ font-size:.88rem; color:var(--ink-3); max-width:58ch; }
.w-row .go{ align-self:center; color:var(--ink-3);
  transition:transform var(--mid) var(--quint), color var(--fast); }
a.w-row:hover h3{ color:var(--geru); }
a.w-row:hover .go{ transform:translateX(5px); color:var(--geru); }

/* a post that is titled but not written yet. it sits in the list
   because the list is the plan, but it does not pretend to be a link. */
.w-row.draft h3,.w-row.draft p{ color:var(--ink-3); }
.w-row .soon{
  align-self:center; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
  border:1px solid var(--hair); border-radius:2px; padding:2px 7px;
}
.w-year{
  font-family:"Eczar",serif; font-weight:500; font-size:1.1rem; color:var(--ink-3);
  margin:var(--sp-2xl) 0 var(--sp-sm); font-variant-numeric:tabular-nums;
}
.more{
  display:inline-block; margin-top:var(--sp-lg); font-size:.84rem; font-weight:500;
  color:var(--ink-3); text-decoration:none; transition:color var(--fast);
}
.more:hover{ color:var(--geru); }

/* ----------------------------------------------------------
   BLOG POST — a dated column of prose under the shared chrome.
   Eczar for the title, Hind for the body, 66ch cap as ever.
   ---------------------------------------------------------- */
.post-title{
  font-family:"Eczar",serif; font-weight:600; line-height:1.14; letter-spacing:-.012em;
  font-size:clamp(1.9rem,4.4vw,2.7rem); max-width:24ch; margin-bottom:var(--sp-sm);
}
.post-meta{ font-size:.78rem; color:var(--ink-3); }
.post-body p{ margin-bottom:var(--sp-lg); }
.post-body p:last-child{ margin-bottom:0; }
.post-body + .more{ margin-top:var(--sp-2xl); }

/* ----------------------------------------------------------
   SINCE 1999 — the life ledger on the profile, a yatra of
   lotuses. one quiet ink bloom per stop, geru for the stop
   currently occupied. no bold, no dashes, one line each.
   ---------------------------------------------------------- */
.tl{ display:flex; flex-direction:column; max-width:72ch; }
.tl-row{
  display:grid; grid-template-columns:14px 8.5rem 1fr; gap:var(--sp-2xs) var(--sp-md);
  align-items:baseline; padding:var(--sp-sm) 0; border-top:1px solid var(--hair-2);
}
.tl-row:last-child{ border-bottom:1px solid var(--hair-2); }
/* baseline, not center: the row is as tall as the paragraph beside it,
   so centring drops the lotus further with every extra line it wraps. */
.tl-row .bloom{
  width:7px; height:7px; color:var(--ink-3); opacity:.75;
  align-self:baseline; transform:translateY(-1px);
}
.tl-row.now .bloom{ color:var(--geru); opacity:1; }
.tl-row .when{
  font-size:.78rem; font-weight:500; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tl-row p{ font-size:.92rem; color:var(--ink-2); }
@media (max-width:560px){
  .tl-row{ grid-template-columns:14px 1fr; }
  .tl-row p{ grid-column:2; }
}

/* ----------------------------------------------------------
   PROJECTS — A · Lead + grid
   ---------------------------------------------------------- */
.p-lead{
  display:grid; gap:var(--sp-xl); padding-bottom:var(--sp-2xl);
  border-bottom:1px solid var(--hair-2); margin-bottom:var(--sp-lg);
}
@media (min-width:820px){ .p-lead{ grid-template-columns:1fr 1.5fr; gap:var(--sp-3xl); } }
.p-lead .name{ font-family:"Eczar",serif; font-weight:600; font-size:2.2rem;
  line-height:1.05; margin-bottom:var(--sp-xs); }
.p-lead .role{ font-size:.74rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--geru); }
.p-lead .what{ color:var(--ink-2); margin-bottom:var(--sp-lg); max-width:58ch; }
.stack{ display:flex; flex-wrap:wrap; gap:var(--sp-2xs); margin-bottom:var(--sp-lg); }
.stack li{ font-size:.72rem; font-weight:500; color:var(--ink-3);
  background:var(--paper-2); padding:3px 10px; border-radius:999px; }
.p-grid{ display:grid; }
@media (min-width:760px){ .p-grid{ grid-template-columns:1fr 1fr; column-gap:var(--sp-3xl); } }
.p-cell{ display:block; text-decoration:none; padding:var(--sp-lg) 0;
  border-bottom:1px solid var(--hair-2); }
.p-cell h3{ font-family:"Eczar",serif; font-weight:500; font-size:1.14rem;
  margin-bottom:var(--sp-2xs); transition:color var(--fast); }
.p-cell p{ font-size:.88rem; color:var(--ink-3); }
.p-cell .yr{ float:right; font-size:.74rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; }
.p-cell:hover h3{ color:var(--geru); }

/* ----------------------------------------------------------
   FOOT — on every page
   ---------------------------------------------------------- */
.foot{ flex:none; border-top:1px solid var(--hair-2); margin-top:clamp(56px,8vw,96px); }
.foot-in{
  display:flex; align-items:center; gap:var(--sp-sm); flex-wrap:wrap;
  padding:var(--sp-lg) var(--sp-lg) var(--sp-2xl); font-size:.78rem; color:var(--ink-3);
}
.foot .bloom{ width:7px; height:7px; }
.foot a{ color:var(--ink-3); text-decoration:none; transition:color var(--fast); }
.foot a:hover{ color:var(--geru); }
.foot .icons{ display:flex; gap:var(--sp-md); margin-left:auto; }
.foot .icons a{ color:var(--ink-3); display:grid; place-items:center;
  transition:color var(--fast), transform var(--fast) var(--quint); }
.foot .icons a:hover{ color:var(--geru); transform:translateY(-1px); }
.foot .icons svg{ width:18px; height:18px; display:block; }
.foot .r{ font-variant-numeric:tabular-nums; }
.more.plst{ display:inline-flex; align-items:center; gap:6px; }
.more.plst svg{ width:15px; height:15px; }

/* ----------------------------------------------------------
   404
   ---------------------------------------------------------- */
.lost{ text-align:center; padding:clamp(64px,12vw,140px) 0; }
.lost .figure{ width:150px; height:auto; margin:0 auto var(--sp-xl); color:var(--geru); opacity:.55; }
.lost h1{ font-family:"Eczar",serif; font-weight:600; font-size:clamp(2rem,5vw,3rem);
  margin-bottom:var(--sp-sm); }
.lost p{ color:var(--ink-2); margin-bottom:var(--sp-lg); }

/* ----------------------------------------------------------
   FULL REDUCED-MOTION GATE
   ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal-ready [data-reveal]{ opacity:1; transform:none; }
  .stops{ scroll-snap-type:none; }
}