/**
 * jbc.nyc — typographic corrections per script.
 *
 * The site's Latin styling leans on three things that are actively wrong for
 * the other scripts: wide positive tracking on uppercase labels, an 0.93
 * line-height on a very large display face, and pills sized against short
 * English words.
 *
 * The blanket letter-spacing reset lives in assets/generated.css, written from
 * site.json. This file is only the corrections that need to know JBC's own
 * class names. Anything here that restores tracking MUST match the blanket's
 * specificity (html[data-script=…] body *) or it silently loses — that mistake
 * has been made once already on boalabs and cost an afternoon.
 */

/* ── display headline ─────────────────────────────────────────────────────
   .jbc-headline runs clamp(48px,6.5vw,116px) at line-height .93. That leading
   is built for Latin caps with no ascender stack above them. */
html[data-script="hans"] .jbc-headline,
html[data-script="jpan"] .jbc-headline,
html[data-script="hang"] .jbc-headline { line-height: 1.12; }

/* Devanagari needs the most room of anything here: matras sit above the
   headstroke and the conjunct stack hangs below it, so .93 collides on both
   sides at once. */
html[data-script="deva"] .jbc-headline { line-height: 1.4; }
html[data-script="deva"] .jbc-quote blockquote { line-height: 1.45; }

/* Arabic sits on a baseline with deep descenders and tall ascenders and reads
   badly at display size with tight leading. */
html[data-script="arab"] .jbc-headline { line-height: 1.35; }
html[data-script="arab"] .jbc-quote blockquote { line-height: 1.4; }

html[data-script="hans"] .jbc-quote blockquote,
html[data-script="jpan"] .jbc-quote blockquote,
html[data-script="hang"] .jbc-quote blockquote { line-height: 1.3; }

/* ── headline size ────────────────────────────────────────────────────────
   German runs ~30% longer than English and the statement headline is already
   a full sentence. Trim the top of the clamp, never the bottom: small screens
   are fluid and were never the problem. */
html[lang="de"] .jbc-statement .jbc-headline,
html[lang="fr"] .jbc-statement .jbc-headline,
html[lang="es"] .jbc-statement .jbc-headline { font-size: clamp(36px, 5.1vw, 82px); }
html[lang="de"] .jbc-closing .jbc-headline { font-size: clamp(42px, 5.6vw, 96px); }

/* CJK is denser per character and can carry the full size back. */
html[data-script="hans"] .jbc-statement .jbc-headline,
html[data-script="jpan"] .jbc-statement .jbc-headline,
html[data-script="hang"] .jbc-statement .jbc-headline { font-size: clamp(38px, 5.6vw, 94px); }
html[data-script="deva"] .jbc-statement .jbc-headline { font-size: clamp(32px, 4.4vw, 70px); }
html[data-script="arab"] .jbc-statement .jbc-headline { font-size: clamp(34px, 4.8vw, 78px); }

/* ── small uppercase labels ───────────────────────────────────────────────
   .jbc-eyebrow is 12px with .18em tracking and uppercase. Once the blanket
   removes the tracking, a caseless script is left with a 12px label that has
   lost its only size cue, so give a little of it back as type size. */
html[data-script="hans"] .jbc-eyebrow, html[data-script="jpan"] .jbc-eyebrow,
html[data-script="hang"] .jbc-eyebrow, html[data-script="deva"] .jbc-eyebrow,
html[data-script="arab"] .jbc-eyebrow { font-size: 13.5px; text-transform: none; }

html[data-script="hans"] .jbc-card__caption, html[data-script="jpan"] .jbc-card__caption,
html[data-script="hang"] .jbc-card__caption, html[data-script="deva"] .jbc-card__caption,
html[data-script="arab"] .jbc-card__caption { text-transform: none; }

/* ── article image captions ───────────────────────────────────────────────
   style.css sets text-transform on these three with !important, so the
   blanket reset in generated.css loses no matter what its specificity is —
   !important beats specificity outright. Matching !important is the only
   lever available, and it is used here rather than in the blanket because
   this is the one place on the site that needs it.

   The visible symptom was Japanese and Arabic captions rendering the Latin
   names inside them in caps — "BEYONCÉ のスタイリスト TY HUNTER" — which is
   correct styling for a Latin caption and wrong for a mixed-script one. */
