/* ==========================================================================
   Sri Saptakotishwar Devasthan — "The Unbroken Lamp"

   Three facts about this temple decide everything below.

   1. Worship has not stopped in 878 years. So a single brass thread runs the
      full height of every page and is never interrupted by a section break.
      Content hangs off it the way notes hang off a margin.
   2. The sanctum is a laterite cave lit only by oil lamps. So the ground is
      porous warm stone, not flat black, and a lamp travels down the thread
      with the reader. Light reveals; it is never ambient.
   3. Temple time is lunar. So the almanac — moon, paksha, Palkhi nights — is
      first-class furniture, not a footnote.
   ========================================================================== */

@font-face{font-family:"Eczar";src:url("../fonts/Eczar.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+20B9,U+2190-21FF;}
@font-face{font-family:"Eczar";src:url("../fonts/EczarDev.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0900-097F,U+A8E0-A8FF;}
@font-face{font-family:"Tiro";src:url("../fonts/Tiro.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;}

:root{
  /* laterite — iron-rich, warm, never neutral grey */
  --stone:#14100D; --stone-2:#1B1611; --stone-3:#241D17; --stone-4:#2E251D;
  --panel:rgba(27,22,17,.6);          /* inset panels, e.g. the almanac */
  --hair:rgba(214,207,195,.13); --hair-2:rgba(214,207,195,.075);

  /* lamplight */
  --flame:#E9B65E; --flame-hi:#FFD79A; --flame-dim:#A9823A;
  --ember:#B4643A;                     /* laterite oxide */

  /* text on stone */
  --ash:#DBD4C7; --ash-2:#A79D8E; --ash-3:#8C8377;

  --display:"Eczar",Georgia,serif;
  --text:"Tiro","Iowan Old Style",Georgia,serif;
  --micro:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;

  --maxw:1240px;
  --gut:clamp(18px,4.5vw,60px);
  --spine:clamp(30px,13vw,196px);      /* x-position of the unbroken thread */
  --navh:66px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--stone);}
body{
  margin:0;
  background-color:var(--stone);
  background-image:url("../img/laterite.webp");
  background-size:384px;
  background-blend-mode:overlay;
  color:var(--ash);
  font-family:var(--text);
  font-size:18px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* the grain is a whisper — it should read as stone, never as noise */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../img/laterite.webp") 0 0/384px;opacity:.06;mix-blend-mode:soft-light;}

img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;}
::selection{background:var(--flame-dim);color:#fff;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  line-height:1.08;text-wrap:balance;margin:0;}
p{text-wrap:pretty;}
.deva{font-family:var(--display);font-weight:600;}

.micro{font-family:var(--micro);font-size:10px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ash-3);margin:0;}
.micro-lit{color:var(--flame);}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--flame);color:#1A1206;
  padding:12px 20px;font-family:var(--micro);font-size:13px;font-weight:600;}
.skip:focus{left:12px;top:12px;}

/* ==========================================================================
   THE THREAD — one line, the whole document, never broken
   ========================================================================== */
main{position:relative;z-index:1;}
main::before{                                  /* the thread itself */
  content:"";position:absolute;left:var(--spine);top:0;bottom:0;width:1px;
  background:#8A6526;opacity:.55;z-index:0;
}
/* the lamp — fixed to the viewport, so it travels the thread as you read */
.lamp{position:fixed;left:var(--spine);top:50%;width:1px;height:38vh;
  transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(233,182,94,.75) 44%,rgba(233,182,94,.75) 56%,transparent);
  filter:drop-shadow(0 0 6px rgba(233,182,94,.5));
}
.lamp::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,182,94,.10) 0%,rgba(233,182,94,.035) 42%,transparent 68%);
  animation:flicker 7s ease-in-out infinite;}
@keyframes flicker{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1);}
                   50%{opacity:1;transform:translate(-50%,-50%) scale(1.09);}}
@media (prefers-reduced-motion:reduce){.lamp{display:none;}}

/* a mark ON the thread — the dot plus its marginal label */
.knot{position:relative;}
.knot::before{content:"";position:absolute;left:calc(var(--spine) - 3px);top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--flame);
  box-shadow:0 0 0 4px var(--stone),0 0 14px rgba(233,182,94,.6);z-index:3;}

