
:root{
  --navy:#16243b;
  --deep:#0c1524;
  --cream:#efe4cf;
  --paper:#faf6ed;
  --mustard:#e0b13f;
  --red:#b84535;
  --blue:#4b6485;
  --ink:#20242b;
  --muted:#70747a;
  --line:rgba(32,36,43,.17);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Libre Franklin",sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font:inherit}

.header{
  height:78px;background:var(--navy);color:white;padding:0 3vw;
  display:grid;grid-template-columns:1fr .7fr 1fr;align-items:center;position:relative;z-index:50
}
.logo img{width:215px;height:auto}
.header-tag{text-align:center;font:.48rem "Space Mono",monospace;letter-spacing:.12em;color:#9ba7b8}
.nav{justify-self:end;display:flex;gap:1.5rem;font:.52rem "Space Mono",monospace;text-transform:uppercase}
.menu-btn{display:none;border:0;background:none}
.menu-btn span{display:block;width:28px;height:1px;background:white;margin:7px 0}

.hero{padding:4vw;background:var(--cream)}
.album{
  min-height:760px;background:var(--paper);display:grid;grid-template-columns:.9fr 1.1fr;
  position:relative;border:1px solid var(--ink);overflow:hidden
}
.album-left{padding:6vw 4vw;display:flex;flex-direction:column;justify-content:center;z-index:2}
.catalogue{font:.48rem "Space Mono",monospace;letter-spacing:.12em}
.album h1,.story h2,.tracks h2,.coffee h2,.jazz h2,.zeus h2,.lunch h2,.slot-note h2,.visit h2{
  font:500 clamp(4.2rem,7vw,8rem)/.85 "Bebas Neue",sans-serif;
  letter-spacing:.005em;margin:1rem 0
}
.album-left p{max-width:480px;line-height:1.8;color:var(--muted)}
.hero-cta{display:inline-block;margin-top:1.5rem;font:.52rem "Space Mono",monospace;border-bottom:1px solid;align-self:flex-start;padding-bottom:.3rem}
.album-photo{margin:0;min-height:760px}
.record{position:absolute;width:290px;height:290px;background:#101010;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.record:before,.record:after{content:"";position:absolute;border-radius:50%;border:1px solid #303030;inset:22px}.record:after{inset:55px}
.record-ring{position:absolute;inset:86px;border:1px solid #333;border-radius:50%}
.record-label{position:absolute;inset:108px;background:var(--mustard);border-radius:50%;display:grid;place-items:center;font:700 1.2rem "Space Mono",monospace;color:var(--navy)}
.album-side{position:absolute;right:1.2rem;bottom:1.2rem;background:var(--navy);color:white;padding:1rem 1.2rem;display:grid;grid-template-columns:auto auto;gap:.3rem .8rem;z-index:4}
.album-side span{font:.42rem "Space Mono",monospace;color:#93a0b1}.album-side strong{font:.5rem "Space Mono",monospace}

.ticker{height:50px;background:var(--red);color:white;display:flex;align-items:center;justify-content:center;gap:1.5rem;white-space:nowrap;overflow:hidden;font:.5rem "Space Mono",monospace;letter-spacing:.1em}
.ticker i{font-style:normal;color:var(--mustard)}

.story{padding:10vw 7vw;background:var(--paper);display:grid;grid-template-columns:.25fr 1.05fr .55fr;gap:5vw}
.story-label{font:.5rem "Space Mono",monospace;writing-mode:vertical-rl}
.story h2{font-size:clamp(4rem,5.7vw,6.4rem);margin:0}
.story-copy{align-self:end}.story-copy p{line-height:1.9;color:var(--muted)}

.tracks{padding:9vw 5vw;background:var(--navy);color:white;display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:start}
.tracks-head{position:sticky;top:110px}.tracks-head>span{font:.5rem "Space Mono",monospace;color:#9aa6b7}.tracks h2{font-size:clamp(4rem,6vw,6.8rem)}
.tracklist article{display:grid;grid-template-columns:48px 1fr 70px;gap:1rem;padding:1.4rem 0;border-top:1px solid #4a5870}
.tracklist article:last-child{border-bottom:1px solid #4a5870}
.tracklist span,.tracklist b{font:.48rem "Space Mono",monospace;color:#91a0b4}
.tracklist h3{font:500 1.65rem "Bebas Neue",sans-serif;letter-spacing:.03em;margin:0 0 .3rem}
.tracklist p{font-size:.72rem;line-height:1.6;color:#aeb9c8;margin:0}
.tracklist b{align-self:center;text-align:right}
.bagel-shot{grid-column:1/-1;margin:2vw 0 0;height:560px}

.coffee{display:grid;grid-template-columns:1.15fr .85fr;background:var(--mustard);min-height:720px}
.coffee-photo{min-height:720px}
.coffee-copy{padding:7vw 5vw;display:flex;flex-direction:column;justify-content:center}
.coffee-copy>span{font:.5rem "Space Mono",monospace}.coffee h2{font-size:clamp(4rem,5.6vw,6.3rem)}.coffee-copy p{line-height:1.85;color:#5e4d21}
.coffee-list{margin-top:2rem;border-top:1px solid #7e6828}
.coffee-list div{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid #8e752d;font:.5rem "Space Mono",monospace}

.jazz{min-height:760px;background:var(--deep);color:white;display:grid;grid-template-columns:.65fr 1.35fr;position:relative}
.jazz-poster{padding:6vw 4vw;background:var(--red);display:flex;flex-direction:column;justify-content:center}
.jazz-poster>span{font:.5rem "Space Mono",monospace}.jazz h2{font-size:clamp(4.5rem,6.5vw,7.2rem);margin:.5rem 0}.jazz-poster p{line-height:1.7}
.jazz-photo{margin:0;min-height:760px}
.jazz-note{position:absolute;right:3vw;bottom:3vw;background:var(--cream);color:var(--ink);padding:1.2rem;display:flex;flex-direction:column}
.jazz-note span,.jazz-note small{font:.44rem "Space Mono",monospace}.jazz-note strong{font:500 1.2rem "Bebas Neue",sans-serif;margin:.4rem 0}

.zeus{padding:9vw 8vw;background:var(--blue);color:white;display:grid;grid-template-columns:1.2fr .4fr;gap:5vw;align-items:center}
.zeus-copy>span{font:.5rem "Space Mono",monospace;color:#c4ccda}.zeus h2{font-size:clamp(4rem,5.8vw,6.5rem)}.zeus-copy p{max-width:780px;line-height:1.85;color:#d8deea}
.zeus-bolt{text-align:center;font:500 12rem "Bebas Neue",sans-serif;color:#a9b7cb}

.lunch{padding:9vw 5vw;background:var(--cream)}
.lunch-head{display:grid;grid-template-columns:.3fr 1fr;align-items:end;margin-bottom:4vw}
.lunch-head>span{font:.5rem "Space Mono",monospace}.lunch h2{font-size:clamp(4rem,6vw,6.7rem);margin:0}
.lunch-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:300px 300px;gap:1vw}
.lunch-main{grid-row:1/3;margin:0}
.lunch-card{padding:2rem;display:flex;flex-direction:column;justify-content:flex-end}.lunch-card span{font:500 2rem "Bebas Neue",sans-serif}.lunch-card p{font-size:.74rem;line-height:1.6}
.lunch-card.mustard{background:var(--mustard)}.lunch-card.red{background:var(--red);color:white}.lunch-card.cream{background:var(--paper);grid-column:2/4}

.slot-note{padding:10vw 8vw;background:var(--paper);display:grid;grid-template-columns:.28fr 1.2fr;gap:6vw}
.slot-side{font:.5rem "Space Mono",monospace;writing-mode:vertical-rl}.slot-copy>span{font:.5rem "Space Mono",monospace}.slot-note h2{font-size:clamp(3.9rem,5.2vw,6rem)}.slot-copy p{max-width:830px;line-height:1.85;color:var(--muted)}

.visit{display:grid;grid-template-columns:.8fr 1.2fr;min-height:700px;background:var(--navy);color:white}
.visit-copy{padding:7vw 5vw;display:flex;flex-direction:column;justify-content:center}
.visit-copy>span{font:.5rem "Space Mono",monospace;color:#a4afbd}.visit h2{font-size:clamp(4rem,5.6vw,6.3rem)}
.visit-list{border-top:1px solid #536078}.visit-list div{padding:1rem 0;border-bottom:1px solid #44526a}.visit-list small{display:block;font:.44rem "Space Mono",monospace;color:#8d9bad;margin-bottom:.35rem}.visit-list strong{font-size:.78rem;line-height:1.6}
.visit-copy>a{margin-top:2rem;align-self:flex-start;font:.48rem "Space Mono",monospace;border-bottom:1px solid;padding-bottom:.4rem}
.visit figure{margin:0;min-height:700px}

footer{padding:5vw 6vw 2.5vw;background:var(--deep);color:white;display:grid;grid-template-columns:1fr .5fr .4fr;gap:5vw}
.footer-logo img{width:215px;height:auto}.footer-logo p{font-size:.66rem;color:#8e9aab;max-width:390px}
.footer-nav{display:flex;flex-direction:column;gap:.55rem;font:.5rem "Space Mono",monospace;text-transform:uppercase}
.footer-label{text-align:right;font:500 2.4rem/1 "Bebas Neue",sans-serif;color:#536078}
.footer-bottom{grid-column:1/-1;border-top:1px solid #2f3d54;margin-top:3rem;padding-top:1.4rem;font:.46rem "Space Mono",monospace;color:#69778c}
.mobile-menu{display:none}

@media(max-width:980px){
  .header{grid-template-columns:1fr auto}.header-tag,.nav{display:none}.menu-btn{display:block}
  .album{grid-template-columns:1fr}.album-left{min-height:520px}.album-photo{min-height:520px}.record{width:220px;height:220px}.record-label{inset:83px}
  .story{grid-template-columns:.2fr 1fr}.story-copy{grid-column:2}
  .tracks{grid-template-columns:1fr}.tracks-head{position:static}
  .lunch-grid{grid-template-columns:1fr 1fr}.lunch-main{grid-column:1/-1;height:520px}.lunch-card.cream{grid-column:1/-1}
  .mobile-menu{display:flex;position:fixed;inset:78px 0 0;background:var(--navy);color:white;z-index:40;flex-direction:column;padding:8vw;transform:translateX(100%);transition:.35s}
  .mobile-menu.open{transform:none}.mobile-menu a{font:500 3rem/1.4 "Bebas Neue",sans-serif;border-bottom:1px solid #40506a}
}

@media(max-width:680px){
  .header{height:70px;padding:0 5vw}.logo img{width:185px}.mobile-menu{inset:70px 0 0}
  .hero{padding:0}.album{border:0}.album-left{padding:18vw 7vw;min-height:620px}.album h1{font-size:5.5rem}.album-photo{min-height:560px}.record{width:180px;height:180px}.record:before{inset:18px}.record:after{inset:35px}.record-ring{inset:55px}.record-label{inset:68px}.album-side{display:none}
  .story{grid-template-columns:1fr;padding:18vw 7vw}.story-label{writing-mode:initial}.story-copy{grid-column:auto}
  .tracks{padding:18vw 6vw}.tracklist article{grid-template-columns:36px 1fr}.tracklist b{display:none}.bagel-shot{height:500px}
  .coffee{grid-template-columns:1fr}.coffee-photo{min-height:520px}.coffee-copy{padding:18vw 7vw}
  .jazz{grid-template-columns:1fr}.jazz-poster{padding:18vw 7vw}.jazz-photo{min-height:520px}.jazz-note{right:7vw;bottom:4vw}
  .zeus{grid-template-columns:1fr;padding:18vw 7vw}.zeus-bolt{text-align:left;font-size:8rem}
  .lunch{padding:18vw 6vw}.lunch-head{grid-template-columns:1fr}.lunch-grid{display:block}.lunch-main{height:520px;margin-bottom:4vw}.lunch-card{min-height:240px;margin-bottom:4vw}
  .slot-note{grid-template-columns:1fr;padding:18vw 7vw}.slot-side{writing-mode:initial}
  .visit{grid-template-columns:1fr}.visit-copy{padding:18vw 7vw}.visit figure{min-height:520px}
  footer{grid-template-columns:1fr;padding:14vw 6vw 6vw}.footer-label{text-align:left}.footer-bottom{grid-column:1}
}
