:root{--ink:#f6f1e7;--bar:52px;--head:Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Condensed",sans-serif;--body:Georgia,"Iowa Old Style","Palatino Linotype",serif;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;background:#0d0305;color-scheme:dark;touch-action:pinch-zoom}
body{margin:0;touch-action:pinch-zoom;overflow-x:clip;color:var(--ink);font-family:var(--body);background:#0d0305}
#bar{position:fixed;z-index:50;left:0;top:0;bottom:0;width:var(--bar);display:flex;flex-direction:column;padding-left:env(safe-area-inset-left,0px)}
#bar a{flex:0 0 46px;background:var(--c);color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:flex .6s cubic-bezier(.7,0,.2,1);border-bottom:2px solid rgba(0,0,0,.35);font-family:var(--head);position:relative}
#bar a.on{flex:1 1 0}
#bar .n{font-size:22px;transition:opacity .3s}
#bar .t{position:absolute;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(18px,2.6vh,28px);letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .4s;text-shadow:0 1px 2px rgba(0,0,0,.35)}
#bar a.on .n{opacity:0}
#bar a.on .t{opacity:1;transition-delay:.25s}
#bar a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
section{position:relative}
section:first-of-type{margin-top:0}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0d0305}
#bg .stage{position:absolute;inset:0;overflow:hidden;will-change:transform}
section:first-of-type .stage{-webkit-mask-image:none;mask-image:none}
.sky{position:absolute;inset:0}
.layer{position:absolute;left:0;right:0;top:-15%;bottom:-15%;will-change:transform}
.layer svg{width:100%;height:100%;display:block}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.5) 55%,rgba(0,0,0,.28))}
.photo{top:0;bottom:0;background-size:cover;background-position:center}
.glow{mix-blend-mode:screen;opacity:.3;background:radial-gradient(55% 45% at 80% 25%,var(--c),transparent 70%)}
.ph0{background-image:url(images/ph0.jpg)}
.ph1{background-image:url(images/ph1.jpg)}
.ph2{background-image:url(images/ph2.jpg)}
.ph3{background-image:url(images/ph3.jpg)}
.ph4{background-image:url(images/ph4.jpg)}
@media (max-aspect-ratio:1/1){.shade{background:rgba(0,0,0,.58)}
.ph0{background-image:url(images/ph0-portrait.jpg)}
.ph1{background-image:url(images/ph1-portrait.jpg)}
.ph2{background-image:url(images/ph2-portrait.jpg)}
.ph3{background-image:url(images/ph3-portrait.jpg)}
.ph4{background-image:url(images/ph4-portrait.jpg)}
}

.content{position:relative;z-index:2;padding:22vh 6vw 22vh calc(var(--bar) + 7vw);max-width:calc(var(--bar) + 7vw + 54rem + 6vw)}
section:first-of-type .content{padding-top:42vh}
section:last-of-type .content{padding-bottom:60vh}
.content p{position:relative;scroll-margin-top:38vh;margin:0 0 1.5rem;font-size:clamp(1.1rem,1.1rem + .5vw,1.4rem);line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,.6);will-change:opacity,transform;filter:brightness(.72);transition:filter .35s}
.content p.focus{filter:none}
.content p::before{content:"";position:absolute;left:-1.1rem;top:.25em;bottom:.25em;width:4px;border-radius:2px;background:var(--c);transform:scaleY(0);transition:transform .35s}
.content p.focus::before{transform:scaleY(1)}
h1,h2{font-family:var(--head);font-weight:400;margin:0;line-height:.92;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.hero{font-family:var(--head);font-size:clamp(3.4rem,13vw,9rem);line-height:.9;color:#fff}
.hero.red{color:#ff4b57}
.content p.hero{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.05}
.lede{font-size:clamp(1.6rem,3vw,2.4rem)!important;line-height:1.2!important;font-weight:700}
.aside{font-style:italic;opacity:.8}
.content p.big{font-family:var(--head);font-size:clamp(2rem,6vw,3.8rem);line-height:1;color:var(--c)}
.content p.ink{font-weight:700;font-size:clamp(1.3rem,1.3rem + .8vw,1.8rem)}
h2{font-size:clamp(3rem,9vw,6.5rem);margin-bottom:2rem;scroll-margin-top:22vh}
h2 span{display:block;font-size:.55em;color:var(--c);-webkit-text-stroke:0;margin-bottom:.25em}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.layer{transform:none!important}}
@media (max-width:600px){:root{--bar:40px}#bar a{flex-basis:38px}.content{padding-right:5vw}}