/* ==========================================================================
   PAGE FRAME — margin column left of the thread, content right of it
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.leaf{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:calc(var(--spine) - var(--gut)) minmax(0,1fr);
  column-gap:clamp(18px,3.4vw,52px);}
.leaf > .margin{grid-column:1;}
.leaf > .body{grid-column:2;min-width:0;}
@media(max-width:760px){
  .leaf{grid-template-columns:1fr;}
  .leaf > .margin{grid-column:1;margin-bottom:10px;}
}
.margin .m{font-family:var(--micro);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-3);line-height:1.7;padding-top:.35em;}
.margin .yr{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,27px);
  color:var(--flame);letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums;}

section{position:relative;padding-block:clamp(58px,8vw,116px);}
.tight{padding-block:clamp(34px,4.5vw,60px);}
/* anchored sections must clear the fixed nav when scrolled to */
[id]{scroll-margin-top:calc(var(--navh) + clamp(26px,4vw,60px));}
/* these three own their vertical box entirely */
section.threshold,section.headpiece,section.plate-band{padding-block:0;}

/* ==========================================================================
   NAV — sits on the stone, gets a hairline once you have left the threshold
   ========================================================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;
  border-bottom:1px solid transparent;transition:background .45s,border-color .45s,backdrop-filter .45s;}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  min-height:var(--navh);display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);}
.nav[data-solid="true"]{background:rgba(20,16,13,.9);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--hair);}

.mark{display:block;text-decoration:none;margin-right:auto;flex:0 1 auto;min-width:0;}
.mark .wm{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.6vw,22px);letter-spacing:-.01em;line-height:1.12;color:var(--ash);
  white-space:nowrap;transition:color .25s;}
.mark:hover .wm{color:var(--flame);}
.mark .ws{display:block;font-family:var(--micro);font-size:10px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash-3);margin-top:3px;white-space:nowrap;}
.sigil{width:24px;height:24px;flex:none;color:var(--flame);}
@media(max-width:1240px){.mark .ws{letter-spacing:.18em;}}

.links{display:flex;gap:clamp(13px,1.9vw,26px);align-items:center;}
.nav a.lnk{font-family:var(--micro);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ash-2);
  padding:7px 0;position:relative;white-space:nowrap;transition:color .22s;
  display:inline-flex;align-items:center;min-height:26px;}
.nav a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;
  background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.nav a.lnk:hover{color:var(--ash);}
.nav a.lnk:hover::after,.nav a.lnk[aria-current="page"]::after{transform:scaleX(1);}
.nav a.lnk[aria-current="page"]{color:var(--flame);}

/* live temple state, in place of a marketing button */
.state{display:inline-flex;align-items:center;gap:8px;flex:none;text-decoration:none;
  font-family:var(--micro);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash-2);padding:6px 0 6px 15px;
  border-left:1px solid var(--hair);transition:color .25s;min-height:32px;}
.state:hover{color:var(--ash);}
.state .pip{width:5px;height:5px;border-radius:50%;background:var(--flame);flex:none;
  box-shadow:0 0 8px var(--flame);}
.state .pip.shut{background:var(--ember);box-shadow:none;}
.state b{font-weight:600;color:var(--flame);}

.burger{display:none;background:none;border:1px solid var(--hair);color:var(--ash);
  width:38px;height:34px;cursor:pointer;align-items:center;justify-content:center;flex:none;padding:0;}
.burger span{display:block;width:15px;height:1px;background:currentColor;position:relative;transition:background .2s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:15px;height:1px;
  background:currentColor;transition:transform .3s;}
.burger span::before{top:-5px;} .burger span::after{top:5px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}

@media(max-width:1180px){
  .burger{display:flex;}
  .links{position:absolute;top:100%;left:0;right:0;
    max-height:calc(100svh - var(--navh));overflow-y:auto;
    background:var(--stone-2);border-bottom:1px solid var(--hair);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 26px;
    box-shadow:0 24px 50px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s,transform .3s,visibility .3s;}
  .links[data-open="true"]{opacity:1;visibility:visible;transform:none;}
  .nav a.lnk{font-size:15.5px;letter-spacing:.12em;padding:16px 0;min-height:52px;
    border-bottom:1px solid var(--hair-2);}
  .nav a.lnk::after{display:none;}
  .state{display:none;}
}

/* ==========================================================================
   THRESHOLD — the homepage. Exactly one viewport, never a pixel more.
   ========================================================================== */
.threshold{position:relative;height:100svh;min-height:560px;
  display:grid;grid-template-rows:1fr auto;overflow:hidden;isolation:isolate;}
.threshold .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:28% 44%;z-index:0;
  filter:saturate(.78) contrast(1.08) brightness(.6);
  animation:settle 2.6s cubic-bezier(.2,.7,.25,1) backwards;}
