/* Reference-led photographic hero. Text and controls remain live HTML. */
.home .hero{
 --hero-ink:#0b1c29;--hero-muted:#344a5b;--hero-edge:clamp(18px,3vw,32px);
 width:100%;max-width:none;margin:0;
 padding:0;background:#e9edef;color:var(--hero-ink);isolation:isolate;
}
.home .hero .hero-art{
 position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;
 background:#dce3e7 url('/artwork/golden-gate-day-v89.webp') right center/cover no-repeat;
 opacity:1;mask-image:none;-webkit-mask-image:none;z-index:-2;
}
.home .hero:before,html[data-theme=dark] .home .hero:before{display:none}
.home .hero-main:before{
 content:"";position:absolute;inset:0 calc((100% - 100vw) / 2);z-index:-1;pointer-events:none;
 /* Keep the soft wash centered on the copy, rather than the viewport edge. */
 background:radial-gradient(ellipse calc(var(--hero-haze-rail) * .58) 88% at calc(50% - var(--hero-haze-rail) * var(--hero-haze-offset)) 48%,#f4f6f7ee 0%,#f3f5f7e6 30%,#eef2f5b3 58%,#eef2f529 80%,#eef2f500 100%),linear-gradient(180deg,#f3f5f65c,transparent 50%);
}
.home .hero-main{
 --hero-haze-rail:min(1136.2px,calc(100vw - 2 * var(--hero-edge)));--hero-haze-offset:.24;
 width:calc(100% - 2 * var(--hero-edge));max-width:1136.2px;margin:0 auto;
 min-height:500px;padding:48px 0;display:grid;align-content:center;position:relative;
}
.home .hero-copy{width:66%;max-width:none}
.home .hero-kicker{font:12px/1.6 var(--sans);letter-spacing:.1em;color:#172b3c}
.home .hero-kicker:before{display:none}
.home .hero h1{font-size:clamp(48px,4.85vw,76px);font-weight:500;line-height:1.04;letter-spacing:-.055em;margin:0 0 28px;color:var(--hero-ink)}
.home .hero .surname{font-size:1em;letter-spacing:inherit;line-height:inherit}
.home .hero .name-period{color:#4a86ed}
.home .hero-description{font-size:clamp(20px,1.7vw,24px);font-weight:400;line-height:1.5;letter-spacing:-.015em;max-width:590px;color:#132635}
.home .hero-support{font-size:17px;line-height:1.65;max-width:570px;margin-top:24px;color:var(--hero-muted)}
.home .hero-actions{margin-top:32px;gap:28px;align-items:center}
.home .hero .primary-link{min-height:46px;padding:12px 22px;background:#102431;border:1px solid #102431;border-radius:7px;color:#f4f8fc;box-shadow:inset 0 1px 0 #ffffff18;font-size:14px}
.home .hero .primary-link:hover{background:#213d50;border-color:#213d50;color:#fff}
.home .hero .secondary-link{color:#132b3d;border-bottom-color:#607686;font-size:14px;padding:10px 0}
.home .hero .secondary-link:hover{color:#275bbb;border-bottom-color:#275bbb}
.home .hero a:focus-visible{outline:3px solid #315da5;outline-offset:5px}
.home .hero-index{
 position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
 max-width:none;width:100%;margin:0;padding:21px var(--hero-edge) 24px;
 border:0;background:linear-gradient(90deg,#102b433d,#0a223b59);
 box-shadow:inset 0 1px 0 #ffffff35;
 -webkit-backdrop-filter:blur(10px) saturate(110%);backdrop-filter:blur(10px) saturate(110%);
 color:#f0f5f9;font:11px/1.6 var(--sans);letter-spacing:.045em;text-shadow:0 1px 3px #07162680;
}
.home .hero-index:before{content:"";position:absolute;left:var(--hero-edge);right:var(--hero-edge);top:0;height:1px;background:#41586540}
.home .hero-index>span{gap:10px;align-items:baseline}
.home .hero-index b{color:inherit;opacity:.8}
/* The theme toggle changes the scenery as well as the live foreground. */
html[data-theme=dark] .home .hero{--hero-ink:#f2f6fc;--hero-muted:#c3d0e2;background:#09172b}
html[data-theme=dark] .home .hero .hero-art{background-color:#0b2040;background-image:url('/artwork/golden-gate-night-v89.webp')}
html[data-theme=dark] .home .hero-main:before{background:linear-gradient(90deg,#071326d9 0%,#08172bb3 28%,#091c3540 55%,#091c3500 78%),linear-gradient(180deg,#06132633,transparent 60%)}
html[data-theme=dark] .home .hero-kicker{color:#c6d5eb}
html[data-theme=dark] .home .hero-description{color:#e3ebf7}
html[data-theme=dark] .home .hero .name-period{color:#85b1ff}
html[data-theme=dark] .home .hero .primary-link{background:#d8e6fb;border-color:#d8e6fb;color:#11243e}
html[data-theme=dark] .home .hero .primary-link:hover{background:#edf4ff;border-color:#edf4ff;color:#11243e}
html[data-theme=dark] .home .hero .secondary-link{color:#e3ecfa;border-bottom-color:#8299b9}
html[data-theme=dark] .home .hero .secondary-link:hover{color:#afcdff;border-bottom-color:#afcdff}
html[data-theme=dark] .home .hero a:focus-visible{outline-color:#a9c9ff}
html[data-theme=dark] .home .hero-index{background:linear-gradient(90deg,#09192d29,#132d471a 45%,#0b172633);box-shadow:inset 0 1px 0 #d2e6ff26}
html[data-theme=dark] .home .hero-index:before{background:#c5d9f133}
html[data-theme=dark] .home .hero-index>span:nth-child(n){color:#e6effc;text-shadow:0 1px 3px #06142780}
@media(min-width:901px){
 .home .hero{--hero-edge:var(--desktop-inset)}
 .home .hero-main{--hero-haze-rail:var(--desktop-rail);width:var(--desktop-rail);min-height:clamp(500px,41vw,620px)}
}
@media(min-width:761px) and (max-width:1100px){
 .home .hero-main{--hero-haze-offset:.23}
 .home .hero-copy{width:68%}
 .home .hero h1{font-size:clamp(43px,4.85vw,52px)}
}
@media(max-width:760px){
 .home .hero{--hero-edge:clamp(16px,3vw,24px)}
 .home .hero-main:before{background:linear-gradient(90deg,#f2f5f7ed,#f2f5f7c7 58%,#eef2f57a),linear-gradient(180deg,#f3f5f690,transparent 65%)}
 html[data-theme=dark] .home .hero-main:before{background:linear-gradient(90deg,#071326e6,#08192bd1 58%,#0a1b339e),linear-gradient(180deg,#06132633,transparent 65%)}
 .home .hero .hero-art{background-position:75% center}
 .home .hero-main{display:block;min-height:0;padding:36px 0 38px}
 .home .hero-copy{width:100%;max-width:570px}
 .home .hero h1{font-size:clamp(34px,6.8vw,51px);margin:0 0 24px}
 .home .hero-kicker{font-size:10px;letter-spacing:.06em}
 .home .hero-description{font-size:19px;max-width:530px}
 .home .hero-support{font-size:16px;line-height:1.65;max-width:490px;margin-top:22px}
 .home .hero-actions{margin-top:28px;gap:24px}
 .home .hero-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;padding-block:18px 21px;background:#11243133;font-size:10px;letter-spacing:.025em}
 .home .hero-index>span:nth-child(n){color:#f0f5f9;text-shadow:0 1px 3px #07162680}
}
@media(max-width:350px){.home .hero h1{font-size:32px}}
@media print{.home .hero{background:white}.home .hero:before,.home .hero-main:before,.home .hero .hero-art{display:none}.home .hero-copy{width:100%}.home .hero-index{display:none}}
@media print{html[data-theme=dark] .home .hero{--hero-ink:#0b1c29;--hero-muted:#344a5b;background:white}html[data-theme=dark] .home .hero-description,html[data-theme=dark] .home .hero-kicker{color:#132635}}

/* Decoded layers keep the existing scenery and framing; only opacity changes. */
html[data-hero-layers=ready] .home .hero .hero-art{background-color:#dce3e7;background-image:url('/artwork/golden-gate-day-v89.webp')}
html[data-hero-layers=ready] .home .hero .hero-art:after{content:"";position:absolute;inset:0;background-image:url('/artwork/golden-gate-night-v89.webp');background-size:inherit;background-position:inherit;background-repeat:no-repeat;opacity:0}
html[data-hero-layers=ready][data-theme=dark] .home .hero .hero-art:after{opacity:1}
html[data-hero-layers=ready] .home .hero-main:before{background:radial-gradient(ellipse calc(var(--hero-haze-rail) * .58) 88% at calc(50% - var(--hero-haze-rail) * var(--hero-haze-offset)) 48%,#f4f6f7ee 0%,#f3f5f7e6 30%,#eef2f5b3 58%,#eef2f529 80%,#eef2f500 100%),linear-gradient(180deg,#f3f5f65c,transparent 50%);opacity:1}
html[data-hero-layers=ready] .home .hero-main:after{content:"";position:absolute;inset:0 calc((100% - 100vw) / 2);z-index:-1;pointer-events:none;background:linear-gradient(90deg,#071326d9 0%,#08172bb3 28%,#091c3540 55%,#091c3500 78%),linear-gradient(180deg,#06132633,transparent 60%);opacity:0}
html[data-hero-layers=ready][data-theme=dark] .home .hero-main:before{opacity:0}
html[data-hero-layers=ready][data-theme=dark] .home .hero-main:after{opacity:1}
html[data-hero-layers=ready] .home .hero-index{background:transparent;isolation:isolate}
html[data-hero-layers=ready] .home .hero-index:before,html[data-hero-layers=ready] .home .hero-index:after{content:"";position:absolute;inset:0;height:auto;z-index:-1;pointer-events:none}
html[data-hero-layers=ready] .home .hero-index:before{background:linear-gradient(#41586540,#41586540) center top/calc(100% - 2 * var(--hero-edge)) 1px no-repeat,linear-gradient(90deg,#102b433d,#0a223b59);opacity:1}
html[data-hero-layers=ready] .home .hero-index:after{background:linear-gradient(#c5d9f133,#c5d9f133) center top/calc(100% - 2 * var(--hero-edge)) 1px no-repeat,linear-gradient(90deg,#09192d29,#132d471a 45%,#0b172633);opacity:0}
html[data-hero-layers=ready][data-theme=dark] .home .hero-index:before{opacity:0}
html[data-hero-layers=ready][data-theme=dark] .home .hero-index:after{opacity:1}
@media(max-width:760px){
 html[data-hero-layers=ready] .home .hero-main:before{background:linear-gradient(90deg,#f2f5f7ed,#f2f5f7c7 58%,#eef2f57a),linear-gradient(180deg,#f3f5f690,transparent 65%)}
 html[data-hero-layers=ready] .home .hero-main:after{background:linear-gradient(90deg,#071326e6,#08192bd1 58%,#0a1b339e),linear-gradient(180deg,#06132633,transparent 65%)}
 html[data-hero-layers=ready] .home .hero-index:before{background:linear-gradient(#41586540,#41586540) center top/calc(100% - 2 * var(--hero-edge)) 1px no-repeat,#11243133}
}
@media(prefers-reduced-motion:no-preference){
 html[data-hero-motion=ready] .home .hero .hero-art:after,
 html[data-hero-motion=ready] .home .hero-main:before,html[data-hero-motion=ready] .home .hero-main:after,
 html[data-hero-motion=ready] .home .hero-index:before,html[data-hero-motion=ready] .home .hero-index:after{transition:opacity 1.35s ease-in-out}
 /* Button colors remain a contrast-safe pair; foreground contrast follows
    actual photo opacity independently of the continuous wash transition. */
 html[data-hero-motion=ready] .home .hero{transition:background-color 1.35s ease-in-out}
 html[data-hero-motion=ready] .home .hero .primary-link,
 html[data-hero-motion=ready] .home .hero .secondary-link{transition:none}
 html[data-hero-motion=ready] .home .hero-index,
 html[data-hero-motion=ready] .home .hero-index>span{transition:color 1.35s ease-in-out,box-shadow 1.35s ease-in-out,text-shadow 1.35s ease-in-out}
}
@media print{.home .hero-main:after{display:none}}

/* Direct leaf colors avoid nested inherited-color transition lag. */
html[data-hero-contrast=active] .home .hero h1,
html[data-hero-contrast=active] .home .hero .surname{color:var(--hero-fade-heading)}
html[data-hero-contrast=active] .home .hero-kicker{color:var(--hero-fade-kicker)}
html[data-hero-contrast=active] .home .hero-description{color:var(--hero-fade-description)}
html[data-hero-contrast=active] .home .hero-support{color:var(--hero-fade-support)}
html[data-hero-contrast=active] .home .hero .name-period{color:var(--hero-fade-accent)}
html[data-hero-contrast=active] .home .hero .secondary-link{color:var(--hero-fade-link);border-bottom-color:currentColor}
html[data-hero-contrast=active] .home .hero h1,
html[data-hero-contrast=active] .home .hero-kicker,
html[data-hero-contrast=active] .home .hero-description,
html[data-hero-contrast=active] .home .hero-support,
html[data-hero-contrast=active] .home .hero .secondary-link{text-shadow:var(--hero-fade-shadow);transition:none}

/* Let the sky show above the name while retaining the light wash under the copy. */
html:not([data-theme=dark]) .home .hero-main:before,
html[data-hero-layers=ready] .home .hero-main:before{
 -webkit-mask-image:linear-gradient(180deg,transparent 32px,#000 104px);
 mask-image:linear-gradient(180deg,transparent 32px,#000 104px);
}
@media(max-width:760px){
 html:not([data-theme=dark]) .home .hero-main:before,
 html[data-hero-layers=ready] .home .hero-main:before{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42px);
  mask-image:linear-gradient(180deg,transparent 0,#000 42px);
 }
}