:root{--accent:#8e354b;--ink:#332b30;--paper:#faf5e9;--font:Georgia, serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--font,system-ui,sans-serif)}a{color:inherit;text-underline-offset:.22em}a:hover{text-decoration-thickness:2px}a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}img,svg{max-width:100%;height:auto}img{display:block}p{max-width:68ch}h1,h2,h3{line-height:1.1;text-wrap:balance}h1{font-size:clamp(3rem,7vw,7rem);letter-spacing:-.055em;margin:.3em 0}h2{font-size:clamp(2rem,4vw,3.8rem);letter-spacing:-.035em}h3{font-size:1.3rem}.frame{width:min(1240px,calc(100% - 64px));margin:auto}.mast{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:28px 0}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800;line-height:1.15}.brand img{width:48px;height:48px}.mast nav{display:flex;gap:24px;flex-wrap:wrap;font-size:.86rem}.kicker{font:700 .76rem/1.4 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}.lede{font-size:clamp(1.1rem,2vw,1.45rem)}section{padding:70px 0}.contact{border-top:1px solid currentColor;padding:55px 0}.contact a{overflow-wrap:anywhere}footer{padding:25px 0 45px;font-size:.82rem;border-top:1px solid currentColor}.footline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}details{border-top:1px solid currentColor;padding:18px 0}summary{cursor:pointer;font-weight:750}details p{margin-bottom:0}.button{display:inline-block;padding:12px 22px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:750}.note{font-size:.9rem}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:white;color:black;padding:12px;z-index:100}ul,ol{padding-left:1.3em}li{margin:.5em 0}@media(max-width:700px){.frame{width:calc(100% - 36px)}.mast{align-items:flex-start;gap:22px;flex-direction:column}.mast nav{gap:15px}section{padding:43px 0}h1{overflow-wrap:anywhere}body{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}.notebook{padding-top:45px}.notebook h1{font-weight:400;font-size:clamp(3.5rem,7vw,7rem)}.notebook i{color:var(--accent)}.notebook .lede{max-width:650px}.staff{display:flex;gap:0;justify-content:space-around;align-items:center;font:4rem/1 system-ui;max-width:900px;margin-top:50px;padding:40px 0;background:repeating-linear-gradient(0deg,transparent 0 18px,#ccbcb9 18px 19px,transparent 19px 36px)}.staff span{font-size:2rem;background:var(--paper)}.staff b{background:var(--paper);font-weight:400}.lesson{background:#edd9da;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}figure{margin:0;border:1px solid;padding:30px;background:var(--paper)}.beatlabels,.beats{font-family:monospace;letter-spacing:.24em;white-space:nowrap}.beatlabels{font-size:1.3rem}.beats{font-size:1.9rem;color:var(--accent)}figcaption{font: .83rem/1.5 system-ui;margin-top:20px}.variation{background:var(--accent);color:var(--paper)}.variation ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:v}.variation li{counter-increment:v;border-top:2px solid}.variation h3:before{content:counter(v) " / ";font-family:system-ui}.variation h2{font-weight:400}@media(max-width:700px){.lesson-grid,.variation ol{display:block}.variation li{margin-top:30px}.staff{font-size:2.8rem}.beats{font-size:1.35rem;letter-spacing:.12em}.beatlabels{font-size:1rem;letter-spacing:.18em}figure{padding:22px}}