/* Scrollstopper · STORYBOARD theme (light). Load LAST, after hub.css and any page css (course.css, drop.css, capture.css).
   Idea: the site is a director's storyboard pad. Cool white paper with faint panel ruling, blue-ink line work, handwritten
   shot notes, one red pencil for the marks that matter.
   Fonts (one Google Fonts link, replaces the hub's): Fraunces (display), Inter (body), Caveat (hand notes), DM Mono (labels).
   Part 1 re-points every hub.css token. Part 2 patches the hub.css rules that hard-code dark colors. Part 3 = sk- utilities.
   New classes are all prefixed sk-. The wobble utilities need the inline <svg class="sk-defs"> block (img/sketch/sk-defs.svg). */

/* =============================================================== 1. tokens */
:root{
  /* paper + ink */
  --sk-paper:#F7F9FC;      /* page: cool white, never cream */
  --sk-sheet:#FFFFFF;      /* cards, panels, inputs */
  --sk-well:#EEF2F9;       /* quiet wells */
  --sk-ink:#2B37B3;        /* blue ink: line work, links, primary buttons (9.1:1 on white) */
  --sk-ink-deep:#1E2799;   /* hover / pressed */
  --sk-pencil:#8FA9E0;     /* blue pencil: decoration only, never text */
  --sk-rule:#D9E2F1;       /* faint panel ruling */
  --sk-red:#C8372D;        /* red pencil: marks, never body copy */
  --sk-red-text:#B4322A;   /* red when it carries words (6.1:1 on white) */
  --sk-graphite:#1E2433;   /* body text (15.6:1 on paper) */
  --sk-graphite-2:#3A4356; /* secondary text (10.2:1) */
  --sk-mute:#556070;       /* muted text (6.2:1 on paper, 6.5:1 on white) */
  --sk-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --sk-rough:7px 11px 8px 12px / 11px 7px 12px 8px;   /* hand-cut corners */
  --sk-rough-2:12px 6px 10px 7px / 6px 10px 7px 12px;

  /* hub.css tokens, re-pointed */
  --bg:var(--sk-paper);
  --surface:var(--sk-sheet);
  --surface-2:var(--sk-well);
  --line:#D5DCEA;
  --line-2:#B9C4DB;
  --text:var(--sk-graphite);
  --mute:var(--sk-mute);
  --ember:var(--sk-ink);        /* the hub's accent becomes blue ink */
  --ember-ink:#FFFFFF;
  --ice:var(--sk-red-text);     /* the hub's second accent becomes red pencil (chips: Launching soon, Free with email) */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}

