/* ─────────────────────────────────────────────────────────────
   AURA SHANTI — stylesheet
   Palette from the brief: parchment · sand · stone · muted clay ·
   tobacco · charcoal. No gradients, no gold, no bright white.
   ───────────────────────────────────────────────────────────── */
:root{
  --ground:#F3EDE2;      /* warm cream / parchment */
  --ground-2:#ECE4D5;    /* sand-light, alternate ground */
  --plate:#F9F5EE;       /* paper plate, cards, inputs */
  --sand:#D8CAB0;
  --rule:#D5C8B3;
  --rule-soft:#E4DACB;
  --hair:#EBE3D6;        /* hairline grid rules */
  --stone:#746A5E;       /* captions, muted text (AA on parchment) */
  --stone-line:#8C8276;  /* hairline drawings: the mandala */
  --clay-text:#8F5740;   /* clay for small text (AA contrast) */
  --wm:.15;              /* watermark strength */
  --clay:#A5684E;        /* accent, used sparingly */
  --tobacco:#5A4634;
  --ink:#2A2623;         /* charcoal text */
  --shadow:0 1px 0 rgba(42,38,35,.06);
  --cover-shadow:rgba(42,38,35,.32);   /* the cover lifting off the page (Practice With Me, Explore Yoga) */
  --serif:'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans:'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;   /* one family for everything, Greek and Latin */
  --hand:'Cormorant Garamond', 'Cormorant', Garamond, serif;
  --home-sans:'Alegreya Sans', 'Gill Sans', 'Segoe UI', Helvetica, Arial, sans-serif;   /* the Home film's small lines, as at first */
  --deva:'Noto Serif Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Devanagari MT', serif;
  --fs-eyebrow:.8rem;
  --fs-small:.98rem;
  --fs-body:1.22rem;
  --fs-lead:clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
  --fs-h2:clamp(2.1rem, 1.4rem + 3.4vw, 3.9rem);
  --fs-h1:clamp(2.6rem, 1.2rem + 8vw, 7.4rem);
  --gutter:clamp(16px, 5vw, 64px);
  --measure:34em;
  color-scheme:only light;   /* the parchment on every device: no automatic dark theme, and no browser-side darkening of the page */
}

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
html{scroll-padding-top:4.5rem}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3,h4{font-family:var(--serif); font-weight:300; line-height:1.05; margin:0; text-wrap:balance}
p{margin:0}
:focus-visible{outline:1.5px solid var(--clay); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.eyebrow{font-family:var(--sans); font-weight:500; font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--stone)}
.serif{font-family:var(--serif)}
.ital{font-family:var(--serif); font-style:italic; font-weight:300}
.deva{font-family:var(--deva); font-weight:400}
.hand{font-family:var(--hand); font-size:1.5rem; color:var(--clay); line-height:1.2}
.small{font-size:var(--fs-small); color:var(--stone)}
.lead{font-family:var(--serif); font-size:var(--fs-lead); line-height:1.35; font-weight:300}
.measure{max-width:var(--measure)}
.wrap{max-width:1180px; margin-inline:auto; padding-inline:var(--gutter)}
.rule{border:0; border-top:1px solid var(--rule); margin:0}
.dot::before{content:"·"; margin-inline:.5em; color:var(--stone)}
.prose p + p{margin-top:1em}
.prose{max-width:var(--measure)}
.prose em{font-family:var(--serif); font-style:italic; font-size:1.06em}

/* underlined text link */
.tlink{display:inline-flex; align-items:baseline; gap:.5em; font-family:var(--sans); font-weight:400; font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; padding-bottom:.25em; border-bottom:1px solid var(--rule); transition:border-color .3s, color .3s}
.tlink:hover{border-color:var(--clay); color:var(--clay-text)}
.tlink .arr{font-family:var(--serif); font-size:1.1em; letter-spacing:0; transform:translateY(.02em)}

/* buttons: quiet, hairline */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:2.9rem; padding:.55rem 1.5rem; border:1px solid var(--ink); border-radius:999px; font-family:var(--sans); font-weight:400; font-size:var(--fs-small); letter-spacing:.14em; text-transform:uppercase; transition:background .3s, color .3s, border-color .3s}
.btn:hover{background:var(--ink); color:var(--ground)}
.btn.ghost{border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink); background:transparent; color:var(--ink)}
.btn.clay{border-color:var(--clay); color:var(--clay-text)}
.btn.clay:hover{background:var(--clay); color:var(--ground)}
.btn[disabled]{opacity:.45; cursor:default}

/* ───────────── NAV ───────────── */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem var(--gutter); background:var(--ground); background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule-soft); transition:opacity .6s ease, transform .6s ease, visibility .6s}
/* Home: the top bar stays out of sight until the photographs have gone, but it is still there for the keyboard and
   the screen reader (the language switch, the menu): it shows while the focus is inside it */
body.on-home .nav:not(.revealed){opacity:0; transform:translateY(-10px); pointer-events:none}
body.on-home .nav:not(.revealed):focus-within{opacity:1; transform:none; pointer-events:auto}
.brand{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--serif); font-weight:400; font-size:1.25rem; letter-spacing:.2em; text-transform:uppercase}
.brand svg{width:.95em; height:.95em; color:var(--clay)}
.nav-links{display:flex; gap:clamp(.9rem, 2.4vw, 2.2rem); align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; font-weight:400; padding-bottom:.2em; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; white-space:nowrap}
.nav-links a:hover, .nav-links a.active{border-color:var(--clay)}
.nav-right{display:flex; align-items:center; gap:1rem}
/* contact icons: email · instagram · whatsapp — in the top bar of every page */
.nav-icons{display:inline-flex; align-items:center; gap:.85rem; margin-right:.4rem}
.nav-icons a{display:inline-flex; width:1.05rem; height:1.05rem; padding:.45rem; margin:-.45rem; box-sizing:content-box; color:var(--stone); transition:color .3s}
.nav-icons a:hover{color:var(--clay)}
.nav-icons svg{width:100%; height:100%}
.menu-foot .nav-icons{margin:0}
.menu-foot .nav-icons a{width:1.3rem; height:1.3rem}
/* contact block with icons */
.connect{list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem}
.connect li a{display:inline-flex; align-items:center; gap:.9rem; font-family:var(--serif); font-size:1.35rem; transition:color .3s}
.connect li a:hover{color:var(--clay)}
.connect svg{width:1.25rem; height:1.25rem; color:var(--clay); flex:none}
.connect .lbl{display:block; font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--stone); font-weight:500; margin-bottom:.2rem}
a.place{border-bottom:1px solid var(--rule); transition:border-color .3s, color .3s}
a.place:hover{border-color:var(--clay); color:var(--clay)}
.lang{display:inline-flex; gap:.35em; font-size:var(--fs-eyebrow); letter-spacing:.14em; color:var(--stone)}
.lang button{padding:.1em .15em; letter-spacing:inherit; color:inherit; border-bottom:1px solid transparent}
.lang button[aria-pressed="true"]{color:var(--ink); border-color:var(--clay)}
.menu-btn{display:none; padding:.6rem .5rem; margin:-.6rem -.5rem; font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; font-weight:400}
@media (max-width: 900px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}
/* mobile overlay menu */
.menu{position:fixed; inset:0; z-index:60; background:var(--ground); display:grid; grid-template-rows:auto 1fr auto; padding:1rem var(--gutter) 2rem; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; transform:translateY(-100%); opacity:0; transition:transform .5s cubic-bezier(.6,0,.2,1), opacity .4s; visibility:hidden}
.menu.open{transform:none; opacity:1; visibility:visible}
.menu-top{display:flex; justify-content:space-between; align-items:center}
.menu-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center; gap:.2em}
.menu-list a{font-family:var(--serif); font-size:clamp(2rem, 7vw, 3.2rem); font-weight:300; line-height:1.15}
.menu-list a.active{color:var(--clay)}
.menu-foot{display:flex; justify-content:space-between; align-items:center; color:var(--stone); font-size:var(--fs-small)}
@media (max-height:520px){ .menu-list a{font-size:clamp(1.5rem, 5vh, 2rem)} .menu{padding-block:.75rem 1rem} }

/* ───────────── HOME — one scene in three stages ─────────────
   The Home page is a single screen that stays put while the page scrolls past behind it: .scene is the track (one
   screen plus --travel of scroll), .scene-stage sticks to the top of the window. Three layers, front to back:
     1  .rv-hero    the film, as the Home first was: three bands of Irene's first photographs, each a slow clip, the
                    title across the middle one. On the first scroll they part sideways and thin out, and
     2  .rv-phrase  the words behind them come through, stand a while, and thin out; then, after a breath of empty
     3  .home-nav   parchment, the yantra draws itself from the centre outward, the four words arrive around it, and the
                    finished drawing holds for the last stretch of the track before the page moves on.
   homeFlow() in site.js writes the scroll into custom properties on the scene (0 → 1 unless noted):
     --f-e  the parting (eased)    --f-fade  the film's opacity (1 → 0)    --f-p  the film's own clock
     --sc-t1  title opacity     --sc-hint  hint opacity     --sc-pin the words have come through
     --sc-pout  they are still there (1 → 0)    --w  the word has arrived (per word)
     --rv-sw  hairline width in drawing units (800 / stage px)
   Without JS, and for people who prefer reduced motion (html.sc-static), the three layers stand in the page one
   after the other instead: the photographs, the phrase, the drawing with the four words. */
.scene{position:relative; --travel:350vh; height:calc(100vh + var(--travel))}
.scene-stage{position:sticky; top:0; height:100vh; overflow:hidden; background:var(--ground)}
/* the stage is the small viewport (the phone's browser bars out), the track one LARGE viewport plus the travel: so the
   stage stays stuck to the very end whether the bars are in or out, and homeFlow() maps the scroll onto what can
   really be scrolled */
@supports (height:1svh) and (height:1lvh){
  .scene{--travel:350svh; height:calc(100lvh + var(--travel))}
  .scene-stage{height:100svh}
}
.scene-stage > .rv-hero, .scene-stage > .rv-phrase, .scene-stage > .home-nav{position:absolute; inset:0}
.scene-stage > .rv-hero{z-index:3}
.scene-stage > .rv-phrase{z-index:2}
.scene-stage > .home-nav{z-index:1}
/* the still page: no track, no pinning, the three layers in the flow */
html:not(.rv-js) .scene, html.sc-static .scene{height:auto}
html:not(.rv-js) .scene-stage, html.sc-static .scene-stage{position:static; height:auto; overflow:visible}
html:not(.rv-js) .scene-stage > *, html.sc-static .scene-stage > *{position:relative; inset:auto}

/* 1 · the film: three slow clips of Irene (media/hero-*-960.mp4, 4:3, the first frame as the poster) in a warm grey.
   On a wide screen they stand side by side as three upright panels, each the full height of the stage, the figures
   leaning toward the centre (the crops below); on an upright screen (phones) they are three horizontal bands, one
   above the other. The title stands across them, AURA SHANTI ☾ in large tracked capitals with the small line in
   the sans beneath it, and its letters answer the picture behind them: parchment where they cross the dark figure,
   charcoal over the light wall (a text-clipped gradient whose edge homeFlow() keeps at the figure's outline, also
   while the clips move; blend modes do not composite against <video> in WebKit). On the first scroll the clips part,
   thinning out as they go, and uncover the words behind them: the panels slide outward (the middle one lifts), the
   bands slide sideways (--f-e the parting, eased; --f-fade the film's opacity; --f-p the film's own clock). The layer
   takes no pointer, the "Tap to play" button apart. */
.rv-hero{pointer-events:none}
.bands{position:absolute; inset:0; display:flex; flex-direction:column; gap:3px}
.bands > .band{position:relative; flex:1 1 0; min-height:0; overflow:hidden; background:#D9D4CC; will-change:transform, opacity; opacity:var(--f-fade, 1)}
.bands > .band video, .bands > .band img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.14) contrast(1.02)}
.bands > .band-1 video, .bands > .band-1 img{object-position:50% 45%}
.bands > .band-2 video, .bands > .band-2 img{object-position:50% 40%}
.bands > .band-3 video, .bands > .band-3 img{object-position:50% 62%}
.bands > .band-1{transform:translate3d(calc(var(--f-e, 0) * -42%), calc(var(--f-e, 0) * -18%), 0) scale(calc(1 - var(--f-e, 0) * .06))}
.bands > .band-2{transform:translate3d(calc(var(--f-e, 0) * 42%), 0, 0) scale(calc(1 - var(--f-e, 0) * .06))}
.bands > .band-3{transform:translate3d(calc(var(--f-e, 0) * -42%), calc(var(--f-e, 0) * 18%), 0) scale(calc(1 - var(--f-e, 0) * .06))}
/* a wide screen: three upright panels side by side. The clips are cropped so the figures stay whole and lean toward
   the centre of the stage (the hand holding the toes kept in the first panel, the lotus torso to the left of the
   third), and the title rests on them. The outer panels slide outward on the first scroll, the middle one lifts. */