@keyframes settle{from{opacity:0;transform:scale(1.07);}to{opacity:1;transform:none;}}
.threshold::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 54% 52% at 26% 48%,rgba(233,182,94,.18),transparent 60%),
    linear-gradient(to left,rgba(10,8,6,.86) 0%,rgba(10,8,6,.6) 38%,rgba(10,8,6,.12) 72%,transparent 100%),
    radial-gradient(ellipse 90% 76% at 36% 46%,transparent 26%,rgba(10,8,6,.62) 78%,rgba(10,8,6,.92) 100%),
    linear-gradient(to bottom,rgba(10,8,6,.78) 0%,rgba(10,8,6,.16) 22%,rgba(10,8,6,.3) 56%,rgba(10,8,6,.95) 100%);}

.threshold .say{position:relative;z-index:3;align-self:center;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:calc(var(--navh) + 20px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  column-gap:clamp(18px,3.4vw,52px);}
.threshold .say > div{grid-column:2;text-align:right;justify-self:end;max-width:min(58ch,100%);}
.threshold .say .gloss{margin-left:auto;}
@media(max-width:860px){
  .threshold .say{grid-template-columns:1fr;align-content:end;padding-bottom:clamp(10px,3vh,34px);}
  .threshold .say > div{grid-column:1;text-align:left;justify-self:start;}
  .threshold .say .gloss{margin-left:0;}
}

.threshold .san{font-family:var(--display);font-weight:600;font-size:clamp(13px,1.5vw,16px);
  letter-spacing:.06em;color:var(--flame);margin:0 0 clamp(14px,2vh,22px);
  animation:lift 1.5s .5s cubic-bezier(.2,.7,.25,1) both;}
.threshold h1{font-size:clamp(36px,6.6vw,84px);letter-spacing:-.035em;line-height:.97;
  color:#F4EEE2;max-width:13ch;margin:0;
  text-shadow:0 6px 44px rgba(0,0,0,.75);
  animation:lift 1.6s .68s cubic-bezier(.2,.7,.25,1) both;}
.threshold h1 em{font-style:normal;color:var(--flame-hi);display:block;}

/* the shloka carries the threshold — Devanagari set as display type.
   It is lit from below, the way the murti is: pale at the top of the verse,
   deepening into lamp-gold at the closing line nearest the diyas. */
.threshold h1.shloka{font-size:clamp(21px,2.9vw,40px);line-height:1.34;letter-spacing:0;
  max-width:none;color:#F6F0E4;font-weight:400;
  text-shadow:0 4px 30px rgba(0,0,0,.8),0 0 60px rgba(233,182,94,.14);}

@supports (background-clip:text) or (-webkit-background-clip:text){
  .threshold h1.shloka{
    background-image:linear-gradient(176deg,
      #C98F3A  0%,
      #E9B65E 14%,
      #F7E2B4 26%,
      #FFFBF2 33%,   /* the lit band */
      #F4D99F 40%,
      #E9B65E 54%,
      #CF9A45 74%,
      #B9832F 100%);
    background-size:100% 320%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 3px 22px rgba(0,0,0,.85))
           drop-shadow(0 0 26px rgba(233,182,94,.26));
    animation:lift 1.6s .68s cubic-bezier(.2,.7,.25,1) both,
              emberlight 12s 1.9s ease-in-out infinite;
  }
}
/* lamplight passing slowly over the verse, top to bottom and back */
@keyframes emberlight{
  0%   {background-position:0% 100%;}
  50%  {background-position:0% 0%;}
  100% {background-position:0% 100%;}
}
@media (prefers-reduced-motion:reduce){
  .threshold h1.shloka{animation:none;background-position:0% 46%;}
}
.threshold h1.shloka span{display:block;}
/* the four lines read as one block — only a hairline of air between couplets */
.threshold h1.shloka span:nth-child(2){margin-bottom:.16em;}
.threshold .gloss{font-family:var(--text);font-style:italic;
  font-size:clamp(14.5px,1.6vw,18px);line-height:1.6;color:var(--flame);
  max-width:46ch;margin:clamp(20px,2.8vh,32px) 0 0;
  animation:lift 1.6s .82s cubic-bezier(.2,.7,.25,1) both;}
.threshold .place{font-family:var(--micro);font-size:clamp(9.5px,1vw,10.5px);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ash-3);
  margin:clamp(14px,2vh,22px) 0 0;animation:lift 1.6s .88s cubic-bezier(.2,.7,.25,1) both;}
@keyframes lift{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* the sill — pinned to the exact bottom of the viewport */
.sill{position:relative;z-index:3;border-top:1px solid var(--hair);
  background:linear-gradient(to top,rgba(10,8,6,.72),transparent);
  animation:lift 1.6s 1.05s cubic-bezier(.2,.7,.25,1) both;}
.sill-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut) 16px;
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;}
.sill .cell{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sill .k{font-family:var(--micro);font-size:9px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash-3);}
.sill .v{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.5vw,17px);
  color:var(--ash);letter-spacing:-.005em;line-height:1.25;}
