/* Home page v2 (prototype). Builds on style.css (header, footer, tokens, buttons)
   and tutorial.css (marker underline, pills, difficulty dots). */

.home main>section{width:min(1296px,90%);margin-left:auto;margin-right:auto}
.home .eyebrow{font-size:12px;letter-spacing:.12em;font-weight:600;margin:0 0 16px}
.home h2{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.04em;line-height:1.05;margin:0}
.home .arrow{display:inline-block;margin-left:10px}

/* ---------- Hero ---------- */
.h-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;padding:40px 0 90px}
.h-hero h1{font-size:clamp(56px,5.8vw,86px);margin:0 0 26px}
.h-hero .intro{font-size:19px;line-height:1.6;margin:0 0 32px;max-width:440px}
.h-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.h-actions .button{gap:14px}
.h-actions .soft-link{font-size:15px;border-bottom:1px solid;padding-bottom:4px}

.h-stage{position:relative;padding-bottom:70px}
.h-square{position:relative;aspect-ratio:1;max-width:540px;margin-left:auto;border-radius:120px 28px 28px 28px;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 112'%3E%3Cg stroke-width='4' stroke-linecap='round'%3E%3Cpath stroke='%2351f4d8' d='M20 14v12M14 20h12'/%3E%3Cpath stroke='%23feda62' d='M76 30v12M70 36h12'/%3E%3Cpath stroke='%23ff85d5' d='M36 76v12M30 82h12'/%3E%3Cpath stroke='%23b0a3ef' d='M92 86v12M86 92h12'/%3E%3C/g%3E%3C/svg%3E") 0 0/112px 112px;
  box-shadow:inset 0 0 0 1px #2024280f}
.h-cubi{position:absolute;right:12%;bottom:12%;width:48%;transform:rotate(3deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.h-square:hover .h-cubi{transform:rotate(-2deg) translateY(-6px)}
.h-bubble{position:absolute;left:9%;top:11%;max-width:62%;margin:0;background:var(--cream);border-radius:22px;padding:18px 22px;font:600 clamp(18px,1.6vw,23px)/1.25 Rubik,sans-serif;letter-spacing:-.01em;box-shadow:0 12px 30px #2024281a}
.h-bubble:after{content:'';position:absolute;right:22%;bottom:-14px;border:9px solid transparent;border-top:14px solid var(--cream);border-bottom:0}

.h-video{position:absolute;left:0;bottom:0;width:min(58%,330px);background:#fff;border-radius:18px;padding:10px 10px 14px;box-shadow:0 18px 40px #2024281f;transform:rotate(-3deg);transition:transform .25s ease}
.h-video:hover{transform:rotate(-1deg) translateY(-4px)}
.h-video figure{position:relative;margin:0}
.h-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px}
.h-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--cream);display:grid;place-items:center;box-shadow:0 6px 16px #20242833}
.h-play svg{width:18px;height:18px;margin-left:3px;fill:var(--ink)}
.h-new{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:600;letter-spacing:.06em}
.h-video b{display:block;font:600 16px/1.25 Rubik,sans-serif;margin:12px 4px 2px}
.h-video small{display:block;font-size:13px;color:#626466;margin:0 4px}

/* Hero (variant F, chosen 12.10.2026): B-width picture; board holds only the text (left ~60%); the video card sits to its right, lower, over the picture edge */
.hf{position:relative;padding:22px 0 100px;--pic-h:clamp(320px,27vw,500px);--board-w:min(60%,780px);--card-w:min(320px,26%);--overhang:60px;
  /* centre the board + card group optically under the picture */
  --inset:calc((100% - var(--board-w) - var(--card-w) + var(--overhang)) / 2)}
.hf-pic{height:var(--pic-h);border-radius:120px 28px 28px 28px;background:url(assets/hero-craft-room.jpg) center 92%/cover no-repeat}
.hf-board{position:relative;width:var(--board-w);margin:-120px 0 0 var(--inset);background:var(--cream);border-radius:28px 28px 120px 28px;padding:34px 52px 40px;box-shadow:0 24px 60px #2024281a}
.hf-board .eyebrow{margin-bottom:16px}
.hf-board h1{font-size:clamp(44px,4.2vw,64px);margin:0 0 18px}
.hf-board .intro{font-size:18px;line-height:1.6;margin:0 0 28px;max-width:500px}
.hf>.h-video{z-index:2;left:calc(var(--inset) + var(--board-w) - var(--overhang));bottom:auto;top:calc(22px + var(--pic-h) - 70px);width:var(--card-w);transform:rotate(3deg)}
.hf>.h-video:hover{transform:rotate(1deg) translateY(-4px)}
@media(max-width:1100px){
  .hf{--pic-h:340px}
  .hf-pic{border-radius:72px 20px 20px 20px;background-position:58% 40%}
  .hf-board{width:auto;margin:-80px 0 0 12px;padding:30px 24px 34px;border-radius:20px 20px 72px 20px}
  .hf>.h-video{position:relative;left:auto;top:auto;display:block;width:min(300px,80%);margin:-24px 0 0 auto;transform:rotate(-2deg)}
}

/* ---------- How it works ---------- */
/* contained card like the other colour blocks; the footer stays the only full-width band */
.home main>section.h-how{background:#f0ede2;border-radius:32px;padding:clamp(36px,5vw,70px);margin-bottom:110px}
.h-inner{width:auto}
.h-how-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.h-how-head p{max-width:360px;margin:0;color:#55585b}
.h-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.h-how li{background:var(--cream);border-radius:24px;padding:28px 28px 30px}
.h-how .num{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px}
.h-how .num svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h-how li:nth-child(1) .num{background:var(--mint)}
.h-how li:nth-child(2) .num{background:var(--yellow)}
.h-how li:nth-child(3) .num{background:#ff85d5}
.h-how .soon{display:inline-block;vertical-align:middle;margin-left:8px;font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;background:#dbd3f4;border-radius:20px;padding:6px 9px}
.h-how h3{font-size:24px;letter-spacing:-.02em;margin:0 0 8px}
.h-how li p{margin:0;font-size:16px;line-height:1.55}

/* ---------- Latest makes ---------- */
.h-latest{padding:0 0 110px}
.h-latest-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:52px}
.h-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* ---------- Meet Cubi and Mini ---------- */
.h-meet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;background:#dbd3f4;border-radius:32px;padding:clamp(36px,5vw,70px);margin-bottom:110px}
.h-meet-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.h-meet-art figure{margin:0;text-align:center}
.h-meet-art img{width:100%;max-width:220px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.h-meet-art figure:hover img{transform:translateY(-8px) rotate(-3deg)}
.h-meet-art figure:nth-child(2) img{max-width:160px}
.h-meet-art figcaption{margin-top:14px;font:600 18px Rubik,sans-serif}
.h-meet-art figcaption small{display:block;font:400 14px 'DM Sans',sans-serif;color:#4c4a5c;margin-top:2px}
.h-meet-copy p{font-size:18px;line-height:1.65;margin:20px 0 0;max-width:520px}
.h-meet-copy p.last{font:600 20px/1.4 Rubik,sans-serif;letter-spacing:-.01em}

/* ---------- Printables ---------- */
.h-print{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center;background:var(--yellow);border-radius:32px;padding:clamp(28px,4vw,56px);margin-bottom:110px}
/* printable templates fanned out like a hand of cards; on hover the fan opens wider */
.p-fan{position:relative;aspect-ratio:1.3;max-width:620px;width:100%}
.p-sheet{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:297/210;margin:-20.5% 0 0 -29%;background:#fff;border-radius:6px;padding:9px;box-shadow:0 14px 30px #6b4f0029;
  --d:calc(var(--i) - 1.5);rotate:calc(var(--d) * 10deg);translate:calc(var(--d) * 22%) calc(var(--d) * var(--d) * 9%);transition:rotate .55s cubic-bezier(.3,1.3,.5,1),translate .55s cubic-bezier(.3,1.3,.5,1)}
.p-sheet img{display:block;width:100%;height:100%;object-fit:contain}
.h-print:hover .p-sheet{rotate:calc(var(--d) * 14deg);translate:calc(var(--d) * 34%) calc(var(--d) * var(--d) * 13%)}
@media(prefers-reduced-motion:reduce){.p-sheet{transition:none}}
.h-print p:not(.eyebrow){font-size:18px;line-height:1.6;margin:20px 0 28px;max-width:440px}

/* ---------- Grown-ups ---------- */
.h-grown{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px);align-items:center;margin-bottom:110px}
.h-grown img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
.h-grown p:not(.eyebrow){font-size:18px;line-height:1.6;margin:20px 0 26px;max-width:470px}
.h-grown .soft-link{font-size:15px;border-bottom:1px solid;padding-bottom:4px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .h-hero,.h-meet,.h-print,.h-grown{grid-template-columns:1fr}
  .h-stage{max-width:560px;width:100%;margin:0 auto}
  .h-square{margin:0 auto}
  .h-how ol{grid-template-columns:1fr 1fr}
  /* tablets: all three favourites stay in one row (15.10.2026; two looked like something was missing) */
  .h-grid{gap:18px}
}
@media(max-width:700px){.h-grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .h-hero{padding-top:20px}
  .h-how-head,.h-latest-head{flex-direction:column;align-items:flex-start}
  .h-how ol,.h-grid{grid-template-columns:1fr}
  .h-video{width:68%}
  .h-cubi{width:38%;right:10%;bottom:10%}
  .h-bubble{font-size:17px;padding:14px 16px;max-width:70%}
  .h-meet-art{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.home *{transition:none!important}}

/* ---------- Hero entrance on page load (CSS only; gated by html.js-reveal set in <head>) ---------- */
@keyframes heroPic{from{opacity:0;scale:1.03}to{opacity:1;scale:1}}
@keyframes heroUp{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
@keyframes heroMarker{from{background-size:0% .36em}to{background-size:100% .36em}}
.js-reveal .hf-pic{animation:heroPic 1.3s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .hf-board{animation:heroUp .9s cubic-bezier(.2,.7,.2,1) .15s both}
.js-reveal .hf-board .eyebrow{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .3s both}
.js-reveal .hf-board h1{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .4s both}
.js-reveal .hf-board h1 span{animation:heroMarker .8s cubic-bezier(.6,.1,.3,1) 1s both}
.js-reveal .hf-board .intro{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .55s both}
.js-reveal .hf-board .h-actions{animation:heroUp .8s cubic-bezier(.2,.7,.2,1) .65s both}
.js-reveal .hf>.h-video{animation:heroUp 1s cubic-bezier(.2,.7,.2,1) .85s both}
@media(prefers-reduced-motion:reduce){.js-reveal .hf-pic,.js-reveal .hf-board,.js-reveal .hf-board *,.js-reveal .hf>.h-video{animation:none}}

/* ---------- Cubi's song (Meet Cubi and Mini, variant B, 13.10.2026). Behaviour: song.js. Never plays on its own. ---------- */
.song{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:14px;background:var(--cream);border-radius:40px;padding:8px 22px 8px 8px;margin-top:24px;box-shadow:0 8px 24px #2024281a;min-width:300px}
.sp-btn{width:48px;height:48px;flex:none;border:0;border-radius:50%;background:var(--yellow);display:grid;place-items:center;transition:transform .25s cubic-bezier(.25,.8,.3,1)}
.sp-btn:hover{transform:scale(1.07)}.sp-btn:active{transform:scale(.95)}
.sp-btn svg{width:20px;height:20px;fill:var(--ink)}
.sp-pause{display:none}.song.playing .sp-play{display:none}.song.playing .sp-pause{display:block}
.sp-info{flex:1;min-width:0}
.sp-info b{display:block;font:600 16px Rubik,sans-serif;letter-spacing:-.01em}
.sp-sub{font-size:13px;color:#626466}
.sp-bar{height:4px;border-radius:4px;background:#2024281a;margin-top:7px;overflow:hidden;cursor:pointer}
.sp-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:4px}
/* lyrics line and hopping dot: frame.css (shared with the footer) */
.h-meet .sp-lyrics{grid-column:1/-1;justify-self:center;margin:26px 0 0}
/* characters dance while the song plays */
@keyframes spBob{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -10px;rotate:-4deg}75%{translate:0 -4px;rotate:3deg}}
.is-singing .h-meet-art figure img{animation:spBob .9s ease-in-out infinite}
.is-singing .h-meet-art figure:nth-child(2) img{animation-delay:.45s}
.sp-notes{position:absolute;left:0;right:0;top:-10px;height:0;pointer-events:none}
.sp-notes i{position:absolute;font-style:normal;font-size:26px;opacity:0;color:#7254c4}
.sp-notes i:nth-child(1){left:22%}.sp-notes i:nth-child(2){left:50%;font-size:30px}.sp-notes i:nth-child(3){left:76%}
@keyframes spFloat{0%{opacity:0;translate:0 30px}20%{opacity:1}100%{opacity:0;translate:10px -40px}}
.is-singing .sp-notes i{animation:spFloat 2.4s ease-out infinite}
.is-singing .sp-notes i:nth-child(2){animation-delay:.8s}.is-singing .sp-notes i:nth-child(3){animation-delay:1.6s}
@media(prefers-reduced-motion:reduce){.is-singing .h-meet-art figure img,.is-singing .sp-notes i{animation:none}}
@media(max-width:760px){.song{min-width:0;width:100%}}

/* Cubi's tiny houses (14.10.2026; a carousel of all of them; the scroll reveal owns `translate`, so the offset is a margin and the hover lift a transform): process videos, not tutorials. Postcards like the one on the printable pages,
   slightly scattered; each opens the video on YouTube in a new tab. Cards come from _content/houses.json (build_catalog.py). */
.h-houses{padding:0 0 110px}
.h-houses-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:44px}
.h-houses-head p:not(.eyebrow){margin:14px 0 0;max-width:520px;font-size:17px;line-height:1.55;color:#45484b}
.h-houses-nav{display:flex;align-items:center;gap:10px}
.h-houses-nav .soft-link{margin-right:14px}
.h-car-btn{width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 2px #2024281a,0 6px 16px #2024281a;display:grid;place-items:center;cursor:pointer;transition:transform .2s,opacity .2s}
.h-car-btn svg{width:20px;height:20px}.h-car-btn.prev svg{rotate:180deg}
.h-car-btn:hover{transform:scale(1.06)}
.h-car-btn:disabled{opacity:.35;cursor:default;transform:none}
/* carousel inside the content width: exactly five whole postcards in view, the arrows move to the next five */
.h-houses-row{--gap:24px;--pad:56px;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:-34px calc(-1 * var(--pad)) -26px;padding:48px var(--pad) 60px;scroll-padding:0 var(--pad)}
/* the scroll box clips what sticks out, so it gets room all around for the swing and the shadow (the margins cancel it
   in the layout); cards that reach into that room are faded out by frame.js (--edge), so still five whole cards show */
.h-houses .h-houses-row .h-house.is-in{opacity:var(--edge,1);transition:box-shadow .3s,opacity .25s}
.h-houses-row::-webkit-scrollbar{display:none}
.h-house{flex:0 0 calc((100% - 4 * var(--gap)) / 5);min-width:0;scroll-snap-align:start;background:#fff;border-radius:16px;padding:8px 8px 14px;box-shadow:0 1px 2px #2024281a,0 10px 24px #20242814;transition:box-shadow .3s,opacity .7s ease var(--reveal-delay,0ms),translate .9s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.h-house:nth-child(odd){--tilt:-2deg;rotate:var(--tilt);transform-origin:14px 10px}
.h-house:nth-child(even){--tilt:1.5deg;rotate:var(--tilt);margin-top:14px;transform-origin:calc(100% - 14px) 10px}
/* swinging: frame.js gives a card a push when the pointer crosses it and lets it swing out around the top corner
   it is "pinned" at (left corner for cards leaning left, right corner for cards leaning right) */
.h-house:hover{box-shadow:0 1px 2px #2024281a,0 14px 28px #2024281c}
.h-house-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#f0ede2}
.h-house-pic img{display:block;width:100%;height:100%;object-fit:cover}
.h-house-play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fffcf3e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23202428'/%3E%3C/svg%3E") 55% 50%/16px no-repeat;opacity:.75;transition:opacity .25s}
.h-house:hover .h-house-play{opacity:.95}
.h-house b{display:block;margin:12px 6px 0;font:600 15px/1.3 Rubik,sans-serif;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:1000px){.h-house{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media(max-width:760px){.h-houses{padding-bottom:80px}.h-houses-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}.h-car-btn{display:none}.h-houses-row{--gap:16px;--pad:5vw;scroll-snap-type:x proximity;margin:-12px -5vw -20px;padding:24px 5vw 50px}.h-house{flex-basis:210px}}
@media(prefers-reduced-motion:reduce){.h-house,.h-house-play{transition:none}.h-houses-row{scroll-behavior:auto}}

/* ---------- "Look what we can make": Shuffle (shuffle.js, 15.10.2026). A quiet ghost button next to "See all
   projects", so the dark buttons stay for the main actions; the dice turns on every deal. ---------- */
.h-latest-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.h-shuffle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border:0;border-radius:20px;background:none;box-shadow:inset 0 0 0 1px #20242826;font-size:14px;font-weight:500;transition:background .2s,box-shadow .2s,color .2s}
.h-shuffle svg{width:20px;height:20px;fill:currentColor;flex:none}
.h-shuffle:hover{background:var(--ink);color:#fff;box-shadow:none}
.h-shuffle.spin svg{animation:diceRoll .55s cubic-bezier(.3,.7,.3,1)}
@keyframes diceRoll{0%{rotate:0deg;scale:1}45%{scale:.82}100%{rotate:360deg;scale:1}}
@media(prefers-reduced-motion:reduce){.h-shuffle.spin svg{animation:none}}
@media(max-width:640px){.h-latest-actions{gap:14px 18px}}