@media (min-aspect-ratio:1/1) and (min-width:700px){
  .bands{flex-direction:row}
  .bands > .band{min-width:0}
  .bands > .band-1 video, .bands > .band-1 img{object-position:45% 50%}
  .bands > .band-2 video, .bands > .band-2 img{object-position:50% 50%}
  .bands > .band-3 video, .bands > .band-3 img{object-position:70% 50%}
  .bands > .band-1{transform:translate3d(calc(var(--f-e, 0) * -120%), 0, 0) scale(calc(1 - var(--f-e, 0) * .06))}
  .bands > .band-2{transform:translate3d(0, calc(var(--f-e, 0) * -40%), 0) scale(calc(1 - var(--f-e, 0) * .06))}
  .bands > .band-3{transform:translate3d(calc(var(--f-e, 0) * 120%), 0, 0) scale(calc(1 - var(--f-e, 0) * .06))}
  .rv-hero .scroll-hint{color:#F3EDE2}        /* the hint stands at the foot of the middle panel, on the figure in shadow (the selector outweighs the base rule below) */
  .rv-hero .scroll-hint i{background:#F3EDE2}
}
/* the title: parchment over the dark figure, charcoal over the wall */
.hero-title{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; text-align:center; pointer-events:none; color:#2A2623; padding-inline:var(--gutter); opacity:var(--sc-t1, 1); transform:translate3d(0, calc(var(--f-p, 0) * -48px), 0)}
.hero-title > div{width:100%; min-width:0}
.hero-title.split > div{color:transparent; -webkit-text-fill-color:transparent; background-image:linear-gradient(90deg, #F3EDE2 0, #F3EDE2 var(--edge-a, 38%), #2A2623 var(--edge-b, 44%), #2A2623 100%); -webkit-background-clip:text; background-clip:text}
.hero-title h1{font-size:min(clamp(2.5rem, 1rem + 7vw, 7.4rem), 14vh); max-width:100%; font-weight:300; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:.18em; flex-wrap:wrap}
.hero-title h1 svg{width:.55em; height:.55em; color:var(--moon, #2A2623); -webkit-text-fill-color:initial; opacity:.9; vertical-align:middle}   /* the moon cannot take the clipped gradient: paintTitle() gives it the colour of its side */
.hero-title p{margin-top:1.1rem; font-family:var(--home-sans); font-weight:400; font-size:clamp(.7rem, .6rem + .5vw, .95rem); letter-spacing:.38em; text-transform:uppercase}
/* the small line keeps an edge of its own: where the title takes two lines (phones) it sits lower, and the figure is narrower there */
.hero-title.split p{background-image:linear-gradient(90deg, #F3EDE2 0, #F3EDE2 var(--edge-pa, var(--edge-a, 38%)), #2A2623 var(--edge-pb, var(--edge-b, 44%)), #2A2623 100%); -webkit-background-clip:text; background-clip:text}
.scroll-hint{position:absolute; z-index:2; left:50%; bottom:1.4rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:#2A2623; font-family:var(--home-sans); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; font-weight:400; pointer-events:none; opacity:var(--sc-hint, 1)}
.scroll-hint i{display:block; width:1px; height:2.6rem; background:#2A2623; transform-origin:top; animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0); opacity:0} 40%{transform:scaleY(1); opacity:.9} 100%{transform:scaleY(1) translateY(1rem); opacity:0}}
/* shown only when the browser refused to start the film by itself (Low Power Mode, some in-app browsers), and for
   people who save data or prefer reduced motion: the film starts when they ask for it */
.tap-hint{position:absolute; z-index:3; left:50%; bottom:1.6rem; transform:translateX(-50%); display:none; padding:.6rem 1.2rem; border:1px solid #2A2623; border-radius:999px; color:#2A2623; background:rgba(243,237,226,.85); font-family:var(--home-sans); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; font-weight:400; white-space:nowrap; pointer-events:auto}
.rv-hero.needs-tap .tap-hint{display:inline-block}
.rv-hero.needs-tap .scroll-hint{display:none}
.rv-hero.film-off .tap-hint{display:none}   /* the film has thinned out: nothing left to start */
/* the still page: the film stands one screen tall, in the flow */
html:not(.rv-js) .rv-hero, html.sc-static .rv-hero{height:100vh; min-height:480px}
@supports (height:1svh){ html:not(.rv-js) .rv-hero, html.sc-static .rv-hero{height:100svh} }
html:not(.rv-js) .scroll-hint, html.sc-static .scroll-hint{display:none}

/* 2 · the words behind the film: centred on the screen. They come through as the film thins out (--sc-pin, 0 → 1),
   then thin out themselves a while before the drawing begins (--sc-pout, 1 → 0) */
.rv-phrase{display:grid; place-items:center; text-align:center; padding:0 var(--gutter); pointer-events:none; opacity:calc(var(--sc-pin, 1) * var(--sc-pout, 1)); transform:translate3d(0, calc((1 - var(--sc-pin, 1)) * 18px + (1 - var(--sc-pout, 1)) * -22px), 0)}
.rv-phrase .quote{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height:1.25; max-width:18em; margin-inline:auto; color:var(--ink); text-wrap:balance}
.scene .rv-phrase .sub{margin-top:1.4rem; font-family:var(--home-sans); font-weight:400; font-size:var(--fs-eyebrow); letter-spacing:.38em; text-transform:uppercase; color:var(--stone); padding-left:.38em; white-space:nowrap}
@media (max-width:340px){ .scene .rv-phrase .sub{letter-spacing:.26em; font-size:.72rem; padding-left:.26em} }
html:not(.rv-js) .rv-phrase, html.sc-static .rv-phrase{padding-block:clamp(4rem, 12vh, 7rem) clamp(2rem, 6vh, 4rem)}

/* stillness: reduced motion (homeFlow() also adds html.sc-static and writes the properties at rest) */
@media (prefers-reduced-motion: reduce){
  .bands > .band, .hero-title, .rv-phrase{transform:none}
  .scroll-hint i{animation:none}
}

/* ───────────── HOME sections ───────────── */
.chapter{display:grid; grid-template-columns:repeat(12, 1fr); gap:1.5rem 2rem; padding-block:clamp(3.5rem, 9vh, 7rem); border-top:1px solid var(--rule); align-items:start}
.chapter .ch-text{grid-column:1 / span 6}
.chapter .ch-side{grid-column:8 / span 5; display:flex; flex-direction:column; gap:1.2rem; padding-top:.6rem}
.chapter.flip .ch-text{grid-column:7 / span 6; order:2}
.chapter.flip .ch-side{grid-column:1 / span 5; order:1}
.chapter h2{font-size:var(--fs-h2); margin:.55rem 0 .35rem}
.chapter .sub{font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem, 1rem + 1vw, 1.6rem); color:var(--tobacco)}
.chapter p.body{margin-top:1.4rem; max-width:var(--measure)}
.chapter .tlink{margin-top:1.8rem}
@media (max-width: 860px){
  .chapter .ch-text, .chapter.flip .ch-text{grid-column:1 / -1; order:1}
  .chapter .ch-side, .chapter.flip .ch-side{grid-column:1 / -1; order:2}
}

/* archival inserts: small findings inside the book */
.insert{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding-block:clamp(2rem, 5vh, 3.5rem)}
.insert .deva{font-size:clamp(2.2rem, 1.6rem + 3vw, 4rem); line-height:1; color:var(--ink)}
.insert .latin{font-family:var(--sans); font-weight:400; font-size:var(--fs-eyebrow); letter-spacing:.42em; text-transform:uppercase; color:var(--stone); padding-left:.42em}
.insert .glyph{width:1.5rem; height:1.5rem; color:var(--clay)}
.insert.side{align-items:flex-start; text-align:left; padding-block:0}
.insert.side .latin{padding-left:0}
.hairlines{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.2rem; width:min(100%, 28rem)}
.hairlines::before,.hairlines::after{content:""; height:1px; background:var(--rule)}
.note{display:inline-flex; align-items:center; gap:.6rem; transform:rotate(-2.5deg); color:var(--clay)}
.note .hand{font-size:1.7rem}
.note svg{width:2.4rem; height:1rem; overflow:visible}

/* plate — a framed archival figure */
.plate{border:1px solid var(--rule); padding:5px; background:var(--plate); box-shadow:var(--shadow); max-width:22rem}
.plate .inner{border:1px solid var(--rule); padding:1.6rem 1.4rem 1.1rem; display:flex; flex-direction:column; align-items:center; gap:1rem}
.plate svg{width:min(100%, 11rem); height:auto; color:var(--tobacco)}
.plate figcaption{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--stone); text-align:center; line-height:1.35}
.plate figcaption b{font-style:normal; font-weight:500; font-family:var(--sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; display:block; margin-bottom:.3rem; color:var(--tobacco)}

/* photograph crop */
.photo{max-width:24rem}
.photo .frame{aspect-ratio:4/3; overflow:hidden; background:#D9D4CC; max-width:100%}
.photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.18) contrast(.98); object-position:20% 40%}
.photo figcaption{margin-top:.7rem; font-family:var(--serif); font-style:italic; color:var(--stone); font-size:1rem; line-height:1.35}
.photo figcaption b{font-style:normal; font-family:var(--sans); font-weight:500; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tobacco); display:block; margin-bottom:.25rem}
/* photographs as chapter openers: Irene's portrait on About, the pose each practice chapter teaches (B · Movement,
   C · Rest), one resting figure beside the 1:1 sessions. The frontispiece extends figure.photo: the box is fixed by
   aspect-ratio (no shift while loading), the crop by --pos, both set per photograph on the figure; the print is
   multiplied into the parchment rather than pasted on it. The mandala pages stay photo-free. */
.frontis{max-width:none; margin:0}   /* the UA figure margin (1em 40px) would offset the plate */
.frontis .frame{aspect-ratio:var(--ar, 4/5); background:var(--plate)}
.frontis img{object-position:var(--pos, 50% 50%); mix-blend-mode:multiply}
.frontis figcaption{max-width:26em}
/* B · Movement: a tall column (the pose stands) beside the chapter's opening heading and prose; the manual follows at full width */
.frontis-row{margin-bottom:.5rem}
.frontis-row .frontis{align-self:start}
.frontis-row + .tech{border-top:0}
.frontis-row + .manual{margin-top:clamp(1.6rem, 4vh, 2.4rem)}
@media (max-width: 860px){
  .frontis-row{gap:1.8rem}
  .frontis-row .frontis{max-width:26rem}
}
/* C · Rest: the pose lies down, so the frontispiece is a landscape strip under the page head, before the chapter's
   first rule; it keeps to the measure rather than becoming a banner */
.frontis.strip{width:min(100%, 40rem); margin:0 0 clamp(2.5rem, 6vh, 4rem)}
/* Practice With Me: one small resting figure under the 1:1 column's introduction */
.frontis.aside{max-width:18rem; margin-top:2rem}
/* About: the portrait keeps the original 24rem column */
.frontis.portrait{max-width:24rem}

/* ───────────── FOOTER ───────────── */
.footer{border-top:1px solid var(--rule); background:var(--ground-2); padding-block:clamp(4rem, 10vh, 7rem) 2rem; margin-top:clamp(3rem, 8vh, 6rem)}
body[data-page="home"] .footer{margin-top:0}   /* on Home the Sanskrit insert after the scene is the breath before the footer */
.home-santi{padding-block:clamp(2.5rem, 7vh, 4.5rem)}
.footer .big{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.2rem, 1rem + .7vw, 1.55rem); line-height:1.3; max-width:22em; color:var(--ink)}   /* a quiet closing echo of the home phrase, not a second headline */
.footer .triad{margin-top:.7rem; font-size:var(--fs-eyebrow); letter-spacing:.3em; text-transform:uppercase; font-weight:400; color:var(--stone)}
.fcols{display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem 3rem; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--rule)}
.fcols h2{font-family:var(--sans); font-weight:500; font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem}
.fcols ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
.fcols li a, .fcols li span{font-family:var(--serif); font-size:1.2rem}
.fcols li a:hover{color:var(--clay)}
.fbottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule-soft); font-size:var(--fs-small); color:var(--stone)}
@media (max-width: 760px){ .fcols{grid-template-columns:1fr} }

/* ───────────── PAGES ───────────── */
.page-head{padding-block:clamp(7rem, 18vh, 11rem) clamp(2.5rem, 6vh, 4rem)}
.page-head h1{font-size:clamp(2.6rem, 1.6rem + 5vw, 5.4rem); margin:.6rem 0 1.2rem}
.page-head .lead{max-width:26em; color:var(--tobacco); text-wrap:balance}
.section{padding-block:clamp(3rem, 8vh, 6rem); border-top:1px solid var(--rule); scroll-margin-top:4.5rem}
.section h2{font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin:.5rem 0 1rem}
.section h3{font-size:1.65rem; margin:0 0 .4rem}
.two{display:grid; grid-template-columns:5fr 7fr; gap:2rem 4rem; align-items:start}
@media (max-width: 860px){ .two{grid-template-columns:1fr} .two > *{min-width:0} .sticky{position:static} .table-wrap{position:relative} }   /* the timetable cell shrinks and scrolls inside .table-wrap, its sr-only caption included */
.sticky{position:sticky; top:5.5rem}
.crumb{display:inline-flex; flex-wrap:wrap; gap:.2em .6em; align-items:baseline; font-size:var(--fs-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--stone); font-weight:500}
.crumb a:hover{color:var(--clay)}

/* explore hub: three paths */
.paths{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.path{display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.8rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem); border-left:1px solid var(--rule-soft); transition:background .3s}
.path:first-child{border-left:0}
.path:hover{background:var(--plate)}
.path .glyph{width:1.6rem; height:1.6rem; color:var(--clay)}
.path h2{font-size:clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)}
.path .items{font-family:var(--serif); font-style:italic; color:var(--tobacco); font-size:1.15rem; line-height:1.4}
.path p{max-width:26em}
.path .tlink{margin-top:auto; align-self:flex-start; padding-top:1.4rem}
@media (max-width: 860px){ .paths{grid-template-columns:1fr} .path{border-left:0; border-top:1px solid var(--rule-soft)} .path:first-child{border-top:0} }

/* class list */
.classes{list-style:none; margin:0; padding:0}
.classes li{display:grid; grid-template-columns:2.2rem 1fr; gap:1rem; padding-block:1.6rem; border-top:1px solid var(--rule-soft); align-items:start}
.classes li:first-child{border-top:0}
.classes .g{width:1.3rem; height:1.3rem; color:var(--clay); margin-top:.35rem}
.classes h3{font-size:1.75rem}
.classes h3 span{font-style:italic; color:var(--tobacco)}
.classes p{max-width:var(--measure); margin-top:.3rem}

/* timetable */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:var(--fs-small); font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:.9rem .9rem .9rem 0; border-top:1px solid var(--rule-soft); vertical-align:top}
th{font-weight:500; font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--stone); border-top:0}
td.serif{font-family:var(--serif); font-size:1.2rem}
td.time{white-space:nowrap}
.timetable-note{margin-top:1.2rem}

/* contact block */
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; font-family:var(--serif); font-size:1.35rem}
.contact-list span{display:block; font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--stone); font-weight:500; margin-bottom:.2rem}
.contact-list a:hover{color:var(--clay)}

