/* The notebook look for every page outside the lessons (404, thanks, terms, privacy, and the server pages:
   sign-in, account, locked lesson, coming soon, errors). The home page keeps its own copy of these rules. */
:root{--paper:#fbfbf8;--grid:#dfe7ee;--pencil:#2b2b2b;--red:#d9534f;--marker:#fff4a8;--margin:72px;--i:0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--pencil);background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;font:400 clamp(17px,1.2vw,19px)/1.65 "PT Serif",Georgia,serif;position:relative;overflow-x:hidden}
body::before{content:"";position:absolute;left:var(--margin);top:0;bottom:0;width:2px;background:var(--red)}
h1,h2,p,ul,figure{margin:0}
a{color:inherit;text-decoration-color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* page frame: text and its pencil drawing as one group in the middle of the page (never left of the margin line) */
.top{display:flex;flex-wrap:wrap;gap:0 28px;padding:10px 24px 0 calc(var(--margin) + 36px);font:700 1.1rem Kalam,cursive}
.top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.top a:hover{text-decoration:underline}
main{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,320px);justify-content:center;gap:40px 72px;align-items:center;padding:8vh calc(var(--margin) + 36px);min-height:70vh}
main>div>*+*{margin-top:14px}
main.long{display:block;max-width:calc(40rem + 2 * (var(--margin) + 36px));margin:0 auto;padding-top:4vh}
main.long:has(#profile){max-width:calc(880px + 2 * (var(--margin) + 36px))} /* Clerk's profile box needs ~880px to show full email addresses */
.art{width:100%;justify-self:center}
.art svg{display:block;width:100%;height:auto;overflow:visible}

h1{font:700 clamp(44px,6.4vw,96px)/1.05 Kalam,cursive;margin-bottom:.15em}
/* ":not(.cl-rootBox *)": these rules outrank Clerk's own, so they stay out of its sign-in and profile boxes */
main.long h1:not(.cl-rootBox *){font-size:clamp(40px,6vw,80px);margin-top:2vh}
h2{margin:1.8em 0 .3em;font:700 clamp(26px,3vw,36px)/1.1 Kalam,cursive}
p:not(.cl-rootBox *),main.long ul:not(.cl-rootBox *){max-width:36em}
main.long :is(p,ul):not(.cl-rootBox *){margin:0 0 12px}
li+li{margin-top:6px}
.small{font:700 1rem Kalam,cursive;color:#666}

/* yellow marker behind the heading's key words, swiped on after the heading writes itself */
.mark{background:linear-gradient(var(--marker),var(--marker)) 0 80%/100% 42% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* buttons: one filled button per page (what to do next), everything else a red-underlined link */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:2px solid var(--pencil);border-radius:10px 4px 12px 4px;background:var(--paper);color:var(--pencil);font:700 1.5rem Kalam,cursive;text-decoration:none;cursor:pointer;transition:color .15s}
.btn:hover{color:var(--red)}
.btn.primary{background:var(--pencil);color:var(--paper);box-shadow:3px 4px 0 rgba(43,43,43,.22)}
.btn.primary:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn.primary:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(43,43,43,.22)}
.go{display:inline-flex;align-items:center;min-height:48px;font:700 1.4rem Kalam,cursive;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:5px}

/* the short version of a long page, on a sticky note */
.sticky{max-width:30em;margin:18px 0 8px;padding:18px 22px;background:var(--marker);rotate:-1deg;box-shadow:3px 5px 0 rgba(43,43,43,.14);font:700 1.25rem/1.4 Kalam,cursive}
.stamp{display:inline-block;padding:0 .35em;border:3px solid var(--red);color:var(--red);font:700 1.6rem/1.3 Kalam,cursive;letter-spacing:.06em;rotate:-6deg}
.updated{color:#666}
.fill{background:var(--marker);padding:0 .2em} /* placeholders the owner fills before launch */
/* Clerk's sign-in and profile boxes (Clerk puts cl-rootBox on the element it mounts into): never wider than the column */
.cl-rootBox,.cl-cardBox{max-width:100%}
.legal{max-width:none;padding:0 calc(var(--margin) + 36px) 40px;font:700 1rem Kalam,cursive;text-align:center}
.legal a{display:inline-flex;align-items:center;min-height:44px}

/* pencil drawings: strokes draw themselves once, labels fade in (only when motion is allowed) */
.ink{fill:none;stroke:var(--pencil);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ink.faint{stroke:#9fb0bf;stroke-width:2}
.red{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lbl{font:700 26px Kalam,cursive;fill:var(--pencil)}
.lbl.r{fill:var(--red)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes show{to{opacity:1}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes swipe{from{background-size:0 42%}}
@keyframes thump{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
.anim h1:not(.cl-rootBox *){animation:write 1s ease-out both}
.anim .mark{animation:swipe .5s .9s ease-out backwards}
.anim .d{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s ease-out forwards;animation-delay:calc(.3s + var(--i,0) * .2s)}
.anim .fade{opacity:0;animation:show .4s ease forwards;animation-delay:calc(.3s + var(--i,0) * .2s)}
.anim .stamp{animation:thump .35s cubic-bezier(.3,1.6,.5,1) 1.4s backwards}

@media (max-width:899px){
  :root{--margin:24px}
  .top,.legal{padding-left:calc(var(--margin) + 18px)}
  .legal{text-align:left}
  main{grid-template-columns:minmax(0,1fr);gap:28px;padding:5vh 18px 6vh calc(var(--margin) + 18px);min-height:0}
  .art{max-width:240px;justify-self:start}
}