/* Shared editorial subheadlines. Preserve their current scene/reveal owners;
   only type and the italic glyphs' mask breathing room change here. */
body .chapter-label,
body .form-wrap>.chapter-label,
body .work-entry .gallery-heading .chapter-label,
body[data-work-presentation='grid'] #work-entry .gallery-heading .chapter-label{
 font:500 italic clamp(22px,2.1vw,28px)/1.2 'Bodoni Moda',Georgia,serif;
 letter-spacing:-.025em;
 text-transform:none;
}
/* The gallery label serves as its section heading, rather than a subheadline. */
body .work-entry .gallery-heading .chapter-label,
body[data-work-presentation='grid'] #work-entry .gallery-heading .chapter-label{font-size:clamp(28px,3vw,40px)}
.chapter-label .word-mask{padding-inline:.12em;margin-inline:-.12em}

/* Opening composition. Normal flow replaces the legacy absolute discipline
   position; atmosphere.js continues to own the whole scene/reveal pose. */
body #opening{
 inset:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 width:100%;
 padding:80px 24px;
}
body #opening>.hero-subheadline{
 flex:none;
 max-width:calc(100vw - 48px);
 margin:0 0 clamp(12px,1.8vh,22px);
 text-wrap:balance;
}
body #opening>#opening-name{flex:none}
body #opening>.discipline{
 position:relative;
 inset:auto;
 top:-20px;
 width:auto;
 max-width:calc(100vw - 48px);
 margin:clamp(10px,1.6vh,18px) 0 0;
 padding:0;
 transform:none;
 font:500 clamp(11px,1vw,14px)/1.5 'DM Sans',sans-serif;
 letter-spacing:.13em;
 text-transform:uppercase;
 color:var(--paper);
 text-wrap:balance;
}
body #opening .hero-actions{
 display:flex;
 flex:none;
 align-items:center;
 justify-content:center;
 gap:28px;
 max-width:100%;
 margin-top:clamp(22px,3.2vh,36px);
 visibility:hidden;
 opacity:0;
}
body #opening .hero-actions>button{
 position:relative;
 display:inline-flex;
 flex:none;
 align-items:center;
 justify-content:center;
 gap:20px;
 min-height:54px;
 max-width:100%;
 margin:0;
 padding:10px 24px 10px 28px;
 border:1px solid #fff5df9c;
 border-radius:999px;
 font:500 italic 22px/1.2 'Bodoni Moda',Georgia,serif;
 letter-spacing:-.02em;
 visibility:inherit;
 opacity:1;
 isolation:isolate;
 transition:background-color .35s,color .35s,border-color .35s;
}
body #opening .hero-actions>button>span{min-width:0;margin:0}
body #opening .hero-work{background:var(--paper);color:var(--ink);border-color:var(--paper)}
body #opening .hero-work svg{
 display:block;
 flex:none;
 width:26px;
 height:26px;
 fill:none;
 stroke:currentColor;
 stroke-width:1.1;
 stroke-linecap:round;
 stroke-linejoin:round;
 overflow:visible;
 transition:transform .45s var(--ease);
}
body #opening .hero-work circle{fill:currentColor;stroke:none}
body #opening .hero-work path{stroke-dasharray:1;stroke-dashoffset:0}
body #opening .hero-work:is(:hover,:focus-visible){background:#ffe4be;border-color:#ffe4be}
body #opening .hero-work:is(:hover,:focus-visible) svg{transform:translate(2px,-2px)}
body #opening .hero-actions>.hero-contact{padding-inline:0;border:0;border-radius:0;background:transparent;color:var(--paper)}
body #opening .hero-contact:after{bottom:7px;transform:scaleX(.18);transform-origin:left}
body #opening .hero-contact:is(:hover,:focus-visible){background:transparent;color:var(--paper)}
body #opening .hero-contact:is(:hover,:focus-visible):after{transform:scaleX(1)}
body #opening .hero-actions>button:focus-visible{outline:1px solid var(--paper);outline-offset:6px}
body #opening .hero-work:active{background:#ffd5a6;border-color:#ffd5a6;opacity:1}
body #opening .hero-contact:active{opacity:.75}
/* The interactive section prompt supplies the words; retain only the existing
   drawn mouse below it, rather than overlaying a second decorative label. */
