/* ==========================================================================
   savitrithakur.in — SITE CHROME (header, index, footer, shared blocks)
   ========================================================================== */

/* ---------- Sticky header ---------- */
.site-head{
  position:sticky;top:0;z-index:120;
  background:rgba(247,242,233,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s var(--ease);
}
.site-head.is-stuck{box-shadow:0 1px 26px rgba(32,36,38,.09)}

/* tier 1 — archive strip */
.head-strip{background:var(--plum);color:rgba(247,242,233,.78)}
.head-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:34px;padding-block:.4rem}
.head-strip .meta{color:rgba(247,242,233,.72)}
.head-strip .strip-r{display:flex;align-items:center;gap:.9rem}
.head-strip .dot{width:4px;height:4px;border-radius:50%;background:var(--apricot);flex:none}
.site-head.is-stuck .head-strip{display:none}

/* tier 2 — identity + nav */
.head-main>.wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  min-height:74px;padding-block:.75rem;transition:min-height .3s var(--ease)}
.site-head.is-stuck .head-main>.wrap{min-height:62px}

.brand{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;flex:none;line-height:1}
.brand .bn{font-family:var(--display);font-size:clamp(1.125rem,1rem + .6vw,1.5rem);
  letter-spacing:-.015em;color:var(--plum);line-height:1}
.brand .bm{font-size:var(--t-meta);font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal)}
.brand:hover .bn{color:var(--teal)}

.head-nav{display:none;margin-left:auto;align-items:center;gap:clamp(.9rem,1.9vw,1.9rem)}
@media (min-width:1080px){.head-nav{display:flex}}
.head-nav a{
  font-size:var(--t-label);font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);position:relative;padding-block:.35rem;white-space:nowrap;
}
.head-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.head-nav a:hover{color:var(--plum)}
.head-nav a:hover::after,.head-nav a[aria-current="page"]::after{transform:scaleX(1)}
.head-nav a[aria-current="page"]{color:var(--plum)}

.index-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;flex:none;
  font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);border:1px solid var(--rule);padding:.7rem 1.05rem;border-radius:2px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
@media (min-width:1080px){.index-btn{margin-left:0}}
.index-btn:hover,.index-btn[aria-expanded="true"]{background:var(--plum);color:var(--cream);border-color:var(--plum)}
.index-btn .bars{display:grid;gap:3px;width:15px}
.index-btn .bars i{display:block;height:1px;background:currentColor;transition:transform .3s var(--ease)}
.index-btn[aria-expanded="true"] .bars i:first-child{transform:translateY(4px) rotate(45deg)}
.index-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.index-btn[aria-expanded="true"] .bars i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ---------- Full index overlay ---------- */
.site-index{
  position:fixed;inset:0;z-index:119;background:var(--plum);color:var(--cream);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  padding-top:clamp(92px,14vh,130px);padding-bottom:var(--sec-sm);
}
.site-index[data-open="true"]{opacity:1;visibility:visible;transform:none}
.site-index .ix-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.4rem;border-bottom:1px solid rgba(247,242,233,.18);margin-bottom:2rem}
.site-index .ix-head .label{color:var(--apricot)}
.site-index .ix-head p{color:rgba(247,242,233,.6);font-size:var(--t-small);max-width:44ch}
.ix-grid{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:680px){.ix-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,4vw,4rem)}}
@media (min-width:1080px){.ix-grid{grid-template-columns:repeat(3,1fr)}}
.ix-grid a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  padding:.95rem 0;border-bottom:1px solid rgba(247,242,233,.14);
  transition:padding-left .3s var(--ease),color .3s var(--ease);
}
.ix-grid a:hover,.ix-grid a:focus-visible{padding-left:.6rem;color:var(--apricot)}
.ix-grid a[aria-current="page"]{color:var(--apricot)}
.ix-grid .n{font-size:var(--t-meta);font-weight:700;letter-spacing:.1em;
  color:rgba(247,242,233,.58);flex:none;min-width:1.9em}
