/* One layout source. Each section owns its image frame and responsive rules. */
:root{--black:#080808;--paper:#f2f0e8;--muted:#b9b6ae;--yellow:#f4eb00;--line:rgba(255,255,255,.2);--display:'Barlow Condensed',Impact,sans-serif;--body:Inter,Arial,sans-serif;--gutter:clamp(20px,4vw,64px);--header-height:74px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 60px)}body{max-width:1600px;margin:0 auto;background:var(--black);color:var(--paper);font:400 16px/1.6 var(--body)}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}.skip-link{position:absolute;top:-100px;left:20px;z-index:100;padding:10px 16px;background:var(--yellow);color:#000}.skip-link:focus{top:10px}
.label,.overline{margin:0;color:var(--yellow);font:700 12px/1.5 var(--body);letter-spacing:.15em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:11px 15px;border:2px solid var(--yellow);font:700 12px/1.25 var(--body);letter-spacing:.06em;text-transform:uppercase}.primary{background:var(--yellow);color:#050505}.primary:hover{background:#fff;border-color:#fff}.outline{color:var(--yellow)}.outline:hover{background:var(--yellow);color:#000}

/* Header: readable links until the complete navigation becomes a menu. */
.site-header{height:var(--header-height);position:sticky;top:0;z-index:40;display:grid;grid-template-columns:clamp(100px,10vw,150px) minmax(0,1fr) 136px;align-items:center;gap:18px;padding:0 var(--gutter);background:#080808;border-bottom:2px solid var(--line)}.brand{position:relative;align-self:start}.brand img{position:absolute;top:8px;width:clamp(86px,8vw,125px);max-width:none;aspect-ratio:1;filter:drop-shadow(0 4px 8px #0008)}.site-nav{display:flex;justify-content:center;align-items:center;gap:clamp(16px,2.3vw,36px);min-width:0}.site-nav a{position:relative;white-space:nowrap;font:700 14px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;padding-block:12px}.site-nav a:hover,.site-nav a.active{color:var(--yellow)}.site-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow);transform:skew(-12deg)}.platforms{display:flex;justify-content:flex-end;gap:8px}.platforms a{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.platforms svg{width:18px;height:18px}.platforms a:hover{background:var(--yellow);color:#000}.menu-toggle{display:none}

/* Hero: photograph, lettering, and credit share one proportional frame. */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(440px,37vw,592px);padding:58px var(--gutter) 32px;overflow:hidden;border-bottom:2px solid var(--line)}.hero-grit{display:none}.hero::after,.feature-band::after{content:'';position:absolute;z-index:4;pointer-events:none;left:2%;right:2%;bottom:0;height:7px;background:linear-gradient(90deg,var(--yellow) 0 15%,transparent 15% 29%,var(--yellow) 29% 62%,transparent 88%);clip-path:polygon(0 35%,22% 0,46% 55%,72% 10%,100% 70%,100% 100%,0 100%)}.hero-copy{position:relative;z-index:2;width:56%;max-width:760px;min-width:0}.hero h1{width:100%;aspect-ratio:3/1;margin:12px 0 24px;background:url('assets/breathe-brush-title.png') center/contain no-repeat;font-size:0;line-height:0}.hero h1 br{display:none}.tagline{margin:0 0 14px;color:var(--yellow);font:italic 700 clamp(20px,2.1vw,32px)/1.15 var(--display);letter-spacing:.025em;text-transform:uppercase;transform:rotate(-2deg);transform-origin:left center}.lede{max-width:390px;margin:12px 0;color:#c7c5bd;line-height:1.5}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hero-copy::after{content:'';display:block;width:112px;height:5px;margin-top:18px;background:var(--yellow);clip-path:polygon(0 35%,82% 0,100% 48%,72% 66%,8% 100%)}.hero-visual{position:absolute;z-index:1;width:53%;aspect-ratio:1.4;right:0;top:50%;transform:translateY(-50%)}.hero-portrait{position:absolute;inset:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:62% 12%}.hero-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080808a6,transparent 34%)}.hero-mark{position:absolute;left:15%;bottom:2%;width:32%;transform:rotate(-4deg)}.hero-mark img{width:100%;filter:drop-shadow(0 2px 3px #000)}.hero-caption{position:absolute;right:4%;bottom:5%;margin:0;text-align:right;text-transform:uppercase}.hero-caption span{display:block;color:var(--yellow);font-size:clamp(10px,.8vw,13px);font-weight:700;letter-spacing:.12em}.hero-caption strong{display:block;margin-top:5px;font:800 clamp(22px,2.2vw,34px)/1 var(--display)}

/* Archive feature: the background stops at the actual player border. */
.feature-band{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) calc(clamp(300px,21vw,332px) + 18px + var(--gutter));border-bottom:1px solid var(--line);background:#0b0b0b}.feature-main{position:relative;isolation:isolate;min-width:0;display:grid;grid-template-columns:clamp(110px,13vw,190px) minmax(0,1fr);align-content:center;align-items:center;gap:clamp(18px,2vw,28px);padding:42px 24px 42px var(--gutter);overflow:hidden}.feature-main::before{content:'';position:absolute;z-index:-1;inset:0;background:url('assets/west-koast-palm-grunge.png') left bottom/cover no-repeat;filter:grayscale(1);opacity:.22}.feature-art{width:100%;aspect-ratio:1;object-fit:contain;border:1px solid #666}.feature-copy{min-width:0}.feature-copy h2{margin:14px 0;font:900 clamp(28px,2.7vw,43px)/1 var(--display);text-transform:uppercase}.feature-copy>p:not(.label){margin:0;color:#ccc9c2;font-size:16px;line-height:1.45}.feature-copy>p.body{margin-top:10px;color:var(--muted);font-size:14px}.feature-copy .button{margin-top:20px}.player-card{min-width:0;margin:28px var(--gutter) 28px 0;padding-left:18px;border-left:1px solid var(--line)}.player-card .label{margin-bottom:12px}.player-card iframe{display:block;width:100%;height:352px;border:0;border-radius:10px}

/* Catalog and editorial sections. */
.section{position:relative;padding:32px var(--gutter);border-bottom:1px solid var(--line)}.section h2,.contact h2{margin:10px 0 0;font:900 30px/1 var(--display);text-transform:uppercase}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.catalog-intro{max-width:650px;margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.5}.section-head>a,.about>a{color:var(--yellow);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--yellow);padding-bottom:5px}.cover-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}.cover-row article{min-width:0}.cover-row img{width:100%;aspect-ratio:1;object-fit:contain;border:1px solid #666;background:#111}.cover-row h3{margin:12px 0 4px;font:800 20px/1.05 var(--display);text-transform:uppercase}.cover-row p{margin:0;color:var(--muted);font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.04em}

/* Existing decorative accents stay inside their own sections. */
.releases,.credits{isolation:isolate}
.releases::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('assets/west-koast-palm-grunge.png') center bottom/100% auto no-repeat;filter:grayscale(1);opacity:.12}
.releases::after,.credits::after{content:'';position:absolute;z-index:-1;left:var(--gutter);right:var(--gutter);top:14px;height:4px;background:var(--yellow);clip-path:polygon(0 55%,12% 18%,29% 61%,47% 7%,64% 72%,83% 24%,100% 60%,100% 100%,0 100%)}

/* Story image width controls the crop; wrapping text never zooms the photo. */
.history-story .history-lead{max-width:60%}
.history{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,8vw,128px);align-items:center}.history-copy{width:100%;max-width:760px;min-width:0}.history-story{position:relative;isolation:isolate;display:flow-root;padding:24px 0 34px}.history-story>p:not(.label){position:relative;color:var(--muted);margin:20px 0 0}.history-story .history-lead{font-size:17px}.history-story strong{color:var(--yellow)}.story-art{position:absolute;z-index:-1;inset:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 32%)}.story-art img{position:absolute;width:100%;max-width:none;top:0;left:0;transform:translate(12%,-14%);filter:grayscale(1);opacity:.23;mask-image:linear-gradient(#000 80%,transparent)}.archive-strip{border-top:1px solid var(--line);padding-top:20px}.archive-strip>p{margin:0 0 12px;color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.archive-strip>div{display:flex;flex-wrap:wrap;gap:9px}.archive-strip img{width:72px;aspect-ratio:1;object-fit:contain;border:1px solid #777}.wk4-card{width:100%;max-width:430px;min-width:0;margin:0;justify-self:end;border:1px solid var(--line);background:#080808}.wk4-card>img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.wk4-card>div{padding:16px}.wk4-card span{color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.wk4-card h3{margin:8px 0;font:800 28px/1 var(--display);text-transform:uppercase}.wk4-card p{margin:0;color:var(--muted);font-size:14px}

/* About photo is in normal flow, with a frame independent of text height. */
.split-section{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,3vw,48px)}.affiliates{min-width:0}.collaborator-layout{display:grid;grid-template-columns:minmax(120px,40%) minmax(0,1fr);align-items:center;gap:22px;margin-top:24px}.compilation-photo{width:100%;max-width:270px;aspect-ratio:1;object-fit:contain;border:1px solid #555}.name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.name-grid>div{display:flex;flex-direction:column;min-width:0}.name-grid b{font:800 20px/1.15 var(--display);text-transform:uppercase}.name-grid span{margin-top:5px;color:var(--yellow);font-size:10px;line-height:1.5;letter-spacing:.035em;text-transform:uppercase}.name-grid .memorial span{color:#ccc9c2}.about{--about-gutter:clamp(20px,2vw,32px);position:relative;display:flex;flex-direction:column;min-width:0;padding-left:var(--about-gutter);border-left:1px solid var(--line)}.about-lockup{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:start;margin:20px 0 24px}.about-lockup img{width:100%;aspect-ratio:1;object-fit:contain}.about-lockup p{margin:0;color:#c2bfb7;font-size:14px;line-height:1.6}.about>a{display:inline-block;position:relative;z-index:2;align-self:flex-start;margin-top:auto}.about-visual{position:relative;width:calc(100% + var(--about-gutter));margin:-25px 0 -32px calc(-1 * var(--about-gutter));aspect-ratio:2.7;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.about-visual img{position:absolute;width:100%;top:0;left:0;filter:grayscale(1) brightness(.85)}.about-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(#080808,transparent 18%,transparent 78%,#080808)}

.production-credit{margin:8px 0 0;color:#c8c5bc;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.credit-list{border-top:1px solid var(--line)}.credit-list a{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}.credit-list span{color:var(--muted);font-size:13px}.credit-list b{font:800 24px/1.1 var(--display);text-transform:uppercase}.credit-list em{font-style:normal;color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.credit-list a:hover b{color:var(--yellow)}
.contact{position:relative;isolation:isolate;overflow:hidden;min-height:150px;display:flex;align-items:center;gap:28px;padding:28px var(--gutter);background:#101010;border-top:2px solid var(--yellow);border-bottom:1px solid var(--line)}.contact>img:not(.contact-art){width:80px;flex:0 0 auto}.contact>div{min-width:0}.contact h2{margin:8px 0;font-size:38px}.contact a{font-weight:600;border-bottom:1px solid var(--yellow);padding-bottom:5px;overflow-wrap:anywhere}.contact-art{position:absolute;z-index:-1;width:72%;max-width:none;height:auto;right:0;bottom:-10%;filter:contrast(2) saturate(1.15);opacity:.7;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.footer-art{display:none}.footer-content{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding:24px var(--gutter);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.footer-content strong{color:var(--yellow);font:800 26px/1 var(--display)}.footer-content>span{grid-column:1;grid-row:2;color:#aaa}.footer-content nav{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:20px}.footer-content>a{grid-column:2;grid-row:2;text-align:right}.footer-content a:hover{color:var(--yellow)}

/* Intermediate widths preserve desktop relationships with less spacing. */
@media(max-width:1100px){
.site-header{grid-template-columns:100px minmax(0,1fr) 127px;gap:12px}.site-nav{gap:18px}.platforms{gap:5px}.hero-copy{width:57%}.hero .overline{font-size:11px}.hero-portrait::after{background:linear-gradient(#080808,transparent 9%,transparent 70%,#080808)}.history{gap:32px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.collaborator-layout{grid-template-columns:minmax(0,1fr);gap:20px}.compilation-photo{width:60%;max-width:240px}.name-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.name-grid b{font-size:18px}.about-lockup{grid-template-columns:62px minmax(0,1fr);gap:14px}
}
/* At medium widths, the cover archive accompanies the West Koast 4 card. */
@media(min-width:981px) and (max-width:1300px){
.history{column-gap:clamp(28px,4vw,56px);row-gap:18px;align-items:start}
.history-copy{display:contents}
.history-story{grid-column:1;grid-row:1 / span 2}
.wk4-card{grid-column:2;grid-row:1;align-self:start;justify-self:stretch}
.archive-strip{grid-column:2;grid-row:2;width:100%;max-width:430px;align-self:start}
.archive-strip img{width:calc((100% - 45px)/6)}
}
@media(min-width:801px) and (max-width:980px){
.history{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:24px;align-items:start}
.history-copy{display:contents}
.history-story{grid-column:1/-1;grid-row:1;min-height:48vw}
.archive-strip{grid-column:1;grid-row:2;align-self:start}
.archive-strip>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.archive-strip img{width:100%}
.wk4-card{grid-column:2;grid-row:2;width:100%;justify-self:stretch;align-self:start}
}
@media(min-width:801px) and (max-width:1100px){
.collaborator-layout{grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:start;gap:16px}
.compilation-photo{width:100%}
.name-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.about>a{margin-top:0}
.about-visual{margin-top:18px}
}
/* Small screens reflow complete art groups; internal crops stay fixed. */
@media(max-width:800px){
:root{--header-height:68px}html{scroll-padding-top:100px}.site-header{grid-template-columns:90px minmax(0,1fr) 44px}.brand img{width:84px;top:5px}.platforms{grid-column:2;grid-row:1}.menu-toggle{grid-column:3;grid-row:1;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;width:44px;height:44px;padding:8px;border:0;background:none;cursor:pointer}.menu-toggle span{width:25px;height:2px;background:var(--yellow);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:12px var(--gutter) 20px;background:#080808;border-bottom:2px solid var(--yellow)}.site-nav.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}.site-nav a{font-size:17px}.site-nav a.active::after{right:auto;width:34px}

.feature-band{grid-template-columns:minmax(0,1fr)}.feature-main{min-height:270px;padding:34px var(--gutter);grid-template-columns:minmax(0,28%) minmax(0,1fr);gap:22px}.feature-art{max-width:180px}.feature-copy h2{font-size:clamp(28px,5.1vw,40px)}.player-card{margin:0 var(--gutter) 30px;padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.cover-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.history{grid-template-columns:minmax(0,1fr);gap:32px}.history-copy{max-width:none}.history-story{min-height:48vw}.wk4-card{width:min(100%,430px);justify-self:center}.split-section{grid-template-columns:minmax(0,1fr);gap:32px}.collaborator-layout{grid-template-columns:minmax(0,36%) minmax(0,1fr);align-items:center}.compilation-photo{width:100%}.name-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about{--about-gutter:0px;padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}.about-lockup{grid-template-columns:76px minmax(0,1fr)}.about-lockup p{font-size:15px}.about-visual{margin-top:-20px}
.archive-strip>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.archive-strip img{width:100%}
.footer-content{grid-template-columns:minmax(0,1fr);gap:16px}.footer-content>span,.footer-content>a,.footer-content nav{grid-column:auto;grid-row:auto;justify-content:flex-start;text-align:left}
}
@media(max-width:680px){
.hero{display:grid;grid-template-columns:minmax(0,1fr);padding:46px var(--gutter) 0;min-height:0}.hero-copy{width:100%;max-width:610px}.hero .overline{max-width:none}.hero h1{margin-block:12px 22px}.tagline{font-size:clamp(22px,4.3vw,30px)}.hero-visual{position:relative;width:calc(100% + 2 * var(--gutter));margin:20px calc(-1 * var(--gutter)) 0;top:auto;right:auto;transform:none}.hero-portrait{mask-image:linear-gradient(#0000,#000 10%)}.hero-caption strong{font-size:clamp(22px,4vw,32px)}.hero-caption span{font-size:11px}
}
@media(max-width:600px){
.history-story .history-lead{max-width:none}.story-art{mask-image:linear-gradient(#000,transparent 230px)}
}
@media(max-width:480px){
.label{font-size:11px}.hero .overline{font-size:10px;letter-spacing:.11em}.hero h1{margin-bottom:18px}.actions{gap:8px}.actions .button{flex:1 1 145px;padding-inline:10px;font-size:11px}.feature-main{min-height:240px;grid-template-columns:minmax(0,27%) minmax(0,1fr);gap:14px}.feature-copy h2{font-size:clamp(25px,6.6vw,31px)}.feature-copy>p:not(.label){font-size:14px}.feature-copy .button{padding-inline:10px;font-size:11px}.section-head{flex-direction:column;align-items:flex-start;gap:16px}.cover-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.cover-row h3{font-size:18px}.cover-row p{font-size:10px}.history-story{padding-top:16px}.history-story>p:not(.label){font-size:15px}.archive-strip>div{gap:8px}.archive-strip img{width:calc((100% - 32px) / 5)}.collaborator-layout{grid-template-columns:minmax(0,1fr)}.compilation-photo{max-width:230px}.name-grid{gap:22px}.about-lockup{grid-template-columns:60px minmax(0,1fr)}.about-lockup p{font-size:14px}.about-visual{aspect-ratio:2.3}.credit-list a{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}.credit-list b{grid-column:1;font-size:22px}.credit-list em{grid-column:2;grid-row:1/3}.contact{gap:16px}.contact>img:not(.contact-art){width:58px}.contact .label{font-size:10px}.contact a{font-size:13px}.contact-art{width:100%;bottom:0;opacity:.3}
}
@media(max-width:480px){
.archive-strip>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.archive-strip img{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}