/* toUnknown · Випассана
   Paper shell from tounknown.com, at the app's own type scale — 15px body, not editorial.
   The black artwork from the old site arrives as full-bleed punctuation between paper sections.
   Display: EB Garamond · Interface: Inter — both draw Cyrillic, which the brand faces do not. */

:root{
  --paper:#FBFAF7; --paper-2:#F5F3ED; --stage:#ECE9E1; --white:#fff;
  --ink:#191813; --ink-1:#24231C;
  /* .72 → 7.0:1, .62 → 4.9:1 (the floor for small text), .50 → 3.35:1 which clears the
     large-text threshold. --ink-4 is for display type only — never under 18px. */
  --ink-2:rgba(25,24,19,.72); --ink-3:rgba(25,24,19,.62); --ink-4:rgba(25,24,19,.50);
  --gold:#D9A441; --gold-deep:#7E5A15; --gold-pale:#E8B95A;
  --hair:rgba(24,22,16,.10); --hair-soft:rgba(24,22,16,.055);
  --night:#0B0B10; --night-2:#131319;
  --on-dark:#F5F4F0; --on-dark-2:rgba(245,244,240,.74); --on-dark-3:rgba(245,244,240,.50);

  --ui:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --display:"EB Garamond",Georgia,"Times New Roman",serif;

  --glass:rgba(255,255,255,.62);
  --blur:saturate(180%) blur(22px);
  --rim:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(24,22,16,.04);
  --lift-1:0 1px 2px rgba(43,36,18,.045), 0 3px 10px -4px rgba(43,36,18,.07);
  --lift-2:0 1px 2px rgba(43,36,18,.05), 0 9px 24px -10px rgba(43,36,18,.13);
  --lift-3:0 2px 4px rgba(43,36,18,.055), 0 20px 44px -18px rgba(43,36,18,.19);

  --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-xl:28px; --r-full:999px;
  --spring:cubic-bezier(.32,.72,0,1);
  --out:cubic-bezier(.22,1,.36,1);

  --gut:clamp(20px,4vw,34px);
  --frame:1080px;
  --nav-h:54px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 16px); scrollbar-gutter:stable;
}
body{
  margin:0; color:var(--ink-1); font-family:var(--ui);
  font-size:15px; line-height:1.62; font-weight:400; letter-spacing:-.003em;
  background:
    radial-gradient(72% 42% at 12% 0%,rgba(217,164,65,.075),transparent 60%),
    radial-gradient(60% 40% at 90% 100%,rgba(140,120,190,.055),transparent 58%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper) 64%,var(--paper-2) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block; border:0}
a{color:var(--gold-deep); text-decoration:none}
::selection{background:rgba(217,164,65,.24); color:var(--ink)}
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(217,164,65,.42); border-radius:var(--r-sm)}
.wrap{max-width:var(--frame); margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:640px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────────────────────────────────────────────────── type — app scale ── */
h1,h2,h3,h4{font-family:var(--display); font-weight:400; margin:0; color:var(--ink)}
h1{font-size:clamp(30px,4.4vw,50px); line-height:1.06; letter-spacing:-.018em}
h2{font-size:clamp(22px,2.5vw,31px); line-height:1.14; letter-spacing:-.015em}
h3{font-size:17px; line-height:1.32; letter-spacing:-.008em}
h4{font-size:15px; line-height:1.35}
h1 .dim,h2 .dim{color:var(--ink-4)}
.hero h1 .dim{color:rgba(245,244,240,.52)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.label{
  font:500 10.5px/1.4 var(--ui); letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 14px;
}
.hero .label{color:var(--gold-pale)}
.lede{margin:14px 0 0; max-width:46ch; font-size:16px; line-height:1.6; color:var(--ink-2)}
.lede b{color:var(--ink); font-weight:500}
.pali{font-family:var(--display); font-style:italic; color:var(--gold-deep)}
.serif{font-family:var(--display)}

.head{margin-bottom:clamp(26px,3.2vw,40px)}
.prose{max-width:60ch}
.prose p{margin:0 0 14px; color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink); font-weight:500}

/* ─────────────────────────────────────────────────────────── navigation ── */
.progress{
  position:fixed; top:0; left:0; height:1.5px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .1s linear; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
}
/* #nav, never a bare `nav` — the footer contains a <nav> too, and a bare selector
   pinned that one to the top of the viewport at z-index 60, over the real header. */
#nav{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--gut); border-bottom:.5px solid transparent; background:transparent;
  transition:background-color .4s var(--out), border-color .4s var(--out);
}
#nav.solid{
  background:rgba(251,250,247,.74);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-bottom-color:var(--hair);
}
#nav.on-photo:not(.solid) .brand-name,
#nav.on-photo:not(.solid) .nlink{color:rgba(245,244,240,.84)}
#nav.on-photo:not(.solid) .nlink:hover{background:rgba(255,255,255,.13); color:#fff}
#nav.on-photo:not(.solid) .nlink.here{color:#fff}
#nav.on-photo:not(.solid) .nlang{color:var(--gold-pale)}
#nav.on-photo:not(.solid) .nsep{background:rgba(245,244,240,.2)}
#nav.on-photo:not(.solid) .ncta{
  background:rgba(255,255,255,.13); color:#fff; border:.5px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