.sill .v b{color:var(--flame);font-weight:600;}
.sill .moon{margin-left:auto;display:flex;align-items:center;gap:11px;}
.sill .moon svg{width:26px;height:26px;flex:none;}
.enter{margin-left:auto;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--micro);font-size:9.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ash-2);transition:color .25s;min-height:26px;}
.enter:hover{color:var(--flame);}
.enter i{position:relative;width:34px;height:1px;background:rgba(219,212,199,.3);
  overflow:visible;transition:background .3s;}
.enter i::after{content:"";position:absolute;top:-1px;left:0;width:11px;height:3px;
  border-radius:2px;background:var(--flame);
  box-shadow:0 0 8px rgba(233,182,94,.9),0 0 16px rgba(233,182,94,.5);
  animation:travel 2.8s cubic-bezier(.55,0,.45,1) infinite;}
.enter:hover i{background:rgba(219,212,199,.5);}
@keyframes travel{
  0%   {transform:translateX(0);opacity:0;}
  18%  {opacity:1;}
  78%  {opacity:1;}
  100% {transform:translateX(23px);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .enter i::after{animation:none;transform:translateX(11px);}
}
@media(max-width:620px){
  .sill-in{gap:14px 20px;padding-bottom:14px;}
  .sill .moon{margin-left:0;}
  .enter{margin-left:0;width:100%;}
}

/* ==========================================================================
   HEADPIECE — inner pages. Shorter, same grammar as the threshold.
   ========================================================================== */
.headpiece{position:relative;min-height:clamp(300px,50svh,480px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;}
.headpiece img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(.8) brightness(.62);}
.headpiece::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%,rgba(233,182,94,.1),transparent 62%),
    linear-gradient(to bottom,rgba(10,8,6,.82) 0%,rgba(10,8,6,.28) 34%,rgba(10,8,6,.94) 100%);}
.headpiece .hp{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--navh) + 54px) var(--gut) clamp(30px,4.4vw,52px);
  display:grid;grid-template-columns:calc(var(--spine) - var(--gut)) minmax(0,1fr);
  column-gap:clamp(18px,3.4vw,52px);}
.headpiece .hp > div{grid-column:2;}
@media(max-width:760px){.headpiece .hp{grid-template-columns:1fr;}
  .headpiece .hp > div{grid-column:1;}}
.headpiece h1{font-size:clamp(31px,5.2vw,58px);letter-spacing:-.03em;color:#F4EEE2;
  margin:12px 0 0;max-width:17ch;text-shadow:0 5px 32px rgba(0,0,0,.7);}
.headpiece .lede{font-family:var(--text);font-size:clamp(16px,1.9vw,19.5px);color:var(--ash-2);
  max-width:52ch;margin:16px 0 0;line-height:1.65;}

/* ==========================================================================
   CONTENT
   ========================================================================== */
.claim{font-family:var(--display);font-weight:600;font-size:clamp(27px,4.4vw,50px);
  letter-spacing:-.03em;line-height:1.06;color:var(--head);max-width:17ch;margin:0;}
.claim em{font-style:normal;color:var(--flame);}
.said{font-size:clamp(17px,1.9vw,19.5px);color:var(--ash-2);max-width:56ch;margin:22px 0 0;}
.said b{color:var(--flame);font-weight:400;}

.prose p{color:var(--ash-2);margin:0 0 17px;}
.prose p:last-child{margin-bottom:0;}
.prose h2{font-size:clamp(24px,3.4vw,38px);margin-bottom:16px;color:var(--head);}
.prose h3{font-size:clamp(20px,2.5vw,27px);margin-bottom:12px;color:var(--head);}
.prose strong{color:var(--ash);font-weight:400;}

/* an entry in the record — hangs off the thread with its date in the margin */
.entry{padding-block:clamp(26px,3.4vw,40px);border-top:1px solid var(--hair-2);}
.entry:first-of-type{border-top:none;}
.entry h3{font-size:clamp(21px,2.7vw,30px);margin-bottom:11px;}
.entry p{margin:0;color:var(--ash-2);font-size:17px;}
.entry .aside{font-family:var(--micro);font-size:12.5px;line-height:1.72;color:var(--ash-3);
  margin:14px 0 0;padding-left:16px;border-left:1px solid var(--hair);}
.entry.pivot h3{color:var(--flame);}