/* forms */
input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%; font:inherit; font-weight:300; color:var(--ink); background:var(--plate); border:1px solid var(--rule); padding:.8rem 1rem; border-radius:0; transition:border-color .3s}
input:focus,textarea:focus{border-color:var(--clay)}
input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}
input:focus-visible,textarea:focus-visible{outline:1.5px solid var(--clay); outline-offset:2px}
textarea{min-height:7rem; resize:vertical}
label.f{display:block; font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--stone); font-weight:500; margin-bottom:.45rem}
.field{margin-bottom:1.3rem}
.toast{margin-top:1rem; font-family:var(--serif); font-style:italic; color:var(--clay-text); font-size:1.15rem; min-height:1.5em}

/* questionnaire (private page) */
.quiz{background:var(--plate); border:1px solid var(--rule); padding:clamp(1.5rem, 4vw, 3rem); box-shadow:var(--shadow)}
.quiz-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.8rem}
.quiz-top .prog{font-family:var(--serif); font-size:1.3rem; font-variant-numeric:tabular-nums; color:var(--stone)}
.quiz .bar{height:1px; background:var(--rule); margin-bottom:2rem; position:relative}
.quiz .bar i{position:absolute; inset:0 auto 0 0; background:var(--clay); transition:width .4s ease}
.quiz h3{font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom:.6rem}
.quiz .hint{color:var(--stone); max-width:var(--measure); margin-bottom:1.2rem}
.opts{display:flex; flex-direction:column; gap:.55rem; margin-top:1.2rem}
.opts.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr))}
.opt{display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 1rem; border:1px solid var(--rule); background:var(--ground); cursor:pointer; transition:border-color .25s, background .25s}
.opt:hover{border-color:var(--stone)}
.opt input{margin:0; flex:none; margin-top:.35rem; accent-color:var(--clay)}
.opt .t{font-weight:400}
.opt .d{display:block; font-size:var(--fs-small); color:var(--stone); margin-top:.15rem}
.opt:has(input:checked){border-color:var(--clay); background:var(--plate)}
.quiz-nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; flex-wrap:wrap}
.quiz .done{display:none}
.quiz.finished .step, .quiz.finished .quiz-nav{display:none}
.quiz.finished .done{display:block}
.summary{white-space:pre-wrap; font-family:var(--serif); font-size:1.1rem; line-height:1.5; background:var(--ground); border:1px solid var(--rule); padding:1.2rem; margin-top:1rem; max-height:22rem; overflow:auto}
.steps-desc{display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem 2rem; margin-top:1.4rem}
.steps-desc b{display:block; font-family:var(--serif); font-weight:400; font-size:1.25rem; margin-bottom:.2rem}
.steps-desc p{font-size:var(--fs-small); color:var(--stone)}
.consent{border:1px solid var(--rule); background:var(--plate); padding:1.4rem 1.6rem; margin-block:1.6rem; max-width:var(--measure)}
.consent p{font-size:var(--fs-small); color:var(--tobacco)}
.consent label{display:flex; gap:.8rem; align-items:flex-start; margin-top:1rem; font-weight:400; cursor:pointer}
.consent input{margin-top:.35rem; accent-color:var(--clay)}


/* prāṇāyāma technique cards */
.tech{display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem 2rem; padding-block:2.2rem; border-top:1px solid var(--rule-soft)}
.tech:first-of-type, .prose + .tech, h2 + .tech{border-top:0}
.tech .name{grid-column:1 / span 4}
.tech .name h3{font-size:1.9rem}
.tech .name .deva{display:block; font-size:1.3rem; color:var(--stone); margin-top:.2rem}
.tech .name .en{font-style:italic; color:var(--tobacco); font-family:var(--serif); font-size:1.15rem}
.tech dl{grid-column:5 / span 8; display:grid; grid-template-columns:11rem 1fr; gap:.55rem 1.4rem; margin:0}
.tech dt{font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--stone); padding-top:.25em}
.tech dd{margin:0; max-width:var(--measure)}
@media (max-width: 860px){
  .tech{grid-template-columns:minmax(0,1fr)}   /* twelve 1fr tracks plus eleven 2rem gaps overflow a phone-width card */
  .tech .name, .tech dl{grid-column:1 / -1}
  .tech dl{grid-template-columns:1fr; gap:.2rem .8rem}
  .tech dd{margin-bottom:.6rem}
}

/* Sūrya Namaskāra — page of an old manual */
.manual{border:1px solid var(--hair); padding:5px; background:var(--plate); box-shadow:var(--shadow)}
.manual .inner{border:1px solid var(--hair); padding:clamp(1.3rem, 3.5vw, 3rem)}
.manual .mhead{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap; border-bottom:1px solid var(--hair); padding-bottom:1rem; margin-bottom:1.6rem}
.manual .mhead .t{font-family:var(--serif); font-size:1.6rem}
.manual .mfoot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; font-family:var(--serif); font-style:italic; color:var(--stone)}
.manual .mfoot > span:first-child{max-width:var(--measure); flex:1 1 auto}


/* philosophy topics */
.topics{list-style:none; margin:0; padding:0; counter-reset:ch}
.topic{padding-block:clamp(2.4rem, 6vh, 4rem); border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem 2rem}
.topic .th{grid-column:1 / span 4}
.topic .th h2{font-size:clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); margin:.4rem 0 .6rem}
.topic .th .deva{display:block; font-size:1.35rem; color:var(--stone); margin-top:.4rem}
.topic .tb{grid-column:5 / span 8}
.topic .tb p + p{margin-top:1em}
.topic .tb p{max-width:var(--measure)}
.topic .tb .ital{color:var(--tobacco)}
@media (max-width: 860px){ .topic{grid-template-columns:1fr; column-gap:0} .topic .th, .topic .tb{grid-column:1 / -1} }   /* one column: twelve gaps would set a minimum width wider than a small phone */
.sources{list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; font-family:var(--serif); font-size:1.15rem}
.sources li span{color:var(--stone); font-style:italic}
.notice{border-left:1px solid var(--clay); padding-left:1.2rem; max-width:var(--measure); color:var(--tobacco); font-size:var(--fs-small)}

/* glossary */
.gloss-tools{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; margin-bottom:1.5rem}
.gloss-tools input{flex:1 1 16rem}
.chips{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{padding:.45rem .9rem; border:1px solid var(--rule); border-radius:999px; font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; font-weight:400; transition:border-color .25s, background .25s}
.chip:hover{border-color:var(--stone)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.alpha{display:flex; flex-wrap:wrap; gap:.15rem .5rem; font-family:var(--serif); font-size:1.05rem; color:var(--stone); margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid var(--rule)}
.alpha button{padding:.1rem .3rem; color:inherit}
.alpha button.on{color:var(--clay)}
.alpha button:disabled{opacity:.3; cursor:default}
.gl{list-style:none; margin:0; padding:0}
.gl .letter{font-family:var(--serif); font-size:2.2rem; color:var(--stone); padding:1.8rem 0 .4rem; border-bottom:1px solid var(--rule); margin-bottom:.2rem}
.gl .term{display:grid; grid-template-columns:minmax(9rem, 2fr) minmax(7rem, 1.4fr) 3fr auto; gap:.5rem 1.6rem; align-items:baseline; padding:.75rem 0; border-top:1px solid var(--rule-soft)}
.gl .term .sk{font-family:var(--serif); font-size:1.35rem}
.gl .term .dv{font-family:var(--deva); font-size:1.2rem; color:var(--tobacco)}
.gl .term .m{font-weight:300}
.gl .term .c{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); font-weight:500}
.gl .empty{padding:2rem 0; color:var(--stone); font-family:var(--serif); font-style:italic; font-size:1.2rem}
@media (max-width: 700px){ .gl .term{grid-template-columns:1fr 1fr; gap:.15rem 1rem} .gl .term .m{grid-column:1 / -1} .gl .term .c{grid-column:1 / -1} }

/* journal */
/* the themes: one quiet line (two at most), like a colophon */
.jcats{display:flex; flex-wrap:wrap; gap:.25rem 0; max-width:22rem; font-family:var(--serif); font-style:italic; font-weight:300; font-size:1.1rem; line-height:1.5; color:var(--tobacco)}
.jcats span:not(:last-child)::after{content:"·"; margin-inline:.6em; color:var(--stone)}
.entries{list-style:none; margin:0; padding:0}
.entries li{display:grid; grid-template-columns:8rem 1fr; gap:1rem 2rem; padding-block:1.8rem; border-top:1px solid var(--rule-soft)}
.entries .meta{font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--stone); display:flex; flex-direction:column; gap:.3rem}
.entries h3{font-size:1.7rem}
.entries .body{max-width:var(--measure); margin-top:.6rem}
.entries .body p + p{margin-top:.8em}
.entries .empty{display:block; max-width:var(--measure); font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--stone); padding-block:2rem; border-top:1px solid var(--rule-soft)}
@media (max-width: 640px){ .entries li{grid-template-columns:1fr} }

/* about */
.about-quote{font-family:var(--serif); font-style:italic; font-size:clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height:1.25; max-width:20em; color:var(--tobacco)}
.sig{margin-top:2.4rem; font-family:var(--serif); font-size:1.3rem; line-height:1.45}
.sig b{font-weight:500; display:block}
.sig .moon{width:1rem; height:1rem; color:var(--clay); vertical-align:-.1em}
.om{margin-top:3rem; padding-top:2rem; border-top:1px solid var(--rule); font-family:var(--serif)}
.om .mantra{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing:.06em}
.om .mantra .deva{display:block; font-size:1.1em; color:var(--tobacco); margin-bottom:.35rem}
.om .lines{margin-top:1rem; font-style:italic; font-size:1.25rem; line-height:1.5; color:var(--tobacco)}


/* ── Sūrya Namaskāra plate: twelve positions, each with room to breathe ── */
.sn{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair)}
.sn li{background:var(--plate); padding:clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.2rem, 2vw, 1.7rem) clamp(1.4rem, 2vw, 1.8rem); display:flex; flex-direction:column; align-items:flex-start; min-height:16rem}
.sn .n{font-family:var(--serif); font-size:1.1rem; letter-spacing:.08em; color:var(--stone); line-height:1; margin-bottom:1.5rem}
.sn .sk{font-family:var(--serif); font-size:clamp(1.3rem, 1.1rem + .6vw, 1.55rem); line-height:1.15; color:var(--ink); text-wrap:balance; min-height:2.3em}
.sn .en{font-family:var(--sans); font-size:.95rem; color:var(--tobacco); margin-top:.55rem; line-height:1.35}
.sn .ck{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--clay-text); margin-top:.9rem}
.sn .br{margin-top:auto; padding-top:1.6rem; font-family:var(--sans); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; display:inline-flex; align-items:center; gap:.45em; color:var(--stone)}
.sn .br.in{color:var(--clay-text)}
.sn .br svg{width:.7rem; height:.7rem}
@media (max-width: 900px){ .sn{grid-template-columns:repeat(2, minmax(0,1fr))} .sn li{min-height:14.5rem} .sn .sk{min-height:0} }
@media (max-width: 560px){
  .sn{display:block; background:none; border:0}
  .sn li{display:grid; grid-template-columns:2.8rem minmax(0,1fr); grid-template-areas:"n sk" "n en" "n ck" "n br"; min-height:0; padding:1.3rem 0; border-bottom:1px solid var(--hair); background:none}
  .sn .n{grid-area:n; margin:0; padding-top:.3rem; font-size:1rem}
  .sn .sk{grid-area:sk; min-height:0} .sn .en{grid-area:en; margin-top:.3rem} .sn .ck{grid-area:ck; margin-top:.55rem} .sn .br{grid-area:br; margin-top:1rem; padding-top:0}
  .manual{padding:3px} .manual .inner{padding:1.2rem 1rem} .manual .mhead{margin-bottom:.4rem}
}

/* ── the mandala as a recurring mark, and the Practice pages ── */
.mandala *{vector-effect:non-scaling-stroke}
.mandala .m-clay{display:none}
.hub .mandala .m-clay{display:block}
.mark-glyph{display:block; width:2.3rem; height:2.3rem; color:var(--clay); opacity:.8; margin:1.4rem 0 1.1rem}
.mark-glyph .mandala{width:100%; height:100%; stroke-width:1.25}
.mark-glyph .m-ticks, .mark-glyph .m-petals{display:none}
.page-head{position:relative}
.page-head > *{position:relative; z-index:1}
.wm{position:absolute; right:0; top:-12%; width:min(44vw, 560px); aspect-ratio:1; color:var(--clay); opacity:var(--wm); pointer-events:none; z-index:0 !important}
.wm .mandala{width:100%; height:100%}
@media (max-width: 760px){ .wm{width:60vw; top:-6vw; opacity:calc(var(--wm) * .9)} }
main.pt{transition:opacity .6s ease, transform .6s ease}
html.js main.pt{animation:arrive .9s cubic-bezier(.2,.6,.2,1) backwards}
@keyframes arrive{from{opacity:0; transform:translateY(12px)}}
body.leaving main.pt{opacity:0; transform:translateY(-10px)}
.pnav{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; border-top:1px solid var(--hair); padding-block:clamp(2rem, 5vh, 3.5rem) 0; margin-top:clamp(2rem, 6vh, 4rem)}
.pnav .next{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:.5rem; margin-left:auto}
.pnav .next .t{font-family:var(--serif); font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height:1; transition:color .3s}
.pnav .next:hover .t{color:var(--clay)}

