/* ==========================================================================
   THE SPINE — the design system for Swati Rajput's site
   Direction: an anatomical plate that has learned to breathe.
   Cool engraved paper, one warm pulse, a single line running down the page.
   Tokens are documented in system.html. Do not introduce colours here.
   ========================================================================== */

:root{
  /* ---- colour -------------------------------------------------------------
     Semantic, not decorative. HELD is what has stopped travelling; PULSE is
     what is going through. Never swap them. HELD never carries text. */
  --paper:#E4E7E7;      /* engraved stock, cool pale — the page ground        */
  --paper-2:#D9DEDE;    /* one step down — inset blocks                       */
  --ink:#1C2223;        /* text and full-strength rules      13:1 on paper    */
  --slate:#586566;      /* secondary text and labels          4.9:1 on paper  */
  --held:#A8A29B;       /* drained warm grey — RULES AND DOTS ONLY            */
  --pulse:#8E3B33;      /* madder — the live signal, links, the one CTA       */
  --pulse-deep:#6E2B25; /* hover and pressed                                 */
  --night:#161E1F;      /* the single inversion, used once on the page        */
  --night-text:#C9D0D0;

  /* ---- type ---------------------------------------------------------------
     Two families. Spectral for anything that speaks, Instrument Sans for
     anything that instructs. Labels are letterspaced caps — no mono anywhere. */
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --t-hero:clamp(2.3rem,1.5rem + 3.4vw,4rem);
  --t-h2:clamp(1.6rem,1.35rem + 1.05vw,2.1rem);
  --t-h3:1.14rem;
  --t-lede:clamp(1.1rem,1.05rem + .25vw,1.24rem);
  --t-body:1.0625rem;
  --t-small:.945rem;
  --t-label:.68rem;

  --lh-tight:1.08; --lh-head:1.22; --lh-body:1.68; --track-label:.15em;

  /* ---- space — 4px base ------------------------------------------------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem;   --s-8:4.5rem;
  --s-band:clamp(4.5rem,9vh,7.5rem);

  /* ---- measure & grid --------------------------------------------------- */
  --measure:34rem;      /* prose is never wider — this is a reading site */
  --gutter:9.5rem;      /* the marginalia column, where the spine lives  */
  --page:70rem;
  --pad:clamp(1.25rem,4vw,2.5rem);

  --hair:1px solid var(--held);
  --ease:cubic-bezier(.4,0,.5,1);
}

/* ---- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
::selection{background:var(--pulse);color:var(--paper)}
:focus-visible{outline:2px solid var(--pulse);outline-offset:4px;border-radius:1px}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);
  padding:var(--s-3) var(--s-4);z-index:20;font-size:var(--t-small);text-decoration:none}
.skip:focus{left:var(--s-4);top:var(--s-4)}

/* ---- primitives --------------------------------------------------------- */
.page{max-width:var(--page);margin:0 auto;padding:0 var(--pad)}
.label{font-family:var(--sans);font-weight:500;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--slate);margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:var(--t-hero);line-height:var(--lh-tight);letter-spacing:-.018em;font-weight:300}
h2{font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:-.008em;max-width:26em}
h3{font-size:var(--t-h3);line-height:1.35;font-weight:500}
p{margin:0 0 1.1em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lede{font-family:var(--serif);font-size:var(--t-lede);line-height:1.5;font-weight:300}
.quiet{color:var(--slate);font-size:var(--t-small)}
a{color:var(--pulse);text-decoration:none;border-bottom:1px solid rgba(142,59,51,.35);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
a:hover{color:var(--pulse-deep);border-bottom-color:var(--pulse-deep)}
.gap-top{margin-top:var(--s-6)}

.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;padding:.95rem 1.5rem;
  border:1px solid;text-decoration:none;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn--pulse{background:var(--pulse);border-color:var(--pulse);color:var(--paper)}
.btn--pulse:hover{background:var(--pulse-deep);border-color:var(--pulse-deep);color:var(--paper)}
.btn--line{background:none;border-color:var(--held);color:var(--slate)}
.btn--line:hover{border-color:var(--ink);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}

/* editorial placeholder — remove the span once real text is in */
.fill{font-family:var(--sans);font-size:.9em;color:var(--pulse);
  border-bottom:1px dotted var(--pulse)}

/* ==========================================================================
   THE SPINE — one line from the hero diagram to the last section.
   Nodes fill as you read: the signal travelling through the page.
   ========================================================================== */
.band{padding-bottom:var(--s-band)}
.gutter{position:relative}
.gutter .label{margin-bottom:var(--s-4)}
.spine{position:relative}

@media (min-width:1024px){
  .spine::before{content:"";position:absolute;left:0;width:1px;
    top:calc(-1 * var(--s-band));bottom:0;background:var(--held)}
  .band{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr);gap:0 var(--s-7)}
  .gutter{grid-column:1}
  .content{grid-column:2}
  .gutter .inner{position:sticky;top:var(--s-7);padding-left:var(--s-5)}
  .node{position:absolute;left:-4px;top:.42rem;width:9px;height:9px;border-radius:50%;
    background:var(--paper);border:1px solid var(--held);
    transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
  .band.passed .node{background:var(--held);border-color:var(--held)}
  .band.here .node{background:var(--pulse);border-color:var(--pulse);transform:scale(1.3)}
  .band.here .gutter .label{color:var(--ink)}
}
@media (max-width:1023px){
  .node{display:none}
  .gutter .label{margin-bottom:var(--s-3)}
}

/* ---- masthead ----------------------------------------------------------- */
.masthead{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-4);padding:var(--s-5) 0 0}
.wordmark{font-family:var(--serif);font-size:1.02rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);border:0}
.wordmark:hover{color:var(--pulse)}
.wordmark .practice{display:block;font-family:var(--sans);font-size:var(--t-label);
  font-weight:500;letter-spacing:var(--track-label);color:var(--slate);margin-top:.3rem}
