/* Site frame: navigation + footer, shared by every page.
   Idea: the page opens and closes with a peek (Cubi over the hero board, Cubi and Mini over the footer card);
   the footer card mirrors the hero picture: same width, same big top-left corner. */

/* the full brand palette as variables (style.css only had mint and yellow); used e.g. by the tutorial "accent" frame */
:root{--pink:#ff85d5;--lavender:#b0a3ef;--blue:#00c2e4}
html{scroll-padding-top:100px}
.brand{display:block;flex-shrink:0;line-height:0}
.brand img{display:block;height:28px;width:auto}
.site-nav .brand img{height:31px}
.foot-brand img{height:26px}
/* neutralise old per-page header styles */
.inner-page header.site-nav{border-bottom:0}
.site-nav nav a[aria-current=page]{border-bottom:0;padding-bottom:6px;font-weight:600}

/* ---------- Navigation: light at the top, a floating cream pill once you scroll ---------- */
.site-nav{position:sticky;top:0;z-index:30;height:auto;max-width:none;padding:14px clamp(16px,2.2vw,36px);margin:0;display:block;transition:padding .3s ease}
/* layout B (13.10.2026): links left, logo in the middle of the page, actions right */
.nav-inner{width:min(1296px,90%);margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:12px 0;border-radius:40px;transition:background .3s,box-shadow .3s,padding .3s,width .3s}
.site-nav.is-floating .nav-inner{width:min(1320px,94%);background:var(--cream);box-shadow:0 10px 30px #2024281a,0 0 0 1px #2024280f;padding:8px 10px 8px 26px;}
.site-nav nav{gap:30px}
.site-nav nav a{position:relative;padding:6px 2px}
.site-nav nav a[aria-current=page]{background-size:100% .5em}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.nav-yt{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #20242826;transition:background .2s,box-shadow .2s}
.nav-yt svg{width:20px;height:20px;fill:var(--ink)}
.nav-yt:hover{background:var(--ink);box-shadow:none}.nav-yt:hover svg{fill:#fff}
.nav-cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:30px;padding:11px 18px;font-size:14px;font-weight:500}
/* Text links: on hover the mint highlighter stroke draws in from left to right, like marking it with a pen */
.soft-link,.site-nav nav a,.foot-links a{background:var(--marker-mint) no-repeat 0 92%/0% .5em;transition:background-size .35s cubic-bezier(.25,.8,.3,1)}
.soft-link:hover,.site-nav nav a:hover,.foot-links a:hover{background-size:100% .5em}
@media(prefers-reduced-motion:reduce){.soft-link,.site-nav nav a,.foot-links a{transition:none}}
/* Buttons: text and arrow sit together (style.css had a 35px gap) */
.button,.h-actions .button{gap:12px}
/* Buttons: a gentle scale on hover instead of a jump (style.css had a 3px jump with no transition) */
.button,.nav-cta-btn,.project-download{transition:transform .28s cubic-bezier(.25,.8,.3,1),box-shadow .28s ease,background-color .2s ease,color .2s ease}
.button:hover,.nav-cta-btn:hover,.project-download:hover{transform:scale(1.03)}
.button:active,.nav-cta-btn:active,.project-download:active{transform:scale(.98);transition-duration:.1s}
@media(prefers-reduced-motion:reduce){.button:hover,.nav-cta-btn:hover,.project-download:hover{transform:none}}

/* ---------- Footer: a light warm band; Cubi and Mini peek over its top edge (the bookend to the hero peek) ---------- */
/* overflow-x:clip: the flying notes may not widen a narrow phone page; the top (Mini, singers) stays visible */
.site-foot{position:relative;overflow-x:clip;display:block;border:0;width:auto;max-width:none;margin:210px 0 0;padding:0;background:#f0ede2}
.foot-peek{position:absolute;z-index:0;top:-78px;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:4px;pointer-events:none}
.foot-cubi{width:112px;transform:rotate(-4deg)}
.foot-mini{width:80px;transform:rotate(6deg) translateY(10px)}
.foot-inner{position:relative;z-index:1;width:min(1296px,90%);margin:auto;padding:56px 0 26px}
.site-foot::before{content:'';position:absolute;z-index:1;inset:0 0 auto 0;height:100%;background:inherit}
.foot-top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(40px,6vw,96px);padding-bottom:40px}
.foot-line{font:600 22px/1.3 Rubik,sans-serif;letter-spacing:-.01em;margin:18px 0 0}
.foot-cols{display:grid;grid-template-columns:auto auto;gap:24px clamp(56px,7vw,112px);align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 28px}
.foot-cols a{display:block;width:fit-content;padding:4px 0;font-size:16px}
.foot-socials{display:flex;flex-wrap:wrap;gap:8px;max-width:260px}
.foot-cols a.foot-social{width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1px #20242830;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.foot-social svg{width:20px;height:20px;fill:currentColor}
.foot-cols a.foot-social:hover{background:var(--ink);color:#fff;box-shadow:none;transform:translateY(-2px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #20242818;font-size:12px;color:#6b6d6e}
.foot-bottom small{font-size:12px;flex:1 1 420px}
.foot-top-link{color:var(--ink);border-bottom:1px solid;padding-bottom:2px}

@media(max-width:900px){
  /* phones and tablets: logo centred on top (YouTube on the right), links in a row below */
  .nav-inner{grid-template-columns:1fr auto 1fr;row-gap:12px}
  .site-nav .brand{grid-column:2;grid-row:1}
  .nav-right{grid-column:3;grid-row:1}
  .site-nav nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px}
  .site-nav.is-floating .nav-inner{padding:10px 16px}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .foot-peek{top:-66px}.foot-cubi{width:94px}.foot-mini{width:66px}
}
@media(max-width:560px){
  .nav-cta-btn{display:none}
  .foot-links{gap:4px 22px}
  .foot-cols{grid-template-columns:1fr}
  .foot-socials{max-width:none}
  .brand img,.site-nav .brand img{height:25px}
}

/* ---------- Soft reveal on scroll (frame.js adds .reveal / .is-in; html.js-reveal is set in <head> so nothing flashes) ---------- */
.js-reveal .reveal{opacity:0;translate:0 18px;transition:opacity .7s ease var(--reveal-delay,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.js-reveal .reveal.is-in{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;translate:none;transition:none}}
@media print{.js-reveal .reveal{opacity:1;translate:none}}

/* Outline button that leaves the site (YouTube, Pinterest); built by ext_button() in _build/frame.py */
.ext-btn{display:inline-flex;align-items:center;gap:9px;border:1px solid #20242830;border-radius:30px;padding:10px 16px 10px 13px;font-size:15px;font-weight:600;line-height:1.2;transition:border-color .2s,transform .28s cubic-bezier(.25,.8,.3,1)}
.ext-btn svg{width:20px;height:20px;flex:none;fill:currentColor;fill-rule:evenodd}
.ext-youtube svg{color:#ff0033}
.ext-pinterest svg{color:#e60023}
.ext-btn span{font-weight:400}
.ext-btn:hover{border-color:var(--ink);transform:scale(1.03)}
.ext-btn:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.ext-btn:hover{transform:none}}

/* Project card: one card for the whole site (home, Let's make, Up next); markup from _build/cards.py */
.pc{display:block;position:relative}
.pc-img{position:relative;z-index:1;aspect-ratio:1;border-radius:22px;overflow:hidden;background:#eee4d6}
.pc-img>img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
a.pc:hover .pc-img>img{transform:scale(1.04)}
.pc .rail-pills{position:absolute;left:12px;top:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px}
.pc-free,.pc-soon{position:absolute;bottom:12px;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:600;line-height:1}
.pc-free{left:12px;background:var(--mint)}
/* Fan favourite (10k+ YouTube views, cards.py): yellow pill bottom-right; on phones only the star */
.pc-fav{position:absolute;right:12px;bottom:12px;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:700;line-height:1;background:var(--yellow);color:var(--ink)}
.pc-soon{right:12px;background:var(--ink);color:#fff}
.pc .h-concept{position:absolute;right:12px;bottom:12px;background:#ffffffd9;border-radius:6px;padding:4px 7px;font-size:10px;letter-spacing:.08em;color:#55585b}
.pc.is-soon .pc-free{display:none}
.pc.is-soon .pc-img>img{filter:saturate(.75);opacity:.85}
.pc-cat{font-size:13px;color:#626466;margin:16px 2px 4px}
.pc h3{font-size:21px;letter-spacing:-.02em;line-height:1.2;margin:0 2px 6px}
a.pc h3{display:inline;background:var(--marker-mint) no-repeat 0 92%/0% .42em;transition:background-size .35s cubic-bezier(.25,.8,.3,1)}
a.pc:hover h3{background-size:100% .42em}
a.pc h3+.pc-copy{margin-top:6px}
.pc-copy{font-size:15px;line-height:1.5;color:#626466;margin:0 2px}
@media(max-width:760px){
  .pc h3{font-size:17px}.pc-copy{font-size:13px}.pc-cat{font-size:12px;margin-top:12px}
  .pc .rail-pills{left:8px;top:8px}.pc .rail-pill{font-size:11px;padding:6px 9px 6px 8px}
  .pc-free,.pc-soon{font-size:11px;bottom:8px}.pc-free{left:8px}.pc-soon{right:8px}.pc-fav{right:8px;bottom:8px;width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:13px}.pc-fav-t{display:none}
}

/* Navigation: ghost Subscribe on YouTube (replaces the YouTube icon + the old dark CTA) */
.nav-sub{font-size:14px;padding:10px 16px 10px 13px}
.nav-sub span{font-weight:600}
/* filled in Mini's yellow: a ghost outline got lost against the pill's outline, black fought with the red icon */
.nav-sub{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.nav-sub:hover{border-color:var(--yellow)}
.nav-sub svg{color:var(--ink)}
@media(max-width:1100px){.nav-sub-long{display:none}}
@media(max-width:560px){.nav-sub{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}.nav-sub>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}

/* Navigation as a pill from the very top (13.10.2026 try): light outline + soft shadow; scrolling only deepens the shadow */
.nav-inner{background:var(--cream);box-shadow:0 0 0 1px #2024281c,0 8px 24px #2024280d;padding:8px 10px 8px 26px}
.site-nav.is-floating .nav-inner{box-shadow:0 0 0 1px #2024281c,0 12px 32px #2024281f}
@media(max-width:900px){.nav-inner{padding:10px 12px 10px 16px}}

/* ---------- Cubi's song (song.js): lyrics line shared by every player ---------- */
/* lyrics: one line at a time; words brighten as they are sung, a yellow dot hops over the current word */
.sp-lyrics{position:relative;min-height:1.5em;margin:0;text-align:center;font:600 18px/1.4 Rubik,sans-serif;letter-spacing:-.01em;color:#4a4566;opacity:0;transition:opacity .35s}
.sp-lyrics.show{opacity:1}
.sp-lyrics span{opacity:.38;transition:opacity .25s}
.sp-lyrics span.sung{opacity:.8}
.sp-lyrics span.now{opacity:1}
.sp-dot{position:absolute;width:9px;height:9px;margin:-14px 0 0 -4.5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px #4a4566;transition:left .22s cubic-bezier(.3,.7,.3,1)}
@keyframes spHop{0%{translate:0 0}40%{translate:0 -9px}100%{translate:0 0}}
.sp-dot.hop{animation:spHop .32s ease-out}
.sp-dot.is-cubi{background:var(--mint)}
@media(prefers-reduced-motion:reduce){.sp-dot.hop{animation:none}.sp-dot{transition:none}}

/* Footer: a little note button next to Cubi and Mini; while it plays they bob and sing the lyrics in a bubble */
.foot-sing{position:absolute;inset:0 0 auto;height:0}
.foot-song{position:absolute;z-index:2;top:-50px;left:calc(50% + 112px)}
.foot-song .sp-btn{width:42px;height:42px;border:0;border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 6px 16px #2024281f;transition:transform .25s cubic-bezier(.25,.8,.3,1)}
.foot-song .sp-btn:hover{transform:scale(1.08) rotate(-6deg)}
.foot-song .sp-btn svg{width:20px;height:20px;fill:var(--ink);margin-left:-1px}
.foot-song.playing .sp-btn{animation:footPulse 1.8s ease-in-out infinite}
@keyframes footPulse{50%{box-shadow:0 0 0 8px #feda6259,0 6px 16px #2024281f}}
.foot-song-tip{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 4px;white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;font-weight:600;border-radius:8px;padding:6px 9px;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s}
.foot-song:hover .foot-song-tip,.foot-song .sp-btn:focus-visible+.foot-song-tip{opacity:1;translate:-50% 0}
.foot-song.playing .foot-song-tip{display:none}
.foot-song .sp-pause{display:none}.foot-song.playing .sp-play{display:none}.foot-song.playing .sp-pause{display:block}
/* notes float up around Cubi and Mini while they sing */
/* the notes rise beside the characters (two left of Cubi, two right of the button), never across their faces */
.foot-notes{position:absolute;z-index:2;left:50%;top:-40px;width:340px;height:0;margin-left:-170px;pointer-events:none}
.foot-notes i{position:absolute;font-style:normal;font-size:22px;color:#7254c4;opacity:0}
.foot-notes i:nth-child(1){left:-2%}.foot-notes i:nth-child(2){left:12%;font-size:26px}.foot-notes i:nth-child(3){left:97%}.foot-notes i:nth-child(4){left:109%;font-size:20px}
@keyframes footNote{0%{opacity:0;translate:0 20px}20%{opacity:1}100%{opacity:0;translate:8px -46px}}
@keyframes footNoteL{0%{opacity:0;translate:0 20px}20%{opacity:1}100%{opacity:0;translate:-10px -46px}}
.site-foot .is-singing .foot-notes i{animation:footNote 2.6s ease-out infinite}
.site-foot .is-singing .foot-notes i:nth-child(-n+2){animation-name:footNoteL}
.site-foot .is-singing .foot-notes i:nth-child(2){animation-delay:.65s}.site-foot .is-singing .foot-notes i:nth-child(3){animation-delay:1.3s}.site-foot .is-singing .foot-notes i:nth-child(4){animation-delay:1.95s}
.foot-lyrics{position:absolute;z-index:2;left:50%;bottom:96px;translate:-50% 6px;white-space:nowrap;background:var(--cream);border-radius:18px;padding:18px 18px 10px;font-size:16px;box-shadow:0 10px 26px #2024281f;transition:opacity .3s,translate .3s}
.foot-lyrics.show{translate:-50% 0}
.foot-lyrics:after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--cream);border-bottom:0}
.foot-lyrics:empty{display:none}
@keyframes footBob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.site-foot .is-singing .foot-cubi{animation:footBob .9s ease-in-out infinite}
.site-foot .is-singing .foot-mini{animation:footBob .9s ease-in-out .45s infinite}
@media(prefers-reduced-motion:reduce){.site-foot .is-singing .foot-cubi,.site-foot .is-singing .foot-mini,.foot-song.playing .sp-btn,.site-foot .is-singing .foot-notes i{animation:none}}
@media(max-width:900px){.foot-song{top:-44px;left:calc(50% + 90px)}.foot-lyrics{bottom:84px;font-size:14px}}

/* ---------- Entrance of the top block on the inner pages (15.10.2026): the same soft motion as the home hero —
   the picture settles in, the text rises line by line, the marker under the headline draws itself last.
   Animations win over the scroll reveal while they run and hold their end state, so the two never fight. ---------- */
@keyframes pgPic{from{opacity:0;scale:1.03}to{opacity:1;scale:1}}
@keyframes pgUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
@keyframes pgMarker{from{background-size:0% .36em}to{background-size:100% .36em}}
.js-reveal :is(.cat-head h1,.pa-hero h1,.ct-copy h1,.pp-copy h1){animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .15s both}
.js-reveal :is(.cat-head h1,.pa-hero h1,.ct-copy h1,.pp-copy h1,.rail-title h1) span{animation:pgMarker .8s cubic-bezier(.6,.1,.3,1) .9s both}
.js-reveal :is(.pa-hero,.ct-copy,.pp-copy) .eyebrow{animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .05s both}
.js-reveal :is(.cat-head,.pa-hero,.ct-copy,.pp-copy) .intro{animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .3s both}
.js-reveal :is(.pa-hero .h-actions,.ct-mail,.pp-pills){animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .42s both}
.js-reveal :is(.ct-address,.pp-download){animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .52s both}
.js-reveal .pp-tut-fan{animation:pgUp 1s cubic-bezier(.2,.7,.2,1) .7s both}
/* pictures: settle in */
.js-reveal :is(.pa-pic,.pp-gallery,.cat-feat){animation:pgPic 1.3s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .ct-cubi{animation:pgUp 1s cubic-bezier(.2,.7,.2,1) .35s both}
.js-reveal .cat-tools{animation:pgUp .8s cubic-bezier(.2,.7,.2,1) .5s both}
/* tutorial: the side panel and the video arrive together */
.js-reveal .tut .breadcrumbs{animation:pgUp .7s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .tut-rail{animation:pgUp .9s cubic-bezier(.2,.7,.2,1) .1s both}
.js-reveal .tut-body>.tut-section:first-child{animation:pgUp 1s cubic-bezier(.2,.7,.2,1) .25s both}
@media(prefers-reduced-motion:reduce){.js-reveal :is(.cat-head h1,.pa-hero h1,.ct-copy h1,.pp-copy h1,.rail-title h1,.rail-title h1 span,.cat-head h1 span,.pa-hero h1 span,.ct-copy h1 span,.pp-copy h1 span,.pa-hero .eyebrow,.ct-copy .eyebrow,.pp-copy .eyebrow,.intro,.h-actions,.ct-mail,.pp-pills,.ct-address,.pp-download,.pp-tut-fan,.pa-pic,.pp-gallery,.cat-feat,.ct-cubi,.cat-tools,.breadcrumbs,.tut-rail,.tut-section){animation:none}}

/* ---------- Phones (15.10.2026): the menu box is as wide as the page content (the hero picture), softer corners,
   and the three links sit together in the middle instead of being pushed to the edges ---------- */
@media(max-width:900px){
  .site-nav{padding-inline:0}
  .nav-inner,.site-nav.is-floating .nav-inner{width:90%;border-radius:24px}
  .site-nav nav{justify-content:center;gap:clamp(20px,7vw,40px)}
}
/* in-between widths (laptop half screen, big tablets): the links never break into two lines and stay close together */
.site-nav nav a{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){
  .nav-inner{gap:16px}
  .site-nav nav{gap:clamp(14px,1.9vw,30px)}
}
@media(min-width:901px) and (max-width:960px){.site-nav nav{gap:14px}.site-nav nav a{font-size:14px}.nav-inner{padding-left:20px}}