/*
Theme Name: Claude Steen
Theme URI: https://claudesteen.com
Author: Claude Steen
Author URI: https://claudesteen.com
Description: Official website theme for Claude Steen, singer and songwriter based in Denver, Colorado. Features biography, TikTok covers spotlight, social media hub, and contact/collaboration page.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: claudesteen
Tags: music, artist, one-page, dark, custom-colors, custom-menu, featured-images, full-width-template
*/

/* =====================================================
   CLAUDE STEEN — OFFICIAL WORDPRESS THEME
   Aesthetic: Warm Noir · Candlelit Gold · Mountain Dusk
   ===================================================== */

:root {
  --black:     #1a1008;  /* was #0a0806 — now warm dark brown */
  --deep:      #231508;  /* was #100d0a — now richer brown */
  --dark:      #2e1f0e;  /* was #1a1510 — now medium dark brown */
  --card:      #352511;  /* was #211a12 — now warmer brown */
  --border:    rgba(212,175,109,0.15);
  --gold:      #d4af6d;
  --gold-bright: #e8c87a;
  --gold-dim:  rgba(212,175,109,0.4);
  --cream:     #f2ead8;
  --warm:      #faf6ee;
  --muted:     #8a7d6a;
  --text:      #ddd0b8;
  --serif:     'Playfair Display', Georgia, serif;
  --sans:      'DM Sans', system-ui, sans-serif;
  --italic:    'Cormorant Garamond', Georgia, serif;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
p  { font-size: 1rem; line-height: 1.8; color: var(--text); }
em { font-family: var(--italic); font-style: italic; color: var(--gold); }
a  { color: inherit; text-decoration: none; transition: color 0.2s, opacity 0.2s; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── LAYOUT ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; gap: 44px; } }

/* ── BUTTONS ── */
.btn { display: inline-block; font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 13px 30px; border: none; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-gold { background: var(--gold); color: var(--black); box-shadow: 0 0 28px rgba(212,175,109,0.15); }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 0 38px rgba(212,175,109,0.25); }
.btn-outline { background: transparent; color: var(--gold); border: 1px solid var(--gold-dim); }
.btn-outline:hover { border-color: var(--gold); background: rgba(212,175,109,0.06); color: var(--gold-bright); }
.btn-text { background: none; border: none; color: var(--gold); font-family: var(--sans); font-size: .9rem; cursor: pointer; padding: 0; }
.btn-text:hover { opacity: .7; }
.btn-full { width: 100%; text-align: center; padding: 14px; }

/* ── ORBS & EFFECTS ── */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .3; animation: drift 14s ease-in-out infinite alternate; }
.o1 { width: 520px; height: 520px; background: radial-gradient(circle, #c8932a, transparent 70%); top: -120px; left: -80px; animation-duration: 14s; }
.o2 { width: 420px; height: 420px; background: radial-gradient(circle, #8b4a2a, transparent 70%); bottom: -80px; right: -60px; animation-duration: 18s; animation-delay: -5s; }
.o3 { width: 280px; height: 280px; background: radial-gradient(circle, #d4af6d, transparent 70%); top: 40%; right: 18%; animation-duration: 11s; animation-delay: -2s; opacity: .18; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(35px, 28px) scale(1.07); } }
.grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-size: 180px; pointer-events: none; }

/* ── ENTRANCE ANIMATION ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── EYEBROW ── */
.eyebrow { font-size: .72rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); opacity: 0.85; margin-bottom: 20px; }
.sec-title { font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: var(--warm); margin-bottom: 24px; line-height: 1.3; }

/* ====================================================
   NAVIGATION
==================================================== */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transition: background .3s, backdrop-filter .3s; }
#nav.scrolled { background: rgba(22,13,5,0.96); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212,175,109,0.2); }
.nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 60px); height: 68px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--serif); font-size: 1.4rem; font-weight: 900; color: var(--gold); letter-spacing: .05em; text-decoration: none; }
#site-navigation { display: flex; align-items: center; gap: 32px; }
#site-navigation a { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .2s; padding: 4px 0; }
#site-navigation a:hover { color: var(--cream); }
#site-navigation .current-menu-item > a { color: var(--cream); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
#site-navigation .menu-collab > a { color: var(--gold) !important; border: 1px solid var(--gold-dim); padding: 8px 18px !important; }
#site-navigation .menu-collab > a:hover { background: var(--gold); color: var(--black) !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--cream); transition: all .3s; }
.mob-menu { display: none; flex-direction: column; background: rgba(22,13,5,.97); border-top: 1px solid var(--border); padding: 16px clamp(20px,5vw,60px); }
.mob-menu.open { display: flex; }
.mob-menu a { padding: 13px 0; font-size: 1rem; color: var(--text); border-bottom: 1px solid var(--border); text-decoration: none; font-family: var(--serif); }
.mob-menu a:hover { color: var(--gold); }
@media (max-width: 720px) { #site-navigation { display: none; } .hamburger { display: flex; } }

/* ====================================================
   HOME PAGE — HERO  (Recording Studio · Rocky Mountains)
==================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 68px; }

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%,   rgba(212,175,109,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 60%,  rgba(160,90,20,0.12)   0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%,  rgba(80,50,20,0.10)    0%, transparent 40%),
    linear-gradient(180deg, #1e1208 0%, #1a0e06 50%, #160c04 100%);
}

/* Acoustic panel grid */
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 59px, rgba(212,175,109,0.025) 60px),
    repeating-linear-gradient(90deg,  transparent, transparent 59px, rgba(212,175,109,0.025) 60px);
  pointer-events: none;
}

