/* ============================================================
  SOUND FRAME — Artist Website Basic
  Master Production Styles

  Responsibilities:
  - Site Grid
  - Responsive Layout
  - Visual Configuration
  - Components
  - Motion / Reduced Motion

  Master Structure and
  Client Visual Configuration (§16-A) are intentionally separated.

  ⚠ Section 00–15 = Master Structure (모든 아티스트 공통, 수정 금지).
  ⚠ Section 16-A = VELA STATIC Client Visual Configuration.
  Client Production 시 16-A만 교체한다.
============================================================ */

/* ============================================================
  00. RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 200;
  background: var(--text-primary); color: var(--bg);
  padding: 12px 20px; font-size: 14px; font-weight: 600;
}
.skip-link:focus { top: 0; }

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

@media (prefers-reduced-motion: reduce), (update: slow) {
  html { scroll-behavior: auto; }
}
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================
  01. SITE GRID CONTRACT — CRITICAL (02 MD §02–04)
  모든 Section은 이 Global Grid를 공유한다.
============================================================ */
:root {
  --site-max: 1600px;
  --content-max: 1360px;
  --text-max: 720px;

  --edge-min: 20px;
  --edge-fluid: 5vw;
  --edge-max: 96px;
  --edge: clamp(var(--edge-min), var(--edge-fluid), var(--edge-max));

  /* Visual Journal Rail의 첫 이미지 시작축을 Ultra-wide에서도 Site Frame과 연동 */
  --gallery-offset: max(var(--edge), calc((100vw - var(--site-max)) / 2 + var(--edge)));

  --motion-fast: 180ms;
  --motion-standard: 380ms;
  --motion-editorial: 600ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

/* Section Width Modes — 02 MD §03. 모든 Section은 4개 중 하나. */
.full   { width: 100%; }
.frame   , [data-width="frame"] > .frame     { max-width: var(--site-max); margin-inline: auto; padding-inline: var(--edge); min-width: 0; }
.content , [data-width="content"] > .content { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--edge); min-width: 0; }
.readable, [data-width="readable"] > .readable,
.readable.frame { max-width: var(--text-max); margin-inline: auto; }
.readable.frame { padding-inline: var(--edge); }

/* Section-level: FULL sections keep 100% width; their inner .frame/.content
   wrapper is what carries the shared text/control axis. FRAME/CONTENT/READABLE
   sections apply the max-width directly via the modifier classes above. */
section[data-width="full"] { width: 100%; max-width: 100%; }
section[data-width="frame"] { width: 100%; max-width: 100%; }
section[data-width="content"] { width: 100%; max-width: 100%; }

