/* Local touches: motion in the introduction, the maker vignette and paper notes. */
.home-page .hero-identities{min-height:1.4em;perspective:650px}
.home-page .hero-identities>.word-rotator{display:inline-grid;margin-bottom:0}
.word-rotator{display:inline-grid;vertical-align:baseline;perspective:500px}
.word-rotator .rotating-word{grid-area:1/1;display:block;opacity:0;visibility:hidden;transform:translateY(.24em) rotateX(-65deg);transform-origin:50% 60%;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),visibility .45s;white-space:nowrap}
.word-rotator .rotating-word.is-current{opacity:1;visibility:visible;transform:translateY(0) rotateX(0)}
.home-page .hero-roles{font-size:19px;line-height:1.6;margin-top:10px;min-height:1.6em}

/* A permanent introduction complements the rotating roles. */
.home-page .hero-description{max-width:465px;margin-top:22px}
.home-page .hero-positioning{display:block;color:var(--ink);font-size:20px;line-height:1.4;letter-spacing:-.5px}
.home-page .hero-ventures{display:block;margin-top:3px;color:var(--ink);font-size:14px;line-height:1.6}
.home-page .hero-summary{display:block;margin-top:12px;max-width:440px}
@media(max-width:900px){.home-page .hero-positioning{font-size:18px}.home-page .hero-ventures{font-size:12px}.home-page .hero-summary{margin-top:10px}}
@media(max-width:700px){.home-page .hero-description{margin-top:22px}.home-page .hero-ventures{font-size:13px}}