/* Mountain silhouette — misty stacked ranges */
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%233d2210' d='M0,400 L0,360 L80,348 L160,354 L240,338 L315,344 L386,324 L440,330 L493,312 L540,308 L586,318 L633,308 L680,298 L726,308 L773,312 L820,306 L866,316 L913,322 L960,314 L1006,320 L1053,330 L1100,334 L1146,326 L1193,332 L1240,338 L1286,344 L1333,340 L1380,346 L1440,350 L1440,400 Z'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%23311a08' d='M0,400 L0,340 L80,322 L160,328 L240,308 L315,314 L386,294 L440,300 L493,280 L540,270 L586,278 L633,266 L680,254 L726,264 L773,272 L820,258 L866,268 L913,278 L960,264 L1006,272 L1053,284 L1100,290 L1146,278 L1193,286 L1240,296 L1286,308 L1333,314 L1380,320 L1440,326 L1440,400 Z'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%23281406' d='M0,400 L0,296 L80,274 L160,282 L240,258 L315,266 L386,242 L440,250 L493,226 L540,214 L586,224 L633,210 L680,196 L726,208 L773,218 L820,202 L866,214 L913,226 L960,210 L1006,220 L1053,234 L1100,242 L1146,226 L1193,236 L1240,250 L1286,266 L1333,272 L1380,280 L1440,288 L1440,400 Z'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cpath fill='%23201005' fill-opacity='0.6' d='M0,400 L0,260 L120,230 L240,220 L360,208 L480,196 L600,186 L680,180 L760,186 L880,196 L1000,208 L1120,220 L1240,230 L1360,240 L1440,248 L1440,400 Z'/%3E%3C/svg%3E") no-repeat bottom center / 100% auto;
  pointer-events: none;
  z-index: 1;
}

/* Console amber glow from below */
.studio-console {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  background: radial-gradient(ellipse at 50% 100%, rgba(212,140,30,0.18) 0%, rgba(180,100,10,0.08) 30%, transparent 65%);
  pointer-events: none;
  z-index: 2;
}

/* VU meter strip */
.studio-vu {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(212,175,109,0.0) 10%,
    rgba(212,175,109,0.4) 30%, rgba(232,200,122,0.7) 45%,
    rgba(255,220,80,0.9) 50%, rgba(232,200,122,0.7) 55%,
    rgba(212,175,109,0.4) 70%, rgba(212,175,109,0.0) 90%,
    transparent 100%
  );
  animation: vuPulse 3.5s ease-in-out infinite;
  z-index: 10;
}
@keyframes vuPulse {
  0%, 100% { opacity: .3; transform: scaleX(0.7); }
  40%       { opacity: 1;  transform: scaleX(1); }
  60%       { opacity: .8; transform: scaleX(0.9); }
}



  position: absolute;
  top: 68px; left: 7%;
  width: 2px;
  height: 160px;
  background: linear-gradient(to bottom, rgba(212,175,109,0.5), rgba(212,175,109,0.1));
  z-index: 3;
  pointer-events: none;
}
.studio-mic::before {
  content: '';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: rgba(212,175,109,0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(212,175,109,0.5);
}
.studio-mic::after {
  content: '';
  position: absolute;
  bottom: -32px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 32px;
  border: 1.5px solid rgba(212,175,109,0.45);
  border-radius: 9px 9px 4px 4px;
  box-shadow: 0 0 12px rgba(212,175,109,0.2), 0 0 24px rgba(212,175,109,0.08);
}

/* Side panel glow lines */
.panel-left, .panel-right {
  position: absolute;
  top: 15%; bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212,175,109,0.3) 40%, rgba(212,175,109,0.3) 60%, transparent);
  z-index: 2;
  pointer-events: none;
}
.panel-left  { left: 5%; }
.panel-right { right: 5%; }
.panel-left::before, .panel-right::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;
  background: inherit;
  filter: blur(4px);
  opacity: .5;
}