/* ── Mantras ── */
.mantra + .mantra{margin-top:clamp(3rem, 8vh, 5rem); border-top:1px solid var(--hair); padding-top:clamp(2rem, 5vh, 3rem)}
.mantra .m-head h2{font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem)}
.mantra .m-head .en{font-family:var(--serif); font-style:italic; color:var(--tobacco); font-size:1.15rem; margin-top:.4rem}
.mantra .m-head .src{font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-top:.8rem}
.m-text{margin-top:clamp(1.6rem, 4vh, 2.4rem); padding:clamp(1.6rem, 3.5vw, 2.8rem) clamp(1.2rem, 3vw, 2.5rem); background:var(--plate); border:1px solid var(--hair); text-align:center}
.m-text .deva{font-size:clamp(1.35rem, 1rem + 1.3vw, 2rem); line-height:1.9; color:var(--ink)}
.m-text .iast{font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height:1.7; color:var(--tobacco); margin-top:1rem}
.m-meaning{margin-top:2.2rem; max-width:var(--measure)}
.m-meaning p + p{margin-top:.7rem; font-family:var(--serif); font-size:1.3rem; line-height:1.5}
.m-words{margin:2rem 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:.4rem 1.6rem; max-width:var(--measure); font-size:var(--fs-small)}
.m-words dt{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--ink)}
.m-words dd{margin:0; color:var(--tobacco)}


/* ── Practice hub: four doors around the mandala ── */
.hub-head{padding-block:clamp(5rem, 12vh, 7rem) 0}
.hub{padding-block:clamp(1.5rem, 4vh, 3rem) clamp(2rem, 6vh, 4rem)}
.hub .stage{position:relative; width:min(560px, 100%, max(440px, 100vh - 17rem)); min-width:min(100%, 440px); container-type:inline-size; aspect-ratio:1; margin:clamp(3.5rem, 8vh, 5rem) auto}
.hub .m-wrap{position:absolute; inset:0; animation:breathe 14s ease-in-out infinite}
.hub .m-wrap .mandala{width:100%; height:100%; display:block; overflow:visible}
.hub .m-stone{color:var(--stone-line); opacity:.55}
.hub .m-dot{display:none}
.hub .m-clay{color:var(--clay); opacity:.9}
.hub .m-rings, .hub .m-petals, .hub .m-inner, .hub .m-ticks{transform-box:view-box; transform-origin:400px 400px; transition:transform 2.6s cubic-bezier(.3,0,.15,1)}
.hub .m-petals{transform:rotate(15deg)}
.hub .stage[data-active] .m-ticks{transform:rotate(-5deg)}
.hub .stage[data-active="a"] .m-petals, .hub .stage[data-active="c"] .m-petals{transform:rotate(0deg)}
.hub .stage[data-active="b"] .m-petals, .hub .stage[data-active="d"] .m-petals{transform:rotate(30deg)}
.hub .m-arcs use, .hub .m-reach use{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s cubic-bezier(.3,0,.15,1)}
.hub .m-arcs use{vector-effect:none; stroke-width:1.6}
.hub .m-reach use{vector-effect:none; stroke-width:1.1}
.hub .stage[data-active="a"] .arc-a use, .hub .stage[data-active="a"] .r-a{stroke-dashoffset:0}
.hub .stage[data-active="b"] .arc-b use, .hub .stage[data-active="b"] .r-b{stroke-dashoffset:0}
.hub .stage[data-active="c"] .arc-c use, .hub .stage[data-active="c"] .r-c{stroke-dashoffset:0}
.hub .stage[data-active="d"] .arc-d use, .hub .stage[data-active="d"] .r-d{stroke-dashoffset:0}
.core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; width:min(60%, 16rem)}
.core h1{font-size:clamp(1.5rem, 8.5cqi, 3rem); margin:.25rem 0 0; line-height:1}
.core .eyebrow{font-size:min(var(--fs-eyebrow), 2.4cqi)}
.nodes{list-style:none; margin:0; padding:0}
.node{position:absolute; --dx:0px; --dy:0px}
.n-a{left:50%; top:-5%; --tx:-50%; --ty:-50%; --dy:-8px}
.n-b{left:105%; top:50%; --tx:-50%; --ty:-50%; --dx:8px}
.n-c{left:50%; top:105%; --tx:-50%; --ty:-50%; --dy:8px}
.n-d{left:-5%; top:50%; --tx:-50%; --ty:-50%; --dx:-8px}
.node a{display:block; color:var(--ink); white-space:nowrap; transform:translate(var(--tx), var(--ty)); transition:color .9s ease}
.node .pill{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:.9rem 1.4rem; background:radial-gradient(ellipse at center, var(--ground) 55%, transparent 78%); border-radius:999px; transform:translate(var(--fx, 0px), var(--fy, 0px)); transition:transform 2.2s cubic-bezier(.25,.1,.2,1)}
.node .k{font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.24em; text-transform:uppercase; color:var(--stone)}
.node .t{font-family:var(--serif); font-size:clamp(1.3rem, 7.5cqi, 2.1rem); line-height:1; letter-spacing:.01em; transition:color .9s ease, letter-spacing 2.2s ease}
.node .s{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--tobacco); transition:color .9s ease}
.stage[data-active] .node a{color:var(--stone)} .stage[data-active] .node a .s{color:var(--stone)}
.stage[data-active] .node.on a{color:var(--ink)} .stage[data-active] .node.on a .s{color:var(--tobacco)} .stage[data-active] .node.on .pill{transform:translate(var(--dx), var(--dy))}
.stage[data-active="a"] .n-b, .stage[data-active="a"] .n-d{--fy:-7px}
.stage[data-active="b"] .n-a, .stage[data-active="b"] .n-c{--fx:7px}
.stage[data-active="c"] .n-b, .stage[data-active="c"] .n-d{--fy:7px}
.stage[data-active="d"] .n-a, .stage[data-active="d"] .n-c{--fx:-7px}
.node.on .t, .node a:hover .t{color:var(--clay); letter-spacing:.03em}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.014)}}
@media (max-width: 760px){
  .hub{overflow:hidden; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter)}
  .hub .stage{width:100%; min-width:0; aspect-ratio:auto; margin-block:.5rem 0}
  .hub .m-wrap{inset:auto; right:-30vw; top:50%; width:min(96vw, 440px); aspect-ratio:1; transform:translateY(-50%); animation:none}
  .hub .m-stone{opacity:.18} .hub .m-clay{display:none}
  .core{position:static; transform:none; text-align:left; width:auto; margin-bottom:1.6rem; pointer-events:auto}
  .core h1{font-size:clamp(2.6rem, 1.6rem + 5vw, 4rem)}
  .nodes{position:relative; display:flex; flex-direction:column; border-top:1px solid var(--hair)}
  .node{position:static}
  .node a{transform:none !important; color:var(--ink) !important; white-space:normal} .node a .s{color:var(--tobacco) !important}
  .node .pill{transform:none !important; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:1rem; min-height:4.2rem; padding:1.2rem .2rem; border-bottom:1px solid var(--hair); border-radius:0; background:none; text-align:left}
  .node .k{min-width:1.6rem}
  .node .s{margin-left:auto; text-align:right}
  .node a:active .t{color:var(--clay)}
}
@media (prefers-reduced-motion: reduce){
  .hub .m-wrap{animation:none}
  .hub .m-rings, .hub .m-petals, .hub .m-inner, .hub .m-ticks, .hub .m-arcs use, .hub .m-reach use, .node a, .node .pill, .node .t, .node .s, .menu, .quiz .bar i{transition:none}
  html.js main.pt{animation:none} main.pt{transition:none}
}
.m-how{margin-top:2.2rem; border-top:1px solid var(--hair)}
.m-how dl{grid-column:1 / -1}
@media (max-width: 760px){ .m-how dl{grid-template-columns:1fr} }
.skip{position:absolute; left:-999px; top:.6rem; z-index:100; background:var(--ground); color:var(--ink); padding:.6rem 1rem; border:1px solid var(--clay); font-family:var(--sans); font-size:var(--fs-small)}
.skip:focus{left:1rem}

/* ── v5: logo moon between the words, menu previews, booking overlay, mobile flow ── */
.brand{gap:.45rem}
.brand svg{width:.58em; height:.58em; color:var(--clay); transform:translateY(-.07em); flex:none}
.nav{position:fixed}
.nav-tip{position:absolute; top:100%; left:50%; transform:translate(-50%, .15rem); margin-top:-.15rem; padding:.45rem 1rem; font-family:var(--serif); font-style:italic; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--tobacco); background:var(--ground); border:1px solid var(--hair); white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease, transform .4s ease, visibility .4s}
.nav-tip.show{opacity:1; visibility:visible; transform:translate(-50%, .5rem)}
.menu-list li{display:flex; flex-direction:column}
.menu-list small{display:block; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--stone); margin:-.15em 0 .55em; line-height:1.3}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.opt-lbl{color:var(--stone); font-weight:400; letter-spacing:0; text-transform:none}
button.book{cursor:pointer}
body.no-scroll{overflow:hidden}
.modal{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s}
.modal.open{opacity:1; visibility:visible}
.modal-back{position:absolute; inset:0; background:color-mix(in srgb, var(--ground) 72%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.modal-card{position:relative; width:min(26rem, 100%); max-height:calc(100vh - 2rem); overflow:auto; background:var(--plate); border:1px solid var(--hair); box-shadow:var(--shadow); padding:clamp(1.6rem, 4vw, 2.4rem); transform:translateY(14px) scale(.985); transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.modal.open .modal-card{transform:none}
.modal-x{position:absolute; top:1rem; right:1.1rem; font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--stone); padding:.5rem; margin:-.5rem}
.modal-x:hover{color:var(--clay)}
.book-class{font-size:clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); margin:.4rem 0 .3rem}
.book-when{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--tobacco); margin-bottom:1.6rem}
.modal .field{margin-bottom:1rem}
.modal .toast{min-height:0}
.book-note{margin-top:1.2rem; color:var(--stone)}
form.done .field, form.done button[type="submit"], form.done .book-note{display:none}
form.done .toast{font-size:1.3rem; margin-top:.4rem}
@media (max-width: 860px){ .sticky{position:static} }
@media (max-width: 640px){
  .modal{place-items:end center; padding:0}
  .modal-card{width:100%; max-height:92vh; border-left:0; border-right:0; border-bottom:0; padding:1.6rem var(--gutter) 2rem}
}
@media (prefers-reduced-motion: reduce){ .nav-tip, .modal, .modal-card{transition:none} }
.modal-card{box-sizing:border-box}
@media (max-width: 480px){ .menu-top .brand{font-size:1.05rem; letter-spacing:.14em} }

/* ── v6: the top bar must always fit a phone; the menu opens from a ☰ icon ── */
.nav{min-width:0}
.nav-right{flex:none; min-width:0}
.menu-lang{display:none; gap:.35em; font-size:var(--fs-eyebrow); letter-spacing:.14em; color:var(--stone); margin-right:auto; margin-left:1.2rem}
.menu-btn{display:none; align-items:center; gap:.5rem; padding:.55rem; margin:-.55rem; cursor:pointer; color:var(--ink)}
.menu-btn:hover{color:var(--clay)}
.menu-btn svg{width:1.25rem; height:1.25rem; display:block}
.menu-btn .lbl{font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase}
#menuClose{display:inline-flex !important}
@media (max-width: 900px){
  .menu-btn{display:inline-flex}
  .nav{padding-inline:clamp(.9rem, 4vw, var(--gutter)); gap:.6rem}
  .brand{font-size:1.05rem; letter-spacing:.14em; gap:.35rem; flex:none}
  .nav-right{gap:.7rem}
  .nav-icons{gap:.55rem; margin-right:0}
}
/* the Greek labels are longer: below 1100px they go into the menu and the language switch stays in the bar */
@media (max-width: 1100px){
  html[lang="el"] .nav-links{display:none}
  html[lang="el"] .menu-btn{display:inline-flex}
}
@media (max-width: 560px){
  .menu-btn .lbl{display:none}
  .lang{display:none}                       /* on small phones the language switch lives inside the menu */
  .menu-lang{display:inline-flex}
}
.menu-lang button{padding:.4rem .3rem; letter-spacing:inherit; color:inherit; border-bottom:1px solid transparent}
.menu-lang button[aria-pressed="true"]{color:var(--ink); border-color:var(--clay)}
.menu-foot{gap:1rem; flex-wrap:wrap}
@media (max-width: 380px){ .brand{font-size:.95rem; letter-spacing:.1em} .nav-icons{gap:.4rem} .nav-icons a{padding:.35rem; margin:-.35rem} }

/* ── event notice on Practice With Me ── */
.event{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding-block:clamp(1.6rem, 4vh, 2.4rem); margin-bottom:clamp(2.5rem, 6vh, 4rem); display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:1.2rem 4rem; align-items:start}
.event h2{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin:.3rem 0 .2rem}
.event .where{font-family:var(--serif); font-style:italic; color:var(--tobacco); font-size:1.1rem}
.event ul{list-style:none; margin:0; padding:0}
.event li{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.2rem 1.4rem; padding:.7rem 0; border-top:1px solid var(--hair)}
.event li:first-child{border-top:0; padding-top:0}
.event .d{font-family:var(--sans); font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--stone); padding-top:.25em}
.event .c{font-family:var(--serif); font-size:1.2rem; line-height:1.3}
.event .c i{font-style:italic; color:var(--tobacco)}
@media (max-width: 860px){ .event{grid-template-columns:1fr; gap:1rem} .event li{grid-template-columns:7rem minmax(0,1fr)} }
@media (max-width: 420px){ .event li{grid-template-columns:1fr; gap:.15rem} }
.menu-top{gap:.8rem}
.menu-top .brand{flex:1 1 auto; min-width:0}
.menu-lang{flex:none; margin-left:0}
#menuClose{flex:none}
@media (max-width: 760px){ .event h2 .ital{display:block; font-size:.78em; margin-top:.15rem} }

/* ── phones: a slightly quieter type throughout. The root size steps down one point, so everything set in rem
   (body, headings, navigation, captions, buttons, the small tracked labels) and all the spacing set in em and rem
   step down together; the fluid sizes that lean on the viewport are eased a little further. Same faces, same
   proportions: refined, spacious, readable. ── */