/* ============================================================
  02. BASE / TYPE SCALE
============================================================ */
body {
  font-family: var(--font-primary);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.section-heading {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: clamp(24px, 4vw, 48px);
}
/* Selected Works / Visual Journal / Official Video 전용 — 다른 section-heading에는 영향 없음 */
.section-heading--compact {
  font-family:
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-size: 15px; font-weight: 600;
  border-radius: 999px; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}
.cta-primary { background: var(--text-primary); color: var(--bg); }
.cta-primary:hover { background: var(--accent); }
.cta-secondary { border: 1px solid var(--border); color: var(--text-primary); }
.cta-secondary:hover { background: var(--text-primary); color: var(--bg); border-color: var(--text-primary); }

/* 상태 배지(QA SAMPLE / REFERENCE REQUIRED)는 화면에 노출하지
   않는다. 상태는 data-link-status 속성(내부 참조용)에만 남긴다. */

/* ============================================================
  03. HEADER — Wordmark + Listen + Menu
============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background var(--motion-standard) var(--ease-standard), border-color var(--motion-standard) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 11, 13, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; min-width: 0;
}
.wordmark {
  font-family:
    "Pretendard Variable",
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.header-actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.header-listen-link,
.nav-toggle-label,
.utility-nav a {
  font-family:
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
.header-listen-link {
  color: var(--text-secondary);
  transition: color var(--motion-fast) var(--ease-standard);
}
.header-listen-link:hover,
.header-listen-link:focus-visible { color: var(--accent); }

.nav-toggle { display: flex; align-items: center; gap: 8px; }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.nav-toggle-bars span { display: block; width: 100%; height: 1px; background: var(--text-primary); transition: transform var(--motion-fast) var(--ease-standard); }
.nav-toggle-label { letter-spacing: 0.02em; text-transform: uppercase; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-3px) rotate(-45deg); }

.utility-nav {
  position: fixed; top: 72px; left: 0; right: 0; z-index: 99;
  background: rgba(10, 11, 13, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition:
    max-height var(--motion-standard) var(--ease-standard),
    background var(--motion-standard) var(--ease-standard);
}
.utility-nav.is-open { max-height: 320px; }
/* 세로 padding을 --edge(최대 96px)가 아닌 고정 18–22px로 축소
   — compact dropdown/drawer 수준 유지, Full-screen Nav처럼 보이지 않게 한다. */
.utility-nav ul {
  max-width: var(--site-max); margin-inline: auto;
  padding-block: 18px 22px; padding-inline: var(--edge);
  display: flex; flex-direction: column; gap: 0;
}
.utility-nav li { border-bottom: 1px solid var(--border-soft); }
.utility-nav li:last-child { border-bottom: 0; }
.utility-nav a {
  display: flex; align-items: center; min-height: 44px;
  padding: 12px 4px; color: var(--text-secondary);
  transition: color var(--motion-fast) var(--ease-standard);
}
.utility-nav a:hover, .utility-nav a:focus-visible { color: var(--text-primary); }

@media (min-width: 768px) {
  .utility-nav ul { flex-direction: row; gap: clamp(24px, 3vw, 48px); padding-block: 16px; }
  .utility-nav li { border-bottom: 0; }
  .utility-nav a { padding: 12px 0; min-height: auto; }
}

@media (max-width: 767px) {
  .header-listen-link {
    display: inline-flex;
  }
  .utility-nav a {
    font-size: 1rem;
  }
  .header-inner { height: 64px; }
  .utility-nav { top: 64px; }
}

/* Menu Open Header = Drawer와 동일한 translucent + blur (Header Scrolled와 통일) */
.site-header.is-nav-open {
  background: rgba(10, 11, 13, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

/* 01-1D — Desktop Menu open 시 Header Listen 숨김 (Drawer 내부 Listen은 유지) */
@media (min-width: 768px) {
  .site-header.is-nav-open .header-listen-link {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ============================================================
  04. HERO — Width Mode FULL
  Ultra-wide Typography Scale 안정화, Mobile overflow 방지.
============================================================ */
.hero {
  position: relative;
  min-height: 90svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,0.15) 0%, rgba(10,11,13,0.35) 55%, rgba(10,11,13,0.92) 100%),
              linear-gradient(90deg, rgba(10,11,13,0.85) 0%, rgba(10,11,13,0.15) 55%);
}
.hero-content {
  /* .hero-content가 justify-content:center로 화면 중앙에 놓은 뒤,
     .hero-copy에서 고정 -32px translateX만 사용한다 — 화면 크기와 무관하게
     copy가 같은 상대 위치를 유지한다. */
  position: relative; z-index: 1; width: 100%; min-width: 0;
  padding-inline: var(--edge);
  padding-top: clamp(120px, 20vw, 220px);
  padding-bottom: clamp(48px, 8vw, 96px);
  display: flex;
  justify-content: center;
}
.hero-copy {
  width: min(720px, calc(100vw - (var(--edge) * 2)));
  max-width: 720px;
  min-width: 0;
  transform: translateX(-32px);
}

@media (max-width: 1023px) {
  .hero-content { justify-content: flex-start; }
  .hero-copy { transform: none; }
}
.hero-eyebrow { color: var(--accent); font-size: 14px; letter-spacing: .04em; margin-bottom: 16px; }
.artist-name {
  /* Desktop에서는 반드시 한 줄을 강제한다(max-width:none + nowrap +
     word-break:keep-all). font-weight와 font-variation-settings를 함께
     명시적으로 고정해 Variable Font optical scaling에 따른 weight 변화를
     방지하고, 모든 breakpoint에서 동일 weight를 유지한다. */
  font-family:
    "Pretendard Variable",
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: clamp(54px, 6.4vw, 112px);
  font-weight: 650;
  font-variation-settings: "wght" 650;
  letter-spacing: -0.02em; line-height: .96;
  max-width: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
/* Hero text block max-width 620px — Ultra-wide에서도 퍼지지 않게 */
.artist-descriptor { max-width: 620px; color: var(--text-secondary); font-size: clamp(15px, 1.6vw, 18px); margin: 24px 0 36px; line-height: 1.7; }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; max-width: 620px; }

.artist-descriptor-break {
  display: inline;
}

@media (max-width: 767px) {
  .artist-descriptor-break {
    display: none;
  }
}

/* 01-2 — Desktop Hero Left Text Information Scale (Premium 정렬) */
@media (min-width: 768px) {
  .artist-name {
    font-size: clamp(48px, 5vw, 90px);
  }

  .hero-eyebrow {
    font-size: 14px;
  }

  .artist-descriptor {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 767px) {
  /* Desktop nowrap 규칙 때문에 좁은 viewport에서 overflow가 생기지 않도록
     Mobile 전용 scale을 별도 적용. */
  .hero-content { justify-content: flex-start; }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .artist-name {
    font-size: clamp(40px, 13.5vw, 58px);
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .listen-track-huge { font-size: clamp(28px, 9vw, 40px); }
}

/* ============================================================
  05. NOW / CURRENT — Width Mode FULL / 내부 Site Frame
  Cover는 항상 1:1, 지나치게 커지지 않도록 max-width 고정.
============================================================ */
.now-current { background: var(--bg-deep); padding-block: clamp(64px, 9vw, 120px); }
.now-inner {
  display: grid; gap: clamp(32px, 6vw, 80px); align-items: center;
  min-width: 0;
}
.now-visual {
  aspect-ratio: 1 / 1; width: min(82vw, 360px);
  margin: 0 auto; overflow: hidden; border-radius: 4px; background: var(--bg-elevated);
}
.now-image { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.now-caption { min-width: 0; }
.now-eyebrow,
.listen-eyebrow {
  font-family:
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: clamp(0.85rem, 1vw + 0.6rem, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--accent);

  display: block;
}
.now-eyebrow { margin-bottom: 10px; }
.now-title { font-size: clamp(28px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.01em; }
.now-meta { color: var(--text-tertiary); font-size: 13px; margin: 10px 0 18px; }
.now-context { color: var(--text-secondary); max-width: var(--text-max); line-height: 1.7; margin-bottom: 28px; }

@media (min-width: 1024px) {
  .now-inner { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); }
  .now-visual { width: min(100%, 420px); margin: 0; }
}

/* Mobile: section edge padding 안에서 full-width 사용 */
@media (max-width: 767px) {
  .now-visual { width: 100%; max-width: 100%; }
}

/* ============================================================
  06. MUSIC / LISTEN — Width Mode CONTENT
  Platform Link Row(Editorial), Mobile overflow 방지.
============================================================ */
.listen-first { background: var(--bg-deep); padding-block: clamp(72px, 10vw, 140px); }
.listen-inner { width: 100%; max-width: 100%; min-width: 0; }
.listen-eyebrow { margin-bottom: 14px; }
/* Glass Room이 Hero/NOW보다 확실히 작은 hierarchy를 갖도록 축소 */
.listen-track-huge { font-size: clamp(28px, 3.5vw, 46px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.04; }
.listen-context { color: var(--text-secondary); max-width: var(--text-max); margin: 18px 0 36px; line-height: 1.7; }

.player-container {
  width: 100%; max-width: 100%; min-width: 0;
  border: 1px solid var(--border); background: var(--bg-elevated);
  border-radius: 16px; overflow: hidden; min-height: 88px;
  display: flex; align-items: center; position: relative;
}
.player-container iframe { width: 100%; max-width: 100%; height: 152px; border: 0; display: block; }
.player-fallback-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 22px 24px; font-weight: 600; font-size: 15px;
}
.player-container[data-embedded="true"] .js-player-fallback { display: none; }
.player-container:not([data-embedded="true"]) noscript { display: contents; }

.listen-platform-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px); margin-top: clamp(24px, 4vw, 40px);
}
.platform-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--motion-fast) var(--ease-standard);
}
/* Platform SVG Icon (currentColor, 18–22px, CDN 비의존) */
.platform-link-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.platform-link-icon { flex-shrink: 0; width: 20px; height: 20px; color: currentColor; }
.platform-link-arrow { display: inline-block; flex-shrink: 0; transition: transform var(--motion-fast) var(--ease-standard); }
.platform-link:hover, .platform-link:focus-visible { color: var(--accent); }
.platform-link:hover .platform-link-arrow, .platform-link:focus-visible .platform-link-arrow { transform: translate(2px, -2px); }

@media (max-width: 767px) {
  .listen-platform-links { grid-template-columns: 1fr; }
}

/* ============================================================
  07. SELECTED WORKS — Width Mode CONTENT
  Desktop 3-column 한 줄, Cover 1:1 고정, 소개 문장 + "자세히 듣기" Hover
  Interaction. Works 1–3 Static / 4+ Interactive Rail 기준.
  Cover 정렬 axis를 margin/translate 없이 명시적으로 고정, Mobile full-width.
============================================================ */
.selected-works { padding-block: clamp(72px, 10vw, 140px); }

.works-list { display: grid; gap: clamp(28px, 3vw, 40px); grid-template-columns: 1fr; }
.work-item { display: flex; flex-direction: column; min-width: 0; }
.work-artwork-slot {
  aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0;
  overflow: hidden; border-radius: 4px; background: var(--bg-elevated);
}
.work-artwork-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-details { padding-top: 16px; max-width: 420px; }
.work-type { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.work-title { font-size: clamp(19px, 2vw, 24px); font-weight: 600; margin: 6px 0 8px; }
.work-description { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; }
/* underline / border 없이 텍스트 + arrow만 노출 */
.work-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  border: 0; padding-bottom: 0; text-decoration: none;
}
.work-link-arrow { display: inline-block; transition: transform var(--motion-fast) var(--ease-standard); }
.work-link:hover, .work-link:focus-visible { color: var(--accent); border: 0; text-decoration: none; }
.work-link:hover .work-link-arrow, .work-link:focus-visible .work-link-arrow { transform: translate(3px, -3px); }

@media (min-width: 640px) and (max-width: 1023px) {
  .works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* <=3 works 기본, 현재 3개는 한 줄 3-column */
  .works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Works >=4 — Interactive Rail (Progressive Enhancement) */
.selected-works[data-works-mode="rail"] .works-list[data-rail-active="true"] {
  display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: clamp(16px, 2vw, 28px); padding-bottom: 8px; scrollbar-width: thin;
}
.selected-works[data-works-mode="rail"] .works-list[data-rail-active="true"] .work-item {
  flex: 0 0 clamp(280px, 28vw, 420px); scroll-snap-align: start;
}
.works-rail-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.works-rail-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.works-rail-nav button:hover { background: var(--text-primary); color: var(--bg); }

@media (max-width: 639px) {
  .works-list { grid-template-columns: 1fr; }
  .work-item { width: 100%; }
  .work-artwork-slot { margin-inline: auto; }
}

/* ============================================================
  08. ARTIST STORY — Width Mode FRAME / text = READABLE
  Quote 없음, "더 읽기/접기" Interaction, Portrait 강조.
============================================================ */
.artist-story { padding-block: clamp(72px, 10vw, 140px); background: var(--bg-elevated); }
.story-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; min-width: 0; }
.story-body { min-width: 0; }
.story-short { color: var(--text-secondary); line-height: 1.8; font-size: 16px; margin-bottom: 20px; }
.story-more { margin-top: 4px; }
.story-more p { color: var(--text-secondary); line-height: 1.8; font-size: 16px; margin-bottom: 16px; }
/* HTML에는 기본 visible. <html class="js">가 붙었을 때만(=JS 로드 후)
   collapse 상태로 전환한다 — JS OFF에서는 항상 상세 Bio가 노출된다. */
.js .story-more { display: none; }
.js .story-more.is-open { display: block; }
.story-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-primary); border-bottom: 1px solid var(--border);
  padding-bottom: 4px; margin-bottom: 20px;
  transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.story-toggle:hover, .story-toggle:focus-visible { color: var(--accent); border-color: var(--accent); }
.story-toggle-icon { display: inline-block; font-size: 14px; transition: transform var(--motion-fast) var(--ease-standard); }
.story-toggle[aria-expanded="true"] .story-toggle-icon { transform: rotate(45deg); }
.story-meta { font-size: 13px; color: var(--text-tertiary); margin-top: 4px; }
.story-visual-slot { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; }
.story-visual-slot img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr); }
  /* 일반 2-column처럼 보이지 않도록 미세 offset (48px 이하) */
  .story-visual-slot { transform: translateY(24px); }
}
@media (max-width: 767px) {
  /* section width 대비 작아 보이지 않도록 full-width, offset 제거 */
  .story-visual-slot { width: 100%; max-width: 100%; transform: none; }

  /* 02-1 — viewport 기준 full-bleed로 확장(edge padding에 갇히지 않도록) */
  .artist-story .story-visual-slot {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    transform: none;
  }

  .artist-story .story-visual-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.artist-story:not([data-has-visual="true"]) .story-visual-slot { display: none; }
.artist-story:not([data-has-visual="true"]) .story-grid { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .story-toggle-icon { transition: none; }
}

/* ============================================================
  09. VISUAL JOURNAL / GALLERY — Width Mode FULL
  Desktop도 항상 Rail(다장 노출), Controls는 Track 아래 별도 Row.
============================================================ */
.visual-gallery { padding-block: clamp(72px, 10vw, 140px); background: var(--bg); }
.gallery-heading-row { margin-bottom: clamp(24px, 3vw, 40px); }
.gallery-heading-row .section-heading { margin-bottom: 0; }

/* Track은 viewport-edge full-bleed rail로 첫 이미지가 브라우저 창 왼쪽
   끝에서 시작한다. Heading은 별도 .frame wrapper에서 content axis를
   유지하고, Track만 true full-bleed — Heading = aligned, Track = full-bleed
   로 역할을 분리한다. */
.gallery-track-viewport { width: 100%; overflow: hidden; }
.gallery-track {
  display: flex; gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-left: 0;
  padding-right: 0;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
/* Desktop 체감 장수 1.6–2.1장(개별 이미지 확대), full-bleed rail의
   viewport-edge 출발에 맞춰 scroll-snap-align: start 사용 */
.gallery-slide { flex: 0 0 clamp(480px, 48vw, 760px); scroll-snap-align: start; }
.gallery-slide figure { position: relative; margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-elevated); }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slide figcaption {
  position: absolute; left: 14px; bottom: 14px; font-size: 12px;
  padding: 4px 10px; background: rgba(10,11,13,.6); border-radius: 999px; color: var(--text-primary);
}

.gallery-controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(16px, 2.4vw, 28px);
}

