@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@500;700;800;900&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--black:#080808;--paper:#f1ede3;--red:#f12b22;--line:rgba(255,255,255,.2);--mono:'DM Mono',monospace;--sans:Inter,Arial,sans-serif;--serif:'Playfair Display',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--black);color:#fff;font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.skip{position:fixed;z-index:200;top:-100px;left:12px;background:#fff;color:#000;padding:10px}.skip:focus{top:12px}.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;height:82px;padding:0 clamp(22px,3vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.brand{font-size:12px;font-weight:900;letter-spacing:.03em}.site-header nav{display:flex;gap:32px}.site-header nav a,.menu-button{font:500 8px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#bbb}.site-header nav a:hover,.site-header nav .is-current{color:#fff}.menu-button{display:none;border:0;background:none}.mobile-menu{display:none}.hero{position:relative;min-height:100svh;overflow:hidden;background:#111}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.22) 55%,rgba(0,0,0,.25)),linear-gradient(0deg,rgba(0,0,0,.52),transparent 48%)}.hero-top{position:absolute;top:112px;left:clamp(24px,4vw,72px);right:clamp(24px,4vw,72px);display:flex;justify-content:space-between;font:500 8px var(--mono);letter-spacing:.18em}.hero-copy{position:absolute;left:clamp(24px,4vw,72px);bottom:clamp(100px,12vh,150px)}.hero-copy>p{margin:0 0 20px;color:var(--red);font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase}.hero-copy h1{margin:0;max-width:1100px;font-size:clamp(4.3rem,9.5vw,10rem);line-height:.72;letter-spacing:-.075em;text-transform:uppercase}.hero-copy h1 em{font-family:var(--serif);font-weight:500;text-transform:none;color:#ffe082}.hero-copy>a{display:inline-flex;gap:36px;border-bottom:1px solid #fff;margin-top:48px;padding:0 0 10px;font:500 8px var(--mono);letter-spacing:.15em;text-transform:uppercase}.hero-foot{position:absolute;bottom:28px;right:clamp(24px,4vw,72px);display:flex;gap:25px;font:400 7px var(--mono);letter-spacing:.14em;text-transform:uppercase}.intro{background:var(--paper);color:#111;display:grid;grid-template-columns:1fr 2.1fr 1fr;gap:clamp(30px,5vw,90px);padding:clamp(100px,12vw,190px) clamp(24px,5vw,90px)}.kicker,.section-head>p,.contact>p{font:500 8px var(--mono);letter-spacing:.16em;text-transform:uppercase}.intro h2{margin:0 0 38px;font-size:clamp(3.2rem,6.6vw,7.8rem);line-height:.8;letter-spacing:-.065em;text-transform:uppercase}.intro>div>p{max-width:720px;margin:0;font:400 clamp(1rem,1.55vw,1.45rem)/1.7 var(--mono)}.intro aside{border-left:1px solid #bbb;padding-left:28px}.intro aside span{color:var(--red);font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase}.intro aside p{font:400 12px/2 var(--mono)}.work{padding:clamp(90px,10vw,160px) clamp(10px,2vw,32px)}.section-head{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:end;gap:30px;margin:0 auto 70px;max-width:1800px}.section-head h2{margin:0;font-size:clamp(5rem,12vw,13rem);line-height:.68;letter-spacing:-.08em;text-transform:uppercase}.section-head>span{text-align:right;color:#777;font:400 8px var(--mono);letter-spacing:.14em;text-transform:uppercase}.music-grid{columns:3;column-gap:10px;max-width:1800px;margin:auto}.photo{position:relative;display:block;width:100%;margin:0 0 10px;padding:0;border:0;background:none;color:#fff;cursor:zoom-in;break-inside:avoid;overflow:hidden}.photo img{display:block;width:100%;height:auto;transition:transform .45s ease,filter .45s ease}.photo span{position:absolute;left:0;right:0;bottom:0;padding:50px 14px 13px;background:linear-gradient(transparent,rgba(0,0,0,.85));font:500 7px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:.25s}.photo:hover img{transform:scale(1.012);filter:brightness(.78)}.photo:hover span{opacity:1;transform:none}.coverage{background:var(--paper);color:#111;padding:clamp(100px,12vw,190px) clamp(24px,5vw,90px)}.section-head.light{margin-bottom:80px}.section-head.light h2{font-size:clamp(4.5rem,9vw,10rem)}.section-head.light>span{color:#777}.story-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #aaa;border-left:1px solid #aaa}.story-grid a{min-height:290px;padding:34px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;transition:background .25s,color .25s}.story-grid a:hover{background:var(--red);color:#fff}.story-grid span,.story-grid b{font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase}.story-grid h3{margin:55px 0 4px;font-size:clamp(2.2rem,4vw,5rem);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.story-grid p{margin:0 0 35px;font:400 11px var(--mono)}.story-grid b{display:block}.contact{min-height:88svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(70px,8vw,140px) clamp(24px,5vw,90px);background:var(--red)}.contact h2{margin:45px 0;font-size:clamp(4rem,10vw,11rem);line-height:.74;letter-spacing:-.075em;text-transform:uppercase}.contact h2 em{font-family:var(--serif);font-weight:500;text-transform:none;color:#ffe082}.contact>a{align-self:flex-start;display:flex;gap:60px;border-bottom:1px solid #fff;padding:0 0 12px;font:500 9px var(--mono);letter-spacing:.15em;text-transform:uppercase}footer{min-height:160px;padding:45px clamp(24px,5vw,90px);display:flex;align-items:flex-end;justify-content:space-between;color:#777;font:400 7px var(--mono);letter-spacing:.13em;text-transform:uppercase}.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;margin:0;padding:70px;background:rgba(0,0,0,.96);color:#fff}.lightbox[open]{display:grid;grid-template-columns:55px 1fr 55px;align-items:center}.lightbox::backdrop{background:#000}.lightbox figure{margin:0;text-align:center}.lightbox figure img{max-width:min(1500px,100%);max-height:82vh;object-fit:contain}.lightbox figcaption{margin-top:14px;font:400 8px var(--mono);letter-spacing:.12em;text-transform:uppercase}.lightbox button{border:0;background:none;color:#fff;cursor:pointer}.lightbox-close{position:absolute;right:30px;top:24px;font:500 8px var(--mono);text-transform:uppercase;letter-spacing:.15em}.lightbox-prev,.lightbox-next{font-size:26px}
@media(max-width:900px){.site-header{height:64px;padding:0 18px}.site-header nav{display:none}.menu-button{display:block}.mobile-menu{position:fixed;z-index:45;inset:0;background:rgba(8,8,8,.98);padding:110px 24px 40px;flex-direction:column;gap:18px}.mobile-menu.is-open{display:flex}.mobile-menu a{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:17px;font-size:clamp(2rem,9vw,4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em}.mobile-menu span{align-self:center;font:500 7px var(--mono);color:var(--red)}.hero-copy h1{font-size:clamp(4rem,15vw,8rem)}.intro{grid-template-columns:1fr}.intro aside{border-left:0;border-top:1px solid #bbb;padding:28px 0 0}.section-head{grid-template-columns:1fr 1fr}.section-head h2{grid-column:1/-1;grid-row:2}.section-head>span{text-align:left}.music-grid{columns:2}.lightbox{padding:55px 10px}.lightbox[open]{grid-template-columns:36px 1fr 36px}}
@media(max-width:560px){.hero>img{object-position:56% 50%}.hero-top{top:90px}.hero-copy{bottom:110px}.hero-copy h1{font-size:clamp(3.8rem,19vw,6.2rem);line-height:.76}.hero-foot{left:24px;right:auto}.intro,.coverage{padding-left:20px;padding-right:20px}.intro h2{font-size:clamp(3.3rem,17vw,5.4rem)}.work{padding-left:7px;padding-right:7px}.section-head{margin:0 13px 42px;display:block}.section-head h2{margin:25px 0}.section-head>span{display:block}.music-grid{columns:1;column-gap:0}.photo{margin-bottom:7px}.photo span{opacity:1;transform:none}.story-grid{grid-template-columns:1fr}.story-grid a{min-height:240px}.contact{min-height:75svh}.contact h2{font-size:clamp(3.6rem,18vw,6rem)}footer{align-items:flex-start;flex-direction:column;gap:18px;min-height:180px}.lightbox-prev,.lightbox-next{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img{transition:none}}

/* Local offset contact-sheet study */
.music-grid{counter-reset:music-frame}
.photo{--frame-turn:0deg;counter-increment:music-frame;opacity:0;transform:translateY(28px) rotate(var(--frame-turn));transition:opacity .65s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.photo.is-seen{opacity:1;transform:translateY(0) rotate(var(--frame-turn))}
.photo:before{content:counter(music-frame,decimal-leading-zero);position:absolute;z-index:3;top:12px;right:12px;border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(0,0,0,.72);padding:7px 9px;color:#fff;font:500 8px/1 var(--mono);letter-spacing:.08em;backdrop-filter:blur(8px)}
.photo span{right:auto;bottom:12px;left:12px;width:max-content;max-width:calc(100% - 24px);border:1px solid #111;border-radius:999px;background:var(--paper);padding:9px 12px;color:#111;opacity:.9;transform:none;box-shadow:4px 4px 0 rgba(0,0,0,.85)}
.photo:hover span{opacity:1;transform:translateY(-3px)}
@media(min-width:901px){
  .photo:nth-child(5n + 2){width:84%;margin:42px 0 54px auto;--frame-turn:1deg}
  .photo:nth-child(7n + 4){width:88%;margin:24px auto 50px 5%;--frame-turn:-1deg}
  .photo:nth-child(6n + 1){--frame-turn:-.45deg}
}
@media(max-width:900px){.photo{--frame-turn:0deg}.photo:nth-child(n){width:100%;margin-left:0;margin-right:0}}
@media(prefers-reduced-motion:reduce){.photo{opacity:1;transform:none;transition:none}}

/* Rotating music hero */
.music-hero-slides,.music-hero-slide{position:absolute;inset:0;width:100%;height:100%}
.music-hero-slide{object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 1s ease,transform 6.8s ease}
.music-hero-slide.is-active{opacity:1;transform:scale(1)}
.music-hero-slide:nth-child(1){object-position:50% 48%}
.music-hero-slide:nth-child(2){object-position:50% 45%}
.music-hero-slide:nth-child(3){object-position:50% 40%}
.music-hero-slide:nth-child(4){object-position:50% 45%}
.music-hero-slide:nth-child(5){object-position:50% 42%}
.music-hero-slide:nth-child(6){object-position:50% 40%}
@media(max-width:560px){.music-hero-slide{object-position:50% 50%}}
@media(prefers-reduced-motion:reduce){.music-hero-slide{transition:none;transform:none}}

/* Compact portfolio introduction */
.intro{padding:clamp(60px,7vw,105px) clamp(24px,5vw,90px)}
.intro h2{margin-bottom:24px}
@media(min-width:901px){
  .intro{grid-template-columns:minmax(0,2.2fr) minmax(240px,.8fr);column-gap:clamp(40px,6vw,110px);row-gap:28px}
  .intro>.kicker{grid-column:1/-1;margin:0}
  .intro>div{grid-column:1}
  .intro>aside{grid-column:2}
}