/* BharatClinic Health Guides · the Vijaya room · teaching pieces: the plant you can touch, India and the West side by side,
   the old books that open, and the Shiva band. Loaded after vijaya-room.css; scoped to the room ([data-room="vijaya"]) and to
   the book viewer (dialog.v-book). Same performance rule as the room: solid tinted surfaces, no backdrop-filter, transforms and
   opacity only when anything moves, and everything still when motion is off. */

/* the old books' faces: subset files that load only when a book is opened (tools/vijaya/fonts.py) */
@font-face { font-family: "IM Fell English"; src: url(../fonts/book/imfell-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url(../fonts/book/imfell-latin-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiro Sanskrit"; src: url(../fonts/book/tiro-sanskrit-devanagari.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Tiro Sanskrit"; src: url(../fonts/book/tiro-sanskrit-latin-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tiro Sanskrit"; src: url(../fonts/book/tiro-sanskrit-latin-ext-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --f-fell: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-tiro: "Tiro Sanskrit", "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Yatra One", serif;
  --paper: #EBDDBA; --paper-2: #E0CD9F; --paper-edge: #B79C66;
  --ink: #2B1A14; --ink-2: #5B3F2E; --rust: #8E2B33; --gold: #B5832A;
}

/* ================================================================== read the plant */
.anat { margin-bottom: clamp(3rem, 7vw, 5rem); }
.anat__head { margin-bottom: 1.4rem; }
.anat__grid { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 60rem) { .anat__fig { max-height: min(80svh, 46rem); }
 .anat__grid { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2.2rem; } .anat__fig { position: sticky; top: calc(var(--v-nav-h, 3.5rem) + 7rem); } }
.anat__fig { margin: 0; position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 640 / 800; max-height: min(64svh, 46rem); justify-self: center; width: 100%;
  background: radial-gradient(70% 45% at 50% 30%, rgb(157 179 122 / .16), transparent 70%), radial-gradient(90% 40% at 50% 100%, rgb(142 43 51 / .3), transparent 70%), linear-gradient(180deg, #2A1A33, #1B1022);
  box-shadow: inset 0 0 0 1px rgb(227 167 47 / .3), 0 30px 54px -34px #000; }
.anat__svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.anat__fig figcaption { position: absolute; left: 0; right: 0; top: 0; padding: .7rem 1rem 2rem; font: 600 .78rem/1.35 var(--f-ui); letter-spacing: .04em; color: var(--v-ink-2); pointer-events: none; background: linear-gradient(#1B1022cc, transparent); }
/* the drawing: line, fill and light come from the room's colours */
.anat .soil { opacity: .9; } .anat .ground { stroke: #E3A72F; stroke-opacity: .5; fill: none; }
.anat .roots { stroke: #A88B63; stroke-width: 5; fill: none; stroke-linecap: round; opacity: .8; }
.anat .stem { stroke: #8FA96A; stroke-width: 11; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.anat .stem-hit { stroke: transparent; stroke-width: 40; fill: none; }
.anat .petiole, .anat .branch { stroke: #7E9A5C; stroke-width: 4.5; stroke-linecap: round; fill: none; }
/* the leaves are drawn once and reused: a rule that names an ancestor does not reach the copies, so these name the shape itself */
.pl-lf { fill: #3F5A30; stroke: var(--leaf-ink, #B9D08F); stroke-width: var(--leaf-w, 1.1px); stroke-linejoin: round; }
.pl-lv { stroke: var(--vein-ink, rgb(185 208 143 / .5)); stroke-width: .9; fill: none; }
.anat .bud { fill: #9DB37A; stroke: #D3E4AA; stroke-width: .8; }
.anat .cola--side .bud { fill: #8CA568; }
.anat .pistil { stroke: #E26C3C; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.anat .glit circle { fill: #FFF3C8; opacity: .9; }
.anat .seed { stroke: #2A1A11; stroke-width: 1; }
.anat .seed-mark { stroke: #D2B488; fill: none; stroke-width: 1.2; opacity: .75; stroke-linecap: round; }
.anat .seed-tip { fill: #2A1A11; }
.anat .inset-bg { fill: #1E1128; stroke: #E3A72F; stroke-width: 2; }
.anat .trich-stalk { stroke: #9DB37A; stroke-width: 3.2; fill: none; stroke-linecap: round; }
.anat .trich-head { stroke: #6C4510; stroke-width: 1; }
.anat .trich-shine { fill: #fff; opacity: .85; }
.anat .trich-hair { stroke: #9DB37A; fill: none; opacity: .6; stroke-linecap: round; }
.anat .leader { stroke: #E3A72F; stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; opacity: .8; }
.anat .labels text { fill: #F1E6CC; font: 600 25px/1 var(--f-ui); letter-spacing: .03em; paint-order: stroke; stroke: #1B1022; stroke-width: 5px; stroke-linejoin: round; }
.anat .part { cursor: pointer; outline: none; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.anat .part:focus-visible { outline: 3px solid var(--focus, #E3A72F); outline-offset: 4px; }
.anat[data-active] .part:not(.is-on) { opacity: .34; }
.anat .part.is-on { --leaf-ink: #FFE08A; --leaf-w: 2.4px; --vein-ink: rgb(255 224 138 / .55); }
.anat .part.is-on .bud, .anat .part.is-on .stem, .anat .part.is-on .trich-head, .anat .part.is-on .seed { stroke: #FFE08A; stroke-width: 2.2; }
@media (hover: hover) { .anat .part:hover:not(.is-on) { opacity: 1; } .anat[data-active] .part:hover:not(.is-on) { opacity: .75; } }

.anat__panel { display: grid; gap: .9rem; min-width: 0; }
.anat__chips { scroll-margin-top: calc(var(--g-top, 0px) + var(--v-nav-h, 3.5rem) + 1rem); display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.anat__chip { min-height: 2.75rem; padding: .35rem 1rem; border-radius: 999px; border: 0; cursor: pointer; font: 700 .92rem/1.2 var(--f-ui); color: var(--v-ink); background: rgb(255 255 255 / .09); box-shadow: inset 0 0 0 1.5px rgb(232 217 178 / .35); transition: background-color .2s, color .2s, translate .35s var(--spring); }
.anat__chip[aria-pressed="true"] { background: var(--v-turmeric); color: #1B1022; box-shadow: none; }
@media (hover: hover) { .anat__chip:hover { translate: 0 -2px; } }
.anat__hint { margin: 0; font: 600 .85rem/1.4 var(--f-ui); color: var(--v-ink-3); }
.anat__cards { display: grid; gap: 1rem; }
.anat__card { padding: 1.3rem 1.3rem 1.4rem; display: grid; gap: .75rem; scroll-margin-top: calc(var(--v-nav-h, 3.5rem) + 6rem); }
.anat__part { margin: 0; font: 600 .78rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--v-hemp); }
.anat__name { margin: 0; font: 800 clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem)/1.05 var(--f-groove); font-variation-settings: "SOFT" 100; color: var(--v-turmeric); text-shadow: 2px 2px 0 var(--v-wine); }
.anat__name .dev { margin-left: .4em; font-size: .6em; color: var(--v-ember); text-shadow: none; white-space: nowrap; vertical-align: .08em; }
.anat__what { margin: 0; font: 400 1.05rem/1.65 var(--f-read); color: var(--v-ink); }
.anat__two { display: grid; gap: .7rem; }
@media (min-width: 40rem) { .anat__two { grid-template-columns: 1fr 1fr; } }
.anat__side { margin: 0; padding: .75rem .9rem .8rem; border-radius: 12px; background: rgb(0 0 0 / .22); box-shadow: inset 3px 0 0 var(--accent, var(--v-turmeric)); }
.anat__side--in { --accent: #E3A72F; } .anat__side--west { --accent: #B9A3D9; }
.anat__side dt { margin: 0 0 .25rem; font: 700 .76rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.anat__side dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--v-ink-2); }
.cali { margin: .2rem 0 0; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(160deg, rgb(185 163 217 / .2), rgb(185 163 217 / .06)); box-shadow: inset 0 0 0 1px rgb(185 163 217 / .45); }
.cali h4 { margin: 0 0 .3rem; font: 800 1.05rem/1.2 var(--f-groove); color: #D9C9F2; }
.cali p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--v-ink); }
.anat__compounds { margin: 0; padding: .9rem 1.1rem; display: grid; gap: .2rem; border-radius: 14px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(232 217 178 / .18); }
.anat__compounds b { font: 800 1rem/1.2 var(--f-groove); color: var(--v-turmeric); }
.anat__compounds span { font-size: .95rem; line-height: 1.55; color: var(--v-ink-2); }
@media (prefers-reduced-motion: reduce) { .anat .part, .anat__chip { transition: none; } }

/* ================================================================== India and the West */
.vs { margin-top: clamp(2.5rem, 6vw, 4rem); }
.vs__head { margin-bottom: 1.2rem; }
.vs__table { display: grid; gap: .9rem; }
.vs__cols { display: none; }
@media (min-width: 48rem) {
  .vs__cols, .vs__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .vs__cols { padding: 0 1.1rem; font: 800 1.15rem/1.2 var(--f-groove); font-variation-settings: "SOFT" 100; }
  .vs__cols span:nth-child(2) { color: #F2CF7E; } .vs__cols span:nth-child(3) { color: #D9C9F2; }
}
.vs__row { display: grid; gap: .6rem; padding: 1rem 1.1rem 1.1rem; }
.vs__k { margin: 0; font: 700 .8rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--v-hemp); align-self: start; padding-top: .15rem; }
.vs__cell { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--v-ink); padding-left: .85rem; box-shadow: inset 3px 0 0 var(--accent); }
.vs__cell--in { --accent: #E3A72F; } .vs__cell--west { --accent: #B9A3D9; }
.vs__cell small { display: block; margin-bottom: .15rem; font: 700 .72rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vs__flag { margin: .9rem 0 0; }

/* ================================================================== old books that open */
.jharokha__open { justify-self: start; margin-top: .3rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem .4rem .85rem; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .92rem/1.2 var(--f-ui); color: #1B1022; background: var(--v-sand); box-shadow: 0 2px 0 var(--v-wine); transition: translate .35s var(--spring), background-color .2s; }
.jharokha__open svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .jharokha__open:hover { background: #F3E6C4; translate: 0 -2px; } }
.jharokha__frame { cursor: pointer; }
.js .book-read { display: none; }
.book-read { margin-top: .6rem; border-radius: 12px; background: rgb(0 0 0 / .22); padding: .5rem .8rem; }
.book-read summary { cursor: pointer; font: 700 .9rem/1.4 var(--f-ui); color: var(--v-turmeric); }
.book-read .pg { margin-top: .7rem; border-radius: 8px; }

dialog.v-book { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.v-book::backdrop { background: rgb(12 6 16 / .92); }
.bk { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: max(.6rem, env(safe-area-inset-top)) .8rem max(.7rem, env(safe-area-inset-bottom)); gap: .5rem; }
.bk__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--v-ink); }
.bk__title { margin: 0; font: 800 1.2rem/1.2 var(--f-groove); font-variation-settings: "SOFT" 100; color: var(--v-turmeric); }
.bk__title .dev { margin-left: .4em; font-size: .85em; color: var(--v-ember); }
.bk__close { width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; cursor: pointer; color: var(--v-ink); background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px rgb(232 217 178 / .4); display: grid; place-items: center; }
.bk__close svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bk__stage { position: relative; display: grid; place-items: center; min-height: 0; perspective: 2400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bk__book { position: relative; width: calc(var(--pw) * var(--up)); height: var(--ph); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 28px 36px rgb(0 0 0 / .55)); }
.bk--spread .bk__book[data-state="front"] { transform: translateX(calc(var(--pw) * -.5)); }
.bk--spread .bk__book[data-state="back"] { transform: translateX(calc(var(--pw) * .5)); }
.bk__leaf { position: absolute; top: 0; height: 100%; width: var(--pw); left: calc(var(--pw) * (var(--up) - 1)); transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.bk__leaf.is-flipped { transform: rotateY(-180deg); }
.bk__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.bk__face--back { transform: rotateY(180deg); }
/* phones: one page at a time, the top page peels away from its left edge */
.bk--single .bk__book { --up: 1; }
.bk--single .bk__leaf { left: 0; transition: transform .75s cubic-bezier(.4, .6, .2, 1), opacity .3s linear .45s; }
.bk--single .bk__leaf.is-flipped { transform: rotateY(-112deg); opacity: 0; pointer-events: none; }
.bk--spread .bk__book { --up: 2; }
/* a shadow that darkens the page below while one turns, and a curl on the page that turns */
.bk__leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(30 12 8 / .0), rgb(30 12 8 / .22)); opacity: 0; transition: opacity .9s ease; }
.bk--spread .bk__leaf.is-turning::after { opacity: 1; }
.bk--calm .bk__book, .bk--calm .bk__leaf { transition: none !important; }
.bk--calm .bk__leaf { transform: none !important; }
.bk--calm .bk__leaf.is-flipped { opacity: 0; pointer-events: none; }
.bk--calm .bk__leaf { transition: opacity .25s ease !important; }
.bk__nav { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--v-ink-2); }
.bk__btn { min-width: 2.9rem; height: 2.9rem; padding: 0 1rem; white-space: nowrap; border: 0; border-radius: 999px; cursor: pointer; font: 700 .95rem/1 var(--f-ui); color: #1B1022; background: var(--v-sand); display: inline-flex; align-items: center; gap: .45rem; justify-content: center; }
.bk__btn[disabled] { opacity: .35; cursor: default; }
.bk__btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bk__count { min-width: 5.4rem; text-align: center; font: 600 .86rem/1.2 var(--f-ui); color: var(--v-ink); }
.bk__hint { margin: 0; text-align: center; font: 600 .78rem/1.3 var(--f-ui); color: var(--v-ink-3); }
.bk__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* a page of paper: fibres, a darker gutter, a hairline edge */
.pg { position: relative; width: 100%; height: 100%; font: 400 var(--pt, 17px)/1.5 var(--f-fell); color: var(--ink);
  background: radial-gradient(120% 80% at 30% 20%, rgb(255 250 235 / .55), transparent 60%), repeating-linear-gradient(8deg, rgb(120 90 40 / .035) 0 1px, transparent 1px 5px), linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: inset 0 0 0 1px rgb(120 90 40 / .35), inset 0 0 60px rgb(120 80 30 / .22); }
.bk__face--front .pg::after, .bk__face--back .pg::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.bk--spread .bk__face--front .pg::after { left: 0; background: linear-gradient(90deg, rgb(60 30 10 / .28), transparent); }
.bk--spread .bk__face--back .pg::after { right: 0; background: linear-gradient(270deg, rgb(60 30 10 / .28), transparent); }
.pg__in { position: absolute; inset: 0; padding: 7% 8% 9%; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .7em; scrollbar-width: thin; }
.pg__no { position: absolute; bottom: 3.2%; left: 0; right: 0; text-align: center; font: italic 400 .8em/1 var(--f-fell); color: var(--ink-2); pointer-events: none; }
.pg h3 { margin: 0; font: 400 1.45em/1.15 var(--f-fell); color: var(--rust); letter-spacing: .01em; }
.pg h3::first-letter { font-size: 1.25em; }
.pg p { margin: 0; }
.pg .dv { font-family: var(--f-tiro); }
.pg__rule { height: 0; border: 0; border-top: 1px solid var(--paper-edge); position: relative; margin: .1em 0; overflow: visible; }
.pg__rule::after { content: "❧"; position: absolute; left: 50%; top: -.72em; translate: -50% 0; padding: 0 .5em; background: var(--paper); color: var(--rust); font-size: .95em; }
.pg--cover { color: #F2D88F; background: radial-gradient(90% 70% at 50% 28%, #6C2530, transparent 70%), linear-gradient(160deg, #4A1A22, #230C12);
  box-shadow: inset 0 0 0 1px #14060a, inset 0 0 0 7px rgb(0 0 0 / 0), inset 0 0 0 9px rgb(231 190 98 / .75), inset 0 0 0 12px #2a0e14, inset 0 0 0 13px rgb(231 190 98 / .45), inset 0 0 80px #14060a; }
.pg--cover .pg__in { align-items: center; justify-content: center; text-align: center; gap: .9em; padding: 14% 12%; overflow: hidden; }
.pg--cover .cv-dev { font: 400 clamp(2.2em, 11vw, 3.6em)/1.1 var(--f-tiro); color: #F0CF7C; text-shadow: 0 2px 0 #14060a, 0 0 22px rgb(240 207 124 / .35); }
.pg--cover .cv-lat { font: 400 1.5em/1.1 var(--f-fell); letter-spacing: .14em; text-transform: uppercase; color: #E7BE62; }
.pg--cover .cv-rule { width: 38%; border-top: 1px solid rgb(231 190 98 / .7); position: relative; }
.pg--cover .cv-rule::after { content: "✦"; position: absolute; left: 50%; top: -.65em; translate: -50% 0; padding: 0 .4em; background: #34141b; font-size: .9em; }
.pg--cover .cv-sub { font: italic 400 1em/1.45 var(--f-fell); color: #D9BE86; max-width: 22em; }
.pg--cover .cv-date { font: 400 .82em/1.3 var(--f-fell); letter-spacing: .12em; text-transform: uppercase; color: #B79856; }
.pg--cover.pg--back .pg__in { justify-content: center; }
.pg__lines { margin: 0; display: grid; gap: .8em; }
.pg__lines dt { font: 400 .8em/1.2 var(--f-fell); letter-spacing: .16em; text-transform: uppercase; color: var(--rust); }
.pg__lines dd { margin: .1em 0 0; }
.pg__ref { font: italic 400 .86em/1.3 var(--f-fell); color: var(--ink-2); }
.verse__dev { font: 400 1.34em/1.55 var(--f-tiro); color: var(--ink); text-align: center; padding: .15em 0; text-wrap: balance; }
.verse__iast { font: italic 400 .84em/1.5 var(--f-tiro); color: var(--ink-2); text-align: center; }
.verse__en { font-size: 1em; text-align: center; text-wrap: balance; }
.pg__note, .pg__flag { font: italic 400 .8em/1.4 var(--f-fell); color: var(--ink-2); }
.pg__flag { align-self: flex-start; padding: .15em .6em; border-radius: 6px; font-style: normal; font-size: .72em; letter-spacing: .04em; color: #1B1022; background: #D9C9F2; }
.pg--folio .pg__in { justify-content: center; text-align: center; }
.pg--folio .folio__lines { height: 7em; background: repeating-linear-gradient(180deg, transparent 0 1.4em, rgb(120 90 40 / .45) 1.4em calc(1.4em + 1px)); opacity: .9; }
.pg--fig .pg__in { justify-content: center; }
.pg--fig svg { width: 100%; height: auto; max-height: 100%; }
.pg--fig figcaption { text-align: center; font: italic 400 .9em/1.35 var(--f-fell); color: var(--ink-2); }
.pg--fig figure { margin: 0; display: grid; gap: .5em; }
.pg ul.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: .8em; }
.pg ul.notes li { padding-left: 1em; position: relative; }
.pg ul.notes li::before { content: "❦"; position: absolute; left: -.1em; top: .05em; color: var(--rust); font-size: .85em; }
/* the infographics, printed in sepia ink */
.ig { display: block; width: 100%; height: auto; }
.ig-ring { fill: none; stroke: var(--ink-2); stroke-dasharray: 3 5; opacity: .6; }
.ig-sun circle { fill: var(--gold); stroke: none; } .ig-sun path { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.ig-spoke, .ig-axis { stroke: var(--ink-2); fill: none; stroke-width: 1.3; }
.ig-node circle { fill: #F3E7C8; stroke: var(--ink); stroke-width: 1.6; }
.ig-node--hot circle { fill: var(--rust); stroke: #5A1219; }
.ig-node--hot .ig-dev { fill: #F6EBCB; }
.ig-dev { font-family: var(--f-tiro); font-size: 21px; fill: var(--ink); }
.ig-lat { font-family: var(--f-fell); font-size: 15px; fill: var(--ink); } .ig-b { font-size: 17px; }
.ig-sub { font: italic 12px var(--f-fell); fill: var(--ink-2); }
.ig-cap { font: italic 13px var(--f-fell); fill: var(--paper); }
.ig-k { font: 11px var(--f-fell); letter-spacing: .14em; text-transform: uppercase; fill: var(--rust); }
.ig-arrow { stroke: var(--rust); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ig-beam { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; } .ig-pivot { fill: var(--ink-2); }
.ig-weight--low { fill: var(--ink); } .ig-weight--high { fill: var(--rust); }
.ig-step circle { fill: #F3E7C8; stroke: var(--ink); stroke-width: 1.6; }
.ig-ico * { stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig-n { font: 700 15px var(--f-fell); fill: var(--rust); }
body:has(dialog.v-book[open]) { overflow: hidden; }

/* ================================================================== the Shiva band */
/* The owner's poster collage, full width, straight after the history. The poster carries its own words, so nothing is laid over it:
   the chant, the title and the story sit below it on the same dark ground. Phones show the middle of the collage (the poster itself)
   and open all of it on a tap; wide screens show the whole collage. */
.shiva { position: relative; isolation: isolate; margin-top: clamp(4rem, 9vw, 7rem); overflow: clip; color: var(--v-ink); background: #12081A;
  clip-path: polygon(0 1.6%, 5% 0, 11% 1.9%, 18% .5%, 26% 2%, 34% .3%, 43% 1.8%, 52% .2%, 61% 1.7%, 70% .4%, 79% 2%, 88% .5%, 95% 1.6%, 100% .3%, 100% 98.4%, 94% 100%, 86% 98.3%, 77% 99.7%, 68% 98.1%, 59% 99.8%, 50% 98.2%, 41% 99.6%, 32% 98%, 23% 99.8%, 14% 98.4%, 6% 99.7%, 0 98.6%); }
.shiva__poster { margin: 0; position: relative; }
.shiva__frame { position: relative; display: block; color: inherit; text-decoration: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.shiva__frame:focus-visible { outline: 3px solid var(--v-turmeric); outline-offset: -6px; }
.shiva__art { aspect-ratio: 4 / 5; background-color: #12081A; }
.shiva__art img { object-fit: cover; object-position: 62% 50%; }
.shiva__art .vart__drawn { background: radial-gradient(60% 50% at 50% 45%, rgb(227 167 47 / .22), transparent 70%); }
.shiva__poster::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; pointer-events: none; background: linear-gradient(180deg, rgb(18 8 26 / 0), #12081A 92%); }   /* the collage settles into the page's dark ground */
.shiva__open { position: absolute; z-index: 2; left: .8rem; bottom: 3.4rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .3rem 1rem; border-radius: 999px; font: 700 .86rem/1.2 var(--f-ui); color: var(--v-ink); background: rgb(18 8 26 / .78); box-shadow: inset 0 0 0 1.5px rgb(227 167 47 / .7); }
.shiva__open::before { content: ""; width: .9rem; height: .9rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: .55rem .55rem 0 -.32rem currentColor; translate: -.15rem -.15rem; }
.shiva__chant { position: relative; z-index: 2; margin: calc(-1 * clamp(1.9rem, 6vw, 3.6rem)) 0 0; text-align: center; font: 400 clamp(2.4rem, 11vw, 6.4rem)/1.05 var(--f-dev); color: transparent; -webkit-text-stroke: 2px var(--v-turmeric); text-stroke: 2px var(--v-turmeric); rotate: -2deg; text-shadow: 5px 5px 0 rgb(142 43 51 / .35); pointer-events: none; }
.shiva__ember { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.shiva__ember i { position: absolute; bottom: -4%; left: calc(var(--x) * 1%); width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: var(--v-ember); box-shadow: 0 0 10px 2px rgb(226 108 60 / .7); opacity: 0; animation: shiva-rise var(--d, 9s) linear var(--w, 0s) infinite; }
@keyframes shiva-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(var(--dx, 20px), -85svh); opacity: 0; } }
.shiva.is-off .shiva__ember i { animation-play-state: paused; }
.shiva__in { width: min(100% - 2.4rem, 70rem); margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(4rem, 9vw, 6.5rem); display: grid; gap: 1.2rem 3.5rem; }
.shiva__head, .shiva__body { display: grid; gap: .9rem; align-content: start; }
.shiva__kicker { margin: 0; display: inline-flex; flex-wrap: wrap; gap: .4rem .9rem; font: 700 .8rem/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--v-turmeric); }
.shiva__title { margin: 0; font: 800 clamp(2.5rem, 1.4rem + 5.4vw, 5.2rem)/.98 var(--f-groove); font-variation-settings: "SOFT" 100; color: var(--v-turmeric); text-shadow: 4px 4px 0 var(--v-wine), 0 0 40px rgb(227 167 47 / .3); text-wrap: balance; }
.shiva__body p { margin: 0; font: 400 1.08rem/1.65 var(--f-read); color: var(--v-ink); }
.shiva__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.shiva__chips a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: .3rem 1rem; border-radius: 999px; font: 700 .9rem/1.2 var(--f-ui); color: var(--v-ink); text-decoration: none; background: rgb(18 8 26 / .72); box-shadow: inset 0 0 0 1.5px rgb(227 167 47 / .6); transition: background-color .2s, color .2s; }
@media (hover: hover) { .shiva__chips a:hover { background: var(--v-turmeric); color: #1B1022; } }
.shiva .shiva__note { font: 600 .78rem/1.4 var(--f-ui); color: var(--v-ink-2); }
@media (min-width: 52rem) {
  .shiva__art { aspect-ratio: 16 / 9; max-height: min(94svh, 64rem); width: 100%; }
  .shiva__art img { object-position: 50% 50%; }
  .shiva__open { display: none; }
  .shiva__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
@media (prefers-reduced-motion: reduce) { .shiva__ember i { animation: none !important; } .shiva__ember { display: none; } }
html.motion-off .shiva__ember i { animation: none !important; }
html.motion-off .shiva__ember { display: none; }

/* the churning's sound switch: a real switch, in the head of the section and, while the scene runs, on the stage; it states what it is doing */
.mn__sound { min-height: 48px; padding: 0 .85rem 0 .8rem; gap: .55rem; font-weight: 700; letter-spacing: .01em; color: #F1E6CC; background: rgb(27 16 34 / .88); border-color: rgb(241 230 204 / .6); }
.mn__sound::after { content: ""; flex: none; width: 2.2rem; height: 1.2rem; border-radius: 999px; background: radial-gradient(circle at 24% 50%, #F1E6CC 0 .4rem, transparent .42rem), rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px rgb(241 230 204 / .7); transition: background-color .25s; }
.mn__sound[aria-pressed="true"]::after { background: radial-gradient(circle at 76% 50%, #1B1022 0 .4rem, transparent .42rem), var(--v-turmeric); box-shadow: none; }
.mn__sound.is-waiting { box-shadow: 0 0 0 0 rgb(227 167 47 / .6); animation: mn-wait 2.2s ease-out infinite; }
@keyframes mn-wait { 0% { box-shadow: 0 0 0 0 rgb(227 167 47 / .6); } 70%, 100% { box-shadow: 0 0 0 .8rem rgb(227 167 47 / 0); } }
@media (prefers-reduced-motion: reduce) { .mn__sound.is-waiting { animation: none; box-shadow: 0 0 0 3px rgb(227 167 47 / .55); } }
html.motion-off .mn__sound.is-waiting { animation: none; box-shadow: 0 0 0 3px rgb(227 167 47 / .55); }

.bk--instant .bk__book, .bk--instant .bk__leaf, .bk--instant .bk__leaf::after { transition: none !important; }