/* full-bleed plate with a line over it */
.plate-band{position:relative;min-height:clamp(280px,46svh,460px);display:flex;align-items:center;
  overflow:hidden;padding:0;
  /* The plate is dark in BOTH templates, so it carries the dark-ground
     palette locally. Anything dropped inside it stays legible without
     needing a per-theme override. */
  --flame:#E9B65E; --flame-hi:#FFD79A; --flame-dim:#A9823A;
  --head:#F4EEE2; --ash:#DBD4C7; --ash-2:#A79D8E; --ash-3:#8C8377;}
.plate-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) brightness(.58);}
.plate-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,8,6,.92) 0%,rgba(10,8,6,.5) 58%,rgba(10,8,6,.34) 100%);}
.plate-band .pb{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(38px,6vw,80px) var(--gut);
  display:grid;grid-template-columns:calc(var(--spine) - var(--gut)) minmax(0,1fr);
  column-gap:clamp(18px,3.4vw,52px);}
.plate-band .pb > div{grid-column:2;}
@media(max-width:760px){.plate-band .pb{grid-template-columns:1fr;}
  .plate-band .pb > div{grid-column:1;}}
.plate-band blockquote{margin:0;max-width:40ch;font-family:var(--display);font-weight:400;
  font-size:clamp(20px,2.9vw,32px);line-height:1.28;letter-spacing:-.018em;color:#F4EEE2;}
.plate-band cite{display:block;font-family:var(--micro);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--flame);font-style:normal;margin-top:20px;}

/* ways inward — a list, not a card grid */
.ways{display:grid;}
.way{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,17vw,232px);
  gap:clamp(18px,3vw,44px);align-items:center;text-decoration:none;
  padding-block:clamp(22px,3vw,34px);border-top:1px solid var(--hair-2);
  transition:padding-left .4s cubic-bezier(.2,.7,.25,1);}
.way:last-child{border-bottom:1px solid var(--hair-2);}
.way:hover{padding-left:14px;}
.way h3{font-size:clamp(23px,3.2vw,36px);color:var(--head);transition:color .25s;}
.way:hover h3{color:var(--flame);}
.way p{margin:8px 0 0;color:var(--ash-3);font-size:15.5px;max-width:44ch;}
.way .shot{position:relative;overflow:hidden;aspect-ratio:5/3;}
.way .shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.7);
  transition:transform .8s cubic-bezier(.2,.7,.25,1),filter .5s;}
.way:hover .shot img{transform:scale(1.07);filter:saturate(.95) brightness(.86);}
.way .idx{font-family:var(--micro);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:var(--flame-dim);display:block;margin-bottom:9px;}
@media(max-width:700px){
  .way{grid-template-columns:1fr;gap:14px;}
  .way .shot{order:-1;aspect-ratio:16/9;}
}

/* ==========================================================================
   ALMANAC — the lunar panel. Temple time, given its own furniture.
   ========================================================================== */
.almanac{border:1px solid var(--hair);background:var(--panel);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,38px);
  padding:clamp(22px,3vw,34px);align-items:center;}
@media(max-width:620px){.almanac{grid-template-columns:1fr;}}
.almanac .disc{width:clamp(72px,9vw,104px);height:clamp(72px,9vw,104px);flex:none;
  color:var(--flame);}
.sill .moon [data-moon]{color:var(--flame);}
.almanac .rows{display:grid;gap:11px;}
.almanac .r{display:grid;grid-template-columns:clamp(78px,11vw,116px) minmax(0,1fr);gap:14px;
  align-items:baseline;}
.almanac .r dt{font-family:var(--micro);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-3);margin:0;}
.almanac .r dd{margin:0;font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ash);}
.almanac .r dd .dv{font-family:var(--display);color:var(--flame);}
:root[data-theme="light"] .almanac .r dd .dv{color:var(--flame-hi);}
.almanac .note{font-family:var(--micro);font-size:11px;color:var(--ash-3);margin:14px 0 0;
  line-height:1.7;letter-spacing:.02em;}

/* ==========================================================================
   TABULAR — the utsav register
   ========================================================================== */
.register{display:grid;}
.reg{display:grid;grid-template-columns:clamp(96px,12vw,140px) minmax(0,1.2fr) minmax(0,1.3fr);
  gap:clamp(12px,2.4vw,30px);padding-block:17px;border-top:1px solid var(--hair-2);align-items:baseline;}
.reg:last-child{border-bottom:1px solid var(--hair-2);}
@media(max-width:800px){.reg{grid-template-columns:1fr;gap:5px;padding-block:15px;}}
.reg .d{font-family:var(--micro);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--flame);font-variant-numeric:tabular-nums;}
.reg.gone .d{color:var(--ash-3);}
.reg .n{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ash);letter-spacing:-.01em;}
.reg .c{font-family:var(--micro);font-size:11px;color:var(--ash-3);margin-top:3px;letter-spacing:.04em;}
.reg .r{font-family:var(--micro);font-size:12.5px;color:var(--ash-2);line-height:1.65;}
.reg .r b{color:var(--ash);font-weight:600;}
.tag{font-family:var(--micro);font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flame);border:1px solid currentColor;padding:2px 6px;
  margin-left:9px;vertical-align:2px;}
