:root { --ink:#f5f4f2; --muted:#aeb4c0; --orange:#f0762e; --blue:#8fd8f4; --violet:#d28be9; --black:#03060c; --panel:#0a0e17; }
* { box-sizing:border-box; }
html { background:var(--black); scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
button { color:inherit; }

.site-header { position:relative; z-index:40; display:grid; grid-template-columns:minmax(190px,1fr) auto minmax(110px,1fr); align-items:center; width:min(1480px,calc(100% - 72px)); height:88px; margin:0 auto; }
.header-overlay { position:absolute; top:0; right:0; left:0; }
.wordmark,.display-wordmark { background:linear-gradient(180deg,#fff 5%,#d9dbe0 34%,#71819b 58%,#101d34 89%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.wordmark { justify-self:start; font-size:clamp(1.05rem,1.65vw,1.6rem); white-space:nowrap; }
.nav-list { display:flex; gap:clamp(1.35rem,3vw,3.4rem); align-items:center; margin:0; padding:0; list-style:none; }
.nav-list a { position:relative; display:block; padding:1.15rem 0; color:#f5f5f5; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; transition:color .2s ease; }
.nav-list a::after { position:absolute; right:0; bottom:.58rem; left:0; height:1px; background:var(--orange); content:""; opacity:0; transform:scaleX(.35); transition:.2s ease; }
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a.active::after { opacity:1; transform:scaleX(1); }
.social-links { display:flex; gap:1rem; justify-self:end; }
.social-links a { display:grid; width:24px; height:24px; place-items:center; opacity:.9; transition:.2s ease; }
.social-links a:hover,.social-links a:focus-visible { opacity:1; transform:translateY(-2px); }
.social-links svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.social-links .icon-fill,.social-links svg>circle:first-child { fill:currentColor; stroke:none; }
.social-links .spotify-lines { fill:none; stroke:#050811; stroke-linecap:round; stroke-width:1.3; }
.menu-button { display:none; border:0; background:none; }

.landing-page { background:#03060c url('/images/cloud-nine-hero-background.png') center top/cover fixed no-repeat; }
.hero { position:relative; isolation:isolate; min-height:100svh; overflow:hidden; background:transparent; }
.hero::before { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.1),transparent 24%,transparent 76%,rgba(0,0,0,.1)); content:""; }
.portrait-stage { position:absolute; z-index:2; top:95px; right:0; left:0; height:min(52vh,535px); pointer-events:none; }
.portrait { position:absolute; bottom:0; left:var(--portrait-x); width:clamp(190px,19vw,335px); max-height:100%; object-fit:contain; object-position:bottom; filter:drop-shadow(0 18px 25px rgba(0,0,0,.42)); transform:translateX(-50%) scale(var(--portrait-scale,1)); transform-origin:bottom center; }
.portrait-slot-1 { --portrait-x:10%; --portrait-scale:.9; z-index:2; }.portrait-slot-2 { --portrait-x:29%; --portrait-scale:.96; z-index:3; }.portrait-slot-3 { --portrait-x:50%; --portrait-scale:1.08; z-index:5; }.portrait-slot-4 { --portrait-x:71%; --portrait-scale:.96; z-index:3; }.portrait-slot-5 { --portrait-x:90%; --portrait-scale:.9; z-index:2; }
.hero-shade { position:absolute; z-index:6; inset:30% 0 0; background:linear-gradient(180deg,transparent 0%,rgba(2,5,11,.08) 28%,rgba(2,5,11,.56) 68%,rgba(2,5,11,.68) 100%); pointer-events:none; }
.hero-copy { position:relative; z-index:10; display:flex; align-items:center; width:min(850px,calc(100% - 40px)); min-height:100svh; margin:0 auto; padding:clamp(520px,58vh,630px) 0 70px; flex-direction:column; justify-content:flex-end; text-align:center; }
.eyebrow { margin:0 0 .55rem; color:#e9e9eb; font-size:clamp(.7rem,1.15vw,1rem); letter-spacing:.4em; text-transform:uppercase; }
.eyebrow span,.kicker { color:var(--orange); }
.display-wordmark { margin:0; font-size:clamp(3rem,7vw,6.5rem); line-height:.96; }
.chapter-rule { width:62px; height:1px; margin:1rem 0 1.05rem; background:linear-gradient(90deg,transparent,var(--orange),transparent); }
.hero-copy h2 { margin:0; color:var(--orange); font-size:clamp(1.35rem,2.35vw,2.15rem); font-weight:400; letter-spacing:.31em; text-indent:.31em; text-transform:uppercase; }
.intro { max-width:720px; margin:.85rem auto 1.35rem; color:#dedee1; font-size:clamp(.9rem,1.2vw,1.05rem); letter-spacing:.08em; line-height:1.65; }
.actions { display:flex; gap:1.25rem; justify-content:center; width:100%; }
.button { display:inline-flex; gap:.72rem; align-items:center; justify-content:center; min-width:175px; min-height:50px; padding:0 1.25rem; border:1px solid currentColor; background:rgba(1,4,10,.34); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; transition:.2s ease; }
.button:hover,.button:focus-visible { background:currentColor; color:#06101a; outline:none; transform:translateY(-2px); }
.button-listen { color:var(--orange); }.button-watch { color:var(--blue); }.button-book { color:var(--violet); }

.home-feature,.content-section { width:min(1240px,calc(100% - 64px)); margin:0 auto; padding:110px 0; }
.landing-page>.home-feature { width:100%; max-width:none; padding-right:max(32px,calc((100% - 1240px)/2)); padding-left:max(32px,calc((100% - 1240px)/2)); background:rgba(3,6,12,.7); }
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(3rem,8vw,8rem); align-items:center; }
.feature-image { position:relative; }
.feature-image::before { position:absolute; inset:-14px 14px 14px -14px; border:1px solid rgba(143,216,244,.2); content:""; }
.feature-image img { position:relative; display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.kicker { margin:0 0 1rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; }
.feature-copy h2,.music-callout h2,.content-section h2 { margin:.2rem 0 1.5rem; font-size:clamp(2.2rem,4vw,4.4rem); font-weight:400; line-height:1.08; }
.feature-copy p,.music-callout p,.content-section p { color:var(--muted); font-size:1.02rem; line-height:1.8; }
.text-link { display:inline-flex; gap:1rem; margin-top:1rem; color:var(--orange); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; }
.music-callout { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:0; padding-top:80px!important; padding-bottom:80px!important; border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); background:radial-gradient(circle at 80% 50%,rgba(210,139,233,.18),transparent 35%),rgba(6,9,16,.76)!important; }
.music-callout p { max-width:560px; }.music-callout .button { margin-top:1.2rem; }

.page-hero { display:grid; min-height:52vh; padding:80px 32px 40px; place-items:end center; background-position:center; background-size:cover; text-align:center; }
.page-hero h1 { margin:0; font-size:clamp(3.5rem,8vw,8.5rem); font-weight:600; letter-spacing:.03em; line-height:.95; text-transform:uppercase; }
.page-hero .eyebrow { color:var(--orange); }
.intro-section { display:flex; gap:3rem; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); }
.lead { max-width:780px; color:#e6e5e3!important; font-size:clamp(1.35rem,2.2vw,2rem)!important; line-height:1.55!important; }
.release-grid { display:grid; gap:1px; grid-template-columns:repeat(3,1fr); padding-top:40px; }
.release { padding:30px; background:var(--panel); }
.release img { width:100%; aspect-ratio:1; margin-bottom:28px; object-fit:cover; image-rendering:auto; }
.release h2 { font-size:2rem; }.release ol { columns:2; margin:0; padding-left:1.2rem; color:var(--muted); font-size:.84rem; line-height:1.75; }
.earlier { padding-top:20px; }.earlier>div { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.1); }.earlier span { padding:25px 0; color:var(--muted); border-bottom:1px solid rgba(255,255,255,.1); font-size:1rem; letter-spacing:.08em; }
.pending { margin-bottom:80px; padding:70px; background:linear-gradient(120deg,rgba(143,216,244,.08),rgba(210,139,233,.08)); text-align:center; }.pending h2 { font-size:clamp(2rem,4vw,3.6rem); }
.live-empty { max-width:860px; text-align:center; }.live-empty p { max-width:660px; margin:0 auto 2rem; }.live-strip { display:grid; gap:12px; grid-template-columns:1fr .72fr 1fr; padding-top:0; }.live-strip img { width:100%; height:420px; object-fit:cover; }

.gallery-section { padding-top:70px; }.gallery-section>.lead { margin-bottom:60px; }.album-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }.album-card { position:relative; min-height:420px; overflow:hidden; padding:0; border:0; background:var(--panel); cursor:pointer; text-align:left; }.album-card::after { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(2,5,11,.95)); content:""; }.album-card img { width:100%; height:100%; min-height:420px; object-fit:cover; transition:transform .5s ease; }.album-card:hover img { transform:scale(1.04); }.album-card span { position:absolute; z-index:2; right:26px; bottom:26px; left:26px; display:flex; flex-direction:column; }.album-card small,.album-card em { color:var(--muted); font-size:.68rem; font-style:normal; letter-spacing:.18em; text-transform:uppercase; }.album-card strong { margin:.4rem 0 .7rem; font-size:1.45rem; font-weight:400; }.lightbox { position:fixed; z-index:100; inset:0; display:grid; grid-template-columns:70px 1fr 70px; align-items:center; background:rgba(0,0,0,.96); }.lightbox figure { margin:0; text-align:center; }.lightbox img { max-width:calc(100vw - 180px); max-height:calc(100vh - 100px); object-fit:contain; }.lightbox figcaption { margin-top:12px; color:var(--muted); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; }.lightbox button { border:0; background:none; cursor:pointer; font-size:3rem; }.lightbox-close { position:absolute; top:18px; right:24px; }.lightbox-prev,.lightbox-next { height:100%; }

.about-story { display:grid; gap:8vw; grid-template-columns:.75fr 1.25fr; border-bottom:1px solid rgba(255,255,255,.08); }.about-story strong { color:var(--orange); font-weight:400; }.members { padding-top:70px; }.member-grid { display:grid; gap:1px; grid-template-columns:repeat(5,1fr); }.member-grid article { min-height:170px; padding:24px; background:var(--panel); }.member-grid span { color:var(--orange); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; }.member-grid h3 { margin:50px 0 0; font-size:1.25rem; font-weight:400; }
.contact-layout { display:grid; gap:9vw; grid-template-columns:.8fr 1.2fr; }.contact-copy h2 { font-size:clamp(2.3rem,4vw,4rem); }.phone { display:block; margin:2.5rem 0 .8rem; color:var(--blue); font-size:1.5rem; }.contact-form { display:grid; }.contact-form label { margin:0 0 .5rem; color:var(--muted); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; }.contact-form input,.contact-form textarea { width:100%; margin:0 0 1.5rem; padding:14px 0; border:0; border-bottom:1px solid rgba(255,255,255,.25); border-radius:0; outline:none; background:transparent; color:var(--ink); }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--violet); }.contact-form textarea { resize:vertical; }.contact-form .button { justify-self:start; cursor:pointer; }.form-note { font-size:.74rem!important; }
.contact-response { position:absolute; width:1px; height:1px; overflow:hidden; border:0; clip:rect(0 0 0 0); }
.contact-success { align-self:start; padding:54px; border:1px solid rgba(210,139,233,.25); background:rgba(10,14,23,.8); }.contact-success h2 { margin:.2rem 0 1rem; }.contact-success .text-link { padding:0; border:0; background:none; cursor:pointer; }
.lightbox[hidden],.contact-success[hidden],.contact-form[hidden] { display:none; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1400px,calc(100% - 64px)); margin:0 auto; padding:54px 0; border-top:1px solid rgba(255,255,255,.09); }.landing-page>.site-footer { width:100%; padding-right:max(32px,calc((100% - 1400px)/2)); padding-left:max(32px,calc((100% - 1400px)/2)); background:rgba(3,6,12,.82); }.site-footer p { margin:.45rem 0 0; color:#858c98; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }.site-footer .social-links { justify-self:center; }.copyright { justify-self:end; }

@media (max-width:1000px) {
  .site-header { grid-template-columns:1fr auto auto; }.menu-button { display:grid; width:42px; height:42px; padding:11px; border:1px solid rgba(255,255,255,.18); place-content:center; gap:4px; cursor:pointer; }.menu-button span { display:block; width:18px; height:1px; background:white; }.menu-button em { position:absolute; width:1px; height:1px; overflow:hidden; }.site-header nav { position:absolute; top:70px; right:0; left:0; display:none; padding:20px 0; background:rgba(3,6,12,.98); }.site-header nav.open { display:block; }.nav-list { flex-direction:column; gap:.25rem; }.social-links { margin-left:16px; }
  .split,.about-story,.contact-layout { grid-template-columns:1fr; }.release-grid { grid-template-columns:1fr 1fr; }.member-grid { grid-template-columns:repeat(3,1fr); }.album-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .site-header { width:calc(100% - 32px); height:70px; }.site-header>.social-links { display:none; }.portrait-stage { top:72px; height:38vh; min-height:280px; }.portrait { width:clamp(145px,42vw,235px); }.portrait-slot-1 { --portrait-x:-1%; --portrait-scale:.74; }.portrait-slot-2 { --portrait-x:24%; --portrait-scale:.82; }.portrait-slot-3 { --portrait-x:50%; --portrait-scale:1; }.portrait-slot-4 { --portrait-x:76%; --portrait-scale:.82; }.portrait-slot-5 { --portrait-x:101%; --portrait-scale:.74; }.hero-copy { padding-top:45vh; padding-bottom:45px; }.hero-copy h2 { font-size:1.1rem; letter-spacing:.18em; text-indent:.18em; }.actions { gap:.65rem; flex-wrap:wrap; }.button { min-width:0; min-height:46px; padding:0 .9rem; font-size:.63rem; letter-spacing:.13em; }.home-feature,.content-section { width:calc(100% - 36px); padding:70px 0; }.landing-page>.home-feature { width:100%; padding-right:18px; padding-left:18px; }.music-callout { flex-direction:column; align-items:flex-start; }.music-callout>.social-links { margin:35px 0 0; }.page-hero { min-height:43vh; }.release-grid,.album-grid,.member-grid { grid-template-columns:1fr; }.release { padding:22px; }.earlier>div { grid-template-columns:1fr; }.pending { padding:45px 24px; }.live-strip { grid-template-columns:1fr 1fr; }.live-strip img { height:280px; }.live-strip img:last-child { grid-column:1/-1; }.lightbox { grid-template-columns:44px 1fr 44px; }.lightbox img { max-width:calc(100vw - 94px); }.site-footer { grid-template-columns:1fr auto; width:calc(100% - 36px); }.site-footer>.social-links { display:flex; }.copyright { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }