@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/wix-madefor-display-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/wix-madefor-display-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(assets/fonts/caveat-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(assets/fonts/caveat-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#f4f2ea;--paper-deep:#ebe8dc;--ink:#0e0e0e;--ink-soft:#3a3a36;
  --cobalt:#2355c5;--coral:#f88971;--lime:#cfed3f;--pink:#f4bccb;
  --line:3px solid var(--ink);
  --font:'Wix Madefor Display','Helvetica Neue',Arial,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Comp frame unit: 1px of the 1376px-wide approved comp. */
  --u:calc(100vw / 1376);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
main{isolation:isolate;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:has(dialog[open]){overflow:hidden}
::selection{background:var(--lime);color:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(40px,5.2vw,76px);line-height:1.08}
h3{font-size:clamp(24px,2.1vw,30px);line-height:1.15}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;z-index:100;left:12px;top:12px;transform:translateY(-200%);padding:10px 16px;background:var(--lime);border:var(--line);border-radius:999px;font-weight:700;text-decoration:none}
.skip-link:focus{transform:none}
.container{width:min(1240px,calc(100% - 64px));margin-inline:auto}
.section{padding-block:clamp(72px,9vw,136px)}

/* Pills: filled marker fields and outlined pen loops */
.pill{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 26px;border-radius:999px;font-weight:600;line-height:1.2;text-decoration:none;border:2px solid transparent;transition:transform .25s var(--ease),background-color .2s,outline-color .2s}
.pill svg{width:20px;height:20px}
.pill-lime{background:var(--lime);color:var(--ink)}
.pill-lime:hover{transform:translateY(-2px);outline:2px solid var(--ink);outline-offset:3px}
.pill-outline{border-color:var(--ink);background:transparent}
.pill-outline:hover{background:var(--ink);color:var(--paper)}

/* Marker highlight cut from the swatch plate */
.sw-1{--swatch:url(assets/marker/swatch-1.png)}.sw-2{--swatch:url(assets/marker/swatch-2.png)}.sw-3{--swatch:url(assets/marker/swatch-3.png)}
.sw-4{--swatch:url(assets/marker/swatch-4.png)}.sw-5{--swatch:url(assets/marker/swatch-5.png)}.sw-6{--swatch:url(assets/marker/swatch-6.png)}
.mark{position:relative;z-index:0;white-space:nowrap}
.mark::before{content:'';position:absolute;z-index:-1;left:-.22em;right:-.34em;top:.22em;bottom:-.08em;background:var(--swatch) center/100% 100% no-repeat;transform-origin:left center;transition:transform .9s var(--ease)}
.telegram .mark::before{top:.04em}



/* Header */
.site-header{position:absolute;inset:0 0 auto;z-index:10;height:calc(102 * var(--u))}
.brand{display:inline-flex;align-items:center;gap:calc(10 * var(--u));font-weight:700;letter-spacing:-.02em;text-decoration:none;line-height:1}
.site-header .brand{position:absolute;left:calc(40 * var(--u));top:calc(30 * var(--u));font-size:calc(38 * var(--u));gap:calc(40 * var(--u))}
.site-header .brand-mark{width:calc(48 * var(--u));height:calc(48 * var(--u))}
.brand-mark{width:1.15em;height:1.15em;color:var(--ink)}
.desktop-nav{position:absolute;right:calc(244 * var(--u));top:calc(38 * var(--u));display:flex;gap:calc(36 * var(--u));font-size:max(14px,calc(19.5 * var(--u)));font-weight:500}
.desktop-nav a{text-decoration:none;padding-block:4px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.desktop-nav a:hover{background-size:100% 2px}
.header-join{position:absolute;left:calc(1153 * var(--u));top:calc(26 * var(--u));width:calc(182 * var(--u));height:calc(54 * var(--u));min-height:0;padding:0;font-size:max(14px,calc(18 * var(--u)));font-weight:500}
.menu-toggle{display:none}
.mobile-nav{display:none}


/* Hero: the approved comp frame. Noise on the left, quiet on the right. */
.hero{position:relative;height:calc(676 * var(--u));background:var(--paper)}
.hero-band{position:absolute;left:0;right:0;top:calc(106 * var(--u));height:calc(560 * var(--u));overflow:hidden}
.hero-art{position:absolute;inset:0}
.hero-drawing{width:calc(100% + 8px);max-width:none;height:100%;object-fit:cover;object-position:0 50%}
.noise{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.noise li{position:absolute;left:var(--x);top:var(--y);font-family:var(--hand);font-weight:600;font-size:calc(27 * var(--u) * var(--s,1));line-height:1;white-space:nowrap;padding:.08em .22em .14em;background:var(--paper);border-radius:.5em;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r));filter:opacity(var(--o,1));will-change:transform}
.hero-copy{position:absolute;left:67.44%;top:calc(218 * var(--u));width:calc(410 * var(--u))}
.hero h1{font-size:calc(50 * var(--u));line-height:1.12;letter-spacing:-.025em;text-wrap:initial}
.hero-sub{margin-top:calc(22 * var(--u));color:#2a0d0a;font-size:max(15px,calc(21.5 * var(--u)));line-height:1.36;font-weight:500;max-width:21em}
.hero-cta{margin-top:calc(17 * var(--u));width:calc(198 * var(--u));height:calc(56 * var(--u));min-height:44px;padding:0;font-size:max(15px,calc(20 * var(--u)));font-weight:500}
.hero-cta:hover{outline-color:var(--ink)}

/* Recognition, with who it is for right under it */
.recognition{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,120px)}
.recognition h2{font-size:clamp(38px,4.6vw,66px)}
.recognition-copy{font-size:clamp(18px,1.45vw,21px);line-height:1.6;max-width:36em;padding-top:12px}
.recognition-copy p+p{margin-top:18px}
.fit{grid-column:1/-1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);padding-top:clamp(36px,4vw,56px);border-top:var(--line)}
.fit-col h3{margin-bottom:22px}
.fit-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.fit-list li{display:flex;align-items:flex-start;gap:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.45}
.fit-list svg{width:30px;height:30px;padding:5px;margin-top:-3px;border-radius:50%;background:var(--lime);stroke-width:3}
.fit-no .fit-list svg{background:var(--pink)}

/* Section heads */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(40px,5vw,72px)}
.section-head h2{flex:1 1 auto}
.section-head>p{flex:0 1 26em;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-soft);text-align:right;padding-bottom:8px}