/* the flame marks an utsav night, in place of a ranking word */
.utsav{display:inline-block;margin-left:10px;vertical-align:1px;color:var(--flame);
  line-height:0;}
.utsav svg{width:10px;height:13.3px;display:inline-block;
  filter:drop-shadow(0 0 6px rgba(233,182,94,.55));}
.filters{display:inline-flex;gap:0;border:1px solid var(--hair);}
.filters button{font-family:var(--micro);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:10px 17px;border:none;background:none;cursor:pointer;
  color:var(--ash-3);transition:color .2s,background .2s;min-height:34px;}
.filters button+button{border-left:1px solid var(--hair);}
.filters button[aria-pressed="true"]{background:var(--flame);color:#1A1206;}

/* ==========================================================================
   NOTES GRID — practical information
   ========================================================================== */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:0 clamp(24px,4vw,56px);}
.note{padding-block:clamp(20px,2.6vw,30px);border-top:1px solid var(--hair-2);}
.note .lbl{font-family:var(--micro);font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--flame-dim);margin:0 0 11px;}
.note h3{font-size:18.5px;margin-bottom:10px;}
.note p{margin:0 0 8px;color:var(--ash-2);font-size:15.5px;}
.note p:last-child{margin-bottom:0;}
.note a{color:var(--flame);text-decoration:none;border-bottom:1px solid rgba(233,182,94,.35);
  display:inline-flex;align-items:center;min-height:24px;}
.note a:hover{border-bottom-color:var(--flame);}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.6vw,40px);}
.btn{font-family:var(--micro);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:15px 27px;display:inline-flex;
  align-items:center;gap:10px;border:1px solid transparent;min-height:46px;
  transition:background .25s,color .25s,border-color .25s;}
.btn-flame{background:var(--flame);color:#1A1206;}
.btn-flame:hover{background:var(--flame-hi);}
.btn-line{border-color:var(--hair);color:var(--ash);}
.btn-line:hover{border-color:var(--flame);color:var(--flame);}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.dl{margin:0;}
.dl > div{display:grid;grid-template-columns:clamp(88px,11vw,120px) minmax(0,1fr);gap:16px;
  padding-block:15px;border-top:1px solid var(--hair-2);align-items:baseline;}
.dl dt{font-family:var(--micro);font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-3);}
.dl dd{margin:0;font-size:17px;color:var(--ash);}
.dl dd a{color:var(--flame);text-decoration:none;border-bottom:1px solid rgba(233,182,94,.3);
  display:inline-flex;align-items:center;min-height:24px;}
.dl dd a:hover{border-bottom-color:var(--flame);}
.dl dd .stack{display:block;margin-top:4px;}
@media(max-width:560px){.dl > div{grid-template-columns:1fr;gap:3px;}}

.people{display:grid;}
.people > div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding-block:14px;border-top:1px solid var(--hair-2);}
.people > div:last-child{border-bottom:1px solid var(--hair-2);}
.people .nm{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ash);}
.people .rl{font-family:var(--micro);font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash-3);}
.people a{font-family:var(--micro);font-size:12.5px;color:var(--flame);text-decoration:none;
  display:inline-flex;align-items:center;min-height:24px;}

figure{margin:0;}
figure img{width:100%;filter:saturate(.86);}
figcaption{font-family:var(--micro);font-size:11px;color:var(--ash-3);margin-top:10px;letter-spacing:.03em;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);}
@media(max-width:620px){.duo{grid-template-columns:1fr;}}

/* ==========================================================================
   FOOT
   ========================================================================== */
.foot{position:relative;z-index:1;border-top:1px solid var(--hair);
  padding-block:clamp(46px,6vw,76px) 28px;background:rgba(10,8,6,.5);}
.foot-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(22px,3.4vw,46px);}
@media(max-width:860px){.foot-cols{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.foot-cols{grid-template-columns:1fr;}}
.foot h4{font-family:var(--micro);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash-3);margin:0 0 15px;}
.foot a{color:var(--ash-2);text-decoration:none;}
.foot a:hover{color:var(--flame);}
.fl{display:grid;gap:11px;font-family:var(--micro);font-size:14.5px;}
.fl a{display:inline-flex;align-items:center;min-height:24px;}
.fbrand{display:block;}
.fbrand b{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ash);display:block;}
.fbrand p{font-family:var(--micro);font-size:13.5px;margin:11px 0 0;max-width:34ch;line-height:1.75;
  color:var(--ash-3);}
.fbot{margin-top:clamp(34px,4.6vw,52px);padding-top:20px;border-top:1px solid var(--hair-2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--micro);font-size:12px;letter-spacing:.05em;color:var(--ash-3);}

/* reveal — progressive enhancement only */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.25,1);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;}}

/* ==========================================================================
   LIGHT — "the temple at midday"

   Not an inversion of the sanctum. The other face of the same building:
   limewashed walls, laterite plinth, cobalt and ochre trim, in Goan daylight.
   The photographic plates stay dark in both themes, the way plates sit in a
   printed book — so the thread runs from lit page into dark plate and out
   again, still unbroken.
   ========================================================================== */
:root[data-theme="light"]{
  /* limewash, with the faint chalky warmth of a whitewashed Goan wall */
  --stone:#F1EEE5; --stone-2:#E8E4D8; --stone-3:#DFDACB; --stone-4:#D4CEBC;
  --panel:rgba(224,219,204,.55);
  --hair:rgba(38,28,18,.17); --hair-2:rgba(38,28,18,.085);

  /* the same brass, seen in daylight rather than by its own flame */
  --flame:#8A5F10; --flame-hi:#6E4B0B; --flame-dim:#7A5A18;
  --ember:#9E4420;                      /* laterite plinth */

  /* laterite ink */
  --ash:#241A12; --ash-2:#4E4235; --ash-3:#6C5F51;
  --head:#1C1309;
}

/* Paper tooth, not cave wall. Multiplying the full-strength grain against a
   pale ground greys the whole page, so on light the base image is dropped and
   only the faint fixed overlay carries the texture. */
:root[data-theme="light"] body{background-image:none;}
:root[data-theme="light"] body::before{opacity:.10;mix-blend-mode:multiply;}

/* daylight does not glow — the travelling light becomes a warm wash */
:root[data-theme="light"] .lamp{
  background:linear-gradient(to bottom,transparent,rgba(138,95,16,.5) 44%,rgba(138,95,16,.5) 56%,transparent);
  filter:none;}
:root[data-theme="light"] .lamp::after{
  background:radial-gradient(circle,rgba(176,132,44,.10) 0%,rgba(176,132,44,.04) 44%,transparent 70%);}