#nav.on-photo:not(.solid) .ncta:hover{background:rgba(255,255,255,.22)}
#nav.on-photo:not(.solid) .brand-mark{filter:brightness(0) invert(1)}
#nav.on-photo:not(.solid) .burger i{background:rgba(245,244,240,.9)}

.brand{display:flex; align-items:center; gap:8px; min-height:44px}
.brand-mark{width:19px; height:auto; animation:breathe 7s ease-in-out infinite}
.brand-name{
  font:400 15px/1 var(--display); letter-spacing:.01em; color:var(--ink);
  transition:color .4s var(--out);
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.86}50%{transform:scale(1.06);opacity:1}}

.nlinks{display:flex; align-items:center; gap:1px}
.nlink{
  position:relative; display:inline-flex; align-items:center; min-height:34px; padding:0 10px;
  border-radius:var(--r-full); color:var(--ink-2);
  font:500 12.5px/1 var(--ui); letter-spacing:-.004em;
  transition:color .28s var(--out), background-color .28s var(--out);
}
.nlink:hover{color:var(--ink); background:rgba(24,22,16,.05)}
.nlink.here{color:var(--ink)}
.nlink.here::after{
  content:""; position:absolute; left:50%; bottom:1px; width:12px; height:1.5px;
  margin-left:-6px; border-radius:2px; background:var(--gold);
}
.nsep{width:1px; height:16px; background:var(--hair); margin:0 7px}
.nlang{
  display:inline-flex; align-items:center; min-height:34px; padding:0 9px;
  border-radius:var(--r-full); font:500 11px/1 var(--ui); letter-spacing:.08em;
  color:var(--gold-deep);
}
.nlang:hover{background:rgba(217,164,65,.12)}
.ncta{
  display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
  border-radius:var(--r-full); background:var(--ink); color:var(--paper);
  font:500 12.5px/1 var(--ui); letter-spacing:-.004em;
  transition:transform .28s var(--spring), background-color .28s var(--out);
}
.ncta:hover{background:#000; color:var(--paper)}
.ncta:active{transform:scale(.97)}

.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:0; margin-right:-9px}
.burger i{display:block; width:17px; height:1.5px; border-radius:2px; background:var(--ink);
  transition:transform .4s var(--spring), background-color .4s var(--out)}
.burger i+i{margin-top:5px}

.sheet{
  position:fixed; inset:0; z-index:59; display:none; flex-direction:column;
  padding:calc(var(--nav-h) + 18px) var(--gut) 32px;
  background:rgba(251,250,247,.95);
  -webkit-backdrop-filter:saturate(180%) blur(28px); backdrop-filter:saturate(180%) blur(28px);
  opacity:0; transition:opacity .36s var(--out);
}
.sheet a{
  display:flex; align-items:center; min-height:52px; font-family:var(--display);
  font-size:23px; letter-spacing:-.012em; color:var(--ink);
  border-bottom:.5px solid var(--hair-soft);
}
.sheet a.here{color:var(--gold-deep)}
.sheet-foot{margin-top:auto; display:flex; gap:9px; padding-top:22px}
.sheet-foot a{flex:1; justify-content:center; min-height:48px; font:500 13px/1 var(--ui);
  border:0; border-radius:var(--r-full)}