.gallery-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.gallery-btn {
  width: 32px;
  height: 28px;
  flex: 0 0 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  color: rgba(237, 237, 239, 0.68);

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  transition: color var(--motion-fast) var(--ease-standard);
}

.gallery-arrow {
  display: block;
  width: 20px;
  height: 10px;

  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;

  vector-effect: non-scaling-stroke;

  pointer-events: none;
}

.gallery-btn:hover,
.gallery-btn:focus-visible {
  color: var(--accent);
}

.gallery-btn:focus-visible {
  outline: 1px solid rgba(95, 209, 232, 0.55);
  outline-offset: 3px;
}

.gallery-counter { font-size: 13px; color: var(--text-tertiary); min-width: 44px; }

.gallery-swipe-label {
  margin: 0;

  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;

  color: var(--text-tertiary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Mobile 카드 폭 88vw, 체감 장수는 1.02–1.08장 유지 */
  .gallery-slide { flex-basis: 88vw; }
  .gallery-controls-row { margin-top: 16px; }

  .gallery-controls {
    gap: 7px;
  }

  .gallery-btn {
    width: 28px;
    height: 26px;
    flex-basis: 28px;
  }

  .gallery-arrow {
    width: 17px;
    height: 9px;
    stroke-width: 1.3;
  }

  .gallery-swipe-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}


/* ============================================================
  10. VIDEO / PERFORMANCE — Width Mode FRAME(Main) / CONTENT(Secondary)
  Main 1개(Large) + Secondary 2개, 3개 영상 모두 독립 처리.
  Main Video는 Site Frame(1600)까지 확장, Secondary Row/Heading은
  Content(1360)로 유지. Play Button 축소, 메타데이터 한 줄 통합.
============================================================ */
.media-highlight { padding-block: clamp(72px, 10vw, 140px); background: var(--bg-deep); }
.media-wrapper { min-width: 0; }
.media-wrapper .section-heading { margin-bottom: clamp(24px, 3vw, 40px); }
.video-heading-cap { max-width: var(--content-max); margin-inline: auto; }

.video-stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: var(--bg-elevated);
}
.video-play-btn { position: relative; width: 100%; height: 100%; display: block; }
.video-thumb { width: 100%; height: 100%; object-fit: cover; }
/* Play Button — Premium 최종 규격, Main/Secondary/Mobile 모두 48px 단일 */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.55);
  border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(245, 245, 244, 0.9);
  transition:
    background var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--text-primary);
  transform: translate(-42%, -50%);
}

.video-play-btn:hover .play-icon,
.video-play-btn:focus-visible .play-icon {
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  transform: translate(-50%, -50%) scale(1.04);
}

.video-play-btn:hover .play-icon::before,
.video-play-btn:focus-visible .play-icon::before {
  border-left-color: var(--bg);
}

.video-stage iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }

.video-main {
  max-width: var(--content-max);
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.video-main .video-stage { aspect-ratio: 16 / 9; }

.video-secondary-grid {
  max-width: var(--content-max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px);
}
.video-item { min-width: 0; }
.video-meta {
  width: 100%;
  margin-top: 14px;
  padding-inline: 0;
  text-align: left;
}
/* Title + Type을 한 줄(displayLabel)로 통합 */
.video-title-line {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .video-secondary-grid { grid-template-columns: 1fr; }
}

/* Shared Video Modal — Secondary 02/03 전용 (Main Inline과 별도 lifecycle) */
.media-modal {
  width: min(94vw, 1120px);
  max-width: 1120px;

  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);

  overflow: visible;
}

.media-modal::backdrop {
  background: rgba(10, 11, 13, 0.92);
}

.media-modal-close {
  position: absolute;
  top: -36px;
  right: 0;
  z-index: 2;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--text-primary);

  transition: color var(--motion-fast) var(--ease-standard);
}