.ix-grid a:hover .n{color:var(--apricot)}
.ix-grid .t{font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .8vw,1.65rem);
  line-height:1.15;letter-spacing:-.015em}
.ix-foot{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(247,242,233,.18);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.ix-foot .meta{color:rgba(247,242,233,.55)}
.ix-foot a{color:var(--apricot);text-decoration:none;font-size:var(--t-label);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
.ix-foot a:hover{text-decoration:underline;text-underline-offset:.25em}
body.index-open{overflow:hidden}

/* ---------- Page masthead (shared skeleton, per-page composition in pages.css) ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--t-meta);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.crumbs a{text-decoration:none;color:var(--teal)}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--rule);color:rgba(32,36,38,.3)}
.crumbs [aria-current="page"]{color:var(--ink-soft)}
.on-dark .crumbs{color:rgba(247,242,233,.55)}
.on-dark .crumbs a{color:var(--apricot)}
.on-dark .crumbs li+li::before{color:rgba(247,242,233,.3)}
.on-dark .crumbs [aria-current="page"]{color:rgba(247,242,233,.8)}

.page-head{padding-block:clamp(2.5rem,1.6rem + 4vw,5rem) clamp(2rem,1.4rem + 3vw,4rem)}
.page-head .kicker{color:var(--teal);margin-bottom:1.1rem;display:block}
.page-head h1{margin-top:.5rem}
.page-head .lead{margin-top:1.6rem;max-width:56ch}

/* ---------- Dark / tinted surfaces ---------- */
.on-dark{background:var(--plum);color:rgba(247,242,233,.86)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--cream)}
.on-dark .lead{color:rgba(247,242,233,.76)}
.on-dark .label{color:var(--apricot)}
.on-dark .meta{color:rgba(247,242,233,.55)}
.on-dark .cl-rule{background:rgba(247,242,233,.2)}
.on-dark .opener .thread{background:rgba(247,242,233,.22)}
.on-dark .opener .label{color:var(--apricot)}
.on-dark .src-tag{color:var(--apricot);border-color:rgba(231,164,106,.4);background:rgba(231,164,106,.08)}
.on-dark a.src-tag:hover{background:rgba(231,164,106,.18)}
.on-dark .prose a{color:var(--apricot);text-decoration-color:rgba(231,164,106,.45)}
.on-dark figure.fig figcaption{color:rgba(247,242,233,.68);border-top-color:rgba(247,242,233,.2)}
.on-dark figure.fig figcaption .src{color:rgba(247,242,233,.5)}

.on-teal{background:var(--teal);color:rgba(247,242,233,.88)}
.on-teal h1,.on-teal h2,.on-teal h3,.on-teal h4{color:var(--cream)}
.on-teal .label{color:var(--peach)}
.on-teal .meta{color:rgba(247,242,233,.78)}
.on-teal .lead{color:rgba(247,242,233,.78)}
.on-teal .opener .thread{background:rgba(247,242,233,.24)}
.on-teal .opener .num{color:var(--peach)}
.on-teal .cl-rule{background:rgba(247,242,233,.22)}
.on-teal .cl-rule::before{background:var(--peach)}
.on-teal .src-tag{color:var(--peach);border-color:rgba(243,217,199,.4);background:rgba(243,217,199,.08)}
.on-cream-deep{background:var(--cream-deep)}
.on-mist{background:var(--mist)}

/* ---------- Shared content blocks ---------- */

/* Definition ledger — used for records/facts */
.ledger{border-top:1px solid var(--rule)}
.ledger>div{display:grid;gap:.25rem 2rem;padding:1.05rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.ledger>div{grid-template-columns:minmax(150px,26%) 1fr;align-items:baseline}}
.ledger dt{font-size:var(--t-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.ledger dd{margin:0;font-size:var(--t-small);line-height:1.55;color:var(--ink)}
.ledger dd strong{font-weight:700}
.on-dark .ledger,.on-dark .ledger>div{border-color:rgba(247,242,233,.18)}
.on-dark .ledger dt{color:rgba(247,242,233,.5)}
.on-dark .ledger dd{color:rgba(247,242,233,.88)}

/* Statistic block with mandatory provenance */
.stat{border-top:2px solid var(--plum);padding-top:1.1rem}
.stat .fig-n{font-family:var(--display);font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem);
  line-height:.95;letter-spacing:-.025em;color:var(--plum);display:block}
.stat .fig-u{font-size:var(--t-small);font-weight:700;color:var(--teal);margin-top:.35rem;display:block}
.stat .fig-d{font-size:var(--t-small);line-height:1.5;color:var(--ink-soft);margin-top:.6rem}
.stat .prov{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--rule);display:grid;gap:.3rem}
.stat .prov div{display:flex;gap:.6rem;font-size:var(--t-meta);line-height:1.45}
.stat .prov dt{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  min-width:5.5em;flex:none}
.stat .prov dd{margin:0;color:var(--ink-soft)}
.on-dark .stat{border-top-color:var(--apricot)}
.on-dark .stat .fig-n{color:var(--cream)}
.on-dark .stat .fig-u{color:var(--apricot)}
.on-dark .stat .fig-d{color:rgba(247,242,233,.75)}
.on-dark .stat .prov{border-top-color:rgba(247,242,233,.18)}
.on-dark .stat .prov dt{color:rgba(247,242,233,.45)}
.on-dark .stat .prov dd{color:rgba(247,242,233,.7)}

/* Pull quote — always attributed */
.pullquote{border-left:2px solid var(--apricot);padding-left:clamp(1.1rem,2.5vw,2rem);margin-block:2.2rem}
.pullquote blockquote{font-family:var(--display);font-size:clamp(1.375rem,1.1rem + 1.3vw,2rem);
  line-height:1.24;letter-spacing:-.018em;color:var(--plum);margin:0}
.pullquote figcaption{margin-top:1rem;font-size:var(--t-meta);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);line-height:1.6}
.pullquote figcaption strong{color:var(--teal);font-weight:700}
.on-dark .pullquote blockquote{color:var(--cream)}
.on-dark .pullquote figcaption{color:rgba(247,242,233,.55)}
.on-dark .pullquote figcaption strong{color:var(--apricot)}