body #scroll-cue[data-scene='opening']{width:32px;height:52px;gap:0}
body #scroll-cue[data-scene='opening'] .scroll-cue-label{display:none}

/* The upper sky shares the hero's outline renderer and filled primary action.
   Scroll progress owns the ink and whole-button arrival; there is no CSS loop. */
body #top-sky-content{
 position:absolute;inset:0;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:32px;padding:124px 6vw 150px;
 pointer-events:none;visibility:hidden;
}
body #top-sky-title{
 flex:none;width:100%;max-width:1100px;margin:0;
 font:500 italic clamp(38px,5vw,72px)/1.08 'Bodoni Moda',Georgia,serif;
 letter-spacing:-.025em;text-align:center;text-wrap:balance;
}
body #top-sky-work{
 position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;
 gap:20px;min-height:54px;max-width:100%;margin:0;padding:10px 24px 10px 28px;
 border:1px solid var(--paper);border-radius:999px;
 background:var(--paper);color:var(--ink);
 font:500 italic 22px/1.2 'Bodoni Moda',Georgia,serif;letter-spacing:-.02em;
 pointer-events:auto;visibility:hidden;isolation:isolate;
 transition:background-color .35s,color .35s,border-color .35s;
}
body #top-sky-work>span{min-width:0;margin:0}
body #top-sky-work svg{display:block;flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .45s var(--ease)}
body #top-sky-work circle{fill:currentColor;stroke:none}
body #top-sky-work path{stroke-dasharray:1;stroke-dashoffset:0}
body #top-sky-work:is(:hover,:focus-visible){background:#ffe4be;border-color:#ffe4be}
body #top-sky-work:is(:hover,:focus-visible) svg{transform:translate(2px,-2px)}
body #top-sky-work:focus-visible{outline:1px solid var(--paper);outline-offset:6px}
body #top-sky-work:active{background:#ffd5a6;border-color:#ffd5a6;opacity:1}

/* A quiet return control belongs to the upper sky, outside the opening. */
body #top-sky-return{
 position:absolute;
 left:50%;
 bottom:max(7vh,36px);
 translate:-50% 0;
 display:inline-flex;
 align-items:center;
 gap:12px;
 min-height:48px;
 padding:8px 4px;
 font:500 italic 20px/1.3 'Bodoni Moda',Georgia,serif;
 letter-spacing:-.02em;
 visibility:hidden;
 opacity:0;
}
body #top-sky-return[hidden]{display:none}
body #top-sky-return>span{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
body #top-sky-return svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
body #top-sky-return:focus-visible{outline:1px solid var(--paper);outline-offset:6px;border-radius:2px}

/* Direct capability labels use the reading face. The name and the display
   heading retain their existing outline and serif treatments. */
body #craft-view .craft-copy>.chapter-label{margin-bottom:18px}
body #craft-view .craft-intro{max-width:34ch;margin-bottom:26px}
body #craft-view .craft-skills{flex-direction:column;gap:18px}
body #craft-view .craft-capability{gap:4px}
body #craft-view .craft-title{font:500 21px/1.25 'DM Sans',sans-serif;letter-spacing:-.025em}
body #craft-view .craft-detail{font:400 14px/1.5 'DM Sans',sans-serif;letter-spacing:0;color:#fff5dfc4}

