:root{
  --ink:#0e0b0c; --ink2:#171213; --cream:#f2ebdf; --paper:#faf6ee;
  --gold:#b8975a; --gold2:#d4b57a; --wine:#6e1522; --muted:#a79d8f;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic}
:root{--gutter:max(24px,calc((100vw - 1180px)/2))}
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.center{text-align:center}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1}
h2{font-size:clamp(2.2rem,4.5vw,3.6rem);margin-bottom:1.4rem}
h2 em{color:var(--gold2)}
.eyebrow{font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;font-weight:400}
.rule{display:block;width:60px;height:1px;background:var(--gold);margin:1.4rem auto 0;position:relative}
.rule::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--ink);border:1px solid var(--gold);transform:translateX(-50%) rotate(45deg)}
.btn{display:inline-block;margin-top:1.6rem;padding:.9rem 2.2rem;border:1px solid var(--gold);color:var(--cream);font-size:.78rem;letter-spacing:.25em;text-transform:uppercase;transition:.35s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn-ghost{margin-top:2rem}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.2rem var(--gutter);transition:.4s}
.nav.solid{background:rgba(14,11,12,.92);backdrop-filter:blur(10px);padding-block:.8rem;border-bottom:1px solid rgba(184,151,90,.18)}
.brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.08em}
.nav nav{display:flex;gap:2.2rem}
.nav nav a{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;position:relative;padding:.3rem 0}
.nav nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:.35s}
.nav nav a:hover::after{width:100%}
.burger{display:none;background:none;border:0;width:36px;height:30px;position:relative;cursor:pointer}
.burger span{position:absolute;left:6px;right:6px;height:1px;background:var(--cream);transition:.3s}
.burger span:first-child{top:11px}.burger span:last-child{top:18px}
.burger[aria-expanded=true] span:first-child{top:14px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:14px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 72%;animation:slow 22s ease-out both}
@keyframes slow{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,12,.85) 0%,rgba(14,11,12,.35) 55%,transparent 80%),linear-gradient(0deg,var(--ink) 0%,transparent 12%)}
.hero-text{position:relative;padding:0 0 0 var(--gutter);max-width:calc(var(--gutter) + 620px);animation:rise 1.6s .3s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(3.6rem,10vw,8rem);font-weight:300;letter-spacing:.01em}
.hero h1{margin-left:-.04em}
.hero h1 em{color:var(--gold2);padding-left:0;margin-left:.02em}
.hero-role{margin:1.6rem 0 0;font-size:.95rem;letter-spacing:.5em;padding-left:0}
.hero-sub{margin-top:.8rem;letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--muted)}
.scroll{position:absolute;bottom:1.8rem;left:50%;width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.25}}