.sheet-foot .a1{background:var(--ink); color:var(--paper)}
.sheet-foot .a2{background:rgba(24,22,16,.06); color:var(--ink)}
html.nav-open{overflow:hidden}
html.nav-open .sheet{display:flex; opacity:1}
html.nav-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
html.nav-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
html.nav-open #nav{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent}
html.nav-open .burger i{background:var(--ink)}
html.nav-open .brand-name{color:var(--ink)}
html.nav-open .brand-mark{filter:none}
@media (max-width:1000px){ .nlinks{display:none} .burger{display:flex} }

/* ───────────────────────────────────────────────────────────────── hero ── */
.hero{
  position:relative; display:flex; align-items:flex-end; isolation:isolate;
  min-height:min(88svh,760px); padding:calc(var(--nav-h) + 48px) 0 clamp(46px,6vw,80px);
}
.hero.short{min-height:min(58svh,500px)}
/* The dissolve, copied from the app (tu-refined.css:203). A linear ramp over 12% of the
   height is what produced the visible band the owner saw: the eye reads the start of a
   straight alpha ramp as an edge. This is the app's curve — solid to 44%, then six stops
   easing out — so the picture thins gradually into paper across more than half its height
   and never announces where it stopped. */
.hero-art{
  position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--night);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0.86) 73%,
    rgba(0,0,0,0.58) 82%,rgba(0,0,0,0.30) 89%,rgba(0,0,0,0.10) 95%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0.86) 73%,
    rgba(0,0,0,0.58) 82%,rgba(0,0,0,0.30) 89%,rgba(0,0,0,0.10) 95%,rgba(0,0,0,0) 100%);
}
.hero-img{
  position:absolute; inset:-2%; background-size:cover; background-position:center;
  will-change:transform; animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.015) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}}
.hero-veil{position:absolute; inset:0}
.hero-inner{position:relative; max-width:min(620px,100%); color:var(--on-dark)}
.hero-inner h1{color:var(--on-dark)}
.hero-inner .lede{color:var(--on-dark-2); max-width:44ch; font-size:15.5px}
.hero.light .hero-art{background:var(--paper-2)}
.hero.light .hero-inner,.hero.light .hero-inner h1{color:var(--ink)}
.hero.light .hero-inner h1 .dim{color:var(--ink-4)}
.hero.light .label{color:var(--gold-deep)}
.hero.light .hero-inner .lede{color:var(--ink-2)}
.hero.light .credit{color:rgba(25,24,19,.32)}
/* Hero plate. The old cover art carries its own typography — «К НЕИЗВЕСТНОМУ Себе» is set
   on the book itself — so laying a headline over it produced two headlines fighting. The plate
   gives the picture the top of the page uninterrupted and puts the words on paper beneath it,
   which is also how the artwork was meant to be read. */
.plate-hero{padding-top:var(--nav-h)}
.plate-art{
  position:relative; height:min(64svh,540px); overflow:hidden; background:var(--night);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,0.80) 60%,
    rgba(0,0,0,0.46) 72%,rgba(0,0,0,0.24) 82%,rgba(0,0,0,0.07) 92%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,0.80) 60%,
    rgba(0,0,0,0.46) 72%,rgba(0,0,0,0.24) 82%,rgba(0,0,0,0.07) 92%,rgba(0,0,0,0) 100%);
}
.plate-art .hero-img{inset:-2%}
.plate-art .vignette{
  position:absolute; inset:0;
  background:radial-gradient(130% 88% at 50% 44%,transparent 48%,rgba(11,11,16,.34) 100%);
}
.plate-body{padding:clamp(22px,3vw,40px) 0 clamp(40px,5vw,68px); position:relative}
.plate-body .lede{max-width:52ch}
@media (max-width:700px){.plate-art{height:min(46svh,340px)}}

.credit{
  position:absolute; right:var(--gut); bottom:14px;
  font:400 9.5px/1 var(--ui); letter-spacing:.15em; text-transform:uppercase;
  color:rgba(245,244,240,.3);
}
@media (max-width:760px){.credit{display:none}}