@media(max-width:700px){
 /* Keep the canonical mark on its own row, with three unbroken nav controls
    below it. Explicit widths/nowrap prevent flex shrinking Selected work. */
 body #navigation{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:calc(10px + env(safe-area-inset-top)) 18px 10px}
 body #navigation .identity{align-self:flex-start;min-height:44px;width:max-content}
 body #navigation #identity-name{width:100px}
 body #navigation nav{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px;width:100%;margin-top:0}
 body #navigation nav button{flex:0 0 auto;min-width:44px;min-height:44px;padding:7px 3px;font-size:clamp(18px,5.1vw,21px)!important;line-height:1.2;white-space:nowrap}
 body #navigation nav .primary-contact{gap:8px;padding:7px 12px 7px 14px;font-size:clamp(18px,4.8vw,20px)!important;line-height:1.2;min-height:44px}
 body #navigation nav .primary-contact>span{margin-left:0}
 body #navigation nav .primary-contact svg{width:18px;height:18px}
 body #navigation nav button:focus-visible{outline:1px solid var(--paper);outline-offset:4px;border-radius:3px}
 body #navigation nav .primary-contact:focus-visible{border-radius:999px}
 body #opening{padding:64px 24px}
 body #opening>.hero-subheadline{font-size:clamp(20px,5.5vw,25px);line-height:1.2;max-width:20ch;margin-bottom:16px}
 body #opening>.discipline{top:-12px;font-size:clamp(10.5px,2.8vw,12px);letter-spacing:.105em;margin-top:12px}
 body #opening .hero-actions{flex-direction:column;gap:8px;margin-top:24px}
 body #opening .hero-actions>button{min-height:50px;font-size:21px}
 body #opening .hero-actions>.hero-contact{min-height:44px}
 body #scroll-cue[data-scene='opening']{width:22px;height:36px}
 body #top-sky-content{gap:26px;padding:140px 24px 144px}
 body #top-sky-title{max-width:15ch;font-size:clamp(32px,8.7vw,46px);line-height:1.06}
 body #top-sky-work{min-height:50px;font-size:21px}
 /* Follow the phone illustration's .29H center and .24W scale, rather than
    using a height-only anchor that collides with art on shorter phones. */
 body #craft-view .craft-copy{top:calc(29vh + 28vw + 16px)}
 body #craft-view .craft-copy>.chapter-label{font-size:clamp(20px,5.5vw,25px);line-height:1.2;margin-bottom:12px}
 body #craft-view .craft-copy h2{margin-bottom:14px}
 body #craft-view .craft-intro{font-size:15px;line-height:1.5;max-width:30ch;margin-bottom:18px}
 body #craft-view .craft-skills{gap:12px;margin-bottom:0}
 body #craft-view .craft-capability{gap:3px}
 body #craft-view .craft-title{font-size:19px}
 body #craft-view .craft-detail{font-size:12px;line-height:1.4}
}
@media(max-height:740px) and (max-width:700px){
 body #craft-view .craft-copy>.chapter-label{font-size:20px;margin-bottom:8px}
 body #craft-view .craft-copy h2{font-size:clamp(28px,7.5vw,34px);margin-bottom:10px}
 body #craft-view .craft-intro{font-size:14px;margin-bottom:12px}
 body #craft-view .craft-skills{gap:9px}
 body #craft-view .craft-title{font-size:18px}
 body #craft-view .craft-capability{gap:2px}
}
@media(max-height:600px){
 body #opening{padding-block:36px}
 body #opening>#opening-name{width:min(80vw,1160px,95vh)}
 body #opening>.hero-subheadline{margin-bottom:12px}
 body #opening .hero-actions{margin-top:20px}
 body #opening>.discipline{top:-10px}
 body #top-sky-content{gap:20px;padding-block:100px}
 body #top-sky-title{font-size:clamp(32px,5vw,52px)}
}
@media(prefers-reduced-motion:reduce){
 body #opening .hero-actions>button,body #opening .hero-work svg{transition:none}
 body #top-sky-work,body #top-sky-work svg{transition:none}
}
body.reduced #opening .hero-actions>button,body.reduced #opening .hero-work svg{transition:none}
body.reduced #top-sky-work,body.reduced #top-sky-work svg{transition:none}