/* Final typography normalization */
:root {
  --site-font: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--site-font) !important;
}

body,
body * {
  font-family: var(--site-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
summary,
label,
select,
small,
span,
b,
strong,
em,
.eyebrow,
.nav-direct,
.nav-group summary,
.lesson-menu-title,
.hero-title,
.hero-copy,
.section-heading,
.artist-card,
.artist-panel,
.mixset-copy,
.compilation-info,
.lesson-step-card,
.lesson-roster-heading,
.lesson-instructor,
.contact-direct,
.contact-action {
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
.hero-title,
.academy-page .academy-page-hero h1,
.academy-page .lesson-page-intro h2,
.academy-page .academy-section-heading h2,
.contact-direct h3 {
  font-family: var(--site-font) !important;
  font-weight: 900;
  letter-spacing: 0 !important;
}

h1,
.hero-title,
.academy-page .academy-page-hero h1 {
  line-height: 0.92;
}

h2,
.academy-page .lesson-page-intro h2,
.academy-page .academy-section-heading h2 {
  line-height: 0.98;
}

h3,
.lesson-step-card h3,
.contact-direct h3 {
  line-height: 1.06;
}

p,
.hero-copy,
.about-copy p,
.academy-page .academy-page-hero p,
.academy-page .lesson-page-intro p,
.academy-page .academy-section-heading p,
.contact-direct p {
  font-weight: 500;
  word-break: keep-all;
}

.eyebrow,
.nav-direct,
.nav-group summary,
.lesson-menu-title,
.language-select,
.academy-hero-actions a,
.lesson-jump-row a,
.lesson-roster-heading span,
.lesson-instructor b,
.contact-action {
  font-weight: 800;
  text-transform: uppercase;
}

.lesson-instructor span {
  font-family: var(--site-font) !important;
  font-weight: 900;
}

/* Final nav and language control alignment */
.main-nav .nav-summary-link {
  min-height: inherit;
  color: inherit;
  text-decoration: none;
}

.main-nav .nav-summary-link::after {
  display: none !important;
}

.nav-group summary {
  gap: 8px;
}

.header-tools {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.language-control {
  position: relative;
  height: 36px;
  display: inline-flex;
  align-items: center;
}

.language-select {
  width: 108px;
  height: 36px;
  min-height: 36px;
  max-width: none;
  padding: 0 28px 0 12px;
  border-color: rgba(246, 242, 234, 0.24);
  border-radius: 6px;
  background: rgba(5, 5, 5, 0.92);
  color: rgba(246, 242, 234, 0.94);
  line-height: 36px;
}

@media (max-width: 820px) {
  .header-tools {
    min-height: 62px;
  }

  .language-control {
    height: 28px;
  }

  .language-control::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid rgba(246, 242, 234, 0.78);
    border-bottom: 1.5px solid rgba(246, 242, 234, 0.78);
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
  }

  .language-select {
    width: 66px;
    height: 28px;
    min-height: 28px;
    padding: 0 14px 0 0;
    border: 0;
    border-bottom: 1px solid rgba(246, 242, 234, 0.42);
    border-radius: 0;
    background: transparent;
    color: rgba(246, 242, 234, 0.96);
    font-size: 0.64rem;
    line-height: 28px;
  }
}

/* Mobile polish for header controls and mixset titles */
@media (max-width: 820px) {
  .header-tools {
    align-self: center;
    padding-left: 4px;
  }

  .language-select {
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
  }

  .mixset-copy {
    min-height: 92px;
    align-content: start;
  }

  .mixset-copy h3 {
    min-height: 2em;
    display: grid;
    gap: 0;
    line-height: 0.96;
  }

  .mixset-copy h3 span {
    display: block;
  }
}

@media (max-width: 460px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .header-tools {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-height: 62px;
  }

  .language-control {
    height: 26px;
  }

  .language-control::after {
    right: 1px;
    width: 5px;
    height: 5px;
  }

  .language-select {
    width: 60px;
    height: 26px;
    min-height: 26px;
    padding-right: 8px;
    font-size: 0.58rem;
    line-height: 26px;
  }
}

/* Final contents title correction */
.mixset-copy h3,
.mixset-copy h3 span {
  color: #fff !important;
}

.mixset-copy h3 span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-transform: none !important;
}

@media (max-width: 820px) {
  .mixset-copy {
    width: 100%;
    min-height: 0;
    align-content: start;
  }

  .mixset-copy h3 {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    display: grid;
    gap: 0;
    color: #fff !important;
    font-size: clamp(2.15rem, 11.5vw, 3.65rem);
    line-height: 0.94;
  }

  .mixset-copy h3 span {
    display: block;
    width: 100%;
    color: #fff !important;
  }
}

/* Mixset cards: keep artist name and Mixset on one line */
.mixset-copy h3 {
  white-space: nowrap !important;
}

.mixset-copy h3 span {
  display: inline !important;
  width: auto !important;
}

@media (max-width: 820px) {
  .play-label {
    display: none !important;
  }

  .mixset-copy h3 {
    display: block !important;
    white-space: nowrap !important;
    font-size: clamp(2.1rem, 10.2vw, 3.15rem) !important;
    line-height: 0.96 !important;
  }

  .mixset-copy h3 span {
    display: inline !important;
    width: auto !important;
  }
}

@media (max-width: 390px) {
  .mixset-copy h3 {
    font-size: clamp(1.9rem, 9.4vw, 2.55rem) !important;
  }
}

/* Mobile reading polish */
@media (max-width: 640px) {
  .site-header {
    gap: 8px !important;
    min-height: 58px !important;
    padding-inline: 10px !important;
  }

  .brand {
    width: 76px !important;
    height: 40px !important;
  }

  .main-nav {
    gap: 7px !important;
    font-size: clamp(0.48rem, 1.65vw, 0.58rem) !important;
    line-height: 1 !important;
  }

  .main-nav a,
  .main-nav summary {
    min-height: 58px !important;
  }

  .header-tools {
    min-height: 58px !important;
    padding-left: 0 !important;
  }

  .language-control {
    height: 24px !important;
  }

  .language-select {
    width: 54px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding-right: 10px !important;
    font-size: 0.54rem !important;
    line-height: 24px !important;
  }

  .language-control::after {
    right: 0 !important;
    width: 5px !important;
    height: 5px !important;
  }

  #about.split {
    padding-top: clamp(86px, 22vw, 112px) !important;
    padding-bottom: clamp(58px, 16vw, 84px) !important;
  }

  #about .about-body {
    width: min(100%, 340px) !important;
    gap: 24px !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  #about .eyebrow {
    margin-bottom: 4px !important;
    font-size: 0.76rem !important;
  }

  #about .about-copy {
    width: 100% !important;
    gap: 22px !important;
  }

  #about .about-copy br {
    display: none !important;
  }

  #about .about-copy p {
    width: 100% !important;
    max-width: 320px !important;
    margin-inline: auto !important;
    color: rgba(246, 242, 234, 0.76) !important;
    font-size: clamp(0.84rem, 3.75vw, 0.95rem) !important;
    font-weight: 600 !important;
    line-height: 1.86 !important;
    text-align: center !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  #about .about-copy strong {
    display: inline !important;
    color: #fff !important;
    font-size: 1.02em !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 390px) {
  .brand {
    width: 70px !important;
  }

  .main-nav {
    gap: 6px !important;
    font-size: 0.47rem !important;
  }

  #about .about-body {
    width: min(100%, 316px) !important;
  }

  #about .about-copy p {
    max-width: 300px !important;
    font-size: 0.84rem !important;
    line-height: 1.82 !important;
  }
}