/* =============================================================== 2. hub.css patches (dark hard-codes) */
body{background-color:var(--sk-paper);background-image:url("img/sketch/ruling.svg");background-size:320px 250px;background-position:center -8px;color:var(--text)}
body::after{opacity:.035;mix-blend-mode:multiply}   /* paper tooth instead of film grain */
h1,h2,h3{font-weight:650;letter-spacing:-.012em;font-variation-settings:"opsz" 96}
h1 em,h2 em,h3 em{color:var(--sk-ink);font-weight:600}
h1 em{background:url("img/sketch/underline-red.svg") left bottom/100% .2em no-repeat;padding-bottom:.08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}   /* red pencil underline, one per line when it wraps */
::selection{background:#DDE3FB;color:var(--sk-graphite)}
:focus-visible{outline:2.5px solid var(--sk-ink);outline-offset:3px}

.slate{color:var(--sk-mute);letter-spacing:.12em}
.slate b{color:var(--sk-ink);font-weight:500}

/* buttons: inked labels. Primary = solid ink with a stamped inner rule; ghost = ink outline. No offset shadows. */
.btn{border-radius:var(--sk-rough);border-width:1.5px;transition:background .15s,color .15s,transform .15s,border-color .15s}
.btn-ember{background:var(--sk-ink);color:#fff;border-color:var(--sk-ink);box-shadow:inset 0 0 0 3px var(--sk-ink),inset 0 0 0 4px rgba(255,255,255,.55)}
.btn-ember:hover{filter:none;background:var(--sk-ink-deep);transform:rotate(-.6deg)}
.btn-ember:active{transform:translateY(1px)}
.btn-ghost{background:var(--sk-sheet);color:var(--sk-ink);border-color:var(--sk-ink)}
.btn-ghost:hover{border-color:var(--sk-ink);background:repeating-linear-gradient(-45deg,rgba(143,169,224,.22) 0 2px,transparent 2px 7px),var(--sk-sheet)}
.btn-amt{font-family:var(--mono);border-left:1px solid rgba(255,255,255,.45)}
.textlink{color:var(--sk-ink);text-decoration-color:rgba(43,55,179,.35);text-decoration-thickness:1.5px}
.textlink:hover{text-decoration-color:var(--sk-red)}
.chip{border-radius:var(--sk-rough-2);border-color:var(--line-2);color:var(--sk-graphite-2);background:var(--sk-sheet)}
.chip-ember{border-color:var(--sk-ink);color:var(--sk-ink)}
.chip-ice{border-color:var(--sk-red-text);color:var(--sk-red-text)}

/* header */
.site-top{background:rgba(247,249,252,.9);border-bottom:0;box-shadow:none}
.site-top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:5px;background:var(--sk-ink);opacity:.85;
  -webkit-mask:url("img/sketch/underline.svg") center/100% 100% no-repeat;mask:url("img/sketch/underline.svg") center/100% 100% no-repeat;pointer-events:none}
.brandmark-glyph polygon{fill:#fff;stroke:var(--sk-red);stroke-width:1.7;stroke-linejoin:round}
.brandmark-glyph rect{fill:var(--sk-ink)}
.brandmark-name{color:var(--sk-graphite)}
.top-nav a{color:var(--sk-graphite-2)}
.top-nav a:hover,.top-nav a[aria-current=page]{color:var(--sk-ink);background:rgba(43,55,179,.07)}
.top-nav .nav-free{color:var(--sk-red-text);border:0;position:relative}
.top-nav .nav-free::before{content:"";position:absolute;inset:-3px -6px;background:var(--sk-red);
  -webkit-mask:url("img/sketch/circle.svg") center/100% 100% no-repeat;mask:url("img/sketch/circle.svg") center/100% 100% no-repeat;pointer-events:none}
.menu-btn{border-radius:var(--sk-rough-2);border-color:var(--sk-ink);color:var(--sk-ink)}
@media (max-width:980px){.menu-panel.on{background:var(--sk-sheet);box-shadow:0 18px 30px -24px rgba(30,36,51,.4)}}

/* frames become storyboard panels: ink line, white mat, pencil outer rule. The picture stays dark for the video. */
.frame{background:#10142A;border:1.5px solid var(--sk-ink);border-radius:4px;box-shadow:0 0 0 5px var(--sk-sheet),0 0 0 6.5px var(--sk-pencil)}
.frame-cap{font-family:var(--sk-hand);font-weight:600;font-size:24px;line-height:1}
.f169 .frame-hud{background:var(--sk-sheet);color:var(--sk-graphite-2);border-bottom:1px solid var(--line)}
.f169 .frame-cap{background:var(--sk-sheet);color:var(--sk-ink);border-top:1px solid var(--line);font-size:24px}
.f169 .frame-rec{background:#9AA3B5}
.snd-btn{background:rgba(255,255,255,.94);color:var(--sk-ink);border:1.5px solid var(--sk-ink);border-radius:var(--sk-rough-2);backdrop-filter:none;-webkit-backdrop-filter:none}
.snd-btn[aria-pressed=true]{border-color:var(--sk-red);color:var(--sk-red-text)}

/* home hero: no glows; on phones the reel sits as a panel under the text instead of behind it */
.hero::before{background:none}
.hero h1{font-size:clamp(42px,6.3vw,86px);line-height:1}
.hero-lede{color:var(--sk-graphite-2)}
.shelfcard{background:var(--sk-sheet);border:1.5px solid var(--sk-ink);border-radius:var(--sk-rough);backdrop-filter:none;-webkit-backdrop-filter:none}
.shelf-clap{background:repeating-linear-gradient(-45deg,var(--sk-ink) 0 12px,#fff 12px 24px);opacity:1;border-bottom:1.5px solid var(--sk-ink)}
.shelf-cell{border-left-color:var(--line)}
.shelf-num{color:var(--sk-ink)}
.shelf-foot{border-top-color:var(--line)}
@media (max-width:860px){
  .hero{min-height:0;display:block}
  .hero::after{display:none}
  .hero-grid{padding-block:36px 28px;gap:28px}
  .hero-reel{position:relative;inset:auto;height:auto;display:flex;justify-content:center}
  .hero-tall{position:relative;inset:auto;width:min(250px,70%);height:auto;border:1.5px solid var(--sk-ink);border-radius:4px;
    box-shadow:0 0 0 5px var(--sk-sheet),0 0 0 6.5px var(--sk-pencil)}
  .hero-tall .frame-pic{position:relative;inset:auto;aspect-ratio:9/16}
  .hero-tall .frame-hud{display:flex}
  .hero-tall .frame-cap{display:block}
  .hero-tall .snd-btn{top:30px;right:8px}
  .hero h1{font-size:clamp(38px,10.4vw,56px)}
}

/* bands, course rows, takes */
.band-head h2{font-size:clamp(34px,4.8vw,56px);line-height:1.02}
.band-head p{color:var(--sk-graphite-2)}
.course{border-top:0;background:url("img/sketch/divider-filmstrip.svg") center top/auto 22px no-repeat}
.course:first-child{background:none}
.course-title{font-size:clamp(34px,4.1vw,52px);line-height:1.02}
.course-by-ring{border:1.5px solid var(--sk-ink);color:var(--sk-ink);border-radius:var(--sk-rough-2)}
.course-outcome{color:var(--sk-graphite)}
.take{background:var(--sk-sheet);border:1px solid var(--line-2);border-radius:var(--sk-rough-2)}
.take-k{border:1.5px solid var(--sk-ink);color:var(--sk-ink);border-radius:50% 46% 52% 48%/48% 52% 46% 50%;font-family:var(--sk-hand);font-size:19px;font-weight:700}
.course-bonus{color:var(--sk-graphite-2)}
.price-was{color:var(--sk-mute);text-decoration-color:var(--sk-red);text-decoration-thickness:2.5px}
.next-line{border-top:1.5px dashed var(--sk-pencil);color:var(--sk-mute)}
.next-line b{color:var(--sk-graphite)}

/* drops, creators, mini courses */
.drop{background:var(--sk-sheet);border:1.5px solid var(--line-2);border-radius:var(--sk-rough)}
.drop:hover{border-color:var(--sk-ink);transform:translateY(-2px) rotate(-.25deg)}
.drop-still{background:#10142A;border-right:1.5px solid var(--sk-ink)}
.drop-what{color:var(--sk-graphite-2)}
.drop-go{color:var(--sk-ink)}
.creator-card{display:flex;flex-direction:column;align-items:stretch;min-height:0;background:var(--sk-sheet);border:1.5px solid var(--line-2);border-radius:var(--sk-rough)}
.creator-card::after{display:none}
.creator-still{position:relative;inset:auto;z-index:auto;height:220px;opacity:1;filter:none;border-bottom:1.5px solid var(--sk-ink)}
.creator-role{color:var(--sk-graphite-2)}
.c-hero::before{background:none}
.c-hero-role{color:var(--sk-ink)}
.c-hero-bio,.page-hero p.lede{color:var(--sk-graphite-2)}
.mini-course{background:var(--sk-sheet);border:1.5px solid var(--line-2);border-radius:var(--sk-rough)}
.mini-still{background:#10142A}

/* footer + sticky bar */
.site-foot{border-top:0;background:url("img/sketch/divider-wave.svg") center top/auto 30px no-repeat}
.foot-col a{color:var(--sk-graphite-2)}
.foot-col a:hover{color:var(--sk-ink)}
.foot-fine{border-top:1px dashed var(--line-2);color:var(--sk-mute)}
.stickybar{background:linear-gradient(180deg,rgba(247,249,252,0),rgba(247,249,252,.96) 34%)}

/* =============================================================== 3. sk- utilities */
/* paper + ruling */
.sk-paper{background:var(--sk-paper) url("img/sketch/ruling.svg") center top/320px 250px}
.sk-sheet{background:var(--sk-sheet)}

/* rough frame: hand-cut corners always; .sk-wobble adds a pencil-wobble outline (needs the sk-defs filter in the page) */
.sk-frame{position:relative;background:var(--sk-sheet);border:1.5px solid var(--sk-ink);border-radius:var(--sk-rough)}
.sk-frame.sk-soft{border-color:var(--line-2)}
.sk-wobble{position:relative}
.sk-wobble::before{content:"";position:absolute;inset:-4px;border:1.2px solid var(--sk-pencil);border-radius:var(--sk-rough-2);filter:url(#sk-wobble);pointer-events:none}

/* storyboard panel: <figure class="sk-panel" data-shot="SHOT 02 · POV · PUSH IN"> image </figure> + optional .sk-notes */
.sk-panel{position:relative;margin:0;padding-top:30px}
.sk-panel::before{content:attr(data-shot);position:absolute;left:2px;top:0;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sk-graphite-2)}
.sk-panel img,.sk-panel svg{display:block;width:100%;height:auto}
.sk-notes{margin:8px 2px 0;font:600 21px/1.15 var(--sk-hand);color:var(--sk-ink);
  background:repeating-linear-gradient(transparent 0 23px,var(--sk-rule) 23px 24px);padding-bottom:1px}

/* storyboard strip: a row on desktop, a swipe row on phones */
.sk-strip{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(18px,2.4vw,32px);align-items:start}
@media (max-width:860px){
  .sk-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-bottom:6px;scrollbar-width:none}
  .sk-strip::-webkit-scrollbar{display:none}
  .sk-strip>*{scroll-snap-align:start}
}

/* hand notes */
.sk-note{font-family:var(--sk-hand);font-weight:600;font-size:clamp(21px,2vw,25px);line-height:1.1;color:var(--sk-ink)}
.sk-note-red{color:var(--sk-red-text)}
.sk-shot{font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sk-graphite-2)}
.sk-shot b{color:var(--sk-red-text);font-weight:500}

/* pencil marks on inline text */
.sk-under,.sk-under-red,.sk-circle,.sk-strike{position:relative;white-space:nowrap}
.sk-under::after,.sk-under-red::after{content:"";position:absolute;left:-2%;right:-3%;bottom:-.14em;height:.32em;background:var(--sk-ink);
  -webkit-mask:url("img/sketch/underline.svg") center/100% 100% no-repeat;mask:url("img/sketch/underline.svg") center/100% 100% no-repeat;pointer-events:none}
.sk-under-red::after{background:var(--sk-red)}
.sk-circle{padding-inline:.18em}
.sk-circle::after{content:"";position:absolute;inset:-.28em -.14em -.22em;background:var(--sk-red);
  -webkit-mask:url("img/sketch/circle.svg") center/100% 100% no-repeat;mask:url("img/sketch/circle.svg") center/100% 100% no-repeat;pointer-events:none}
.sk-strike::after{content:"";position:absolute;left:-4%;right:-4%;top:42%;height:.3em;background:var(--sk-red);
  -webkit-mask:url("img/sketch/strike.svg") center/100% 100% no-repeat;mask:url("img/sketch/strike.svg") center/100% 100% no-repeat;pointer-events:none}

/* annotation arrow: <span class="sk-arrow" aria-hidden="true"></span>; flip with .sk-arrow-l, turn with .sk-arrow-down */
.sk-arrow{display:inline-block;width:72px;height:48px;background:currentColor;color:var(--sk-ink);vertical-align:middle;
  -webkit-mask:url("img/sketch/arrow-curl.svg") center/contain no-repeat;mask:url("img/sketch/arrow-curl.svg") center/contain no-repeat}
.sk-arrow-red{color:var(--sk-red)}
.sk-arrow-l{transform:scaleX(-1)}
.sk-arrow-down{transform:rotate(68deg)}
.sk-arrow-up{transform:rotate(-58deg) scaleY(-1)}

/* dividers */
.sk-divider{height:32px;border:0;margin:clamp(24px,4vw,48px) auto;background:url("img/sketch/divider-wave.svg") center/auto 100% no-repeat}
.sk-divider-film{background-image:url("img/sketch/divider-filmstrip.svg")}
.sk-divider-scribble{background-image:url("img/sketch/divider-scribble.svg")}

/* stamps and tags */
.sk-stamp{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 5px;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-red-text);border:2px solid currentColor;border-radius:4px;box-shadow:inset 0 0 0 2px var(--sk-sheet),inset 0 0 0 3px currentColor;
  transform:rotate(-3deg);background:rgba(255,255,255,.7)}
.sk-stamp-ink{color:var(--sk-ink)}
.sk-tag{display:inline-flex;align-items:center;gap:6px;font:600 19px/1 var(--sk-hand);color:var(--sk-ink);padding:4px 10px 5px;
  border:1.5px solid var(--sk-ink);border-radius:var(--sk-rough-2);background:var(--sk-sheet)}

/* checklist with red pencil checks */
.sk-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sk-checks li{position:relative;padding-left:30px}
.sk-checks li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:22px;background:var(--sk-red);
  -webkit-mask:url("img/sketch/check.svg") center/contain no-repeat;mask:url("img/sketch/check.svg") center/contain no-repeat}

/* camera-move key: <span class="sk-cam"><img src="img/sketch/cam-push-in.svg" alt=""> Push in</span> */
.sk-cam{display:inline-grid;justify-items:center;gap:2px;font:600 20px/1 var(--sk-hand);color:var(--sk-ink)}
.sk-cam img{width:96px;height:auto}

/* hatching for emphasis blocks */
.sk-hatch{background:repeating-linear-gradient(-45deg,rgba(143,169,224,.2) 0 1.5px,transparent 1.5px 8px),var(--sk-sheet)}

/* forms: fields are white cards with an ink edge; focus = pencil-blue ring */
.sk-form{display:grid;gap:12px}
.sk-label{font:500 11.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sk-graphite-2)}
.sk-field{width:100%;min-height:52px;padding:13px 15px;font:500 16px/1.3 var(--body);color:var(--sk-graphite);background:var(--sk-sheet);
  border:1.5px solid var(--sk-ink);border-radius:var(--sk-rough-2);-webkit-appearance:none;appearance:none}
.sk-field::placeholder{color:#7A8496}
.sk-field:focus{outline:none;box-shadow:0 0 0 4px rgba(143,169,224,.55)}
.sk-row{display:flex;flex-wrap:wrap;gap:10px}
.sk-row .sk-field{flex:1 1 220px}
.sk-fine{font-size:13.5px;color:var(--sk-mute)}

@media (prefers-reduced-motion:reduce){.btn-ember:hover,.drop:hover{transform:none}}
/* captions that sit on the video keep white text */
.f916 .frame-cap{color:#fff}
/* hub course strips: keep the first panel's mat inside the gutter on phones */
@media (max-width:860px){.course-strip{scroll-padding-inline:var(--gutter);padding-top:8px}}