:root{
  --ground:#E3E8E2; --band:#D3DDD5; --pale:#F1F4F0; --ink:#121A16; --pine:#17362C; --pine-hover:#21483B; --on-pine:#FFFFFF;
  --serif:"Tiro Devanagari Sanskrit","Noto Serif Devanagari",Georgia,serif; --deva:var(--serif);
  --edge:48px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#E3E8E2;--ink:#121A16}}
:root[data-theme="dark"]{--ground:#E3E8E2;--ink:#121A16}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--ground);scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
:focus-visible{outline:1px solid var(--pine);outline-offset:3px}
p{margin:0}
[lang="sa"]{font-family:var(--deva);color:var(--pine)}

/* header */
.top{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px var(--edge) 0;position:relative;z-index:2}
.brand{text-decoration:none;display:block}
.brand .name{display:block;font-family:"Eczar",Georgia,serif;font-weight:400;font-size:44px;line-height:1.05}
.brand .sub{display:block;font-size:15px;margin-top:6px}
.nav{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;list-style:none;margin:22px 0 0;padding:4px;background:var(--band);border-radius:11px}
.nav a{display:block;text-decoration:none;padding:5px 13px 4px;border-radius:8px}
.nav a:hover{background:var(--pale)}
.nav a[aria-current="page"]{background:var(--pale)}
.burger{display:none;background:none;border:0;font:inherit;color:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* opening */
.open{min-height:calc(100vh - 220px - env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:center;text-align:center;padding:40px var(--edge) 64px}
.circle{width:216px;height:216px;margin:0 auto 34px;border-radius:50%;box-shadow:0 0 0 9px var(--ground),0 0 0 10px var(--pine)}
.circle img{width:100%;height:100%;display:block}
.say{max-width:24em}
h1{font-weight:400;font-size:28px;line-height:1.2;margin:0 0 10px}
.say .line{margin-bottom:24px}
.book{display:inline-block;background:var(--pine);color:var(--on-pine);text-decoration:none;line-height:1;padding:11px 18px 9px;border-radius:11px}
.book:hover{background:var(--pine-hover)}
.when{font-style:italic;margin-top:14px;font-size:15px}

/* namaste: two hands, one filled and one open, meeting as you scroll */
.namaste{display:flex;justify-content:center;padding:112px 0 22px}
.namaste svg{width:84px;height:84px;overflow:visible}
.namaste .hand{fill:var(--pine)}

/* below: one column, one measure */
.page{max-width:44em;margin:0 auto;padding:0 var(--edge)}
.page section{padding-top:72px}
.page h2{font-weight:400;font-style:italic;font-size:16px;margin:0 0 14px}
.page p+p{margin-top:14px}
.letter p{font-size:15.5px;line-height:1.75;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.letter .salute{margin-bottom:22px}
.offer+.offer{margin-top:26px}
.offer h3{font-weight:400;font-size:19px;margin:0 0 2px}
.offer .price{margin-top:6px}
.words{font-size:17px;line-height:1.9}
.words [lang="sa"]{font-size:19px}
.quote{font-size:19px;font-style:italic;line-height:1.5}
.ph{color:var(--pine);font-style:italic}
.close{text-align:center;padding-top:96px!important}
.close .when{margin-top:12px}

/* philosophy: atha, then three ideas, each with what it looks like in class */
.path{margin-top:104px;background:var(--band);padding:92px var(--edge) 100px}
.path .page{padding:0}
.path h2{font-weight:400;font-style:italic;font-size:16px;margin:0 0 18px}
.atha-row{display:flex;flex-direction:column;align-items:center;text-align:center;margin:30px 0 22px}
.atha-row svg{margin-bottom:18px}
.path h2.center{text-align:center;font-style:normal;font-size:20px}
.atha-row .sa{font-size:44px;line-height:1.05}
.atha-row .say{font-style:italic;font-size:13px;color:var(--pine);margin:6px 0 14px}
.atha-row .en{font-size:20px}
.path svg{overflow:hidden}
.path svg *{fill:none;stroke:var(--pine);stroke-width:1.1;vector-effect:non-scaling-stroke}
.path svg .fill{fill:var(--pine);stroke:none}
.path svg.ripple{width:84px;height:84px}
.path .lead{font-size:15.5px;line-height:1.75;text-align:center;max-width:32em;margin:0 auto 72px}
.idea{display:grid;grid-template-columns:84px 170px minmax(0,1fr);gap:0 32px;padding:34px 0;border-top:1px solid var(--pine)}
.idea:last-child{border-bottom:1px solid var(--pine)}
.idea svg{width:84px;height:84px;display:block}
.idea svg *{fill:none;stroke:var(--pine);stroke-width:1.1;vector-effect:non-scaling-stroke}
.idea svg .fill{fill:var(--pine);stroke:none}
.idea .num{font-size:19px;line-height:1;color:var(--pine);margin-bottom:8px}
.idea .sa{font-size:32px;line-height:1.1}
.idea .say{font-style:italic;font-size:13px;color:var(--pine);margin:6px 0 14px;white-space:nowrap}
.idea .en{font-size:20px}
.idea .life{font-size:15.5px;line-height:1.7;margin-bottom:14px}
.idea .cls{font-size:15.5px;line-height:1.7}
.idea .cls i{color:var(--pine)}
.runner{offset-path:path('M42 12 C62 12 74 24 74 42 C74 60 62 72 42 72 C22 72 10 60 10 42 C10 24 22 12 42 12');offset-rotate:0deg}
.flow{offset-rotate:0deg;transform:scale(0)}
.beam{transform-origin:42px 56px;transform-box:view-box}
.ripple .rg{transform-origin:42px 42px;transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .flow{animation:flow 6.5s ease-in-out infinite}
  @keyframes flow{0%{offset-distance:0%;transform:scale(1)}70%{offset-distance:100%;transform:scale(1)}78%,100%{offset-distance:100%;transform:scale(0)}}
  .beam{animation:beam 12s ease-in-out infinite}
  @keyframes beam{0%,30%,100%{transform:rotate(0)}12%{transform:rotate(-7deg)}55%,85%{transform:rotate(0)}68%{transform:rotate(7deg)}}
  .ripple .rg{animation:ripple 9s linear infinite}
  .ripple .rg:nth-child(2){animation-delay:-3s}.ripple .rg:nth-child(3){animation-delay:-6s}
  @keyframes ripple{from{transform:scale(.3)}to{transform:scale(4.3)}}
  .runner{animation:run 14s linear infinite}
  @keyframes run{to{offset-distance:100%}}
}

.ways{font-size:17px;line-height:1.7}
footer{align-items:baseline;max-width:44em;margin:0 auto;padding:96px var(--edge) 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:15px}

.view[hidden]{display:none}
.danda{text-align:center;color:var(--pine);font-size:20px;line-height:1;margin-top:34px!important}
.letter .danda{text-align:center!important}
.poems{max-width:30em;margin:0 auto;padding:96px var(--edge) 0}
.poems h1{font-weight:400;font-size:28px;margin:0 0 10px}
.poems .intro{font-style:italic;margin-bottom:24px}
.poem{padding-top:72px}
.shot{margin:96px 0 0;padding:0}
.shot img{display:block;width:100%;height:auto;border-radius:11px;background:var(--band)}
.shot.wide{margin-left:-90px;margin-right:-90px}
.shot figcaption{font-style:italic;font-size:14px;color:var(--pine);margin-top:10px}
.shot + .poem{padding-top:40px}
@media (max-width:860px){.shot.wide{margin-left:0;margin-right:0}.shot{margin-top:72px}}
.poem h2{font-weight:400;font-size:20px;margin:0 0 18px}
.poem .lines{white-space:pre-wrap;font-size:16px;line-height:1.75;margin:0}
.stub{padding:22vh var(--edge)}
.stub h1{margin-bottom:8px}


/* shared page head */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.head{max-width:34em;margin:0 auto;padding:72px var(--edge) 8px;text-align:center}
.head h1{font-weight:400;font-size:30px;margin:0 0 12px}
.head p{font-size:16px;line-height:1.7}
.portrait{display:block;width:min(300px,70vw);height:auto;border-radius:11px;margin:0 auto 30px}
.prose{padding-top:64px}
.prose p{font-size:15.5px;line-height:1.75;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.draft{font-style:italic;color:var(--pine);text-align:left!important}
.band-more{text-align:center;margin-top:44px}
/* classes */
.offers2{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:56px}
.offer2{background:var(--band);border-radius:11px;padding:26px 28px 30px;display:flex;flex-direction:column;align-items:flex-start}
.cardmark{width:44px;height:44px;margin-bottom:14px}
.cardmark *{fill:none;stroke:var(--pine);stroke-width:1.1;vector-effect:non-scaling-stroke}
.offer2 .book{margin-top:auto}
.page section.offer2{padding-top:26px}
.offer2 h2{margin-top:0}
@media (min-width:960px){.offers2{margin-left:-72px;margin-right:-72px}}
.offer2 h2{font-style:normal!important;font-size:21px!important;margin-bottom:16px!important}
.training dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 24px}
.offer2 dl{margin:0 0 26px}
.offer2 dt{font-size:14px;color:var(--pine);margin-top:14px}
.offer2 dt:first-child{margin-top:0}
.offer2 dd{font-size:15.5px;line-height:1.6}
.yours{display:block;margin-top:6px}
.yours span{display:block}
.training dt{color:var(--pine)}
.offer2 dd,.training dd{margin:0}
.localtime{font-style:italic}
.times{width:100%;border-collapse:collapse;margin:22px 0 10px;font-size:15.5px}
.times th{font-weight:400;color:var(--pine);text-align:left;padding:0 0 8px;font-size:14px}
.times td{padding:7px 0;border-top:1px solid var(--band)}
.times tr.you td{color:var(--pine)}
/* philosophy page */
.phil{margin-top:56px}
.verse{margin:0 0 22px;padding:0}
.verse .v-deva{font-size:18px;line-height:1.7;color:var(--pine)}
.verse .v-tr{font-style:italic;font-size:14.5px;line-height:1.6;margin-top:6px}
.verse .v-en{font-size:15.5px;line-height:1.65;margin-top:6px}
.verse figcaption{font-size:13.5px;font-style:italic;margin-top:6px;color:var(--pine)}
.phil .atha-row + .verse{text-align:center;max-width:30em;margin:0 auto 18px}
.phil .idea{grid-template-columns:170px minmax(0,1fr)}
.phil .idea .txt p:not([class]){font-size:15.5px;line-height:1.75}
.artha{text-align:center}
.artha p{text-align:center!important}
.artha [lang="sa"]{color:var(--pine)}
/* about */
.training{padding-top:64px}
.training h2{margin-top:36px}
.training dd span{display:block;font-size:14.5px;font-style:italic}

.envelope{display:block;width:40px;height:30px}
.envelope svg{width:100%;height:100%;overflow:visible}
.envelope path,.envelope rect{fill:var(--ground);stroke:var(--pine);stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.envelope .sheet{fill:var(--pale);transform:translateY(16px);transition:transform .45s ease}
.envelope .flap{fill:none;transform-box:view-box;transform-origin:20px 11px;transform:scaleY(-1);transition:transform .35s ease}
.envelope:hover .flap,.envelope:focus-visible .flap{transform:scaleY(1)}
.envelope:hover .sheet,.envelope:focus-visible .sheet{transform:translateY(-5px);transition-delay:.12s}

/* art page: image left, poem right */
.art{max-width:1040px!important}
.art h1,.art .intro{max-width:30em}
.art .opener{max-width:22em;margin:72px auto 0;text-align:center;padding:0}
.art .opener .lines{text-align:center}
.pair{display:grid;gap:0 64px;margin-top:128px}
.pair.tall{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.pair.tall.narrow{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.pair.wide{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.pair{align-items:center}
.pair .shot{position:relative}
.pair .shot figcaption{position:absolute;left:0;top:100%;margin-top:10px}
.pair.flip .shot{order:2}
.pair.tall.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pair.tall.narrow.flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.pair.wide.flip{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.pair.flip .poem{justify-self:end}
.pair.flip .shot figcaption{left:auto;right:0}
.pair .shot{margin:0}
.pair .poem{padding:0}
.pair.big .lines{font-size:19px;line-height:1.65}
.pair.big h2{font-size:22px}
.art > .danda{margin-top:120px!important}
@media (max-width:860px){
  .pair,.pair.tall,.pair.tall.narrow,.pair.wide,.pair.flip,.pair.tall.flip,.pair.tall.narrow.flip,.pair.wide.flip{grid-template-columns:1fr;gap:44px;margin-top:88px}
  .pair.flip .shot{order:0}
  .pair.flip .poem{justify-self:start}
  .pair.flip .shot figcaption{left:0;right:auto}
}
/* footer mark */
.mark{width:26px;height:26px;display:block}
.mark circle{fill:none;stroke:var(--pine);stroke-width:1.1;vector-effect:non-scaling-stroke}
.mark .m-dot{fill:var(--pine);stroke:none}
footer{align-items:center!important}

@media (max-width:860px){
  .offers2{grid-template-columns:1fr;gap:56px}
  .phil .idea{grid-template-columns:1fr}
  .head{padding-top:48px}

  .idea{grid-template-columns:64px minmax(0,1fr);gap:0 18px}
  .idea svg{width:64px;height:64px}
  .idea .txt{grid-column:1 / -1;margin-top:18px}


  :root{--edge:22px}
  body{font-size:16px}
  .top{padding-top:28px}
  .brand .name{font-size:38px}
  .nav{margin-top:18px;font-size:15px}
  .nav a{padding:5px 9px 4px}
  .open{min-height:0;padding:48px var(--edge) 24px}
  .circle{width:180px;height:180px}
}

.view[hidden]{display:block}