@media (max-width:760px){
  html{font-size:15px}
  :root{--fs-body:1.18rem; --fs-lead:clamp(1.25rem, 1rem + 1.2vw, 1.6rem); --fs-h2:clamp(1.9rem, 1.3rem + 3.2vw, 3.4rem); --fs-h1:clamp(2.4rem, 1.1rem + 7.4vw, 6rem)}
  .menu-list a{font-size:clamp(1.8rem, 6.4vw, 2.9rem)}
  .rv-phrase .quote{font-size:clamp(1.55rem, 1rem + 2.5vw, 3rem)}
  .page-head h1{font-size:clamp(2.3rem, 1.4rem + 4.6vw, 4.8rem)}
  .section h2{font-size:clamp(1.75rem, 1.2rem + 2.3vw, 2.8rem)}
  .core .eyebrow{font-size:.7rem}   /* the small label that would fall under 10px */
}

/* ── v7: one typeface. Cormorant Garamond for everything; the small tracked labels get a little more size and weight than they had in the sans ── */
.eyebrow, .tlink, .btn, .connect .lbl, .rv-phrase .sub, .rv-title p, .insert .latin, .fcols h2, .contact-list span, .sn .br, .mantra .m-head .src, .node .k, .modal-x, .event .d, .nav-links a, .lang, .menu-lang, .menu-btn .lbl, .crumb, .tech dt, th, label.f, .m-words dd, .plate figcaption b, .photo figcaption b, .quiz .prog, .gloss-tools button, .term .cat, .alpha button{font-weight:500}
.plate figcaption b, .photo figcaption b, .sn .br{font-size:.74rem}
.hand{font-style:italic; font-weight:400; font-size:1.7rem}
.nav-links a, .menu-btn .lbl{font-size:.82rem; letter-spacing:.18em}
.lang, .menu-lang{font-size:.82rem}
.btn{font-size:.9rem; letter-spacing:.16em}
.small, .notice, .sn .en, .m-words, .event .where, .connect li a{font-weight:400}
.prose p, .chapter p.body, .tech dd, .m-meaning p, .m-how dd{font-weight:400}
input[type="text"],input[type="email"],input[type="tel"],textarea{font-family:var(--serif); font-size:1.15rem; font-weight:400}
.quiz .opt .t{font-weight:400}
.timetable td:last-child, table td:last-child .tlink{white-space:nowrap}

/* ── HOME · 3 — the yantra forms; the four ways in stand at its four gates ──
   A contemporary yantra: bhūpura square with four gates, kolam knots, two lotus rings, the triangles, the bindu.
   homeNav() in site.js builds it and drives hover / focus / touch; homeFlow() draws it in, centre first, as the
   scroll goes on, and brings the four words one after another. The drawing is a compass: as large as the screen
   allows between the top bar and the bottom edge, with a word on each axis just beyond its gate (Practice With Me
   north, Explore Yoga east, Journal south, About west). The chosen word: its gate turns clay and opens a little,
   a clay needle runs from the bindu to the gate, a hairline continues from the gate to the word, and the word
   itself turns clay; the other three stay neutral. */
.home-nav{display:grid; place-items:center; padding:4.6rem var(--gutter) 1.1rem}   /* the top bar (3.9rem) and a breath under it */
html:not(.rv-js) .home-nav, html.sc-static .home-nav{padding:clamp(1rem, 4vh, 2.5rem) var(--gutter) clamp(3rem, 8vh, 6rem)}
/* the field: the stage in the middle; a band for a word above and below (--wb), room for a word on either side
   (--side). The stage takes what is left of the screen height between the top bar and the bottom edge. */
.rv-field{position:relative; width:min(100%, 1400px); --side:clamp(10rem, 15vw, 15rem); --wb:4.1rem; --st:min(1100px, calc(100% - 2 * var(--side)), max(300px, 100vh - 5.7rem - 2 * var(--wb))); padding:var(--wb) 0}
@supports (height:1svh){ .rv-field{--st:min(1100px, calc(100% - 2 * var(--side)), max(300px, 100svh - 5.7rem - 2 * var(--wb)))} }
html:not(.rv-js) .rv-field, html.sc-static .rv-field{--st:min(760px, calc(100% - 2 * var(--side)))}
.home-nav .stage{position:relative; width:var(--st); min-width:0; aspect-ratio:1; margin-inline:auto; container-type:inline-size}
.home-nav .m-wrap{position:absolute; inset:0}
.home-nav .m-wrap .hmandala{width:100%; height:100%; display:block; overflow:visible}

/* stone drawing: hairlines everywhere. They are drawn in with the scroll (homeFlow() gives every path pathLength=1
   and moves one dash offset), so the dash pattern must live in the drawing's own units: vector-effect none, and
   --rv-sw = 800 / stage px keeps the stroke one screen pixel wide at every size (larger, never heavier) */
.home-nav .hm-stone path, .home-nav .hm-stone circle, .home-nav .hm-stone use, .home-nav .hmandala defs path{vector-effect:none; stroke-width:var(--rv-sw, 1.35)}
.home-nav.rv-draw .hm-stone{stroke-dasharray:1}
.home-nav .hm-stone{color:var(--stone-line); opacity:.62}
@supports (color: color-mix(in srgb, red, blue)){ .home-nav .hm-stone{color:color-mix(in srgb, var(--stone-line) 62%, var(--ground)); opacity:1} }   /* muted through the colour, not a group opacity, so the chosen gate can be full clay */
.home-nav .hm-frame-l1, .home-nav .hm-gate-l1{opacity:.5}
.home-nav .hm-kolam{opacity:.7}
#hm-k .hm-kd{fill:currentColor; stroke:none}   /* the four dots of each knot: drawn once in defs and placed by use, so the rule must stay inside that subtree (a selector through .home-nav never reaches a use instance) */
.home-nav .hm-bindu{fill:currentColor; stroke:none}
.home-nav .hm-core{transform-box:view-box; transform-origin:400px 400px; animation:hm-breathe 16s ease-in-out infinite}
@keyframes hm-breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.025)}}

/* movement: the chosen gate turns clay and opens a little towards its word, the lotus rings turn one step in
   contrary motion */
.home-nav .hm-gate{transition:transform 1.8s cubic-bezier(.3,0,.15,1), color 1.2s ease}
.home-nav[data-active="practice"] .hm-g-practice, .home-nav[data-active="explore"] .hm-g-explore,
.home-nav[data-active="journal"] .hm-g-journal, .home-nav[data-active="about"] .hm-g-about{transform:translateY(-10px); color:var(--clay)}
.home-nav .hm-lotus16, .home-nav .hm-lotus8{transform-box:view-box; transform-origin:400px 400px; transition:transform 2.6s cubic-bezier(.3,0,.15,1)}
.home-nav[data-active="practice"] .hm-lotus16, .home-nav[data-active="journal"] .hm-lotus16{transform:rotate(11.25deg)}
.home-nav[data-active="explore"] .hm-lotus16, .home-nav[data-active="about"] .hm-lotus16{transform:rotate(-11.25deg)}
.home-nav[data-active] .hm-lotus8{transform:rotate(-22.5deg)}

/* clay: the needle from the bindu to the chosen gate, and the petal it passes through */
.home-nav .hm-clay{color:var(--clay)}
.home-nav .hm-clay path{vector-effect:none; stroke-width:calc(var(--rv-sw, 1.35) * 1.4); stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.2s cubic-bezier(.3,0,.15,1)}
.home-nav .hm-clay .hm-cpetal{transition-delay:.5s; transition-duration:2s}
.home-nav .hm-cbindu{fill:currentColor; stroke:none; transform-box:view-box; transform-origin:400px 400px; transform:scale(0); transition:transform 1.6s cubic-bezier(.3,0,.15,1)}
.home-nav[data-active] .hm-cbindu{transform:scale(1)}
.home-nav[data-active="practice"] .hm-c-practice path, .home-nav[data-active="explore"] .hm-c-explore path,
.home-nav[data-active="journal"] .hm-c-journal path, .home-nav[data-active="about"] .hm-c-about path{stroke-dashoffset:0}

/* the four words, one on each axis, just beyond its gate. Each arrives on its own (--w, from homeFlow()); until
   it is there it takes no pointer, so a click on the photographs cannot reach a word behind them. A keyboard
   focus shows them all at once. */
.home-nav .hm-nodes{list-style:none; margin:0; padding:0}
.home-nav .hm-node{position:absolute; --ox:0px; --oy:0px; opacity:var(--w, 1); transform:translate3d(0, calc((1 - var(--w, 1)) * 10px), 0)}
.home-nav:has(a:focus-visible) .hm-node{opacity:1; transform:none}   /* a keyboard focus shows them all at once (homeFlow() does the same for browsers without :has) */
html.rv-js .home-nav:not(:focus-within) .hm-node:not(.sc-in) a{pointer-events:none}
.home-nav .hm-practice{left:0; right:0; top:auto; bottom:calc(100% - var(--wb) + var(--gx)); text-align:center; --oy:-3px}   /* the word box ends --gx above the stage, like the side words */
.home-nav .hm-journal{left:0; right:0; bottom:auto; top:calc(100% - var(--wb) + var(--gx)); text-align:center; --oy:3px}
.home-nav .hm-explore{left:calc(50% + var(--st) / 2 + var(--gx, 1.6rem)); right:0; top:0; bottom:0; display:flex; align-items:center; --ox:4px}
.home-nav .hm-about{left:0; right:calc(50% + var(--st) / 2 + var(--gx, 1.6rem)); top:0; bottom:0; display:flex; align-items:center; justify-content:flex-end; text-align:right; --ox:-4px}
.home-nav .hm-node a{display:block; position:relative; padding:.3em 0; font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem, 1.15rem + .8vw, 1.85rem); line-height:1.15; letter-spacing:.04em; color:var(--ink); white-space:nowrap; transition:color 1.2s ease, transform 1.8s cubic-bezier(.3,0,.15,1), letter-spacing 1.8s ease}
.home-nav .hm-practice a, .home-nav .hm-journal a{display:inline-block; padding:.15em 0}
.home-nav .hm-explore a, .home-nav .hm-about a{white-space:normal; text-wrap:balance; max-width:100%}   /* a long word (the Greek ones) breaks into two lines only when the room beside the drawing runs out */
.home-nav .hm-node a .w{display:block; white-space:nowrap}
.home-nav .hm-explore a .w, .home-nav .hm-about a .w{white-space:normal}
/* the hairline from the gate to the word: it grows out of the gate when the word is chosen. The outermost bar of a
   gate is 2/800 of the stage inside the stage edge at rest and 1% outside it when the gate opens; --reach spans
   --gx plus 2.75% of the stage, so the line runs from inside the gate out past the opened bar to .5rem short of
   the word */
.home-nav .hm-node a::before{content:""; position:absolute; background:var(--clay); opacity:0; transition:transform 1.4s cubic-bezier(.3,0,.15,1) .25s, opacity .6s ease .25s; pointer-events:none}
.home-nav .hm-practice a::before, .home-nav .hm-journal a::before{left:50%; width:1px; height:var(--reach-y, 1.4rem); transform:scaleY(0)}
.home-nav .hm-practice a::before{top:100%; margin-top:.5rem; transform-origin:bottom}
.home-nav .hm-journal a::before{bottom:100%; margin-bottom:.5rem; transform-origin:top}
.home-nav .hm-explore a::before, .home-nav .hm-about a::before{top:50%; height:1px; width:var(--reach-x, 2rem); transform:scaleX(0)}
.home-nav .hm-explore a::before{right:100%; margin-right:.5rem; transform-origin:left}
.home-nav .hm-about a::before{left:100%; margin-left:.5rem; transform-origin:right}
.home-nav[data-active] .hm-node a.on::before{opacity:1; transform:none}
/* the one-line tip beside the chosen word (visual only: aria-hidden in the markup) */
.home-nav .hm-node a .t{position:absolute; left:0; top:100%; width:max-content; white-space:nowrap; pointer-events:none; margin-top:.1em; font-family:var(--sans); font-weight:500; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.55; color:var(--stone); opacity:0; transition:opacity 1.1s ease}
.home-nav .hm-practice a .t, .home-nav .hm-journal a .t{top:50%; left:100%; transform:translateY(-50%); margin:0 0 0 1em}   /* beside the word: above it is the top bar, below it the gate */
.home-nav .hm-explore a .t, .home-nav .hm-about a .t{white-space:normal; max-width:min(12rem, calc((100vw - var(--st-px, 600px)) / 2 - var(--gx) - var(--gutter)))}   /* within the room beside the drawing */
@media (max-width:1100px){ .home-nav .hm-practice a .t, .home-nav .hm-journal a .t{white-space:normal; max-width:14rem} }
.home-nav .hm-about a .t{left:auto; right:0; text-align:right}
.home-nav[data-active] .hm-node a{color:var(--stone)}
.home-nav[data-active] .hm-node a.on{color:var(--clay-text); letter-spacing:.05em; transform:translate(var(--ox), var(--oy))}
.home-nav[data-active] .hm-node a.on .t{opacity:1}
.home-nav[data-active] .hm-explore a.on, .home-nav[data-active] .hm-about a.on{letter-spacing:.04em}   /* the side words may wrap: no change of tracking, or a long one reflows */
.home-nav .hm-node a:focus-visible{outline:1.5px solid var(--clay); outline-offset:4px; color:var(--clay-text)}
/* the reach of the hairline and the gap of the side words follow the stage */
.rv-field{--gx:1.4rem; --reach-y:calc(var(--gx) + var(--st-px, 600px) * .0275 - .5rem); --reach-x:calc(var(--gx) + var(--st-px, 600px) * .0275 - .5rem)}   /* --st-px: the measured stage, written by homeFlow() */

/* phones and portrait tablets: the same compass, recomposed for a narrow screen. The drawing takes nearly the whole
   width, with a clear margin to either side; the north and south words stand centred above and below their gates,
   and the east and west words run along the sides of the drawing, turned on their side (a plain rotation of an
   ordinary line of text, centred in the margin: the same box in every browser) so they read upward, like the rim
   of a compass rose, and stand just outside the gates. The hairlines still run gate to word. */
