/* Translucent, difference-blended type, as observed in the Seki reference.
   Artwork stays intact; only the typography blends with the layer below it. */
:root{--layer-ink:rgba(255,255,255,.75)}
body{color:#404040}
.header{gap:28px}
body[data-view=work] #about-intro{display:none}
.category-wheel{mix-blend-mode:difference;color:var(--layer-ink)}
.wheel-track{pointer-events:none}
.wheel-track button{pointer-events:auto}
.wheel-track button:hover,.wheel-echo span:hover{color:#fff}
.wheel-track button,.wheel-echo span{transition:transform .65s cubic-bezier(.22,.8,.2,1),opacity .65s ease}
.media{transition:opacity .55s cubic-bezier(.22,.8,.2,1),visibility 0s .55s}
.media.is-current{transition:opacity .55s cubic-bezier(.22,.8,.2,1),visibility 0s}
.poster-heading{position:sticky;top:16px;z-index:3;mix-blend-mode:difference;color:var(--layer-ink);pointer-events:none}
.poster-heading h3,.poster-heading p,.poster-heading span{color:inherit}
.poster-introduction,.poster-scroll-hint{transition:opacity .3s ease}
@media(min-width:701px){.poster-collection.is-scrolled .poster-introduction,.poster-collection.is-scrolled .poster-scroll-hint{opacity:0}}
.poster-collection{scroll-behavior:auto;overflow-anchor:none;-webkit-overflow-scrolling:touch}
.poster-preview{touch-action:pan-y}
.poster-preview .poster-image{transition:opacity .25s ease}
@media(hover:hover){.poster-preview:hover .poster-image{opacity:.9}}
.layer-ink{position:relative;z-index:2;mix-blend-mode:difference;color:var(--layer-ink)}
.about-page{left:240px;padding:64px 55px 80px 30px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:#fff;scrollbar-width:thin;scrollbar-color:#aaa #fff}
.about-page.is-current{pointer-events:auto}
.about-page:focus-visible{outline:none}
.about-page-label{font-size:12px;line-height:1.3;margin:0 auto 32px;max-width:1240px;color:#666}
.about-content{position:relative;max-width:1240px;margin:0 auto;padding:0;min-height:700px}
.about-topline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:35px;align-items:start}
.about-content h2{font-size:38px;line-height:1.02;font-weight:700;letter-spacing:-.65px;margin:0 0 20px}
.about-role{font-size:23px;font-weight:700;line-height:1.08;letter-spacing:-.25px;margin:0 0 13px}
.about-location{font-size:15px;line-height:1.3;margin:26px 0 0}
.about-contact p{font-size:clamp(22px,2.25vw,34px);font-weight:700;line-height:1.07;letter-spacing:-.5px;margin:0}
.about-contact a{text-decoration:none;overflow-wrap:anywhere}
.about-contact a:hover{text-decoration:underline;text-underline-offset:5px}
.about-education{margin-top:65px;font-size:clamp(25px,2.55vw,36px);font-weight:700;line-height:1.08;letter-spacing:-.4px}
.about-content h3{font:inherit;margin:0}.about-education p{margin:0}.about-education em{font-style:normal}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:65px;font-size:26px;line-height:1.12;font-weight:700;letter-spacing:-.25px}
.about-columns p{margin:0}.about-columns h3{margin-bottom:4px}
.about-work-link{margin-top:65px;border-bottom:1px solid currentColor;padding:0 0 4px;font-size:13px}
.about-artwork{position:absolute;inset:0;z-index:1;pointer-events:none}
.about-art{position:absolute;display:block;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.art-theater{width:140px;left:36%;top:235px}
.art-lens{width:195px;right:5%;top:320px}
.art-party{width:112px;left:15%;top:500px}
.work[data-category=about] .sample-note,.work[data-category=about] .role-caption,.work[data-category=about] .gallery-controls,.work[data-category=about] .expand-work{display:none}
.work[data-category=about] .category-wheel{width:220px}
@media(min-width:1500px){.about-page{left:270px;padding-top:80px;padding-left:30px;padding-right:80px}.art-theater{width:165px;left:35%;top:235px}.art-lens{width:220px;top:345px}.art-party{width:130px;top:550px}}
@media(min-width:701px) and (max-width:1000px){.about-page{left:210px;padding:65px 30px 65px 25px}.about-topline{grid-template-columns:1fr;gap:28px}.about-contact p{font-size:24px}.about-education{font-size:28px}.about-columns{font-size:23px;gap:28px}.art-theater{left:auto;right:3%;top:80px;width:125px}.art-lens{top:430px;width:170px;right:0}.art-party{top:650px;left:30%;width:95px}}
@media(max-width:700px){
 .header{right:18px;gap:24px}
 .poster-heading{position:relative;top:auto}
 .about-page{inset:235px 0 0;padding:18px 20px 55px}
 .about-page-label{font-size:11px;margin-bottom:25px}
 .about-content{min-height:0}
 .about-topline{grid-template-columns:1fr;gap:30px}
 .about-content h2{font-size:34px;margin-bottom:20px}
 .about-role{font-size:22px;line-height:1.1}
 .about-location{font-size:15px;margin-top:24px}
 .about-contact p{font-size:22px;line-height:1.12}
 .about-education{font-size:25px;line-height:1.1;margin-top:55px}
 .about-education em{display:block;font-size:20px;margin-top:14px}
 .about-columns{font-size:21px;line-height:1.16;gap:20px;margin-top:45px}
 .about-work-link{margin-top:50px}
 .art-theater{width:88px;left:auto;right:0;top:93px}
 .art-lens{width:110px;right:0;top:370px}
 .art-party{width:75px;left:24%;top:675px}
 .work[data-category=about] .category-wheel{top:176px;height:90px;width:245px}
 .work[data-category=about] .wheel-track,.work[data-category=about] .wheel-echo{font-size:16px}
}
@media(max-height:700px) and (max-width:700px){.about-page{top:205px}.work[data-category=about] .category-wheel{top:158px;height:75px}}
@media(prefers-reduced-motion:reduce){.media,.media.is-current,.poster-preview .poster-image{transition:none}}