@font-face{font-family:Abril;src:url(fonts/AbrilFatface-Regular.ttf);font-display:swap}
@font-face{font-family:News;src:url(fonts/Newsreader.ttf);font-weight:200 800;font-display:swap}
@font-face{font-family:News;src:url(fonts/Newsreader-Italic.ttf);font-style:italic;font-weight:200 800;font-display:swap}
@font-face{font-family:Osw;src:url(fonts/Oswald.ttf);font-weight:200 700;font-display:swap}
@font-face{font-family:Type;src:url(fonts/SpecialElite-Regular.ttf);font-display:swap}
:root{--ink:#1a150d;--ink2:#100d05;--mus:#d29b22;--mus2:#f0d48a;--brick:#a5361f;--paper:#f3e9d2;--card:#fffcf3;--rule:#c8b58a;--soft:#5a4c36;--green:#2f6b3a;--amber:#a86c12}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:News,Georgia,serif;font-size:19px;line-height:1.6;color:var(--ink);background:#efe3c8 url(img/paper.jpg) repeat;background-size:700px auto}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.wrap-n{max-width:680px;margin:0 auto;padding:0 22px}
.center{text-align:center}
.muted{color:var(--soft)}
.small{font-size:16px}
.kick{font-family:Osw;font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--brick);margin-bottom:10px}
.kick.light{color:var(--mus)}
h1,h2,h3{font-weight:400;line-height:1.08}
h2{font-family:Abril;font-size:clamp(30px,5vw,44px);margin-bottom:18px}
h2.light{color:#f6ecd4}
h3{font-family:Abril;font-size:24px;margin-bottom:8px}
p{margin-bottom:16px}
section{padding:72px 0}

.btn{display:inline-block;background:var(--brick);color:#fff8e8;font-family:Osw;font-weight:600;font-size:18px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border-radius:4px;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--mus);outline-offset:3px}
.btn.small{font-size:13px;padding:9px 14px;box-shadow:3px 3px 0 #000}
.under{font-size:14.5px;color:var(--soft);margin-top:12px;font-family:Osw;letter-spacing:.04em}

.bar{background:var(--ink2);color:var(--paper);position:sticky;top:0;z-index:10;border-bottom:3px solid var(--mus)}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:Osw;letter-spacing:.24em;text-transform:uppercase;font-size:14px;color:var(--mus)}
.brand img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--mus);background:var(--paper)}