.home-page .portrait-frame{overflow:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;transform-style:preserve-3d}
.home-page .portrait-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,#ffffff70 47%,transparent 65%);transform:translateX(-160%);pointer-events:none}
.home-page .portrait-backdrop,.home-page .asterisk-large,.home-page .code-sticker{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.home-page .hero-visual.is-playful .portrait-frame{transform:perspective(850px) translateY(-9px) rotateX(var(--portrait-x,0deg)) rotateY(var(--portrait-y,0deg)) rotateZ(2deg) scale(1.035);box-shadow:0 25px 38px #172b3a24,0 5px 9px #172b3a10}
.home-page .hero-visual.is-playful .portrait-frame::after{animation:portrait-glint 1s ease both}
.home-page .hero-visual.is-playful .portrait-backdrop{transform:translate(-7px,4px) rotate(-12deg)}
.home-page .hero-visual.is-playful .asterisk-large{transform:rotate(80deg) scale(1.08)}
.home-page .hero-visual.is-playful .code-sticker{transform:translate(-5px,3px) rotate(4deg)}
@keyframes portrait-glint{to{transform:translateX(160%)}}















.home-page .board-stage{position:relative;isolation:isolate;width:280px;max-width:100%;height:240px;display:grid;place-items:center;margin-top:27px}
.home-page .board-stage::before{content:'';position:absolute;inset:22px 36px;border-radius:50%;background:#e1e8d7;border:1px dashed #bac9aa;transform:rotate(calc(var(--board-turn,-12deg) * -1))}
.home-page .board-stage>img{position:relative;width:215px;height:190px;object-fit:contain;transform:translateY(var(--board-lift,0px)) rotate(var(--board-turn,-12deg));filter:drop-shadow(0 14px 10px #3b513b1a);z-index:1}
.board-circuit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.circuit-traces{stroke:#91a782;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.3s ease}
.circuit-dots{fill:#c9d3bd;transition:fill .7s}
.board-stage.is-in-view .circuit-traces{stroke-dashoffset:0}
.board-stage.is-in-view .circuit-dots{fill:#dc7957}
.board-stage.is-in-view .circuit-dots circle{animation:circuit-pulse 2.6s ease-in-out infinite}
.board-stage.is-in-view .circuit-dots circle:nth-child(2){animation-delay:.7s}
.board-stage.is-in-view .circuit-dots circle:nth-child(3){animation-delay:1.4s}
@keyframes circuit-pulse{0%,100%{opacity:.45}50%{opacity:1;filter:drop-shadow(0 0 4px #dc7957)}}

.home-page .timeline-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:42px 30px;margin-top:58px;padding:0 10px 12px}
.home-page .timeline-entry{--note-angle:-1.8deg;--note-paper:#f7dcd0;grid-column:span 2;position:relative;display:block;padding:33px 28px 42px;background:var(--note-paper);border:0;border-radius:2px 2px 20px 2px;box-shadow:1px 3px 2px #554a3520,2px 17px 19px -13px #554a3540;transform:rotate(var(--note-angle));transition:transform .3s,box-shadow .3s}
.home-page .timeline-entry:nth-child(2){--note-angle:1.3deg;--note-paper:#fcf0b9}
.home-page .timeline-entry:nth-child(3){--note-angle:-.9deg;--note-paper:#dceaf2}
.home-page .timeline-entry:nth-child(4){--note-angle:1.1deg;--note-paper:#e2ebd6;grid-column:span 3}
.home-page .timeline-entry:nth-child(5){--note-angle:-1.2deg;--note-paper:#e9e0f0;grid-column:span 3}
.home-page .timeline-entry::before{content:'';position:absolute;top:-13px;left:calc(50% - 41px);width:82px;height:28px;background:#fffdf0bd;border:1px solid #ffffff7a;box-shadow:0 2px 3px #73623c08;transform:rotate(-3deg)}
.home-page .timeline-entry:nth-child(even)::before{transform:rotate(4deg)}
.home-page .timeline-entry::after{content:'';position:absolute;right:0;bottom:0;width:23px;height:23px;background:linear-gradient(135deg,#56482c12 50%,var(--paper) 51%);border-radius:3px 0 18px 0;pointer-events:none}
.home-page .timeline-entry:hover,.home-page .timeline-entry:focus-within{z-index:2;transform:translateY(-7px) rotate(0deg);box-shadow:2px 4px 3px #554a3515,3px 24px 24px -14px #554a3550}
.home-page .timeline-date{display:block;font-size:10px;letter-spacing:1px;color:#716955;padding-top:0;margin-bottom:14px}
.home-page .timeline-story h3{font:600 40px/1.08 Caveat,cursive;letter-spacing:-.6px;color:#303b2b}
.home-page .timeline-story p{font-size:13px;line-height:1.85;color:#5e6355;margin-top:16px}
.home-page .timeline-index{position:absolute;right:25px;bottom:15px;padding:0;font:500 28px/1 Caveat,cursive;color:#746b535c}

.home-page .playground-grid{grid-template-columns:1fr}
.home-page .music-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:0 46px;padding:32px}
.home-page .music-heading{grid-column:1;grid-row:1/6;flex-direction:column;align-items:flex-start;justify-content:space-between;padding-bottom:0;gap:24px}
.home-page .music-heading h3{font-size:30px}
.home-page .music-card>.track,.home-page .music-card>.audio-feedback,.home-page .music-controls{grid-column:2}
.home-page .music-card>.track:first-of-type{border-top:0}

@media(max-width:1120px){.home-page .timeline-list{gap:38px 23px}.home-page .timeline-entry{padding:31px 23px 40px}.home-page .timeline-story h3{font-size:36px}}
@media(max-width:900px){.home-page .hero-roles{font-size:16px}.home-page .timeline-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 25px}.home-page .timeline-entry,.home-page .timeline-entry:nth-child(4),.home-page .timeline-entry:nth-child(5){grid-column:auto}.home-page .timeline-entry:last-child{grid-column:1/-1}.home-page .music-card{gap:0 30px}.home-page .music-heading h3{font-size:26px}}
@media(max-width:700px){.home-page .hero-identities{min-height:1.35em}.home-page .hero-roles{font-size:17px;margin-top:8px}.home-page .board-stage{width:235px;height:210px;margin-top:21px}.home-page .board-stage>img{width:185px;height:170px}.home-page .board-stage::before{inset:19px 30px}.home-page .timeline-list{grid-template-columns:1fr;gap:34px;margin-top:43px;padding-inline:7px}.home-page .timeline-entry,.home-page .timeline-entry:nth-child(4),.home-page .timeline-entry:nth-child(5),.home-page .timeline-entry:last-child{grid-column:1;padding:32px 27px 43px}.home-page .timeline-story h3{font-size:40px}.home-page .timeline-story p{font-size:14px;line-height:1.85}.home-page .music-card{display:block;padding:25px}.home-page .music-heading{flex-direction:row;align-items:center;gap:18px;padding-bottom:24px}.home-page .music-heading h3{font-size:25px}.home-page .music-card>.track:first-of-type{border-top:1px solid #d8d4de}}
@media(max-width:370px){.home-page .hero-roles{font-size:15px}.home-page .hero-visual{width:280px;height:375px;transform:none;margin-bottom:0}.home-page .portrait-frame{left:27px;width:235px}.home-page .portrait-frame>img{width:217px;height:245px}.home-page .portrait-backdrop{left:12px;width:239px;height:280px}.home-page .code-sticker{top:230px}.home-page .portrait-note{right:10px;top:304px;font-size:26px}.home-page .asterisk-large{font-size:65px}.home-page .ventures-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.home-page .timeline-story h3{font-size:37px}.home-page .timeline-entry{padding-inline:24px}}
@media(prefers-reduced-motion:reduce){.word-rotator .rotating-word{transition:none;transform:none}.home-page .hero-visual.is-playful .portrait-frame{transform:rotate(6deg)}.home-page .hero-visual.is-playful .portrait-backdrop{transform:rotate(-7deg)}.home-page .hero-visual.is-playful .asterisk-large{transform:rotate(14deg)}.home-page .hero-visual.is-playful .code-sticker{transform:rotate(-12deg)}.home-page .timeline-entry:hover,.home-page .timeline-entry:focus-within{transform:rotate(var(--note-angle))}.home-page .board-stage>img{transform:rotate(-12deg)}.circuit-traces{stroke-dashoffset:0}.circuit-dots{fill:#dc7957}}

/* The quote and its original TV form one compact, readable media vignette. */
.home-page .quote-section{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:center;max-width:1100px;padding-top:64px;padding-bottom:34px}
.home-page .quote-section blockquote{position:relative;max-width:510px;margin:0;text-align:left;padding-top:20px}
.home-page .quote-section blockquote::before{content:'“';position:absolute;top:-42px;left:-3px;color:#dcb9a1;font:500 112px/.9 Caveat,cursive;pointer-events:none}
.home-page .quote-section blockquote p{margin:0;font-size:36px;font-weight:500;line-height:1.38;letter-spacing:-1.1px;text-wrap:balance}
.home-page .quote-section blockquote .handwritten{font-size:1.34em;line-height:1;color:var(--coral);white-space:nowrap}
.home-page .quote-section cite{display:flex;align-items:center;gap:12px;margin-top:23px;font-size:12px;font-style:normal;letter-spacing:.2px;color:#7b8471}
.home-page .quote-experiment{width:100%;max-width:440px;justify-self:center;padding:0;border:0;border-radius:0;background:transparent}
.home-page .quote-experiment .tv-wrap{flex:none;min-height:0;padding:0}
.home-page .quote-experiment .tv-set{width:min(400px,100%)}
.home-page .quote-experiment .experiment-bottom{display:block;width:100%;max-width:400px;margin:8px auto 0;padding:0;border:0;text-align:center}
.home-page .quote-experiment .experiment-bottom h3{max-width:360px;margin:0 auto;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.35px}
.home-page .quote-experiment .experiment-bottom .handwritten{font-size:1.5em;line-height:1}




@media(max-width:1120px){.home-page .quote-section{gap:38px}.home-page .quote-section blockquote p{font-size:33px}}
@media(max-width:900px){.home-page .quote-section{gap:28px;padding-top:52px;padding-bottom:22px}.home-page .quote-section blockquote p{font-size:30px}.home-page .quote-section blockquote::before{font-size:96px;top:-35px}.home-page .quote-experiment .experiment-bottom h3{font-size:16px}}
@media(max-width:700px){.home-page .quote-section{grid-template-columns:1fr;gap:30px;padding-top:48px;padding-bottom:12px}.home-page .quote-section blockquote{max-width:440px;text-align:center;margin:auto;padding-top:16px}.home-page .quote-section blockquote::before{left:50%;top:-32px;transform:translateX(-50%);font-size:88px}.home-page .quote-section blockquote p{font-size:29px;line-height:1.4}.home-page .quote-section cite{justify-content:center;margin-top:18px}.home-page .quote-experiment{width:min(380px,100%)}.home-page .quote-experiment .tv-set{width:min(350px,100%)}.home-page .quote-experiment .experiment-bottom{max-width:340px;margin-top:9px}.home-page .quote-experiment .experiment-bottom h3{max-width:310px;font-size:18px}}
@media(max-width:370px){.home-page .quote-section blockquote p{font-size:27px}}