@font-face{font-family:SBSans;src:url('assets/SB_Sans_Interface.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:SBSans;src:url('assets/SB_Sans_Interface_Bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Kosmos;src:url('assets/Kosmos129.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f6f5f1;--ink:#292727;--red:#e5201f;--muted:#77736e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-padding-top:0}body{margin:0;background:var(--paper);color:var(--ink);font-family:SBSans,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid currentColor;outline-offset:6px}::selection{background:var(--red);color:white}.skip{position:fixed;z-index:100;left:15px;top:-100px;background:var(--ink);color:white;padding:15px}.skip:focus{top:15px}.header{position:absolute;z-index:10;top:0;left:0;width:100%;height:115px;padding:35px 6%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.12;font-weight:700;letter-spacing:-.3px}.brand img{width:43px;height:46px;object-fit:contain}.header-link{font-size:14px;display:flex;align-items:center;gap:30px}.header-link span{font-size:25px}.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:20;display:grid;gap:0;background:rgba(246,245,241,.94);border-radius:30px;padding:9px 0;box-shadow:0 0 0 1px #29272710}.rail a{display:grid;place-items:center;width:36px;height:36px;font-size:12px;color:#77736e}.rail a span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;transition:background .2s,color .2s}.rail a[aria-current="true"] span,.rail a:hover span{background:var(--red);color:#fff}.slide{min-height:100svh;position:relative;scroll-snap-align:start;scroll-snap-stop:always;padding:55px 8% 55px 6%;overflow:hidden}.hero{padding-top:155px;display:flex;flex-direction:column;justify-content:space-between}.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:20px;align-items:center;flex:1}.eyebrow{font-size:12px;letter-spacing:.12em;line-height:1.5}.hero h1{font-size:clamp(62px,7.8vw,125px);font-weight:700;line-height:.92;letter-spacing:-.054em;margin:25px 0 0}.hero h1 span{color:var(--red)}.handwritten{font-family:Kosmos,cursive;font-weight:400;color:var(--red);font-size:clamp(30px,3.5vw,54px);line-height:1.4;display:block;transform:rotate(-6deg);transform-origin:left center}.hero .handwritten{margin:6px 0 29px 10px}.hero-copy p{font-size:16px;line-height:1.6;max-width:420px;margin:0}.hero-art{position:relative;margin:15px 0 0}.hero-art img{width:110%;height:auto;max-width:none;margin-left:-5%;display:block}.orbit-text{position:absolute;right:0;top:0;font-size:10px;letter-spacing:.11em;color:var(--muted);writing-mode:vertical-rl;height:320px}.hero-bottom{border-top:1px solid #29272728;margin-top:40px;padding-top:23px;display:flex;align-items:center;justify-content:space-between;gap:20px}.start-link{display:flex;align-items:center;gap:25px;font-size:15px}.start-link>span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--red);color:white;transition:transform .2s}.start-link:hover>span{transform:translateY(4px)}.start-link svg,.next-slide svg{width:23px;height:23px}.hero-bottom p{font-size:11px;line-height:1.6;letter-spacing:.09em;margin:0}.intro-text{scroll-snap-align:start;scroll-snap-stop:always;background:var(--red);padding:65px 15%;color:#fff}.intro-text p{max-width:900px;font-size:clamp(20px,2.3vw,32px);line-height:1.5;margin:auto;letter-spacing:-.035em}.section-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;padding-bottom:24px;border-bottom:1px solid #29272726;position:relative;z-index:2}.rule{display:flex;flex-direction:column;justify-content:space-between}.rule-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:15px;flex:1;padding:30px 0}.rule-copy{z-index:2}.rule .eyebrow{display:flex;gap:14px;align-items:baseline;color:var(--muted)}.number{font-size:22px;font-weight:700;color:var(--red);letter-spacing:-.05em}.line{width:76px;height:1px;background:currentColor;align-self:center;margin-left:10px;opacity:.4}.rule h2{font-size:clamp(38px,4.6vw,73px);font-weight:700;line-height:1.01;letter-spacing:-.042em;margin:25px 0 27px}.rule-copy>p{font-size:16px;line-height:1.7;max-width:460px;margin:0}.rule-copy>.handwritten{margin-top:40px;font-size:clamp(27px,2.8vw,45px)}figure{margin:0}.rule figure{position:relative;align-self:center}.rule figure>img{position:relative;z-index:1;display:block;width:115%;height:auto;margin-left:-9%}.art-number{position:absolute;top:-20px;left:25%;font-size:clamp(140px,18vw,300px);font-weight:700;line-height:1;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px #29272712}.next-slide{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #29272726;padding-top:22px;font-size:12px;position:relative;z-index:2}.next-slide svg{transition:transform .2s}.next-slide:hover svg{transform:translateY(4px)}.dark{background:var(--ink);color:var(--paper)}.dark .section-top,.dark .next-slide{border-color:#ffffff25}.dark .eyebrow{color:#c1bdb8}.dark figure:before{content:"";position:absolute;width:90%;height:95%;left:0;top:3%;border-radius:50%;background:var(--paper)}.dark .art-number{display:none}.dark .number,.dark .handwritten{color:#ff544b}.thanks{background:var(--red);color:#fff;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding-top:70px;padding-bottom:115px}.thanks-bird{width:85px;height:92px;margin-bottom:25px}.thanks-bird svg{display:block;width:100%;height:100%}.thanks-bird path{fill:#fff}.thanks h2{font-size:clamp(58px,8.5vw,130px);line-height:.97;letter-spacing:-.05em;margin:25px 0}.thanks h2 span{color:var(--ink)}.thanks>p{max-width:620px;font-size:16px;line-height:1.7;margin:0}.thanks .handwritten{color:#fff;transform:rotate(-6deg);margin:25px 0}.back{font-size:13px;margin-top:15px;border-bottom:1px solid #ffffff80;padding-bottom:10px;display:flex;gap:35px}.thanks footer{position:absolute;left:6%;right:8%;bottom:32px;border-top:1px solid #ffffff50;padding-top:20px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.11em}
@media(min-width:1650px){.slide{padding-left:max(6%,calc((100vw - 1480px)/2));padding-right:max(8%,calc((100vw - 1480px)/2))}}
@media(max-height:750px) and (min-width:851px){.hero{padding-top:125px}.hero h1{font-size:clamp(60px,6.8vw,105px)}.hero-art img{max-height:500px}.hero .handwritten{margin-bottom:15px}.hero-bottom{margin-top:20px;padding-top:15px}.slide{padding-bottom:30px}.rule h2{font-size:clamp(38px,4.2vw,65px)}.rule figure img{max-height:510px}.rule-copy>.handwritten{margin-top:20px}}
@media(max-width:850px){.header{padding:24px 6%;height:95px}.header-link{font-size:12px;gap:13px}.rail{right:7px;padding:5px 0}.rail a{width:27px;height:30px;font-size:10px}.rail a span{width:23px;height:23px}.slide{padding:30px 12% 30px 6%}.hero{padding-top:125px}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(62px,12vw,105px)}.hero .handwritten{font-size:38px;margin-top:12px;margin-bottom:18px}.hero-art{max-width:550px;margin:0 auto;width:100%}.hero-art img{width:100%;margin:0}.orbit-text{display:none}.hero-copy p{font-size:15px}.hero-bottom{margin-top:10px}.hero-bottom p{display:none}.hero-grid{gap:0}.hero-art{margin-top:10px}.hero-bottom .start-link{font-size:14px}.intro-text{padding:45px 12% 45px 6%}.section-top{font-size:9px;padding-bottom:18px}.section-top span:last-child{display:none}.rule-layout{grid-template-columns:1fr;gap:0;padding:25px 0 10px}.rule h2{font-size:clamp(34px,7.4vw,58px);margin:20px 0}.rule-copy>p{font-size:15px;max-width:600px;line-height:1.65}.rule-copy>.handwritten{font-size:30px;margin:23px 0 8px}.rule figure{max-width:510px;width:100%;margin:0 auto}.rule figure>img{width:100%;margin:0;max-height:365px}.art-number{font-size:150px;top:0;left:47%}.dark figure:before{height:94%;width:90%;left:5%}.next-slide{font-size:12px;padding-top:17px}.thanks{padding-top:65px;padding-bottom:120px}.thanks h2{font-size:clamp(50px,11vw,90px)}.thanks>p{font-size:15px}.thanks .handwritten{font-size:36px}.thanks footer{font-size:9px;right:12%}.thanks-bird{width:65px;height:70px}.thanks .eyebrow{font-size:11px}}
@media(max-width:420px){.header-link{max-width:135px;line-height:1.4}.brand{font-size:12px;gap:9px}.brand img{width:35px}.hero{padding-top:115px}.hero h1{font-size:15vw}.hero .eyebrow{font-size:10px}.hero .handwritten{font-size:32px}.hero-art img{max-height:300px}.desktop-break{display:none}.rule h2{font-size:8.2vw}.rule figure>img{max-height:300px}.hero-copy p,.rule-copy>p{font-size:15px}.section-top{font-size:8px}.hero-bottom{margin-top:0}.start-link>span{width:42px;height:42px}.start-link{gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{.header,.rail,.next-slide,.hero-bottom,.back,.skip{display:none}.slide{min-height:0;break-after:page;padding:25px!important;overflow:visible}.rule-layout,.hero-grid{grid-template-columns:1fr 1fr}.rule figure img{max-height:400px}.intro-text{padding:25px}.dark{background:#fff;color:#292727}.dark .handwritten,.dark .number{color:#e5201f}.thanks{background:#fff;color:#292727}.thanks-bird path{fill:#e5201f}.thanks .handwritten{color:#e5201f}.thanks footer{position:static;margin-top:40px}.hero h1{font-size:65px}.rule h2{font-size:35px}}

/* PoYo illustration series: keep the full 2K compositions and their proportions. */
.artwork-v2 .hero-art img{width:110%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.artwork-v2 .art-number{display:none}
.artwork-v2 .rule figure>img{width:100%;height:auto;margin:0;object-fit:contain;mix-blend-mode:multiply;max-height:650px}
.artwork-v2 .dark figure:before{display:none}
.artwork-v2 .dark figure{background:#f6f5f1;border-radius:28px;overflow:hidden}
.artwork-v2 .dark figure>img{mix-blend-mode:multiply}
@media(max-height:750px) and (min-width:851px){.artwork-v2 .hero-art img{max-height:500px}.artwork-v2 .rule figure>img{max-height:510px}}
@media(max-width:850px){.artwork-v2 .hero-art img{width:100%;margin:0;max-height:365px}.artwork-v2 .rule figure>img{max-height:365px}.artwork-v2 .dark figure{max-width:365px;margin-top:15px;border-radius:22px}}
@media(max-width:420px){.artwork-v2 .hero-art img,.artwork-v2 .rule figure>img{max-height:300px}.artwork-v2 .dark figure{max-width:300px}}
/* Blend the near-white generated canvas into the brand paper without darkening it. */
.artwork-v2 .hero-art{aspect-ratio:1.4;align-self:center}
.artwork-v2 .hero-art img{width:100%;height:100%;margin:0;max-height:none;object-fit:cover;mix-blend-mode:darken}
.artwork-v2 .rule figure>img{mix-blend-mode:darken}
.artwork-v2 .dark figure{isolation:isolate}
.artwork-v2 .orbit-text{right:-13px;top:5px}
@media(max-width:850px){.artwork-v2 .hero-art img{height:100%;max-height:none}}

/* Sentence-length rule headings and staggered text entrances. */
.rule-copy{min-width:0}
.rule.long-title h2{font-size:clamp(32px,3.45vw,55px);line-height:1.09;letter-spacing:-.033em}
.reveal-word{display:inline-block;vertical-align:baseline;clip-path:inset(0 -.08em)}
.reveal-ink{display:inline-block;transform-origin:left bottom}
.hero h1 .reveal-word,.thanks h2 .reveal-word,.hero h1 .reveal-ink,.thanks h2 .reveal-ink{color:inherit}
@media(max-width:850px){.rule.long-title h2{font-size:clamp(29px,5.6vw,43px)}}
@media(max-width:420px){.rule.long-title h2{font-size:clamp(26px,7.3vw,31px)}}
@media print{.reveal-word{transform:none!important;opacity:1!important}.rule.long-title h2{font-size:30px}}

/* Keep animated glyphs within their lines and reserve room for script ascenders. */
.hero h1{line-height:1.04}
.rule h2,.rule.long-title h2{line-height:1.14}
.thanks h2{line-height:1.08}
.hero .handwritten{margin:clamp(44px,4.4vw,66px) 0 32px 10px}
.rule-copy>.handwritten{margin-top:44px;margin-bottom:24px}
.thanks .handwritten{margin-top:46px;margin-bottom:32px}
@media(max-width:850px){.hero .handwritten{margin-top:40px;margin-bottom:28px}.rule-copy>.handwritten{margin-top:40px;margin-bottom:24px}}
@media print{.reveal-word{clip-path:none}.reveal-ink{transform:none!important;opacity:1!important}}

/* Touch scrolling remains free on small screens; wheel paging is desktop-only. */
@media(max-width:850px){html{scroll-snap-type:none}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}}

/* Button-led page turns, with a brief gust of hand-drawn vector leaves. */
html{scroll-snap-type:none}
html.is-turning{scroll-behavior:auto!important}
.page-step{display:none}
.has-page-buttons .page-step{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:var(--red);color:white;cursor:pointer;transition:background .2s,transform .2s;margin:4px}
.page-step svg{width:22px;height:22px}
.page-step-prev svg{transform:rotate(180deg)}
.page-step:hover{background:var(--ink);transform:scale(1.06)}
.page-step[aria-disabled="true"]{background:#dedbd5;color:#8b8781;cursor:default;transform:none}
.rail.has-page-buttons{padding:4px 0;right:16px}
.has-page-buttons a{width:52px}
button:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.next-slide>svg{box-sizing:content-box;padding:13px;background:var(--red);color:white;border-radius:50%}
.next-slide:hover>svg{transform:translateY(3px)}
.leaf-transition{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;isolation:isolate;contain:strict}
.leaf-transition[hidden]{display:none}
.leaf-veil{position:absolute;inset:0;background:var(--paper);opacity:0}
.flying-leaf{position:absolute;left:0;top:0;aspect-ratio:1;will-change:transform,opacity}
.flying-leaf svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:850px){.rail.has-page-buttons{right:4px}.has-page-buttons a{width:44px;height:28px}.has-page-buttons .page-step{width:40px;height:40px;margin:2px}.slide{padding-right:max(15%,60px)}.next-slide>svg{padding:9px}.next-slide{gap:14px}}
@media(max-height:560px){.rail.has-page-buttons a{height:23px}.has-page-buttons .page-step{height:34px;width:34px;margin:3px auto}.rail.has-page-buttons{right:6px}}
@media(prefers-reduced-motion:reduce){.leaf-transition{display:none!important}}
@media print{.leaf-transition,.page-step{display:none!important}}

/* Slide headings receive programmatic focus for navigation announcements. */
main > section[tabindex="-1"]:focus, .slide h1[tabindex="-1"]:focus, .slide h2[tabindex="-1"]:focus{outline:none}
.page-step{user-select:none;-webkit-user-select:none}

/* Red typographic cover, followed by a full welcome screen. */
.header{color:#fff}
.header .brand img{filter:brightness(0) invert(1)}
.cover{background:var(--red);color:#fff;justify-content:space-between}
.cover .hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.cover h1{font-size:clamp(72px,9vw,150px);line-height:1;letter-spacing:-.045em;margin:24px 0 0}
.cover .handwritten{color:#fff;margin:30px 0 22px 10px}
.cover .hero-bottom{border-color:#ffffff55;margin-top:0}
.cover .start-link>span{background:#fff;color:var(--red)}
.welcome{display:flex;flex-direction:column;justify-content:space-between}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;flex:1;padding:40px 0}
.welcome-copy{min-width:0}
.welcome h2{font-size:clamp(38px,4.4vw,68px);line-height:1.12;letter-spacing:-.035em;margin:0 0 32px}
.welcome-copy>p{font-size:clamp(17px,1.45vw,22px);line-height:1.6;max-width:590px;margin:0}
@media(max-width:850px){.cover h1{font-size:clamp(56px,11.5vw,96px)}.cover .hero-copy{padding:20px 0}.cover .handwritten{font-size:clamp(27px,5.5vw,38px);margin-top:30px}.welcome-grid{grid-template-columns:1fr;gap:24px;padding:28px 0}.welcome h2{font-size:clamp(30px,6.5vw,50px);margin-bottom:25px}.welcome-copy>p{font-size:17px}.welcome .hero-art{width:100%;max-width:520px;margin:0 auto}}
@media(max-width:420px){.cover h1{font-size:12.2vw}.welcome h2{font-size:8.1vw}.welcome-copy>p{font-size:16px}}
@media print{.cover{background:#fff;color:var(--ink)}.cover .handwritten{color:var(--red)}.welcome-grid{grid-template-columns:1fr 1fr}}

/* Kosmos capital Ч has a left overhang: reserve room for the complete swash. */
#rule-2 .handwritten{padding-left:.65em}

/* One paper canvas throughout; red remains the accent. */
.slide{background:var(--paper);color:var(--ink)}
.header{color:var(--ink)}
.header .brand img{filter:none}
.cover .handwritten,.thanks .handwritten,.dark .handwritten,.dark .number{color:var(--red)}
.cover .hero-bottom,.dark .section-top,.dark .next-slide,.thanks footer{border-color:#29272726}
.cover .start-link>span{background:var(--red);color:#fff}
.dark .eyebrow{color:var(--muted)}
.thanks-bird path{fill:var(--red)}
.thanks h2>span{color:var(--red)}
.thanks .back{border-color:#29272755}

/* A handwritten brand-red opening; following sections retain the paper canvas. */
.header{color:#fff}
.header .brand img{filter:brightness(0) invert(1)}
.cover{background:var(--red);color:#fff}
.cover h1.kosmos-title{font-family:Kosmos,cursive;font-weight:400;font-size:clamp(76px,8.5vw,128px);line-height:1.18;letter-spacing:0;color:#fff;margin:20px 0 0;padding:.55em .15em .2em .85em;transform:rotate(-4deg);transform-origin:left center}
.cover .hero-bottom{border-color:#ffffff55}
.cover .start-link>span{background:#fff;color:var(--red)}
@media(max-width:850px){.cover h1.kosmos-title{font-size:clamp(56px,12vw,100px)}}
@media(max-width:420px){.cover h1.kosmos-title{font-size:14vw}}
@media print{.cover{background:#fff;color:var(--ink)}.cover h1.kosmos-title{color:var(--ink)}}

/* Kosmos wordmark beside the original bird. */
.header .brand{gap:18px}
.header .brand>span{font-family:Kosmos,cursive;font-weight:400;font-size:27px;line-height:1.12;letter-spacing:0;display:block;padding:.15em .2em .15em .3em}
@media(max-width:850px){.header .brand{gap:13px}.header .brand>span{font-size:23px}}

/* Opening composition: handwritten title and a large original bird. */
.cover{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:3vw;padding-top:60px;padding-bottom:60px}
.cover .hero-copy{min-width:0;padding:0}
.cover h1.kosmos-title{font-size:clamp(36px,7.2vw,115px);margin:0}
.cover-bird{display:block;width:100%;max-width:430px;height:auto;justify-self:center;filter:brightness(0) invert(1)}
@media(max-width:850px){.cover h1.kosmos-title{font-size:8.7vw}.cover{gap:2vw}}
@media print{.cover-bird{filter:none}}

/* Shared reading size and responsive, balanced Russian typography. */
:root{--reading-size:clamp(17px,1.45vw,22px)}
.welcome-copy>p,.rule-copy>p,.thanks>p{font-size:var(--reading-size);line-height:1.6;text-wrap:pretty}
.rule-copy>p{max-width:590px}
.rule h2,.welcome h2{ text-wrap:balance }
@media(max-width:850px){:root{--reading-size:17px}}
@media(max-width:420px){:root{--reading-size:16px}}

/* Keep each illustration and its copy together instead of stretching grid rows. */
.rule,.welcome{justify-content:center}
.rule-layout,.welcome-grid{flex:0 0 auto;width:100%;max-width:1160px;margin:0 auto;gap:12px;align-content:center;padding:20px 0}
.rule-copy>h2{margin-top:0}
.thanks{padding-top:60px;padding-bottom:60px}
@media(max-width:850px){.rule-layout,.welcome-grid{gap:12px;padding:12px 0;grid-template-rows:auto auto}.rule-copy>.handwritten{margin-top:32px;margin-bottom:12px}.artwork-v2 .dark figure{margin-top:0}.welcome .hero-art{margin-top:0}}
