/* ==========================================================================
   Karuvarai — shared stylesheet
   One chamber per chapter: an opening image with her words, then one page.
   The ground warms toward Karuvarai (04) and turns to light at the end (10).
   ========================================================================== */

:root{
  --ground:#1E1209;
  --ink:#EFE6DA;          /* headlines */
  --text:#D2BBA2;         /* body copy — 8:1+ on every dark ground */
  --muted:#B59C82;        /* labels — 6:1+ */
  --gold:#C9A876;
  --line:rgba(201,168,118,.24);
  --gold-hi:#DDBF8C;      /* gold on hover */
  --on-gold:#1A1109;      /* text on a gold button — 9:1 */
  --card:rgba(255,244,228,.03);
  --veil:12,8,5;          /* rgb of the image veils */

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --ease:cubic-bezier(.19,.65,.2,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --display-en:'Italiana','Times New Roman',serif;
  --body-en:'Jost',system-ui,-apple-system,sans-serif;
  --ta:'Noto Serif Tamil',serif;
}

/* the ground deepens toward the chamber, then lifts */
body[data-chapter="1"]{--ground:#140E09}
body[data-chapter="2"]{--ground:#150F0A}
body[data-chapter="3"]{--ground:#1A120A}
body[data-chapter="4"]{--ground:#221608}
body[data-chapter="5"]{--ground:#120D08}
body[data-chapter="6"]{--ground:#1C140B}
body[data-chapter="7"]{--ground:#1D160D}
body[data-chapter="8"]{--ground:#20170D}
body[data-chapter="9"]{--ground:#23180C}
body[data-chapter="10"]{--chrome-a:.9;--ground:#EFE7DC;--ink:#2A1C12;--text:#4A3526;--muted:#6B5341;--gold:#6E5230;--gold-hi:#5A4226;--on-gold:#FFF8EE;--line:rgba(90,64,40,.24);--card:rgba(255,255,255,.4);--veil:239,231,220}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--body-en);font-weight:400;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.8;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.skip{position:fixed;left:1rem;top:-5rem;z-index:300;background:var(--ink);color:var(--ground);padding:.7rem 1.2rem;text-decoration:none;font-size:.85rem}
.skip:focus{top:1rem}

/* ---------- language: Tamil first, English on request ---------- */
html[data-lang="ta"] .t[lang="en"],
html[data-lang="en"] .t[lang="ta"]{display:none}
[lang="ta"]{font-family:var(--ta)}
p[lang="ta"],p .t[lang="ta"],li .t[lang="ta"]{line-height:1.9}
[hidden],dialog:not([open]){display:none!important}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.h-display{font-weight:300;color:var(--ink);line-height:1.2;font-size:clamp(2rem,4.4vw,3.9rem)}
.h-display[lang="en"],.h-display .t[lang="en"]{font-family:var(--display-en);font-weight:400;line-height:1.1}
.label{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.label[lang="ta"],.label .t[lang="ta"]{letter-spacing:.02em;text-transform:none;font-size:.86rem}
.lead{color:var(--ink);font-size:clamp(1.08rem,1rem + .5vw,1.35rem);line-height:1.75;max-width:38ch}
.lead[lang="ta"],.lead .t[lang="ta"]{line-height:1.95}
.body{max-width:46ch}
.body p+p{margin-top:1.1em}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity 1.4s var(--ease-soft),transform 1.4s var(--ease-soft);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- page transitions ---------- */
body.leaving{opacity:0;transition:opacity .65s var(--ease-soft)}
body.arriving{animation:arrive 1s var(--ease-soft) both}
@keyframes arrive{from{opacity:0}to{opacity:1}}

/* ---------- fixed controls: each on its own soft surface ---------- */
.chrome{position:fixed;z-index:60;display:flex;align-items:center;gap:.5rem;padding:.35rem;border-radius:999px;background:rgba(var(--veil),var(--chrome-a,.74));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:root{--sa-t:0px;--sa-b:0px;--sa-l:0px;--sa-r:0px}
@supports (padding:env(safe-area-inset-top)){:root{--sa-t:env(safe-area-inset-top);--sa-b:env(safe-area-inset-bottom);--sa-l:env(safe-area-inset-left);--sa-r:env(safe-area-inset-right)}}
.chrome-tl{left:calc(var(--gutter) - .35rem + var(--sa-l));top:calc(1rem + var(--sa-t))}
.chrome-tr{right:calc(var(--gutter) - .35rem + var(--sa-r));top:calc(1rem + var(--sa-t))}
.chrome-br{right:calc(var(--gutter) - .35rem + var(--sa-r));bottom:calc(1rem + var(--sa-b));padding-left:.8rem}
.chrome-bl{left:calc(var(--gutter) - .35rem + var(--sa-l));bottom:calc(1rem + var(--sa-b))}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .75rem;border-radius:999px;border:1px solid var(--line);background:none;color:var(--text);text-decoration:none;cursor:pointer;transition:color .4s,border-color .4s}
.icon-btn:hover,.icon-btn:focus-visible{color:var(--ink);border-color:var(--gold)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.back{gap:.5rem;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase}
.back [lang="ta"]{text-transform:none;letter-spacing:0;font-size:.85rem}
.lang-btn{gap:.45rem;font-size:.78rem;letter-spacing:.1em}
html[data-lang="ta"] .lang-btn [data-l="ta"],html[data-lang="en"] .lang-btn [data-l="en"]{color:var(--ink)}
.lang-btn .sep{opacity:.75}
.brand{gap:.6rem;min-height:44px;padding:.35rem .9rem .35rem .6rem;text-decoration:none;color:var(--gold);font-size:.95rem}
.brand .mark{width:30px;height:18px}
.lang-btn .ta-glyph{font-family:var(--ta);font-size:.95rem;letter-spacing:0}
.audio-toggle{position:relative;width:40px;padding:0}
.audio-toggle svg{position:absolute;transition:opacity .3s}
.audio-toggle svg.on{opacity:0}
.audio-toggle.on{color:var(--gold);border-color:var(--gold)}
.audio-toggle.on svg.on{opacity:1}
.audio-toggle.on svg.off{opacity:0}
.audio-toggle.waiting{border-color:var(--gold);animation:soundWait 2.8s ease-in-out infinite}
.audio-toggle.unavailable{opacity:.4;cursor:default}   /* the recording is not on the server: say so quietly */
@keyframes soundWait{50%{box-shadow:0 0 0 6px rgba(201,168,118,.14)}}
.position{gap:.75rem;font-size:.78rem;letter-spacing:.12em;color:var(--text)}
.position .num{font-family:var(--display-en);font-size:.95rem;letter-spacing:.04em;color:var(--gold)}
.mark{width:34px;height:22px;display:block}
.mark path{fill:var(--ground);stroke:var(--gold);stroke-width:12;stroke-opacity:.55}
.mark path.back-petal{stroke-opacity:.3}
.mark path.lit{fill:var(--gold);fill-opacity:.55;stroke-opacity:1}
.mark circle{fill:#F6DDA8}
.connect-open{gap:.55rem;padding:0 1rem 0 .8rem;color:var(--ink);border-color:rgba(201,168,118,.5);font-size:.78rem;letter-spacing:.11em;text-transform:uppercase}
.connect-open [lang="ta"]{text-transform:none;letter-spacing:0;font-size:.86rem}
.connect-open svg{stroke:var(--gold)}
.next-jump{width:40px;padding:0;color:var(--gold)}
.next-jump:hover{transform:translateX(2px)}
/* bands: once the visitor scrolls, text fades away beneath the controls instead of sliding under them */
.band{position:fixed;left:0;right:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .35s var(--ease-soft)}
.band-top{top:0;height:calc(96px + var(--sa-t));background:linear-gradient(to bottom,var(--ground) 76%,transparent)}
.band-bottom{bottom:0;height:calc(96px + var(--sa-b));background:linear-gradient(to top,var(--ground) 76%,transparent)}
body.scrolled .band{opacity:1}
html.gated .band{display:none}
/* agarbathi — incense air drifting behind the whole site (drawn by script) */
/* width/height must be stated: a canvas is a replaced element, so inset:0 alone would leave it
   at its own pixel size — which is how the smoke ended up filling only a corner of the screen */
.kv-smoke{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;opacity:0;transition:opacity 3.5s var(--ease-soft);mix-blend-mode:screen}
.kv-smoke.in{opacity:1}
body[data-chapter="10"] .kv-smoke{mix-blend-mode:multiply}   /* in daylight the smoke is shade, not light */
html.gated .kv-smoke{z-index:101}   /* at the gate the smoke drifts in front of the lotus */
html.modal-open,html.modal-open body{overflow:hidden}

/* ==========================================================================
   The gate — nothing can be scrolled or reached until the visitor enters.
   One centred column (words · lotus · actions): nothing can overlap, and the lotus
   takes only the room that is left, so the whole gate always fits the screen.
   ========================================================================== */
.gate{display:none}
html.gated,html.gated body{overflow:hidden;height:100%}
html.gated .chrome,html.gated main,html.gated .site-foot,html.gated .skip{visibility:hidden}
html.gated .gate{display:flex}
.gate{position:fixed;inset:0;z-index:100;background:var(--ground);
  flex-direction:column;align-items:center;justify-content:center;gap:clamp(.6rem,2.2vh,1.5rem);
  padding:calc(clamp(1.2rem,4vh,3rem) + var(--sa-t)) var(--gutter) calc(clamp(1.2rem,4vh,3rem) + var(--sa-b));text-align:center;overflow:hidden}
.gate::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 62%,transparent 45%,rgba(6,4,2,.55))}
.gate-words{position:relative;flex:none;max-width:44rem}
.gate-ta{font-family:var(--ta);font-weight:300;color:var(--ink);font-size:clamp(1.15rem,.9rem + 1.05vw,1.85rem);line-height:1.72}
/* the English line is set in Jost, not the display serif: at this size a hairline serif
   breaks up on a dark screen, while Jost stays even at any pixel density */
.gate-en{font-family:var(--body-en);font-weight:400;color:var(--text);font-size:clamp(1.02rem,.95rem + .4vw,1.26rem);
  line-height:1.7;letter-spacing:.04em;margin-top:.7rem}
.gate-lotus-box{position:relative;flex:1 1 0;min-height:0;width:60vw;max-height:calc(60vw / 1.8230)}   /* never taller than the space left */
.gate-lotus{position:absolute;inset:0;width:100%;height:100%}
.gate-lotus path{fill:var(--ground);stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:0 1;
  animation:draw 3s calc(.9s + var(--i) * .11s) cubic-bezier(.45,0,.2,1) forwards}
.gate-lotus path.bp{stroke-opacity:.42}
.gate-lotus .water{stroke:var(--gold);stroke-opacity:.28;stroke-width:1;vector-effect:non-scaling-stroke}
.gate-lotus .heart{opacity:0;animation:rise 2.4s 3.1s ease forwards}
.gate-lotus .glow{transform-box:fill-box;transform-origin:center;animation:breathe 6s 5.5s ease-in-out infinite}
.gate-lotus .flame{fill:#FFF6E4}
.gate-words,.gate-actions{opacity:0;animation:rise 1.8s ease forwards}
.gate-words{animation-delay:.3s}
/* one line, centred in the screen; on a wide screen the quiet way in sits out in the right margin */
.gate-actions{flex:none;animation-delay:3.4s;position:relative;width:100%;max-width:68rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.4rem}
.gate-enter{display:inline-flex;align-items:baseline;justify-content:center;gap:.65rem;white-space:nowrap;
  padding:.72rem 2rem;border:1px solid rgba(201,168,118,.55);border-radius:999px;background:rgba(201,168,118,.06);cursor:pointer;transition:background .5s,border-color .5s}
.gate-enter:hover,.gate-enter:focus-visible{background:rgba(201,168,118,.16);border-color:var(--gold)}
.ge-ta{font-family:var(--ta);font-size:1.18rem;color:var(--gold);line-height:1.5}
.ge-dot{color:var(--gold);opacity:.55}
.ge-en{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.gate-silent{min-height:44px;background:none;border:0;padding:.5rem 1rem;cursor:pointer;color:var(--muted);font-size:.95rem;text-decoration:underline;text-decoration-color:rgba(201,168,118,.35);text-underline-offset:5px}
@media (min-width: 880px){
  .gate-silent{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1rem}
}
.gate-silent:hover,.gate-silent:focus-visible{color:var(--ink)}
.gate-flood{position:fixed;left:var(--fx,50%);top:var(--fy,60%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#FFF3DA 0%,#F2D7A4 18%,rgba(201,168,118,.55) 42%,rgba(20,14,9,0) 70%);transform:scale(0);opacity:0}
.gate.flooding .gate-flood{transition:transform 1.7s cubic-bezier(.55,0,.25,1),opacity .5s;transform:scale(var(--fs,160));opacity:1}
.gate.flooding .gate-words,.gate.flooding .gate-actions{transition:opacity .6s;opacity:0}
.gate.gone{transition:opacity 1.1s ease;opacity:0}
@keyframes draw{99%{stroke-dasharray:1 0}to{stroke-dasharray:none}}
.gate-lotus.drawn path{animation:none;stroke-dasharray:none}   /* whatever the browser did while drawing, the lotus ends whole */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes breathe{50%{transform:scale(1.1);opacity:.82}}

/* ---------- home (chapter 01, after the gate) ---------- */
.home{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:calc(clamp(4.8rem,10vh,6.5rem) + var(--sa-t)) var(--gutter) calc(clamp(6rem,12vh,8rem) + var(--sa-b))}
.home-glow{position:absolute;left:50%;top:40%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(246,227,191,.13),rgba(201,168,118,.05) 26%,transparent 55%)}
.home-inner{position:relative;max-width:58rem;display:flex;flex-direction:column;align-items:center}
.home-lotus{width:clamp(110px,10vw,168px);height:auto;margin-bottom:1rem}
/* the lotus at the top of a page: petals in a soft warm shade, with a breath of gold around the whole flower */
.home-lotus,.begin-lotus{filter:drop-shadow(0 0 9px rgba(201,168,118,.22)) drop-shadow(0 0 30px rgba(201,168,118,.12))}
.home-lotus path,.begin-lotus path{fill:var(--ground);stroke:var(--gold);stroke-width:1.1;vector-effect:non-scaling-stroke}
.home-lotus .fp,.begin-lotus .fp{fill:url(#petalFront);stroke-opacity:.92}
.home-lotus .bp,.begin-lotus .bp{fill:url(#petalBack);stroke-opacity:.45}
.home-lotus .pf-tip{stop-color:#20180F}
.home-lotus .pf-base{stop-color:#3B2C19}
.home-lotus .pb-tip{stop-color:#181109}
.home-lotus .pb-base{stop-color:#271C11}
/* the last chapter is in daylight: there the shade is a warm ivory and the glow is gentler */
.begin-lotus{filter:drop-shadow(0 0 9px rgba(110,82,48,.16)) drop-shadow(0 0 28px rgba(110,82,48,.09))}
.begin-lotus .pf-tip{stop-color:#F7F1E7}
.begin-lotus .pf-base{stop-color:#E3D4BB}
.begin-lotus .pb-tip{stop-color:#F3ECE1}
.begin-lotus .pb-base{stop-color:#EBE0CE}
.home-title{margin:.8rem 0 1rem;max-width:34ch}
.home-title .t[lang="ta"]{font-size:.56em;line-height:1.6}
.home-title:focus{outline:none}
body[data-chapter="1"] .band{opacity:1}   /* no image here: the bands only ever show where words pass beneath the controls */
.home .lead{margin-inline:auto;max-width:46ch}
.home-path{margin-top:1rem;color:var(--gold);font-size:clamp(1rem,.95rem + .3vw,1.2rem)}
.home .continue{align-items:center;text-align:center;margin-top:clamp(1.2rem,3vh,2rem)}

/* ==========================================================================
   Opening images (plates). Rows: [top band for controls] [quote area] [cue +
   bottom band for controls] — the quote can never sit under a control.
   ========================================================================== */
.plate{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ground);
  display:grid;grid-template-rows:calc(88px + var(--sa-t)) minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.plate-media,.plate-media img{position:absolute;inset:0;width:100%;height:100%}
.plate-media img{object-fit:cover;object-position:var(--pos,50% 50%);animation:settle 9s ease-out both}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.plate-veil{position:absolute;inset:0;pointer-events:none}
.plate-body{position:relative;z-index:2;grid-row:2;display:flex;min-height:0;padding:0 var(--gutter)}
.plate-quote{position:relative;isolation:isolate;max-width:35rem;text-shadow:0 1px 2px rgba(var(--veil),.5),0 0 22px rgba(var(--veil),.6)}
/* the words sit in a soft pool of shade (or, on the light plate, of light): readable on any crop, and the image stays whole elsewhere */
.plate-full .plate-quote::before,.plate-full .plate-cue::before{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:3rem;
  inset:-.4rem -.8rem;background:rgba(var(--veil),var(--pool,.66));box-shadow:0 0 72px 48px rgba(var(--veil),var(--pool,.66))}
.plate-full .plate-cue::before{inset:.1rem -.5rem;background:rgba(var(--veil),.76);box-shadow:0 0 40px 30px rgba(var(--veil),.76)}
.q-ta{font-family:var(--ta);font-weight:400;color:var(--ink);font-size:clamp(1.08rem,.95rem + .58vw,1.55rem);line-height:1.78}
.q-en{font-family:var(--body-en);font-weight:400;color:var(--text);font-size:clamp(.99rem,.93rem + .24vw,1.12rem);line-height:1.68;letter-spacing:.015em;margin-top:.8rem}
.plate-quote figcaption{margin-top:1rem;font-size:.8rem;letter-spacing:.05em;color:var(--text)}
.plate-quote figcaption [lang="ta"]{font-size:.86rem;letter-spacing:0}
/* the invitation to read on: large enough to be seen at arm's length, and a comfortable tap */
.plate-cue{position:relative;isolation:isolate;z-index:2;grid-row:3;justify-self:center;margin:1.1rem 0 calc(84px + var(--sa-b));
  padding:.45rem 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--ink);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase}
.plate-cue [lang="ta"]{text-transform:none;letter-spacing:.01em;font-size:1.02rem}
.plate-cue:hover,.plate-cue:focus-visible{color:var(--ink)}
.plate-cue:hover .cue-line,.plate-cue:focus-visible .cue-line{background:linear-gradient(var(--gold),rgba(201,168,118,.15))}
.cue-line{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 3.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* quote placement, with a veil only where the words sit */
.plate[data-q="bc"] .plate-body{align-items:flex-end;justify-content:center;text-align:center}
.plate[data-q="bc"] .plate-veil{background:linear-gradient(to top,rgba(var(--veil),.86) 0%,rgba(var(--veil),.55) 30%,rgba(var(--veil),0) 62%)}
.plate[data-q="tc"] .plate-body{align-items:flex-start;justify-content:center;text-align:center}
.plate[data-q="tc"] .plate-veil{background:linear-gradient(to bottom,rgba(var(--veil),.82) 0%,rgba(var(--veil),.45) 32%,rgba(var(--veil),0) 60%),linear-gradient(to top,rgba(var(--veil),.6),rgba(var(--veil),0) 22%)}
.plate[data-q="l"] .plate-body{align-items:center;justify-content:flex-start;text-align:left}
.plate[data-q="l"] .plate-veil{background:linear-gradient(to right,rgba(var(--veil),.82) 0%,rgba(var(--veil),.5) 34%,rgba(var(--veil),0) 60%),linear-gradient(to top,rgba(var(--veil),.55),rgba(var(--veil),0) 20%)}
.plate[data-q="l"] .plate-quote{max-width:29rem}
.plate[data-q="bc"] .plate-quote,.plate[data-q="tc"] .plate-quote{margin-inline:auto}

/* heavier veil where the image is busy behind the words */
.plate[data-veil="strong"][data-q="bc"] .plate-veil{background:linear-gradient(to top,rgba(var(--veil),.93) 0%,rgba(var(--veil),.78) 36%,rgba(var(--veil),.32) 60%,rgba(var(--veil),0) 78%)}
/* light tone — the last chapter's words sit on the bright plaster wall */
.plate[data-tone="light"]{--veil:238,229,216;--ink:#23170E;--text:#3E2C1F;--muted:#5E4735;--gold:#6E5230;--pool:.42}
.plate[data-tone="light"][data-q="l"] .plate-quote{max-width:25rem}

/* split plate — her portrait (chapter 03) */
.plate-split{grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.split-media{position:relative;grid-column:1;grid-row:1 / -1;margin:0;overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.split-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(26,18,10,0) 70%,var(--ground))}
.plate-split .plate-body{grid-column:2;align-items:center;justify-content:flex-start;text-align:left}
.plate-split .plate-cue{grid-column:2}

/* framed plate — shown whole, never cropped, never under text (chapters 04, 09) */
.plate-framed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.framed-media{grid-column:2;grid-row:2;min-height:0;display:flex;align-items:center;justify-content:center;gap:1.1rem;padding:0 var(--gutter) 0 0;margin:0}
.framed-media>img,.framed-media figure{height:100%;max-height:100%;margin:0}
.framed-media img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 0 0 1px rgba(201,168,118,.28),0 30px 60px rgba(0,0,0,.45)}
.plate-pair .framed-media figure{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center}
.plate-pair .framed-media img{width:100%;height:auto;max-height:100%}
.plate-framed .plate-body{grid-column:1;align-items:center;justify-content:flex-start;text-align:left}
.plate-framed .plate-cue{grid-column:1 / -1}
.plate-framed::before{content:"";position:absolute;right:18%;top:50%;width:70vmin;height:70vmin;transform:translate(50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(242,196,120,.12),transparent 62%)}

/* ==========================================================================
   Chapter pages — one composed screen after each opening image.
   Top/bottom padding keeps every word clear of the fixed controls.
   ========================================================================== */
.page{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(clamp(5.5rem,11vh,7rem) + var(--sa-t)) var(--gutter) calc(clamp(7.5rem,14vh,9rem) + var(--sa-b))}
.page-inner{width:100%;max-width:74rem;margin-inline:auto}
.page .label{margin-bottom:1rem}
.page .h-display{max-width:24ch;margin-bottom:1.2rem}
.h-display .t[lang="ta"],.h-display[lang="ta"]{font-family:var(--ta);font-weight:300;font-size:.78em;line-height:1.55}
.answer{color:var(--gold);font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);line-height:1.8;max-width:42ch}
.answer .t[lang="ta"]{line-height:1.95}

/* continue link — one obvious way forward on every page */
.continue{display:inline-flex;flex-direction:column;gap:.45rem;margin-top:clamp(1.8rem,4.5vh,3rem);padding-top:1.1rem;min-width:min(100%,22rem);
  border-top:1px solid var(--line);text-decoration:none;transition:border-color .5s}
.continue:hover,.continue:focus-visible{border-color:var(--gold)}
.c-lead{font-size:.92rem;letter-spacing:.05em;color:var(--muted)}
/* the name of the next chamber and its arrow breathe together — one slow in-and-out, the pace of a calm breath */
.c-title{display:flex;align-items:center;gap:1.05rem;color:var(--ink);font-family:var(--display-en);font-size:clamp(1.6rem,1.3rem + 1.05vw,2.3rem);line-height:1.3;
  transform-origin:left center;animation:breath 6.5s var(--ease-soft) infinite}
.home .c-title,.page-karuvarai .c-title{transform-origin:center}
.c-title .t[lang="ta"]{font-family:var(--ta);font-weight:400;font-size:.8em}
.c-title svg{width:34px;height:20px;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:1.2;transition:translate .6s var(--ease)}
.continue:hover .c-title svg,.continue:focus-visible .c-title svg{translate:6px 0}
@keyframes breath{0%,100%{scale:1}50%{scale:1.06}}

/* 02 — the search */
.search-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.outward li{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.6;color:var(--muted);padding:.55rem 0;border-bottom:1px solid var(--line)}
.outward li .t[lang="en"]{font-family:var(--display-en)}
.outward li:nth-child(2){padding-left:1.2rem}
.outward li:nth-child(3){padding-left:2.4rem}
.outward li:nth-child(4){padding-left:3.6rem}
.turn .h-display{font-size:clamp(1.9rem,1.4rem + 2vw,3.3rem)}

/* 03 — the journey */
.journey-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.marks{border-left:1px solid var(--line);padding-left:1.6rem;display:grid;gap:1.3rem}
.marks li{position:relative}
.marks li::before{content:"";position:absolute;left:calc(-1.6rem - 3.5px);top:.62rem;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.marks strong{display:block;font-weight:500;color:var(--ink);font-size:1.05rem}
.marks span{display:block;font-size:.95rem}
.aside{margin-top:1.4rem;font-size:.92rem;color:var(--muted);max-width:44ch}

/* 04 — the name */
.page-karuvarai .page-inner{text-align:center;max-width:52rem}
.name{font-family:var(--ta);font-weight:300;color:var(--gold);font-size:clamp(2.6rem,1.6rem + 5vw,5.2rem);line-height:1.25}
.etym{display:flex;justify-content:center;gap:clamp(2rem,6vw,4.5rem);margin:.4rem 0 1.8rem}
.etym div{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.e-ta{font-family:var(--ta);font-size:1.6rem;color:var(--ink)}
.e-en{font-size:.82rem;color:var(--muted)}
.page-karuvarai .lead,.page-karuvarai .answer{margin-inline:auto}
.page-karuvarai .answer{margin-top:1.2rem}
.page-karuvarai .continue{align-items:center}

/* 05, 06 — four doors / four practices */
.doors,.strands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.4rem,4vh,2.6rem)}
.doors li,.strands li{border-top:1px solid var(--line);padding-top:1.1rem}
.d-ta{display:block;font-family:var(--ta);font-weight:400;color:var(--ink);font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);line-height:1.45;overflow-wrap:anywhere}
.d-en{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:.35rem 0 .6rem}
.doors p,.strands p{font-size:.96rem;line-height:1.75}

/* 07 — gurukulam */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(1.4rem,4vh,2.4rem) 0 1.4rem}
.steps li{padding:0 clamp(1rem,2.5vw,2.2rem);border-left:1px solid var(--line)}
.steps li:first-child{padding-left:0;border-left:0}
.steps .num{display:block;font-family:var(--display-en);color:var(--gold);font-size:1rem;margin-bottom:.4rem}

/* 08 — experiences: her videos. Captions sit beneath the pictures — nothing of ours is printed over them. */
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.2rem,3.5vh,2.2rem)}
.page-experiences .h-display .t[lang="ta"]{font-size:.62em}
.page-experiences .h-display{max-width:30ch}
.vid{display:flex;flex-direction:column;gap:.75rem;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.vid-frame{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:#0B0806;box-shadow:0 0 0 1px var(--line)}
.vid-wide{margin-top:1.4rem}
.vid-wide .vid-frame{aspect-ratio:16/9}
.vid-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vid:hover .vid-frame img,.vid:focus-visible .vid-frame img{transform:scale(1.03)}
.vid:focus-visible{outline:none}
.vid:focus-visible .vid-frame{outline:1px solid var(--gold);outline-offset:4px}
.vid-cap{display:flex;align-items:center;gap:.6rem;color:var(--text);font-size:.92rem;line-height:1.4;transition:color .4s}
.vid-cap .play{width:26px;height:26px;flex-shrink:0}
.vid-cap .play circle{fill:none;stroke:var(--gold);stroke-width:1.2}
.vid-cap .play path{fill:var(--gold)}
.vid:hover .vid-cap,.vid:focus-visible .vid-cap{color:var(--ink)}

/* a side door beside the path: opens the Connect sheet */
.invite{display:flex;width:fit-content;max-width:100%;align-items:center;gap:.65rem;margin-top:1.6rem;padding:.6rem 1.15rem .6rem .9rem;min-height:44px;border:1px solid var(--line);border-radius:1.4rem;
  background:none;color:var(--ink);font:inherit;font-size:.92rem;line-height:1.45;text-align:left;cursor:pointer;transition:border-color .4s,background .4s}
.invite svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--gold);stroke-width:1.5}
.invite:hover,.invite:focus-visible{border-color:var(--gold);background:rgba(201,168,118,.08)}

/* 09 — the world */
.world-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.strands{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}

/* 10 — the invitation, in light: her lines, each for its own purpose */
body[data-chapter="10"] .page{background:var(--ground)}
.page-begin .page-inner{max-width:70rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.begin-lotus{width:clamp(150px,18vw,250px);height:auto;margin-bottom:1.2rem}
.begin-lotus .flame{fill:#E9B25C}
.welcome{font-family:var(--ta);color:var(--gold);font-size:1.25rem;margin-bottom:1.2rem}
.routes-lead{max-width:42ch;margin-bottom:1.8rem}
.begin-routes{width:100%;text-align:left;scroll-margin-top:6rem}
.begin-alt{margin-top:1.8rem;font-size:.92rem;color:var(--muted)}
.restart{display:inline-block;margin-top:1.4rem;padding:.4rem 0;color:var(--muted);font-size:.85rem;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}

/* footer */
.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;padding:1.6rem var(--gutter) calc(5.6rem + var(--sa-b));border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-links a,.foot-credit a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding:.2rem 0;transition:color .4s,border-color .4s}
.foot-links a:hover,.foot-links a:focus-visible,.foot-credit a:hover,.foot-credit a:focus-visible{color:var(--ink);border-color:var(--gold)}

/* ==========================================================================
   Responsive — each breakpoint recomposed, not just stacked.
   ========================================================================== */
@media (min-width: 981px){
  .begin-routes .routes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 980px){
  .search-grid,.journey-grid,.world-grid{grid-template-columns:minmax(0,1fr);gap:2.2rem;align-items:start}
  .doors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outward li:nth-child(n){padding-left:0}
}

@media (max-width: 760px){
  .gate{gap:clamp(.9rem,3.2vh,2rem);padding-bottom:calc(3.5rem + var(--sa-b))}   /* clear of the browser's bottom toolbar */
  .gate-lotus-box{width:94vw;max-height:calc(94vw / 1.8230)}
  .back .t{display:none}
  .back{padding:0;width:40px}
  .position{gap:.5rem}
  .position .num{font-size:.85rem}

  /* on phones each opening image uses its own quote position (data-qm), chosen where the crop is calm */
  .plate[data-qm] .plate-body{align-items:flex-end;justify-content:center;text-align:center}
  .plate[data-qm="tc"] .plate-body{align-items:flex-start}
  .plate[data-qm] .plate-quote{margin-inline:auto;max-width:34rem}
  .plate[data-qm="bc"] .plate-veil{background:linear-gradient(to top,rgba(var(--veil),.9) 0%,rgba(var(--veil),.62) 34%,rgba(var(--veil),0) 66%)}
  .plate[data-qm="tc"] .plate-veil{background:linear-gradient(to bottom,rgba(var(--veil),.88) 0%,rgba(var(--veil),.56) 38%,rgba(var(--veil),0) 64%),linear-gradient(to top,rgba(var(--veil),.6),rgba(var(--veil),0) 22%)}
  .plate-split .plate-body,.plate-framed .plate-body{align-items:flex-start;justify-content:center;text-align:center}
  .plate-split .plate-quote,.plate-framed .plate-quote{margin-inline:auto}
  .gate-actions{flex-direction:column;gap:.5rem}
  .plate-media img{object-position:var(--ppos,50% 50%)}
  .plate-cue{margin-bottom:calc(80px + var(--sa-b))}

  /* the first screen after the gate fits a phone: nothing waits below the fold or under the controls */
  .home{padding:calc(4.4rem + var(--sa-t)) var(--gutter) calc(5.4rem + var(--sa-b))}
  .home-lotus{width:84px;margin-bottom:.5rem}
  .home .home-title{margin:.45rem 0 .75rem}
  .home .home-title .t[lang="ta"]{font-size:.66em;line-height:1.55}
  .home .lead{font-size:1.02rem}
  .home-path{margin-top:.6rem;font-size:.98rem}
  .home .continue{margin-top:1rem}

  .plate-split,.plate-framed{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto}
  .split-media{grid-column:1;grid-row:1}
  .split-media::after{background:linear-gradient(to bottom,rgba(26,18,10,0) 62%,var(--ground))}
  .plate-split .plate-body,.plate-framed .plate-body{grid-column:1;grid-row:2;padding-top:1rem}
  .plate-split .plate-cue,.plate-framed .plate-cue{grid-column:1;grid-row:3}
  .framed-media{grid-column:1;grid-row:1;padding:calc(84px + var(--sa-t)) var(--gutter) 0}
  .plate-framed::before{right:50%;top:34%}

  .doors,.vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .steps li,.steps li:first-child{padding:1rem 0 0;border-left:0;border-top:1px solid var(--line)}
  .site-foot{flex-direction:column}

  /* on phones the Connect sheet is a full screen that rises from below */
  .connect{inset:0;width:100%;border-left:0}
  .connect[open]{animation-name:sheetUp}
  .connect.closing{animation-name:sheetDown}
  .route-actions .wa-btn{flex:1 1 auto}
}

@media (max-width: 560px){
  .doors,.strands{grid-template-columns:minmax(0,1fr);gap:1rem}
  .doors li,.strands li{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:baseline}
  .doors .d-en,.strands .d-en{margin:0}
  .doors p,.strands p{grid-column:1 / -1;margin-top:.3rem}
}

/* small phones: the one line still fits, with the words a touch closer together */
@media (max-width: 400px){
  .gate-enter{padding:.68rem 1.05rem;gap:.45rem}
  .ge-ta{font-size:1.06rem}
  .ge-en{font-size:.75rem;letter-spacing:.13em}
  .c-title svg{width:30px;height:18px}
}

@media (max-width: 340px){
  .connect-open{padding:0;width:40px}
  .connect-open .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* short screens (small laptops, landscape phones) */
@media (max-height: 760px) and (min-width: 761px){
  .plate{grid-template-rows:calc(80px + var(--sa-t)) minmax(0,1fr) auto}
  .plate-cue{margin:.8rem 0 calc(80px + var(--sa-b))}
  .q-ta{font-size:clamp(1.05rem,.9rem + .8vw,1.55rem)}
  .page{padding-top:5.2rem;padding-bottom:7rem}
  .h-display{font-size:clamp(1.8rem,3.6vw,3.1rem)}
}

/* ---------- phones on their side: the opening image is exactly one screen, the words compact,
   and the controls sit on quiet bands ---------- */
@media (max-height: 500px) and (orientation: landscape){
  .plate{--pool:.74;min-height:0;height:100vh;height:100svh;grid-template-rows:calc(64px + var(--sa-t)) minmax(0,1fr) calc(64px + var(--sa-b))}
  .plate[data-tone="light"]{--pool:.5}
  .plate-cue{display:none}
  .plate-body{align-items:center!important}
  .q-ta{font-size:1rem;line-height:1.62}
  .q-en{font-size:.86rem;line-height:1.5;margin-top:.45rem}
  .plate-quote figcaption{margin-top:.5rem}
  .chrome-tl,.chrome-tr{top:calc(.55rem + var(--sa-t))}
  .chrome-bl,.chrome-br{bottom:calc(.55rem + var(--sa-b))}
  .band{opacity:1}
  .band-top{height:calc(80px + var(--sa-t))}
  .band-bottom{height:calc(80px + var(--sa-b))}
  .home{padding-top:calc(4.6rem + var(--sa-t));padding-bottom:calc(5rem + var(--sa-b))}
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .gate-lotus path{animation:none;stroke-dasharray:none}
  .gate-words,.gate-actions,.gate-lotus .heart{animation:none;opacity:1}
  .gate-lotus .glow,.plate-media img,.cue-line,.audio-toggle.waiting,.c-title{animation:none}
  body.leaving,body.arriving{animation:none;transition:none;opacity:1}
  .connect[open],.connect.closing,.connect::backdrop,.player[open],.player.closing{animation:none}
}

/* Tamil lines Claude wrote: open any page with ?validate to see them outlined for Amma's review */
.validate [data-validate]{outline:1px dashed #E0B461;outline-offset:2px}

@keyframes sheetUp{from{opacity:0;transform:translateY(40px)}}
@keyframes sheetDown{to{opacity:0;transform:translateY(40px)}}

/* 404 */
.notfound main{min-height:100svh;display:grid;place-items:center;align-content:center;gap:.8rem;text-align:center;padding:2rem}

/* ==========================================================================
   Connect — a sheet that pauses the journey instead of leaving it.
   Her lines, each for its own purpose, one tap from WhatsApp.
   ========================================================================== */
.connect{position:fixed;inset:0 0 0 auto;width:min(34rem,100%);height:100%;max-width:100%;max-height:100%;margin:0;padding:0;
  border:0;border-left:1px solid var(--line);background:var(--ground);color:var(--text);overflow-y:auto;overscroll-behavior:contain}
.connect::backdrop{background:rgba(6,4,2,.62)}
.connect[open]{animation:sheetIn .6s var(--ease) both}
.connect[open]::backdrop{animation:fade .5s both}
.connect.closing{animation:sheetOut .28s var(--ease-soft) both}
.connect.closing::backdrop{animation:fadeOut .28s both}
@keyframes sheetIn{from{opacity:0;transform:translateX(32px)}}
@keyframes sheetOut{to{opacity:0;transform:translateX(32px)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.sheet-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(1rem + var(--sa-t)) calc(clamp(1.3rem,4vw,2.4rem) + var(--sa-r)) .7rem calc(clamp(1.3rem,4vw,2.4rem) + var(--sa-l));background:var(--ground)}
.sheet-top::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;background:linear-gradient(var(--ground),rgba(var(--veil),0))}
.connect-inner{padding:.6rem calc(clamp(1.3rem,4vw,2.4rem) + var(--sa-r)) calc(2.2rem + var(--sa-b)) calc(clamp(1.3rem,4vw,2.4rem) + var(--sa-l))}
.sheet-close{width:44px;height:44px;padding:0}
.connect-title{font-family:var(--display-en);font-weight:400;color:var(--ink);font-size:clamp(1.65rem,1.3rem + 1.2vw,2.2rem);line-height:1.2}
.connect-title .t[lang="ta"]{font-family:var(--ta);font-size:.7em;line-height:1.6}
.connect-title:focus{outline:none}
.connect-lead{margin:.8rem 0 1.5rem;max-width:40ch}
.connect-alt{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.connect-alt a,.begin-alt a{display:inline-block;padding:.3rem 0;color:var(--gold);text-underline-offset:4px;text-decoration-color:var(--line)}

/* ---------- her lines ---------- */
.routes{display:grid;gap:.9rem}
.route{display:flex;flex-direction:column;padding:1.15rem 1.2rem 1.25rem;border:1px solid var(--line);border-radius:14px;background:var(--card);transition:border-color .6s,background .6s}
.route.is-suggested{border-color:var(--gold)}
.route-step{display:flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.route-step [lang="ta"]{font-size:.86rem;letter-spacing:0;text-transform:none}
.route-n{display:inline-grid;place-items:center;flex-shrink:0;width:1.7rem;height:1.7rem;border:1px solid currentColor;border-radius:50%;font-family:var(--body-en);font-size:.78rem;letter-spacing:0;font-variant-numeric:lining-nums}
.route-title{margin:.6rem 0 .3rem;font-weight:500;color:var(--ink);font-size:1.06rem;line-height:1.45}
.route-title .t[lang="ta"]{font-weight:500;font-size:1rem;line-height:1.65}
.route-note{font-size:.92rem;line-height:1.7}
.route-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.3rem;margin-top:auto;padding-top:1rem}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:0 1.4rem;border:1px solid var(--gold);border-radius:999px;
  color:var(--ink);background:rgba(201,168,118,.08);font-size:.95rem;font-weight:500;text-decoration:none;transition:background .4s,color .4s,border-color .4s}
.wa-btn svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6}
.route[data-route="first"] .wa-btn,.route.is-suggested .wa-btn{background:var(--gold);color:var(--on-gold)}
.wa-btn:hover,.wa-btn:focus-visible{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--on-gold)}
.route-num{padding:.4rem 0;border-bottom:1px solid var(--line);color:var(--text);font-size:.95rem;letter-spacing:.02em;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.route-num:hover,.route-num:focus-visible{color:var(--ink);border-color:var(--gold)}
.route-meta{display:grid;gap:.7rem;margin-top:1.3rem;font-size:.88rem;line-height:1.7;color:var(--muted)}
.hours{color:var(--text)}
.tz{font-size:.78rem;letter-spacing:.08em;color:var(--muted)}
.safety{padding-left:.9rem;border-left:2px solid var(--gold)}

/* ---------- the video player: her films open in a quiet room of their own ---------- */
.player{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,4,2,.95)}
.player[open]{display:grid;place-items:center;animation:fade .4s both}
.player.closing{animation:fadeOut .25s both}
.player::backdrop{background:transparent}
.player .sheet-close{position:fixed;top:calc(1rem + var(--sa-t));right:calc(1rem + var(--sa-r));z-index:2;color:#EFE6DA;border-color:rgba(239,230,218,.4)}
.player-frame{position:relative;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.player-frame.is-short{height:min(86vh,calc(88vw * 16 / 9));height:min(86svh,calc(88vw * 16 / 9));aspect-ratio:9 / 16}
.player-frame.is-wide{width:min(92vw,calc(80vh * 16 / 9));width:min(92vw,calc(80svh * 16 / 9));aspect-ratio:16 / 9}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ==========================================================================
   இசை அமுதம் — the listening room.
   A printed programme of songs rather than a player: numbers down the left,
   names in the middle, lengths at the margin. One song opens at a time to
   show its note and its control. While something sounds, a quiet strip rests
   along the foot of the screen — a hairline of gold moving from left to right.
   ========================================================================== */
.page-isai .page-inner{max-width:72rem}
.page-isai .h-display{margin-bottom:.7rem}
.page-isai .lead{max-width:40ch}
.isai-body{min-width:0}

/* on a wide screen the room reads as a spread: the title and its note rest on the left
   while the programme runs down the right, the same grammar as the chapters around it */
@media (min-width: 981px){
  .isai-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.25fr);
    gap:clamp(2.5rem,5vw,5.5rem);align-items:start}
  .isai-head{position:sticky;top:calc(7rem + var(--sa-t))}
  .isai-body .songs{margin-top:0}
}


/* unlike a chapter, this room's first screen is already full of words, so the soft bands
   beneath the fixed controls are there from the start rather than only once scrolled */
body.room-isai .band{opacity:1}

/* ---------- the programme ---------- */
.songs{margin-top:clamp(1.8rem,5vh,3rem);border-top:1px solid var(--line)}
.song{border-bottom:1px solid var(--line);scroll-margin-top:6.5rem;scroll-margin-bottom:8rem}
.song-head{font-weight:400}
.song-btn{display:grid;grid-template-columns:2.9rem minmax(0,1fr) auto 1.3rem;align-items:center;
  column-gap:clamp(.8rem,2vw,1.6rem);width:100%;padding:1.05rem 0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.song-btn:disabled{cursor:default}                     /* until the script wakes the list up */
.song-n{position:relative;display:block;font-family:var(--display-en);font-size:1rem;letter-spacing:.06em;color:var(--gold)}
.s-ta{display:block;font-family:var(--ta);color:var(--ink);font-size:clamp(1.05rem,.97rem + .4vw,1.3rem);line-height:1.5;transition:color .4s}
.s-en{display:block;margin-top:.1rem;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.song-dur{font-family:var(--display-en);font-size:.95rem;letter-spacing:.04em;color:var(--muted);
  text-align:right;font-variant-numeric:tabular-nums;transition:color .4s}
.song-chev{width:16px;height:16px;justify-self:end;stroke:var(--gold);fill:none;stroke-width:1.3;opacity:.55;
  transition:transform .5s var(--ease),opacity .4s}
.song-btn:hover .s-ta,.song-btn:focus-visible .s-ta{color:var(--gold-hi)}
.song-btn:hover .song-chev,.song-btn:focus-visible .song-chev{opacity:1}
.song.is-open .song-chev{transform:rotate(180deg);opacity:1}
.song.is-current .song-dur{color:var(--gold)}

/* the number gives way to three small bars while that song is sounding */
.eq{position:absolute;inset:0;display:none;align-items:flex-end;gap:2px;height:13px;margin:auto 0}
.eq i{display:block;width:2px;height:100%;background:var(--gold);transform-origin:bottom center;
  animation:eqBar 1.15s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.24s}
.eq i:nth-child(3){animation-delay:.48s}
@keyframes eqBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.song.is-current .n{opacity:0}
.song.is-current .eq{display:flex}
.song.is-current:not(.is-playing) .eq i{animation-play-state:paused}

/* ---------- the open song ---------- */
.song-body{padding-bottom:1.6rem}
.js .song-body{display:none}
.js .song.is-open .song-body{display:block;animation:songOpen .5s var(--ease-soft)}
@keyframes songOpen{from{opacity:0;transform:translateY(-6px)}}
.song-note,.song-controls{margin-left:calc(2.9rem + clamp(.8rem,2vw,1.6rem))}
.song-note{max-width:56ch;font-size:.96rem;line-height:1.8}
.song-note .t[lang="ta"]{line-height:1.95}
.song-controls{display:flex;align-items:center;gap:1rem;margin-top:1.2rem;max-width:34rem}
.song-play{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--line);border-radius:50%;background:none;color:var(--gold);cursor:pointer;
  transition:border-color .4s,background .4s}
.song-play:hover,.song-play:focus-visible{border-color:var(--gold);background:rgba(201,168,118,.1)}
.song-play svg{width:18px;height:18px}
.i-play{fill:currentColor;stroke:none;margin-left:2px}
.i-pause{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.song-play .i-pause,.nb-toggle .i-pause{display:none}
.song.is-playing .song-play .i-play{display:none}
.song.is-playing .song-play .i-pause{display:block}

/* the line the song travels along: gold behind the thumb, hairline ahead of it */
/* the line is a hairline to look at but forty pixels to touch: a thumb this small
   is otherwise almost impossible to catch with a finger */
.song-seek{flex:1 1 auto;min-width:0;height:40px;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  background:linear-gradient(to right,var(--gold) 0 calc(var(--p,0) * 100%),var(--line) calc(var(--p,0) * 100%) 100%)
    0 50%/100% 1px no-repeat}
.song-seek::-webkit-slider-runnable-track{height:1px;background:transparent}
.song-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;margin-top:-5px;border:0;border-radius:50%;background:var(--gold)}
.song-seek::-moz-range-track{height:1px;background:transparent}
.song-seek::-moz-range-progress{height:1px;background:transparent}
.song-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--gold)}
.song-time,.nb-time{font-family:var(--display-en);font-size:.85rem;letter-spacing:.05em;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.t-sep{margin:0 .35rem;opacity:.55}

/* without script there is no room to open and close — every note is simply shown,
   and each song keeps the browser's own player */
.song-audio{width:100%;max-width:26rem;margin-top:1.1rem}
.js .song-audio{display:none}

/* a recording that is not on the server says so, rather than pretending to load */
.song.is-missing .s-ta{color:var(--muted)}
.song.is-missing .song-play{opacity:.4;cursor:default}

.page-isai .continue{margin-top:clamp(2rem,5vh,3.2rem)}
.page-isai .restart{display:block;width:fit-content}

/* ---------- the way in, set high on chapter 09 ----------
   A small pill at the foot of the page was missed. This is a door: wide, named in the site's own
   words, and above the fold on every size. The Music strand below it leads to the same room. */
.doorway{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);width:100%;margin-top:1.5rem;
  padding:clamp(.85rem,2.1vw,1.2rem) clamp(1rem,2.3vw,1.4rem);border:1px solid var(--line);border-radius:6px;
  background:var(--card);text-decoration:none;color:inherit;transition:border-color .5s,background .5s}
.doorway:hover,.doorway:focus-visible{border-color:var(--gold);background:rgba(201,168,118,.07)}
.dw-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:50%;transition:border-color .5s}
.dw-mark svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.3}
.doorway:hover .dw-mark,.doorway:focus-visible .dw-mark{border-color:var(--gold)}
.dw-body{min-width:0}
.dw-lead{display:block;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dw-lead .t[lang="ta"]{text-transform:none;letter-spacing:.01em;font-size:.9rem}
.dw-title{display:flex;align-items:center;gap:.85rem;margin-top:.15rem;color:var(--ink);
  font-family:var(--display-en);font-size:clamp(1.4rem,1.15rem + .8vw,1.9rem);line-height:1.3}
.dw-title .t[lang="ta"]{font-family:var(--ta);font-weight:400;font-size:.82em}
.dw-title svg{width:30px;height:18px;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:1.2;transition:translate .6s var(--ease)}
.doorway:hover .dw-title svg,.doorway:focus-visible .dw-title svg{translate:6px 0}
.dw-meta{display:block;margin-top:.15rem;font-size:.9rem;color:var(--text)}
.dw-meta .t[lang="ta"]{font-size:.95rem}

/* the Music strand is a way through as well: the word itself opens the room */
.strands li.is-door{border-top-color:rgba(201,168,118,.55)}
.d-link{display:block;text-decoration:none;color:inherit}
.d-go{display:inline-block;margin-left:.45rem;vertical-align:-.1em}
.d-go svg{width:24px;height:13px;stroke:var(--gold);fill:none;stroke-width:1.3;transition:translate .6s var(--ease)}
.d-link:hover .d-go svg,.d-link:focus-visible .d-go svg{translate:5px 0}
.d-link:hover .d-ta,.d-link:focus-visible .d-ta{color:var(--gold-hi)}
.d-ta{transition:color .4s}

/* the room is still chapter 09's world, so it is named rather than numbered */
.position.is-room{letter-spacing:.09em}
.position.is-room .num-room{font-family:var(--body-en);font-size:.78rem;color:var(--gold)}
.position.is-room .num-room .t[lang="ta"]{font-family:var(--ta);font-size:.85rem;letter-spacing:0}

/* ---------- the strip along the foot, while a song sounds ---------- */
.nowbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:1rem;
  padding:.55rem var(--gutter) calc(.55rem + var(--sa-b));
  background:rgba(var(--veil),.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transform:translateY(101%);transition:transform .6s var(--ease)}
body.has-song .nowbar{transform:none}
.nb-track{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.nb-fill{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}
.nb-goto{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;min-width:0;min-height:40px;padding:.35rem 0;border:0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nb-n{flex:0 0 auto;font-family:var(--display-en);font-size:.9rem;letter-spacing:.06em;color:var(--gold)}
.nb-title{font-family:var(--ta);color:var(--ink);font-size:.98rem;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .4s}
.nb-goto:hover .nb-title,.nb-goto:focus-visible .nb-title{color:var(--gold-hi)}
.nb-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;
  border:1px solid var(--line);border-radius:50%;background:none;color:var(--gold);cursor:pointer;transition:border-color .4s}
.nb-toggle:hover,.nb-toggle:focus-visible{border-color:var(--gold)}
.nb-toggle svg{width:15px;height:15px}
body.is-playing .nb-toggle .i-play{display:none}
body.is-playing .nb-toggle .i-pause{display:block}
/* the fixed controls and the last lines of the page step up out of the strip's way,
   and the soft band beneath them grows to match, so no line is read through a control */
body.has-song .chrome-bl,body.has-song .chrome-br{bottom:calc(4.2rem + var(--sa-b))}
body.has-song .band-bottom{height:calc(164px + var(--sa-b))}
body.has-song .site-foot{padding-bottom:calc(9.4rem + var(--sa-b))}

@media (max-width: 760px){
  .song-btn{grid-template-columns:2.1rem minmax(0,1fr) auto 1.1rem;column-gap:.7rem;padding:.95rem 0}
  .song-n{font-size:.92rem}
  .song-dur{font-size:.88rem}
  .song-note,.song-controls{margin-left:0}
  .song-controls{gap:.8rem}
  .nowbar{gap:.7rem}
  body.has-song .chrome-bl,body.has-song .chrome-br{bottom:calc(4rem + var(--sa-b))}
}

@media (max-width: 480px){
  .nb-time{display:none}          /* on a small phone the strip keeps only what is needed */
}

@media (prefers-reduced-motion: reduce){
  .eq i{animation:none}
  .nowbar{transition:none}
  .js .song.is-open .song-body{animation:none}
  .song-chev{transition:none}
}