/* the breathing orb — the brand's one animated ornament */
.orb{
  position:absolute; width:min(46vw,340px); aspect-ratio:1; border-radius:50%; z-index:-1;
  right:6%; top:26%; pointer-events:none;
  background:radial-gradient(circle,rgba(232,185,90,.34),rgba(217,164,65,.10) 45%,transparent 70%);
  filter:blur(6px); animation:pulse 7.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.14);opacity:1}}
@media (max-width:760px){.orb{right:-14%; top:16%}}

/* ──────────────────────────────────────────────────────────── buttons ── */
.actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border:0; border-radius:var(--r-full); cursor:pointer;
  font:500 13.5px/1 var(--ui); letter-spacing:-.006em; white-space:nowrap;
  transition:transform .26s var(--spring), background-color .28s var(--out),
             box-shadow .36s var(--spring), color .28s var(--out);
}
.btn:active{transform:scale(.97)}
.btn .arw{transition:transform .38s var(--spring)}
.btn:hover .arw{transform:translateX(3px)}
.btn-ink{background:var(--ink); color:var(--paper); box-shadow:var(--lift-1)}
.btn-ink:hover{background:#000; color:var(--paper); box-shadow:var(--lift-2)}
.btn-gold{background:var(--gold); color:#191813;
  box-shadow:0 2px 4px rgba(120,84,16,.09), 0 14px 30px -14px rgba(196,146,48,.5)}
.btn-gold:hover{background:var(--gold-pale); color:#191813}
.btn-quiet{background:rgba(24,22,16,.055); color:var(--ink)}
.btn-quiet:hover{background:rgba(24,22,16,.09); color:var(--ink)}
.btn-glass{background:rgba(255,255,255,.12); color:var(--on-dark);
  border:.5px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.2); color:#fff}
@media (max-width:520px){
  .hero .actions{flex-direction:column; align-items:stretch}
  .hero .actions .btn{width:100%}
}

/* ─────────────────────────────────────────────────────────── sections ── */
section{padding:clamp(52px,7vw,96px) 0}
section.tight{padding-top:0}
section.flush{padding-bottom:0}
.rule{height:.5px; background:var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

/* ────────────────────────────────────────────────────────────── cards ── */
.grid{display:grid; gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:.5px solid var(--hair); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--rim), var(--lift-1);
  transition:transform .4s var(--spring), box-shadow .4s var(--spring);
}
@media (hover:hover){.card.hov:hover{transform:translateY(-2px); box-shadow:var(--rim),var(--lift-3)}}
.card h3{margin:0 0 7px}
.card p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.card .term{display:block; font-family:var(--display); font-style:italic; font-size:13px;
  color:var(--gold-deep); margin-bottom:4px}
.card .n{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:rgba(217,164,65,.14); border:.5px solid rgba(126,90,21,.24);
  color:var(--gold-deep); font:500 12px/1 var(--ui); margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.seal{background:linear-gradient(180deg,rgba(255,250,240,.9),rgba(253,243,224,.72));
  border:.5px solid rgba(126,90,21,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px -16px rgba(196,146,48,.34)}

/* ────────────────────────────────────────────────────────────── stats ── */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hair); border:.5px solid var(--hair); border-radius:var(--r-lg); overflow:hidden}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(255,255,255,.64); padding:18px 12px; text-align:center}
.stat b{display:block; font-family:var(--display); font-size:clamp(23px,2.6vw,30px);
  font-weight:400; color:var(--ink); line-height:1; letter-spacing:-.018em;
  font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:6px; font:400 11.5px/1.4 var(--ui); color:var(--ink-3)}

/* ────────────────────────────────────────────────────────────── two-up ── */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.6vw,52px); align-items:center}
.two.narrow-right{grid-template-columns:1.15fr .85fr}
@media (max-width:860px){.two,.two.narrow-right{grid-template-columns:1fr; gap:28px}}
.figure{border-radius:var(--r-lg); overflow:hidden; border:.5px solid var(--hair);
  box-shadow:var(--lift-2); background:var(--paper-2)}