.media-modal-close:hover,
.media-modal-close:focus-visible {
  color: var(--accent);
}

.media-modal-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.media-modal-frame-wrap iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  border: 0;
}

.media-modal-caption {
  margin: 0;
  padding-top: 16px;

  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ============================================================
  11. FOLLOW / SOCIAL / CONTACT — Width Mode FRAME
  Editorial Social Link Row(icon + label + arrow, 배경 없는 thin border,
  hover/focus 색상 전환). Pill/Card UI로 회귀하지 않는다.
  Desktop = 4 Platform Links 1 Row + Booking 1 Row(중앙).
  Mobile  = Platform 2×2 + Booking 1 Row(중앙).
============================================================ */
.follow-contact { padding-block: clamp(96px, 12vw, 180px); text-align: center; background: var(--bg-elevated); }
.contact-inner { min-width: 0; }
.contact-heading-large { font-size: clamp(40px, 7vw, 84px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.contact-intro { color: var(--text-secondary); margin: 24px auto 44px; max-width: var(--text-max); }
/* Desktop/Mobile intro copy 분리 — Mobile은 숨기지 않고 축약 문구로 교체 */
.contact-intro-mobile { display: none; }

.social-platform-grid {
  width: min(100%, 960px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.social-booking-row {
  width: min(100%, 960px); margin: 14px auto 0;
  display: flex; justify-content: center;
}
.social-platform-grid .social-link,
.social-booking-row .social-link {
  min-width: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.social-booking-row .social-link { width: min(100%, 260px); }

.social-link-icon { flex-shrink: 0; color: var(--text-secondary); transition: color var(--motion-fast) var(--ease-standard); }
.social-link-label { font-size: 15px; font-weight: 500; }
.social-link-arrow { display: inline-block; color: var(--text-tertiary); transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.social-link:hover, .social-link:focus-visible { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.social-link:hover .social-link-icon, .social-link:focus-visible .social-link-icon,
.social-link:hover .social-link-arrow, .social-link:focus-visible .social-link-arrow { color: var(--accent); }
.social-link:hover .social-link-arrow, .social-link:focus-visible .social-link-arrow { transform: translate(3px, -3px); }

/* 641px 이상 — Desktop 4 Platform Links 1 Row */
@media (min-width: 641px) {
  .social-platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 640px 이하 — Mobile 2×2 + Booking (base 2-col grid 그대로, 여백만 축소) */
@media (max-width: 640px) {
  .social-booking-row { margin-top: 12px; }
  .social-booking-row .social-link { width: min(100%, 220px); }
}

/* ============================================================
  12. FOOTER — Width Mode CONTENT
============================================================ */
.site-footer { padding-block: 32px; border-top: 1px solid var(--border); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; min-width: 0; }
.footer-copyright,
.footer-signature {
  font-family:
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Malgun Gothic",
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ============================================================
  13. ULTRA-WIDE STABILITY (02 MD §04 / 04 MD §02)
  .frame / .content / .readable의 max-width가 위에서 이미 고정 상한을
  갖는다. 아래는 full-bleed 배경 전용 보정.
============================================================ */
@media (min-width: 1920px) {
  .hero-image { object-position: center 30%; }
}

/* ============================================================
  14. MOBILE (<=767px) — Master Baseline / Global Overflow Fix
  overflow-x 방지, nested padding 중복 제거, 주요 grid/flex child에
  min-width:0 적용.
============================================================ */
@media (max-width: 767px) {
  .story-body, .contact-inner { text-align: left; }
  .follow-contact { text-align: left; }
  .header-inner,
  .hero-content,
  .hero-copy,
  .now-inner,
  .listen-inner,
  .works-list, .work-item,
  .story-grid,
  .media-wrapper,
  .video-secondary-grid,
  .contact-inner,
  .social-platform-grid,
  .social-booking-row,
  .footer-inner {
    min-width: 0;
  }
}

/* ============================================================
  FOLLOW — Mobile 중앙정렬 + 한 줄 압축
  Section 14의 전역 text-align:left(.follow-contact/.contact-inner)를
  Follow 섹션에 한해 override한다.
============================================================ */
@media (max-width: 767px) {
  .follow-contact,
  .follow-contact .contact-inner {
    text-align: center;
  }

  /* Contact heading은 모든 화면 크기에서 항상 2줄을 유지한다. */
  .follow-title-break { display: inline; }
  .contact-heading-large { white-space: normal; text-align: center; }

  /* intro copy는 숨기지 않고 Mobile 전용 문구로 교체, 한 줄 유지 */
  .contact-intro-desktop { display: none; }
  .contact-intro-mobile { display: inline; }

  /* 360px까지 1줄 고정 Final Rule */
  .follow-contact .contact-intro {
    display: block;
    width: 100%;
    max-width: none;
    margin: 24px auto 44px;

    text-align: center;
    white-space: nowrap;
    word-break: keep-all;

    font-size: clamp(11px, 2.9vw, 13px);
    letter-spacing: -0.025em;
  }

  /* Icon + Text + Arrow 한 줄 */
  .social-link { white-space: nowrap; }
  .social-link-label { white-space: nowrap; }

  /* Platform / Booking 링크 내부 중앙 정렬 */
  .social-platform-grid .social-link,
  .social-booking-row .social-link {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* 2줄 기준 Mobile Font Scale */
  .contact-heading-large { font-size: clamp(32px, 10vw, 44px); line-height: 1.0; }
}

/* ============================================================
  15. REDUCED MOTION (전역)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .play-icon, .gallery-btn, .cta, .social-link, .platform-link, .work-link { transition: none; }
}

/* ============================================================
  ============================================================
  16-A. VELA STATIC — CLIENT VISUAL CONFIGURATION
  Brand Authority : ARTIST_BASE PRIMARY (Release Campaign = LOCAL ONLY)
  Theme Mode      : MIXED — Deep Graphite / Cool White · Soft Stone
  Accent          : Clear Cobalt #315CFF (controlled 5–10% signal)
  Release Signal  : Safety Orange — scoped to #now ONLY

  Everything above (§00–§15) is Master Structure and is untouched.
  This block only (a) replaces tokens, (b) maps section surfaces,
  (c) applies Master-supported controlled variation:
      Theme/Color tokens · Typography token mapping · Surface state ·
      Border/Graphic motif · Image treatment · CTA treatment · Density.
  No DOM / IA / Navigation / Player / Modal / Slider / Footer /
  Breakpoint / Interaction is changed here.
  ============================================================
============================================================ */

/* ------------------------------------------------------------
  A. TOKENS — Artist Base (dark default = Deep Graphite)
------------------------------------------------------------ */
:root {
  /* Surface */
  --bg: #0F1114;
  --bg-deep: #14171B;
  --bg-elevated: #1A1E23;
  --bg-elevated-2: #22272D;
  --border: #2A2F36;
  --border-soft: #1F2329;

  /* Text */
  --text-primary: #EEF0F2;     /* Soft White */
  --text-secondary: #A3AAB3;   /* Cool Medium Gray — 7.1–8.1:1 on dark */
  --text-tertiary: #8A929C;    /* ≥ 5:1 on all dark surfaces */

  /* Cobalt — two roles, one hue family.
     --cobalt = graphic role (fills / lines / dots): #315CFF, ≥ 3:1 on every surface.
     --accent = TEXT-SAFE role: the raw #315CFF is only 3.3–3.7:1 on graphite,
                so text/hover on dark uses the lighter cobalt tint (≥ 5.5:1).
                Light sections re-map --accent to a deeper cobalt (see B). */
  --cobalt: #315CFF;
  --accent: #7B96FF;
  --accent-dim: rgba(123, 150, 255, .10);
  --accent-line: rgba(123, 150, 255, .38);

  /* Typography — Neutral Grotesk (Master-supported family: Pretendard Variable).
     Condensed editorial accent is NOT introduced (no new font architecture);
     metadata uses uppercase + slightly expanded tracking on the same family. */
  --font-primary: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", Helvetica, Arial, sans-serif;
  --font-secondary: var(--font-primary);
}

/* ------------------------------------------------------------
  B. SECTION SURFACE MAP (Section Contrast Rhythm)
  Rhythm: image · deep · LIGHT stone · LIGHT white · dark · LIGHT concrete
          · dark media · LIGHT white · dark footer
  Method: token re-scope per section id — no DOM change.
------------------------------------------------------------ */
#listen, #works, #gallery, #contact {
  --border: #C3CAD2;
  --border-soft: #D5DAE0;
  --text-primary: #101317;     /* Deep Graphite */
  --text-secondary: #4A525C;   /* ≥ 6.3:1 */
  --text-tertiary: #5C6570;    /* ≥ 4.7:1 */
  --accent: #2547E0;           /* text-safe cobalt on light — ≥ 5.5:1 */
  --accent-dim: rgba(49, 92, 255, .08);
  --accent-line: rgba(49, 92, 255, .42);
  color: var(--text-primary);
}
#listen  { background: #E7EAEE; --bg-elevated: #F4F6F8; }              /* Cool Stone */
#works   { background: #F4F6F8; --bg-elevated: #E3E7EB; border-top: 1px solid var(--border-soft); } /* Cool White */
#gallery { background: #E3E6EA; --bg-elevated: #CBD1D8; }              /* Pale Concrete */
#contact { background: #F7F8FA; --bg-elevated: #F7F8FA; }              /* Cool White (final information) */

/* Release Campaign — LOCAL ONLY (AFTER CHECKOUT). Never propagated. */
#now {
  --accent: #FF6A00;           /* Safety Orange — 5.8–6.6:1 on dark */
  --accent-dim: rgba(255, 106, 0, .12);
  --accent-line: rgba(255, 106, 0, .42);
}
#now .cta-primary { background: #FF6A00; color: #0F1114; }
#now .cta-primary:hover { background: #FF8433; }

/* ------------------------------------------------------------
  C. CONTROLLED EXPRESSION
------------------------------------------------------------ */

/* C1 — Language: Korean = supporting layer, natural line breaks */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
.cta, .story-toggle, .header-listen-link, .nav-toggle-label, .utility-nav a, .work-link, .gallery-swipe-label { white-space: nowrap; }

/* C2 — Surface / edge character: matte, clean edge, no rounded UI blocks, no pills */
.cta,
.player-container,
.now-visual,
.work-artwork-slot,
.story-visual-slot,
.gallery-slide figure,
.gallery-slide figcaption,
.video-stage { border-radius: 0; }

/* C3 — CTA treatment (square, uppercase, expanded tracking) */
.cta { font-size: 13px; font-weight: 600; letter-spacing: .12em; padding: 15px 30px; }
.hero .cta-primary { background: var(--cobalt); color: #fff; }       /* white on #315CFF = 5.1:1 */
.hero .cta-primary:hover { background: #2549DE; }
.hero .cta-secondary { border-color: rgba(238, 240, 242, .45); }

/* C4 — Typography: Regular/Medium dominant, bold selective */
.section-heading,
.section-heading--compact { font-weight: 500; letter-spacing: .03em; }
.now-title, .listen-track-huge { font-weight: 600; }
.contact-heading-large { font-weight: 500; }
.work-title { font-weight: 500; letter-spacing: .01em; }
.artist-name { font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: -0.015em; }

/* Metadata layer (editorial accent): uppercase + slightly expanded tracking */
.hero-eyebrow, .now-eyebrow, .listen-eyebrow { font-weight: 600; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; }
.now-meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.work-type { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }
.work-description { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.story-meta { font-size: 12px; letter-spacing: .1em; }
.video-title-line { letter-spacing: .1em; }

/* C5 — Graphic motif: thin line / coordinate square / cobalt signal (restrained) */
.wordmark::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-left: 9px; vertical-align: middle; background: var(--cobalt);
}
.hero-eyebrow, .now-eyebrow, .listen-eyebrow { display: flex; align-items: center; gap: 12px; }
.hero-eyebrow::before, .now-eyebrow::before, .listen-eyebrow::before {
  content: ""; flex: 0 0 28px; height: 1px; background: currentColor;
}
.hero-eyebrow::before { background: var(--cobalt); }
.section-heading::before {
  content: ""; display: block; width: 32px; height: 2px;
  margin-bottom: 18px; background: var(--cobalt);
}
.utility-nav a:hover, .utility-nav a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--cobalt);
  text-decoration-thickness: 1px; text-underline-offset: 8px;
}
.footer-copyright::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 10px; vertical-align: middle; background: var(--cobalt);
}

/* C6 — Hero (image treatment: neutral-cool, architectural crop, lighter scrim) */
.hero-image { object-position: 56% 50%; }
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(15,17,20,.10) 0%, rgba(15,17,20,.30) 55%, rgba(15,17,20,.88) 100%),
    linear-gradient(90deg, rgba(15,17,20,.80) 0%, rgba(15,17,20,.10) 58%);
}
@media (min-width: 1920px) { .hero-image { object-position: 56% 50%; } }
.artist-descriptor { max-width: 640px; }
.artist-statement {
  display: block; color: var(--text-primary); font-weight: 500;
  letter-spacing: .06em; line-height: 1.5; font-size: clamp(15px, 1.5vw, 19px);
}
.artist-support {
  display: block; margin-top: 14px; color: var(--text-secondary);
  font-size: clamp(14px, 1.25vw, 16px); line-height: 1.7;
}

/* C7 — Now (release local module) */
.now-context { font-size: 15px; }

/* C8 — Listen (SoundCloud embed + credited demo-source rows) */
/* Master latent-bug guard: Master §06 sets `noscript { display: contents }` before the
   lazy mount, which prints the raw <a …> markup as text when JS is ON. With JS on the
   visible fallback is .js-player-fallback; <noscript> only needs to render when JS is OFF
   (html has no .js class then, so this rule does not apply). */
html.js .player-container noscript { display: none; }
.player-container iframe { height: 166px; }   /* SoundCloud classic widget height */
.listen-platform-links { gap: clamp(12px, 2vw, 28px); }
.platform-link { align-items: flex-start; padding: 18px 4px; }
.platform-link-main { align-items: flex-start; }
.platform-link-icon { margin-top: 1px; }
.platform-link-arrow { margin-top: 2px; }
.platform-link-text { display: block; min-width: 0; }
.platform-link-credit {
  display: block; margin-top: 7px; font-size: 11.5px; font-weight: 400;
  letter-spacing: .01em; line-height: 1.55; text-transform: none;
  color: var(--text-tertiary);
}

/* C9 — Story (landscape source in 4:5 slot → focal point on desk / equipment) */
.artist-story .section-heading {
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.1; letter-spacing: .01em;
}
.story-visual-slot img { object-position: 50% 50%; } /* source is pre-cropped to 4:5 (753×941) */

/* C10 — Gallery (4:5 sources in 4:3 slots → per-frame focal point) */
/* gallery sources are pre-cropped to 4:3 (1122×841); no per-frame focal offset needed */
.gallery-slide figcaption {
  color: #EEF0F2; background: rgba(15, 17, 20, .72);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
/* Gallery controls sit on a light surface: Master's hard-coded light-on-dark colors are re-mapped */
.visual-gallery .gallery-btn { color: var(--text-secondary); }
.visual-gallery .gallery-btn:hover,
.visual-gallery .gallery-btn:focus-visible { color: var(--accent); }
.visual-gallery .gallery-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* C11 — Video (short credit line next to third-party playback) */
.video-source-line {
  margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--text-secondary);
}

/* C12 — Contact (copy-length adaptation; Master 1-line intro rule was Korean-only copy) */
.contact-heading-large { letter-spacing: -0.01em; }
.contact-intro { line-height: 1.7; }
@media (max-width: 767px) {
  .follow-contact .contact-intro {
    white-space: normal; font-size: 13px; letter-spacing: 0; line-height: 1.7;
  }
}