@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#08090c;--line:#292a2c;--text:#eeeae3;--muted:#a6a5a3;--gold:#f1a85d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}.nav{height:78px;position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,80px);background:linear-gradient(#050608c9,transparent)}.brand{font:700 28px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.32em}.brand span{color:var(--gold)}nav{display:flex;gap:34px}nav a,footer a{font-size:11px;font-weight:700;letter-spacing:.2em}nav a:hover,footer a:hover{color:var(--gold)}#menu{display:none;background:none;border:0;color:white;font-size:26px}.hero{height:min(900px,100svh);min-height:600px;position:relative;background:#020305}.hero-art{position:absolute;inset:0;background-image:linear-gradient(to bottom,rgba(0,0,0,.08) 45%,#08090c 99%),url('assets/eclipse.png');background-position:center 46%;background-size:cover}.hero-bottom{position:absolute;bottom:40px;left:clamp(22px,5vw,80px);right:clamp(22px,5vw,80px);display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow,.kicker{font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--gold)}.outline{border:1px solid #777;letter-spacing:.14em;font-size:11px;font-weight:700;padding:18px 23px;transition:.2s}.outline:hover{background:white;color:black}.section{padding:110px clamp(24px,9vw,150px);border-bottom:1px solid var(--line)}.intro,.upcoming,.contact{display:grid;grid-template-columns:1fr 2fr;gap:40px}.kicker{margin:10px 0 30px}.section h1,.section h2,.stage h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;line-height:.9;letter-spacing:.015em;margin:0 0 35px}.section h1{font-size:clamp(70px,11vw,160px)}.section h2,.stage h2{font-size:clamp(62px,9vw,130px)}h1 em{font-style:normal;color:var(--gold)}.dot{color:var(--gold)}.intro p:not(.kicker),.upcoming p:not(.kicker),.contact p:not(.kicker){font-size:clamp(16px,1.5vw,20px);line-height:1.8;max-width:610px}.muted{color:var(--muted)}.section-head{margin-bottom:45px}.section-head h2{margin-bottom:12px}.songs{border-top:1px solid var(--line)}.songs>div{display:grid;grid-template-columns:60px 1fr 220px;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding:20px 0}.songs span{font-size:11px;color:var(--gold)}.songs strong{font:600 clamp(26px,3vw,43px) 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em}.songs small{color:var(--muted);letter-spacing:.12em;font-size:11px;text-align:right}.stage{height:560px;position:relative;overflow:hidden}.stage img{width:100%;height:100%;object-fit:cover;filter:brightness(.57)}.stage-overlay{position:absolute;bottom:60px;left:clamp(24px,9vw,150px)}.stage h2{margin:0}.tag{display:inline-block;border:1px solid #65543d;color:#f5bd7c;padding:13px 20px;letter-spacing:.2em;font-size:11px;margin-top:18px}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:40px clamp(24px,5vw,80px);flex-wrap:wrap}footer p{color:#888;font-size:10px;letter-spacing:.13em}@media(max-width:700px){.nav{height:70px}.nav .brand{font-size:24px}#menu{display:block}nav{display:none;position:absolute;top:68px;left:0;right:0;background:#0b0c0f;padding:25px;flex-direction:column;gap:25px;border-bottom:1px solid #333}nav.open{display:flex}.hero{min-height:520px;height:82svh}.hero-art{background-position:center center}.hero-bottom{bottom:30px;align-items:flex-start;flex-direction:column}.section{padding:80px 24px}.intro,.upcoming,.contact{grid-template-columns:1fr;gap:10px}.songs>div{grid-template-columns:28px 1fr;gap:10px}.songs small{grid-column:2;text-align:left}.stage{height:360px}.stage-overlay{bottom:35px}footer{align-items:flex-start;flex-direction:column}}

