/*
 * TUBTIMDAENG RECORDS — UX/CRO refinement layer
 * Loaded after the legacy stylesheet so the public experience can evolve
 * without changing the existing PHP + JSON publishing workflow.
 */
:root{
  --tdr-bg:#050505;
  --tdr-bg-deep:#020202;
  --tdr-surface:#101011;
  --tdr-surface-raised:#171719;
  --tdr-text:#f5f1ed;
  --tdr-muted:#b9b4ae;
  --tdr-subtle:#8e8984;
  --tdr-red:#c91527;
  --tdr-red-hover:#e11d32;
  --tdr-red-active:#a50d1d;
  --tdr-gold:#c7a46b;
  --tdr-line:rgba(245,241,237,.14);
  --tdr-line-strong:rgba(245,241,237,.24);
  --tdr-focus:#ffd28a;
  --tdr-radius-sm:12px;
  --tdr-radius-md:20px;
  --tdr-radius-lg:30px;
  --tdr-shadow-sm:0 12px 34px rgba(0,0,0,.30);
  --tdr-shadow-lg:0 34px 100px rgba(0,0,0,.52);
  --tdr-content:1200px;
}

html{
  scroll-padding-top:88px;
}

body{
  background:
    radial-gradient(circle at 75% 5%,rgba(201,21,39,.12),transparent 32rem),
    linear-gradient(180deg,var(--tdr-bg),var(--tdr-bg-deep));
  color:var(--tdr-text);
}

.page{
  min-height:100svh;
}

.topbar{
  height:76px!important;
  padding:calc(14px + env(safe-area-inset-top)) clamp(20px,4.5vw,72px) 12px!important;
  background:linear-gradient(180deg,rgba(3,3,3,.96),rgba(3,3,3,.80) 72%,rgba(3,3,3,.10))!important;
  border-bottom:1px solid rgba(245,241,237,.07);
}

.top-tools{
  align-items:center;
  gap:13px;
}

.language-switch{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--tdr-line);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:var(--tdr-subtle);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.language-switch a{
  min-width:22px;
  padding-block:8px;
  text-align:center;
  color:var(--tdr-subtle);
}

.language-switch a[aria-current="true"]{
  color:var(--tdr-text);
}

.language-switch a:hover{
  color:#fff;
}

.desktop-nav{
  gap:clamp(20px,2.3vw,34px)!important;
}

.desktop-nav a{
  position:relative;
  padding:11px 0;
  font-size:10px!important;
  letter-spacing:.09em!important;
  color:rgba(245,241,237,.70)!important;
}

.desktop-nav a:after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:3px;
  height:2px;
  background:linear-gradient(90deg,var(--tdr-red),var(--tdr-gold));
  transition:right .2s ease;
}

.desktop-nav a:hover:after,
.desktop-nav a[aria-current="page"]:after{
  right:0;
}

.desktop-nav a[aria-current="page"]{
  color:#fff!important;
}

.menu-btn,
.close-btn{
  border-color:var(--tdr-line)!important;
  background:rgba(255,255,255,.035)!important;
}

.menu-btn:hover,
.close-btn:hover{
  border-color:rgba(201,21,39,.75)!important;
}

.overlay-languages{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.overlay-languages a{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  border:1px solid var(--tdr-line);
  border-radius:999px;
  color:var(--tdr-muted);
  font-size:12px;
  font-weight:700;
}

.overlay-languages a[aria-current="true"]{
  border-color:rgba(201,21,39,.68);
  background:rgba(201,21,39,.13);
  color:#fff;
}

.skip-link{
  padding:11px 16px!important;
  border-radius:var(--tdr-radius-sm)!important;
  background:#fff!important;
  color:#050505!important;
  font-weight:800;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--tdr-focus)!important;
  outline-offset:4px!important;
}

button:disabled,
.btn:disabled,
.simple-btn:disabled,
[aria-disabled="true"]{
  cursor:not-allowed!important;
  opacity:.42!important;
  transform:none!important;
  box-shadow:none!important;
}

.simple-home .simple-section{
  padding-top:clamp(68px,7.5vw,108px)!important;
  padding-bottom:clamp(68px,7.5vw,108px)!important;
}

.simple-home .simple-head{
  margin-bottom:clamp(28px,4vw,48px)!important;
}

.simple-home .simple-head h2{
  max-width:12ch;
  text-wrap:balance;
}

.simple-home .simple-head p,
.simple-home .simple-panel p,
.artist-card-simple p,
.release-card-simple p,
.merch-card-simple p{
  color:var(--tdr-muted)!important;
}

.simple-home .simple-btn{
  min-height:52px!important;
  border-radius:999px!important;
  padding-inline:22px!important;
}

.simple-home .simple-btn.primary{
  background:linear-gradient(180deg,var(--tdr-red-hover),var(--tdr-red-active))!important;
  border-color:rgba(225,29,50,.82)!important;
  color:#fff!important;
}

.simple-home .simple-btn.primary:hover{
  background:linear-gradient(180deg,#ed2740,#b70f22)!important;
}

.simple-home .simple-btn:not(.primary){
  background:rgba(255,255,255,.035)!important;
  border-color:var(--tdr-line-strong)!important;
  color:var(--tdr-text)!important;
}

.hero-release-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-top:20px;
  color:rgba(245,241,237,.72);
  font-size:12px;
}

.hero-release-note span{
  color:var(--tdr-gold);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-release-note strong{
  color:#fff;
  font-weight:700;
}

.section-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.section-text-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.section-text-link:after{
  content:"→";
  color:var(--tdr-red);
}

.release-card-simple,
.artist-card-simple,
.merch-card-simple,
.follow-card,
.contact-card,
.simple-panel{
  border-radius:var(--tdr-radius-md)!important;
}

.release-card-simple,
.artist-card-simple,
.merch-card-simple{
  box-shadow:var(--tdr-shadow-sm)!important;
}

.release-card-play{
  min-height:44px!important;
}

.more-release-note{
  margin-top:14px;
}

.partner-panel{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,6vw,84px);
  align-items:center;
  padding:clamp(26px,5vw,54px);
  border:1px solid var(--tdr-line);
  border-radius:var(--tdr-radius-lg);
  background:
    linear-gradient(115deg,rgba(201,21,39,.09),transparent 52%),
    rgba(255,255,255,.025);
  box-shadow:var(--tdr-shadow-lg);
}

.partner-panel h3{
  margin:0;
  max-width:12ch;
  color:#fff;
  font-size:clamp(30px,4.6vw,58px);
  font-weight:800;
  line-height:1.14;
  text-wrap:balance;
}

.partner-panel p{
  margin-top:17px;
  max-width:46rem;
  color:var(--tdr-muted);
  line-height:1.82;
}

.partner-list{
  display:grid;
  gap:10px;
}

.partner-list div{
  padding:16px 18px;
  border:1px solid rgba(245,241,237,.11);
  border-radius:var(--tdr-radius-sm);
  background:rgba(255,255,255,.025);
}

.partner-list strong{
  display:block;
  color:var(--tdr-gold);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.partner-list span{
  display:block;
  margin-top:5px;
  color:var(--tdr-muted);
  font-size:14px;
  line-height:1.65;
}

.contact-card,
.follow-card,
.link-hub-card{
  min-height:132px;
}

.contact-grid-after-partner{
  margin-top:18px;
}

.contact-card strong{
  overflow-wrap:anywhere;
}

.section,
.simple-section{
  content-visibility:auto;
  contain-intrinsic-size:800px;
}

.simple-hero,
.page-hero{
  content-visibility:visible;
  contain-intrinsic-size:auto;
}

.site-footer{
  border-top:1px solid rgba(245,241,237,.08);
}

.studio-language-group{
  margin-top:20px;
  padding:18px;
  border:1px solid rgba(199,164,107,.28);
  border-radius:18px;
  background:rgba(199,164,107,.035);
}

.studio-language-label{
  color:var(--tdr-gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:899px){
  html{
    scroll-padding-top:76px;
  }

  .topbar{
    height:68px!important;
    padding-inline:20px!important;
  }

  .language-switch{
    min-height:34px;
    padding-inline:9px;
  }

  .language-switch span{
    display:none;
  }

  .menu-btn{
    width:38px!important;
    height:38px!important;
  }

  .simple-home .simple-actions{
    grid-template-columns:1fr!important;
  }

  .simple-home .simple-btn{
    width:100%!important;
  }

  .partner-panel{
    grid-template-columns:1fr;
    border-radius:24px;
  }

  .partner-panel h3{
    max-width:16ch;
  }

  .section-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .section-text-link{
    width:100%;
  }

  .overlay-languages{
    margin-top:20px;
  }
}

@media (max-width:360px){
  .topbar{
    padding-inline:16px!important;
  }

  .language-switch{
    gap:3px;
    padding-inline:6px;
  }

  .simple-home .simple-section{
    padding-inline:18px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto!important;
  }

  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}