/* Sankhya Karika class companion — the blackboard. One sheet. */
:root{--paper:#1F2A27;--ink:#F1EEE4;--muted:#B9B5A8;--rule:rgba(241,238,228,.22);--lit:#E3A43C;--lit-bg:rgba(227,164,60,.14);
  --box:transparent;--rootbox:rgba(241,238,228,.08);--line:rgba(241,238,228,.55);--chalk:rgba(241,238,228,.45);
  --deva:"Noto Serif Devanagari",serif;--iastf:"Noto Serif",serif;--latin:"Noto Serif",Georgia,serif;color-scheme:dark}
:root[data-theme=light]{--paper:#F6F5F1;--ink:#20231F;--muted:#636760;--rule:rgba(32,35,31,.18);--lit:#9A6212;--lit-bg:rgba(154,98,18,.12);
  --rootbox:rgba(32,35,31,.06);--line:rgba(32,35,31,.55);--chalk:rgba(32,35,31,.4);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--latin);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
[lang="sa"]{font-family:var(--deva)}
[lang="sa-Latn"]{font-family:var(--iastf)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lit);outline-offset:3px;border-radius:4px}
a{color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-left:max(16px,calc(50% - 20rem));padding-right:max(16px,calc(50% - 20rem))}

/* the Vigyan Yoga mark and logo: chalk on the board, ink on the light page */
.brand.on-light{display:none} :root[data-theme=light] .brand.on-dark{display:none} :root[data-theme=light] .brand.on-light{display:block}
.home-mark{display:flex;align-items:center;min-width:44px;min-height:44px;margin-left:6px}
.home-mark .mark{height:26px;width:auto;opacity:.9}
.home .wide{height:34px;width:auto;margin:30px 0 26px}
.credit .foot{height:22px;width:auto;opacity:.75;margin:0 0 12px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);padding-top:max(8px,env(safe-area-inset-top))}
.top .row{display:flex;align-items:center;gap:10px;min-height:44px}
.top .num{font-weight:600;padding:8px 0;min-height:44px;display:flex;align-items:center;gap:6px;font-size:19px}
.top .num svg{width:14px;height:14px;opacity:.7}
.top .tools{margin-left:auto;display:flex;gap:4px}
.top .tools button{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--muted);border-radius:8px}
.rail{display:flex;gap:2px;margin:0 -4px;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:1 0 auto;padding:10px 6px 9px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;min-height:40px;white-space:nowrap}
.rail button[aria-current="step"]{color:var(--ink);border-bottom-color:var(--lit)}

/* stages */
.stage{padding-top:28px;padding-bottom:40px;min-height:40dvh;scroll-margin-top:96px}
.stage h2{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 18px;letter-spacing:.02em}
.s-verse{min-height:0;padding-top:24px}
.s-concept{min-height:calc(100dvh - 96px)}

/* the verse */
.kh{color:var(--muted);font-size:14px;letter-spacing:.06em;margin:0 0 22px;display:flex;align-items:center;gap:12px;font-weight:600}
.kh::after{content:"";flex:0 0 40px;height:1px;background:var(--rule)}
.verse{margin:0}
.verse .dl{font-family:var(--deva);font-size:clamp(20px,5.8vw,24px);line-height:1.6;margin:0;font-weight:500}
.verse .il{font-family:var(--iastf);font-style:italic;font-size:clamp(15px,4.2vw,17px);line-height:1.45;margin:10px 0 0}
/* a joined compound moves whole to the next line; only when it is wider than the line does it break, between its words */
.verse .wg{display:inline-block;max-width:100%}
.verse .w{border-radius:4px;transition:color .25s,background-color .25s}
.verse .w.lit{color:var(--lit);background:var(--lit-bg)}

