/* Studio blocks on the homepage. Scoped copies of build/experience.css, business-card.html
   and card-roles.css. Class names are prefixed (hy-) so nothing collides with the page's own .stage/.ready rules.
   Shared tokens the scenes read from :root (build/tokens.css, from portfolio index.html:54 and :1527). */
:root{--bone:#ece5d3;--bone-dark:#e4dcc6;--paper:#f7f2e4;--paper-ink:#181410;--paper-dim:rgba(28,22,14,.62)}

/* ---- sticky scene shell (Continuous Fold) ----
   Height = the fold's own travel (200svh desktop, 180svh phone) + a 60svh hold on the settled bone sheet
   + the 100svh stage. SETTLE_HOLD in blocks/scene.js keeps the drive distance the same as round 30. */
.hy-scene{--hy-dark:#0b0b0e;--hy-light:#ececed;position:relative;height:360svh;z-index:3}
.hy-stage{position:sticky;top:0;height:100svh;min-height:480px;overflow:hidden}
.hy-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hy-copy{position:absolute;z-index:2;left:5vw;top:calc(6% + 62px);max-width:86%;pointer-events:none}
.hy-scene .kicker{display:block;font:500 10px var(--font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 24px}
.hy-scene .fxsplit{font:750 clamp(50px,6.6vw,116px)/.96 var(--font-display);letter-spacing:-.035em;margin:0;text-transform:uppercase;color:var(--hy-light)}
.hy-scene .fxsplit .light{font-weight:200;display:block}
.hy-support{font-size:clamp(16px,1.45vw,22px);line-height:1.4;margin:24px 0 0;max-width:370px;color:var(--hy-light)}
.hy-end{position:absolute;z-index:2;left:5vw;bottom:9%;opacity:0;pointer-events:none;color:var(--hy-light);text-shadow:0 2px 24px var(--hy-dark)}
.hy-end h2{font:600 clamp(44px,5.8vw,92px)/1 var(--font-display);margin:0;text-transform:none;letter-spacing:0}
.hy-end p{font-size:18px;margin:15px 0 0}
.hy-end::before{content:'';position:absolute;z-index:-1;inset:-90px -120px;background:radial-gradient(ellipse at 35% 60%,var(--hy-dark),transparent 72%);opacity:.65}
.hy-note{position:absolute;right:4vw;bottom:28px;font:10px var(--font-mono);letter-spacing:.12em;color:rgba(255,255,255,.6);z-index:2}
.hy-loading{position:absolute;left:5vw;bottom:30px;font:11px var(--font-mono);color:var(--gold);z-index:2}
.is-ready .hy-loading{display:none}
.hy-fallback{position:absolute;inset:0;z-index:3;background:var(--hy-dark);color:var(--hy-light);display:none;align-items:center;padding:6vw}
.hy-fallback img{width:55%;max-height:80%;object-fit:cover}
.hy-fallback p{max-width:280px;margin:30px}
.is-failed .hy-fallback{display:flex}.is-failed canvas,.is-failed .hy-copy,.is-failed .hy-end{display:none}

/* Continuous Fold: one solid dark stage while opening (the renderer fades it to the paper tone as the sheet settles) */
.fold .hy-stage{background:var(--hy-dark)}
.fold .hy-copy{max-width:47%}
.fold .fxsplit{font-size:clamp(45px,5.4vw,90px)}
.fold .hy-support{max-width:290px}
.fold .hy-end{display:none}

@media(max-width:700px){
  .hy-stage{min-height:580px}
  .hy-copy{top:calc(5% + 58px);left:24px;max-width:calc(100% - 48px)}
  .hy-scene .kicker{font-size:9px;margin-bottom:20px}
  .fold .hy-copy{max-width:calc(100% - 48px)}
  .fold .fxsplit{font-size:clamp(40px,10.8vw,66px)}
  .fold .hy-support{max-width:250px;font-size:17px;margin-top:20px}
  .hy-note{font-size:8px;bottom:22px;right:24px}
  .fold.hy-scene{height:340svh}
  .hy-fallback{flex-direction:column;justify-content:center}.hy-fallback img{width:100%}.hy-fallback p{margin:20px 0}
}
@media(max-height:600px){.hy-stage{min-height:0}}

/* Reduced motion (?motion=reduced): still composition, no sticky travel. Motion is on by default. */
@media all{
  html[data-motion=reduced] .hy-scene,html[data-motion=reduced] .fold.hy-scene{height:100svh;min-height:580px}
  html[data-motion=reduced] .hy-stage{position:relative}
  html[data-motion=reduced] .hy-copy{opacity:1!important}
  html[data-motion=reduced] .hy-end{display:none}
  html[data-motion=reduced] .fold .hy-copy{max-width:90%}
  html[data-motion=reduced] .fold .fxsplit{font-size:clamp(35px,4.2vw,58px)}
  html[data-motion=reduced] .fold .hy-support{margin-top:16px;max-width:500px}
}

/* ---- Studio Card: the About block. Sits on the site bone, minimal, page-scroll spring plus subtle surface contact ----
   Round 31: the pin is a beat, not a stop. Travel is 25svh desktop / 18svh phone (was 60 / 45), so the card turns
   through the same arc and the section scrolls away with the page instead of holding the viewport. ---- */
html[data-bg] #about.hy-card{background:var(--bone);color:var(--paper-ink);padding:0;height:125svh;position:relative;overflow:clip;z-index:3}
.hy-card .card-sticky{position:sticky;top:0;height:100svh;min-height:640px;padding:38px 5vw 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hy-card .card-copy{text-align:center;position:relative;z-index:1}
.hy-card .card-copy h2{font:600 clamp(42px,4.5vw,70px)/1.03 var(--font-display);letter-spacing:-.03em;margin:0;color:var(--paper-ink);text-transform:none}
.hy-card .card-copy h2 span{font-weight:300}
.hy-card .card-copy p{font-size:15px;color:var(--paper-dim);margin:17px auto 0;max-width:440px;line-height:1.5}
.hy-card .card-stage{width:100%;max-width:1300px;height:clamp(320px,53svh,620px);position:relative;flex-shrink:0;touch-action:pan-y;outline-offset:6px}
.hy-card .card-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.hy-card .card-stage[data-contact="true"] canvas{cursor:grab}
.hy-card .card-stage img{position:absolute;width:min(70%,680px);height:auto;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-6deg);box-shadow:0 35px 55px #0002;border-radius:2.2%}
.hy-card.is-ready .card-stage img{display:none}
.hy-card .card-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 30px;margin:0 0 28px;position:relative;z-index:2}
.hy-card .card-actions a,.hy-card .card-actions button{font:400 14px var(--font-body);background:none;border:0;border-radius:0;border-bottom:1px solid var(--paper-ink);padding:5px 0;color:var(--paper-ink);text-decoration:none;cursor:pointer;line-height:1.4}
.hy-card .card-actions>*+*{color:var(--paper-dim);border-bottom-color:rgba(28,22,14,.27)}
.hy-card .card-actions span{margin-left:9px}
.hy-card .card-actions a:focus-visible,.hy-card .card-actions button:focus-visible{outline:2px solid var(--paper-ink);outline-offset:6px}
.hy-card .card-caption{display:flex;justify-content:center;font-size:11px;color:rgba(28,22,14,.44)}
@media(max-width:700px){
  html[data-bg] #about.hy-card{height:118svh}
  .hy-card .card-sticky{padding:35px 18px 24px;min-height:580px}
  .hy-card .card-stage{height:42svh;min-height:280px;width:calc(100% + 36px)}
  .hy-card .card-copy h2{font-size:40px}
  .hy-card .card-copy p{max-width:300px;font-size:14px}
  .hy-card .card-actions{gap:12px 24px;margin-bottom:22px}
  .hy-card .card-actions a,.hy-card .card-actions button{font-size:13px}
}
@media all{
  html[data-motion=reduced][data-bg] #about.hy-card{height:auto}
  html[data-motion=reduced] .hy-card .card-sticky{position:relative}
}

/* ---- How: Built to load fast. Scoped port of how-redesign/median.css. The bone plane and ink tokens come from the page's seam scope on #how. ---- */
#how{position:relative;overflow:clip;background:var(--bg);color:var(--ink)}   /* the study set colour on body; here the bone-scope ink must be re-applied on the section */
#how h2,#how h3,#how p{margin:0;text-transform:none;letter-spacing:normal}
#how a{color:inherit;text-decoration:underline;text-underline-offset:4px}
#how a:focus-visible,#how summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
#how .speed-in{max-width:1440px;margin:auto;padding:68px clamp(40px,8.3vw,120px) 50px;min-height:720px}#how .speed-heading{display:flex;align-items:center;justify-content:space-between;gap:55px}#how .speed-heading h2{font:600 clamp(50px,4.5vw,65px)/1.04 var(--font-display);letter-spacing:-.035em}#how .speed-heading>p{font-size:16px;line-height:1.6;color:var(--ink-dim);max-width:39ch}#how .speed-proof{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;margin-top:49px}#how .speed-number{display:inline-flex;align-items:baseline;text-decoration:none;white-space:nowrap;line-height:1;transform:translateY(12px);opacity:0;transition:transform 700ms cubic-bezier(.22,1,.36,1),opacity 350ms}#how .speed-number>span:first-child{font:600 260px/.92 var(--font-display);letter-spacing:-.075em}#how .out-of{font:300 52px/1 var(--font-display);color:var(--ink-dim);margin-left:20px}#how .score-caption{font-size:20px;margin-top:20px}#how .good-range{display:inline-block;font-size:13px;color:var(--ink-dim);margin-top:7px}#how .comparison h3{font:500 18px var(--font-body)}#how .comparison-unit{font:400 10px/1.6 var(--font-mono);margin-top:5px;color:var(--ink-dim)}#how #comparison-rows{margin-top:26px}#how .comparison-row{display:block;text-decoration:none;margin-top:23px}#how .comparison-row:first-child{margin-top:0}#how .comparison-meta{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:20px}#how .comparison-name{font-size:15px;color:var(--ink-dim)}#how .comparison-score{font:600 27px/1 var(--font-display)}#how .comparison-row.studio .comparison-name{color:var(--ink);font-weight:600}#how .comparison-row.studio .comparison-score{font-size:32px}#how .comparison-track{display:block;height:9px;background:var(--line-soft);width:100%}#how .comparison-fill{display:block;width:calc(var(--score)*1%);height:100%;background:var(--ink-ghost);transform:scaleX(0);transform-origin:left;transition:transform 700ms cubic-bezier(.22,1,.36,1)}#how .studio .comparison-track{height:13px}#how .studio .comparison-fill{background:var(--ink)}#how .comparison-row:hover .comparison-name{text-decoration:underline;text-underline-offset:4px}#how.is-visible .speed-number{opacity:1;transform:none}#how.is-visible .comparison-fill{transform:scaleX(1)}#how .speed-evidence{border-top:1px solid var(--line);margin-top:47px;padding-top:19px;display:grid;grid-template-columns:1fr 1fr;gap:100px;font-size:11px;color:var(--ink-dim)}#how .speed-evidence>p{line-height:1.6}#how .speed-evidence details{color:var(--ink);font-size:13px}#how .speed-evidence summary{cursor:pointer;list-style:none;text-align:right;text-decoration:underline;text-underline-offset:5px}#how .speed-evidence summary::-webkit-details-marker{display:none}#how .speed-evidence summary:after{content:' +';text-decoration:none;display:inline-block;margin-left:8px}#how .speed-evidence details[open] summary:after{content:' −'}#how .method-content{font-size:12px;line-height:1.65;margin-top:20px;color:var(--ink-dim)}#how .method-content p+p{margin-top:12px}#how .full-source{display:inline-block;margin-top:15px;color:var(--ink)}html[data-motion=reduced] #how .comparison-fill,html[data-motion=reduced] #how .speed-number{transition:none;transform:none;opacity:1}
@media(min-width:760px) and (max-width:1100px){#how .speed-in{padding-inline:64px;min-height:680px}#how .speed-heading{gap:35px}#how .speed-heading h2{font-size:52px}#how .speed-heading>p{font-size:14px}#how .speed-proof,#how .speed-evidence{gap:55px}#how .speed-number>span:first-child{font-size:218px}#how .out-of{font-size:42px;margin-left:16px}#how .score-caption{font-size:18px}}
@media(max-width:759px){#how .speed-in{padding:32px 25px 30px;min-height:0}#how .speed-heading{display:block}#how .speed-heading h2{font-size:46px;letter-spacing:-.035em}#how .speed-heading>p{font-size:14px;line-height:1.5;margin-top:14px}#how .speed-proof{display:block;margin-top:22px}#how .speed-number>span:first-child{font-size:166px;line-height:.98}#how .out-of{font-size:39px;margin-left:17px}#how .score-caption{font-size:16px;margin-top:9px}#how .good-range{font-size:11px;margin-top:4px}#how .comparison{margin-top:29px}#how .comparison h3{font-size:15px}#how .comparison-unit{font-size:9px;margin-top:4px}#how #comparison-rows{margin-top:19px}#how .comparison-row{margin-top:16px}#how .comparison-meta{margin-bottom:6px}#how .comparison-name{font-size:13px}#how .comparison-score{font-size:23px}#how .comparison-row.studio .comparison-score{font-size:26px}#how .comparison-track{height:5px}#how .studio .comparison-track{height:8px}#how .speed-evidence{display:block;margin-top:26px;padding-top:14px;font-size:10px}#how .speed-evidence summary{text-align:left;margin-top:13px;font-size:12px}#how .method-content{font-size:12px;max-width:45ch}}