/* Ceiling track light */
.ceiling-light {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 68px;
  background: linear-gradient(to bottom, rgba(212,175,109,0.6), rgba(212,175,109,0.1));
  z-index: 3;
  pointer-events: none;
}
.ceiling-light::after {
  content: '';
  position: absolute;
  bottom: -70px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-top: 70px solid rgba(212,175,109,0.04);
  filter: blur(8px);
}

.hero-content { position: relative; z-index: 5; text-align: center; padding: 40px 20px; }
.hero-name { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }

.name-first {
  font-size: clamp(5rem, 14vw, 10rem); font-weight: 900; line-height: .92; color: var(--warm); letter-spacing: -.02em;
  animation: fadeUp 1s var(--ease) .15s both, nameGlow 4s ease-in-out infinite alternate;
  text-shadow: 0 0 60px rgba(212,175,109,0.15), 0 2px 80px rgba(0,0,0,0.8);
}
.name-last {
  font-size: clamp(5rem, 14vw, 10rem); font-weight: 700; font-style: italic; line-height: .92; color: var(--gold); letter-spacing: -.02em;
  animation: fadeUp 1s var(--ease) .28s both, nameGlow 4s ease-in-out infinite alternate .5s;
  text-shadow: 0 0 40px rgba(212,175,109,0.35), 0 2px 60px rgba(0,0,0,0.8);
}
@keyframes nameGlow {
  from { text-shadow: 0 0 40px rgba(212,175,109,0.10), 0 2px 60px rgba(0,0,0,.8); }
  to   { text-shadow: 0 0 90px rgba(212,175,109,0.28), 0 0 140px rgba(212,175,109,0.08), 0 2px 60px rgba(0,0,0,.8); }
}

.hero-tag {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 44px; animation: fadeUp 1s var(--ease) .4s both;
}
.hero-tag::before, .hero-tag::after {
  content: ''; display: block; width: 48px; height: 1px; background: var(--gold-dim); flex-shrink: 0;
}

.hero-acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeUp 1s var(--ease) .52s both; }
.hero-acts .btn { padding: 15px 40px; font-size: 0.8rem; letter-spacing: 0.16em; }

/* Frequency bars */
.hero-freq {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 28px; margin-top: 36px;
  animation: fadeUp 1s var(--ease) .7s both; opacity: .4;
}
.freq-bar {
  width: 3px; background: var(--gold); border-radius: 1px 1px 0 0;
  animation: freqBounce var(--dur, 1.2s) ease-in-out infinite alternate;
}
@keyframes freqBounce {
  from { transform: scaleY(0.15); }
  to   { transform: scaleY(1); }
}

.scroll-hint { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 6; animation: fadeUp 1s var(--ease) 1s both; }
.scroll-hint span { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--gold), transparent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

@media (max-width: 480px) {
  .hero-acts { flex-direction: column; align-items: center; }
  .hero-acts .btn { width: 220px; text-align: center; }
  .studio-mic, .panel-left, .panel-right { display: none; }
}

