/* No Border Network — direction D, "Roster".
   Built against the Korean/SEA MCN house style: a full-viewport cinematic hero, poster
   type stacked and enormous, a ticker, and a talent grid. Where SOON builds its hero as a
   made collage, ours is a live wall of the vertical frames we publish — same intent, but
   it scales and moves instead of being a baked JPG.

   Two traps this project already hit, do not reintroduce:
   - anything carrying .wrap must use padding-block, never the padding shorthand
   - any <img> with a height attribute needs height:auto or it ignores aspect-ratio */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');
/* Pretendard — the de-facto Korean web font. Verified in use on phentertainment.co.kr (the
   agency Boss benchmarked) and standard across modern Korean product sites. SIL OFL, free for
   commercial use. Dynamic subset: the browser fetches only the glyph ranges a page actually
   uses, which matters because a full Hangul face is megabytes.
   ROOT CAUSE this fixes: --display (Anton) and --body (Archivo) are Latin-only and contain NO
   Hangul, so every Korean character was silently falling back to whatever the OS supplied. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  --ground: #08070A;
  --raise:  #131019;
  --paper:  #F5F2EC;
  --dim:    #8B8496;
  --hot:    #FF2D78;   /* the one loud colour; everything else stays quiet */
  --cool:   #1B34E8;   /* the brand blue, kept for colour blocks only */
  --hair:   rgba(245,242,236,0.14);

  --display: 'Anton', 'Helvetica Neue', sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, monospace;
  /* Korean stack: Pretendard first, then the platform Korean faces, matching what Korean sites
     actually ship. Apple SD Gothic Neo on macOS/iOS, Malgun Gothic on Windows. */
  --kr: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic',
        'Noto Sans KR', system-ui, sans-serif;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --max: 88rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--paper);
  font: 400 clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)/1.6 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }

/* ---------- chrome ----------------------------------------------------- */
.bar {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding-block: 1.5rem;
}
.mark {
  font: 400 1.125rem/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.mark::before {
  content: ''; width: 0.8rem; height: 0.8rem; background: var(--hot);
  /* a square with one corner opened: a border that doesn't close */
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 55%, 55% 100%, 0 100%);
}
nav { display: flex; gap: 1.75rem; }
nav a {
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav a:focus-visible { border-bottom-color: var(--hot); }
/* nav was never declared flex: the langsw span sat on a different baseline to the links and
   its active underline stretched the full span width instead of hugging the label. */
.bar nav { display: flex; align-items: center; gap: 1.5rem; }
.langsw {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-left: 1.25rem; border-left: 1px solid var(--hair);
}
.langsw a { opacity: 0.5; display: inline-block; }
.langsw a[aria-current="page"] { opacity: 1; border-bottom-color: var(--hot); }
@media (max-width: 40rem) { .langsw { padding-left: 0.85rem; gap: 0.4rem; } }

/* Hangul does not take the wide tracking or uppercase the Latin nav uses -- it renders as
   "크 리 에 이 터". Latin labels inside the switcher keep their original treatment. */
html[lang="ko"] .bar nav > a { letter-spacing: 0.01em; text-transform: none; font-size: 0.8125rem; }

/* ---------- hero: the wall --------------------------------------------- */
/* padding-block:0 is load-bearing: the generic `section` rule adds 8rem top and bottom,
   which inside a 100svh hero left a dead band under the headline. */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end; padding-block: 0;
}

.wall {
  position: absolute; inset: -12% -2%; z-index: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
@media (min-width: 48rem)  { .wall { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 80rem)  { .wall { grid-template-columns: repeat(6, 1fr); } }
.col { display: grid; gap: 0.75rem; align-content: start; animation: drift 46s linear infinite; }
.col:nth-child(even) { animation-direction: reverse; animation-duration: 58s; }
.col:nth-child(3n)   { animation-duration: 68s; }
.col img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* A colour block sits in the run of frames, the way SOON drops flat colour into its
   collage. It is a panel, not an image, so it costs nothing. */
.block { aspect-ratio: 9/16; background: var(--hot); }
.col:nth-child(3) .block { background: var(--cool); }
.col:nth-child(5) .block { background: var(--paper); }

/* the wall is scenery: it must never compete with the headline */
.veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--ground) 6%, rgba(8,7,10,0.80) 40%, rgba(8,7,10,0.52) 100%),
    linear-gradient(to right, var(--ground) 2%, rgba(8,7,10,0.35) 55%, rgba(8,7,10,0.7) 100%);
}
.heroInner { position: relative; z-index: 2; width: 100%; padding-block: 0 clamp(3rem, 7vw, 5.5rem); }

