/* Brand World (work detail). Each work sets --w-* tokens; layout differs by data-variant. */
.bw { background: var(--w-paper); color: var(--w-ink); min-height: 100svh; }
.bw .lb.mute { color: color-mix(in srgb, var(--w-ink) 82%, transparent); }
.bw-top { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
.bw-top a, .bw-top button { font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
.bw-hero { padding: 12px 0 clamp(40px, 8vw, 100px); display: grid; gap: 26px; }
.bw-hero h1 { margin: 0; font-size: clamp(40px, 9vw, 132px); line-height: .98; font-weight: 600; letter-spacing: -.05em; }
.bw-hero .ko { margin: 10px 0 0; opacity: .86; }
.bw-hero .tag { margin: 22px 0 0; font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.02em; max-width: 24ch; font-weight: 500; }
.bw-film { margin: 0; aspect-ratio: 358 / 470; background: #151813; overflow: hidden; position: relative; }
.bw-film video, .bw-film img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.bw-ctl { margin-top: 8px; display: flex; justify-content: space-between; font-size: 12px; }
.bw-ctl button { text-decoration: underline; text-underline-offset: 4px; padding: 12px 0 12px 12px; min-height: 44px; }
.bw-sec { padding: clamp(40px, 8vw, 110px) 0; border-top: 1px solid color-mix(in srgb, var(--w-ink) 18%, transparent); }
.bw-sec h2 { margin: 0 0 18px; font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.bw-sec p.big { margin: 0; font-size: clamp(22px, 3.2vw, 44px); line-height: 1.28; font-weight: 500; letter-spacing: -.03em; max-width: 24ch; }
.bw-sec p.sm { margin: 16px 0 0; max-width: 44ch; opacity: .86; }
.frames { display: grid; gap: 12px; }
.frames figure { margin: 0; } .frames img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; } .frames figcaption { font-size: 11px; margin-top: 6px; opacity: .86; }
.logo-stage { background: var(--w-tint); padding: clamp(28px, 7vw, 90px) clamp(18px, 5vw, 70px); display: grid; place-items: center; min-height: 200px; }
.logo-stage img { width: min(100%, 760px); height: auto; }
.logo-pair { display: grid; gap: 12px; margin-top: 12px; }
.sym { aspect-ratio: 1; display: grid; place-items: center; } .sym img { width: 44%; }
.sym--c { background: var(--w-tint); } .sym--r { background: var(--w-accent); }
.pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; }
.pal div { aspect-ratio: 3 / 4; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11px; line-height: 1.4; }
.apps { display: grid; gap: 14px; }
.apps figure { margin: 0; } .apps img { width: 100%; height: auto; } .apps figcaption { margin-top: 6px; font-size: 11px; opacity: .86; }
.next { display: grid; gap: 6px; padding: clamp(40px, 8vw, 100px) 0 clamp(48px, 8vw, 100px); }
.next a { font-size: clamp(30px, 6vw, 84px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.next .lb { margin-bottom: 8px; }

/* per-brand voice for the title only (system substitutes; official brand fonts not shipped yet) */
[data-variant="ledger"] .bw-hero h1 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.02em; }
[data-variant="stack"] .bw-hero h1 { font-family: "Gowun Batang", "Batang", "AppleMyungjo", "Noto Serif KR", serif; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
[data-variant="wide"] .bw-hero h1 { font-weight: 300; letter-spacing: -.055em; }
@media (min-width: 900px) {
  .bw-film { max-height: 76svh; }
  .bw-hero { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
  .bw-film { aspect-ratio: 9 / 13; }
  [data-variant="ledger"] .bw-hero .t { grid-column: 1 / 7; order: 1; } [data-variant="ledger"] .bw-hero .f { grid-column: 8 / 13; order: 2; }
  [data-variant="wide"] .bw-hero .t { grid-column: 1 / 13; } [data-variant="wide"] .bw-hero .f { grid-column: 1 / 13; }
  [data-variant="wide"] .bw-film { aspect-ratio: 16 / 7; } [data-variant="wide"] .bw-film video, [data-variant="wide"] .bw-film img { object-position: 50% 40%; }
  [data-variant="stack"] .bw-hero .f { grid-column: 1 / 6; order: 1; } [data-variant="stack"] .bw-hero .t { grid-column: 7 / 13; order: 2; }
  .bw-sec .cols { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .bw-sec .cols > h2 { grid-column: 1 / 4; } .bw-sec .cols > .body { grid-column: 4 / 13; }
  .frames { grid-template-columns: repeat(var(--n, 4), 1fr); }
  [data-variant="ledger"] .frames figure:nth-child(even) { margin-top: 56px; }
  [data-variant="stack"] .frames figure:nth-child(3n+2) { margin-top: 36px; }
  [data-variant="wide"] .frames img { aspect-ratio: 4 / 5; }
  .logo-pair { grid-template-columns: 1fr 1fr; } .pal div { aspect-ratio: 1; }
  .apps { grid-template-columns: repeat(12, 1fr); column-gap: 20px; }
  .apps figure:nth-child(1) { grid-column: 1 / 8; } .apps figure:nth-child(2) { grid-column: 8 / 13; align-self: end; } .apps figure:nth-child(3) { grid-column: 1 / 6; } .apps figure:nth-child(4) { grid-column: 6 / 13; align-self: start; }
}