.figure img{width:100%; height:100%; object-fit:cover}
.figure.tall img{aspect-ratio:4/5}
.figure.wide img{aspect-ratio:16/10}
.figure.plate{max-width:340px}
.figure.ink{background:var(--night); border-color:rgba(255,255,255,.08)}
.figcap{margin:9px 2px 0; font:400 11.5px/1.5 var(--ui); color:var(--ink-3)}

/* ──────────────────────────────────────────────────────── photo band ── */
.band{position:relative; padding:clamp(70px,9vw,124px) 0; text-align:center; isolation:isolate}
.band-art{position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--night);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 5%,
    rgba(0,0,0,0.34) 11%,rgba(0,0,0,0.66) 17%,rgba(0,0,0,0.90) 23%,#000 30%,
    #000 70%,rgba(0,0,0,0.90) 77%,rgba(0,0,0,0.66) 83%,rgba(0,0,0,0.34) 89%,
    rgba(0,0,0,0.10) 95%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 5%,
    rgba(0,0,0,0.34) 11%,rgba(0,0,0,0.66) 17%,rgba(0,0,0,0.90) 23%,#000 30%,
    #000 70%,rgba(0,0,0,0.90) 77%,rgba(0,0,0,0.66) 83%,rgba(0,0,0,0.34) 89%,
    rgba(0,0,0,0.10) 95%,rgba(0,0,0,0) 100%)}
.band-img{position:absolute; inset:0; background-size:cover; background-position:center}
.band-veil{position:absolute; inset:0}
.inscribe{font-family:var(--display); font-size:clamp(20px,2.8vw,34px); line-height:1.3;
  letter-spacing:-.012em; margin:0 auto; max-width:min(30ch,100%); color:#fff;
  text-wrap:balance; text-shadow:0 1px 28px rgba(0,0,0,.5)}
.attrib{margin:14px 0 0; font:500 10px/1 var(--ui); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,206,135,.92)}

/* ────────────────────────────────────────────────────────────── steps ── */
.days{border-top:.5px solid var(--hair)}
.day{display:grid; grid-template-columns:62px 1fr; gap:clamp(14px,2.2vw,28px);
  padding:18px 0; border-bottom:.5px solid var(--hair); align-items:start}
@media (max-width:600px){.day{grid-template-columns:1fr; gap:6px}}
.day .k{font:500 10px/1.4 var(--ui); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); padding-top:5px}
.day h3{margin:0 0 5px}
.day p{margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-2); max-width:56ch}

/* ────────────────────────────────────────────────────── the lineage ── */
.chain{position:relative; padding-left:28px}
.chain::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1.5px;
  background:linear-gradient(180deg,rgba(126,90,21,.55),rgba(126,90,21,.18));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent)}
.node{position:relative; padding-bottom:20px}
.node:last-child{padding-bottom:0}
.node::before{content:""; position:absolute; left:-28px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--paper); border:1.5px solid rgba(126,90,21,.5);
  box-shadow:0 0 0 4px rgba(251,250,247,.9)}
