/* refine.css — final polish layer. Loaded last; keeps the original design, fixes alignment, Safari cost and rough edges. */
:root{--gx:clamp(20px,5.5vw,80px);--col:1280px;--edge-x:max(var(--gx),calc((100% - var(--col))/2))}

/* 1. One shared left/right edge for every section, header and footer (was 72/80/86/90/106/166px) */
body.studio-version .header{padding-inline:var(--edge-x)}
body.studio-version .studio-work,body.studio-version .studio-end{padding-inline:var(--edge-x);max-width:none}
body.studio-version .studio-grow,body.studio-version .portfolio-footer,body.studio-version .page-intro,
body.studio-version .about-story,body.studio-version .personal-story,body.studio-version .design-approach,
body.studio-version .tool-stack,body.studio-version .engineering-note,body.studio-version .project-intro{
 box-sizing:border-box;width:100%;max-width:calc(var(--col) + 2*var(--gx));margin-inline:auto;padding-inline:var(--gx)}
body.studio-version .studio-work{box-sizing:border-box}
body.studio-version .studio-project{max-width:var(--col);margin-inline:auto}

/* 2. Texture layer: fixed-attachment backgrounds are janky/broken on iOS Safari, so paint it on a fixed layer instead */
body.studio-version,body.studio-version.modern-subpage{background-image:none!important;background-attachment:scroll!important;background-color:transparent!important}
body.studio-version::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--board-material) center/cover no-repeat #202123;transform:translateZ(0)}

/* 3. Lighter blur work (backdrop-filter is costly in Safari; the bars are nearly opaque anyway) */
body.studio-version .header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#hello-panel::backdrop,#schedule-panel::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* 4. Chalk-art sprites are now transparent: no grey box, no blend-mode layer needed */
.section-art,.project-art-note .section-art,.contact-envelope,.hello-envelope{mix-blend-mode:normal!important}

/* 5. Safari / WebKit: SVG turbulence filter on the long chalk line is re-rasterised every scroll frame */
html.is-webkit .studio-line path{filter:none}
html.is-webkit .studio-line{-webkit-mask-image:url('/chalk-grain.png');mask-image:url('/chalk-grain.png');-webkit-mask-size:192px 192px;mask-size:192px 192px;-webkit-mask-repeat:repeat;mask-repeat:repeat}

/* 6. Pause decorative loops that are off-screen or while the tab is hidden */
.grow-butterfly.is-paused{animation-play-state:paused}

/* 7. Intro: visible hint + skip, never trapped */
.intro-skip{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;font:15px DM,Arial,sans-serif;color:var(--muted,#c0bccb);padding:12px 18px;min-height:44px;border-radius:30px;opacity:0;animation:intro-skip-in .5s 1.2s forwards}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--paper,#f7f4f0)}
@keyframes intro-skip-in{to{opacity:1}}
html:not(.intro-pending) .intro-skip{display:none}
.bloom-opening.is-entering .intro-skip{display:none}
.bloom-instruction{text-align:center}

/* 8. Touch comfort */
@media(pointer:coarse){
 body.studio-version .chalk-tray button,#chalk-tools button,.screen-options button,.page-controls button,.music-close,.art-note-close,.dialog-close,.schedule-close{min-width:44px;min-height:44px}
 #chalk-tools button[data-tone]{min-width:44px;min-height:44px}
}
/* 9. Images keep their shape and decode off the main thread */
img{height:auto}
img[width][height]{height:auto}
.studio-chalk,.drawing-chalk{width:64px;height:64px;image-rendering:auto}
.dandy-preview img{image-rendering:auto}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.studio-version main.studio-notes{max-width:none;margin-inline:0;padding-inline:0;overflow-x:hidden;overflow-x:clip}
body.studio-version .header{background:color-mix(in srgb,var(--board) 96%,transparent)}
.portfolio-footer .footer-signature,.footer-signature{font-family:DM,sans-serif}
@media(max-height:500px){.bloom-instruction{display:none}}
@media(max-width:450px){body.studio-version .studio-hero{padding-top:132px}}