:root{--ink:#f5efe8;--muted:#d9cfc4;--line:rgba(255,255,255,.24);--glass:rgba(20,14,12,.03);--a:#d6a75e;--a2:#f0d39b}
    *{box-sizing:border-box}html,body{height:100%;margin:0}
    body{font-family:"Merriweather Sans","Segoe UI",sans-serif;color:var(--ink);background:#120d0b;overflow:hidden}
    .hero{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transform:scale(1.03);animation:fade 1.2s ease-out forwards}

.hero-jazz{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-jazz > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

    .veil{position:fixed;inset:0;background:radial-gradient(circle at 22% 38%,rgba(214,167,94,.28),transparent 42%),linear-gradient(110deg,rgba(0,0,0,.7),rgba(0,0,0,.45) 55%,rgba(0,0,0,.7));}
    @keyframes fade{to{opacity:1;transform:scale(1)}}
    .panel{position:fixed;left:2rem;top:50%;transform:translateY(-50%);z-index:6;width:min(470px,calc(100vw - 2rem));padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
    .tag{display:inline-flex;gap:8px;align-items:center;padding:6px 11px;border-radius:999px;border:1px solid rgba(240,211,155,.5);background:rgba(240,211,155,.15);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
    h1{margin:12px 0 8px;font-size:clamp(1.8rem,3.1vw,2.5rem);line-height:1.05}
    p{margin:0;color:var(--muted);line-height:1.55}
    .np{margin-top:16px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.0015)}
    .np img{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#111}
    .np .t{font-size:.78rem;color:#f0d9b0;text-transform:uppercase;letter-spacing:.06em}
    .np .s{font-size:.95rem;font-weight:700}
    .box{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.0015)}
    audio{width:100%}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
    button{border:0;border-radius:10px;padding:11px 14px;font-weight:700;cursor:pointer;color:#2b1c12;background:linear-gradient(90deg,var(--a),var(--a2))}
    button.alt{color:#e6ddd0;background:rgba(40,32,28,.92);border:1px solid var(--line)}
    .status{margin-top:10px;font-size:.92rem;color:#f0debf;min-height:1.2em}

    
    .site-footer{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:10px 16px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.30));border-top:1px solid rgba(255,255,255,.08)}
    .footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#e7dac7;font-size:.86rem}
    .footer-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .footer-links a{color:#f0d39b;text-decoration:none;opacity:.92;padding:4px 8px;border-radius:8px;border:1px solid transparent;transition:all .2s ease}
    .footer-links a:hover{opacity:1;text-decoration:none;border-color:rgba(240,211,155,.45);background:rgba(240,211,155,.08)}
    .footer-now{color:#f7e8cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}

    
    .doc-modal{position:fixed;inset:0;z-index:20;display:block;pointer-events:none}
    .doc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.0);transition:background .28s ease}
    .doc-panel{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.97);width:min(960px,94vw);max-height:86vh;overflow:auto;border:1px solid rgba(255,255,255,.20);border-radius:16px;background:linear-gradient(180deg,rgba(28,20,16,.58),rgba(17,12,10,.58));color:#f2e7d7;box-shadow:0 24px 70px rgba(0,0,0,.55);opacity:0;transition:all .28s ease}
    .doc-modal.open{pointer-events:auto}
    .doc-modal.open .doc-backdrop{background:rgba(0,0,0,.45)}
    .doc-modal.open .doc-panel{top:50%;opacity:1;transform:translate(-50%,-50%) scale(1)}
    .doc-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);background:rgba(20,14,12,.30)}
    .doc-title{font-weight:800;letter-spacing:.02em}
    .doc-close{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.035);color:#f8efdf;border-radius:10px;padding:8px 12px;cursor:pointer}
    .doc-close:hover{background:rgba(255,255,255,.06)}
    .doc-body{padding:14px 16px 18px;line-height:1.7}
    .doc-body h1,.doc-body h2{margin:0 0 10px;color:#f3d7a6}
    .doc-body h1{font-size:1.35rem;letter-spacing:.01em}
    .doc-body h2{font-size:1.02rem;margin-top:16px}
    .doc-body p{margin:0 0 10px;color:#f2e8dc}
    .doc-body a{color:#f0d39b}
    .doc-content{background:rgba(255,255,255,.012);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}




.jazz-logo {
  position: absolute;
  top: 34px;
  left: 2rem;
  transform: none;
  z-index: 1;
  text-align: left;
  color: #d8a84a;
  pointer-events: none;
  opacity: .72;
}


.jazz-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 70px;
  font-family:"ADLaM Display","Merriweather Sans","Segoe UI",sans-serif; font-weight:400;
  font-size: clamp(64px, 8.8vw, 150px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 0.85;
  text-transform: uppercase;

  background: linear-gradient(
    180deg,
    #fff1b8 0%,
    #d8a84a 35%,
    #9f6b1f 70%,
    #f3d37a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 18px rgba(216, 168, 74, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.55);
}

.jazz-divider {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.jazz-divider .line {
  width: 310px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 168, 74, 0.9),
    transparent
  );
}

.wave {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wave i {
  display: block;
  width: 3px;
  background: #d8a84a;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(216, 168, 74, 0.45);
}

.wave i:nth-child(1) { height: 12px; }
.wave i:nth-child(2) { height: 22px; }
.wave i:nth-child(3) { height: 34px; }
.wave i:nth-child(4) { height: 46px; }
.wave i:nth-child(5) { height: 34px; }
.wave i:nth-child(6) { height: 22px; }
.wave i:nth-child(7) { height: 12px; }

@media (max-width: 768px) {
  .jazz-logo {
    top: 20px;
    left: .75rem;
    width: calc(100% - 1.5rem);
    transform: none;
    text-align: left;
    opacity:.68;
  }

  .jazz-title {
    gap: 28px;
    font-size: clamp(48px, 15vw, 90px);
    letter-spacing: 0.04em;
  }

  .jazz-divider {
    margin-top: 14px;
    gap: 10px;
  }

  .jazz-divider .line {
    width: 120px;
  }
}






    @media (max-width:860px){body{overflow:auto;padding-bottom:290px}.hero{object-position:center 16%}.hero-jazz > img{object-position:center 14%}.panel{left:.75rem;right:.75rem;bottom:.75rem;top:auto;transform:none;width:auto;max-height:45vh;overflow:auto}h1{font-size:clamp(1.35rem,7.2vw,1.8rem)!important;line-height:1.12}.site-footer{padding:8px 12px 6px}.footer-now{max-width:100%;width:100%}}

@media (max-width:420px){h1{font-size:1.28rem!important}}