.node.now::before{background:var(--gold); border-color:var(--gold-deep)}
.node .who{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.node .who h3{margin:0}
.node .yrs{font:400 11.5px/1 var(--ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.node p{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:54ch}

/* ─────────────────────────────────────────────────────────── callout ── */
.callout{border-radius:var(--r-lg); padding:18px 20px;
  border:.5px solid rgba(126,90,21,.2); background:rgba(232,185,90,.07)}
.callout p{margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-2)}
.callout .label{margin-bottom:8px}

/* ─────────────────────────────────────────────────────────────── faq ── */
.faq{border-top:.5px solid var(--hair)}
.qa{border-bottom:.5px solid var(--hair)}
.qa summary{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 0; cursor:pointer; list-style:none;
  font:500 14.5px/1.5 var(--ui); color:var(--ink); letter-spacing:-.006em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:""; flex:0 0 11px; width:11px; height:11px; margin-top:6px;
  background:var(--ink-4);
  -webkit-mask:no-repeat center/11px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask:no-repeat center/11px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:transform .4s var(--spring), background-color .28s var(--out)}
.qa[open] summary::after{transform:rotate(135deg); background:var(--gold-deep)}
.qa .a{padding:0 0 18px; max-width:60ch}
.qa .a p{margin:0 0 10px; font-size:14px; line-height:1.66; color:var(--ink-2)}
.qa .a p:last-child{margin-bottom:0}
.qa[open] .a{animation:unfold .44s var(--out) both}
@keyframes unfold{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ──────────────────────────────────────────────────────────── cta band ── */
.cta{border-radius:var(--r-xl); padding:clamp(30px,4vw,52px) clamp(22px,3.4vw,44px);
  text-align:center; background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:.5px solid var(--hair); box-shadow:var(--rim), var(--lift-2)}
.cta .lede{margin-left:auto; margin-right:auto}
.cta .actions{justify-content:center}
.cta .fine{margin:16px 0 0; font:400 12px/1.6 var(--ui); color:var(--ink-3)}

/* ───────────────────────────────────────────────────── page switcher ── */
.next{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:600px){.next{grid-template-columns:1fr}}
.next a{display:block; padding:20px; border-radius:var(--r-lg);
  border:.5px solid var(--hair); background:rgba(255,255,255,.52);
  transition:transform .4s var(--spring), box-shadow .4s var(--spring), background-color .28s var(--out)}
@media (hover:hover){.next a:hover{transform:translateY(-2px); background:rgba(255,255,255,.74);
  box-shadow:var(--lift-2)}}
.next .label{margin-bottom:7px}
.next h3{margin:0 0 5px}
.next p{margin:0; font-size:13px; line-height:1.55; color:var(--ink-2)}

/* ───────────────────────────────────────────────────────────── reveal ── */
/* Content is visible by default and only hides once the script has proved it can bring it
   back. The previous build had it the other way round: .rv started at opacity 0 and waited
   on an IntersectionObserver. When that observer did not fire — a throttled tab, a paused
   compositor, anything — every section below the hero stayed invisible and the whole site
   read as broken. Hiding is now opt-in, gated on html.anim, which JS adds only after the
   sweep is wired up. */
html.anim .rv{opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .7s var(--out), transform .7s var(--spring)}
html.anim .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .brand-mark,.hero-img,.orb{animation:none}
}

/* ══ ВРАТА ═══════════════════════════════════════════════════════════════
   The old site said the same thing twice. `Путь` gave nine instructions —
   «очисть тело от токсинов». `Про что это` answered each one by dissolving it —
   «очищение происходит, когда нет привязанности к загрязнению». Two pages, one
   structure. Here they are one page with a switch, so the reader can see the
   instruction turn into its own undoing. */

.segmented{
  display:inline-grid; grid-auto-flow:column; gap:2px; padding:2px; position:relative;
  border-radius:var(--r-full); background:rgba(24,22,16,.055);
  border:.5px solid var(--hair-soft);
}
.segmented button{
  position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer;
  min-height:44px; padding:0 20px; border-radius:var(--r-full);
  font:500 13px/1 var(--ui); letter-spacing:.01em; color:var(--ink-3);
  transition:color .3s var(--out);
}
.segmented button[aria-selected="true"]{color:var(--ink)}
.segmented .thumb{
  position:absolute; z-index:0; top:2px; bottom:2px; left:2px; border-radius:var(--r-full);
  background:var(--white); box-shadow:0 1px 2px rgba(43,36,18,.10), 0 3px 8px -2px rgba(43,36,18,.12);
  transition:transform .48s var(--spring), width .48s var(--spring);
}
.seg-note{margin:12px 0 0; font:400 12.5px/1.5 var(--ui); color:var(--ink-3); max-width:46ch}

.gate{
  border:.5px solid var(--hair); border-radius:var(--r-xl); overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:var(--rim), var(--lift-1);
}
.gate+.gate{margin-top:12px}
.gate-head{
  display:flex; align-items:center; gap:12px; padding:18px 20px;
  border-bottom:.5px solid var(--hair-soft);
}
.gate-num{
  flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  font:500 11px/1 var(--ui); font-variant-numeric:tabular-nums;
  color:var(--gold-deep); background:rgba(217,164,65,.14);
  border:.5px solid rgba(126,90,21,.24);
}
.gate-head h3{margin:0; flex:1}
.gate-body{padding:4px 20px 6px}

.step{
  display:grid; grid-template-columns:14px 1fr; gap:12px; align-items:start;
  padding:11px 0; border-bottom:.5px solid var(--hair-soft);
}
.step:last-child{border-bottom:0}
.step .dot{
  margin-top:7px; width:5px; height:5px; border-radius:50%; background:var(--gold);
  justify-self:center; transition:transform .5s var(--spring), background-color .4s var(--out);
}
.step b{
  display:block; font:500 14px/1.5 var(--ui); color:var(--ink); letter-spacing:-.005em;
  transition:color .42s var(--out), font-size .42s var(--out);
}
/* the answer is collapsed by grid-template-rows so the height animates, not just the alpha */
.step .said{
  display:grid; grid-template-rows:0fr; opacity:0; will-change:grid-template-rows;
  transition:grid-template-rows .52s var(--spring), opacity .38s var(--out);
}
.step .said>span{overflow:hidden; display:block;
  font-size:13.5px; line-height:1.6; color:var(--ink-2); padding-top:0}

/* unity mode: the instruction steps back to a label, the dissolution opens under it */
[data-mode="unity"] .step b{color:var(--ink-3); font-size:12.5px; font-weight:500;
  text-transform:lowercase}
[data-mode="unity"] .step .said{grid-template-rows:1fr; opacity:1}
[data-mode="unity"] .step .said>span{padding-top:5px}
[data-mode="unity"] .step .dot{background:var(--ink-4); transform:scale(.7)}

/* collapsed by rows, not just alpha — an invisible-but-present line left every gate card
   with a block of dead space under it in path mode */
.gate-close{
  display:grid; grid-template-rows:0fr; margin:0; opacity:0;
  transition:grid-template-rows .5s var(--spring), opacity .42s var(--out) .08s;
}
.gate-close>span{
  overflow:hidden; display:block; padding:0 20px;
  font-family:var(--display); font-style:italic; font-size:15px; line-height:1.5;
  color:var(--gold-deep);
}
[data-mode="unity"] .gate-close{grid-template-rows:1fr; opacity:1}
[data-mode="unity"] .gate-close>span{padding:12px 20px 18px}

/* ══ БЛАГОРОДНЫЙ УМ ══════════════════════════════════════════════════════
   Rebuilt from the old site's one infographic — a 2 MB black PNG with the ten
   pāramī set in it as pixels. Native markup instead: selectable, translatable,
   legible at any size, and it can animate. */

.noble{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px);
  align-items:start}
@media (max-width:860px){.noble{grid-template-columns:1fr; gap:28px}}

.means{list-style:none; margin:16px 0 0; padding:0}
.means li{
  position:relative; padding:8px 0 8px 20px; font-size:14px; color:var(--ink-2);
  border-bottom:.5px solid var(--hair-soft);
}
.means li:last-child{border-bottom:0}
.means li::before{
  content:""; position:absolute; left:2px; top:15px; width:8px; height:1px;
  background:var(--gold); transform-origin:left;
  transition:transform .5s var(--spring);
}
html.anim .means li::before{transform:scaleX(0)}
html.anim .means.in li::before{transform:scaleX(1)}
.means li:nth-child(1)::before{transition-delay:.05s}
.means li:nth-child(2)::before{transition-delay:.11s}
.means li:nth-child(3)::before{transition-delay:.17s}
.means li:nth-child(4)::before{transition-delay:.23s}
.means li:nth-child(5)::before{transition-delay:.29s}
.means li:nth-child(6)::before{transition-delay:.35s}

.parami{position:relative; padding-left:26px; counter-reset:p}
.parami::before{
  content:""; position:absolute; left:4px; top:4px; width:1.5px; height:100%;
  background:linear-gradient(180deg,var(--gold),rgba(126,90,21,.15));
  transform-origin:top; transition:transform 1.5s var(--out);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
}
html.anim .parami::before{transform:scaleY(0)}
html.anim .parami.in::before{transform:scaleY(1)}
.parami li{
  list-style:none; position:relative; counter-increment:p;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-bottom:.5px solid var(--hair-soft);
  transition:opacity .5s var(--out), transform .5s var(--spring);
}
html.anim .parami li{opacity:0; transform:translateX(-8px)}
html.anim .parami.in li{opacity:1; transform:none}
.parami li:last-child{border-bottom:0}
.parami li::before{
  content:""; position:absolute; left:-26px; top:16px; width:9px; height:9px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--gold);
  box-shadow:0 0 0 3px rgba(251,250,247,.95);
}
.parami li b{font:500 14.5px/1.3 var(--ui); color:var(--ink); letter-spacing:-.006em}
.parami li i{font-family:var(--display); font-size:13.5px; color:var(--gold-deep)}
.parami li span{
  flex:1 0 100%; font-size:12.5px; line-height:1.55; color:var(--ink-3); margin-top:1px;
}