/* Note / caveat panel — used to separate institution from individual */
.note{border:1px solid var(--rule);border-left:3px solid var(--teal);
  background:rgba(255,255,255,.55);padding:clamp(1.1rem,2.2vw,1.7rem)}
.note .label{color:var(--teal);display:block;margin-bottom:.6rem}
.note p{font-size:var(--t-small);line-height:1.6;color:var(--ink-soft);max-width:70ch}
.on-dark .note{background:rgba(247,242,233,.06);border-color:rgba(247,242,233,.2);border-left-color:var(--apricot)}
.on-dark .note .label{color:var(--apricot)}
.on-dark .note p{color:rgba(247,242,233,.76)}

/* Card — bordered, restrained */
.card{border:1px solid var(--rule);background:var(--white);padding:clamp(1.3rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:.85rem;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.card:hover{border-color:var(--teal)}
.card h3{font-size:var(--t-h4);font-family:var(--body);font-weight:700;letter-spacing:-.012em;line-height:1.3}
.card p{font-size:var(--t-small);line-height:1.6;color:var(--ink-soft)}
.on-dark .card{background:rgba(247,242,233,.05);border-color:rgba(247,242,233,.18)}
.on-dark .card p{color:rgba(247,242,233,.74)}
.on-dark .card:hover{border-color:var(--apricot)}

/* Link list with numbers */
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:padding-left .3s var(--ease)}
.linkrow:hover{padding-left:.55rem}
.linkrow .lt{font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);line-height:1.15}
.linkrow:hover .lt{color:var(--teal)}
.linkrow .la{color:var(--apricot);flex:none;transition:transform .3s var(--ease)}
.linkrow:hover .la{transform:translateX(5px)}

