/* ==========================================================================
   savitrithakur.in — BASE
   Design system: "The Human Development Canvas" / motif: "Connected Lines"
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Palette */
  --plum:#3A233B;
  --plum-deep:#2A1829;
  --teal:#185C5A;
  --teal-deep:#0F403F;
  --apricot:#E7A46A;
  --peach:#F3D9C7;
  --mist:#D7E5E5;
  --cream:#F7F2E9;
  --cream-deep:#EFE7D9;
  --charcoal:#202426;
  --sage:#BFCFC5;
  --white:#FFFFFF;
  --grey:#737777;

  /* Semantic */
  --bg:var(--cream);
  --ink:var(--charcoal);
  --ink-soft:#4A5052;
  --ink-mute:#5F6363;          /* accessible text grey (palette --grey reserved for non-text) */
  --rule:rgba(32,36,38,.14);
  --rule-soft:rgba(32,36,38,.08);
  --accent:var(--teal);
  --accent-ink:#9E5717;        /* deepened apricot: the accent used AS TEXT on light surfaces */

  /* Type */
  --display:"Instrument Serif","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Fluid type scale */
  --t-display:clamp(2.5rem,1.35rem + 5.1vw,5.5rem);   /* 40 -> 88 */
  --t-h1:clamp(2.125rem,1.35rem + 3.4vw,4.25rem);      /* 34 -> 68 */
  --t-h2:clamp(1.875rem,1.4rem + 2.1vw,3.25rem);       /* 30 -> 52 */
  --t-h3:clamp(1.375rem,1.15rem + 1vw,2rem);           /* 22 -> 32 */
  --t-h4:clamp(1.125rem,1.03rem + .42vw,1.375rem);     /* 18 -> 22 */
  --t-lead:clamp(1.1875rem,1.09rem + .42vw,1.4375rem); /* 19 -> 23 */
  --t-body:clamp(1.0625rem,1.02rem + .21vw,1.1875rem); /* 17 -> 19 */
  --t-small:clamp(.9375rem,.92rem + .1vw,1rem);
  --t-meta:clamp(.6875rem,.66rem + .1vw,.75rem);       /* 11 -> 12 */
  --t-label:clamp(.75rem,.72rem + .12vw,.8125rem);     /* 12 -> 13 */

  /* Space */
  --gutter:clamp(1.25rem,.9rem + 1.6vw,2.75rem);
  --sec:clamp(4rem,2.6rem + 6vw,9rem);
  --sec-sm:clamp(2.5rem,1.8rem + 3vw,5rem);
  --maxw:1440px;
  --readw:68ch;

  --ease:cubic-bezier(.22,.72,.26,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0;padding:0}
ol[class],ul[class]{list-style:none}
img,picture,svg,video{max-width:100%;display:block}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
:where(a){color:inherit}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.68;
  letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.018em;text-wrap:balance}
.t-display{font-size:var(--t-display);line-height:.98;letter-spacing:-.028em}
.t-h1{font-size:var(--t-h1)}
.t-h2{font-size:var(--t-h2);line-height:1.06}
.t-h3{font-size:var(--t-h3);line-height:1.14}
.t-h4{font-size:var(--t-h4);line-height:1.24;font-family:var(--body);font-weight:700;letter-spacing:-.012em}
.lead{font-size:var(--t-lead);line-height:1.55;letter-spacing:-.011em;color:var(--ink-soft)}
.prose p+p{margin-top:1.05em}
.prose p{max-width:var(--readw)}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:rgba(24,92,90,.35)}
.prose a:hover{text-decoration-color:currentColor}
.measure{max-width:var(--readw)}
.mute{color:var(--ink-mute)}

/* Eyebrow / label — the typographic spine of the publication */
.label{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.3;
}
.meta{
  font-family:var(--body);
  font-size:var(--t-meta);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  line-height:1.4;
}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:960px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.section-sm{padding-block:var(--sec-sm)}
.grid{display:grid;gap:var(--gutter)}
@media (min-width:860px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:560px) and (max-width:859px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 5. Connected Lines motif ---------- */
/* A delicate node-and-thread mark used at section openings and transitions. */
.cl-mark{display:block;width:92px;height:22px;overflow:visible;color:var(--apricot)}
.cl-mark line,.cl-mark path{stroke:currentColor;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.cl-mark circle{fill:currentColor}

.cl-rule{
  position:relative;height:1px;background:var(--rule);border:0;margin:0;
}
.cl-rule::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--apricot);transform:translateY(-50%);
}

/* Section opener: number + label + thread */
.opener{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.6rem;flex-wrap:wrap}
.opener .num{font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--accent-ink)}
.opener .label{color:var(--teal)}
.opener .thread{flex:1 1 60px;min-width:40px;height:1px;background:var(--rule);position:relative;top:-.28em}

/* ---------- 6. Image plates (crop-safe) ---------- */
/* Every photograph sits on a tinted mount and is contained — never cropped. */
.plate{
  position:relative;display:block;background:var(--mist);
  border:1px solid var(--rule-soft);overflow:hidden;
}
.plate>img{width:100%;height:auto;display:block}
.plate.is-fixed{display:grid;place-items:center}
.plate.is-fixed>img{width:100%;height:100%;object-fit:contain;object-position:center}
.plate--cream{background:var(--cream-deep)}
.plate--sage{background:var(--sage)}
.plate--peach{background:var(--peach)}
.plate--plum{background:rgba(58,35,59,.10)}

figure.fig{margin:0}
figure.fig figcaption{
  margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--rule);
  font-size:var(--t-small);line-height:1.5;color:var(--ink-soft);max-width:60ch;
}
figure.fig figcaption .src{display:block;margin-top:.4rem;font-size:var(--t-meta);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}

/* ---------- 7. Source / provenance chips ---------- */
.src-tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-meta);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(24,92,90,.28);
  padding:.32rem .6rem;border-radius:2px;text-decoration:none;
  background:rgba(24,92,90,.04);
}
a.src-tag:hover{background:rgba(24,92,90,.1);border-color:rgba(24,92,90,.5)}
.src-tag::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--apricot);flex:none}

/* ---------- 8. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:1rem 1.6rem;border:1px solid currentColor;border-radius:2px;
  text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease);
}
.btn--solid{background:var(--plum);color:var(--cream);border-color:var(--plum)}
.btn--solid:hover{background:var(--teal);border-color:var(--teal)}
.btn--ghost{color:var(--plum)}
.btn--ghost:hover{background:var(--plum);color:var(--cream)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- 9. Accessibility ---------- */
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:500;
  background:var(--plum);color:var(--cream);padding:.85rem 1.25rem;
  font-size:var(--t-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-radius:0 0 3px 3px;transition:top .2s var(--ease);
}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.site-index :focus-visible{outline-color:var(--apricot)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 10. Reveal (progressive — visible without JS) ---------- */
html.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 11. Auth gate anti-flash ---------- */
html[data-auth="pending"]{visibility:hidden!important}