/* ══ РЕЗУЛЬТАТ ═══════════════════════════════════════════════════════════ */
.outcomes{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(20px,3vw,44px)}
@media (max-width:700px){.outcomes{grid-template-columns:1fr}}
.outcome{
  display:grid; grid-template-columns:19px 1fr; gap:11px; align-items:start;
  padding:12px 0; border-bottom:.5px solid var(--hair-soft);
}
.outcome .tick{
  margin-top:2px; width:19px; height:19px; border-radius:50%;
  border:1.5px solid rgba(126,90,21,.3); position:relative;
  background:var(--gold); border-color:var(--gold);
  transition:background-color .45s var(--spring), border-color .45s var(--out);
}
html.anim .outcome .tick{background:transparent; border-color:rgba(126,90,21,.3)}
.outcome .tick::after{
  content:""; position:absolute; left:5px; top:4.5px; width:6px; height:9px;
  border:solid var(--ink); border-width:0 1.6px 1.6px 0; transform:rotate(45deg) scale(1);
  transform-origin:center; transition:transform .45s var(--spring);
}
html.anim .outcome .tick::after{transform:rotate(45deg) scale(0)}
.outcome.in .tick{background:var(--gold); border-color:var(--gold)}
html.anim .outcome.in .tick::after{transform:rotate(45deg) scale(1)}
.outcome p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-2)}
.outcome p b{color:var(--ink); font-weight:500}