/* Filter bar (archive interfaces) */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.filters .fgroup{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.filters .flabel{font-size:var(--t-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);margin-right:.35rem}
.chip{
  font-size:var(--t-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem .85rem;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);
  background:var(--white);transition:all .22s var(--ease);
}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip[aria-pressed="true"]{background:var(--plum);color:var(--cream);border-color:var(--plum)}
.empty-state{padding:3rem 0;text-align:center;color:var(--ink-mute);font-size:var(--t-small)}

/* ---------- Footer ---------- */
.site-foot{background:var(--plum-deep);color:rgba(247,242,233,.72);padding-block:var(--sec-sm) 0}
.site-foot h2,.site-foot h3{color:var(--cream)}
.foot-top{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-bottom:var(--sec-sm)}
@media (min-width:880px){.foot-top{grid-template-columns:1.25fr 1fr 1fr}}
.foot-brand .fn{font-family:var(--display);font-size:clamp(1.6rem,1.3rem + 1.2vw,2.15rem);
  color:var(--cream);line-height:1.1;letter-spacing:-.018em;display:block}
.foot-brand .fm{margin-top:.7rem;font-size:var(--t-small);line-height:1.6;color:rgba(247,242,233,.62);max-width:36ch}
.foot-col .label{color:var(--apricot);display:block;margin-bottom:1.1rem}
.foot-links{display:grid;gap:.6rem}
.foot-links a{font-size:var(--t-small);text-decoration:none;color:rgba(247,242,233,.74);
  transition:color .25s var(--ease)}
.foot-links a:hover{color:var(--apricot)}
.foot-contact{display:grid;gap:.75rem;font-size:var(--t-small)}
.foot-contact .cn{color:var(--cream);font-weight:700}
.foot-contact a{color:rgba(247,242,233,.78);text-decoration:none}
.foot-contact a:hover{color:var(--apricot);text-decoration:underline;text-underline-offset:.2em}

.foot-social{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.foot-social a,.foot-social span{
  width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(247,242,233,.24);
  border-radius:2px;color:rgba(247,242,233,.8);transition:all .25s var(--ease);
}
.foot-social a:hover{background:var(--apricot);border-color:var(--apricot);color:var(--plum-deep)}
.foot-social svg{width:17px;height:17px;fill:currentColor}
.foot-social span{opacity:.3;cursor:not-allowed}

.foot-bottom{border-top:1px solid rgba(247,242,233,.16);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between}
.foot-bottom p,.foot-bottom a{font-size:var(--t-meta);letter-spacing:.06em;color:rgba(247,242,233,.55);
  text-decoration:none;line-height:1.6}
.foot-bottom a:hover{color:var(--apricot);text-decoration:underline;text-underline-offset:.2em}
.foot-bottom .credit strong{color:rgba(247,242,233,.8);font-weight:600}
.exit-btn{font-size:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(247,242,233,.5);border:1px solid rgba(247,242,233,.2);padding:.45rem .8rem;border-radius:2px;
  transition:all .25s var(--ease)}
.exit-btn:hover{color:var(--apricot);border-color:var(--apricot)}

/* Dark surfaces must recolour the section opener (number, label, thread).
   The plum "at a glance" ribbon is a dark surface without the .on-dark class. */
.on-dark .opener .num{color:var(--apricot)}
.ribbon .opener .num{color:var(--apricot)}
.ribbon .opener .label{color:var(--peach)}
.ribbon .opener .thread{background:rgba(247,242,233,.22)}
.sw-bleed .opener .num{color:var(--apricot)}
.sw-bleed .opener .label{color:var(--peach)}
.sw-bleed .opener .thread{background:rgba(247,242,233,.22)}

/* Anchor targets must clear the sticky header when jumped to. */
#main,[id]{scroll-margin-top:clamp(84px,12vh,120px)}
.site-head{scroll-margin-top:0}
/* The skip link must land on content, not behind the header. */
#main:focus{outline:none}