/* surface-c.css — Jang Wonyoung page (/wy/). Load after tokens/base/components. Comments are terse on purpose: this file ships to the browser uncompiled and the surface has a 20 KB gz CSS budget. Full teardown numbers live in scratchpad/reports/audit-wy-perf.md. Why every rule here looks the way it does: the old page (wy.html + 4 iframes) burned 240 style recalcs/s, 120 layouts/s and 27.7% CPU sitting completely idle at scrollY=0. A/B isolation: pausing the SVG stroke animation took layouts 120 -> 0; pausing carouselSlide took recalcs 240 -> 120; deleting the iframes took CPU 27.7% -> 3.3%. Target: 6 s idle at scrollY=0 -> LayoutCount delta 0, RecalcStyle delta < 60, CPU < 4%. Full-page scroll -> zero layout bars. HOUSE RULES (CI check G in tools/check-routes.mjs enforces 1-3) 1 no raw hex 2 no raw px 3 no bare z-index — tokens only. The one non-token colour is rgb(0 0 0 / a) inside mask-image, which is an alpha ramp, not a colour: a mask never paints a pixel. 4 motion = transform / opacity / clip-path / mask only. Nothing animates width, height, margin, border-radius, stroke-width, % stroke-dasharray, filter or backdrop-filter. 5 every infinite animation carries [data-anim] and starts paused. The `animation` SHORTHAND resets animation-play-state, so animated rules here use LONGHANDS only. 6 --pearl-600..300 are this surface's own accent ramp. --------------------------------------------------------------------------- MARKUP CONTRACT FOR wy/wy.html — build to this.

S1 ENTRY .sc-stage.sc-entry (above the fold — NO data-cv) .sc-entry__viewport > .sc-entry__cols > .sc-col x4 > figure.sc-tile.sc-frame > img > .sc-entry__veil > .sc-entry__panel > [data-eyebrow] h1.sc-wordmark .sc-dek S2 GALLERY .sc-stage.sc-stage--pad#gallery[data-cv=section] ul.sc-gallery > li.sc-slat > button.sc-slat__btn[data-lightbox-open] [data-full][data-caption][aria-haspopup=dialog] > span.sc-slat__frame.sc-frame > img (x13) S3 CAROUSEL .sc-stage.sc-stage--pad#carousel[data-cv=section] .sc-carousel[style="--sc-car-count:11"] > .sc-carousel__stage > .sc-carousel__dir[data-anim][data-anim-local] > ul.sc-carousel__ring[data-anim][data-anim-local] > li.sc-carousel__item[style="--sc-i:N;--sc-img:url(…)"] > button.sc-carousel__face[data-lightbox-open] (x11) > li.sc-carousel__ground[aria-hidden] > .sc-carousel__controls > button.sc-carousel__toggle[data-carousel-toggle] [aria-pressed] > span.sc-carousel__toggle-on / -off + span.sc-carousel__dirgroup[role=radiogroup] > label.sc-carousel__radio > input[type=radio][name=sc-dir][aria-label] S4 DOOR .sc-stage.sc-door#door !! PINNED — NEVER data-cv .sc-door__wrap > .sc-door__hero[style="--sc-img:url(…)"] > .sc-door__port > img.sc-door__gate S5 BRANDS ol.sc-ledger > li.sc-ledger__row > .sc-ledger__name/__role/__year S6 QUOTE .sc-stage.sc-quote > blockquote.sc-quote__text (+ .sc-quote__cite) S8 CREDITS .sc-credits > .sc-credits__body + dl.sc-credits__ledger

S7 LIGHTBOX — direct child of , outside

: dialog.sc-lightbox[data-lightbox][aria-label] > figure.sc-lightbox__figure > img.sc-lightbox__img[data-lightbox-img] + figcaption.sc-lightbox__cap[data-lightbox-cap] > button.sc-lightbox__close[data-lightbox-close][aria-label] > button.sc-lightbox__nav--prev[data-lightbox-prev] / --next[data-lightbox-next]