.clean-layout .glass-story{position:relative;isolation:isolate}
/* Dot tokens the board reads (see sections/src/board/board.js) */
:root{--dot-spacing:clamp(80px,11.12vw,240px);--dot-size:1.25px}
/* Once the board is drawing, the hero drops its CSS dots. The whole story sits above the
   board canvas (z-index 1) so the letters stay in front of the dots. */
.board-live .clean-layout .glass-story{z-index:2}
.board-live .clean-layout .glass-story #hero{background-image:none;background-color:transparent;z-index:0}

.clean-layout .glass-story #hero{position:sticky;top:0;height:100svh;min-height:0;z-index:0;overflow:clip;background-color:#fff;background-image:radial-gradient(circle,#252525 1.25px,transparent 1.85px);background-size:var(--dot-step) var(--dot-step);background-position:calc(8.35vw - var(--dot-step)/2) calc(13.1svh - var(--dot-step)/2)}
.clean-layout::before{display:none}
.clean-layout #hero .stage{height:82%}
.scroll-cue{position:absolute;bottom:5svh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:14px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#62625e}
.scroll-cue span{font-size:21px;line-height:1}
.clean-layout #about{position:relative;z-index:3;background:transparent;border-top:1px solid #fff;border-radius:18px 18px 0 0;box-shadow:0 -18px 60px #37394310;overflow:clip;min-height:100svh;--contact-x:50%;--contact-y:50%;--contact-radius:140px;--contact-opacity:1;isolation:isolate}
.clean-layout #about::before{content:'';display:block;position:absolute;inset:0;z-index:-2;pointer-events:none;background:#f5f6f733;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.glass-frost-wrap{position:absolute;inset:0;z-index:-1;pointer-events:none;mask-image:radial-gradient(ellipse var(--contact-radius) var(--contact-radius) at var(--contact-x) var(--contact-y),rgb(0 0 0 / var(--contact-opacity)) 0%,#000 100%);-webkit-mask-image:radial-gradient(ellipse var(--contact-radius) var(--contact-radius) at var(--contact-x) var(--contact-y),rgb(0 0 0 / var(--contact-opacity)) 0%,#000 100%)}
.glass-frost{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffffdb,#eceff3ad 50%,#ffffffdb);backdrop-filter:blur(30px) saturate(.68);-webkit-backdrop-filter:blur(30px) saturate(.68)}
.glass-frost::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.12}
.clean-layout #about .about-inner{z-index:2}
.clean-layout #about .about-label,.clean-layout #about .about-count,.clean-layout #about .about-case-kind,.clean-layout #about .about-case-roles,.clean-layout #about .about-case-date,.clean-layout #about .about-side-date,.clean-layout #about .about-aside{color:#53565a}
.clean-layout #about .board-logo-fallback{visibility:visible}
.clean-layout #journal{position:relative;z-index:4}
@supports not (backdrop-filter:blur(3px)){.glass-frost{background:#f5f6f7ed}}
@media(max-width:700px){.clean-layout #hero .stage{height:88%}.clean-layout #about{border-radius:12px 12px 0 0}.scroll-cue{bottom:2svh}.glass-frost{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
@media(prefers-reduced-motion:reduce){.scroll-cue{scroll-behavior:auto}}

/* Touch devices don't run the boards (no cursor to bulge under), so About gets a plain dot grid
   above its frosted panel, matching the hero's dots. */
@media(hover:none),(max-width:700px){
 .clean-layout #about::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#252525 1.25px,transparent 1.85px);background-size:var(--dot-step) var(--dot-step);background-position:calc(8.35vw - var(--dot-step)/2) calc(13.1svh - var(--dot-step)/2);opacity:.5}
}
.board-live .clean-layout #about::after{display:none}