:root { --ink:#0c0e0f; --ink-soft:#141718; --paper:#f2efe8; --muted:#b9b5ac; --gold:#d5a74f; --gold-light:#efca7b; --line:rgba(213,167,79,.34); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(22px,5vw,76px); background:linear-gradient(180deg,rgba(8,10,11,.92),rgba(8,10,11,.62),transparent); backdrop-filter:blur(6px); }
.header-brand { font-weight:700; letter-spacing:.04em; font-size:1.15rem; }
nav { display:flex; gap:32px; }
nav a { font-size:.82rem; text-transform:uppercase; letter-spacing:.14em; color:#dedbd4; }
nav a:hover,.header-phone:hover,footer a:hover { color:var(--gold-light); }
.header-phone { justify-self:end; font-weight:700; color:var(--gold-light); letter-spacing:.04em; }
.hero { min-height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-photo { position:absolute; inset:0; background:url('assets/jaym-live.webp') center 34%/cover no-repeat; }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,10,.96) 0%,rgba(7,9,10,.75) 42%,rgba(7,9,10,.12) 72%),linear-gradient(0deg,rgba(7,9,10,.85),transparent 30%); }
.hero-content { position:relative; z-index:2; width:min(690px,90vw); margin-left:clamp(24px,8vw,132px); padding-top:76px; }
.wordmark-lockup { width:min(430px,72vw); height:180px; margin-left:-22px; margin-bottom:-18px; background:url('assets/jaym-wordmark-transparent.png') left center/contain no-repeat; }
.channel-strip { min-height:132px; display:flex; align-items:center; justify-content:center; gap:clamp(28px,5vw,70px); padding:24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,#101314,#171511,#101314); }
.channel-link { min-width:220px; display:flex; align-items:center; gap:18px; padding:14px 20px; border:1px solid transparent; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.channel-link:hover { transform:translateY(-3px); border-color:var(--line); background:rgba(213,167,79,.08); }
.channel-icon { width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; }
.channel-icon svg { width:29px; height:29px; }
.channel-instagram svg { fill:none; stroke:var(--gold-light); stroke-width:1.8; }
.channel-instagram .social-dot { fill:var(--gold-light); stroke:none; }
.channel-youtube svg path:first-child { fill:var(--gold-light); }
.channel-youtube .play { fill:var(--ink); }
.channel-link strong,.channel-link small { display:block; }
.channel-link strong { font-family:Georgia,'Times New Roman',serif; font-size:1.35rem; font-weight:400; color:var(--paper); }
.channel-link small { margin-top:5px; color:var(--gold-light); font-size:.8rem; letter-spacing:.05em; }
.channel-divider { width:1px; height:58px; background:var(--line); }
.eyebrow,.section-kicker { color:var(--gold-light); text-transform:uppercase; letter-spacing:.18em; font-weight:700; font-size:.76rem; }
h1 { font-size:clamp(2.6rem,6vw,5.6rem); line-height:.95; letter-spacing:-.035em; margin:18px 0 20px; }
.hero-copy { max-width:590px; font-size:clamp(1.08rem,2vw,1.34rem); line-height:1.65; color:#ddd9d0; }
.hero-actions,.booking-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; border:1px solid var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; transition:.2s ease; }
.button-gold { background:var(--gold); color:#111; }
.button-gold:hover { background:var(--gold-light); border-color:var(--gold-light); transform:translateY(-2px); }
.button-ghost:hover { background:rgba(213,167,79,.12); transform:translateY(-2px); }
.hero-note { position:absolute; right:clamp(24px,6vw,90px); bottom:42px; z-index:2; display:flex; gap:18px; color:var(--gold-light); font-family:Georgia,serif; font-style:italic; font-size:1.05rem; }
.intro,.repertoire,.media-showcase,.occasions,.booking,.legal-placeholders { padding:clamp(76px,10vw,150px) clamp(24px,8vw,132px); }
.intro { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(48px,9vw,140px); align-items:end; border-top:1px solid var(--line); }
h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(2.35rem,5vw,4.8rem); line-height:1.06; letter-spacing:-.03em; margin:18px 0 0; }
.intro>p,.occasions-copy>p { color:var(--muted); font-size:1.08rem; line-height:1.8; margin:0; }
.repertoire { background:#111415; }
.section-heading { max-width:820px; }
.repertoire-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:70px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.repertoire-grid article { padding:34px clamp(20px,3vw,46px) 42px 0; border-right:1px solid var(--line); }
.repertoire-grid article+article { padding-left:clamp(20px,3vw,46px); }
.repertoire-grid article:last-child { border-right:0; }
.repertoire-grid span { color:var(--gold); font-size:.75rem; letter-spacing:.16em; }
.repertoire-grid h3 { font-size:1.3rem; margin:42px 0 14px; }
.repertoire-grid p { color:var(--muted); line-height:1.65; }
.repertoire-note { margin:30px 0 0; color:var(--gold-light); letter-spacing:.09em; text-transform:uppercase; font-size:.78rem; }
.media-showcase { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(48px,8vw,120px); background:#0a0c0d; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.media-showcase h2 { font-size:clamp(2rem,4vw,3.8rem); margin-bottom:34px; }
.video-gallery { display:grid; gap:18px; justify-items:center; }
.video-frame { width:min(340px,100%); border:1px solid var(--line); padding:8px; background:#050606; }
.video-portrait,.video-landscape { aspect-ratio:16/9; }
.video-frame iframe { width:100%; height:100%; border:0; }
.track-list { border-top:1px solid var(--line); }
.track-list article { padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr minmax(240px,310px); gap:24px; align-items:center; }
.track-list article>div { display:grid; grid-template-columns:34px 1fr; align-items:baseline; }
.track-list span { grid-row:1/3; color:var(--gold); font-size:.72rem; letter-spacing:.14em; }
.track-list h3 { margin:0; font-size:1rem; }
.track-list p { margin:6px 0 0; color:var(--muted); font-size:.85rem; }
.track-list audio { width:100%; height:40px; filter:sepia(.25) saturate(.8); }
.occasions { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(54px,9vw,140px); align-items:center; }
.seal-wrap { display:grid; place-items:center; }
.seal-wrap img { width:min(430px,78vw); filter:drop-shadow(0 18px 50px rgba(0,0,0,.32)); }
.occasions-copy h2 { margin-bottom:34px; }
.occasion-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:35px; }
.occasion-list span { border:1px solid var(--line); padding:11px 15px; color:#ddd9d0; font-size:.88rem; }
.booking { text-align:center; background:radial-gradient(circle at 50% 5%,#242019 0%,#111314 44%,#0c0e0f 75%); border-top:1px solid var(--line); }
.booking h2 { max-width:900px; margin:20px auto; }
.booking-copy { max-width:650px; margin:24px auto 38px; color:var(--muted); line-height:1.7; font-size:1.08rem; }
.big-phone { display:block; color:var(--gold-light); font-size:clamp(2.7rem,8vw,7.4rem); font-weight:700; letter-spacing:-.04em; line-height:1.05; }
.mail-link { display:inline-block; margin-top:18px; font-size:clamp(1.05rem,2vw,1.35rem); border-bottom:1px solid var(--gold); padding-bottom:4px; }
.booking-actions { justify-content:center; }
footer { min-height:100px; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px clamp(24px,8vw,132px); color:#85837d; font-size:.78rem; border-top:1px solid rgba(255,255,255,.08); }
.legal-placeholders { display:grid; grid-template-columns:1fr 1fr; gap:24px; background:#111415; border-top:1px solid rgba(255,255,255,.08); }
.legal-placeholders article { border:1px dashed var(--line); padding:28px; }
.legal-placeholders h2 { font-size:2rem; margin:10px 0 16px; }
.legal-placeholders p:last-child { color:var(--muted); line-height:1.7; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
@media(max-width:820px){ .site-header{grid-template-columns:1fr auto;height:66px} nav{display:none}.hero{display:block;min-height:0;background:var(--ink)}.hero-photo{position:relative;inset:auto;height:clamp(430px,60svh,620px);background-position:center 27%}.hero-scrim{inset:0 0 auto;height:clamp(430px,60svh,620px);background:linear-gradient(0deg,rgba(7,9,10,.72) 0%,rgba(7,9,10,.1) 42%,rgba(7,9,10,.18) 100%)}.hero-content{margin:0;padding:28px 24px 112px;width:100%;background:var(--ink)}.wordmark-lockup{width:min(390px,88vw);height:150px;margin:-10px 0 -12px;background-position:left center}.hero-note{left:24px;right:auto;bottom:36px}.channel-strip{gap:12px;padding:20px 12px}.channel-link{min-width:0;flex:1;justify-content:center;gap:11px;padding:10px 6px}.channel-icon{width:48px;height:48px;flex-basis:48px}.channel-icon svg{width:24px;height:24px}.channel-link strong{font-size:1rem}.channel-link small{font-size:.68rem}.channel-divider{height:48px}.intro,.media-showcase,.occasions,.legal-placeholders{grid-template-columns:1fr}.repertoire-grid{grid-template-columns:1fr}.repertoire-grid article,.repertoire-grid article+article{border-right:0;border-bottom:1px solid var(--line);padding:28px 0}.repertoire-grid article:last-child{border-bottom:0}.repertoire-grid h3{margin-top:18px}.video-frame{margin:auto}.track-list article{grid-template-columns:1fr}.occasions{text-align:center}.occasion-list{justify-content:center}footer{flex-direction:column;justify-content:center;text-align:center} }
@media(max-width:480px){ .header-phone{font-size:.82rem}.hero-note{gap:8px;font-size:.88rem}.button{width:100%} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.button{transition:none} }
.legal-page { min-height:100vh; max-width:900px; margin:auto; padding:clamp(48px,8vw,100px) 24px; }
.legal-page>a { color:var(--gold-light); }
.legal-page h1 { font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.8rem,7vw,5.5rem); margin:28px 0; }
.legal-card { border:1px dashed var(--line); padding:clamp(24px,5vw,48px); color:var(--muted); font-size:1rem; line-height:1.8; }