@media (max-width:900px){
  .home-nav{padding:3.6rem 0 .6rem}
  .rv-field{--side:3.2rem; --wb:2.9rem; --gx:.75rem; --edge:.5rem; --reach-x:calc(var(--gx) + var(--st-px, 600px) * .0275 + .25rem); --reach-y:calc(var(--gx) + var(--st-px, 600px) * .0275 - .15rem); --st:max(200px, min(calc(100% - 2 * var(--side)), 560px, 100vh - 4.2rem - 2 * var(--wb)))}
  @supports (height:1svh){ .rv-field{--st:max(200px, min(calc(100% - 2 * var(--side)), 560px, 100svh - 4.2rem - 2 * var(--wb)))} }
  html:not(.rv-js) .rv-field, html.sc-static .rv-field{--st:min(calc(100% - 2 * var(--side)), 480px)}
  .home-nav .hm-node a{font-size:clamp(1.2rem, 1rem + 1.2vw, 1.55rem); letter-spacing:.03em}
  .home-nav .hm-practice a, .home-nav .hm-journal a{padding:.1em 0}
  .home-nav .hm-explore, .home-nav .hm-about{left:calc(50% + var(--st) / 2 + var(--gx)); right:auto; width:calc(var(--side) - var(--gx) - var(--edge)); display:block}   /* a narrow column beside the drawing, whatever the screen width */
  .home-nav .hm-about{left:auto; right:calc(50% + var(--st) / 2 + var(--gx))}
  .home-nav .hm-explore a, .home-nav .hm-about a{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-90deg); max-width:none; padding:.15em .3em; font-size:clamp(.95rem, .8rem + .8vw, 1.15rem); letter-spacing:.11em; line-height:1.15; white-space:nowrap}   /* reads upward */
  .home-nav .hm-explore a .w, .home-nav .hm-about a .w{writing-mode:horizontal-tb; transform:none; white-space:nowrap}
  .home-nav[data-active] .hm-explore a.on, .home-nav[data-active] .hm-about a.on{transform:translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))) rotate(-90deg)}
  .home-nav .hm-explore a::after, .home-nav .hm-about a::after{content:""; position:absolute; inset:-.7rem 0}      /* the tap strip beside the drawing (in the word's own, unturned box): 23px of glyphs, 45px of target */
  .home-nav .hm-practice a::after, .home-nav .hm-journal a::after{content:""; position:absolute; inset:-.55rem 0}   /* 28px of glyphs, 45px of target */
  /* the hairlines, in the turned box: the side facing the drawing is the bottom of About's box and the top of Explore's; each grows from its gate end towards the word, like the other two */
  .home-nav .hm-about a::before{left:50%; right:auto; top:100%; bottom:auto; width:1px; height:var(--reach-x); margin:.15rem 0 0; transform:scaleY(0); transform-origin:bottom}
  .home-nav .hm-explore a::before{left:50%; right:auto; top:auto; bottom:100%; width:1px; height:var(--reach-x); margin:0 0 .15rem; transform:scaleY(0); transform-origin:top}
  .home-nav .hm-practice a::before{margin-top:.15rem} .home-nav .hm-journal a::before{margin-bottom:.15rem}   /* the line runs from inside the gate to just short of the word */
  .home-nav .hm-node a .t{display:none}
  .home-nav[data-active] .hm-node a.on{letter-spacing:.04em}
  .home-nav[data-active] .hm-explore a.on, .home-nav[data-active] .hm-about a.on{letter-spacing:.11em}
  .home-nav .hm-node a:focus-visible{outline-offset:2px}
}
/* a short screen at any width (a phone held sideways, a small window): the drawing on the left, the four words in a
   column beside it, the whole of it sized to the screen */
@media (max-height:560px){
  html.rv-js:not(.sc-static) .home-nav{padding:3.4rem var(--gutter) .5rem}
  html.rv-js:not(.sc-static) .rv-field{display:grid; grid-template-columns:auto 1fr; grid-template-rows:repeat(4, auto); column-gap:clamp(1rem, 5vw, 3rem); align-items:center; justify-content:center; width:min(100%, 40rem); padding:0; --st:max(180px, min(300px, 100vh - 7rem))}
  @supports (height:1svh){ html.rv-js:not(.sc-static) .rv-field{--st:max(180px, min(300px, 100svh - 7rem))} }
  html.rv-js:not(.sc-static) .home-nav .hm-nodes{display:contents}
  html.rv-js:not(.sc-static) .home-nav .stage{grid-column:1; grid-row:1 / -1; margin:0}
  html.rv-js:not(.sc-static) .home-nav .hm-node{position:static; grid-column:2; justify-self:start; margin:0; display:block; text-align:left; --ox:0px; --oy:0px; width:auto}
  html.rv-js:not(.sc-static) .home-nav .hm-practice{grid-row:1} html.rv-js:not(.sc-static) .home-nav .hm-explore{grid-row:2}
  html.rv-js:not(.sc-static) .home-nav .hm-journal{grid-row:3} html.rv-js:not(.sc-static) .home-nav .hm-about{grid-row:4}
  html.rv-js:not(.sc-static) .home-nav .hm-node a{display:flex; align-items:center; min-height:38px; padding:.2em .2em; font-size:clamp(1.3rem, 1rem + 1.2vw, 1.6rem); letter-spacing:.03em; transition:color 1.2s ease, transform 1.8s cubic-bezier(.3,0,.15,1)}
  html.rv-js:not(.sc-static) .home-nav .hm-node a .t, html.rv-js:not(.sc-static) .home-nav .hm-node a::before, html.rv-js:not(.sc-static) .home-nav .hm-node a::after{display:none}
  html.rv-js:not(.sc-static) .home-nav .hm-explore a, html.rv-js:not(.sc-static) .home-nav .hm-about a{position:static; transform:none; max-width:none; white-space:nowrap}   /* the side words stand in rows again here */
  html.rv-js:not(.sc-static) .home-nav[data-active] .hm-node a.on, html.rv-js:not(.sc-static) .home-nav[data-active] .hm-explore a.on, html.rv-js:not(.sc-static) .home-nav[data-active] .hm-about a.on{letter-spacing:.04em; transform:none}
}
@media (max-width:440px){ .home-nav .hm-node a{font-weight:500} }   /* Cormorant's hairlines thin out below 15px on a phone */
@media (prefers-reduced-motion: reduce){
  .home-nav .hm-core{animation:none}
  .home-nav .hm-gate, .home-nav .hm-lotus16, .home-nav .hm-lotus8, .home-nav .hm-clay path, .home-nav .hm-cbindu, .home-nav .hm-node a, .home-nav .hm-node a .t, .home-nav .hm-node a::before{transition:none}
  .home-nav .hm-node{opacity:1; transform:none}
  .home-nav.rv-draw .hm-stone{stroke-dasharray:none}
}
/* B · Movement, closing plate: the forward fold (positions 03 and 10) beside the note about forward bends */
.fold-note{display:grid; grid-template-columns:minmax(0, 1fr) 13rem; gap:1.5rem 3rem; align-items:start; margin-top:1.6rem}
.fold-note .notice{margin-top:0}
.fold-note .frontis.aside{margin-top:0}
@media (max-width: 700px){
  .fold-note{grid-template-columns:minmax(0, 1fr)}
  .fold-note .frontis.aside{max-width:13rem}
}

/* ─────────────────────────────────────────────────────────────
   VISUAL JOURNAL — an old photographic album on the parchment
   Prints in three sizes sit on the page with four small corner mounts (or, now and then, a hairline mat),
   alternate sides with uneven gaps, and carry a line of handwriting written under or beside them, as a caption
   added later. Arrows are short and appear only when a note is written away from its print.
   Handwriting: Caveat (Google Fonts), the only face on the site besides Cormorant Garamond, and only here, in
   terracotta; Caveat has no Greek, so Mynerve (Google Fonts, Greek subset) takes the Greek letters of a note.
   Photographs: shown as they are, no filter, no tint. Rendered by visualJournal() in site.js from AS.visualJournal.

   Layout, in one paragraph: every album page (.vj-leaf) is a 12-column grid. The page's size class (sz-large |
   sz-medium | sz-small) and side class (side-left | side-right | side-center) set --pc, the print's columns; the
   caption takes --cc, which defaults to the print's columns (written under it). cap-beside moves the caption into
   the free columns next to the print; cap-across moves it towards the far margin with an arrow; cap-above writes
   it over the print with an arrow pointing down. On phones the same classes map to one column: large = full
   width, medium = three quarters, small = just over half, kept to their side; captions go under the print (an
   arrow then turns to point up at it), or into the free margin beside a small one.
   ───────────────────────────────────────────────────────────── */
:root{
  --vj-hand:'Caveat', 'Mynerve', 'Segoe Print', 'Bradley Hand', cursive;
  --vj-hand-weight:500;   /* the owner's reference is a felt-tip hand: a touch firmer than Caveat's regular */
  --vj-mount:15px;                      /* size of a corner mount */
  --vj-gap:clamp(1rem, 2.6vw, 2rem);    /* column gap of an album page */
}

/* ── handwriting ── */
.vj-hand{font-family:var(--vj-hand); font-weight:var(--vj-hand-weight, 500); font-size:1.55rem; line-height:1.15; color:var(--clay-text); letter-spacing:.01em}
.vj-hand .hw{display:inline-block; transform:rotate(var(--rot, -1.4deg)); transform-origin:left bottom; text-wrap:balance}
.vj-hand .arr{display:inline-block; width:2.4em; height:1.05em; vertical-align:-.22em; color:var(--clay); overflow:visible; transform:rotate(var(--arot, 0deg))}
.vj-hand .arr.up-right{width:1.35em; height:1.35em; vertical-align:-.3em}
.vj-hand .arr.down{width:.9em; height:2.1em; display:block; margin:.15em 0 0 1.4em}
.vj-hand .arr path{fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.vj-hand .arr + .hw, .vj-hand .hw + .arr{margin-left:.35em}

/* ── a print: the photograph with four corner mounts ── */
.vj-print{position:relative; display:block; box-shadow:var(--shadow)}
.vj-print .ph{position:relative; display:block; overflow:hidden; background:var(--ground-2); aspect-ratio:var(--ar, auto)}
.vj-print .ph img{width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); display:block}
/* two mounts on the print, two on the photograph box (each box has only two pseudo-elements) */
.vj-print::before, .vj-print::after, .vj-print .ph::before, .vj-print .ph::after{
  content:""; position:absolute; width:var(--vj-mount); height:var(--vj-mount); z-index:2; pointer-events:none;
}
.vj-print::before{left:0; top:0; background:linear-gradient(135deg, var(--ground-2) 0 44%, var(--rule) 44% 52%, transparent 52%)}
.vj-print::after{right:0; bottom:0; background:linear-gradient(315deg, var(--ground-2) 0 44%, var(--rule) 44% 52%, transparent 52%)}
.vj-print .ph::before{right:0; top:0; background:linear-gradient(225deg, var(--ground-2) 0 44%, var(--rule) 44% 52%, transparent 52%)}
.vj-print .ph::after{left:0; bottom:0; background:linear-gradient(45deg, var(--ground-2) 0 44%, var(--rule) 44% 52%, transparent 52%)}
/* a hairline mat instead of mounts */
.vj-print.mat{border:1px solid var(--rule); padding:6px; background:var(--plate)}
.vj-print.mat::before, .vj-print.mat::after, .vj-print.mat .ph::before, .vj-print.mat .ph::after{display:none}

/* ── STORY PAGE (visual-story.html) ── */
.vj-story-head{padding-block:clamp(7rem, 18vh, 11rem) clamp(1.5rem, 4vh, 2.5rem)}
.vj-story-head h1{font-size:clamp(2.4rem, 1.4rem + 4.6vw, 5rem); margin:.6rem 0 .5rem; max-width:14em}
.vj-story-head .vj-when{margin:.2rem 0 0 .2em; font-size:1.7rem}
.vj-story-head .lead{max-width:26em; color:var(--tobacco); margin-top:1.6rem}

/* the album: one figure per page; print and caption are grid items of the figure */
.vj-album{padding-top:clamp(1rem, 3vh, 2rem)}
.vj-leaf{display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--vj-gap); align-items:start; margin:0; margin-top:var(--gap)}
.vj-leaf:first-child{margin-top:0}
.vj-leaf .vj-print{grid-column:var(--pc); grid-row:1; width:100%; max-width:var(--pw, none)}
.vj-leaf .vj-cap{grid-column:var(--cc, var(--pc)); grid-row:2; margin:.9rem 0 0 .35em; max-width:16em; min-width:0; display:flex; align-items:flex-end; gap:.4em}
/* the arrow keeps to the line of the words: after them (→ ↗), before them on the first line (←), or under them (↓) */
.vj-cap .hw{min-width:0}
.vj-cap .arr{flex:none; margin-bottom:.1em}
.vj-cap.has-arr-left{align-items:flex-start}
.vj-cap.has-arr-left .arr{margin:.3em 0 0}
.vj-cap.has-arr-down{display:block}
.vj-leaf.side-right .vj-print{justify-self:end}
.vj-leaf.side-center .vj-print{justify-self:center}
.vj-leaf.side-right .vj-cap{justify-self:end; justify-content:flex-end; text-align:right; margin-left:0; margin-right:.35em}
.vj-leaf.side-right .vj-cap .hw{transform-origin:right bottom}
.vj-leaf.side-center .vj-cap{justify-self:center; justify-content:center; text-align:center; margin-left:1.5em}
/* arrow: down — the note is written above the print, pointing down at it */
.vj-leaf.cap-above .vj-print{grid-row:2}
.vj-leaf.cap-above .vj-cap{grid-row:1; align-self:end; margin:0 0 .6rem 1.2em}
.vj-leaf.cap-above.side-right .vj-cap{margin:0 1.2em .6rem 0}
.vj-leaf.cap-above.side-right .vj-cap .arr.down{margin-left:auto; margin-right:1.4em}

/* the way back, and on to the next story */
.vj-end{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; border-top:1px solid var(--hair); padding-top:clamp(2rem, 5vh, 3.5rem); margin-top:clamp(4rem, 12vh, 8rem)}
.vj-end .next{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:.5rem; margin-left:auto}
.vj-end .next .t{font-family:var(--serif); font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height:1; transition:color .3s}
.vj-end .next:hover .t{color:var(--clay)}
.vj-missing{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--stone); padding-block:2rem}

/* ── JOURNAL PAGE: the covers (section#visual) ──
   one print per story with a handwritten place and date under it and the title; the covers meander down the page
   in a cycle of four positions (large left, medium right beside its foot, smaller left and inset, right), so the
   section reads as a few prints laid on a table, not a grid */
.vj-section .lead{max-width:26em; color:var(--tobacco); margin-top:.4rem}
.vj-covers{display:grid; grid-template-columns:repeat(12, 1fr); column-gap:var(--vj-gap); row-gap:clamp(3rem, 8vh, 6rem); margin:clamp(2.5rem, 6vh, 4rem) 0 0; list-style:none; padding:0}
.vj-cover{display:block; grid-column:var(--pc); margin:0}
.vj-cover > a{display:block; color:inherit}
.vj-cover figure{margin:0}
.vj-cover .vj-print{width:100%; max-width:var(--pw, none)}
.vj-cover .vj-print img{transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.vj-cover a:hover .vj-print img{transform:scale(1.015)}
.vj-cover figcaption{margin-top:1rem}
.vj-cover .vj-hand{font-size:1.5rem}
.vj-cover .t{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); line-height:1.1; margin-top:.35rem; transition:color .3s}
.vj-cover a:hover .t{color:var(--clay-text)}
.vj-cover .tlink{margin-top:1rem}
.vj-cover .tlink .arr, .vj-preview .tlink .arr{transition:transform .5s ease}
.vj-cover a:hover .tlink .arr, .vj-preview .tlink:hover .arr{transform:translate(.25em, .02em)}
.vj-empty{grid-column:1 / -1; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--stone); padding-block:2rem; border-top:1px solid var(--rule-soft)}


/* ── THE COVER (Practice With Me, Explore Yoga) ──
   The page opens like the cover of a magazine: the title and the intro on the left, the photograph (or the drawing)
   on the right, a lot of air. The cover is the upper layer of the page and it stays: it is stuck to the top of the
   screen, and as the sheet of content rises from the foot of the screen the cover gives way from its lower edge
   (a clip, --cut), so the page is only ever seen beneath that edge, never over the cover. While it gives way the
   cover folds upward into a slim band under the top bar: the intro, the photograph and the drawing lift ahead of
   the edge and thin out, the title glides up and shrinks into the band (--dx --dy --k, measured by cover() in
   site.js; --t is the fold, 0 → 1), and the band (.pg-band: the title small, set on the same lines, and on Practice
   With Me the crescent) then stays over the page for as long as one reads. A cover taller than the screen (a small
   phone) first scrolls by the excess (--over) so its foot meets the foot of the screen. Reduced motion, and a cover
   far taller than the screen (html.cv-flow): the cover simply comes first, in the flow, and the page follows. */
.pg-cover{position:sticky; top:calc(-1 * var(--over, 0px)); z-index:2; box-sizing:border-box; min-height:100vh; display:flex; align-items:center; padding-block:5.6rem 2.6rem; background:var(--ground); clip-path:inset(0 0 var(--cut, 0px) 0)}
@supports (height:1svh){ .pg-cover{min-height:100svh} }
.pg-cover-in{width:100%; max-width:1400px; display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:clamp(2rem, 5vw, 5rem); align-items:center}
.pg-title{padding-top:0}
.pg-title .eyebrow{color:var(--stone)}
.pg-title h1{font-size:clamp(2.6rem, 1rem + 6.4vw, 7.4rem); margin:.7rem 0 0; line-height:.98}
.pg-title .lead{max-width:24em; color:var(--tobacco); text-wrap:balance; margin-top:clamp(1.2rem, 3vh, 2rem)}
/* the fold, in two breaths: first the eyebrow, then the intro, the photograph and the drawing thin out where they
   stand while the title begins its glide (the cover's edge holds meanwhile, and the page rising beneath is still
   out of sight); then the edge rises, at twice the pace of the scroll, and meets the page at the band exactly as the
   title arrives there. So nothing is ever cut through, and the page only ever appears beneath the edge. */
.pg-title .eyebrow{opacity:calc(1 - min(1, var(--t, 0) / .12))}
.pg-title .lead, .pw-fig, .ex-scene{opacity:calc(1 - min(1, var(--t, 0) / .5)); transform:translate3d(0, calc(var(--t, 0) * -22px), 0)}
.pg-cover::after{content:""; position:absolute; left:0; right:0; bottom:var(--cut, 0px); height:1px; background:var(--rule-soft); pointer-events:none}   /* the edge, as it rises */
.pg-title h1{--tt:min(1, var(--t, 0) / .88); transform-origin:0 0; transform:translate3d(calc(var(--dx, 0px) * var(--tt)), calc(var(--dy, 0px) * var(--tt)), 0) scale(calc(1 - (1 - var(--k, 1)) * var(--tt))); opacity:calc(1 - max(0, (var(--t, 0) - .88) / .12))}
.pg-band{position:absolute; left:0; right:0; top:var(--band-top, 0px); height:3.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-inline:var(--gutter); opacity:calc(max(0, (var(--t, 0) - .88) / .12)); pointer-events:none}
.pg-band::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rule-soft)}
.pg-band .bt{font-family:var(--serif); font-weight:400; font-size:1.2rem; letter-spacing:0; line-height:.98; max-width:var(--btw, none); color:var(--ink); text-wrap:balance}   /* set on the title's own lines: cover() gives it the title's width, scaled */
.pg-band .bm{width:1.15rem; height:auto; color:var(--clay); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; flex:none}
.pg-cover.faded .pg-title .eyebrow, .pg-cover.faded .pg-title .lead, .pg-cover.faded .pw-fig, .pg-cover.faded .ex-scene{visibility:hidden}   /* thinned out: nothing of them for the pointer or the keyboard */
.pg-cover.band .pg-cover-in{visibility:hidden}   /* folded away */
/* Practice With Me: the short clay rule under the title; the photograph (cropped to the mat) with the crescent and
   the three words standing in the margin at its right, a little below its top, a short rule under them */
.pw-cover .pg-title h1::after{content:""; display:block; width:6rem; height:1px; background:var(--clay); margin-top:clamp(1.2rem, 3.2vh, 2.1rem); opacity:calc(1 - min(1, var(--t, 0) / .3))}
.pw-fig{--pw:min(clamp(16rem, 32vw, 30rem), calc((100vh - 10rem) / 1.21)); display:flex; align-items:flex-start; gap:clamp(1rem, 2vw, 1.7rem); margin:0; width:max-content; max-width:100%}
@supports (height:1svh){ .pw-fig{--pw:min(clamp(16rem, 32vw, 30rem), calc((100svh - 10rem) / 1.21))} }
.pw-photo{display:block; width:var(--pw); aspect-ratio:1000 / 1210; height:auto; object-fit:cover; object-position:50% 0; filter:grayscale(1) contrast(.98)}
.pw-side{display:flex; flex-direction:column; align-items:flex-start; margin:0; padding-top:calc(var(--pw) * .21); width:clamp(5rem, 7vw, 6.4rem); flex:none}
.pw-moon{display:block; width:clamp(2.8rem, 4.6vw, 4.2rem); height:auto; color:var(--clay); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; opacity:.9}
.pw-words{margin:calc(var(--pw) * .17) 0 0; display:flex; flex-direction:column; gap:.55em; font-family:var(--serif); font-style:italic; font-weight:400; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--clay-text); line-height:1.2; white-space:nowrap}
.pw-words::after{content:""; display:block; width:3rem; height:1px; background:var(--clay); margin-top:.9em; opacity:.8}
/* the page beneath the cover: in the flow, under it, from the foot of the first screen, a screenful at least (so
   the band settles before the page ends); a hairline marks its edge */
.pg-under{position:relative; z-index:1}
.pg-sheet{position:relative; min-height:100vh; background:var(--ground); box-shadow:0 -1px 0 var(--rule-soft)}
@supports (height:1svh){ .pg-sheet{min-height:100svh} }
.pg-sheet > .wrap > :first-child{padding-top:clamp(3.5rem, 8vh, 6rem)}
.pg-sheet > .wrap > .section:first-child{border-top:0}
.pg-sheet .section{scroll-margin-top:0}   /* cover() sets the page's scroll padding to the bar and the band */
/* stillness, and a cover far taller than the screen: the cover in the flow, the page after it, no band */
@media (prefers-reduced-motion: reduce){
  .pg-cover{position:relative; top:auto; clip-path:none}
  .pg-title .eyebrow, .pg-title .lead, .pw-fig, .ex-scene, .pg-title h1{opacity:1; transform:none}
  .pw-cover .pg-title h1::after{opacity:1}
  .pg-band{display:none}
  .pg-cover.faded .pg-title .eyebrow, .pg-cover.faded .pg-title .lead, .pg-cover.faded .pw-fig, .pg-cover.faded .ex-scene, .pg-cover.band .pg-cover-in{visibility:visible}
  .pg-sheet{min-height:0}
}
html.cv-flow .pg-cover{position:relative; top:auto; clip-path:none}
html.cv-flow .pg-title .eyebrow, html.cv-flow .pg-title .lead, html.cv-flow .pw-fig, html.cv-flow .ex-scene, html.cv-flow .pg-title h1{opacity:1; transform:none}
html.cv-flow .pw-cover .pg-title h1::after{opacity:1}
html.cv-flow .pg-band{display:none}
html.cv-flow .pg-cover.faded .pg-title .eyebrow, html.cv-flow .pg-cover.faded .pg-title .lead, html.cv-flow .pg-cover.faded .pw-fig, html.cv-flow .pg-cover.faded .ex-scene, html.cv-flow .pg-cover.band .pg-cover-in{visibility:visible}
/* portrait tablets and small windows (761 to 900px): the same two columns, the photograph a little narrower so the
   title and the intro keep a readable measure */
@media (min-width:761px) and (max-width:900px){
  .hub .stage{width:min(440px, 100% - 16rem); min-width:0}   /* the Practice hub: its side pills stay inside the screen */
  .hub{overflow:hidden; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter)}   /* and their boxes never widen the page */
  .pw-cover .pg-cover-in{grid-template-columns:minmax(19rem, 1fr) auto; column-gap:2rem}
  .pw-fig{--pw:min(clamp(13rem, 30vw, 30rem), calc((100vh - 10rem) / 1.21))}
  @supports (height:1svh){ .pw-fig{--pw:min(clamp(13rem, 30vw, 30rem), calc((100svh - 10rem) / 1.21))} }
  .pw-side{width:auto; min-width:4.6rem}
}
/* phones and narrow windows: one column, the same cover: eyebrow, title, rule, intro, and the photograph with the
   crescent and the words beside it */
@media (max-width:760px){
  .pg-cover{padding-block:4.9rem 2rem}
  .pg-cover-in{grid-template-columns:1fr; row-gap:clamp(1.4rem, 4vh, 2.4rem)}
  .pg-title h1{font-size:clamp(2.6rem, 1.2rem + 7.6vw, 4.2rem); margin-top:.5rem}
  .pw-cover .pg-title h1{max-width:6.4em}   /* two lines, as on the desktop: Practice / With Me */
  .pg-title .lead{margin-top:1.1rem}
  .pw-cover .pg-title h1::after{width:4.5rem; margin-top:1.1rem}
  .pw-fig{--pw:min(72%, 22rem, max(11rem, calc((100svh - 21rem) / 1.21))); width:100%; gap:1rem}   /* never smaller than 11rem: a short phone simply gets a cover taller than its screen */
  .pw-side{padding-top:calc(var(--pw) * .16); width:auto}
  .pw-moon{width:2.4rem}
  .pw-words{margin-top:calc(var(--pw) * .2); font-size:.68rem; letter-spacing:.2em; gap:.5em}
  .pw-words::after{width:2.2rem}
}
@media (max-width:340px){ .pw-words{letter-spacing:.14em} }   /* the narrowest phones: the Greek words stay beside the photograph */

/* ── EXPLORE YOGA · the cover's scene ──
   The meditating figure, a terracotta line drawing with its paper lifted away so it sits straight on the parchment
   (media/i-meditation.webp, alpha), as tall as the cover allows; behind her the mandala, larger than she is and so
   faint it is noticed only after a moment; at her left a small sun, at her right a crescent, each with a dotted
   line falling from it to a small star, in the same thin terracotta line. On the left the eyebrow stands high,
   the title and the line lower, level with the figure's heart. Ancient drawing, botanical plate, editorial page. */