/* Responsive refinements: keep the complete TRYPT wordmark visible on small screens. */
html{scroll-padding-top:78px}
body{overflow-x:hidden}
.hero{min-height:0;height:clamp(640px,92svh,920px)}
.hero-art{background-color:#020305;background-repeat:no-repeat;background-size:cover;background-position:center center}
.section h1,.section h2,.stage h2{overflow-wrap:normal}
@media(max-width:900px){
 .hero{height:min(850px,90svh)}
 .hero-art{background-size:contain;background-position:center 45%;background-image:linear-gradient(to bottom,transparent 55%,#08090c 100%),url('assets/eclipse.png')}
 .section h1{font-size:clamp(54px,10vw,110px)}
 .section h2,.stage h2{font-size:clamp(54px,9vw,100px)}
}
@media(max-width:700px){
 html{scroll-padding-top:70px}
 .nav{padding-inline:20px}
 .hero{height:auto;min-height:0;aspect-ratio:auto;padding-top:70px;padding-bottom:34px;display:flex;flex-direction:column;justify-content:flex-end}
 .hero-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1 / 1;background-image:url('assets/eclipse.png');background-size:contain;background-position:center;background-repeat:no-repeat}
 .hero-bottom{position:relative;inset:auto;bottom:auto;left:auto;right:auto;width:100%;padding:4px 24px 0;align-items:center;text-align:center;gap:22px}
 .eyebrow{font-size:10px;letter-spacing:.15em;line-height:1.8}
 .outline{padding:15px 20px}
 .section{padding:68px 22px}
 .section h1{font-size:clamp(52px,12.5vw,82px)}
 .section h2,.stage h2{font-size:clamp(48px,12vw,80px)}
 .intro p:not(.kicker),.upcoming p:not(.kicker),.contact p:not(.kicker){line-height:1.65}
 .songs>div{padding:17px 0}
 .songs strong{font-size:clamp(25px,7vw,36px)}
 .stage{height:300px}
 .stage-overlay{left:22px;right:22px}
 footer{padding:35px 22px}
}
@media(max-width:380px){
 .hero-bottom{padding-inline:14px}
 .section h1{font-size:clamp(46px,12vw,64px)}
 .section h2,.stage h2{font-size:clamp(44px,11.5vw,65px)}
 .nav .brand{font-size:22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v4: Desktop hero uses full artwork, without cropping the eclipse or sunrise. */
@media (min-width:901px){
  .hero{height:clamp(650px,90svh,1050px);min-height:650px;overflow:hidden;background:#020305}
  .hero-art{background-image:linear-gradient(to bottom,transparent 65%,#08090c 100%),url('assets/eclipse.png');background-size:100% 100%,auto 100%;background-position:center center,center center;background-repeat:no-repeat}
  .hero-bottom{bottom:clamp(26px,4vh,48px)}
}
@media (min-width:901px) and (max-height:760px){
  .hero{height:100svh;min-height:560px}
}

/* v5: restore full-bleed desktop artwork, anchored at its top so the eclipse sunrise stays visible. Mobile rules remain untouched. */
@media (min-width:901px){
 .hero{height:clamp(650px,92svh,1050px);min-height:650px;overflow:hidden;background:#020305}
 .hero-art{background-image:linear-gradient(to bottom,rgba(0,0,0,.02) 40%,#08090c 100%),url('assets/eclipse.png');background-size:100% 100%,cover;background-position:center center,center top;background-repeat:no-repeat}
}

/* v6: merch catalog — existing v5 hero/mobile behavior preserved */
.merch .section-head{max-width:820px}
.merch .section-head .muted{line-height:1.7;max-width:660px}
.merch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.merch-card{min-width:0}
.merch-image{aspect-ratio:1;background:#111215;overflow:hidden;border:1px solid #27282b}
.merch-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.merch-card:hover .merch-image img{transform:scale(1.045)}
.merch-info{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 1px 0}
.merch-type{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.merch-info h3{font:700 clamp(23px,2.2vw,32px) 'Barlow Condensed',Impact,sans-serif;letter-spacing:.02em;text-transform:uppercase;margin:5px 0 0}
.merch-soon{font-size:9px;color:var(--gold);border:1px solid #55422e;padding:7px 8px;letter-spacing:.07em;white-space:nowrap}
.merch-note{font-size:12px;color:var(--muted);margin:30px 0 0;line-height:1.6}
@media(max-width:1150px){.merch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.merch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.merch-info{flex-direction:column;gap:9px;padding-top:10px}.merch-info h3{font-size:24px}.merch-soon{font-size:9px}.merch-note{margin-top:24px}}
@media(max-width:360px){.merch-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.merch-image img{transition:none}}

/* v6.1: compact, swipeable merchandise on mobile; desktop grid stays unchanged */
@media(max-width:700px){
 .merch-grid{display:flex;overflow-x:auto;overflow-y:hidden;gap:14px;scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 14px;scrollbar-width:thin;scrollbar-color:#69513b #17181a}
 .merch-card{flex:0 0 min(74vw,290px);scroll-snap-align:start}
 .merch-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px}
 .merch-info h3{font-size:24px}
 .merch-soon{font-size:9px}
 .merch-note{margin-top:10px}
 .merch-swipe-hint{display:block!important;margin:12px 0 15px;color:var(--gold);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
}
@media(max-width:360px){.merch-card{flex-basis:82vw}}