/* the words: tiles rise in once; the grid switches to the list with meanings; a tap opens one meaning */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;max-width:34rem}
.tiles .tile{padding:8px 10px 9px;border-radius:4px;min-height:48px;min-width:0;display:block;width:100%;border:1px solid var(--chalk);
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.tiles .tile.in,.no-js .tiles .tile{opacity:1;transform:none}
.reduce .tiles .tile{opacity:1;transform:none;transition:none}
.tiles .tile .td{font-family:var(--deva);font-size:clamp(18px,5vw,21px);line-height:1.35;display:block}
.tiles .tile .ti{font-family:var(--iastf);font-style:italic;font-size:clamp(14px,3.8vw,16px);line-height:1.3;display:grid}
.tiles .tile .ti>span{grid-area:1/1;overflow-wrap:anywhere}
.tiles .tile .vf{opacity:1;transition:opacity .3s .5s} .tiles .tile .sf{opacity:1}
.tiles .tile .ti:has(.vf) .sf{opacity:0;transition:opacity .3s .5s}
.tiles .tile.in .ti:has(.vf) .vf{opacity:0} .tiles .tile.in .ti:has(.vf) .sf{opacity:1}
.tiles .tile .tm{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.tiles .tile .tm>span{overflow:hidden;display:block;font-size:15px;line-height:1.4;color:var(--muted);padding-top:0;transition:padding-top .35s}
.tiles .tile.open .tm{grid-template-rows:1fr} .tiles .tile.open .tm>span{padding-top:6px}
.no-js .tiles .tile .tm{grid-template-rows:1fr}
.tiles .tile .no{font-style:italic;color:var(--muted)}
.tiles .tile .gh{color:var(--muted);font-family:var(--iastf)}
.tiles .tile.lit{border-color:var(--lit)} .tiles .tile.lit .td,.tiles .tile.lit .ti{color:var(--lit)}
.tiles.meanings{grid-template-columns:1fr;gap:0}
.tiles.meanings .tile{display:grid;grid-template-columns:minmax(118px,36%) 1fr;column-gap:14px;align-items:start;border-width:0 0 1px;border-radius:0;padding:10px 2px}
.tiles.meanings .tile .tm{grid-template-rows:1fr}
.tiles.meanings .tile .tm>span{padding-top:3px;color:var(--ink);font-size:16px;line-height:1.45}
.tiles.meanings .tile.lit .tm>span{color:var(--lit)}
.words-cta{margin-top:22px;font-size:15px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* translation */
.tr{max-width:34rem;font-size:17px;line-height:1.55;margin:0}
.tr.extra{font-size:17px;margin-top:8px}
.tr .ph{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;text-decoration-thickness:1px;border-radius:3px}
.tr .ph.lit{text-decoration-color:var(--lit);background:var(--lit-bg)}
.chip{margin-top:16px;min-height:28px;font-size:15px;color:var(--muted)}
.chip b{font-weight:600;color:var(--ink);font-family:var(--iastf);font-style:italic}
.chip .cd{font-family:var(--deva);color:var(--ink);font-style:normal;margin-right:6px}

/* concept figure — chalk strokes, no fills */
.fig{position:relative;max-width:34rem}
.fig svg.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fig .wires path{fill:none;stroke:var(--line);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fig .wires path.dash{stroke-dasharray:3 3;stroke-width:1}
.fig .wires path.ah{stroke-width:1.4}
.fig .g{opacity:0;transform:translateY(8px)}
.fig .g.in,.no-js .fig .g{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.reduce .fig .g{opacity:1;transform:none;transition:none}
.box{position:relative;border:1px solid var(--chalk);border-radius:4px;padding:9px 12px;text-align:center;line-height:1.3;font-size:16px;z-index:1;width:100%;display:block;background:var(--paper)}
.box .sa{font-style:italic;color:var(--muted);font-size:14px;display:block}
.box .q{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.box .role{display:table;margin:7px auto 0;font-size:12.5px;line-height:1.3;color:var(--muted);border:1px dashed var(--chalk);border-radius:4px;padding:2px 8px}
.box.root{border-width:1.5px}
.box.head{font-weight:600;border-width:1.5px}
.box.lit{border-color:var(--lit);color:var(--lit)}
.box.pair{border-color:var(--lit);border-style:dashed}
.note{position:relative;z-index:1;border:1px dashed var(--chalk);border-radius:4px;padding:6px 10px;font-size:14px;color:var(--muted);background:var(--paper);text-align:center;line-height:1.3}
.tag{display:inline-block;font-size:12px;border:1px solid var(--chalk);border-radius:999px;padding:1px 8px;color:var(--muted);margin-top:6px;font-weight:400}
.oval{border-radius:999px;border:1px solid var(--chalk);padding:8px 4px;font-size:12px;text-align:center;line-height:1.25;color:var(--muted);position:relative;z-index:1;justify-self:center;width:72px;background:var(--paper)}
.oval i{color:var(--ink);display:block;font-size:15px}
.fr{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;column-gap:8px;margin-top:14px}
.fr .mid{text-align:center;font-size:12px;font-style:italic;color:var(--muted);position:relative;z-index:1}
.fr.heads{margin-top:28px;align-items:stretch}
.fr.heads .box.head{background:color-mix(in srgb,var(--ink) 9%,var(--paper))}
.pill{align-self:center;justify-self:center;position:relative;z-index:1;border:1px solid var(--chalk);border-radius:999px;padding:3px 9px 4px;font-size:12px;font-style:italic;line-height:1.2;color:var(--muted);background:var(--paper);text-align:center}
.froot{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;margin:0 0 32px}
.froot.solo{grid-template-columns:1fr}
.ftop{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:10px;margin:0 0 36px}
.lb+.lb{margin-top:0}
.froot .box{max-width:260px;justify-self:center;width:auto;min-width:200px;padding:9px 16px}
.fset .box.head{max-width:300px;margin:0 auto;width:auto;min-width:200px;padding:9px 16px}
.fset .items{display:grid;gap:10px;margin-top:30px}
.fset .items .box{text-align:left}
/* groups as trees. Stacked (c1): an outline — heads left, members indented, one spine per level.
   Side by side (c2, c3): columns under the root, members stacked beneath each head. */
.groups{display:grid;gap:30px}
.groups.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.groups.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start}
.lb{position:relative}
.lb .lh{display:flex;justify-content:center;margin-bottom:24px}
.lb .lh .box{width:auto;min-width:200px;max-width:320px;border-width:1.5px;padding:9px 16px}
.groups.c1 .lb .lh{justify-content:flex-start;margin:0 0 16px 18px}
.groups.c1 .lb .lh .box{min-width:0;max-width:none;text-align:left;padding:8px 14px}
.groups.c1 .lb .lh .box .sa{display:inline;margin-left:6px}
.groups.c1 .lb .lh .box .q{display:block}
.groups.c1 .lb .lh .box .tag{margin:0 0 0 8px;vertical-align:middle}
.groups.c1 .lt{margin-left:46px}
.groups.c2 .lb .lh .box,.groups.c3 .lb .lh .box{min-width:0;width:100%;padding:8px 8px;font-size:15px}
.groups.c3 .lb .lh .box{font-size:14px;padding:8px 5px}
.groups.c3 .lb .lh{margin-bottom:0}
.lt.below{margin:24px 0 0 calc((100% - 16px)/3 + 18px)}
.lt.below.at0{margin-left:18px}
.groups.c2 .lb .lh .box .sa,.groups.c3 .lb .lh .box .sa{font-size:12.5px}
.groups.c2 .lt,.groups.c3 .lt{margin-left:10px;gap:6px}
.groups.c2 .box.tile,.groups.c3 .box.tile{font-size:13.5px;padding:6px 7px;display:block}
.groups.c2 .box.tile .sa,.groups.c3 .box.tile .sa,.groups.c2 .box.tile .q,.groups.c3 .box.tile .q{font-size:12px;display:block}
/* side-by-side heads share one height, so every column's members start on the same line */
.groups.c2,.groups.c3{grid-template-rows:auto auto}
.groups.c2>.lb,.groups.c3>.lb{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.groups.c2>.lb>.lh .box,.groups.c3>.lb>.lh .box{height:100%}
.groups.c2>.lb>.lt,.groups.c3>.lb>.lt{align-content:start}
.lt{display:grid;grid-template-columns:1fr;gap:6px;margin-left:18px}
.lt .lb{margin-top:6px}
.lt .lb .lh{justify-content:flex-start;margin:0 0 14px}
.lt .lb .lh .box{min-width:0;max-width:none;width:auto;padding:7px 12px;font-size:15px;text-align:left}
.lt .lb .lh .box .sa{display:inline;margin-left:6px}
.lt .lb .lh .box .tag{margin:0 0 0 8px;vertical-align:middle}
.box.tile{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:0;font-size:15px;padding:7px 10px;text-align:left;border-color:var(--rule)}
.box.tile .sa{display:inline;font-size:14px}
.box.tile .q{display:inline;font-size:13px;margin:0}
.crow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:30px;max-width:30rem}
.crow:first-of-type{margin-top:0}
.crow .box{max-width:260px;justify-self:center;width:100%}
.cmp,.mx{display:grid;gap:6px}
.cmph,.cmpr{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cmpr .cell{border-bottom:1px solid var(--rule);padding:7px 4px;font-size:15px;line-height:1.3}
.cell .sa{display:block;font-style:italic;color:var(--muted);font-size:13px}
.mxh,.mxr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.mxr{margin-top:8px}
.mxr .rl{grid-column:1/-1;font-size:13px;color:var(--muted);padding:0 2px;line-height:1.3}
.mxr .cell{border:1px solid var(--rule);border-radius:4px;padding:7px 6px;font-size:14px;line-height:1.3}
.fnote{font-size:14px;color:var(--muted);margin:22px 0 0;line-height:1.45;max-width:34rem}
.fset .items{margin-left:16px}
.fset .items.c1{grid-template-columns:1fr;margin-left:0} .fset .items.c2{grid-template-columns:1fr 1fr} .fset .items.c3{grid-template-columns:repeat(3,1fr)}
.fset .items.c1{margin-left:18px;gap:6px}
.fset .items.c1 .box{text-align:left;padding:8px 12px}
.fset .items .box .en+.tag{margin:0 0 0 8px;vertical-align:middle}
.fset .box.head .tag,.froot .box .tag{display:table;margin:6px auto 0}
.box.here{border-color:var(--lit)}
/* outline heads: the name and its Sanskrit flow on one line where they fit; the count follows, or starts its own line
   flush with the name, never indented */
.groups.c1 .lb .lh .box,.lt .lb .lh .box{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:4px}
.groups.c1 .lb .lh .box .sa,.lt .lb .lh .box .sa{margin-left:0}
.groups.c1 .lb .lh .box .q,.lt .lb .lh .box .q{flex-basis:100%;margin-top:0}
.groups.c1 .lb .lh .box .tag,.lt .lb .lh .box .tag{margin:0}
/* the switch between the tradition and our teaching: both readings share one cell, so nothing moves when it flips */
.teachsw{display:inline-flex;border:1px solid var(--chalk);border-radius:999px;padding:3px;margin:-6px 0 22px;gap:2px}
.teachsw button{font-size:14px;padding:7px 14px;border-radius:999px;min-height:36px;color:var(--muted);transition:background-color .25s,color .25s}
.teachsw button[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 12%,var(--paper));color:var(--ink)}
.sw{display:inline-grid;vertical-align:top}
.box>.sw{display:grid;align-items:center;min-height:100%}
.box>.sw>span{display:block}
.fr:not(.heads) .box{overflow-wrap:break-word} .box .sa{hyphens:none;-webkit-hyphens:none}
.sw>span{grid-area:1/1;transition:opacity .3s ease}
.sw .t1{opacity:0;visibility:hidden}
.fig.teach .sw .t0{opacity:0;visibility:hidden}
.fig.teach .sw .t1{opacity:1;visibility:visible}
.place{margin-top:20px;min-height:44px;font-size:15px;color:var(--muted)}
.place b{color:var(--ink);font-weight:600}
.place .crumb{display:block;margin-top:4px}

/* previous / next */
.foot{display:flex;gap:10px;padding-top:8px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.foot a{flex:1;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;text-decoration:none;min-height:56px;display:flex;flex-direction:column;justify-content:center;max-width:18rem}
.foot a small{font-size:12px;color:var(--muted)}
.foot a.next{text-align:right;margin-left:auto}
.foot a span{display:block;font-size:14px;color:var(--muted);margin-top:2px}

.credit{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.credit p{max-width:34rem;font-size:13px;line-height:1.5;color:var(--muted);margin:0;border-top:1px solid var(--rule);padding-top:14px}

/* the list of karikas (bottom sheet on a page; the whole page on the home screen) */
.sheet{position:fixed;inset:0;z-index:40;display:none}
.sheet.open{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;background:var(--paper);border-radius:16px 16px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.sheet.open .panel{transform:none}
.reduce .sheet .panel{transition:none}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--rule);margin:10px auto 0}
.search{margin:12px 16px 4px;display:flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:10px;padding:0 12px;min-height:44px}
.search input{flex:1;border:0;background:none;color:inherit;font:inherit;outline:none;min-height:42px;min-width:0}
.search input::placeholder{color:var(--muted)}
.list{overflow-y:auto;padding:4px 8px calc(16px + env(safe-area-inset-bottom))}
.list h3{font-size:13px;font-weight:600;color:var(--muted);margin:16px 8px 4px;position:sticky;top:0;background:var(--paper);padding:6px 0;z-index:1}
.list a.k{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:9px 8px;border-radius:8px;text-decoration:none;min-height:44px;align-items:baseline}
.list a.k.here{background:var(--lit-bg)}
.list a.k .n{font-weight:600;color:var(--muted)}
.list a.k .s{font-size:16px;line-height:1.35}
.list a.k .s i,.foot a span i,.box i,.fnote i,.cell i{font-family:var(--iastf)}
.list .none{padding:20px 16px;color:var(--muted)}

/* home */
.home h1{font-size:22px;margin:0 0 4px;font-weight:600}
.home .sub{color:var(--muted);margin:0 0 20px;font-size:15px}
.home .cont{display:none;border:1px solid var(--lit);border-radius:10px;padding:12px 14px;text-decoration:none;margin:0 0 18px;min-height:56px}
.home .cont.show{display:block}
.home .cont small{display:block;font-size:12px;color:var(--muted)}
.home .cont b{display:block;font-weight:600}
.home .cont span{display:block;color:var(--muted);font-size:15px}
.home .search{margin:0 0 4px}
.home .list{padding:0;overflow:visible}
.home .list h3{position:static}
.home .about{color:var(--muted);font-size:14px;margin-top:40px;line-height:1.5}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media (max-width:400px){.fr{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);column-gap:6px}.fr .box{font-size:15px;padding:9px 6px}.oval{width:64px}}
@media (max-width:380px){.fr .box{font-size:14px;padding:9px 5px}.fr .box .sa{font-size:13px}.oval{font-size:11.5px}}
.fr.heads .oval{align-self:center}
.oval{padding:8px 2px}
.box .t1{hyphens:manual;-webkit-hyphens:manual}
.box>.sw>.t1::first-letter{text-transform:uppercase}
/* a meaning that has a second reading behind the switch always takes its own line, so a set of them matches */
.box.tile .q:has(.sw){flex-basis:100%}
/* no box ends on a lone word */
.box,.note,.cell,.fnote{text-wrap:pretty}
@media (max-width:380px){.groups.c3 .lb .lh .box{font-size:13.5px;padding:8px 4px}.groups.c3 .lb .lh .box .sa{font-size:12px}}

/* an element with its parts inside it (the Ego and its three forms): one box, its parts divided by dashed rules */
.fparts{margin:0 0 30px}
.pbox{border:1.5px solid var(--chalk);border-radius:4px;background:var(--paper);position:relative;z-index:1}
.pbox .ph{text-align:center;padding:9px 12px 8px;font-size:16px;line-height:1.3}
.pbox .ph .sa{font-style:italic;color:var(--muted)}
.pbox .ph .q{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.pbox .pp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px dashed var(--chalk)}
.pbox .box.part{border:0;border-radius:0;background:none;padding:8px 4px 9px;font-size:15px;min-height:44px}
.pbox .box.part + .box.part{border-left:1px dashed var(--chalk)}
.pbox .box.part .en{font-style:italic}
.pbox .box.part .q{font-size:12.5px}
.pbox .box.part.lit{background:var(--lit-bg)}

/* a karika opens on its verse alone, filling the first screen; the verse rises in once, line by line, the way the
   later stages do as they scroll into view. The words begin below it. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.s-verse .kh,.s-verse .dl,.s-verse .il{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.s-verse .dl{animation-delay:.15s}
.s-verse .il{animation-delay:.45s}
.s-verse .il + .il{animation-delay:.6s}
.reduce .s-verse .kh,.reduce .s-verse .dl,.reduce .s-verse .il{animation:none}
@media (prefers-reduced-motion: reduce){.s-verse .kh,.s-verse .dl,.s-verse .il{animation:none}}

/* a stage's heading, its button and its text rise in with it, once, the way the tiles do */
.stage:not(.s-verse) > h2,.s-words .words-cta,.s-translation .trbox{opacity:0;transform:translateY(8px)}
.stage.arrived > h2,.s-words.arrived .words-cta,.s-translation.arrived .trbox{opacity:1;transform:none;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.s-translation.arrived .trbox{transition-delay:.12s}
.s-words.arrived .words-cta{transition-delay:1s}
.no-js .stage > h2,.no-js .words-cta,.no-js .trbox,.reduce .stage > h2,.reduce .words-cta,.reduce .trbox{opacity:1;transform:none;transition:none}

/* the translation carries the karika's meaning: it sits in its own box */
.trbox{max-width:34rem;border:1px solid var(--lit);border-radius:8px;padding:14px 16px 14px}
.trbox .chip{margin-top:12px}

/* the words follow the verse closely */
.s-verse{padding-bottom:8px}
.s-words{padding-top:18px}
.trbox .chip:empty{display:none}

/* the list of all 72: the logo leads back to the start page; the way into the complete map */
.home .home-back{display:inline-block}
.journey-row{display:block;margin:0 0 18px;padding:14px 16px;border:1px solid var(--lit);border-radius:8px;text-decoration:none;color:var(--ink)}
.journey-row small{display:block;color:var(--muted);font-size:13px}
.journey-row b{display:block;font-size:18px;font-weight:600;color:var(--lit);margin:2px 0}
.journey-row span{display:block;color:var(--muted);font-size:14.5px}