/* Course pages (generated by landing/course_pages.py). Same paper and ink as the landing page;
   each section is a pastel note. Muted text inside a note is #4f574d: the landing's #687065
   drops under 4.5:1 on every tint. */
:root{--paper:#f8f7f2;--ink:#202820;--muted:#687065;--line:#dcded4;--green:#00875a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,sans-serif}
a{color:inherit;text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--green);outline-offset:4px}
header,main,footer{width:min(820px,100% - 32px);margin:auto}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
header img{display:block}
.button{display:inline-block;padding:10px 18px;border-radius:6px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;text-decoration:none}
main{padding:24px 0 56px}

.trail{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:var(--muted)}
.back{display:inline-flex;align-items:center;padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none}
.back:hover{border-color:var(--ink)}

h1{font-size:clamp(36px,7vw,56px);font-weight:560;letter-spacing:-.04em;line-height:1.05;margin:20px 0 10px}
h1 span{display:block;font-size:.42em;letter-spacing:-.02em;line-height:1.25;margin-top:8px;color:var(--muted);font-weight:500}
h2{font-size:20px;letter-spacing:-.02em;margin:6px 0 10px}
h3{font-size:15px;margin:16px 0 4px}
.meta{font:12px/1.6 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
ul{padding-left:20px;margin:6px 0}
.codes{list-style:none;padding:0;columns:2 260px;column-gap:28px}
.codes li{break-inside:avoid;padding:3px 0}
.codes a{font-weight:600}
.codes span,footer{color:var(--muted)}

/* Notes: tinted paper, a strip of tape, a slight tilt. Short notes pair up; long ones run wide. */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;margin-top:30px}
.note{position:relative;padding:24px 22px 18px;border-radius:3px;background:var(--tint);transform:rotate(var(--tilt));
  box-shadow:0 1px 1px #2028200f,0 14px 24px -18px #20282066}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;
  background:#ffffffa6;transform:rotate(-2deg);box-shadow:0 1px 2px #2028201a}
.note.wide{grid-column:1/-1}
.note .tag{display:block;font:11px/1.4 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;color:#4f574d}
.note .codes span,.note .muted{color:#4f574d}
.note p{margin:6px 0}
.mint{--tint:#e3efe2;--tilt:-.6deg}
.butter{--tint:#f7efc9;--tilt:.7deg}
.lilac{--tint:#ebe5f5;--tilt:.25deg}
.peach{--tint:#f8e5d6;--tilt:-.25deg}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 28px}
.cta{margin-top:34px;padding:24px;border-radius:3px;background:var(--ink);color:var(--paper)}
.cta p{margin:0 0 14px;color:#c0c7bb}
.cta b{color:var(--paper)}
.cta .button{background:var(--paper);color:var(--ink)}
@media(max-width:640px){.notes{grid-template-columns:1fr}.note{--tilt:0deg}}

footer{border-top:1px solid var(--line);padding:20px 0 40px;font-size:13px}