/* How it works: one line that untangles as you read it */
.how{background:var(--ink);color:var(--paper);padding-bottom:clamp(72px,8vw,120px)}
.how .section-head>p{color:#cfccc2}
.how .mark{color:var(--ink)}
.untangle{position:relative;height:clamp(150px,22vw,330px);margin:clamp(-20px,-1vw,0px) 0 clamp(16px,2vw,32px)}
.untangle img{width:100%;height:100%;object-fit:cover;filter:invert(1);mix-blend-mode:screen}
.stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,36px);counter-reset:none}
.stages li{padding-top:22px;border-top:2px solid #5d5b55}
.stage-n{display:inline-block;margin-bottom:14px;padding:.14em .4em .3em .3em;font-size:clamp(44px,4.4vw,64px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);--sw:url(assets/marker/swatch-2.png);background:var(--sw) 50% 40%/118% 135% no-repeat,var(--sw) 40% 60%/104% 120% no-repeat}
.stages li:nth-child(2) .stage-n{--sw:url(assets/marker/swatch-6.png)}
.stages li:nth-child(3) .stage-n{--sw:url(assets/marker/swatch-3.png)}
.stages li:nth-child(4) .stage-n{--sw:url(assets/marker/swatch-5.png)}
.stages h3{margin-bottom:10px;font-size:clamp(20px,1.7vw,24px)}
.stages p{font-size:16px;line-height:1.55;color:#cfccc2;max-width:22em}

/* What's inside: one big featured practice, then an editorial list */
.featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(36px,4vw,56px);border-block:var(--line)}
.featured-title{font-size:clamp(76px,12vw,184px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.featured-title .mark::before{top:.3em;bottom:-.02em}
.featured-lead{margin-bottom:14px;font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.25}
.featured-copy>p:not(.featured-lead){font-size:clamp(18px,1.4vw,20px);line-height:1.6;max-width:34em}
.featured-copy>p.featured-story{margin-bottom:10px}
.featured-copy>p.featured-turn{font-weight:600}
.status-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.status-list li{display:flex;align-items:baseline;gap:12px;font-size:16px;font-weight:600}
.status-list li::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--coral);outline:2px solid var(--ink);transform:translateY(-1px)}
.practices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px)}
.practices>li{padding-block:clamp(28px,3.4vw,44px);border-bottom:2px solid var(--ink)}
.practices h3{margin-bottom:14px;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.03em}
.practices p{max-width:30em;font-size:clamp(17px,1.3vw,19px);line-height:1.55}
/* The last block is the umbrella: it spans both columns, title left and text right */
.practices>li:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px);align-items:baseline;border-bottom:0}
.practices>li:last-child h3{margin-bottom:0}
/* Community map: the Telegram sections as hand-placed marker stickers, then a two-step path */
.practices>li.community{align-items:start;padding-block:clamp(36px,4.4vw,60px)}
.practices>li.community h3{font-size:clamp(40px,5.2vw,78px);line-height:1}
.community-map{display:grid;gap:18px}
.practices .topics-label{margin:0;font-size:17px;font-weight:700;color:var(--ink-soft)}
.topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px 14px}
.topics li{position:relative;padding:.42em 1em .52em;font-size:clamp(19px,2vw,27px);font-weight:700;line-height:1.1;white-space:nowrap;background:url(assets/marker/swatch-4.png) 50% 38%/112% 140% no-repeat;transform:rotate(-2deg)}
.topics li::before{content:'#';margin-right:.15em;opacity:.45}
.topics li:nth-child(2){background-image:url(assets/marker/swatch-6.png);transform:rotate(1.5deg)}
.topics li:nth-child(3){background-image:url(assets/marker/swatch-3.png);transform:rotate(-1deg)}
.topics li:nth-child(4){background-image:url(assets/marker/swatch-2.png);transform:rotate(2deg)}
.topics li:nth-child(5){background-image:url(assets/marker/swatch-6.png);transform:rotate(-1.5deg)}

