@font-face{font-family:Archivo;src:url(../fonts/Archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Chango;src:url(../fonts/Chango.woff2) format("woff2");font-display:swap}
:root{--ink:#1d1410;--cream:#fbf1dc;--paper:#fdeddb;--brick:#a8301f;--gold:#f1c24b;--hair:#d9681f;--glove:#c2185b}
*{box-sizing:border-box;margin:0}
html{background:var(--cream)}
body{color:var(--ink);font:450 18px/1.42 Archivo,"Helvetica Neue",Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px}
h1,h2,h3{font-family:Chango,Archivo,sans-serif;font-weight:400;line-height:1.06}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:9px 14px 8px 12px;padding:20px}
.marquee{display:block;width:210px}
.marquee img{display:block;width:100%}
.bar{display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,4vw,48px)}
.bar button,form button{all:unset;cursor:pointer;background:var(--ink);color:var(--cream);font-weight:700;padding:9px 16px;border-radius:7px 9px 6px 8px}
.bar button:hover,form button:hover{background:var(--brick)}
.bar button:focus-visible,form button:focus-visible{outline:3px solid var(--brick);outline-offset:3px}
[hidden]{display:none!important}
.demo{background:var(--gold);text-align:center;font-weight:700;padding:6px 16px}

/* account */
.desk main{max-width:1120px;margin:0 auto;padding:clamp(16px,4vw,44px) 16px 60px}
.login{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,52px);align-items:center;max-width:860px!important;margin:clamp(16px,5vh,56px) auto!important;padding:28px!important}
.login>img{max-height:66vh;margin:auto}
.login h1,#dash h1{font-size:clamp(34px,5vw,60px);margin-bottom:12px}
form{display:grid;gap:10px}
form label{font-weight:700;margin-top:8px}
input{font:inherit;padding:11px;border:3px solid var(--ink);border-radius:7px;background:#fff}
form button{justify-self:start;margin-top:6px}
.owned{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0}
.owned h2,.two-up h2{font-size:25px;margin-bottom:8px}
.go{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.go a{background:var(--ink);color:var(--cream);text-decoration:none;font-weight:700;padding:7px 13px;border-radius:7px}
.go a:hover{background:var(--brick)}
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.lessons{padding-left:1.5em}.lessons li{padding:5px 0}.lessons .done{text-decoration:line-through;opacity:.55}.lessons .next{font-weight:800;color:var(--brick)}
.news{list-style:none;padding:0}.news li{padding:8px 0;border-top:2px solid var(--ink)}.news li:first-child{border:0}
@media (max-width:640px){.login{grid-template-columns:1fr}.login>img{max-height:34vh}}

/* the manual: one instruction sheet per step */
.manual{background:#e9dcc2}
.sheet{background:var(--paper);max-width:1000px;margin:26px auto;padding:clamp(20px,4vw,52px);border:3px solid var(--ink);min-height:min(92vh,720px);display:flex;flex-direction:column;gap:18px;position:relative;scroll-margin-top:12px}
.sheet.cover{align-items:center;text-align:center;justify-content:center}
.cover h1{font-size:clamp(46px,8vw,98px);color:var(--brick)}
.cover .art{max-height:60vh;width:auto}
.sheet header{display:flex;align-items:center;gap:20px}
.num{font:400 clamp(70px,11vw,132px)/.85 Chango,sans-serif}
.sheet h2{font-size:clamp(26px,3.6vw,44px)}
.sheet .art,.lesson .art,.login>img{-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 78%,transparent 100%)}
.sheet .art{width:100%;max-height:50vh;object-fit:contain;margin:auto}
.do{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:auto}
.say,.you{border:3px solid var(--ink);border-radius:8px;padding:12px 15px}
.say{background:#f6ecd8}
.you{background:var(--gold)}
.say b,.you b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.foot{position:absolute;right:18px;bottom:10px;font-weight:700;font-size:14px}
.toc{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.toc a{background:var(--ink);color:var(--cream);padding:4px 11px;border-radius:7px;text-decoration:none;font-weight:700;font-size:15px}

/* the course */
.course{max-width:860px;margin:0 auto;padding:16px 16px 70px}
.course>h1{font-size:clamp(38px,6vw,70px);margin:14px 0}
.lesson{margin:22px 0;scroll-margin-top:12px}
.lesson h2{font-size:clamp(25px,3.4vw,38px)}
.lesson .meta{font-weight:700;color:var(--brick);margin:6px 0 10px}
.lesson .art{max-height:280px;margin:0 auto 12px;width:auto}
.lesson h3{font-size:18px;margin:14px 0 4px}
.lesson ul,.lesson ol{padding-left:1.3em}
.files{list-style:none;padding:0}.files li{padding:8px 0;border-top:2px solid var(--ink)}
code{font-size:.92em;background:#f0e4cb;padding:1px 5px;border-radius:4px}

@media print{
 @page{size:A4 landscape;margin:0}
 .manual{background:#fff}
 .bar,.demo,.toc{display:none}
 .sheet{max-width:none;width:297mm;height:210mm;min-height:0;margin:0;border:0;page-break-after:always;padding:14mm;overflow:hidden}
 .sheet .art{max-height:92mm}
 .cover .art{max-height:120mm}
}
.mark{all:unset;cursor:pointer;margin-left:10px;background:var(--ink);color:var(--cream);font-size:14px;padding:2px 9px;border-radius:6px}
.mark:focus-visible{outline:3px solid var(--brick)}
#msg{font-weight:700;color:var(--brick)}
.desk main.legal{max-width:820px;margin:12px auto 50px;padding:clamp(20px,4vw,44px)}
.legal h1{font-size:clamp(34px,5vw,56px);margin-bottom:12px}
.legal h2{font-size:26px;margin:26px 0 8px;scroll-margin-top:12px}
.legal p{margin:.6em 0}
.toc-legal{display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:700}
.legal-links{text-align:center;padding:0 16px 26px;font-weight:600}