.wordmark:hover .practice{color:var(--slate)}
.masthead nav{display:flex;align-items:baseline;gap:var(--s-5)}
.masthead .jump{font-size:var(--t-label);letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:500;color:var(--slate);border-bottom-color:var(--held)}
.masthead .jump:hover{color:var(--pulse)}
/* On a phone the wordmark and two links will not share a row without both
   breaking mid-word. Give the links their own row rather than let them wrap. */
@media (max-width:480px){
  .masthead{flex-wrap:wrap;row-gap:var(--s-3)}
  .masthead nav{width:100%;gap:var(--s-5)}
  .masthead .jump{white-space:nowrap}
}

/* ---- hero --------------------------------------------------------------- */
.hero{padding-top:clamp(3rem,7vh,6rem)}
.hero h1{max-width:20em}
.hero h1 em{font-style:italic;font-weight:400;color:var(--pulse)}
.hero .sub{margin-top:var(--s-5);max-width:29rem;color:var(--slate)}
.hero .eyebrow{margin-bottom:var(--s-5)}
.plate{margin:var(--s-7) 0 0}
@media (max-width:1023px){
  .hero{display:flex;flex-direction:column}
  .hero .content{order:1}
  .hero .gutter{order:2}
}
@media (min-width:1024px){
  .hero .gutter{min-height:26rem}
  .plate{position:absolute;left:-4px;bottom:0;margin:0}
}

/* the plate: an anatomical key that runs the page's own diagnostic question */
.plate text{font-family:var(--sans);font-size:8.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--slate)}
.plate .stem{stroke:var(--held);stroke-width:1;fill:none}
.plate .tick{stroke:var(--held);stroke-width:1}
.plate .dot{fill:var(--paper);stroke:var(--held);stroke-width:1}
.plate .trace{stroke:var(--pulse);stroke-width:1.6;fill:none;
  stroke-dasharray:26 900;stroke-dashoffset:26}
.plate .mask{stroke:var(--paper);stroke-width:5;fill:none}
.plate .caption{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:10.5px;fill:var(--slate);letter-spacing:0;text-transform:none}

@media (prefers-reduced-motion:no-preference){
  .plate .stem{stroke-dasharray:356;stroke-dashoffset:356;animation:draw 1.3s var(--ease) .2s both}
  .plate .trace{animation:travel 5.4s var(--ease) 1.4s both}
  .plate .mask{animation:closegap 5.4s linear 1.4s both}
  .plate .caption{opacity:0;animation:surface 1.1s var(--ease) 5.2s both}

  /* The portrait is a painting, so it arrives by being painted: three washes
     bloom from separate points and run together, the way water spreads on
     paper. Armed by script only when the figure is near the viewport, so it
     plays where it can be seen instead of off-screen on load. Without script,
     or with reduced motion, none of this applies and the portrait is simply
     there. */
  .portrait.armed .frame{
    --wash:radial-gradient(circle,#000 38%,transparent 72%),
           radial-gradient(circle,#000 38%,transparent 72%),
           radial-gradient(circle,#000 38%,transparent 72%);
    -webkit-mask-image:var(--wash);mask-image:var(--wash);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:44% 33%,64% 60%,32% 75%;mask-position:44% 33%,64% 60%,32% 75%;
    -webkit-mask-size:0% 0%,0% 0%,0% 0%;mask-size:0% 0%,0% 0%,0% 0%}
  .portrait.armed.washed .frame{animation:wash 2s var(--ease) both}
  .portrait.armed figcaption{opacity:0}
  .portrait.armed.washed figcaption{animation:surface .9s var(--ease) 1.15s both}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes travel{        /* up from the ankle, stalls at the gap, goes through */
  0%{stroke-dashoffset:26}
  30%{stroke-dashoffset:-102}
  52%{stroke-dashoffset:-102}
  100%{stroke-dashoffset:-382}
}
@keyframes closegap{0%,44%{opacity:1} 56%,100%{opacity:0}}
@keyframes surface{to{opacity:1}}
@keyframes wash{          /* fast at first, then slowing, as pigment does */
  0%{opacity:.12;-webkit-mask-size:0% 0%,0% 0%,0% 0%;mask-size:0% 0%,0% 0%,0% 0%}
  45%{opacity:.85;-webkit-mask-size:135% 135%,45% 45%,65% 65%;mask-size:135% 135%,45% 45%,65% 65%}
  100%{opacity:1;-webkit-mask-size:235% 235%,200% 200%,215% 215%;mask-size:235% 235%,200% 200%,215% 215%}
}

/* ---- tenets ------------------------------------------------------------- */
.tenets{display:grid;gap:var(--s-6)}
@media (min-width:680px){.tenets{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-7)}}
.tenet h3{border-top:var(--hair);padding-top:var(--s-3);margin-bottom:var(--s-2)}
.tenet p{color:var(--slate);font-size:var(--t-small);max-width:30em}

/* ---- who comes ---------------------------------------------------------- */
.rows{border-top:var(--hair)}
.rows > div{padding:var(--s-4) 0;border-bottom:var(--hair);display:grid;gap:var(--s-1) var(--s-6)}
@media (min-width:680px){.rows > div{grid-template-columns:11rem minmax(0,1fr)}}
.rows h3{font-family:var(--sans);font-size:var(--t-small);font-weight:500;line-height:1.5}
.rows p{color:var(--slate);font-size:var(--t-small);max-width:36em}

/* ---- stories: the single inversion -------------------------------------- */
.stories{background:var(--night);color:var(--night-text);
  margin-inline:calc(-1 * var(--pad));padding:var(--s-8) var(--pad)}
@media (min-width:1024px){
  .stories{margin-left:0;margin-right:calc(-1 * var(--pad));
    padding:var(--s-8) clamp(2rem,4vw,3.25rem)}
}
.stories .label{color:var(--held)}
.stories h2{color:var(--paper);margin:var(--s-4) 0 var(--s-5)}
.stories .caveat{color:var(--held);font-size:var(--t-small);max-width:33em;
  border-left:1px solid rgba(168,162,155,.45);padding-left:var(--s-4);margin-bottom:var(--s-7)}
.story{max-width:33rem;margin-bottom:var(--s-6)}
.story:last-child{margin-bottom:0}
.story h3{font-family:var(--serif);font-style:italic;font-weight:300;
  color:var(--paper);font-size:1.18rem;margin-bottom:var(--s-2)}
.story p{color:var(--night-text)}
.story .turn{color:var(--paper)}

/* ---- before you come ---------------------------------------------------- */
.terms{border-top:var(--hair);margin:0}
.terms > div{padding:var(--s-4) 0;border-bottom:var(--hair)}
.terms dt{font-family:var(--serif);font-size:var(--t-h3);font-weight:500;margin-bottom:var(--s-1)}
.terms dd{margin:0;color:var(--slate);font-size:var(--t-small);max-width:36em}

/* ---- about -------------------------------------------------------------- */
/* One watercolour on the site, treated as a figure on the plate: hairline
   frame, keyed caption, no rounding, no shadow, no filter. */
.portrait{margin:var(--s-5) 0 var(--s-7);max-width:22rem}
.portrait .frame{aspect-ratio:4/5;border:var(--hair);
  background:var(--paper-2) var(--portrait) center 22% / cover no-repeat}
.portrait figcaption{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3);
  font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;
  font-weight:500;color:var(--slate)}
.portrait figcaption::before{content:"";width:1.25rem;height:1px;background:var(--held);flex:none}
@media (max-width:1023px){.portrait{max-width:20rem}}

.turnline{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--pulse);
  font-size:clamp(1.45rem,1.2rem + 1vw,2rem);line-height:1.28;max-width:22em;margin:var(--s-6) 0}

/* ---- contact ------------------------------------------------------------ */
.details{border-top:var(--hair);margin-top:var(--s-6);padding-top:var(--s-4)}
.details > div{display:grid;gap:0 var(--s-5);padding:var(--s-2) 0}
@media (min-width:520px){.details > div{grid-template-columns:7rem 1fr}}
.details dt{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;
  font-weight:500;color:var(--slate);padding-top:.3rem}
.details dd{margin:0}

/* ---- footer ------------------------------------------------------------- */
footer{border-top:var(--hair);padding:var(--s-5) 0 var(--s-8);
  font-size:var(--t-small);color:var(--slate)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-bottom:var(--s-4)}
footer nav a{color:var(--slate);border-bottom-color:var(--held);font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500}
footer nav a:hover{color:var(--pulse);border-bottom-color:var(--pulse)}
footer p{max-width:36em;margin:0}

/* ---- print: parents will print this and pass it on --------------------- */
@media print{
  :root{--paper:#fff;--ink:#000;--slate:#333;--held:#999}
  body{background:#fff;font-size:11pt}
  .masthead .jump,.actions,.plate,footer nav,.skip{display:none}
  .spine::before,.node{display:none}
  .band{display:block;page-break-inside:avoid}
  .stories{background:none;color:#000;margin:0;padding:0}
  .stories h2,.story h3,.story p,.story .turn,.stories .label{color:#000}
  .stories .caveat{color:#333;border-color:#999}
  a{color:#000;border:0}
}

/* ==========================================================================
   PORTRAIT — a watercolour, and the only photograph-shaped thing on the site.
   Served as a file rather than inlined: both language versions share it, so a
   browser fetches it once for the whole site.
   ========================================================================== */
:root{--portrait:url("/swati.jpg")}


/* ==========================================================================
   THE INVITATION — a recorded practice, set as a page you can sit with.
   Spectral throughout, because every word on it is Swati speaking. Wider
   leading and more rest than the site's prose: this is read slowly, once.
   ========================================================================== */
.invite{max-width:44rem}
.invite-head{padding:var(--s-7) 0 var(--s-6)}
.invite-head h1{margin-top:var(--s-3)}
.invite-rule{border:0;border-top:var(--hair);margin:var(--s-7) 0}
.invite-body{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.14rem,1.05rem + .4vw,1.32rem);line-height:1.72}
.invite-body p{max-width:32rem;margin:0 0 1.45em}
.invite-turn{color:var(--pulse);font-style:italic}
.invite-silence{font-family:var(--sans);font-style:normal;font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;font-weight:500;
  color:var(--slate);display:flex;align-items:center;gap:var(--s-3);
  margin:var(--s-7) 0 !important}
.invite-silence::before,.invite-silence::after{content:"";height:1px;background:var(--held);flex:1}
.invite-note{max-width:32rem}
@media (max-width:1023px){.invite-head{padding-top:var(--s-6)}}

/* ---- the letter --------------------------------------------------------- */
.letter{font-family:var(--serif);font-weight:300;font-size:var(--t-lede);line-height:1.62}
.letter p{max-width:32rem;margin-bottom:1.3em}
.signoff{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:var(--t-lede);margin-top:var(--s-5)}

/* the recording itself — native controls, deliberately unstyled beyond the
   frame: a custom player would be a component the system does not want.
   preload="none" matters more than any of this: nothing is fetched until
   someone presses play. */
.invite-audio{margin:var(--s-6) 0 0;padding:var(--s-5);background:var(--paper-2);max-width:32rem}
.invite-audio .label{margin-bottom:var(--s-3)}
/* The recording plays from Wistia. Held at 60px the player draws as one
   compact bar (play, skip, speed, volume); any taller and it reserves a
   blank cover-image area above the controls. */
.invite-audio .player{height:60px;margin-bottom:var(--s-3)}
.invite-audio wistia-player{width:100%;height:100%}
.invite-audio .quiet{margin:0}
.invite-transcript-head{margin-bottom:var(--s-6)}
.invite-transcript-head .label{margin-bottom:var(--s-2)}