/* Reference: pale upper background, centred photographer, dark lower text field. */
.reference-hero{position:relative;isolation:isolate;overflow:hidden;height:calc(100svh - 54px);min-height:690px;max-height:1080px;background:radial-gradient(ellipse 54% 85% at 50% 23%,#000 0%,#050505 35%,#777 76%,#ccc 100%);color:#fff}
.reference-hero-portrait{position:absolute;z-index:-1;top:50px;left:50%;width:min(78vw,900px);height:auto;transform:translate(-50%,var(--story-y,0px));filter:grayscale(1);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 23%,#000 77%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 23%,#000 77%,transparent 100%)}
.reference-hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#111 0%,#111d 11%,#1118 25%,transparent 53%)}
.reference-hero-side,.reference-hero-portfolio{position:absolute;top:40%;color:#151515;font-size:11px;font-weight:500;line-height:1.5}
.reference-hero-side{left:4%}.reference-hero-portfolio{right:4%;display:flex;gap:12px;align-items:center}.reference-hero-portfolio svg{width:18px;height:18px}
.reference-hero-title{position:absolute;left:3%;right:3%;bottom:6%;text-align:center;animation:hero-arrive 1s ease both}
.reference-hero-title h1{margin:0;line-height:1;letter-spacing:-.055em}
.reference-hero-line{display:flex;justify-content:center;align-items:baseline;gap:clamp(7px,1.4vw,25px);white-space:nowrap}
.reference-hero-line-second{padding-left:8%;margin-top:-.01em}.reference-hero-line-second .reference-hero-script{margin-left:.12em}
.reference-hero-strong{font-family:var(--sans);font-size:clamp(43px,6.5vw,104px);font-weight:700;letter-spacing:-.07em}
.reference-hero-script{font-family:var(--script);font-size:clamp(46px,7.3vw,118px);font-weight:400;letter-spacing:-.055em;line-height:1.25}
.reference-hero-scroll{position:absolute;left:4%;bottom:20px;display:flex;align-items:center;gap:12px;color:#eee;font-size:8px;letter-spacing:.15em}.reference-hero-scroll svg{width:18px;height:18px}
.is-home .site-header.on-hero:not(.is-scrolled){color:#111;background:#ddddddf2;text-shadow:none}
.is-home.menu-is-open .site-header.on-hero:not(.is-scrolled){color:#f2f1ec}
@media(max-width:760px){.reference-hero{min-height:620px;height:calc(100svh - 44px);max-height:840px}.reference-hero-portrait{width:125%;max-width:690px;top:50px}.reference-hero-shade{background:linear-gradient(0deg,#111 0%,#111d 18%,#1118 33%,transparent 55%)}.reference-hero-side{top:24%;left:6%;font-size:9px}.reference-hero-portfolio{top:30%;left:6%;right:auto;font-size:9px}.reference-hero-title{left:3%;right:3%;bottom:14%}.reference-hero-line{gap:1.1vw}.reference-hero-line-second{padding:0;margin-top:2vw}.reference-hero-strong{font-size:6.7vw;letter-spacing:-.065em}.reference-hero-script{font-size:7.8vw;letter-spacing:-.06em}}
@media(max-width:760px){
 .reference-hero-portrait{-webkit-mask-image:linear-gradient(180deg,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 65%,transparent 100%)}
 .reference-hero-side,.reference-hero-scroll{display:none}
 .reference-hero-portfolio{top:auto;bottom:5%;left:7%;right:7%;color:#fff;justify-content:center;border:1px solid #ffffff80;border-radius:6px;padding:11px;font-size:10px}
 .reference-hero-title{bottom:17%;}
 .reference-hero-line{flex-direction:column;align-items:center;gap:0;line-height:1}
 .reference-hero-line-second{margin-top:0}.reference-hero-line-second .reference-hero-script{margin-left:0}
 .reference-hero-strong{font-size:8vw;line-height:1.05}.reference-hero-script{font-size:11vw;line-height:1.1}
}
@media(prefers-reduced-motion:reduce){.reference-hero-title{animation:none}}