/* bio */
section{position:relative}
.bio,.career,.gallery,.contact{padding:clamp(4.5rem,8vw,7.5rem) 0}
.bio-grid,.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.5rem,7vw,7rem);align-items:center}
.bio-grid>div,.contact-grid>div{max-width:560px}
.bio-photo,.contact figure{position:relative}
.bio-photo img,.contact figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bio-photo,.contact figure{margin-left:14px;margin-top:14px}
.bio-photo::before,.contact figure::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--gold);opacity:.6;z-index:-1}
.bio p,.contact p{color:#d6cdbf;margin-bottom:1.2rem}
.bio .lead{font-family:var(--serif);font-size:1.45rem;line-height:1.5;color:var(--cream)}

/* band */
.band{min-height:60vh;display:grid;place-items:center;overflow:hidden;text-align:center;padding:5rem 1.5rem}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.band-shade{position:absolute;inset:0;background:rgba(14,11,12,.62)}
.band blockquote{position:relative;font-family:var(--serif);font-size:clamp(1.7rem,4vw,3rem);font-weight:300;line-height:1.35;max-width:900px}
.band blockquote em{color:var(--gold2)}

/* timeline */
.career{background:var(--ink2)}
.timeline{list-style:none;max-width:900px;margin:4rem auto 0;position:relative}
.timeline::before{content:"";position:absolute;left:130px;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--gold) 6%,var(--gold) 94%,transparent);opacity:.5}
.timeline li{display:grid;grid-template-columns:130px 1fr;gap:0;padding-bottom:3rem;position:relative}
.timeline li::after{content:"";position:absolute;left:126px;top:.9rem;width:9px;height:9px;background:var(--ink2);border:1px solid var(--gold);transform:rotate(45deg)}
.year{font-family:var(--serif);font-size:2rem;color:var(--gold2);padding-right:2rem;text-align:right;line-height:1.1}
.timeline li>div{padding-left:2.6rem}
.timeline h3{font-size:1.55rem;margin-top:1.1rem}
.timeline h3:first-child{margin-top:.3rem}
.timeline h3 small{font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--muted);font-weight:300}
.timeline p{color:#b9afa1;font-size:.95rem}
.also{max-width:900px;margin:2rem auto 0;border-top:1px solid rgba(184,151,90,.3);padding-top:2.5rem}
.also h3{font-size:1.8rem;color:var(--gold2);margin-bottom:1rem}
.also ul{list-style:none;columns:2;column-gap:3rem}
.also li{break-inside:avoid;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--serif);font-size:1.25rem}
.also li span{display:block;font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.also li span em{font-family:var(--serif);font-size:.95rem}

/* next */
.next{padding:clamp(5rem,10vw,9rem) 0;overflow:hidden}
.next-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.next-shade{position:absolute;inset:0;background:linear-gradient(rgba(14,11,12,.88),rgba(14,11,12,.78),rgba(14,11,12,.92))}
.next-inner{position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem}
.card{display:flex;flex-direction:column;border:1px solid rgba(184,151,90,.4);background:rgba(14,11,12,.6);backdrop-filter:blur(4px);padding:2.4rem 1.8rem;text-align:center;transition:.4s}
.card:hover{border-color:var(--gold2);transform:translateY(-6px)}
.role{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:2.1rem;margin:.8rem 0 .2rem;font-style:italic}
.comp{color:var(--muted);margin-bottom:1.2rem!important}
.where{border-top:1px solid rgba(184,151,90,.3);padding-top:1.1rem;font-size:.95rem;margin:auto 0 0!important}
.where small{color:var(--muted);font-size:.8rem}
.note{text-align:center;margin-top:2rem;color:var(--muted);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}

/* gallery */
.masonry{columns:3;column-gap:14px;margin-top:3.5rem}
.masonry button{display:block;width:100%;margin-bottom:14px;padding:0;border:0;background:var(--ink2);cursor:zoom-in;overflow:hidden;break-inside:avoid;position:relative}
.masonry img{width:100%;height:auto;transition:transform .8s,opacity .6s;opacity:0}
.masonry img.loaded{opacity:1}
.masonry button:hover img{transform:scale(1.05)}
.masonry button::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.4s}
.masonry button:hover::after{border-color:var(--gold);inset:10px}

/* contact */
.contact{background:var(--ink2)}
.contact-list{list-style:none;margin-top:2rem}
.contact-list li{display:flex;gap:1.5rem;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.contact-list span{width:100px;flex:none;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);padding-top:.3rem}
.contact-list a{border-bottom:1px solid transparent;transition:.3s}
.contact-list a:hover{color:var(--gold2);border-color:var(--gold2)}

footer{text-align:center;padding:3rem 1rem;border-top:1px solid rgba(184,151,90,.2);color:var(--muted);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase}
footer .brand{color:var(--cream);text-transform:none;margin-bottom:.4rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,6,7,.96);display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:90vw;max-height:90vh;object-fit:contain}
.lightbox button{position:absolute;background:none;border:0;color:var(--cream);cursor:pointer;font-family:var(--serif);transition:.3s}
.lightbox button:hover{color:var(--gold2)}
.lb-close{top:1rem;right:1.6rem;font-size:3rem}
.lb-nav{top:50%;transform:translateY(-50%);font-size:4rem;padding:1rem}
.prev{left:.5rem}.next{right:.5rem}
.lightbox .next{position:absolute}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.hero>img,.hero-text,.scroll{animation:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  body{font-size:16px}
  .burger{display:block}
  .nav nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:2rem;opacity:0;pointer-events:none;transition:.4s}
  .nav nav.open{opacity:1;pointer-events:auto}
  .nav nav a{font-size:1rem}
  .burger,.brand{position:relative;z-index:2}
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,11,12,.97)}
  .nav nav{z-index:1;height:100dvh}
  .nav{padding-inline:1.2rem}
  .hero-text{padding:0 1.5rem;max-width:none}
  .hero>img{object-position:58% 50%}
  .hero{align-items:flex-start;padding-top:6.5rem}
  .hero-shade{background:linear-gradient(180deg,rgba(14,11,12,.8) 0%,rgba(14,11,12,.45) 40%,transparent 60%),linear-gradient(0deg,var(--ink) 0%,transparent 12%)}
  .bio-grid,.contact-grid{grid-template-columns:1fr}
  .bio-photo,.contact figure{max-width:420px;margin:14px auto 1rem}
  .cards{grid-template-columns:1fr}
  .masonry{columns:2}
  .timeline::before{left:6px}
  .timeline li{grid-template-columns:1fr}
  .timeline li::after{left:2px}
  .year{text-align:left;padding:0 0 .3rem 2rem;font-size:1.7rem}
  .timeline li>div{padding-left:2rem}
  .also ul{columns:1}
}
@media (max-width:520px){.masonry{column-gap:8px}.masonry button{margin-bottom:8px}}