:root{
  --black:#090a0a;
  --black2:#101111;
  --paper:#efede6;
  --paper2:#e7e4dc;
  --ink:#111212;
  --muted:#76736c;
  --warm:#cbbd9e;
  --line:rgba(20,20,20,.25);
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--black);color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{display:block;width:100%} button{font:inherit}
.site-header{position:fixed;z-index:50;left:0;top:0;width:100%;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:white;background:linear-gradient(to bottom,rgba(0,0,0,.58),rgba(0,0,0,0));transition:.25s ease}
.site-header.scrolled{height:68px;background:rgba(8,8,8,.93);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;flex-direction:column;gap:8px;line-height:1}
.brand-name{font-weight:800;letter-spacing:.11em;font-size:clamp(20px,2.4vw,42px)}
.brand-sub{font-size:11px;letter-spacing:.24em;display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-sub i{display:inline-block;width:34px;height:1px;background:currentColor;opacity:.9}
.mini-brand{gap:6px}.mini-brand .brand-name{font-size:19px}.mini-brand .brand-sub{font-size:8px}.mini-brand .brand-sub i{width:26px}
.nav{display:flex;gap:28px;font-size:11px;letter-spacing:.09em}.nav a{opacity:.86}.nav a:hover{opacity:1}
.menu-toggle{display:none;border:0;background:none;color:white;letter-spacing:.12em;font-size:11px}
.hero{height:min(860px,100vh);min-height:680px;position:relative;overflow:hidden;background:#111}
.hero-photo{position:absolute;inset:0;background-image:url('assets/hero.jpg');background-size:cover;background-position:center 43%;filter:saturate(.70) contrast(1.10) brightness(.72) sepia(.12)}
.hero-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(0,0,0,.02) 0,rgba(0,0,0,.28) 55%,rgba(0,0,0,.68) 100%),linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,.08) 52%,rgba(0,0,0,.56))}
.hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:78px;text-shadow:0 2px 25px rgba(0,0,0,.35)}
.hero-brand{gap:12px}.hero-brand .brand-name{font-size:clamp(36px,5.1vw,76px);letter-spacing:.15em}.hero-brand .brand-sub{font-size:clamp(9px,1vw,14px);gap:18px}.hero-brand .brand-sub i{width:68px}
.hero-line{margin:44px 0 0;font-size:clamp(18px,2.1vw,30px);letter-spacing:.12em}.hero-small{font-size:11px;letter-spacing:.26em;margin-top:16px}
.hero-place{position:absolute;right:4vw;bottom:34px;font-size:10px;letter-spacing:.16em}.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:20px;opacity:.8}
.section{width:100%}.light{background:var(--paper);color:var(--ink)}.dark{background:var(--black);color:white}
.section-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:58px minmax(260px,350px) 1fr;gap:34px;padding:72px 4vw}
.section-meta{display:flex;gap:16px;font-size:11px;padding-top:5px}.section-meta b{width:30px;height:1px;background:currentColor;margin-top:6px;opacity:.45}
.eyebrow{font-weight:800;font-size:clamp(24px,2.3vw,38px);letter-spacing:.17em;margin:0 0 28px}
.section-copy h2{font-size:clamp(22px,2.2vw,35px);line-height:1.12;letter-spacing:.05em;margin:0 0 28px}.section-copy p{font-size:14px;line-height:1.55;letter-spacing:.035em}
.outline-button{display:inline-flex;align-items:center;justify-content:space-between;width:190px;border:1px solid rgba(20,20,20,.5);padding:15px 18px;margin-top:18px;font-size:11px;letter-spacing:.12em}.outline-button:hover{background:#111;color:white}
.music-panel{min-width:0}.promo-video{width:100%;aspect-ratio:16/9;background:#050505;object-fit:cover;box-shadow:0 20px 40px rgba(0,0,0,.12)}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.media-card{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;border-top:1px solid var(--line);padding-top:14px}.media-card img{aspect-ratio:4/3;object-fit:cover;filter:saturate(.7) contrast(1.05)}.media-card strong,.media-card span{display:block}.media-card strong{font-size:12px;letter-spacing:.08em}.media-card span{font-size:10px;color:var(--muted);margin-top:6px}
.about-grid{align-items:stretch;padding-top:0;padding-bottom:0}.about-grid .section-meta,.about-grid .section-copy{padding-top:72px;padding-bottom:72px}.member-strip{min-height:560px;display:grid;grid-template-columns:repeat(3,1fr);position:relative;overflow:hidden}.member-strip figure{margin:0;overflow:hidden;min-width:0}.member-strip img{height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(.82)}.member-strip figure:nth-child(1) img{object-position:48% center}.member-strip figure:nth-child(2) img{object-position:50% center}.member-strip figure:nth-child(3) img{object-position:48% center}.friends-note{position:absolute;right:28px;bottom:25px;font-family:Georgia,serif;font-style:italic;font-size:20px;line-height:1.05;text-shadow:0 2px 12px black}
.split-section{display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin:0 auto}.split-block{padding:58px 6vw 64px;min-height:330px;border-right:1px solid rgba(0,0,0,.12);position:relative}.split-number{font-size:11px;margin-bottom:16px}.split-block .eyebrow{margin-bottom:35px}.code-list{list-style:none;padding:0;margin:0 0 52px}.code-list li{display:grid;grid-template-columns:38px 1fr;margin:13px 0;font-size:14px;letter-spacing:.06em}.code-list span{font-size:10px;color:var(--muted)}.quiet{font-size:11px!important;color:var(--muted);letter-spacing:.04em;line-height:1.6}.schedule-block h3{font-size:clamp(30px,3.6vw,58px);letter-spacing:.09em;line-height:.95;margin:0 0 30px}
.gallery-section{padding:54px 4vw 70px}.gallery-head{max-width:var(--max);margin:0 auto 24px}.gallery-head .eyebrow{display:inline-block;margin:0 0 0 28px}.gallery-head .quiet{margin:14px 0 0 0}.gallery-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4px;height:360px}.gallery-grid figure{margin:0;overflow:hidden;background:#111}.gallery-grid img{height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08)}.gallery-grid figure:nth-child(2) img{object-position:center 33%}.gallery-grid figure:nth-child(3) img{object-position:center 45%}
.merch-grid{align-items:center}.merch-title{font-weight:800;letter-spacing:.12em;margin-top:28px!important}.invert{color:rgba(255,255,255,.54)!important}.merch-visual{background:#f2f0e9;padding:16px}.merch-visual img{aspect-ratio:16/10;object-fit:cover;object-position:center 32%}
.contact{background:#060707;color:white;max-width:none;display:grid;grid-template-columns:70px 1fr 1.4fr 1fr;gap:32px;align-items:center;padding:54px 4vw 64px;border-top:1px solid rgba(255,255,255,.08)}.contact-number{font-size:11px;color:#888}.contact-brand{display:flex;flex-direction:column;gap:5px;font-size:11px}.contact-brand strong{font-size:14px;letter-spacing:.08em}.contact-email{font-size:12px;text-align:center}.contact-email a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px}.contact-line{text-align:right;font-size:11px;letter-spacing:.16em}
@media(max-width:980px){.site-header{padding:0 24px}.mini-brand .brand-name{font-size:16px}.mini-brand .brand-sub{font-size:7px}.nav{position:absolute;right:20px;top:64px;display:none;flex-direction:column;gap:0;background:rgba(8,8,8,.98);width:220px;border:1px solid rgba(255,255,255,.1)}.nav.open{display:flex}.nav a{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.menu-toggle{display:block}.section-grid{grid-template-columns:36px 280px 1fr;gap:22px;padding-left:24px;padding-right:24px}.about-grid{grid-template-columns:36px 250px 1fr}.member-strip{min-height:500px}.gallery-grid{grid-template-columns:1.6fr 1fr 1fr;height:520px}.gallery-grid figure:last-child{display:none}.contact{grid-template-columns:40px 1fr 1fr}.contact-line{grid-column:2/4;text-align:left;margin-top:10px}}
@media(max-width:720px){.hero{height:82vh;min-height:620px}.hero-photo{background-position:54% center}.hero-brand .brand-name{font-size:34px}.hero-brand .brand-sub i{width:30px}.hero-line{margin-top:32px;font-size:17px}.hero-place{right:20px;bottom:22px}.scroll-cue{display:none}.section-grid,.about-grid,.merch-grid{grid-template-columns:1fr;padding:52px 22px;gap:20px}.section-meta{display:none}.section-copy{max-width:520px}.eyebrow{font-size:26px;margin-bottom:20px}.section-copy h2{font-size:25px}.media-grid{grid-template-columns:1fr}.media-card{grid-template-columns:94px 1fr}.about-grid .section-copy{padding:0}.member-strip{min-height:520px;grid-column:1;grid-template-columns:repeat(3,1fr)}.member-strip img{min-width:100%;object-fit:cover}.friends-note{right:16px;bottom:16px;font-size:17px}.split-section{grid-template-columns:1fr}.split-block{padding:48px 22px;min-height:0;border-right:0;border-bottom:1px solid rgba(0,0,0,.12)}.gallery-section{padding:44px 22px 54px}.gallery-head .eyebrow{margin-left:20px}.gallery-grid{grid-template-columns:1fr 1fr;height:auto}.gallery-grid figure{height:260px}.gallery-grid figure.wide{grid-column:1/3;height:280px}.gallery-grid figure:last-child{display:block}.merch-visual{padding:8px}.contact{grid-template-columns:1fr;padding:42px 22px}.contact-number{display:none}.contact-email,.contact-line{text-align:left}.contact-line{grid-column:auto}.mini-brand .brand-sub i{width:18px}}
@media(max-width:430px){.site-header{height:66px}.hero{min-height:590px}.hero-brand .brand-name{font-size:29px;letter-spacing:.12em}.hero-brand .brand-sub{letter-spacing:.18em}.hero-small{font-size:9px}.member-strip{min-height:430px}.friends-note{font-size:15px}.gallery-grid figure,.gallery-grid figure.wide{height:220px}.gallery-grid{grid-template-columns:1fr}.gallery-grid figure.wide{grid-column:auto}.media-card{grid-template-columns:82px 1fr}}


/* Ver.0.3 finishing pass — restraint first */
::selection{background:var(--warm);color:var(--black)}
.site-header .brand,.nav a,.outline-button,.contact-email a{transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease}
.site-header .brand:hover{opacity:.78}
.nav a{position:relative}.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .18s ease}.nav a:hover::after{right:0}
.hero-photo{transform:scale(1.008)}
.hero-content{pointer-events:none}.hero-brand,.hero-line,.hero-small{pointer-events:auto}
.hero-line{font-weight:700}.hero-small{opacity:.86}
.film-frame{position:relative;background:#050505}.film-label{position:absolute;z-index:2;left:14px;top:14px;padding:7px 9px;background:rgba(0,0,0,.66);color:#fff;font-size:9px;letter-spacing:.14em;pointer-events:none}
.promo-video{display:block;box-shadow:none}.film-frame{box-shadow:0 20px 40px rgba(0,0,0,.12)}
.media-card img,.gallery-grid img,.member-strip img,.merch-visual img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.media-card:hover img,.gallery-grid figure:hover img{transform:scale(1.018)}
.member-strip figure:hover img{filter:grayscale(.75) contrast(1.15) brightness(.88)}
.contact-email{display:flex;flex-direction:column;gap:8px;align-items:center}.contact-email span{font-size:8px;letter-spacing:.18em;color:#777}.contact-email a:hover{opacity:.65}
@media(max-width:980px){.nav a::after{display:none}}
@media(max-width:720px){.film-label{left:10px;top:10px;font-size:8px}.contact-email{align-items:flex-start}.hero-content{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.media-card img,.gallery-grid img,.member-strip img,.merch-visual img,.nav a::after{transition:none}.hero-photo{transform:none}}

/* Ver.0.4 — official Facebook connection */
.contact-links{gap:14px}
.contact-link-item{display:flex;flex-direction:column;gap:6px;align-items:center}
.contact-link-item span{font-size:8px;letter-spacing:.18em;color:#777}
.contact-link-item a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px}
.contact-link-item a:hover{opacity:.65}
@media(max-width:720px){.contact-link-item{align-items:flex-start}}

/* Ver.0.5 — mobile HERO crop only. Desktop/tablet remain unchanged. */
@media(max-width:720px){
  .hero{height:78vh;min-height:610px;max-height:760px}
  .hero-photo{
    background-image:url('assets/hero-mobile.jpg');
    background-size:cover;
    background-position:center center;
    transform:none;
  }
  .hero-shade{
    background:
      radial-gradient(circle at 50% 39%,rgba(0,0,0,0) 0,rgba(0,0,0,.12) 48%,rgba(0,0,0,.42) 100%),
      linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.04) 48%,rgba(0,0,0,.52));
  }
}
@media(max-width:430px){
  .hero{height:76vh;min-height:600px}
}