.ex-cover .pg-cover-in{grid-template-columns:minmax(0, 1fr) auto; align-items:stretch}
.ex-cover .pg-title{display:flex; flex-direction:column; justify-content:center; min-height:100%}
.ex-cover .pg-title .eyebrow{margin-bottom:auto; padding-top:clamp(.5rem, 4vh, 2.5rem)}
.ex-cover .pg-title h1{margin-top:auto; font-size:clamp(2.6rem, 1.2rem + 5.4vw, 6rem)}   /* a little quieter than the Practice title, as in her reference */
.ex-cover .pg-title .lead{margin-bottom:auto}
.ex-scene{position:relative; --sz:min(74vh, 42vw, 42rem); width:var(--sz); height:var(--sz); min-width:0; margin:0 0 0 auto; --ill:#743D1D; display:grid; grid-template:100% / 100%; place-items:center}
@supports (height:1svh){ .ex-scene{--sz:min(74svh, 42vw, 42rem)} }
.ex-mandala{position:absolute; inset:-3%; color:var(--clay); opacity:.09; pointer-events:none}
.ex-mandala .mandala{width:100%; height:100%; display:block}
.ex-figure{position:relative; display:block; height:92%; width:auto; max-width:none; max-height:100%}
.ex-sun, .ex-moon{position:absolute; top:39%; color:var(--ill); opacity:.82; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; height:auto}
.ex-sun{left:1%; width:clamp(3.6rem, 5.4vw, 5.4rem)}
.ex-moon{right:2%; width:clamp(3.3rem, 5vw, 5rem)}
.ex-sun .dots, .ex-moon .dots{stroke-dasharray:0 6.5}
@media (max-width:760px){
  .ex-cover .pg-cover-in{grid-template-columns:1fr; row-gap:.4rem; align-items:start}
  .ex-cover .pg-title{min-height:0; display:block}
  .ex-cover .pg-title .eyebrow{padding-top:0; margin-bottom:0}
  .ex-cover .pg-title h1{margin-top:.5rem}
  .ex-scene{--sz:min(100%, 24rem); height:auto; aspect-ratio:1; margin:.6rem auto 0}
  .ex-figure{height:auto; width:70%; max-height:none}
  .ex-sun{left:1%; width:3.1rem} .ex-moon{right:2%; width:2.9rem}
}

/* ── ABOUT: a page from the travel diary ──
   The personal photograph as a print with corner mounts (the Visual Journal's idiom), shown as it is; under it,
   off centre and hanging a little into the margin, two lines in the same hand, and one small arrow drawn up from
   the first line into the photograph, towards the brownie. The one place outside the Journal where this hand is
   used: a signature, not a caption style. The note is sized from the print (container units), so the arrow keeps
   its place over the plate at every width. */
.about-print{max-width:24rem; margin:0; container-type:inline-size}
.about-print .about-note{display:block; position:relative; z-index:3; margin:.75rem 0 0 max(-2.4rem, calc(.6rem - var(--gutter))); max-width:none; line-height:1.2; font-size:clamp(1.15rem, 6.5cqi, 1.55rem)}
.about-note .hw{white-space:nowrap}
.about-note br + .hw{margin-left:.9em}   /* the second line steps in a little */
/* the arrow stands on the baseline of the first line and rises 3.6 lines over it, into the print */
.about-note .about-arrow{display:inline-block; width:1.3em; height:3.6em; margin:-2.95em .2em 0 .3em; vertical-align:baseline; overflow:visible; transform:rotate(-4deg); transform-origin:left bottom}
.about-note .about-arrow path{fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
@media (max-width:860px){ .about-print{margin-inline:auto} .about-print .about-note{margin-left:max(-1.2rem, calc(.4rem - var(--gutter)))} }

/* ── HOME PREVIEW: one small print, off centre, a line of handwriting beside it and the link ──
   Markup (visualJournal() writes it in place of <div data-vj-preview></div>, from the first story or AS.visualJournalHome):
   <aside class="vj-preview"><a class="vj-print" href="journal.html#visual"><span class="ph" style="--ar:4/3; --pos:50% 42%"><img …></span></a>
     <p class="vj-hand vj-when" translate="no"><span class="hw" style="--rot:-1.6deg">Athens · 2026</span></p>
     <a class="tlink" href="journal.html#visual"><span data-i18n="vj_explore">Explore the Visual Journal</span><span class="arr">→</span></a></aside>
   Add class "flip" to put the print on the left. */
.vj-preview{display:grid; grid-template-columns:repeat(12, 1fr); grid-template-rows:1fr auto; column-gap:var(--vj-gap); align-items:end; padding-block:clamp(3rem, 8vh, 6rem)}
.vj-preview .vj-print{grid-column:8 / 11; grid-row:1 / 3; width:100%; max-width:280px; justify-self:end}
.vj-preview .vj-hand{grid-column:2 / 7; grid-row:1; align-self:end; margin:0 0 .9rem; max-width:12em}
.vj-preview .tlink{grid-column:2 / 7; grid-row:2; justify-self:start; align-self:end; margin-bottom:.5rem}
.vj-preview.flip .vj-print{grid-column:3 / 6; justify-self:start}
.vj-preview.flip .vj-hand, .vj-preview.flip .tlink{grid-column:7 / 12}

/* ═══ wide screens: three sizes, three sides, captions under, beside or across ═══ */
@media (min-width: 761px){
  /* uneven vertical gaps, like prints pasted in by hand */
  .vj-leaf:nth-child(5n+1){--gap:clamp(3.5rem, 9vh, 7rem)}
  .vj-leaf:nth-child(5n+2){--gap:clamp(3.5rem, 8vh, 6rem)}
  .vj-leaf:nth-child(5n+3){--gap:clamp(4.5rem, 12vh, 9rem)}
  .vj-leaf:nth-child(5n+4){--gap:clamp(2.8rem, 7vh, 5rem)}
  .vj-leaf:nth-child(5n+5){--gap:clamp(4rem, 10vh, 7.5rem)}
  .vj-leaf.gap-small{--gap:clamp(1.6rem, 4vh, 3rem)}
  .vj-leaf.gap-large{--gap:clamp(6rem, 16vh, 12rem)}
  .vj-leaf.sz-large{--pw:640px}  .vj-leaf.sz-medium{--pw:440px}  .vj-leaf.sz-small{--pw:300px}
  .vj-leaf.sz-large.side-left{--pc:1 / 8}    .vj-leaf.sz-large.side-right{--pc:6 / 13}   .vj-leaf.sz-large.side-center{--pc:3 / 11}
  .vj-leaf.sz-medium.side-left{--pc:1 / 6}   .vj-leaf.sz-medium.side-right{--pc:8 / 13}  .vj-leaf.sz-medium.side-center{--pc:4 / 10}
  .vj-leaf.sz-small.side-left{--pc:2 / 5}    .vj-leaf.sz-small.side-right{--pc:9 / 12}   .vj-leaf.sz-small.side-center{--pc:5 / 9}
  /* caption beside the print (no arrow): the free columns next to it, low down */
  .vj-leaf.cap-beside .vj-cap{grid-row:1; align-self:end; padding-bottom:6%}
  .vj-leaf.cap-beside.side-left .vj-cap{margin-left:0}
  .vj-leaf.cap-beside.sz-large.side-left .vj-cap{--cc:8 / 12}    .vj-leaf.cap-beside.sz-large.side-right .vj-cap{--cc:2 / 6}
  .vj-leaf.cap-beside.sz-medium.side-left .vj-cap{--cc:6 / 10}   .vj-leaf.cap-beside.sz-medium.side-right .vj-cap{--cc:4 / 8}
  .vj-leaf.cap-beside.sz-small.side-left .vj-cap{--cc:5 / 9}     .vj-leaf.cap-beside.sz-small.side-right .vj-cap{--cc:5 / 9}
  .vj-leaf.cap-beside.side-center .vj-cap{--cc:10 / 13; text-align:left; justify-self:start; justify-content:flex-start; margin-left:0}
  /* caption across the page with an arrow (left | right | up-right): the columns right beside the print, mid-height,
     so the arrow visibly ties the words to the print */
  .vj-leaf.cap-across .vj-cap{grid-row:1; align-self:center; max-width:15em}
  .vj-leaf.cap-across .vj-cap .arr{width:3em}
  .vj-leaf.cap-across .vj-cap .arr.up-right{width:1.5em}
  .vj-leaf.cap-across.side-left .vj-cap{margin-left:0}
  .vj-leaf.cap-across.sz-large.side-left .vj-cap{--cc:8 / 12}
  .vj-leaf.cap-across.sz-medium.side-left .vj-cap{--cc:7 / 11}
  .vj-leaf.cap-across.sz-small.side-left .vj-cap{--cc:5 / 9}
  .vj-leaf.cap-across.side-right .vj-cap{justify-self:start; justify-content:flex-start; text-align:left}
  .vj-leaf.cap-across.side-right .vj-cap .hw{transform-origin:left bottom}
  .vj-leaf.cap-across.sz-large.side-right .vj-cap{--cc:2 / 6}
  .vj-leaf.cap-across.sz-medium.side-right .vj-cap{--cc:4 / 8}
  .vj-leaf.cap-across.sz-small.side-right .vj-cap{--cc:6 / 9}
  .vj-leaf.cap-across.side-center .vj-cap{--cc:1 / 3; justify-self:start; justify-content:flex-start; text-align:left; margin-left:0}
  /* covers on the Journal page: the four-position cycle. Every cover has its own grid row (site.js sets it), and the
     right-hand covers are pulled up beside the foot of the one before, so the column meanders and never pairs up */
  .vj-cover:nth-child(4n+1){--pc:1 / 7; --pw:600px}
  .vj-cover:nth-child(4n+2){--pc:8 / 13; --pw:400px; margin-top:calc(-1 * clamp(6rem, 22vh, 16rem))}
  .vj-cover:nth-child(4n+3){--pc:3 / 8; --pw:340px}
  .vj-cover:nth-child(4n+4){--pc:8 / 13; --pw:440px; margin-top:calc(-1 * clamp(4rem, 14vh, 10rem))}
  .vj-cover:first-child{margin-top:0}
  .vj-cover:nth-child(4n+2) .vj-print, .vj-cover:nth-child(4n+4) .vj-print{margin-left:auto}
}

/* ═══ phones and narrow screens: one column, sizes and sides kept, pages set well apart ═══ */
@media (max-width: 760px){
  .vj-hand{font-size:1.4rem}
  .vj-leaf{column-gap:.6rem}
  .vj-leaf:nth-child(5n+1){--gap:clamp(3.5rem, 9vh, 5.5rem)}
  .vj-leaf:nth-child(5n+2){--gap:clamp(2.6rem, 6vh, 4rem)}
  .vj-leaf:nth-child(5n+3){--gap:clamp(4.5rem, 12vh, 7rem)}
  .vj-leaf:nth-child(5n+4){--gap:clamp(3rem, 7vh, 4.5rem)}
  .vj-leaf:nth-child(5n+5){--gap:clamp(4rem, 10vh, 6rem)}
  .vj-leaf.gap-small{--gap:1.8rem}
  .vj-leaf.gap-large{--gap:clamp(5rem, 14vh, 8rem)}
  .vj-leaf.sz-large{--pc:1 / 13}
  .vj-leaf.sz-medium.side-left{--pc:1 / 10}   .vj-leaf.sz-medium.side-right{--pc:4 / 13}  .vj-leaf.sz-medium.side-center{--pc:2 / 12}
  .vj-leaf.sz-small.side-left{--pc:1 / 8}     .vj-leaf.sz-small.side-right{--pc:6 / 13}   .vj-leaf.sz-small.side-center{--pc:3 / 11}
  /* captions under the print, hugging its side… */
  .vj-leaf .vj-cap{margin:.7rem 0 0 .3em; max-width:14em}
  .vj-leaf.side-right .vj-cap{margin:.7rem .3em 0 0}
  .vj-leaf.side-center .vj-cap{margin-left:1em}
  /* …an arrow under a large or medium print turns to point up at it (the arrow goes first) */
  .vj-leaf.cap-across:not(.sz-small) .vj-cap .arr{order:-1; margin:0 .1em .15em 0}
  .vj-leaf.cap-across:not(.sz-small) .vj-cap .arr.right{transform:rotate(calc(-72deg + var(--arot, 0deg)))}
  .vj-leaf.cap-across:not(.sz-small) .vj-cap .arr.left{transform:rotate(calc(72deg + var(--arot, 0deg)))}
  .vj-leaf.cap-across:not(.sz-small) .vj-cap .arr.up-right{transform:rotate(calc(-30deg + var(--arot, 0deg)))}
  .vj-leaf.cap-across:not(.sz-small) .vj-cap.has-arr-left{align-items:flex-end}
  /* …except beside a small print, where the free margin is wide enough to hold a short line */
  .vj-leaf.sz-small.cap-beside.side-left .vj-cap, .vj-leaf.sz-small.cap-across.side-left .vj-cap{--cc:8 / 13; grid-row:1; align-self:end; margin:0 0 .4rem; justify-self:start; justify-content:flex-start; text-align:left}
  .vj-leaf.sz-small.cap-beside.side-right .vj-cap, .vj-leaf.sz-small.cap-across.side-right .vj-cap{--cc:1 / 6; grid-row:1; align-self:end; margin:0 0 .4rem; justify-self:start; justify-content:flex-start; text-align:left}
  .vj-leaf.sz-small.cap-across.side-right .vj-cap .hw, .vj-leaf.sz-small.cap-beside.side-right .vj-cap .hw{transform-origin:left bottom}
  /* in that narrow margin the arrow takes its own line, above (←) or below (→ ↗) the words */
  .vj-leaf.sz-small.cap-across .vj-cap{flex-direction:column; align-items:flex-start; gap:.15em}
  .vj-leaf.sz-small.cap-across .vj-cap .arr{margin:0 0 0 .2em; width:2em}
  .vj-leaf.sz-small.cap-across .vj-cap .arr.up-right{width:1.2em}
  .vj-leaf.cap-above .vj-cap{grid-row:1; align-self:end; margin:0 0 .5rem .8em}
  .vj-leaf.cap-above.side-right .vj-cap{margin:0 .8em .5rem 0}
  .vj-story-head h1{max-width:none}
  .vj-story-head .vj-when{font-size:1.5rem}
  .vj-covers{column-gap:.6rem; row-gap:clamp(2.5rem, 7vh, 4rem)}
  .vj-cover:nth-child(4n+1){--pc:1 / 13}
  .vj-cover:nth-child(4n+2){--pc:4 / 13}
  .vj-cover:nth-child(4n+3){--pc:1 / 11}
  .vj-cover:nth-child(4n+4){--pc:4 / 13}
  .vj-cover .tlink{margin-top:.8rem}
  .vj-preview{column-gap:.6rem; row-gap:1rem; grid-template-rows:auto auto; align-items:start}
  .vj-preview .vj-print, .vj-preview.flip .vj-print{grid-column:6 / 13; grid-row:1; max-width:none; justify-self:end}
  .vj-preview .vj-hand, .vj-preview.flip .vj-hand{grid-column:1 / 6; grid-row:1; align-self:end; margin:0 0 .6rem}
  .vj-preview .tlink, .vj-preview.flip .tlink{grid-column:1 / 13; grid-row:2; margin:0; padding-block:.65em .4em}   /* a 44px tap box */
}
@media (max-width: 380px){ .vj-hand{font-size:1.3rem} }
@media (max-width: 480px){ :root{--vj-mount:12px} }   /* the mounts must not swallow a small print on a phone */
@media (prefers-reduced-motion: reduce){ .vj-cover .vj-print img, .vj-cover .tlink .arr, .vj-preview .tlink .arr{transition:none} }