/* ============ TOKENS ============ */
  :root{
    --ink:            #174438;
    --ink-soft:       #287761;
    --ink-line:       #4B9A82;
    --stone:          #FFFFFF;
    --stone-dim:      #FFFFFF;
    --stone-line:     #E5E1E3;
    --brass:          #E7A62D;
    --brass-light:    #FFD166;
    --brass-deep:     #B96B00;
    --mist:           #86B7A5;
    --text-ink:       #16251F;
    --text-ink-mute:  #68766A;
    --text-stone:     #FFF8E7;
    --text-stone-mute:#C1D2C5;

    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --container: 1160px;
    --cut: 16px;

    color-scheme: dark light;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:            #174438;
      --stone:          #FFFFFF;
    }
  }
  :root[data-theme="dark"]{
    --ink:            #174438;
    --stone:          #FFFFFF;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{
    overflow-x:hidden;
    scroll-behavior:smooth;
    scroll-padding-top: calc(76px + env(safe-area-inset-top,0px));
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    margin:0;
    animation:pageLoad .55s ease-out both;
    background:
      radial-gradient(circle at top, rgba(231,166,45,0.18), transparent 30%),
      linear-gradient(180deg, #174438 0%, #0F2F27 100%);
    color:var(--text-stone);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    overflow-x:hidden;
  }

  img{ max-width:100%; display:block; }

  a{ color:inherit; text-decoration:none; }

  h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; }

  p{ margin:0; }

  .brand-mark{
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid rgba(255,209,102,0.7);
    background:radial-gradient(circle at 30% 30%, rgba(255,209,102,0.82), rgba(23,68,56,0.2));
    display:grid;
    place-items:center;
    box-shadow:0 0 0 8px rgba(231,166,45,0.12);
  }

  :focus-visible{
    outline:2px solid var(--brass-light);
    outline-offset:3px;
  }

  .wrap{
    max-width:var(--container);
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
  }
  @media (max-width:640px){
    .wrap{ padding-left:20px; padding-right:20px; }
  }

  .label{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--brass-light);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .label::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--brass-light);
    display:inline-block;
  }
  section.on-stone .label{ color:var(--brass-deep); }
  section.on-stone .label::before{ background:var(--brass-deep); }

  @keyframes pageLoad{
    from{ opacity:0; transform:scale(.992); }
    to{ opacity:1; transform:scale(1); }
  }
  @keyframes slideDown{
    from{ opacity:0; transform:translateY(-100%); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes fadeRise{
    from{ opacity:0; transform:translateY(28px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .nav{ animation:none; }
  @media (prefers-reduced-motion:no-preference){
    .nav-links li{ opacity:0; animation:fadeRise .55s ease-out forwards; }
    .nav-links li:nth-child(1){ animation-delay:.08s; }
    .nav-links li:nth-child(2){ animation-delay:.14s; }
    .nav-links li:nth-child(3){ animation-delay:.2s; }
    .nav-links li:nth-child(4){ animation-delay:.26s; }
    .nav-links li:nth-child(5){ animation-delay:.32s; }
    .nav-links li:nth-child(6){ animation-delay:.38s; }
    .hero-content .label{ animation:fadeRise .8s .15s ease-out both; }
    .hero-content .hero-logo{ animation:fadeRise .9s .28s ease-out both; }
    .hero-content h1{ animation:fadeRise .9s .42s ease-out both; }
    .hero-content .cta-row{ animation:fadeRise .9s .56s ease-out both; }
    .hero-meta{ animation:fadeRise .9s .68s ease-out both; }
  }

  .btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 26px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:15px;
    border:1px solid transparent;
    cursor:pointer;
    clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
    white-space:nowrap;
    box-shadow:0 12px 30px rgba(13,10,7,.12);
  }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 20px 36px rgba(23,68,56,0.24); }
  .btn::after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    opacity:0;
    transform:scale(0);
    pointer-events:none;
  }
  .btn:active::after{ opacity:.55; transform:scale(18); transition:transform .45s ease, opacity .45s ease; }
  .btn-primary{
    background:linear-gradient(135deg, var(--brass-light), var(--brass));
    color:#174438;
    box-shadow:0 18px 30px rgba(231,166,45,0.28);
  }
  .btn-primary:hover{ background:linear-gradient(135deg, #ffc0aa, var(--brass-light)); }
  .btn-outline{
    background:transparent;
    border-color:rgba(255,255,255,0.3);
    color:inherit;
  }
  .btn-outline:hover{ opacity:.82; border-color:rgba(255,255,255,0.6); }

  /* ============ WAVEFORM STRIP ============ */
  .wave{
    display:flex;
    align-items:flex-end;
    gap:4px;
    height:44px;
    width:100%;
    padding:0 6px;
  }
  .wave span{
    flex:1 1 auto;
    max-width:5px;
    min-width:2px;
    background:var(--mist);
    opacity:.55;
    transform-origin:bottom center;
  }
  @media (prefers-reduced-motion: no-preference){
    .wave span{ animation:wavePulse 2.8s ease-in-out infinite; }
    @keyframes wavePulse{
      0%,100%{ transform:scaleY(var(--h,.5)); }
      50%{ transform:scaleY(var(--h2,.9)); }
    }
  }

  /* ============ NAV ============ */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding-top:env(safe-area-inset-top,0px);
    background:rgba(23,68,56,0.0);
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .nav.scrolled{
    background:rgba(23,68,56,0.9);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--ink-line);
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
  }
  .nav-inner{
    position:relative;
    z-index:210;
    max-width:var(--container);
    margin:0 auto;
    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-body);
    font-weight:800;
    font-size:15px;
    letter-spacing:.03em;
    color:var(--text-stone);
  }
  .brand-mark{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#174438;
    box-shadow:0 0 0 6px rgba(231,166,45,0.12);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.08); box-shadow:0 0 0 9px rgba(231,166,45,0.18); }
  .brand-word{ transition:color .25s ease; }
  .brand:hover .brand-word{ color:var(--brass-light); }
  .brand-text{ display:flex; flex-direction:column; line-height:1; }
  .brand-word{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
  .brand-sub{ font-size:10px; letter-spacing:.38em; text-transform:uppercase; color:var(--text-stone-mute); margin-top:4px; }

  .nav-links{
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    font-size:14.5px;
    font-weight:600;
    color:var(--text-stone-mute);
    transition:color .2s ease, transform .2s ease;
    position:relative;
  }
  .nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--brass-light); transform:scaleX(0); transform-origin:center; transition:transform .25s ease; }
  .nav-links a:hover{ color:var(--text-stone); transform:translateY(-2px); }
  .nav-links a:hover::after{ transform:scaleX(1); }

  .nav-right{ display:flex; align-items:center; gap:22px; }
  .nav-right .btn{ padding:10px 20px; font-size:13.5px; }

  .burger{
    display:none;
    z-index:120;
    width:26px; height:20px;
    position:relative;
    background:none; border:none;
    cursor:pointer;
    padding:0;
  }
  .burger span{
    position:absolute; left:0; right:0; height:2px;
    background:var(--text-stone);
    transition:transform .25s ease, opacity .25s ease, top .25s ease;
  }
  .burger span:nth-child(1){ top:0; }
  .burger span:nth-child(2){ top:9px; }
  .burger span:nth-child(3){ top:18px; }
  .nav.open .burger span:nth-child(1){ top:9px; transform:rotate(45deg); }
  .nav.open .burger span:nth-child(2){ opacity:0; }
  .nav.open .burger span:nth-child(3){ top:9px; transform:rotate(-45deg); }

  .mobile-panel{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:min(60vw, 340px);
    background:#12382f;
    border-left:1px solid rgba(255,209,102,.32);
    box-shadow:-24px 0 70px rgba(0,0,0,.42);
    z-index:200;
    padding: calc(94px + env(safe-area-inset-top,0px)) 20px 30px;
    flex-direction:column;
    gap:0;
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .28s ease, visibility .28s ease;
  }
  .nav.open .mobile-panel{ transform:translateX(0); visibility:visible; }
  .nav::before{
    content:"";
    position:fixed;
    z-index:190;
    inset:0;
    background:rgba(7,24,19,.48);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease, visibility .28s ease;
  }
  .nav.open::before{ opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-panel a{
    min-height:48px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-family:var(--font-body);
    font-size:15px;
    font-weight:700;
    color:var(--text-stone);
    white-space:nowrap;
  }
  .mobile-panel .btn{
    min-height:44px;
    align-self:stretch;
    justify-content:center;
    margin-top:20px;
    padding:12px 10px;
    font-size:13px;
    white-space:normal;
  }
  .nav.open .burger{ position:fixed; right:20px; z-index:220; }

  @media (max-width: 860px){
    .mobile-panel{ display:flex; }
    .nav-links{ display:none; }
    .nav-right .btn{ display:none; }
    .burger{ display:block; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
      radial-gradient(60% 50% at 50% 30%, rgba(231,166,45,0.24), transparent 65%),
      radial-gradient(70% 90% at 50% 100%, rgba(75,154,130,0.26), transparent 60%),
      linear-gradient(180deg, #174438 0%, #0F2F27 100%);
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;
    background:radial-gradient(circle at 30% 35%, rgba(255,209,102,0.12), transparent 22%), radial-gradient(circle at 75% 65%, rgba(75,154,130,0.14), transparent 26%);
    opacity:.8;
  }
  @media (prefers-reduced-motion: no-preference){
    .hero::after{ animation:ambientDrift 12s ease-in-out infinite alternate; }
    @keyframes ambientDrift{
      from{ transform:translate3d(-3%, -2%, 0) scale(1); }
      to{ transform:translate3d(3%, 2%, 0) scale(1.08); }
    }
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:6% 10% auto;
    height:60%;
    background:radial-gradient(circle at center, rgba(255,255,255,0.04), transparent 62%);
    pointer-events:none;
  }
  .hero-wave-top{ padding:calc(18px + env(safe-area-inset-top,0px)) 0 0; opacity:.8; }

  .hero-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:42px 24px 20px;
  }
  .hero-content{
    text-align:center;
    max-width:760px;
    margin:0 auto;
    position:relative;
    z-index:1;
  }
  .hero-content .label{ justify-content:center; margin-bottom:30px; }
  .hero-content .label::after{
    content:"";
    width:22px; height:1px; background:var(--brass-light); display:inline-block;
  }

  .hero-logo{
    width:min(260px, 62vw);
    margin:0 auto 34px;
    filter:drop-shadow(0 18px 52px rgba(0,0,0,.42));
  }
  @media (prefers-reduced-motion: no-preference){
    .hero-logo, .hero-content h1, .hero-content .sub, .hero-content .cta-row{
      animation: riseIn .9s cubic-bezier(.2,.8,.2,1) both;
    }
    .hero-content .label{ animation: riseIn .9s cubic-bezier(.2,.8,.2,1) both; }
    .hero-content .label{ animation-delay:.05s; }
    .hero-logo{ animation-delay:.15s; }
    .hero-content h1{ animation-delay:.3s; }
    .hero-content .sub{ animation-delay:.45s; }
    .hero-content .cta-row{ animation-delay:.6s; }
    @keyframes riseIn{
      from{ opacity:0; transform:translateY(16px); }
      to{ opacity:1; transform:translateY(0); }
    }
  }

  .hero-content h1{
    font-size:clamp(32px, 5.6vw, 58px);
    font-weight:500;
    line-height:1.08;
    color:var(--text-stone);
    letter-spacing:-.02em;
    text-wrap:balance;
  }
  .hero-content .sub{
    margin:24px auto 0;
    max-width:520px;
    color:var(--text-stone-mute);
    font-size:17px;
    line-height:1.7;
  }
  .hero-meta{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .hero-meta span{
    padding:7px 12px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.03);
    color:var(--text-stone-mute);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .cta-row{
    margin-top:38px;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .cta-row .btn-outline{ color:var(--text-stone); }

  .scroll-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
    color:var(--text-stone-mute);
    font-size:12px;
    letter-spacing:.04em;
  }
  .scroll-cue .line{
    width:1px; height:34px;
    background:linear-gradient(var(--mist), transparent);
  }
  @media (prefers-reduced-motion: no-preference){
    .scroll-cue .line{ animation:cueMove 1.8s ease-in-out infinite; }
    @keyframes cueMove{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
  }

  /* ============ SECTION BASE ============ */
  section{ position:relative; padding:110px 0; }
  section.on-stone{ background:#FFFFFF; color:var(--text-ink); }
  section.on-ink{ background:var(--ink); color:var(--text-stone); }
  @media (max-width:760px){ section{ padding:76px 0; } }
  h2, h3{ text-wrap:balance; }

  .reveal-section{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-section.is-visible{
    opacity:1;
    transform:none;
  }
  @media (prefers-reduced-motion: reduce){
    .reveal-section{ opacity:1; transform:none; }
  }

  .texture-stone{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(38% 32% at 12% 18%, rgba(172,168,158,0.16), transparent 60%),
      radial-gradient(30% 26% at 88% 78%, rgba(231,166,45,0.13), transparent 60%);
  }

  /* ============ ABOUT ============ */
  .about-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:64px;
    align-items:start;
    position:relative;
  }
  @media (max-width:820px){
    .about-grid{ grid-template-columns:1fr; gap:40px; }
  }
  .quote-block{ position:sticky; top:110px; }
  @media (max-width:820px){ .quote-block{ position:static; } }
  .quote-block img{ height:30px; width:auto; margin-bottom:26px; opacity:.9; }
  .quote-block blockquote{
    margin:0;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(22px, 2.6vw, 29px);
    line-height:1.4;
    color:var(--text-ink);
    border-left:2px solid var(--brass);
    padding-left:22px;
    text-wrap:balance;
  }
  .quote-block cite{
    display:block;
    font-style:normal;
    font-family:var(--font-body);
    font-size:13.5px;
    font-weight:700;
    color:var(--text-ink-mute);
    margin-top:16px;
    padding-left:24px;
  }

  .about-copy p{
    color:var(--text-ink);
    font-size:17px;
    line-height:1.8;
    max-width:56ch;
  }
  .about-copy p + p{ margin-top:20px; }
  .about-copy .label{ margin-bottom:22px; }

  /* ============ TEAM (placeholder — photos coming soon) ============ */
  .team-copy{ max-width:640px; }
  .team-copy .label{ margin-bottom:22px; }
  .team-copy h2{
    font-size:clamp(26px, 3.4vw, 36px);
    color:var(--text-ink);
    line-height:1.25;
    margin-bottom:16px;
  }
  .team-copy p{
    color:var(--text-ink-mute);
    font-size:16.5px;
    line-height:1.75;
    max-width:56ch;
  }
  .team-placeholder{
    margin-top:36px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 24px;
    border:1px dashed var(--stone-line);
    max-width:420px;
  }
  .team-placeholder svg{ width:22px; height:22px; stroke:var(--brass-deep); flex-shrink:0; }
  .team-placeholder span{ color:var(--text-ink-mute); font-size:14.5px; }

  /* ============ MISSION BANNER ============ */
  .mission{
    padding:120px 0;
    background:var(--ink-soft);
    text-align:center;
    overflow:hidden;
  }
  .mission-watermark{
    position:absolute;
    top:50%; right:-6%;
    transform:translateY(-50%);
    width:min(560px, 60vw);
    opacity:.07;
    pointer-events:none;
  }
  .mission .label{ justify-content:center; margin-bottom:26px; }
  .mission .label::after{ content:""; width:22px; height:1px; background:var(--brass-light); }
  .mission blockquote{
    position:relative;
    margin:0 auto;
    max-width:680px;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(24px, 3.6vw, 38px);
    line-height:1.45;
    color:var(--text-stone);
  }

  /* ============ MUSIC ============ */
  .music-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:820px){
    .music-grid{ grid-template-columns:1fr; gap:44px; }
    .release-video .video-embed{ object-position:center 42%; }
  }

  .music-slider{ min-width:0; }
  .slider-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:18px;
  }
  .slider-arrow{
    width:42px;
    height:42px;
    border:1px solid var(--brass-light);
    background:transparent;
    color:var(--brass-light);
    cursor:pointer;
    font-size:20px;
  }
  .slider-arrow:disabled{ opacity:.35; cursor:not-allowed; }
  .slider-count{ min-width:54px; text-align:center; color:var(--text-stone-mute); font-size:13px; font-weight:700; }
  .release-tile{
    aspect-ratio:1/1;
    background:
      radial-gradient(120% 120% at 20% 15%, rgba(255,209,102,0.36), transparent 55%),
      linear-gradient(150deg, #2B8068, #174438 70%);
    border:1px solid var(--ink-line);
    clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow:0 28px 60px rgba(0,0,0,0.2);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .release-tile:hover{ transform:translateY(-8px) rotate(-1deg); box-shadow:0 36px 70px rgba(23,68,56,0.3); }
  .release-tile img{ width:38%; opacity:.9; }
  .release-video{ overflow:hidden; }
  .preview-label{
    position:absolute;
    z-index:2;
    top:16px;
    left:16px;
    padding:7px 11px;
    background:rgba(23,68,56,.92);
    border:1px solid rgba(255,209,102,.72);
    color:var(--brass-light);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    pointer-events:none;
  }
  .release-video .video-embed{
    width:100%;
    height:100%;
    border:0;
    display:block;
    object-fit:cover;
    object-position:center center;
    background:#000;
  }
  @media (prefers-reduced-motion: no-preference){
    .release-tile{ animation:albumBreath 5s ease-in-out infinite; }
    @keyframes albumBreath{
      0%,100%{ box-shadow:0 28px 60px rgba(0,0,0,0.2); }
      50%{ box-shadow:0 34px 74px rgba(231,166,45,0.2); }
    }
  }
  .play-ring{
    position:absolute;
    width:74px; height:74px;
    border-radius:50%;
    border:1px solid var(--brass-light);
    display:flex; align-items:center; justify-content:center;
    bottom:26px; right:26px;
  }
  .play-ring::before{
    content:"";
    position:absolute; inset:-10px;
    border-radius:50%;
    border:1px solid rgba(255,209,102,.42);
  }
  @media (prefers-reduced-motion: no-preference){
    .play-ring::before{ animation:ringPulse 2.4s ease-out infinite; }
    @keyframes ringPulse{
      0%{ transform:scale(.85); opacity:.7; }
      100%{ transform:scale(1.25); opacity:0; }
    }
  }
  .play-ring svg{ width:20px; height:20px; fill:var(--brass-light); }

  .music-copy .label{ margin-bottom:22px; }
  .music-copy h2{
    font-size:clamp(26px, 3.4vw, 36px);
    color:var(--text-stone);
    line-height:1.25;
    margin-bottom:20px;
  }
  .music-copy p{
    color:var(--text-stone-mute);
    font-size:16.5px;
    line-height:1.75;
    max-width:52ch;
  }
  .player-panel{
    margin-top:28px;
    padding:20px 18px 18px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    box-shadow:0 18px 30px rgba(0,0,0,0.12);
  }
  .player-topline{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--text-stone-mute);
    margin-bottom:16px;
  }
  .live-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--brass-light);
    box-shadow:0 0 0 6px rgba(255,209,102,0.16);
  }
  @media (prefers-reduced-motion: no-preference){
    .live-dot{ animation:livePulse 1.8s ease-in-out infinite; }
    @keyframes livePulse{
      0%,100%{ transform:scale(1); box-shadow:0 0 0 5px rgba(255,209,102,0.12); }
      50%{ transform:scale(1.35); box-shadow:0 0 0 10px rgba(255,209,102,0.02); }
    }
  }
  .player-track{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
  }
  .player-track strong{
    display:block;
    color:var(--text-stone);
    font-size:16px;
    margin-bottom:3px;
  }
  .player-track small{ color:var(--text-stone-mute); }
  #trackTime{ color:var(--text-stone-mute); font-size:12px; }
  .player-controls{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:14px;
    align-items:center;
  }
  .player-btn{
    appearance:none;
    border:1px solid rgba(255,209,102,0.7);
    background:linear-gradient(135deg, var(--brass-light), var(--brass));
    color:#174438;
    font-weight:800;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.12em;
    padding:10px 14px;
    cursor:pointer;
    transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }
  .player-btn:hover{ transform:translateY(-2px) scale(1.03); filter:saturate(1.2); box-shadow:0 10px 20px rgba(231,166,45,0.28); }
  input[type="range"]{
    width:100%;
    accent-color:var(--brass-light);
  }
  .platform-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px;
  }
  .platform-pill{
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.02);
    color:var(--text-stone-mute);
    font-size:13px;
    font-weight:600;
    padding:9px 16px;
    letter-spacing:.04em;
    text-transform:uppercase;
    transition:transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
  }
  .platform-pill:hover{ transform:translateY(-4px); color:var(--brass-light); border-color:var(--brass-light); background:rgba(255,209,102,0.1); }

  /* ============ DATES ============ */
  .dates-inner{ max-width:640px; }
  .dates-copy .label{ margin-bottom:22px; }
  .dates-copy h2{
    font-size:clamp(26px, 3.4vw, 36px);
    color:var(--text-stone);
    line-height:1.25;
    margin-bottom:20px;
    max-width:16ch;
  }
  .dates-copy p{
    color:var(--text-stone-mute);
    font-size:16.5px;
    line-height:1.75;
    max-width:54ch;
  }
  .date-row{
    margin-top:36px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 22px;
    border:1px solid var(--ink-line);
    max-width:420px;
    background:rgba(255,255,255,0.02);
    box-shadow:0 18px 30px rgba(0,0,0,0.08);
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
  }
  .date-row:hover{ transform:translateX(8px); border-color:var(--brass-light); background:rgba(255,209,102,0.08); }
  .date-row svg{ width:20px; height:20px; flex-shrink:0; stroke:var(--brass-light); }
  .date-row span{ color:var(--text-stone-mute); font-size:14.5px; }

  /* ============ CONTACT ============ */
  .contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:56px;
  }
  @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:44px; } }

  .contact-card{
    border:1px solid var(--stone-line);
    clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
    padding:34px;
    background:#FFFFFF;
    box-shadow:0 24px 48px rgba(23,68,56,0.08);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .contact-card:hover{ transform:translateY(-5px); box-shadow:0 30px 56px rgba(23,68,56,0.16); }
  .contact-card .label{ margin-bottom:26px; }
  .contact-item{ display:flex; align-items:flex-start; gap:14px; }
  .contact-item + .contact-item{ margin-top:20px; }
  .contact-item svg{ width:19px; height:19px; margin-top:2px; stroke:var(--brass-deep); flex-shrink:0; }
  .contact-item a, .contact-item span{
    font-size:15.5px;
    color:var(--text-ink);
    font-weight:600;
  }
  .contact-item a{ transition:color .2s ease; }
  .contact-item a:hover{ color:var(--brass-deep); }
  .contact-item small{
    display:block;
    color:var(--text-ink-mute);
    font-weight:500;
    font-size:12.5px;
    margin-bottom:3px;
  }
  .social-row{ display:flex; gap:12px; margin-top:28px; }
  .social-row a{
    width:38px; height:38px;
    border:1px solid var(--stone-line);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, background .2s ease;
  }
  .social-row a:hover{ border-color:var(--brass-deep); background:var(--stone); }
  .social-row a{ transition:transform .25s ease, border-color .2s ease, background .2s ease; }
  .social-row a:hover{ transform:translateY(-4px) rotate(-5deg); }
  .social-row svg{ width:16px; height:16px; fill:var(--text-ink); }

  .contact-form h2{
    font-size:clamp(26px, 3.4vw, 34px);
    color:var(--text-ink);
    margin-bottom:14px;
  }
  .contact-form > p{
    color:var(--text-ink-mute);
    font-size:16px;
    line-height:1.7;
    max-width:48ch;
    margin-bottom:30px;
  }
  .field{ margin-bottom:18px; }
  .field label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:var(--text-ink-mute);
    margin-bottom:8px;
  }
  .field input, .field textarea{
    width:100%;
    background:rgba(255,255,255,0.62);
    border:1px solid var(--stone-line);
    border-radius:8px;
    padding:13px 15px;
    font-family:var(--font-body);
    font-size:15px;
    color:var(--text-ink);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.02);
  }
  .field textarea{ resize:vertical; min-height:120px; }
  .field input:focus, .field textarea:focus{ border-color:var(--brass-deep); box-shadow:0 0 0 4px rgba(231,166,45,0.14); }
  .contact-form .btn-primary{ margin-top:8px; }
  .form-note{
    margin-top:14px;
    font-size:13px;
    color:var(--text-ink-mute);
  }

  /* ============ GALLERY ============ */
  .gallery-copy{ max-width:640px; margin-bottom:40px; }
  .gallery-copy .label{ margin-bottom:22px; }
  .gallery-copy h2{
    font-size:clamp(26px, 3.4vw, 36px);
    color:var(--text-ink);
    line-height:1.25;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  @media (max-width:760px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  .gallery-item{
    aspect-ratio:4/5;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    border:1px solid var(--stone-line);
    padding:0;
    margin:0;
    background:none;
    display:block;
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    text-align:left;
    box-shadow:0 18px 28px rgba(23,18,13,0.06);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .gallery-item:hover{
    transform:translateY(-6px) rotate(.5deg);
    box-shadow:0 24px 38px rgba(23,68,56,0.2);
  }
  .gallery-item img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
  }
  .gallery-item:hover img{ transform:scale(1.05); }
  .gallery-item::after{
    content:"";
    position:absolute; inset:0;
    background:rgba(23,18,13,0);
    transition:background .2s ease;
    pointer-events:none;
  }
  .gallery-item:hover::after{ background:rgba(23,18,13,.12); }

  @media (prefers-reduced-motion: no-preference){
    .gallery-item:nth-child(1){ transition-delay:.05s; }
    .gallery-item:nth-child(2){ transition-delay:.1s; }
    .gallery-item:nth-child(3){ transition-delay:.15s; }
    .gallery-item:nth-child(4){ transition-delay:.2s; }
    .platform-pill:nth-child(1){ animation:softFloat 4s ease-in-out infinite; }
    .platform-pill:nth-child(2){ animation:softFloat 4s .35s ease-in-out infinite; }
    .platform-pill:nth-child(3){ animation:softFloat 4s .7s ease-in-out infinite; }
    .platform-pill:nth-child(4){ animation:softFloat 4s 1.05s ease-in-out infinite; }
    @keyframes softFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
  }

  .lightbox{
    position:fixed; inset:0;
    background:rgba(10,8,6,.94);
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    padding: calc(20px + env(safe-area-inset-top,0px)) 64px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .lightbox.open{ display:flex; }
  .lightbox img{
    max-width:100%;
    max-height:82vh;
    width:auto; height:auto;
    margin:0 auto;
    border:1px solid rgba(244,242,236,.15);
  }
  .lightbox-close,
  .lightbox-nav{
    position:absolute;
    width:44px; height:44px;
    border:1px solid rgba(244,242,236,.3);
    background:rgba(23,18,13,.4);
    color:var(--text-stone);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
  }
  .lightbox-close:hover,
  .lightbox-nav:hover{ border-color:var(--brass-light); background:rgba(23,18,13,.7); }
  .lightbox-close svg,
  .lightbox-nav svg{ width:18px; height:18px; stroke:currentColor; }
  .lightbox-close{
    top: calc(16px + env(safe-area-inset-top,0px));
    right:16px;
  }
  .lightbox-nav{ top:50%; transform:translateY(-50%); }
  .lightbox-prev{ left:12px; }
  .lightbox-next{ right:12px; }

  /* ============ FOOTER ============ */
  footer{
    background:var(--ink);
    padding-top:60px;
  }
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:40px;
    padding-bottom:50px;
    border-bottom:1px solid var(--ink-line);
  }
  .footer-brand{ max-width:320px; }
  .footer-brand .brand{ margin-bottom:16px; }
  .footer-brand p{ color:var(--text-stone-mute); font-size:14.5px; line-height:1.7; }
  .footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h4{ letter-spacing:.08em; text-transform:uppercase; }

  .footer-links{ display:flex; gap:64px; flex-wrap:wrap; }
  .footer-col h4{
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    color:var(--text-stone-mute);
    margin:0 0 16px;
  }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .footer-col a{ font-size:14.5px; color:var(--text-stone); transition:color .2s ease; }
  .footer-col a:hover{ color:var(--brass-light); }

  .footer-bottom{
    padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  .footer-top .social-row{
    flex:0 0 100%;
    justify-content:center;
    margin-top:0;
    transform:translateY(69px);
  }
  .footer-top .social-row a{ border-color:var(--ink-line); background:var(--ink); }
  .footer-top .social-row svg{ fill:#fff; }
  .footer-bottom p{ color:var(--text-stone-mute); font-size:13px; }

  ::selection{ background:var(--brass); color:var(--ink); }