/*
 * Fonts — keys set in public/js/site-font-setting.js on <html> as data-title-font, data-heading-font, data-body-font.
 * Local stems (files in public/fonts/wordmark/): cabin | barlow | d_din | barlow_condensed | active | space-grotesk | ibm-plex-mono
 *   Barlow: static TTFs Barlow-Regular|Medium|SemiBold|Bold.ttf
 *   IBM Plex Mono: IBMPlexMono-Regular|Medium|SemiBold|Bold.ttf
 * No files needed: dm-sans | syne (Google Fonts, already linked in each HTML page)
 *   --font-title   → hub .wordmark + bio .eyebrow.eyebrow-name (“NoTell”)
 *   --font-heading → h1–h6 except .wordmark (e.g. “Bio”, “Music”)
 *   --font-body    → paragraphs, nav, buttons, footer, etc.
 * URLs are relative to this file (/css/) → ../fonts/wordmark/
 * Load after hero-bg.css (and after audio-controls.css on music/player).
 */

@font-face {
  font-family: "NT Wordmark Cabin";
  src:
    url("../fonts/wordmark/cabin.woff2") format("woff2"),
    url("../fonts/wordmark/cabin.woff") format("woff"),
    url("../fonts/wordmark/cabin.otf") format("opentype"),
    url("../fonts/wordmark/cabin.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Barlow";
  src: url("../fonts/wordmark/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Barlow";
  src: url("../fonts/wordmark/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Barlow";
  src: url("../fonts/wordmark/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Barlow";
  src: url("../fonts/wordmark/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark IBM Plex Mono";
  src: url("../fonts/wordmark/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark IBM Plex Mono";
  src: url("../fonts/wordmark/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark IBM Plex Mono";
  src: url("../fonts/wordmark/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark IBM Plex Mono";
  src: url("../fonts/wordmark/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark DDIN";
  src:
    url("../fonts/wordmark/d_din.woff2") format("woff2"),
    url("../fonts/wordmark/d_din.woff") format("woff"),
    url("../fonts/wordmark/d_din.otf") format("opentype"),
    url("../fonts/wordmark/d_din.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Barlow Condensed";
  src:
    url("../fonts/wordmark/barlow_condensed.woff2") format("woff2"),
    url("../fonts/wordmark/barlow_condensed.woff") format("woff"),
    url("../fonts/wordmark/barlow_condensed.otf") format("opentype"),
    url("../fonts/wordmark/barlow_condensed.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/*
 * Drop-in / single TTF files often have one OS/2 weight (e.g. 600). Browsers match requested
 * font-weight to @font-face — one block with font-weight 400 900 can fail for body (400),
 * so the same file is registered for several weights (synthesis still ok for small gaps).
 */
@font-face {
  font-family: "NT Wordmark Active";
  src:
    url("../fonts/wordmark/active.woff2") format("woff2"),
    url("../fonts/wordmark/active.woff") format("woff"),
    url("../fonts/wordmark/active.otf") format("opentype"),
    url("../fonts/wordmark/active.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Active";
  src:
    url("../fonts/wordmark/active.woff2") format("woff2"),
    url("../fonts/wordmark/active.woff") format("woff"),
    url("../fonts/wordmark/active.otf") format("opentype"),
    url("../fonts/wordmark/active.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Active";
  src:
    url("../fonts/wordmark/active.woff2") format("woff2"),
    url("../fonts/wordmark/active.woff") format("woff"),
    url("../fonts/wordmark/active.otf") format("opentype"),
    url("../fonts/wordmark/active.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Active";
  src:
    url("../fonts/wordmark/active.woff2") format("woff2"),
    url("../fonts/wordmark/active.woff") format("woff"),
    url("../fonts/wordmark/active.otf") format("opentype"),
    url("../fonts/wordmark/active.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* space-grotesk.ttf here is usWeightClass 600 — multi-weight rows so 400 / 700 / 800 UI still match */
@font-face {
  font-family: "NT Wordmark Space Grotesk";
  src:
    url("../fonts/wordmark/space-grotesk.ttf") format("truetype"),
    url("../fonts/wordmark/space-grotesk.woff2") format("woff2"),
    url("../fonts/wordmark/space-grotesk.woff") format("woff"),
    url("../fonts/wordmark/space-grotesk.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Space Grotesk";
  src:
    url("../fonts/wordmark/space-grotesk.ttf") format("truetype"),
    url("../fonts/wordmark/space-grotesk.woff2") format("woff2"),
    url("../fonts/wordmark/space-grotesk.woff") format("woff"),
    url("../fonts/wordmark/space-grotesk.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Space Grotesk";
  src:
    url("../fonts/wordmark/space-grotesk.ttf") format("truetype"),
    url("../fonts/wordmark/space-grotesk.woff2") format("woff2"),
    url("../fonts/wordmark/space-grotesk.woff") format("woff"),
    url("../fonts/wordmark/space-grotesk.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NT Wordmark Space Grotesk";
  src:
    url("../fonts/wordmark/space-grotesk.ttf") format("truetype"),
    url("../fonts/wordmark/space-grotesk.woff2") format("woff2"),
    url("../fonts/wordmark/space-grotesk.woff") format("woff"),
    url("../fonts/wordmark/space-grotesk.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

html {
  --font-title: "DM Sans", system-ui, sans-serif;
  --font-heading: "DM Sans", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

html[data-title-font="dm-sans"] {
  --font-title: "DM Sans", system-ui, sans-serif;
}

html[data-title-font="syne"] {
  --font-title: "Syne", system-ui, sans-serif;
}

html[data-heading-font="dm-sans"] {
  --font-heading: "DM Sans", system-ui, sans-serif;
}

html[data-heading-font="syne"] {
  --font-heading: "Syne", system-ui, sans-serif;
}

html[data-body-font="dm-sans"] {
  --font-body: "DM Sans", system-ui, sans-serif;
}

html[data-body-font="syne"] {
  --font-body: "Syne", system-ui, sans-serif;
}

html[data-title-font="cabin"] {
  --font-title: "NT Wordmark Cabin", system-ui, sans-serif;
}

html[data-title-font="barlow"] {
  --font-title: "NT Wordmark Barlow", system-ui, sans-serif;
}

html[data-title-font="d_din"] {
  --font-title: "NT Wordmark DDIN", system-ui, sans-serif;
}

html[data-title-font="barlow_condensed"] {
  --font-title: "NT Wordmark Barlow Condensed", system-ui, sans-serif;
}

html[data-title-font="active"] {
  --font-title: "NT Wordmark Active", system-ui, sans-serif;
}

html[data-title-font="space-grotesk"] {
  --font-title: "NT Wordmark Space Grotesk", system-ui, sans-serif;
}

html[data-title-font="ibm-plex-mono"] {
  --font-title: "NT Wordmark IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}

html[data-heading-font="cabin"] {
  --font-heading: "NT Wordmark Cabin", system-ui, sans-serif;
}

html[data-heading-font="barlow"] {
  --font-heading: "NT Wordmark Barlow", system-ui, sans-serif;
}

html[data-heading-font="d_din"] {
  --font-heading: "NT Wordmark DDIN", system-ui, sans-serif;
}

html[data-heading-font="barlow_condensed"] {
  --font-heading: "NT Wordmark Barlow Condensed", system-ui, sans-serif;
}

html[data-heading-font="active"] {
  --font-heading: "NT Wordmark Active", system-ui, sans-serif;
}

html[data-heading-font="space-grotesk"] {
  --font-heading: "NT Wordmark Space Grotesk", system-ui, sans-serif;
}

html[data-heading-font="ibm-plex-mono"] {
  --font-heading: "NT Wordmark IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}

html[data-body-font="cabin"] {
  --font-body: "NT Wordmark Cabin", system-ui, sans-serif;
}

html[data-body-font="barlow"] {
  --font-body: "NT Wordmark Barlow", system-ui, sans-serif;
}

html[data-body-font="d_din"] {
  --font-body: "NT Wordmark DDIN", system-ui, sans-serif;
}

html[data-body-font="barlow_condensed"] {
  --font-body: "NT Wordmark Barlow Condensed", system-ui, sans-serif;
}

html[data-body-font="active"] {
  --font-body: "NT Wordmark Active", system-ui, sans-serif;
}

html[data-body-font="space-grotesk"] {
  --font-body: "NT Wordmark Space Grotesk", system-ui, sans-serif;
}

html[data-body-font="ibm-plex-mono"] {
  --font-body: "NT Wordmark IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
}

/* Main “NoTell” lockup (hub) + bio name line */
.wordmark,
.eyebrow.eyebrow-name {
  font-family: var(--font-title), "DM Sans", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-body), "DM Sans", system-ui, -apple-system, sans-serif;
}

/* Section / page titles — not the hub wordmark */
body :where(h1, h2, h3, h4, h5, h6):not(.wordmark) {
  font-family: var(--font-heading), "DM Sans", system-ui, -apple-system, sans-serif;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

body.sector-music,
body.sector-social,
body.sector-bio {
  font-family: var(--font-body), "DM Sans", system-ui, -apple-system, sans-serif;
}

body.sector-music :where(h1, h2, h3, h4, h5, h6):not(.wordmark),
body.sector-social :where(h1, h2, h3, h4, h5, h6):not(.wordmark),
body.sector-bio :where(h1, h2, h3, h4, h5, h6):not(.wordmark) {
  font-family: var(--font-heading), "DM Sans", system-ui, -apple-system, sans-serif;
}

/*
 * Weight trial presets (barlow or ibm-plex-mono when heading + body match).
 * "regular" 400; "medium" 500; "semibold" 600; "bold" 700 on most UI. regular/medium/semibold: strong/b → 700.
 * "natural" = page CSS weights. data-notell-weight-preset — see site-font-setting.js NOTELL_UI_WEIGHT_PRESET.
 */
html[data-notell-weight-preset="regular"][data-body-font="barlow"] body *:not(h1.wordmark, h1.wordmark *),
html[data-notell-weight-preset="regular"][data-body-font="ibm-plex-mono"] body *:not(h1.wordmark, h1.wordmark *) {
  font-weight: 400 !important;
}

html[data-notell-weight-preset="regular"][data-body-font="barlow"] body strong,
html[data-notell-weight-preset="regular"][data-body-font="barlow"] body b,
html[data-notell-weight-preset="regular"][data-body-font="ibm-plex-mono"] body strong,
html[data-notell-weight-preset="regular"][data-body-font="ibm-plex-mono"] body b {
  font-weight: 700 !important;
}

html[data-notell-weight-preset="medium"][data-body-font="barlow"] body *:not(h1.wordmark, h1.wordmark *),
html[data-notell-weight-preset="medium"][data-body-font="ibm-plex-mono"] body *:not(h1.wordmark, h1.wordmark *) {
  font-weight: 500 !important;
}

html[data-notell-weight-preset="medium"][data-body-font="barlow"] body strong,
html[data-notell-weight-preset="medium"][data-body-font="barlow"] body b,
html[data-notell-weight-preset="medium"][data-body-font="ibm-plex-mono"] body strong,
html[data-notell-weight-preset="medium"][data-body-font="ibm-plex-mono"] body b {
  font-weight: 700 !important;
}

html[data-notell-weight-preset="semibold"][data-body-font="barlow"] body *:not(h1.wordmark, h1.wordmark *),
html[data-notell-weight-preset="semibold"][data-body-font="ibm-plex-mono"] body *:not(h1.wordmark, h1.wordmark *) {
  font-weight: 600 !important;
}

html[data-notell-weight-preset="semibold"][data-body-font="barlow"] body strong,
html[data-notell-weight-preset="semibold"][data-body-font="barlow"] body b,
html[data-notell-weight-preset="semibold"][data-body-font="ibm-plex-mono"] body strong,
html[data-notell-weight-preset="semibold"][data-body-font="ibm-plex-mono"] body b {
  font-weight: 700 !important;
}

html[data-notell-weight-preset="bold"][data-body-font="barlow"] body *:not(h1.wordmark, h1.wordmark *),
html[data-notell-weight-preset="bold"][data-body-font="ibm-plex-mono"] body *:not(h1.wordmark, h1.wordmark *) {
  font-weight: 700 !important;
}