/* Telegram: one drenched cobalt field */
.telegram{background:var(--cobalt);color:#fff;padding-block:clamp(72px,9vw,128px);border-block:var(--line)}
.telegram :focus-visible{outline-color:var(--lime)}
.telegram-layout{display:grid;grid-template-columns:1fr minmax(0,.95fr);gap:clamp(40px,7vw,110px);align-items:center}
.telegram-copy h2{margin-bottom:26px}
.telegram-copy h2 .mark{color:var(--ink)}
.telegram-copy>p{font-size:clamp(18px,1.45vw,21px);max-width:28em}
.check-list{list-style:none;margin:28px 0 34px;padding:0;display:grid;gap:12px;font-size:18px;font-weight:500}
.check-list li{display:flex;align-items:center;gap:12px}
.check-list svg{width:26px;height:26px;padding:3px;border-radius:50%;background:var(--lime);color:var(--ink);stroke-width:3}
.text-link{display:inline-flex;align-items:center;gap:14px;font-size:19px;font-weight:600;text-decoration:none;padding-bottom:6px;background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 3px no-repeat;transition:gap .3s var(--ease);min-height:44px}
.text-link:hover{gap:22px}
.channel{background:var(--paper);color:var(--ink);border:var(--line);border-radius:44px 56px 40px 60px / 56px 40px 60px 44px;padding:24px 0 8px;transform:rotate(1.2deg)}
.channel-top{display:flex;align-items:center;gap:14px;padding:0 26px 18px;border-bottom:2px solid var(--ink)}
.channel-top strong{display:block;font-size:18px;line-height:1.3}
.channel-top div span{font-size:14px;color:var(--ink-soft)}
.channel-avatar{width:46px;height:46px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);display:grid;place-items:center}
.channel-avatar svg{width:22px;height:22px}
.channel-tg{margin-left:auto;color:var(--cobalt);width:28px;height:28px}
.channel-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 26px 12px;font-weight:700;font-size:15px}
.channel-label span{font-weight:400;font-size:14px;color:var(--ink-soft)}
.tabs{display:flex;gap:8px;padding-inline:22px}
.tabs button{flex:1;min-height:44px;padding:8px 10px;border:2px solid var(--ink);border-radius:999px;background:transparent;font-size:15px;font-weight:500;transition:background-color .2s}
.tabs button:hover{background:var(--pink)}
.tabs button[aria-selected=true]{background:var(--lime);font-weight:700}
.post{margin:16px 22px 14px;padding:24px 24px 22px;background:#fff;border:2px solid var(--ink);border-radius:26px;min-height:330px}
.post h3{font-size:26px;margin:4px 0 12px}
.post p,.post ol{font-size:16px;line-height:1.55}
.post ol{padding-left:22px;margin:14px 0}
.post li+li{margin-top:6px}
.post-note{padding:10px 14px;border-radius:14px;background:var(--paper);color:var(--ink-soft)}


/* Who leads */
.author{padding-bottom:clamp(32px,4vw,56px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:start}
.author-name h2{font-size:clamp(36px,4.2vw,60px)}
.author-sign{margin-top:18px;font-family:var(--hand);font-size:clamp(64px,8vw,124px);font-weight:600;line-height:.9;transform:rotate(-4deg);transform-origin:left}
.author-photo{position:relative;isolation:isolate;margin:clamp(24px,3vw,40px) 0 0;width:min(100%,420px);transform:rotate(-1.5deg)}
.author-photo::before{content:'';position:absolute;inset:0;z-index:-1;background:url(assets/marker/fill-coral.jpg) center/cover var(--coral);transform:translate(12px,10px) rotate(4deg)}
.author-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:var(--line)}
.author-copy{font-size:clamp(18px,1.45vw,21px);line-height:1.6;max-width:36em;padding-top:10px}
.author-copy p+p{margin-top:18px}
.author-quote{margin:32px 0 0;padding:22px 0 0;border-top:var(--line)}
.author-quote p{font-size:clamp(26px,2.4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.02em}

/* FAQ */
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px)}
.faq-head h2{font-size:clamp(36px,4.2vw,60px)}
.faq-head p{margin-top:22px;font-size:19px;color:var(--ink-soft)}
.faq-list{border-top:var(--line)}
details{border-bottom:2px solid var(--ink)}
summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 2px;list-style:none;cursor:pointer;font-size:19px;font-weight:600;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary svg{width:30px;height:30px;padding:5px;border:2px solid var(--ink);border-radius:50%;transition:transform .3s var(--ease),background-color .2s}
summary:hover svg{background:var(--lime)}
details[open] summary svg{transform:rotate(45deg);background:var(--pink)}
details p{padding:0 48px 24px 2px;font-size:17px;line-height:1.6;max-width:42em}

/* Join: the calm drawing carries the last call */
.join-band{position:relative;display:grid;place-items:center;min-height:calc(1188 / 2800 * 100vw);overflow:hidden}
.join-art{position:absolute;inset:0}
.join-art img{width:100%;height:100%;object-fit:cover}
.join-call{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;width:min(520px,calc(100% - 48px));text-align:center;padding-block:48px}
.join-call h2{font-size:clamp(48px,6.4vw,96px);line-height:.98;letter-spacing:-.04em}
.join-cta{min-height:64px;padding-inline:34px;font-size:20px;border-color:var(--ink)}
.join-paid{max-width:26em;margin:0;font-size:16px;font-weight:600;line-height:1.45}
.membership{font-weight:800}
.invitation-note{font-size:15px;font-weight:600;scroll-margin-top:200px}

/* Footer */
.site-footer{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:center;padding:40px 0 112px}
.site-footer .brand{font-size:28px;gap:10px}
.footer-line{justify-self:end;font-size:19px;font-weight:500}
.footer-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:15px;color:var(--ink-soft)}
.back-to-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;text-decoration:none;font-weight:600;color:var(--ink)}
.back-to-top svg{width:18px;height:18px;transform:rotate(-90deg)}

.footer-docs{display:flex;flex-wrap:wrap;gap:0 24px}
.footer-docs a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:4px}
.footer-docs a:hover,.footer-docs a[aria-current]{color:var(--ink)}

/* Document pages: privacy, consent, offer */
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.doc-top .brand{font-size:27px;gap:9px;min-height:44px}
.doc{width:min(820px,calc(100% - 64px));margin:clamp(24px,4vw,56px) auto clamp(56px,8vw,112px)}
.doc-kicker{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.doc h1{font-size:clamp(38px,5.6vw,76px);line-height:1.04;letter-spacing:-.03em}
.doc-date{margin:16px 0 0;font-size:15px;color:var(--ink-soft)}
.doc-lead{margin:22px 0 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;line-height:1.55}
.doc-sec{margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:var(--line)}
.doc h2{margin-bottom:16px;font-size:clamp(22px,2.2vw,28px);line-height:1.2}
.doc p{margin:0 0 12px;font-size:17px;line-height:1.65}
.doc ul{margin:0 0 12px;padding-left:1.3em;font-size:17px;line-height:1.65}
.doc li{margin-bottom:6px}
.doc a{text-underline-offset:3px}
.doc-reqs{line-height:1.8!important}

/* Sticky call to action: a quiet bar that appears once the hero's own button is gone */
.sticky-cta{position:fixed;z-index:20;left:50%;bottom:16px;display:flex;align-items:center;gap:20px;padding:8px 8px 8px 24px;background:var(--paper);border:var(--line);border-radius:999px;transform:translateX(-50%);transition:transform .35s var(--ease),visibility .35s}
.sticky-cta span{font-size:15px;white-space:nowrap}
.sticky-cta .sn-short{display:none}
.sticky-cta .pill{min-height:46px;font-size:16px}
.sticky-cta.is-hidden{transform:translate(-50%,160%);visibility:hidden}

/* Dialogs */
dialog{width:min(540px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:44px 40px 36px;border:var(--line);border-radius:36px 48px 40px 52px / 48px 36px 52px 40px;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(14,14,14,.5)}
dialog h2{font-size:34px;margin-bottom:18px}
dialog p{font-size:17px;line-height:1.6;margin-bottom:16px}
.dialog-close{position:absolute;right:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:transparent}
.dialog-close svg{transform:rotate(45deg)}
.dialog-close:hover{background:var(--pink)}


/* Signature motion: the drawing sweeps in, noise words arrive and then drift off as you scroll */
@media (prefers-reduced-motion:no-preference){
  .hero-drawing{-webkit-mask-image:linear-gradient(100deg,#000 45%,transparent 55%);mask-image:linear-gradient(100deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;animation:sweep 1.6s var(--ease) both}
  .noise li{animation:scribble .7s var(--ease) both;animation-delay:calc(.5s + var(--i,0) * 90ms)}
  /* Scroll drift runs on the browser's own scroll timeline, so it stays in step with touch scrolling */
  .noise li{--ddx:-30px;--ddy:calc(-60px - var(--i,0) * 18px)}
  .noise li:nth-child(even){--ddx:30px}
  @supports (animation-timeline:scroll()){
    .noise li{animation:scribble .7s var(--ease) both,drift linear both;animation-delay:calc(.5s + var(--i,0) * 90ms),0s;animation-timeline:auto,scroll(root);animation-range:normal,0px 560px}
  }
  .hero-copy{animation:settle .9s var(--ease) .45s both}
  .js-motion .mark.is-pending::before{transform:scaleX(0)}
  .js-motion .untangle{-webkit-mask-image:linear-gradient(100deg,#000 45%,transparent 55%);mask-image:linear-gradient(100deg,#000 45%,transparent 55%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 2.2s var(--ease),mask-position 2.2s var(--ease)}
  .js-motion .untangle.is-pending{-webkit-mask-position:100% 0;mask-position:100% 0}
}
@keyframes sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes scribble{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes drift{to{translate:var(--ddx) var(--ddy);filter:opacity(0)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

@media (min-width:901px){.hero+.recognition{padding-top:calc(72 * var(--u))}}

/* Below the comp's frame: tablet and phone */
@media (max-width:1100px){
      .recognition,.faq,.author{grid-template-columns:minmax(0,1fr)}
  .telegram-layout{grid-template-columns:minmax(0,1fr)}
  .channel{max-width:560px}
  .featured{grid-template-columns:1fr}
  .stages{grid-template-columns:repeat(3,1fr);row-gap:40px}
}
@media (max-width:900px){
  :root{--u:1px}
  .site-header{position:absolute;height:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
  .site-header .brand{position:static;min-height:44px;font-size:27px;gap:9px}
  .site-footer .brand{min-height:44px}
  .desktop-nav,.header-join{display:none}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
  .menu-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
  .mobile-nav:not([hidden]){display:grid;position:absolute;top:76px;left:16px;right:16px;padding:14px 22px;background:var(--paper);border:var(--line);border-radius:28px}
  .mobile-nav a{padding:12px 0;font-size:20px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--ink)}
  .mobile-nav a:last-child{border:0}
  .section-head{display:block}
  .section-head>p{text-align:left;margin-top:18px}
  .fit{grid-template-columns:1fr}
  .untangle{height:clamp(140px,44vw,220px)}
  .untangle img{object-position:30% 50%}
  .stages{grid-template-columns:1fr;row-gap:28px}
  .stages li{display:grid;grid-template-columns:76px 1fr;column-gap:14px;padding-top:18px}
  .stage-n{grid-row:span 2;margin:0}
  .join-band{min-height:clamp(420px,110vw,560px)}
  .site-footer{grid-template-columns:1fr}
  .footer-line{justify-self:start}
  .back-to-top{margin-left:0}
  .sticky-cta{left:0;right:0;bottom:0;justify-content:space-between;gap:12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 18px;border-width:3px 0 0;border-radius:0;transform:none}
  .sticky-cta.is-hidden{transform:translateY(120%)}
}
@media (max-width:900px) and (orientation:portrait){
  /* Portrait phone and tablet hero: one tall drawing, tangle at the top, the offer on the coral field at the bottom */
  /* The drawing spans the full width of a phone; on a portrait tablet it stops at 760px and fades into the paper */
  .hero{--pw:min(100vw,760px);height:auto;padding-top:66px;background:#f8f2e6}
  .hero-band{position:absolute;top:66px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);bottom:0;left:50%;width:var(--pw);height:auto;transform:translateX(-50%);background:url(assets/plates/portrait-bottom.jpg?v=2) 50% 100%/100% auto no-repeat,url(assets/plates/portrait-mid.jpg?v=2) 0 calc(var(--pw) * 80 / 830)/100% auto repeat-y var(--coral)}
  .hero-art{inset:0 0 auto;width:auto;height:auto}
  .hero-drawing{width:100%;height:auto}
  .noise li{left:var(--mx);top:calc(var(--pw) * var(--my) / 100);font-size:clamp(16px,calc(var(--pw) * .055),24px)}
  .noise li:nth-child(2),.noise .extra{display:none}
  .hero-copy{position:relative;left:auto;top:auto;width:var(--pw);margin-inline:auto;padding:calc(var(--pw) * 1.1) calc(var(--pw) * .1) calc(var(--pw) * .16)}
  .hero h1{font-size:clamp(30px,calc(var(--pw) * .092),50px);line-height:1.02;max-width:9.4em}
  .hero-sub{margin-top:14px;font-size:clamp(15px,calc(var(--pw) * .046),19px);line-height:1.42}
  .hero-cta{margin-top:20px;width:auto;height:auto;min-height:52px;padding:0 32px;font-size:17px;border:2px solid var(--ink)}
}
/* Portrait tablets: the drawing's width follows the screen height so the headline and button stay on the first screen */
@media (min-width:481px) and (max-width:900px) and (orientation:portrait){
  .hero{--pw:min(100vw,760px,max(440px,calc((100svh - 410px) / 1.08)))}
}
/* Landscape phones and small tablets keep the wide desktop composition: tangle left, offer on the coral field right */
@media (max-width:900px) and (orientation:landscape){
  .hero{--u:calc(100vw / 1376)}
  .site-header{padding:10px 16px}
  .menu-toggle{width:44px;height:44px}
  .hero-sub{font-size:max(13px,calc(21.5 * var(--u)))}
  .hero-cta{min-height:40px;font-size:max(14px,calc(20 * var(--u)))}
  .noise li{font-size:max(13px,calc(27 * var(--u) * var(--s,1)))}
  .noise .extra{display:none}
}
@media (max-width:900px) and (orientation:portrait) and (max-height:760px){
  .hero-copy{padding-top:calc(var(--pw) * 1.08)}
  .hero-sub{margin-top:10px}
  .hero-cta{margin-top:14px;min-height:48px}
}
@media (max-width:700px){
  .practices{grid-template-columns:1fr}
  .practices>li:last-child{display:block;border-bottom:2px solid var(--ink)}
  .practices>li:last-child h3{margin-bottom:14px}
}
@media (max-width:600px){
  .doc{width:calc(100% - 36px)}
  .container{width:calc(100% - 36px)}
  .join-cta{font-size:18px;padding-inline:24px;gap:10px}
  .join-cta{max-width:100%}
  .sticky-cta span{font-size:14px;white-space:normal;line-height:1.3}
  .sticky-cta span strong{display:block}
  .sticky-cta .sn-long{display:none}
  .sticky-cta .sn-short{display:inline}
  .channel{transform:none;border-radius:32px}
  .tabs{padding-inline:14px;gap:6px}
  .tabs button{flex:auto;font-size:13px;padding:8px 10px}
  .post{margin-inline:14px;padding:20px 18px;min-height:370px}
  .channel-top,.channel-label{padding-inline:18px}
  .channel-label{display:block}
  .channel-label span{display:block}
  details p{padding-right:8px}
  dialog{padding:56px 24px 28px}
}