.hero{background:var(--ink2);color:var(--paper);padding:56px 0 70px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:url(img/crowd.jpg) center 30%/cover;opacity:.16}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero .kick{color:var(--mus)}
.hero h1{font-family:Abril;font-size:clamp(46px,7.4vw,84px);line-height:.98;color:#f6ecd4;text-shadow:5px 5px 0 var(--brick);margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--mus);display:block}
.lead{font-size:21px;line-height:1.5;color:#eadcb8;max-width:34em}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0 28px;font-family:Osw;letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--mus2)}
.facts b{font-family:Abril;font-weight:400;font-size:26px;color:#f6ecd4;letter-spacing:0;margin-right:4px}
.hero .under{color:#c9b98f}
.hero-book{perspective:1400px;display:flex;justify-content:center}
.book3d{position:relative;width:min(340px,80vw);aspect-ratio:170/240;transform:rotateY(-24deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s}
.book3d:hover{transform:rotateY(-12deg) rotateX(2deg)}
.book3d .front{position:absolute;inset:0;transform:translateZ(14px);box-shadow:24px 30px 50px rgba(0,0,0,.55);border-radius:2px 4px 4px 2px;overflow:hidden}
.book3d .front img{width:100%;height:100%;object-fit:cover}
.book3d .front:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.08) 4%,transparent 9%)}
.book3d .spine{position:absolute;left:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg,#0b0905,#2a2213);transform:rotateY(-90deg) translateZ(14px);transform-origin:left}
.book3d .pages{position:absolute;right:0;top:3px;bottom:3px;width:26px;background:repeating-linear-gradient(90deg,#f3ead4 0 2px,#d9cba6 2px 3px);transform:rotateY(90deg) translateZ(-12px);transform-origin:right}

.strip{background:var(--mus);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:13px 0;white-space:nowrap}
.strip-track{display:inline-block;animation:slide 70s linear infinite}
.strip span{font-family:Abril;font-size:20px;color:var(--ink);margin:0 14px}
.strip span:after{content:"\2766";color:var(--brick);margin-left:28px;font-family:News}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}.strip{overflow-x:auto}}

.letter h2{font-size:clamp(28px,4.6vw,40px)}
.letter q{font-style:italic;color:var(--brick)}
.big-line{font-family:Abril;font-size:clamp(26px,4vw,34px);line-height:1.15;color:var(--brick);text-align:center;margin:28px 0}
.sig{font-family:Type;color:var(--soft)}

.lesson{background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.ba-col{border-radius:10px;padding:18px 20px}
.ba-col .tag{font-family:Osw;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.ba-col .msg{font-size:18px;line-height:1.45;margin:8px 0 10px}
.ba-col .why{font-size:15px;margin:0;opacity:.85}
.before{background:#eadfc6;color:#4b4030}.before .tag{color:var(--brick)}
.after{background:var(--ink);color:#f3e9d2}.after .tag{color:var(--mus)}
.card{position:relative;background:var(--card);border:1px solid #d9cba6;padding:26px 26px 14px;margin:30px 4px;box-shadow:6px 6px 0 #d8c79c;transform:rotate(-.6deg);background-image:linear-gradient(#fffcf3 0,#fffcf3 44px,#e2a99b 44px,#e2a99b 45px,transparent 45px),repeating-linear-gradient(transparent 0,transparent 27px,#d6e4f0 27px,#d6e4f0 28px)}
.card:before{content:"";position:absolute;top:-10px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--brick);box-shadow:inset -3px -3px 0 #6f2010}
.card-t{font-family:Type;font-size:14px;color:var(--soft);height:26px}
.card-claim{font-family:Abril;font-size:22px;line-height:1.25;margin:6px 0 10px;padding-right:110px}
.stamp{position:absolute;right:22px;top:46px;font-family:Abril;font-size:22px;padding:2px 12px;border:2.5px solid currentColor;transform:rotate(5deg);background:var(--card)}
.stamp.solid{color:var(--green)}
.card p{font-size:17px;line-height:1.6;margin-bottom:8px}
.card .src{font-family:Type;font-size:13px;color:var(--soft)}
.try{background:var(--ink);color:var(--paper);padding:16px 20px;border-radius:4px}
.try b{color:var(--mus);font-family:Osw;letter-spacing:.12em;text-transform:uppercase;font-size:14px;font-weight:600;margin-right:6px}

.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0}
.parts article{background:var(--card);border:1px solid #d9cba6;box-shadow:5px 5px 0 #d8c79c;padding:24px}
.pn{font-family:Osw;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brick)}
.parts h3{margin-top:6px;font-size:30px}
.parts p{font-size:17px;margin:0}
.kit{max-width:760px;margin:0 auto 34px;border-top:3px solid var(--ink);padding-top:22px}
.kit ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.kit li{position:relative;padding-left:20px;font-size:17px;line-height:1.45}
.kit li:before,.dots li:before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;background:var(--brick);transform:rotate(45deg)}

.pagesec{background:var(--ink2)}
.flip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.flip figure{margin:0}
.flip img{width:100%;box-shadow:0 14px 34px rgba(0,0,0,.55);border-radius:2px;transition:transform .25s}
.flip figure:nth-child(odd) img{transform:rotate(-1.2deg)}
.flip figure:nth-child(even) img{transform:rotate(1deg)}
.flip img:hover{transform:rotate(0) scale(1.02)}
.flip figcaption{font-family:Osw;font-size:14px;letter-spacing:.06em;color:#cdbb8f;margin-top:14px;text-align:center}

.board-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tally{display:flex;gap:28px;margin:22px 0 12px}
.tally b{display:block;font-family:Abril;font-weight:400;font-size:52px;line-height:1}
.tally div:nth-child(1) b{color:var(--green)}.tally div:nth-child(2) b{color:var(--amber)}.tally div:nth-child(3) b{color:var(--brick)}
.tally span{font-family:Osw;font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.board-pic img{transform:rotate(2.5deg);box-shadow:14px 18px 0 rgba(26,21,13,.12),0 10px 30px rgba(0,0,0,.18);max-width:420px;margin:0 auto}

.who-h{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.who-h img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:5px solid var(--mus);box-shadow:0 0 0 3px var(--ink);background:var(--paper);flex:none}
.who-h h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0}
.stats div{border-top:3px solid var(--ink);padding-top:8px}
.stats b{display:block;font-family:Abril;font-weight:400;font-size:38px;line-height:1;color:var(--brick)}
.stats span{font-family:Osw;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);line-height:1.3;display:block;margin-top:4px}
.who h3{font-size:22px;margin-top:10px}
.dots{list-style:none;margin:8px 0 20px}
.dots li{position:relative;padding-left:22px;margin-bottom:8px}

.faq details{border-top:1px solid var(--rule);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{font-family:Abril;font-size:21px;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:-2px;color:var(--brick);font-family:Osw;font-size:26px}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:10px 0 0;font-size:18px}

.close{background:var(--ink2);color:var(--paper);border-top:4px solid var(--mus)}
.close-in{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center;max-width:900px}
.close-cover{width:100%;box-shadow:16px 20px 40px rgba(0,0,0,.6);transform:rotate(-3deg)}
.close h2{color:#f6ecd4}
.close p{color:#e2d3ad}
.close .under{color:#c9b98f}

.foot{padding:32px 0 40px;font-size:15px;color:var(--soft)}
.foot p{margin-bottom:6px}

@media (max-width:860px){
  body{font-size:18px}
  section{padding:54px 0}
  .hero{padding:34px 0 52px}
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-book{order:-1}
  .book3d{width:min(230px,62vw)}
  .lead{font-size:19px}
  .parts{grid-template-columns:1fr}
  .kit ul{grid-template-columns:1fr}
  .flip{grid-template-columns:1fr 1fr;gap:16px}
  .board-in{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:1fr 1fr}
  .close-in{grid-template-columns:1fr;text-align:center}
  .close-cover{max-width:200px;margin:0 auto}
  .ba{grid-template-columns:1fr}
  .card-claim{font-size:19px;padding-right:0;margin-top:34px}
  .stamp{top:38px;font-size:18px}
}
@media (max-width:420px){
  .btn{display:block;text-align:center;padding:16px 18px}
  .btn.small{display:inline-block}
  .brand span{display:none}
}
section.wrap,section.wrap-n{padding-top:72px;padding-bottom:72px}@media (max-width:860px){section.wrap,section.wrap-n{padding-top:54px;padding-bottom:54px}}
@media (max-width:860px){.board-in{grid-template-columns:minmax(0,1fr)}.board-pic img{max-width:86%}}
.edition{font-family:Osw;font-size:14px;letter-spacing:.06em;color:#c9b98f;margin:-10px 0 20px}