:root { color-scheme: dark; --bg:#0b0b0e; --gold:#f0d283; --muted:#a1a1aa; --line:rgba(255,255,255,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--bg); color:#f4f4f5; font-family:'Instrument Sans',system-ui,sans-serif; line-height:1.5; }
.ambient-glow { position:fixed; z-index:-1; top:-6rem; left:-6rem; width:18rem; height:18rem; border-radius:50%; background:var(--gold); filter:blur(5rem); opacity:.2; pointer-events:none; }
.site-header { position:fixed; z-index:10; inset:0 0 auto; }
.header-inner { max-width:80rem; margin:1rem auto 0; padding:.75rem 2.5rem; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:1rem; background:rgba(0,0,0,.5); backdrop-filter:blur(1rem); }
.desktop-nav { display:flex; align-items:center; gap:1.5rem; font-size:.875rem; font-weight:600; color:#d4d4d8; }
.desktop-nav a:not(.button), footer a, .contact-card a { text-decoration:none; }
.desktop-nav a:hover, footer a:hover, .contact-card a:hover { color:#fff; }
.logo img { display:block; width:auto; height:5rem; }
.button { display:inline-flex; justify-content:center; padding:.55rem 1rem; border-radius:999px; text-decoration:none; }
.button-gold { color:#0b0b0e; background:var(--gold); }
.menu-button, .menu-close { display:none; border:1px solid var(--line); border-radius:.75rem; background:transparent; color:#fff; font-size:1.5rem; padding:.35rem .65rem; }
.video-section, .social-section, .contact-section { max-width:80rem; margin:0 auto; padding:9rem 1rem 0; }
.section-heading { margin-bottom:1.5rem; }
h1 { margin:0; font-size:clamp(2rem,4vw,2.5rem); line-height:1.2; }
h2 { margin:0; line-height:1.3; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.video-card, .panel { overflow:hidden; border:1px solid var(--line); border-radius:1.5rem; background:rgba(255,255,255,.03); }
.video-preview { position:relative; display:block; width:100%; padding:0; border:0; background:#000; cursor:pointer; }
.video-preview img { display:block; width:100%; height:16rem; object-fit:cover; transition:filter .2s; }
.video-preview:hover img, .video-preview:focus img { filter:brightness(.65); }
.play-icon { position:absolute; inset:0; width:2.5rem; height:2.5rem; margin:auto; display:grid; place-items:center; padding-left:.15rem; border-radius:50%; color:#0b0b0e; background:var(--gold); opacity:0; transition:opacity .2s; }
.video-preview:hover .play-icon, .video-preview:focus .play-icon { opacity:1; }
.video-info { padding:1rem; }
.video-info h2 { font-size:1.125rem; }
.video-info p, .social-section p, .contact-card p { margin:.35rem 0 0; color:var(--muted); }
.social-section { margin-top:5rem; padding-top:0; }
.narrow-content { padding:3rem; text-align:center; }
.narrow-content h2 { font-size:2rem; }
.social-links { display:flex; justify-content:center; gap:1rem; margin-top:2rem; }
.social-links a { display:inline-flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; border:1px solid rgba(240,210,131,.3); border-radius:999px; background:rgba(255,255,255,.05); text-decoration:none; font-weight:600; }
.social-links a:first-child { font-size:1.35rem; }
.social-links a:hover { background:rgba(255,255,255,.1); }
.tagline { margin-top:1.5rem; color:var(--muted); font-size:.875rem; }.tagline strong { color:var(--gold); }
.contact-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.5rem; padding-top:5rem; padding-bottom:6rem; }
.contact-card { padding:2rem; }.contact-card ul { margin:1rem 0 0; padding:0; list-style:none; color:#d4d4d8; }.contact-card li { margin:.5rem 0; }.contact-card a { text-decoration:underline; text-decoration-color:rgba(240,210,131,.6); text-underline-offset:4px; }.engagement { background:linear-gradient(135deg,rgba(240,210,131,.1),transparent); }.engagement li { margin:.5rem 0; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2.5rem max(1rem,calc((100% - 80rem)/2)); border-top:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--muted); font-size:.875rem; } footer nav { display:flex; gap:1.25rem; }
.modal[hidden], .mobile-menu[hidden] { display:none; }.modal { position:fixed; z-index:20; inset:0; display:flex; align-items:center; justify-content:center; }.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.85); cursor:pointer; }.modal-content { position:relative; z-index:1; width:min(64rem,calc(100% - 2rem)); }.modal-content video { display:block; width:100%; max-height:80vh; border-radius:1rem; background:#000; box-shadow:0 1rem 3rem #000; }.modal-close { position:absolute; z-index:2; right:0; top:-3rem; border:0; background:none; color:#fff; font-size:2rem; cursor:pointer; }.modal-open { overflow:hidden; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.home-hero { max-width:80rem; min-height:38rem; margin:0 auto; padding:11rem 1rem 5rem; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; }.home-hero h1 { max-width:34rem; font-size:clamp(3rem,7vw,5.5rem); }.home-hero p:not(.eyebrow) { max-width:34rem; margin:1.5rem 0 2rem; color:var(--muted); font-size:1.15rem; }.home-hero img { width:100%; max-height:31rem; object-fit:cover; border-radius:1.5rem; border:1px solid var(--line); }.eyebrow { margin:0 0 1rem; color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; }.home-intro { max-width:48rem; margin:0 auto; padding:4rem 1rem 2rem; text-align:center; }.home-intro h2 { font-size:clamp(2rem,4vw,3rem); }.home-intro p:last-child { color:var(--muted); }
.home-links, .members-section { max-width:80rem; margin:0 auto; padding:4rem 1rem 0; }.home-link { display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }.home-link img { width:100%; height:20rem; object-fit:cover; }.home-link > div { padding:2rem; }.home-link p:not(.eyebrow) { color:var(--muted); }.home-link a { display:inline-block; margin:.75rem 1rem .25rem 0; color:var(--gold); text-decoration:none; }.members-section { padding-top:6rem; }.members-section h2 { font-size:clamp(2rem,4vw,3rem); }.members-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem; }.member-card { position:relative; overflow:hidden; min-height:15rem; border-radius:1rem; border:1px solid var(--line); background:#111; }.member-card img { width:100%; height:100%; min-height:15rem; display:block; object-fit:cover; }.member-card span { position:absolute; right:.75rem; bottom:.75rem; padding:.3rem .6rem; border-radius:999px; background:rgba(0,0,0,.65); color:#fff; font-size:.8rem; }
@media (max-width: 800px) { .header-inner { margin:0; border-radius:0; padding:.5rem 1rem; }.desktop-nav { display:none; }.logo img { height:3.5rem; }.menu-button { display:block; }.mobile-menu { position:fixed; inset:0 0 0 auto; width:min(20rem,85vw); padding:1.5rem; background:#111115; box-shadow:-1rem 0 3rem #000; }.menu-close { display:block; margin-left:auto; }.mobile-menu nav { display:grid; gap:.5rem; margin-top:1rem; }.mobile-menu nav a { padding:.65rem .75rem; border-radius:.5rem; text-decoration:none; }.mobile-menu nav a:hover { background:rgba(255,255,255,.05); }.video-section { padding-top:7rem; }.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.contact-section { gap:1rem; }.home-hero { grid-template-columns:1fr; padding-top:8rem; }.home-hero img { max-height:22rem; }.home-link { grid-template-columns:1fr; }.members-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) { .video-grid, .contact-section { grid-template-columns:1fr; }.video-preview img { height:14rem; }.narrow-content, .contact-card { padding:1.5rem; } footer { flex-direction:column; align-items:center; text-align:center; } }
.gallery-section { max-width:80rem; margin:0 auto; padding:9rem 1rem 0; }
.gallery-section h1 { margin-bottom:1.5rem; font-size:clamp(2rem,4vw,2.5rem); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.gallery-item { position:relative; overflow:hidden; height:14rem; padding:0; border:1px solid var(--line); border-radius:1rem; background:rgba(255,255,255,.03); cursor:pointer; }
.gallery-item img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s, opacity .3s; }.gallery-item:hover img,.gallery-item:focus img { transform:scale(1.05); opacity:.95; }.gallery-item span { position:absolute; right:.5rem; bottom:.5rem; padding:.25rem .5rem; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font-size:.75rem; }
.image-modal[hidden] { display:none; }.image-modal { position:fixed; z-index:20; inset:0; display:flex; align-items:center; justify-content:center; }.image-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.85); }.image-modal-content { position:relative; z-index:1; display:flex; align-items:center; width:min(64rem,calc(100% - 2rem)); justify-content:space-between; }.image-modal-content img { max-width:calc(100% - 7rem); max-height:80vh; border-radius:1rem; box-shadow:0 1rem 3rem #000; }.gallery-prev,.gallery-next { border:1px solid var(--line); border-radius:50%; width:3rem; height:3rem; color:#fff; background:rgba(255,255,255,.1); font-size:2rem; cursor:pointer; }.gallery-prev:hover,.gallery-next:hover { background:rgba(255,255,255,.2); }
@media (max-width:800px) { .gallery-section { padding-top:7rem; }.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.gallery-item { height:12rem; } }