/* Homepage. Desktop calibrated on ../img/home.png (1672 × 941),
   mobile portrait on ../img/home-mobile.png (887 × 1774 device mockup, 390px viewport). */
.hero{--hero-ink:var(--ink);position:relative;isolation:isolate;overflow:clip;min-height:100svh;background:var(--paper);color:var(--hero-ink)}
.hero-face{position:absolute;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:darken}
.hero-face-source{position:absolute;top:0;left:-100%;width:200%;height:auto;max-width:none}
:root[data-theme=dark] .hero-face{filter:invert(1) hue-rotate(180deg);mix-blend-mode:lighten}
/* Entrance start state, set before first paint by the head script only when the intro will run. */
.ec-face-intro .hero-face{transform:translateX(-100%)}
.ec-face-intro .hero-content{transform:translateX(min(22vw,240px))}
@media(prefers-reduced-motion:reduce){.ec-face-intro .hero-face,.ec-face-intro .hero-content{transform:none}}
.hero-shade{display:none}
.hero-meta{position:absolute;z-index:2;font-size:14px;line-height:24px;color:var(--muted)}
.hero-content{position:relative;z-index:2}
.hero-name{font-weight:650;letter-spacing:-.087em;margin:0}
.hero-name-row{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero-name-word{display:block;white-space:nowrap}
.name-period{display:inline-block;letter-spacing:0;margin-left:.05em;color:var(--accent)}
.name-period-glyph{display:inline-block;transform-origin:50% 78%}
.hero-relationship{font-weight:450;letter-spacing:-.04em;max-width:none}
.hero-relationship>span,.hero-role>span{display:block}
.hero-cross{display:inline-block;color:var(--accent);font-size:.85em;margin-right:.06em;vertical-align:.01em}
.hero-role{color:var(--hero-ink)}
.hero-summary{color:var(--muted);letter-spacing:-.025em}
.hero-actions{display:flex;flex-wrap:wrap}
.scroll-cue{position:relative;display:flex;justify-content:space-between;align-items:flex-end;color:var(--muted)}
.scroll-progress{position:absolute;left:0;top:0;width:1px;height:36px;background:var(--accent);transform:scaleY(0);transform-origin:top}
.scroll-direction{color:var(--accent);line-height:1}
.scroll-direction svg{stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scroll-direction--mobile{display:none}

/* ---------- Desktop & landscape composition ---------- */
@media(min-width:900px),(orientation:landscape){
 .header:not(.is-floating) .header-inner{margin-left:calc(17.88% + (var(--fu) - 1vw) * 40);margin-right:3.9%;border-bottom:1px solid #d9dad4}
 :root[data-theme=dark] .header:not(.is-floating) .header-inner{border-bottom-color:var(--line)}
 .header.is-floating .header-inner{margin-left:calc(17.88% + (var(--fu) - 1vw) * 40);margin-right:3.9%}
 .header.is-detached .header-inner{margin-left:var(--gutter);margin-right:var(--gutter)}
 .hero{padding:calc(var(--header-h) + 148px) 3.9% 27px 42.64%}
 /* fu: width unit, raised on squarer screens so the shirt always runs past the fold
    (source bottom sits at 69.6 units below the hero top). */
 :root{--fu:max(1vw,1.437svh)}
 .hero-face{left:0;top:calc(-14.7 * var(--fu));width:calc(44.6 * var(--fu));height:calc(89.2 * var(--fu));clip-path:inset(calc(14.7 * var(--fu)) 0 0 0)}
 .hero-meta{top:calc(var(--header-h) + 29px);right:3.9vw}
 /* Name outdented towards the portrait (refinement 23/10): only the name moves, the
    supporting column keeps the home.png alignment. Reduced on squarer screens, where the
    enlarged portrait reaches further right. */
 .hero{--name-shift:max(0px,calc(5.2vw - (var(--fu) - 1vw) * 60))}
 .hero-name{font-size:9.57vw;line-height:.815;margin:0 0 32px calc(-.065em - var(--name-shift))}
 .hero-relationship{font-size:44px;line-height:1.05;margin:0 0 16px}
 .hero-role{font-size:16px;line-height:1.45;margin:0 0 14px}
 .hero-summary{font-size:18px;line-height:1.35;max-width:560px}
 .hero-actions{gap:28px;margin-top:35px}
 .hero .cta{min-height:60px;padding:16px 30px;gap:20px;font-size:15px}
 .hero .cta--solid{padding-inline:26.5px 30px}
 .hero .cta--line{min-width:192px;--cta-border:#c8cbc5}
 :root[data-theme=dark] .hero .cta--line{--cta-border:var(--line-strong)}
 .scroll-cue{margin-top:42px;padding:20px 0 0 19px;min-height:42px;font-size:14px}
 .scroll-cue::before{content:"";position:absolute;left:0;top:0;width:1px;height:36px;background:#555b57}
 .scroll-direction--desktop{font-size:34px;align-self:center;margin-top:-15px}
 .scroll-direction--desktop svg{width:24px;height:28px}
}
@media(min-width:1401px){.hero-summary>span{display:block;white-space:nowrap}}
@media(min-width:900px) and (max-width:1400px){
 .hero{padding-top:calc(var(--header-h) + clamp(90px,8.5vw,142px))}
 .hero-relationship{font-size:2.51vw}
 .hero-summary{font-size:clamp(14px,1.077vw,18px)}
 .hero-role{font-size:clamp(13px,.957vw,16px)}
 .hero-name{margin-bottom:2.27vw}
 .hero-actions{gap:20px;margin-top:2.09vw}
 .scroll-cue{margin-top:2.5vw}
 .hero .cta{min-height:54px;padding:13px 23px;font-size:14px}
}
@media(min-width:900px) and (max-height:780px){
 .hero{padding-top:calc(var(--header-h) + 64px)}
 .hero-name{font-size:min(9.57vw,18vh);margin-bottom:24px}
 .hero-relationship{font-size:min(2.51vw,4.6vh)}
 .hero-actions{margin-top:22px}
 .scroll-cue{margin-top:24px}
}
/* Landscape phones and small tablets keep the desktop composition, scaled. */
@media(max-width:899px) and (orientation:landscape){
 .header:not(.is-floating) .header-inner,.header.is-floating .header-inner{margin-left:17.88%;margin-right:3.9%}
 .header.is-detached .header-inner{margin-left:calc(var(--gutter) - 17px);margin-right:calc(var(--gutter) - 22px)}
 .header-role{display:none}
 .hero{padding:calc(var(--header-h) + 34px) 4% 22px 44%}
 .hero-meta{display:none}
 .hero-name{font-size:9.6vw;margin-bottom:18px}
 .hero-relationship{font-size:max(19px,3vw);margin-bottom:10px}
 .hero-role{font-size:13px;margin-bottom:8px}
 .hero-summary{font-size:14px}
 .hero-actions{gap:12px;margin-top:18px}
 .hero .cta{min-height:48px;padding:10px 18px;font-size:13px;gap:14px}
 .hero .cta--line{min-width:0}
 .scroll-cue{margin-top:20px;font-size:12px}
}

/* ---------- Mobile & tablet portrait: ../img/home-mobile.png ---------- */
@media(max-width:899px) and (orientation:portrait){
 /* u: portrait unit. Width-bound on tall phones (390 × 844 = reference),
    height-bound on shorter screens so the face never pushes the copy off-screen. */
 .hero{--u:min(1vw,.4621svh);--hx:max(20px,7.7vw);--hero-ink:#f2f1eb;--focus-color:var(--mint);display:flex;flex-direction:column;justify-content:flex-end;padding:0}
 .hero-face{left:0;top:calc(-5.1 * var(--u));width:calc(100 * var(--u));height:calc(200 * var(--u))}
 .hero-shade{display:block;position:absolute;z-index:1;inset:auto 0 0;height:calc(100% - 136 * var(--u))}
 .hero-content{padding:0 var(--hx) calc(12px + env(safe-area-inset-bottom))}
 .hero-content::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-30px;bottom:0;background:linear-gradient(180deg,rgba(17,19,18,0) 0,rgba(17,19,18,.8) 42px,rgba(17,19,18,.96) 80px,#111312 120px)}
 .hero-meta{display:none}
 .hero-name{color:#f6f5ef;font-size:17.4vw;line-height:.74;margin:0 0 3.1vw -.05em}
 .hero-name-row{padding-bottom:.1em;margin-bottom:-.1em}
 .hero .name-period{color:#2f8f73}
 .hero-relationship{color:#f6f5ef;font-size:6.15vw;line-height:1;margin:0 0 1.3vw}
 .hero-cross{color:#2f8f73}
 .hero-role{font-size:max(12px,3.33vw);line-height:1.32;color:#cfd2cc;margin:0}
 .hero-summary{display:none}
 .hero-actions{display:grid;grid-template-columns:auto auto;gap:4.6vw;margin-top:3.4vw}
 .hero .cta{min-height:44px;padding:0 4.6vw;gap:8px;font-size:max(12px,3.4vw);letter-spacing:-.01em}
 .hero .cta svg{width:19px;height:19px}
 .hero .cta .cta-icon{width:19px;height:19px}
 .hero .cta--solid{--cta-ink:#111312;--cta-border:#f6f5ef;--cta-fill:var(--mint);--cta-on:#111312;background:#f6f5ef}
 .hero .cta--line{--cta-ink:#f6f5ef;--cta-border:rgba(246,245,239,.78);--cta-fill:#f6f5ef;--cta-on:#111312}
 .scroll-cue{justify-content:center;align-items:center;margin-top:4px;min-height:22px;color:#f6f5ef}
 .scroll-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .scroll-progress{display:none}
 .scroll-direction--desktop{display:none}
 .scroll-direction--mobile{display:block;color:#cfd2cc}
 .scroll-direction--mobile svg{width:22px;height:13px}
 /* Header over the portrait: logo and Menu only, as in the reference. */
 .header{--header-h:56px}
 .header .header-inner{padding:0 22px 0 17px}
 .header:not(.is-floating) .header-inner{border:0}
 .header .brand{font-size:44px;letter-spacing:-4.4px;transform:translateY(-2px)}
 :root[data-theme=dark] .hero-shade,:root[data-theme=dark] .hero-content::before{filter:none}
}
@media(min-width:600px) and (max-width:899px) and (orientation:portrait){
 .hero{--hx:7vw}
 .hero-name{font-size:14.5vw}
 .hero-relationship{font-size:5.2vw}
 .hero-role{font-size:2.6vw}
 .hero-actions{grid-template-columns:auto auto;justify-content:start;gap:16px;margin-top:4vw}
 .hero .cta{min-height:56px;padding:0 26px;font-size:16px;gap:24px}
 .hero-summary{display:block;font-size:2.4vw;color:#b9beb8;margin-top:2vw;max-width:60ch}
 .hero-summary>span{display:inline}
 .header .header-inner{padding:0 var(--gutter)}
 .header .pref{display:inline-flex}
}
@media(max-width:899px) and (orientation:portrait) and (max-width:359px){
 .hero-actions{grid-template-columns:auto auto;gap:10px}
 .hero .cta{padding:0 11px;font-size:12px;gap:6px}
 .hero .cta svg{width:17px;height:17px}
}

/* Homepage scroll handoff progress: the cue fills green as the hero leaves. */
@media(prefers-reduced-motion:reduce){.scroll-progress{transform:scaleY(1)}}
@media(min-width:900px),(orientation:landscape){
 .header-inner{transition:margin .45s var(--ease-out)}
}