/* ════════════════════════════════════════════════════════════════
   SIMPLIFIED CHINESE  (html[lang="zh-Hans"])
   Loaded after /style.css. Only overrides what Latin-tuned rules break.
════════════════════════════════════════════════════════════════ */

/* Bebas Neue stays FIRST in the head stack on purpose. It has no CJK glyphs, so
   Latin and digits keep the brand's condensed display look ("2024", "100+", YKA)
   while Chinese falls through per glyph to the serif. Putting the CJK face first
   would flatten every number on the site. */
html[lang="zh-Hans"] {
  --font-head: 'Bebas Neue', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif;
  --font-body: 'DM Sans', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

html[lang="zh-Hans"] body {
  font-family: var(--font-body);
  line-height: 1.9;              /* CJK needs more leading than the Latin 1.75 */
  line-break: strict;            /* keeps 。、）from starting a line */
  overflow-wrap: break-word;
}

/* The Latin design leans on negative tracking. On Han characters that overlaps
   strokes and reads as a rendering fault, so it is zeroed everywhere it is set. */
html[lang="zh-Hans"] h1,
html[lang="zh-Hans"] h2,
html[lang="zh-Hans"] h3,
html[lang="zh-Hans"] .hero-content h1,
html[lang="zh-Hans"] .section-headline,
html[lang="zh-Hans"] .work-title,
html[lang="zh-Hans"] .about-h2-top,
html[lang="zh-Hans"] .about-h2-bottom,
html[lang="zh-Hans"] .note-line,
html[lang="zh-Hans"] .project-title,
html[lang="zh-Hans"] .hero-secondary,
html[lang="zh-Hans"] .footer-copy,
html[lang="zh-Hans"] .nav-cta,
html[lang="zh-Hans"] .btn-gold,
html[lang="zh-Hans"] .btn-outline-dim,
html[lang="zh-Hans"] .btn-outline-gold,
html[lang="zh-Hans"] .contact-btn {
  letter-spacing: 0 !important;
}

/* Eyebrow labels keep a little tracking. On CJK a small positive value reads as
   deliberate spacing rather than the negative Latin default. */
html[lang="zh-Hans"] .section-label span,
html[lang="zh-Hans"] .stat-label,
html[lang="zh-Hans"] .work-role,
html[lang="zh-Hans"] .block-label,
html[lang="zh-Hans"] .pill {
  letter-spacing: 0.08em;
}

/* Display sizes: Han glyphs are dense squares and carry far more visual weight
   per character than Latin, so headline sizes come down and leading opens up.
   Latin headings at line-height 0.9 would clip the top of 优 and 阿. */
html[lang="zh-Hans"] .hero-content h1 {
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.2;
  font-weight: 700;
}
html[lang="zh-Hans"] .section-headline {
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.3;
  font-weight: 600;
}
html[lang="zh-Hans"] .about-h2-top,
html[lang="zh-Hans"] .about-h2-bottom {
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.3;
  font-weight: 600;
}
html[lang="zh-Hans"] .work-title {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 600;
}
html[lang="zh-Hans"] .hero-sub {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0;
}
html[lang="zh-Hans"] .section-sub {
  line-height: 1.9;
  max-width: 720px;
  text-wrap: pretty;
}

/* Pure-Latin marks stay in the Latin faces: the wordmark, the stat numerals,
   the handwritten signature, and video URLs. */
html[lang="zh-Hans"] .nav-logo,
html[lang="zh-Hans"] .footer-logo,
html[lang="zh-Hans"] .stat-num {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
}
html[lang="zh-Hans"] .film-url {
  font-family: var(--font-body);
}

/* The outlined headline treatment is tuned for thin Latin strokes. Han glyphs
   have far more internal detail, so the stroke needs weight to stay visible. */
html[lang="zh-Hans"] .h1-outline {
  -webkit-text-stroke: 1.5px var(--white);
}

/* Keep the gold accent dot glued to the end of the line. */
html[lang="zh-Hans"] .h1-line .gold,
html[lang="zh-Hans"] .section-headline .gold,
html[lang="zh-Hans"] .showreel-headline .gold {
  display: inline-block;
  margin-inline-start: 2px;
  vertical-align: baseline;
}

/* ── Language switcher ─────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline: 6px;
}
.lang-switch .lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 999px;
  color: var(--gold);
  font-family: 'DM Sans', 'Noto Sans SC', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lang-switch .lang-opt:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.lang-switch .lang-opt.is-current {
  background: rgba(201, 168, 76, 0.16);
  border-color: var(--gold);
  cursor: default;
}
/* Below 768px the nav collapses to the hamburger drawer, which carries the
   language options. Matches how the original two-way toggle behaved. */
@media (max-width: 768px) {
  .lang-switch { display: none; }
}

/* ── Arabic film title ──────────────────────────────────────────
   Arabic script is cursive: adjacent letters join with connecting strokes.
   Any letter-spacing pulls those joins apart, so the word stops reading as one
   connected shape. .illicit-ar-title carried 0.02em from the Latin design,
   which is what made ابعد الحلال look broken. It also sat at line-height 1,
   clipping 13px of descender off the final ل.

   This element carries lang="ar" but lives inside the English and Chinese pages
   as well, where the [dir="rtl"] rules in /style.css never reach it, so the same
   block is appended to en.css and zh.css. */
.illicit-ar-title,
[lang="ar"]:not(html) {
  letter-spacing: normal !important;
}
.illicit-ar-title {
  line-height: 1.45;
  padding-bottom: 0.08em;
}

/* Reem Kufi is a geometric Kufi face. On this particular string it compresses
   ح ل ا ل into a single unreadable block, which is what made the title look
   broken. Amiri is a classical naskh with the same high-contrast calligraphic
   character as Playfair Display next to it, and it renders ابعد الحلال cleanly. */
.illicit-ar-title {
  font-family: 'Amiri', 'Tajawal', serif !important;
  font-weight: 700;
  line-height: 1.6;   /* Amiri sits taller than Reem Kufi; 1.45 still clipped 3px */
}