html[data-script="hans"] .jbc-article__featured-img figcaption,
html[data-script="jpan"] .jbc-article__featured-img figcaption,
html[data-script="hang"] .jbc-article__featured-img figcaption,
html[data-script="deva"] .jbc-article__featured-img figcaption,
html[data-script="arab"] .jbc-article__featured-img figcaption,
html[data-script="hans"] .jbc-article__body figure figcaption,
html[data-script="jpan"] .jbc-article__body figure figcaption,
html[data-script="hang"] .jbc-article__body figure figcaption,
html[data-script="deva"] .jbc-article__body figure figcaption,
html[data-script="arab"] .jbc-article__body figure figcaption,
html[data-script="hans"] .jbc-article__body .wp-caption-text,
html[data-script="jpan"] .jbc-article__body .wp-caption-text,
html[data-script="hang"] .jbc-article__body .wp-caption-text,
html[data-script="deva"] .jbc-article__body .wp-caption-text,
html[data-script="arab"] .jbc-article__body .wp-caption-text {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── body copy ────────────────────────────────────────────────────────────
   CJK, Devanagari and Arabic all want more leading than a Latin 1.8. */
html[data-script="hans"] .jbc-bio__content p,
html[data-script="jpan"] .jbc-bio__content p,
html[data-script="hang"] .jbc-bio__content p { line-height: 1.95; }
html[data-script="deva"] .jbc-bio__content p { line-height: 2.05; }
html[data-script="arab"] .jbc-bio__content p { line-height: 2.0; font-size: clamp(17px,1.6vw,22px); }

/* ── the pill ─────────────────────────────────────────────────────────────
   .jbc-btn is a fixed-radius pill at 12px/.14em uppercase, measured against
   "Enter". "Zum Archiv" and "アーカイブへ" are both wider than that. */
html:not([lang="en"]) .jbc-btn { white-space: normal; text-align: center; line-height: 1.3; }
html[data-script="hans"] .jbc-btn, html[data-script="jpan"] .jbc-btn,
html[data-script="hang"] .jbc-btn, html[data-script="deva"] .jbc-btn,
html[data-script="arab"] .jbc-btn { text-transform: none; font-size: 13px; }

/* ── the wordmark ─────────────────────────────────────────────────────────
   JBC is Latin whatever the page language, so it keeps its tracking. Restored
   after the blanket rather than exempted from it, and the `body` in the
   selector is load-bearing: the blanket carries an attribute AND an element,
   so a restore written without both loses on specificity and does nothing. */
html[data-script="hans"] body .jbc-nav__mark, html[data-script="jpan"] body .jbc-nav__mark,
html[data-script="hang"] body .jbc-nav__mark, html[data-script="deva"] body .jbc-nav__mark,
html[data-script="arab"] body .jbc-nav__mark { letter-spacing: .08em; }
html[data-script="hans"] body .jbc-footer p:first-child,
html[data-script="jpan"] body .jbc-footer p:first-child,
html[data-script="hang"] body .jbc-footer p:first-child,
html[data-script="deva"] body .jbc-footer p:first-child,
html[data-script="arab"] body .jbc-footer p:first-child { letter-spacing: .04em; }

/* ── the switcher, in JBC's palette ───────────────────────────────────────
   The homepage is dark and the interior pages are white, and the theme sets
   jbc-light / jbc-dark on <body> from a luminance calculation. Both cases get
   a control that reads as part of the page rather than pasted onto it. */
.bik-lang {
  --bik-sw-bg: rgba(13, 12, 10, .72);
  --bik-sw-fg: #f3eee6;
  --bik-sw-border: rgba(243, 238, 230, .28);
  --bik-sw-accent: #C8910A;
  font-family: var(--jbc-sans, "DM Sans", Helvetica, Arial, sans-serif);
}
body.jbc-light .bik-lang {
  --bik-sw-bg: rgba(255, 255, 255, .78);
  --bik-sw-fg: #0d0c0a;
  --bik-sw-border: rgba(13, 12, 10, .22);
}
.bik-lang option { color: #0d0c0a; background: #fff; }

/* The nav is fixed top-right and the footer sits under the switcher's corner.
   22px clears both on desktop; on a phone the footer is centred and taller. */
@media (max-width: 700px) {
  .bik-lang { --bik-sw-bottom: 16px; --bik-sw-right: 16px; }
}