.triad{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.triad span{
  font-family:var(--display); font-size:clamp(19px,2.6vw,30px); color:var(--ink);
  letter-spacing:-.012em;
}
.triad em{color:var(--gold); font-style:normal; padding:0 2px;
  font-family:var(--display); font-size:clamp(19px,2.6vw,30px)}

/* ══ FOOTER ══════════════════════════════════════════════════════════════ */
footer{
  margin-top:clamp(40px,6vw,80px); padding:clamp(40px,5vw,64px) 0 28px;
  border-top:.5px solid var(--hair);
}
.foot-grid{
  display:grid; grid-template-columns:1.15fr 1.85fr; gap:clamp(28px,5vw,72px);
  padding-bottom:clamp(28px,3.4vw,40px);
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr; gap:28px}}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{margin:0; font-size:13px; line-height:1.6; color:var(--ink-3); max-width:34ch}
.foot-lineage{
  margin-top:10px!important; font-family:var(--display); font-size:12.5px!important;
  line-height:1.7!important; color:var(--ink-3)!important; max-width:30ch!important;
}
.foot-nav{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
@media (max-width:520px){.foot-nav{grid-template-columns:repeat(2,1fr)}}
.foot-nav h4{
  font:500 10px/1 var(--ui); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px;
}
.foot-nav a{
  display:flex; align-items:center; min-height:44px; font-size:13.5px; color:var(--ink-2);
  transition:color .24s var(--out);
}
.foot-nav a:hover{color:var(--ink)}

.foot-cta{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:18px 22px; border-radius:var(--r-lg);
  border:.5px solid rgba(126,90,21,.2); background:rgba(232,185,90,.07);
}
.foot-cta p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-2); max-width:44ch}

.foot-fine{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:22px; padding-top:18px; border-top:.5px solid var(--hair-soft);
}
.foot-fine p{margin:0; font-size:12px; line-height:1.6; color:var(--ink-3); max-width:60ch}
.foot-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* a discrete row of links, not links inside a sentence — they get real targets */
.foot-meta a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink-3)}
.foot-meta a:hover{color:var(--ink)}