/* ── About Snippet ── */
.h-about { padding: 110px 0; background: var(--deep); border-top: 1px solid var(--border); }
.col-text p { margin-bottom: 16px; }
.portrait-wrap { position: relative; max-width: 360px; margin-left: auto; }
@media (max-width: 800px) { .portrait-wrap { max-width: 280px; margin: 0 auto; } }
.portrait-box { aspect-ratio: 3/4; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.portrait-box img { width: 100%; height: 100%; object-fit: cover; }
.portrait-box svg { width: 65%; height: auto; }
.p-badge { position: absolute; bottom: -14px; right: -14px; background: var(--gold); color: var(--black); font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 7px 14px; }

/* ── Covers Teaser ── */
.h-covers { padding: 110px 0; background: var(--black); }
.sec-hdr { margin-bottom: 52px; }
.covers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 720px) { .covers-grid { grid-template-columns: 1fr; } }
.c-card { background: var(--card); border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; text-decoration: none; display: block; }
.c-card:hover { transform: translateY(-7px); border-color: rgba(212,175,109,0.35); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(212,175,109,0.06); }
.c-thumb { aspect-ratio: 9/16; position: relative; display: flex; align-items: center; justify-content: center; }
.ct1 { background: linear-gradient(145deg, #1a0f00, #3d2500); }
.ct2 { background: linear-gradient(145deg, #0d1520, #152840); }
.ct3 { background: linear-gradient(145deg, #1a0b10, #3d1520); }
.c-play { width: 56px; height: 56px; border: 2px solid rgba(212,175,109,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; transition: all .2s; }
.c-card:hover .c-play { background: var(--gold); color: var(--black); border-color: var(--gold); }
.tt-icon { position: absolute; top: 10px; right: 10px; width: 24px; color: rgba(255,255,255,.35); }
.tt-icon svg { width: 100%; }
.c-info { padding: 18px; }
.c-info h3 { font-size: .95rem; color: var(--cream); margin-bottom: 3px; }
.c-info p { font-size: .78rem; color: var(--muted); margin: 0; }
.covers-cta { text-align: center; margin-top: 44px; }

/* ── Quote Band ── */
.q-band { padding: 90px 0; background: var(--dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.q-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(212,175,109,.05), transparent 70%); }
.q-inner { max-width: 760px; margin: 0 auto; padding: 0 40px; text-align: center; position: relative; z-index: 1; }
.q-mark { font-family: var(--serif); font-size: 8rem; line-height: .45; color: rgba(212,175,109,0.12); margin-bottom: 16px; }
blockquote { font-family: var(--serif); font-size: clamp(1.2rem, 2.8vw, 1.9rem); font-style: italic; color: var(--cream); line-height: 1.5; margin-bottom: 20px; letter-spacing: .01em; }
cite { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dim); }

/* ── Social Teaser ── */
.h-social { padding: 90px 0; background: var(--deep); }
.social-pills { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 44px; margin-bottom: 28px; }
.s-pill { display: flex; align-items: center; gap: 9px; padding: 14px 28px; border: 1px solid var(--border); font-size: .78rem; font-weight: 500; letter-spacing: .08em; cursor: pointer; transition: all .25s var(--ease); color: var(--text); text-decoration: none; }
.s-pill svg { width: 17px; height: 17px; }
.s-pill:hover { transform: translateY(-3px); }
.s-pill.tt:hover { border-color: #ff0050; color: #ff0050; }
.s-pill.ig:hover { border-color: #e1306c; color: #e1306c; }
.s-pill.yt:hover { border-color: #f00; color: #f00; }
.s-pill.sp:hover { border-color: #1db954; color: #1db954; }
.s-pill.am:hover { border-color: #fc3f4a; color: #fc3f4a; }

/* ── CTA Band ── */
.cta-band { padding: 90px 0; background: radial-gradient(ellipse at center, #2a1a08 0%, #1a1008 100%); border-top: 1px solid var(--border); text-align: center; }
.cta-inner { max-width: 560px; margin: 0 auto; padding: 0 30px; }
.cta-inner h2 { color: var(--warm); margin-bottom: 14px; }
.cta-inner p { color: var(--muted); margin-bottom: 32px; }

/* ====================================================
   INNER PAGE HERO
==================================================== */
.pg-hero { position: relative; padding: 150px 40px 72px; overflow: hidden; text-align: center; }
.pg-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 30%, #2a1a08 0%, #1e1208 60%, #160e06 100%); }
.pg-hero-bg .orb { opacity: .22; }
.pg-hero-content { position: relative; z-index: 2; animation: fadeUp .8s var(--ease) both; }
.pg-hero-content h1 { color: var(--warm); margin-bottom: 14px; }
.pg-sub { font-size: .97rem; color: var(--muted); max-width: 480px; margin: 0 auto; }

/* ====================================================
   BIOGRAPHY PAGE
==================================================== */
.bio-body { padding: 72px 0 110px; background: var(--deep); }
.bio-layout { display: grid; grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
@media (max-width: 860px) { .bio-layout { grid-template-columns: 1fr; } }
.bio-sidebar { position: sticky; top: 82px; }
.bio-portrait-box { aspect-ratio: 3/4; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; overflow: hidden; }
.bio-portrait-box img { width: 100%; height: 100%; object-fit: cover; }
.bio-portrait-box svg { width: 75%; }
.bio-facts { display: flex; flex-direction: column; }
.fact { padding: 13px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.fact-lbl { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.fact-val { font-size: .88rem; color: var(--cream); }
.bio-h { font-size: clamp(1.3rem, 2.3vw, 1.9rem); color: var(--warm); margin: 44px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.bio-h:first-child { margin-top: 0; }
.bio-lead { font-size: 1.1rem; color: var(--cream); line-height: 1.78; margin-bottom: 22px; }
.bio-text p { margin-bottom: 18px; }
.bio-quote { border-left: 2px solid var(--gold); padding: 22px 28px; margin: 36px 0; background: rgba(212,175,109,.04); font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--cream); }
.bio-quote cite { display: block; margin-top: 10px; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dim); }

/* ====================================================
   COVERS PAGE
==================================================== */
.covers-body { padding: 72px 0 110px; background: var(--deep); }
.cover-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; }
.cover-feat.rev { direction: rtl; }
.cover-feat.rev > * { direction: ltr; }
@media (max-width: 860px) { .cover-feat, .cover-feat.rev { grid-template-columns: 1fr; direction: ltr; } }
.tt-embed-wrap { max-width: 340px; margin: 0 auto; width: 100%; }
.tt-placeholder { aspect-ratio: 9/16; background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; }
.tt-big-icon { width: 44px; color: var(--gold); }
.tt-big-icon svg { width: 100%; }
.tt-placeholder p { color: var(--muted); font-size: .82rem; }
.tt-placeholder code { font-size: .68rem; background: rgba(212,175,109,.08); padding: 5px 10px; color: var(--gold-dim); border: 1px solid var(--border); display: block; }
.cv-num { font-family: var(--serif); font-size: 4.5rem; font-weight: 900; color: var(--border); line-height: 1; display: block; margin-bottom: 6px; }
.cv-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--warm); margin-bottom: 6px; }
.cv-orig { font-size: .82rem; color: var(--muted); margin-bottom: 18px; letter-spacing: .04em; }
.cv-orig strong { color: var(--gold-dim); }
.cv-desc { margin-bottom: 28px; }
.cv-stats { display: flex; gap: 28px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); }
.stat-l { font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cv-divider { height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); }

/* ====================================================
   SOCIAL PAGE
==================================================== */
.social-body { padding: 72px 0 110px; background: var(--deep); }
.social-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.sc-card { background: var(--card); border: 1px solid var(--border); padding: 30px; transition: border-color .3s, transform .3s var(--ease); }
.sc-card:hover { transform: translateY(-5px); }
.sc-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sc-icon { width: 44px; height: 44px; background: rgba(212,175,109,.07); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-icon svg { width: 20px; height: 20px; }
.sc-card h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--cream); margin-bottom: 2px; }
.sc-handle { font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
.sc-card > p { font-size: .86rem; margin-bottom: 22px; }
.sc-stats { display: flex; gap: 22px; padding: 14px 0; margin-bottom: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ps { font-size: .75rem; color: var(--muted); }
.ps span { color: var(--gold); font-weight: 600; margin-right: 3px; }
.plat-btn { display: block; width: 100%; text-align: center; padding: 11px; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; border: none; transition: filter .2s, transform .15s; text-decoration: none; }
.plat-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tt-btn   { background: #ff0050; color: #fff; }
.ig-btn   { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.yt-btn   { background: #ff0000; color: #fff; }
.sp-btn   { background: #1db954; color: #fff; }
.sc-btn   { background: #ff5500; color: #fff; }
.em-btn   { background: var(--gold); color: var(--black); }
.sc-tt:hover { border-color: rgba(255,0,80,.3); }
.sc-ig:hover { border-color: rgba(220,39,67,.3); }
.sc-yt:hover { border-color: rgba(255,0,0,.3); }
.sc-sp:hover { border-color: rgba(29,185,84,.3); }
.sc-sc:hover { border-color: rgba(255,85,0,.3); }
.sc-em:hover { border-color: var(--gold-dim); }
.email-sub { display: flex; flex-direction: column; gap: 10px; margin-top: -4px; }
.email-sub input { background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--cream); padding: 11px 14px; font-family: var(--sans); font-size: .88rem; outline: none; transition: border-color .2s; }
.email-sub input:focus { border-color: var(--gold-dim); }
.email-sub input::placeholder { color: var(--muted); }

/* ====================================================
   CONTACT PAGE
==================================================== */
.contact-body { padding: 72px 0 110px; background: var(--deep); }
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info h2 { color: var(--warm); margin-bottom: 18px; }
.contact-info > p { margin-bottom: 36px; }
.collab-types { display: flex; flex-direction: column; margin-bottom: 44px; }
.col-type { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); }
.col-ico { font-size: 1.3rem; flex-shrink: 0; width: 32px; text-align: center; margin-top: 1px; }
.col-type h4 { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); margin-bottom: 3px; }
.col-type p { font-size: .82rem; color: var(--muted); margin: 0; }
.direct h4 { font-family: var(--sans); font-size: .67rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.email-lnk { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); border-bottom: 1px solid var(--gold-dim); padding-bottom: 3px; transition: color .2s; }
.email-lnk:hover { color: var(--gold-bright); }
.form-wrap { background: var(--card); border: 1px solid var(--border); padding: 44px; }
@media (max-width: 560px) { .form-wrap { padding: 26px; } }
.form-wrap h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--warm); margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } }
.f-grp { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.f-grp label { font-size: .67rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dim); }
.f-grp input, .f-grp select, .f-grp textarea { background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--cream); padding: 12px 15px; font-family: var(--sans); font-size: .9rem; outline: none; transition: border-color .2s, background .2s; resize: vertical; appearance: none; -webkit-appearance: none; }
.f-grp select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d4af6d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-color: rgba(255,255,255,.03); padding-right: 34px; cursor: pointer; }
.f-grp select option { background: var(--dark); }
.f-grp input:focus, .f-grp select:focus, .f-grp textarea:focus { border-color: var(--gold-dim); background: rgba(212,175,109,.04); }
.f-grp input::placeholder, .f-grp textarea::placeholder { color: var(--muted); }
.wpcf7-response-output { margin-top: 18px !important; padding: 14px 18px !important; border-radius: 0 !important; font-size: .85rem; }
.wpcf7-mail-sent-ok { background: rgba(29,185,84,.1) !important; border: 1px solid rgba(29,185,84,.3) !important; color: #1db954 !important; }
.wpcf7-validation-errors { background: rgba(255,80,80,.08) !important; border: 1px solid rgba(255,80,80,.3) !important; color: #ff5050 !important; }

/* ====================================================
   SPOTIFY SECTION (HOME PAGE)
==================================================== */
.h-spotify {
  padding: 100px 0;
  background: var(--black);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.h-spotify::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(29,185,84,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.spotify-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 860px) {
  .spotify-inner { grid-template-columns: 1fr; gap: 44px; }
}
.spotify-left .sec-title { margin-bottom: 16px; }
.spotify-desc { color: var(--muted); margin-bottom: 32px; }
.btn-spotify {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1db954;
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 28px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.btn-spotify:hover { background: #1ed760; transform: translateY(-1px); }
.spotify-right { display: flex; flex-direction: column; gap: 16px; }
.spotify-embed-wrap iframe,
.spotify-track-wrap iframe {
  border-radius: 0 !important;
  width: 100% !important;
  border: 1px solid var(--border) !important;
}
.spotify-artist iframe  { min-height: 352px; }
.spotify-track-wrap iframe { height: 80px; }
.spotify-tracks { display: flex; flex-direction: column; gap: 10px; }
.spotify-placeholder {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 40px 36px;
  text-align: center;
}
.sp-placeholder-icon {
  width: 52px; height: 52px;
  background: rgba(29,185,84,0.1);
  border: 1px solid rgba(29,185,84,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #1db954;
}
.sp-placeholder-icon svg { width: 26px; }
.spotify-placeholder > p { font-size: .88rem; color: var(--muted); margin-bottom: 4px; }
.spotify-placeholder > p:last-of-type { margin-bottom: 28px; }
.spotify-placeholder strong { color: var(--cream); }
.sp-placeholder-steps {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 24px; margin-top: 8px;
}
.sp-step { display: flex; align-items: flex-start; gap: 12px; font-size: .82rem; color: var(--muted); }
.sp-step-num {
  flex-shrink: 0; width: 22px; height: 22px;
  background: rgba(29,185,84,0.12);
  border: 1px solid rgba(29,185,84,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #1db954; margin-top: 1px;
}
.sp-step code { font-size: .75rem; background: rgba(212,175,109,.08); padding: 1px 5px; color: var(--gold-dim); }
.sp-step strong { color: var(--cream); }

/* ====================================================
   APPLE MUSIC SECTION (HOME PAGE)
==================================================== */
.h-apple-music {
  padding: 100px 0;
  background: var(--deep);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.h-apple-music::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(252,63,74,0.04) 0%, transparent 65%);
  pointer-events: none;
}
.apple-music-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 860px) {
  .apple-music-inner { grid-template-columns: 1fr; gap: 44px; }
  .apple-music-left  { order: 1; }
  .apple-music-right { order: 2; }
}
.apple-music-left .sec-title { margin-bottom: 16px; }
.am-desc { color: var(--muted); margin-bottom: 32px; }
.btn-apple-music {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fc3f4a, #ff2d55);
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 28px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter .2s, transform .15s;
}
.btn-apple-music:hover { filter: brightness(1.12); transform: translateY(-1px); }
.apple-music-right { display: flex; flex-direction: column; gap: 16px; }
.am-embed-wrap iframe,
.am-track-wrap iframe {
  border-radius: 0 !important;
  width: 100% !important;
  border: 1px solid var(--border) !important;
}
.am-artist iframe  { min-height: 352px; }
.am-track-wrap iframe { height: 150px; }
.am-tracks { display: flex; flex-direction: column; gap: 10px; }
.am-placeholder {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 40px 36px;
  text-align: center;
}
.am-placeholder-icon {
  width: 52px; height: 52px;
  background: rgba(252,63,74,0.1);
  border: 1px solid rgba(252,63,74,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #fc3f4a;
}
.am-placeholder-icon svg { width: 26px; }
.am-placeholder > p { font-size: .88rem; color: var(--muted); margin-bottom: 4px; }
.am-placeholder > p:last-of-type { margin-bottom: 28px; }
.am-placeholder strong { color: var(--cream); }
.am-placeholder-steps {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 24px; margin-top: 8px;
}
.am-step { display: flex; align-items: flex-start; gap: 12px; font-size: .82rem; color: var(--muted); }
.am-step-num {
  flex-shrink: 0; width: 22px; height: 22px;
  background: rgba(252,63,74,0.12);
  border: 1px solid rgba(252,63,74,0.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fc3f4a; margin-top: 1px;
}
.am-step code { font-size: .75rem; background: rgba(212,175,109,.08); padding: 1px 5px; color: var(--gold-dim); }
.am-step strong { color: var(--cream); }

/* ====================================================
   FOOTER
==================================================== */
.site-footer { padding: 36px 60px; border-top: 1px solid rgba(212,175,109,0.12); text-align: center; background: var(--deep); }
.site-footer p { font-size: .76rem; color: var(--muted); letter-spacing: .07em; margin: 0; }
.site-footer p + p { margin-top: 5px; opacity: .5; }

/* WordPress admin bar offset */
.admin-bar #nav { top: 32px; }
@media (max-width: 782px) { .admin-bar #nav { top: 46px; } }

/* ── Orbs (kept subtle for studio mood) ── */
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; animation: drift 14s ease-in-out infinite alternate; }
.o1 { width: 520px; height: 520px; background: radial-gradient(circle, #c8932a, transparent 70%); top: -120px; left: -80px; animation-duration: 14s; }
.o2 { width: 420px; height: 420px; background: radial-gradient(circle, #8b4a2a, transparent 70%); bottom: -80px; right: -60px; animation-duration: 18s; animation-delay: -5s; }
.o3 { width: 280px; height: 280px; background: radial-gradient(circle, #d4af6d, transparent 70%); top: 40%; right: 18%; animation-duration: 11s; animation-delay: -2s; opacity: .15; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(35px, 28px) scale(1.07); } }