.kicker {
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hot); margin: 0 0 1.5rem;
}
.poster {
  font: 400 clamp(3rem, 1rem + 11vw, 10.5rem)/0.86 var(--display);
  letter-spacing: -0.01em; text-transform: uppercase; margin: 0; max-width: 15ch;
}
.poster em { font-style: normal; color: var(--hot); }
.heroInner .lede {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.5;
  max-width: 40ch; margin: 2rem 0 0; color: var(--dim);
}
.scroll {
  display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem;
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
.scroll::after { content: ''; width: 4.5rem; height: 1px; background: var(--hair); position: relative; }

/* ---------- ticker ----------------------------------------------------- */
.ticker { background: var(--hot); color: var(--ground); overflow: hidden; padding-block: 0.9rem; }
.ticker ul {
  display: flex; gap: 3.5rem; margin: 0; padding: 0; list-style: none; width: max-content;
  animation: slide 38s linear infinite;
}
.ticker li {
  font: 400 0.875rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; display: flex; align-items: center; gap: 3.5rem;
}
.ticker li::after { content: '◆'; font-size: 0.5rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections --------------------------------------------------- */
section { padding-block: clamp(4rem, 9vw, 8rem); }
.label {
  font: 500 0.75rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hot); margin: 0 0 1.5rem;
}
h2 {
  font: 400 clamp(2rem, 1.1rem + 3.4vw, 4.5rem)/0.94 var(--display);
  text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 1.5rem; max-width: 17ch;
}
h3 { font: 600 1.125rem/1.3 var(--body); margin: 0 0 0.4rem; }
p { margin: 0 0 1.1rem; max-width: 58ch; }
.muted { color: var(--dim); }
a { color: var(--hot); }

.two { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .two { grid-template-columns: 5fr 4fr; align-items: start; } }

/* ---------- roster ----------------------------------------------------- */
.roster { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 3rem; }
@media (min-width: 52rem) { .roster { grid-template-columns: repeat(4, 1fr); } }
.act { position: relative; overflow: hidden; background: var(--raise); display: block; }
.act img { width: 100%; aspect-ratio: 9/16; object-fit: cover; transition: transform 0.5s ease; }
.act:hover img, .act:focus-within img { transform: scale(1.04); }
.act figcaption {
  position: absolute; inset: auto 0 0; padding: 2.5rem 1rem 1rem;
  /* the tiles are bright at the bottom (pavement, shoes), so the scrim has to be
     genuinely dark under the text rather than a token fade */
  background: linear-gradient(to top, rgba(8,7,10,0.95) 0%, rgba(8,7,10,0.8) 45%, transparent 100%);
}
.act b { display: block; font: 400 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.act span {
  display: block; margin-top: 0.35rem;
  font: 400 0.6875rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}

/* faceless channels have no face to show, so their tile is typographic by nature */
.act.blank {
  aspect-ratio: 9/16; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.25rem; border: 1px solid var(--hair); background: var(--raise);
}
.act.blank .glyph {
  font: 400 clamp(2.5rem, 6vw, 4rem)/0.9 var(--display); color: var(--hot); text-transform: uppercase;
}
.act.blank .fc { position: static; padding: 0; background: none; }

/* ---------- offer ------------------------------------------------------ */
.offer { margin-top: 3rem; border-top: 1px solid var(--hair); }
.offer > div {
  display: grid; gap: 0.5rem 3rem; grid-template-columns: 1fr;
  padding-block: 1.75rem; border-bottom: 1px solid var(--hair);
  transition: background 0.2s ease;
}
@media (min-width: 52rem) { .offer > div { grid-template-columns: 7rem 15rem 1fr; align-items: baseline; } }
.offer .n { font: 500 0.75rem/1.9 var(--mono); color: var(--hot); }
.offer h3 { font: 400 1.375rem/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.offer p { margin: 0; color: var(--dim); }

/* ---------- figures ---------------------------------------------------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 3rem; }
.fig { padding-right: 1.5rem; }
.fig + .fig { border-left: 1px solid var(--hair); padding-left: 1.5rem; }
.fig b {
  display: block; font: 400 clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem)/1 var(--display);
  font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.fig span { display: block; margin-top: 0.4rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--dim); max-width: 24ch; }

/* ---------- doors ------------------------------------------------------ */
.doors { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 3rem; }
@media (min-width: 52rem) { .doors { grid-template-columns: 1fr 1fr; } }
.door {
  background: var(--ground); color: var(--paper); text-decoration: none; display: block;
  padding: clamp(2rem, 4vw, 3rem); transition: background 0.2s ease, color 0.2s ease;
}
.door:hover, .door:focus-visible { background: var(--hot); color: var(--ground); }
.door h3 { font: 400 1.5rem/1.1 var(--display); text-transform: uppercase; margin-bottom: 0.75rem; }
.door p { color: var(--dim); margin: 0; font-size: 0.9375rem; }
.door:hover p, .door:focus-visible p { color: rgba(8,7,10,0.78); }
.door .go {
  display: inline-block; margin-top: 1.5rem; color: var(--hot);
  font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.door:hover .go, .door:focus-visible .go { color: var(--ground); }

/* ---------- footer ----------------------------------------------------- */
footer { padding-block: 3rem 4rem; border-top: 1px solid var(--hair); font: 400 0.8125rem/1.7 var(--mono); color: var(--dim); }
footer .cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
footer a { color: var(--dim); text-decoration: none; display: block; }
footer a:hover { color: var(--hot); }
footer .legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }

.disclose { font: 400 0.75rem/1.5 var(--mono); color: var(--dim); margin-top: 1.5rem; max-width: 62ch; }

/* ---------- two audience tracks ----------------------------------------
   The offer list used to run brands and creators together, so "you" meant a brand
   in one row and a creator in the next. Split, labelled, and never interleaved. */
.tracks { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; margin-top: 3rem; }
@media (min-width: 62rem) { .tracks { grid-template-columns: 1fr 1fr; } }
.track { border-top: 2px solid var(--hot); padding-top: 1.5rem; }
.track > h3 {
  font: 400 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1 var(--display);
  text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 0.35rem;
}
.track > .who { font: 400 0.8125rem/1.5 var(--mono); color: var(--dim); margin: 0 0 2rem; }
.track dl { margin: 0; }
.track dt {
  font: 400 1.125rem/1.25 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--hair);
}
.track dl > dt:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.track dd { margin: 0.5rem 0 0; color: var(--dim); font-size: 0.9375rem; max-width: 38ch; }

/* ---------- forms ------------------------------------------------------
   D's ground is near-black, so every control needs its own colours. The paper
   directions got this wrong once and shipped an invisible ink-on-ink form. */
form { max-width: 40rem; }
.field { margin-bottom: 1.5rem; }
label {
  display: block; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 0.6rem;
}
input, textarea, select {
  width: 100%; font: 400 1rem/1.5 var(--body); color: var(--paper);
  background: var(--raise); border: 1px solid var(--hair);
  padding: 0.85rem 1rem; border-radius: 0; appearance: none;
}
input::placeholder, textarea::placeholder { color: #6B6577; }
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot);
}
textarea { resize: vertical; min-height: 8rem; }
select { background-image: none; }
button {
  font: 400 0.9375rem/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--hot); color: var(--ground); border: 0; padding: 1.15rem 2.25rem;
  cursor: pointer;
}
button:hover, button:focus-visible { background: var(--paper); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
.formnote { font: 400 0.75rem/1.6 var(--mono); color: var(--dim); margin-top: 1rem; }
.status { margin-top: 1.25rem; font: 500 0.9375rem/1.5 var(--body); }
.status.ok { color: var(--hot); }
.status.err { color: #FF9E96; }
/* honeypot — a bot fills it, a human never sees it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* inner pages have no full-bleed hero, so they need their own top spacing */
/* The masthead must sit at the same height as it does on the home page, where .bar is
   absolutely positioned inside the hero with 1.5rem of padding. Giving .page a large top
   padding pushed the logo down and left a dead band above it on the inner pages. */
.page { position: relative; padding-block: 0; }
.page .bar { position: static; padding-block: 1.5rem clamp(3rem, 7vw, 5rem); }
.page h1 {
  font: 400 clamp(2.5rem, 1rem + 7vw, 6rem)/0.9 var(--display);
  text-transform: uppercase; margin: 0 0 1.25rem; max-width: 16ch;
}
.page h1 em { font-style: normal; color: var(--hot); }

:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }

@media (max-width: 34rem) {
  .figures { grid-template-columns: 1fr; }
  .fig { padding: 1.1rem 0; }
  .fig + .fig { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .bar { flex-wrap: wrap; gap: 0.75rem 1rem; }
  nav { gap: 1rem; }
  nav a { font-size: 0.6875rem; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .col, .ticker ul { animation: none; }
  .ticker ul { width: auto; flex-wrap: wrap; gap: 1rem 2.5rem; }
  .act img { transition: none; }
}

/* ---- Korean type scale -------------------------------------------------------------------
   Hangul glyphs are full-width, so the display sizes tuned for English overflow badly in
   Korean: the home headline ran past the viewport and broke mid-word. Scale the poster down
   and widen the measure for lang="ko" only, so the English pages are untouched.
   Also drop uppercase, which does nothing for Hangul and only costs tracking. */
html[lang="ko"] .poster {
  font-size: clamp(2.25rem, 1rem + 6.2vw, 5.75rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
  max-width: 18ch;
  /* balance stops a single trailing syllable being stranded on its own line */
  text-wrap: balance;
  /* Korean must break at word boundaries, not mid-word. Without keep-all the browser
     breaks between any two syllable blocks and you get "국경에 / 서". */
  word-break: keep-all;
}
html[lang="ko"] .kicker { letter-spacing: 0.04em; }
html[lang="ko"] .heroInner .lede { max-width: 34ch; word-break: keep-all; }
html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] h2, html[lang="ko"] h3 { word-break: keep-all; }


/* ---- Korean typography ---------------------------------------------------------------------
   Anton and Archivo carry no Hangul, so on the Korean pages both the display and body faces
   have to change or the browser picks something arbitrary per OS. */
html[lang="ko"] body,
html[lang="ko"] .poster,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] .lede, html[lang="ko"] .kicker, html[lang="ko"] .label,
html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] a,
html[lang="ko"] input, html[lang="ko"] textarea, html[lang="ko"] select,
html[lang="ko"] button, html[lang="ko"] .ticker li, html[lang="ko"] figcaption {
  font-family: var(--kr);
}
/* Pretendard's heavy weights carry the display role Anton played for Latin. */
html[lang="ko"] .poster, html[lang="ko"] h1 { font-weight: 800; }
html[lang="ko"] h2, html[lang="ko"] h3 { font-weight: 700; }
/* the wordmark stays Latin -- it is the brand, not copy */
html[lang="ko"] .mark { font-family: var(--display); }

/* --- enquiry tabs (2026-08-15) — one page, three audiences ---------------------------------
   Brand, creator and agent forms used to live on three separate pages. Boss asked for them
   combined and split by tab. Radio inputs drive it so it works without JS and keeps keyboard
   and screen-reader behaviour for free. */
.tabs { margin-top: 2.5rem; border-bottom: 1px solid var(--hair); display: flex; gap: 0; flex-wrap: wrap; }
.tabs input { position: absolute; opacity: 0; pointer-events: none; }
.tabs label {
  padding: 0.9rem 1.5rem 0.8rem; cursor: pointer; white-space: nowrap;
  font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.tabs label:hover { color: var(--ink); }
.tabs input:checked + label { color: var(--ink); border-bottom-color: var(--hot); }
.tabs input:focus-visible + label { outline: 2px solid var(--hot); outline-offset: 2px; }
.panel { display: none; margin-top: 3rem; }
#t-brand:checked   ~ .panels #p-brand,
#t-creator:checked ~ .panels #p-creator,
#t-agent:checked   ~ .panels #p-agent { display: block; }
/* Korean tab labels are wider than the English ones and wrap badly at narrow widths */
html[lang="ko"] .tabs label { letter-spacing: 0.04em; padding-inline: 1.15rem; }
@media (max-width: 30rem) { .tabs label { padding-inline: 0.9rem; font-size: 0.75rem; } }

/* --- inline CTA link (2026-08-15) — creator/agent pages now send people to /contact --------- */
.cta {
  display: inline-block; padding: 0.85rem 1.75rem;
  font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.cta:hover { background: transparent; color: var(--ink); }
html[lang="ko"] .cta { letter-spacing: 0.04em; text-transform: none; font-size: 0.875rem; }

/* --- Korean font fallthrough fix (2026-08-15) ------------------------------------------------
   The ko block above covers `.label` (the class) but never bare `<label>`, so every form label
   fell through to var(--mono) — DM Mono has no Hangul, so the browser substituted per glyph and
   then applied 0.12em tracking meant for uppercase Latin. Same bug on .n / .legal / .formnote /
   .status / .act b / .tabs label. Fixing family AND dropping the Latin tracking; uppercase is a
   no-op on Hangul but removed so nothing inherits it. */
html[lang="ko"] label,
html[lang="ko"] .tabs label,
html[lang="ko"] .formnote,
html[lang="ko"] .status,
html[lang="ko"] .n,
html[lang="ko"] .legal,
html[lang="ko"] .act b {
  font-family: var(--kr);
  letter-spacing: 0;
  text-transform: none;
}
/* labels sit small and dim; Pretendard needs a touch more size than DM Mono to read at that weight */
html[lang="ko"] label { font-size: 0.8125rem; font-weight: 500; }
html[lang="ko"] .n { font-size: 0.75rem; font-weight: 600; }
html[lang="ko"] .formnote, html[lang="ko"] .legal { font-size: 0.8125rem; }
html[lang="ko"] .act b { font-weight: 700; }
/* keep a little tracking on the tab row so the three sit apart, just not Latin-mono wide */
html[lang="ko"] .tabs label { letter-spacing: 0.02em; font-size: 0.875rem; font-weight: 600; }
html[lang="ko"] button { letter-spacing: 0.02em; text-transform: none; font-size: 0.9375rem; }
/* .label / .ticker keep Latin-mono tracking (0.18em / 0.14em) even though the ko block already
   gave them Pretendard — 0.18em on Hangul renders as 다 음 단 계. Family was right, tracking wasn't. */
html[lang="ko"] .label { letter-spacing: 0.02em; text-transform: none; font-size: 0.8125rem; }
html[lang="ko"] .ticker li { letter-spacing: 0.01em; text-transform: none; }

/* --- line-breaking, whole site (2026-08-15) --------------------------------------------------
   Boss flagged the /agents headline breaking as 됩니 / 다 — a single syllable stranded on its own
   line. Cause: the ko block gave keep-all to h2/h3 but never h1, and `.page h1` (every page except
   the home hero) had no wrapping rules at all. Korean must never break inside a word.
   Fixing the whole class rather than the one headline, and balancing headings in both languages
   so no line ends up carrying one orphan word. */
html[lang="ko"] body, html[lang="ko"] h1, html[lang="ko"] .page h1,
html[lang="ko"] .lede, html[lang="ko"] .muted, html[lang="ko"] label,
html[lang="ko"] .formnote, html[lang="ko"] .legal, html[lang="ko"] .act b,
html[lang="ko"] dt, html[lang="ko"] dd, html[lang="ko"] .n, html[lang="ko"] figcaption {
  word-break: keep-all;
  overflow-wrap: break-word; /* safety valve: a long URL or email still can't overflow the box */
}
/* headings: balance the lines so the last one never carries a lone word/syllable. Both languages. */
.poster, .page h1, h1, h2, h3, .offer h3, .track > h3, .act b { text-wrap: balance; }
/* body copy: `pretty` only fixes the last line, which is where orphans actually show up. */
p, .lede, .muted, dd, .formnote, .legal, figcaption { text-wrap: pretty; }
/* Hangul is full-width, so the English measure runs long and invites a bad break. */
html[lang="ko"] .page h1 { max-width: 13ch; letter-spacing: -0.02em; line-height: 1.08; }
/* --- Korean fallthrough, round 2 (2026-08-15) -------------------------------------------------
   A sweep for "element contains Hangul but computes to a Latin face or Latin-caps tracking" found
   five more the first pass missed. .fig b was rendering 어디든/따로/매일 in Anton, which carries no
   Hangul at all. Enumerated rather than guessed — see fontsweep.js. */
html[lang="ko"] .fig b {
  font-family: var(--kr); font-weight: 800; letter-spacing: -0.02em; text-transform: none;
}
html[lang="ko"] .fig span,
html[lang="ko"] .act figcaption b,
html[lang="ko"] .act figcaption span,
html[lang="ko"] .scroll,
html[lang="ko"] .go {
  font-family: var(--kr); letter-spacing: 0; text-transform: none;
}
html[lang="ko"] .fig span { font-size: 0.875rem; }
html[lang="ko"] .scroll  { font-size: 0.8125rem; }
html[lang="ko"] .go      { font-size: 0.9375rem; font-weight: 600; }

/* --- mobile nav: language switcher to the right edge (2026-08-15) -----------------------------
   At <=34rem .bar wraps, so the logo takes line 1 and nav drops to line 2. nav only shrink-wrapped
   its content, so the switcher sat immediately after 문의 mid-row instead of at the right margin. */
@media (max-width: 34rem) {
  .bar nav { width: 100%; }
  .bar nav .langsw { margin-left: auto; }
}
/* The switcher's Korean label: nav a is DM Mono + 0.12em uppercase tracking, which has no Hangul
   and would render 한 글. EN keeps the Latin treatment; only this label switches face. */
.langsw a.lang-ko { font-family: var(--kr); letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }