.back{display:flex;align-items:center;gap:.6em;padding:var(--g) var(--g) 0;font-size:var(--t-b);font-weight:500}
.back a{display:inline-flex;align-items:center;gap:.5em}
.back a span{transition:transform .35s var(--ease)}
.back a:hover span{transform:translateX(-5px)}
.back a:hover{text-decoration:underline;text-underline-offset:3px}
.back>span{opacity:.4}
.back [aria-current]{opacity:.6}

.ph{display:flex;align-items:flex-start;column-gap:clamp(14px,1.4vw,28px);margin:0 var(--g);padding-top:var(--g)}
.back+.ph{padding-top:var(--sp-h)}
.ph .disp{flex:0 1 auto;max-width:75vw;font-size:var(--t0)}
.ph__t{flex:0 0 auto;max-width:15em;margin-top:calc(var(--t0)*.12);font-size:var(--t-s);font-weight:500;line-height:1.35;opacity:.6}
.ph__lead{max-width:34em;padding:clamp(10px,1.2vw,24px) var(--g) 0}
@media (max-width:690px){.ph{flex-wrap:wrap}.ph .disp{max-width:none}.ph__t{flex-basis:100%;max-width:22em;margin-top:.5em}}

.hero{position:relative;height:100svh;display:grid;grid-template-columns:auto 1fr;align-items:end;align-content:end;column-gap:clamp(14px,1.4vw,28px);padding:0 var(--g);color:var(--paper);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgb(0 0 0/.28),rgb(0 0 0/.22) 40%,rgb(0 0 0/.5));pointer-events:none}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero>:not(.hero__img){position:relative;z-index:2}
.hero .disp{margin-bottom:clamp(20px,2.4vw,44px);font-size:var(--t1)}
.hero .ph__t{align-self:end;max-width:17em;margin:0 0 calc(clamp(20px,2.4vw,44px) + 1.6em);opacity:.9}
@media (max-width:690px){.hero{grid-template-columns:1fr}.hero .disp{margin-bottom:0}.hero .ph__t{max-width:22em;margin:.5em 0 22px}}