:root[data-theme="light"] main::before{background:#B79A5E;opacity:.85;}
:root[data-theme="light"] .knot::before{
  box-shadow:0 0 0 4px var(--stone),0 0 10px rgba(138,95,16,.35);}

/* nav + footer sit on paper */
:root[data-theme="light"] .nav[data-solid="true"]{background:rgba(241,238,229,.92);}
:root[data-theme="light"] .foot{background:rgba(223,218,203,.5);}
/* over the threshold the nav is still on a dark photograph, so it stays light */

/* filled buttons take laterite ink; the outline keeps brass */
:root[data-theme="light"] .btn-flame{background:var(--ash);color:var(--stone);}
:root[data-theme="light"] .btn-flame:hover{background:var(--ember);}
:root[data-theme="light"] .filters button[aria-pressed="true"]{background:var(--ash);color:var(--stone);}
:root[data-theme="light"] .skip{background:var(--ash);color:var(--stone);}
:root[data-theme="light"] ::selection{background:rgba(138,95,16,.22);color:var(--ash);}

/* the plates stay dark in both themes — nothing to override there */

/* ---- light: the threshold opens on daylight, not lamplight -------------- */
:root[data-theme="light"] .threshold .plate{
  filter:saturate(.92) contrast(1.02) brightness(1.02);}
:root[data-theme="light"] .threshold::after{
  background:
    linear-gradient(to left,
      rgba(241,238,229,.95) 0%, rgba(241,238,229,.86) 32%,
      rgba(241,238,229,.42) 62%, rgba(241,238,229,.06) 88%, transparent 100%),
    linear-gradient(to bottom,
      rgba(241,238,229,.72) 0%, rgba(241,238,229,.06) 24%,
      rgba(241,238,229,.16) 58%, rgba(241,238,229,.9) 100%);}
:root[data-theme="light"] .threshold h1.shloka{
  background-image:linear-gradient(176deg,
    #A0741C  0%, #8A5F10 14%, #6A4A0C 26%, #402C06 33%,
    #5C3F0A 40%, #7A5410 54%, #8F6516 74%, #A2761E 100%);
  filter:drop-shadow(0 2px 14px rgba(241,238,229,.9));}
:root[data-theme="light"] .threshold h1{color:var(--head);text-shadow:0 2px 18px rgba(241,238,229,.85);}
:root[data-theme="light"] .threshold .san{color:var(--flame-hi);text-shadow:none;}
:root[data-theme="light"] .threshold .gloss{color:var(--flame-hi);}
:root[data-theme="light"] .threshold .place{color:var(--ash-3);}
:root[data-theme="light"] .sill{border-top-color:var(--hair);
  background:linear-gradient(to top,rgba(241,238,229,.9),rgba(241,238,229,.35));}
:root[data-theme="light"] .sill .k{color:var(--ash-2);}
:root[data-theme="light"] .sill .v{color:var(--ash);}
:root[data-theme="light"] .enter{color:var(--ash-2);}
:root[data-theme="light"] .enter i{background:rgba(36,26,18,.28);}
:root[data-theme="light"] .enter:hover i{background:rgba(36,26,18,.45);}
/* fallback colour for browsers without background-clip:text */
:root[data-theme="light"] .threshold h1.shloka{color:#3A2806;}

/* ---- light: inner heads read as daylight too ---------------------------- */
:root[data-theme="light"] .headpiece img{filter:saturate(.9) brightness(1.0);}
:root[data-theme="light"] .headpiece::after{
  background:
    linear-gradient(to bottom,
      rgba(241,238,229,.66) 0%, rgba(241,238,229,.12) 30%,
      rgba(241,238,229,.55) 72%, rgba(241,238,229,.95) 100%);}
:root[data-theme="light"] .headpiece h1{color:var(--head);text-shadow:0 2px 16px rgba(241,238,229,.9);}
:root[data-theme="light"] .headpiece .lede{color:var(--ash-2);
  text-shadow:0 1px 10px rgba(241,238,229,.85);}
:root[data-theme="light"] .headpiece .micro-lit{color:var(--flame-hi);}

/* the plate-bands stay dark on purpose — photographic plates in a printed
   book, and the thread runs straight through them */

/* ==========================================================================
   MOTION

   Each effect is tied to the concept, not added for its own sake:
   · the plates drift slower than the page, so a photograph reads as a window
     into deeper space rather than a flat band
   · the knots ignite as the travelling lamp reaches them — the light actually
     illuminating each moment in the record
   · grouped items arrive in sequence rather than all at once

   Everything here is disabled wholesale under prefers-reduced-motion.
   ========================================================================== */

/* Oversize the photographic layers so they have room to travel without ever
   exposing an edge. 13% of headroom against a maximum 6.5% shift. */
.threshold .plate,
.headpiece img,
.plate-band img{
  height:126%;top:-13%;bottom:auto;
  will-change:transform;
}

/* the knot, waiting and then lit */
.knot::before{transition:background .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);}
.knot.lit::before{
  background:var(--flame-hi);transform:scale(1.4);
  box-shadow:0 0 0 4px var(--stone),0 0 20px rgba(233,182,94,.9),0 0 46px rgba(233,182,94,.45);}
:root[data-theme="light"] .knot.lit::before{
  box-shadow:0 0 0 4px var(--stone),0 0 14px rgba(138,95,16,.5),0 0 30px rgba(138,95,16,.22);}

/* the margin note lifts a beat after its year */
.knot.lit .yr{color:var(--flame-hi);}
.margin .yr{transition:color .5s ease;}

/* grouped items arrive in sequence */
.js .rv .note,
.js .rv .way{opacity:0;transform:translateY(15px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1);}
.js .rv.in .note,
.js .rv.in .way{opacity:1;transform:none;}
.js .rv.in .note:nth-child(1),.js .rv.in .way:nth-child(1){transition-delay:.06s;}
.js .rv.in .note:nth-child(2),.js .rv.in .way:nth-child(2){transition-delay:.14s;}
.js .rv.in .note:nth-child(3),.js .rv.in .way:nth-child(3){transition-delay:.22s;}
.js .rv.in .note:nth-child(4){transition-delay:.30s;}
.js .rv.in .note:nth-child(5){transition-delay:.38s;}
.js .rv.in .note:nth-child(6){transition-delay:.46s;}

/* register rows settle in as they are drawn, and again on every filter change */
.js .register .reg{animation:regIn .55s cubic-bezier(.2,.7,.3,1) both;}
.js .register .reg:nth-child(1){animation-delay:.02s;}
.js .register .reg:nth-child(2){animation-delay:.06s;}
.js .register .reg:nth-child(3){animation-delay:.10s;}
.js .register .reg:nth-child(4){animation-delay:.14s;}
.js .register .reg:nth-child(5){animation-delay:.18s;}
.js .register .reg:nth-child(6){animation-delay:.22s;}
.js .register .reg:nth-child(7){animation-delay:.26s;}
.js .register .reg:nth-child(n+8){animation-delay:.30s;}
@keyframes regIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .threshold .plate,.headpiece img,.plate-band img{
    height:100%;top:0;transform:none!important;will-change:auto;}
  .knot.lit::before{transform:none;}
  .js .rv .note,.js .rv .way{opacity:1;transform:none;}
  .js .register .reg{animation:none;}
}