/* ── Tokens (refined) ───────────────────────────────────────────
     No cyan glow. Depth comes only from blur + opacity + scale. */
  :root {
    --bg:        #050505;
    --bg-soft:   #0B0B0B;
    --ink:       #F2F0EC;
    --ink-86:    rgba(242, 240, 236, 0.86);
    --ink-70:    rgba(242, 240, 236, 0.72);
    --ink-62:    rgba(242, 240, 236, 0.62);
    --ink-50:    rgba(242, 240, 236, 0.50);
    --ink-44:    rgba(242, 240, 236, 0.44);
    --ink-30:    rgba(242, 240, 236, 0.30);
    --ink-15:    rgba(242, 240, 236, 0.15);
    --ink-08:    rgba(242, 240, 236, 0.08);
    --line:      rgba(242, 240, 236, 0.12);
    --line-soft: rgba(242, 240, 236, 0.06);

    --font-en:      "Inter Tight", "Inter", sans-serif;
    --font-ko-head: "Inter Tight", "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
    --font-ko-body: "Inter", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
    --font-display: var(--font-ko-head);
    --font-body:    var(--font-ko-body);
    --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --r-frame:  10px;     /* video frames only */
    --r-square: 0px;      /* everything else */

    --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 240ms;
    --dur-mid:  640ms;
    --dur-slow: 1400ms;

    --pad-x:    clamp(20px, 4vw, 56px);
    --max-w:    1280px;
    --gutter:   clamp(20px, 5vw, 64px);
    --section-anchor-offset: 80px;

    --caption-label-size: 12px;
    --caption-label-line: 1.68;
    --caption-label-track: 0.14em;
    --caption-label-weight: 540;
    --caption-title-size: clamp(28px, 3vw, 38px);
    --caption-title-line: 1.06;
    --caption-title-weight: 620;
    --caption-body-size: 15px;
    --caption-body-line: 1.78;
    --caption-body-weight: 380;
    --caption-gap-title: 10px;
    --caption-gap-context: 8px;
    --caption-gap-rule: 16px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); }
  body {
    font-family: var(--font-body);
    font-weight: 340;
    letter-spacing: -0.02em;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.85;
  }
  ::selection { background: var(--ink); color: var(--bg); }
  a { color: inherit; }
  :where(a, button, input):focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 4px;
  }

  .skip-link {
    min-height: 44px;
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border: 1px solid var(--ink-30);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-decoration: none;
    transform: translateY(calc(-100% - 20px));
    transition: transform var(--dur-fast) var(--ease);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* Quiet surface texture. Keep this cheap: no blend modes or fixed repaint-heavy effects. */
  body::before {
    content: "";
    position: fixed; inset: 0; z-index: 60;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 100% 4px;
    opacity: 0.12;
    display: none;
  }
  /* vignette */
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
    display: none;
  }

  .wrap { width: min(var(--max-w), calc(100% - var(--gutter) * 2)); margin: 0 auto; }

  /* Navigation remains available without a menu overlay. */
  header.top {
    position: fixed; inset: 0 0 auto; z-index: 30;
    padding: 10px 0;
    background: rgba(5,5,5,.96);
  }
  .top-row {
    display: grid; grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center; gap: clamp(16px,3vw,32px);
  }
  .logo {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
  }
  .logo b { font-weight: 500; }
  nav.menu {
    display: flex; justify-content: center; gap: clamp(10px,1.8vw,26px);
    font-family: var(--font-body); font-size: 12px; font-weight: 460;
    letter-spacing: .05em; text-transform: uppercase; min-width: 0;
  }
  nav.menu a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; position: relative;
    color: var(--ink-70); text-decoration: none;
  }
  nav.menu a:hover, nav.menu a.active { color: var(--ink); }
  nav.menu a.active::after {
    content: ""; position: absolute; bottom: 5px; left: 0; right: 0;
    height: 1px; background: var(--ink);
  }
  .top-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
  .meta-clock {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-62);
    letter-spacing: .08em; text-align: right; white-space: nowrap;
  }
  .lang-toggle {
    min-width: 76px; min-height: 44px; padding: 8px 4px;
    font: 12px var(--font-mono); letter-spacing: .08em;
    color: var(--ink-62); background: transparent; border: 0; cursor: pointer;
  }
  .lang-toggle span.active { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
  .lang-toggle:hover { color: var(--ink); }
  @media (max-width: 1024px) { .meta-clock { display: none; } }
  @media (max-width: 720px) {
    :root { --section-anchor-offset: 116px; }
    header.top { padding: calc(6px + env(safe-area-inset-top)) 0 6px; }
    .top-row {
      grid-template-columns: minmax(0,1fr) auto;
      grid-template-areas: "logo meta" "menu menu";
      gap: 0 12px;
    }
    .logo { grid-area: logo; font-size: 11px; letter-spacing: .1em; }
    .top-meta { grid-area: meta; }
    .lang-toggle { min-width: 76px; }
    nav.menu {
      grid-area: menu; display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
      width: 100%; gap: 4px; font-size: clamp(10px,2.8vw,12px); letter-spacing: .015em;
    }
    nav.menu a { min-width: 0; white-space: nowrap; }
  }
  html[data-lang="en"] .lang-ko,
  html[data-lang="ko"] .lang-en { display: none !important; }
  p, li, nav, footer, .caption {
    font-family: var(--font-body);
  }
  html[data-lang="ko"] h1,
  html[data-lang="ko"] h2,
  html[data-lang="ko"] h3,
  html[data-lang="ko"] .pull-quote,
  html[data-lang="ko"] .tunnel-frame .frame-title,
  html[data-lang="ko"] .overlay-meta h3 {
    font-weight: 340;
    letter-spacing: -0.025em;
    line-height: 1.12;
  }
  html[data-lang="ko"] .hero h1 {
    line-height: 1.05;
    word-break: keep-all;
  }
  @media (max-width: 720px) {
    html[data-lang="ko"] .hero h1 {
      font-size: clamp(48px, 13vw, 52px);
    }
  }
  .scroll-meter {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: var(--ink-08);
  }
  .scroll-meter span {
    display: block; height: 100%; width: 0;
    background: var(--ink);
    transition: width 80ms linear;
  }

  /* ── Sections (depth via blur+opacity+scale only) ───────────── */
  main { padding-top: 0; }
  .section {
    padding: clamp(96px, 18vh, 200px) 0;
    position: relative;
    transition:
      opacity var(--dur-mid) var(--ease),
      filter  var(--dur-mid) var(--ease),
      transform var(--dur-mid) var(--ease);
    will-change: opacity, filter, transform;
  }
  #works,
  #statement,
  #bio,
  #contact {
    scroll-margin-top: var(--section-anchor-offset);
  }


  /* ── Hero ─────────────────────────────────────────────────── */
  .hero {
    min-height: 100vh;
    padding-top: clamp(140px, 22vh, 240px);
    display: grid;
    align-content: end;
    padding-bottom: clamp(72px, 10vh, 128px);
  }
  .hero .caption {
    font-family: var(--font-body);
    font-weight: 420;
    font-size: 11px;
    color: var(--ink-62);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 28px;
    display: flex; gap: 16px; flex-wrap: wrap;
  }
  .hero .caption .dot {
    width: 6px; height: 6px; border-radius: 99px;
    background: var(--ink-50);
    display: inline-block;
    align-self: center;
  }
  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 11vw, 156px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
    font-weight: 900;
  }
  .hero h1 .light {
    font-family: var(--font-body);
    font-weight: 340;
    letter-spacing: -0.02em;
    color: var(--ink-62);
  }
  .hero-grid {
    margin-top: clamp(40px, 6vh, 72px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
  @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } }
  .hero-grid p {
    margin: 0;
    color: var(--ink-86);
    font-size: 15px;
    line-height: 1.85;
    font-weight: 340;
    letter-spacing: -0.02em;
    max-width: 52ch;
  }
  .hero-grid .label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 12px;
  }

  /* ── Section head ──────────────────────────────────────────── */
  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-bottom: clamp(48px, 8vh, 96px);
  }
  .section-head .num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-62);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .section-head h2 {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 16px 0 0;
    max-width: 22ch;
    font-weight: 900;
  }
  @media (max-width: 720px) {
    .section-head {
      grid-template-columns: 1fr;
      gap: 7px;
    }
    .section-head .num[style*="text-align:right"] {
      text-align: left !important;
    }
    .section-head h2 {
      margin-top: 10px;
    }
  }
  .works-intro {
    padding-top: clamp(56px, 8vh, 96px);
    padding-bottom: clamp(28px, 5vh, 56px);
  }
  .works-intro .section-head {
    margin-bottom: 0;
  }
  .works-intro .section-head h2 {
    max-width: 25ch;
  }

  /* Works: scroll through the space, or choose a work directly. */
  .tunnel { position: relative; height: 640vh; }
  .tunnel-stage { position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; }
  .tunnel-camera { position: absolute; inset: 0; }
  .tunnel-frame {
    position: absolute; left: 38%; top: 50%;
    width: min(34vh,320px); aspect-ratio: 9/16;
    margin-left: calc(min(34vh,320px) / -2);
    margin-top: calc(min(34vh,320px) * 16/9 / -2);
    pointer-events: none;
  }
  .tunnel-frame.wide {
    width: min(44vw,660px); aspect-ratio: 16/9;
    margin-left: calc(min(44vw,660px) / -2);
    margin-top: calc(min(44vw,660px) * 9/16 / -2);
  }
  .tunnel-frame.four-three {
    width: min(37vw,520px); aspect-ratio: 4/3;
    margin-left: calc(min(37vw,520px) / -2);
    margin-top: calc(min(37vw,520px) * 3/4 / -2);
  }
  .tunnel-frame.focus { pointer-events: auto; cursor: pointer; }
  .tunnel-frame .frame-card {
    position: absolute; inset: 0; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-frame); background: #0A0A0A;
  }
  .tunnel-frame.focus:hover .frame-card { border-color: var(--ink-70); }
  .tunnel-frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
  .tunnel-frame .poster { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
  .tunnel-frame .frame-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 65%,rgba(0,0,0,.55)); }
  .tunnel-frame .frame-idx { position: absolute; top: 12px; left: 14px; font: 11px var(--font-mono); color: var(--ink-70); }
  .tunnel-frame .frame-title { position: absolute; bottom: 14px; left: 14px; right: 14px; font-size: 16px; line-height: 1.2; }
  .tunnel-frame .frame-caption { display: none; }
  .tunnel-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .tunnel-notes {
    position: absolute; top: 110px; bottom: 96px; right: clamp(24px,4vw,64px);
    width: min(31vw,410px); pointer-events: none;
  }
  .tunnel-note { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .tunnel-note.in { opacity: 1; pointer-events: auto; }
  .tunnel-note .note-inner {
    height: 100%; display: block;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 12px 0;
    scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent;
  }
  .tunnel-note .num, .tunnel-note .note-context, .tunnel-note .specs {
    font: 500 12px/1.6 var(--font-mono); color: var(--ink-70); letter-spacing: .04em;
  }
  .tunnel-note .num { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; flex-shrink: 0; }
  .tunnel-note h3 {
    font: 620 clamp(25px,2.7vw,36px)/1.12 var(--font-display);
    letter-spacing: -.02em; margin: 0 0 14px; overflow-wrap: anywhere; flex-shrink: 0;
  }
  .tunnel-note .note-context { white-space: pre-line; margin: 0 0 18px; flex-shrink: 0; }
  .tunnel-note .note-context:empty { display: none; }
  .tunnel-note .note-copy {
    flex: none; min-height: 0; max-height: none;
    overflow: visible; padding: 0 4px 0 0;
  }
  .tunnel-note .note-inner:focus-visible { outline: 1px solid var(--ink-70); outline-offset: 2px; }
  .tunnel-note p { margin: 0 0 .8em; font: 380 15px/1.75 var(--font-body); color: var(--ink-86); white-space: pre-line; }
  .tunnel-note p:empty { display: none; }
  .tunnel-note .specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
  .tunnel-note .specs b { color: var(--ink); font-weight: 500; }
  .depth-meter {
    position: absolute; left: clamp(20px,4vw,56px); top: 110px; bottom: 104px;
    width: 98px; display: flex; flex-direction: column; gap: 10px;
    color: var(--ink-70); font: 12px/1.5 var(--font-mono); pointer-events: auto;
  }
  .depth-meter > span, .depth-meter .ladder { display: none; }
  .archive-head { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .archive-count { color: var(--ink-70); white-space: nowrap; }
  .depth-meter .archive { overflow-y: auto; overflow-x: hidden; padding: 4px 6px 4px 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent; }
  .archive-track { display: flex; flex-direction: column; gap: 8px; }
  .depth-meter .thumb {
    width: 52px; height: 64px; min-height: 44px; flex: 0 0 64px;
    appearance: none; padding: 0; border: 1px solid var(--ink-30);
    border-radius: 3px; background-color: #0A0A0A; background-size: cover; background-position: center;
    cursor: pointer; opacity: .72;
  }
  .depth-meter .thumb:hover, .depth-meter .thumb.current { border-color: var(--ink); opacity: 1; }
  .depth-meter .thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; opacity: 1; }
  .approach-label { position: absolute; top: 84px; left: 38%; transform: translateX(-50%); font: 12px/1.5 var(--font-mono); color: var(--ink-70); }
  .approach-label .approach-number { color: var(--ink); margin-left: 8px; }
  .scroll-nudge, .approach-aura { display: none; }
  .open-fs, .gallery-error button {
    min-height: 44px; padding: 10px 16px; border: 1px solid var(--ink-30);
    color: var(--ink); background: #0A0A0A; font: 12px/1.5 var(--font-mono); cursor: pointer;
  }
  .open-fs { position: absolute; bottom: max(24px,env(safe-area-inset-bottom)); right: clamp(24px,4vw,64px); pointer-events: auto; }
  .open-fs:hover, .gallery-error button:hover { border-color: var(--ink); }
  body:not([data-active-section="works"]) .open-fs { visibility: hidden; pointer-events: none; }
  .gallery-error { max-width: 560px; margin: 0 auto; padding: 140px 24px 80px; font-size: 16px; color: var(--ink-86); }
  .gallery-error button { margin-top: 12px; }
  .gallery-unavailable .tunnel-stage { position: relative; height: auto; min-height: 320px; }
  @media (max-width: 1024px) {
    .depth-meter { top: 116px; bottom: auto; left: 20px; right: 20px; width: auto; height: 76px; gap: 5px; }
    .archive-head { gap: 12px; font-size: 11px; }
    .depth-meter .archive { overflow-x: auto; overflow-y: hidden; padding: 3px; width: 100%; }
    .archive-track { flex-direction: row; width: max-content; }
    .depth-meter .thumb { width: 52px; height: 44px; min-width: 44px; flex: 0 0 52px; }
    .approach-label { display: none; }
    .tunnel-frame { left: 50%; top: 39%; width: min(31vw,180px); margin-left: calc(min(31vw,180px)/-2); margin-top: calc(min(31vw,180px)*16/9/-2); }
    .tunnel-frame.wide { width: min(82vw,520px); margin-left: calc(min(82vw,520px)/-2); margin-top: calc(min(82vw,520px)*9/16/-2); }
    .tunnel-frame.four-three { width: min(62vw,360px); margin-left: calc(min(62vw,360px)/-2); margin-top: calc(min(62vw,360px)*3/4/-2); }
    .tunnel-notes { top: 55%; bottom: 84px; left: 20px; right: 20px; width: auto; }
    .tunnel-note .note-inner { border-top: 1px solid var(--line); background: var(--bg); padding-top: 14px; }
    .tunnel-note .num { font-size: 11px; margin-bottom: 8px; }
    .tunnel-note h3 { font-size: clamp(23px,5.8vw,30px); margin-bottom: 10px; }
    .tunnel-note .note-context { margin-bottom: 12px; font-size: 11px; line-height: 1.5; }
    .tunnel-note .specs { margin-top: 12px; padding-top: 10px; font-size: 11px; }
    .open-fs { left: 20px; right: 20px; bottom: max(20px,env(safe-area-inset-bottom)); width: calc(100% - 40px); }
  }
  @media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .depth-meter { top: auto; bottom: 14px; height: 52px; }
    .archive-head { display: none; }
    .tunnel-frame { left: 29%; top: 51%; width: min(28vh,150px); margin-left: calc(min(28vh,150px)/-2); margin-top: calc(min(28vh,150px)*16/9/-2); }
    .tunnel-frame.wide { width: min(42vw,380px); margin-left: calc(min(42vw,380px)/-2); margin-top: calc(min(42vw,380px)*9/16/-2); }
    .tunnel-frame.four-three { width: min(30vw,270px); margin-left: calc(min(30vw,270px)/-2); margin-top: calc(min(30vw,270px)*3/4/-2); }
    .tunnel-notes { left: 55%; right: 20px; top: 128px; bottom: 80px; }
    .tunnel-note h3 { font-size: 22px; }
    .tunnel-note .num, .tunnel-note .specs { display: none; }
    .open-fs { top: 76px; bottom: auto; left: 55%; right: 20px; width: auto; }
  }

  /* Statement: one continuous reading column in either language. */
  #statement { padding-top: clamp(48px, 8vh, 80px); }
  #statement .section-head,
  #statement .statement-body {
    width: min(100%, 660px);
    margin-left: auto;
    margin-right: auto;
  }
  #statement .section-head { margin-bottom: 40px; }
  #statement .section-head h2 {
    max-width: none;
    text-wrap: balance;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 500;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  #statement .statement-body p {
    margin: 0 0 26px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -0.015em;
    color: var(--ink-86);
    overflow-wrap: anywhere;
  }
  #statement .statement-body [lang="ko"] { word-break: keep-all; }
  #statement .statement-body p:last-child { margin-bottom: 0; }

  /* ── Contact ──────────────────────────────────────────────── */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  #bio .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #bio .bio-publications {
    grid-column: 1 / -1;
  }
  @media (max-width: 980px) { #bio .contact-grid { grid-template-columns: 1fr; } }
  @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-grid article {
    background: var(--bg);
    padding: 32px 28px;
  }
  .contact-grid h3 {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: -0.025em;
    color: var(--ink-70);
    margin: 0 0 14px;
    font-weight: 340;
  }
  .contact-grid p,
  .contact-grid .contact-copy {
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    font-weight: 340;
    letter-spacing: -0.02em;
    color: var(--ink-86);
    max-width: min(40ch, 100%);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
  }
  .contact-grid .contact-copy ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
  .contact-grid .contact-copy li {
    position: relative;
    padding-left: 16px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-wrap: pretty;
  }
  .contact-grid .contact-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-50);
  }
  .contact-grid .contact-copy em {
    font-style: normal;
    color: var(--ink);
  }
  .contact-grid .contact-copy .project-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--ink-30);
    transition: border-color var(--dur-fast) var(--ease);
  }
  .contact-grid .contact-copy .project-link:hover,
  .contact-grid .contact-copy .project-link:focus-visible {
    border-color: var(--ink-70);
  }
  .contact-grid .contact-copy .nowrap {
    white-space: nowrap;
  }
  #bio .bio-summary p + p { margin-top: 1em; }
  html[data-lang="ko"] #bio .bio-summary p { word-break: keep-all; overflow-wrap: anywhere; }
  #bio .bio-publications .contact-copy {
    max-width: none;
  }
  .publication-groups {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(32px, 5vw, 72px);
  }
  .publication-group h4 {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-62);
    font-weight: 500;
  }
  .contact-grid .contact-copy .resource-list {
    gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .contact-grid .contact-copy .resource-list li {
    padding-left: 0;
    border-top: 1px solid var(--line);
  }
  .contact-grid .contact-copy .resource-list li::before {
    display: none;
  }
  .resource-link {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    align-content: center;
    padding: 12px 0;
    color: var(--ink);
    text-decoration: none;
  }
  .resource-link .resource-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-62);
    font-weight: 500;
  }
  .resource-link .resource-title {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-86);
    transition: color var(--dur-fast) var(--ease);
  }
  .resource-link .resource-arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .resource-link:hover .resource-title,
  .resource-link:focus-visible .resource-title {
    color: var(--ink);
  }
  .resource-link:hover .resource-arrow,
  .resource-link:focus-visible .resource-arrow {
    color: var(--ink);
    transform: translate(2px, -2px);
  }
  .publication-note {
    margin: 20px 0 0;
    color: var(--ink-70);
    font-size: 12px;
    line-height: 1.75;
  }
  .publication-note a {
    color: var(--ink-86);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-30);
  }
  @media (max-width: 720px) {
    .publication-groups {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .resource-link {
      min-height: 64px;
      padding: 14px 0;
    }
  }
  html[data-lang="ko"] #bio .contact-copy,
  html[data-lang="ko"] #bio .contact-copy li {
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: normal;
  }
  html[data-lang="ko"] #bio article:first-child .contact-copy {
    text-wrap: balance;
  }
  html[data-lang="ko"] #bio h2 {
    word-break: keep-all;
    line-break: strict;
  }
  .contact-links {
    margin-top: 56px;
    display: flex; gap: 32px; flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
  .contact-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    overflow-wrap: anywhere;
    font-family: var(--font-body);
    font-weight: 420;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-30);
    padding-bottom: 4px;
    transition: border-color var(--dur-fast) var(--ease);
  }
  .contact-links a:hover { border-color: var(--ink); }

  /* ── Footer ────────────────────────────────────────────── */
  footer.foot {
    border-top: 1px solid var(--line);
    padding: 40px 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 24px;
    color: var(--ink-62);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 420;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }
  footer.foot .right { text-align: right; }

  /* ── Persistent main sound toggle ─────────────────────────── */
  #main-sound {
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    min-height: 44px;
    color: var(--ink-70);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
  #main-sound:hover { color: var(--ink); border-color: var(--ink-30); }
  #main-sound .ms-glyph {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
  }
  #main-sound .ms-glyph .bar {
    display: inline-block;
    width: 2px;
    transform-origin: bottom;
    background: currentColor;
    border-radius: 1px;
    animation: ms-bars 1.2s ease-in-out infinite;
  }
  #main-sound .ms-glyph .bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
  #main-sound .ms-glyph .bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
  #main-sound .ms-glyph .bar:nth-child(3) { height: 14px; animation-delay: 0.3s; }
  #main-sound .ms-glyph .bar:nth-child(4) { height: 8px;  animation-delay: 0.45s; }
  @keyframes ms-bars {
    0%, 100% { transform: scaleY(0.45); }
    50%      { transform: scaleY(1.0); }
  }
  #main-sound[aria-pressed="false"] .ms-glyph .bar { animation: none; transform: scaleY(0.35); }
  #main-sound[aria-pressed="false"] {
    color: var(--ink-50);
  }
  /* Hide while a piece is in fullscreen */
  body.in-overlay #main-sound { opacity: 0; pointer-events: none; }
  @media (max-width: 1024px) {
    #main-sound { top: calc(6px + env(safe-area-inset-top)); right: calc(var(--gutter) + 84px); bottom: auto; left: auto; width: 86px; height: 44px; padding: 8px; gap: 0; justify-content: center; font-size: 11px; letter-spacing: .02em; }
    #main-sound .ms-glyph { display: none; }
    #main-sound .ms-label { white-space: nowrap; }
  }
  @media (min-width: 721px) and (max-width: 1024px) {
    .top-meta { padding-left: 96px; }
  }

  /* Player: one layout, with media and reading areas that never clip each other. */
  .overlay {
    position: fixed; inset: 0; z-index: 80; background: #050505;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 180ms ease, visibility 0ms linear 180ms;
  }
  .overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0ms; }
  html.overlay-lock, html.overlay-lock body { overflow: hidden; }
  .player-shell { width: min(1440px,100%); min-height: 100%; margin: 0 auto; padding: 0 clamp(20px,4vw,64px) 112px; }
  .overlay-controls {
    display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 12;
    padding: max(12px,env(safe-area-inset-top)) 0 12px; background: rgba(5,5,5,.96);
  }
  .player-content { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,1fr); align-items: start; gap: clamp(28px,4vw,64px); padding: 24px 0; }
  .player-media-column { min-width: 0; }
  .overlay-stage { position: relative; width: 100%; height: clamp(280px,57vh,680px); background: #000; overflow: hidden; border-radius: var(--r-frame); }
  .overlay-poster, #ov-image {
    display: block; width: 100%; height: 100%; object-fit: contain;
    background: #000; background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .overlay-poster[hidden], #ov-image[hidden] { display: none; }
  .overlay-meta { min-width: 0; width: 100%; max-height: none; overflow: visible; color: var(--ink); }
  .overlay-meta .num { margin: 0 0 12px; font: 12px/1.5 var(--font-mono); letter-spacing: .06em; color: var(--ink-70); }
  .overlay-meta h3 { margin: 0 0 16px; font: 620 clamp(26px,2.8vw,38px)/1.12 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
  html[data-lang="ko"] .overlay-meta h3 { font-weight: 420; line-height: 1.2; }
  .overlay-meta .overlay-context { margin-bottom: 20px; white-space: pre-line; font: 12px/1.6 var(--font-mono); color: var(--ink-70); }
  .overlay-meta .overlay-context:empty { display: none; }
  .overlay-meta p {
    margin: 0; padding: 0 12px 0 0; max-height: min(54vh,660px);
    overflow-y: auto; overscroll-behavior: contain;
    font: 380 15px/1.8 var(--font-body); color: var(--ink-86); letter-spacing: -.015em; white-space: pre-line;
    scrollbar-width: thin; scrollbar-color: var(--ink-30) transparent;
  }
  .overlay-meta p:empty { display: none; }
  .overlay-meta p:focus-visible { outline: 1px solid var(--ink-70); outline-offset: 3px; }
  .overlay button, .overlay .overlay-link {
    display: inline-flex; justify-content: center; align-items: center;
    min-width: 44px; min-height: 44px; padding: 10px 14px;
    color: var(--ink); background: transparent; border: 1px solid var(--ink-30);
    font: 12px/1.4 var(--font-mono); letter-spacing: .03em; text-decoration: none; cursor: pointer;
  }
  .overlay button:hover, .overlay .overlay-link:hover { border-color: var(--ink); background: rgba(255,255,255,.04); }
  .overlay button:disabled { opacity: .45; cursor: default; }
  .overlay [hidden] { display: none !important; }
  .overlay-link { margin-top: 20px; }
  .overlay-playback { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 8px; }
  .player-transport { display: grid; width: 100%; grid-template-columns: auto auto minmax(0,1fr) auto auto; grid-template-areas: "back play seek time forward"; align-items: center; gap: 8px; }
  #ov-back { grid-area: back; }
  #ov-play { grid-area: play; }
  #ov-seek { grid-area: seek; }
  #ov-forward { grid-area: forward; }
  .player-transport .playback-time { grid-area: time; }
  .overlay-playback input[type="range"], .player-audio input[type="range"] { min-width: 0; width: 100%; min-height: 44px; margin: 0; accent-color: var(--ink); cursor: pointer; }
  .playback-time { color: var(--ink-70); font: 12px/1.5 var(--font-mono); white-space: nowrap; }
  .player-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 12px/1.5 var(--font-mono); color: var(--ink-70); }
  .player-audio input[type="range"] { width: 110px; }
  .player-audio label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  #ov-status { margin: 12px 0 0; color: var(--ink-70); font: 13px/1.6 var(--font-body); }
  #ov-status:empty { display: none; }
  #ov-retry { margin-top: 12px; }
  .overlay-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 12; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px max(20px,4vw) max(12px,env(safe-area-inset-bottom)); margin: 0; background: #050505; border-top: 1px solid var(--line); }
  .overlay-nav .count { font: 12px/1.5 var(--font-mono); color: var(--ink-70); white-space: nowrap; }
  @media (max-width: 1024px) {
    .player-shell { padding: 0 20px calc(112px + env(safe-area-inset-bottom)); }
    .player-content { display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
    .player-media-column, .overlay-meta { width: 100%; min-width: 0; }
    .overlay-stage { height: auto; min-height: 0; max-height: 56svh; }
    .overlay-poster, #ov-image { width: 100%; height: auto; max-height: 56svh; object-fit: contain; }
    .overlay-meta h3 { font-size: clamp(26px,5.8vw,34px); }
    .overlay-meta p { max-height: none; overflow: visible; padding-right: 0; }
    .overlay-meta { max-height: none; overflow: visible; }
    .overlay-nav { margin-top: 28px; }
  }
  @media (max-width: 620px) {
    .player-transport { grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "seek seek time" "back play forward"; row-gap: 8px; }
    #ov-seek { grid-column: 1 / 3; grid-row: 1; }
    .playback-time { grid-column: 3; grid-row: 1; }
    #ov-back { grid-column: 1; grid-row: 2; }
    #ov-play { grid-column: 2; grid-row: 2; justify-self: center; min-width: 100px; }
    #ov-forward { grid-column: 3; grid-row: 2; }
    .overlay-nav { gap: 8px; }
    .overlay button, .overlay .overlay-link { padding-left: 12px; padding-right: 12px; }
  }
  @media (max-width: 380px) {
    .overlay-nav { flex-wrap: wrap; }
    .overlay-nav .count { order: -1; width: 100%; text-align: center; }
    .overlay-nav button { flex: 1 1 0; min-width: 0; }
  }

  /* reveal */
  .reveal { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; transform: none !important; }
    .section, .reveal { opacity: 1 !important; filter: none !important; }
    .skip-link:not(:focus-visible) { visibility: hidden; }
    .skip-link:focus-visible { visibility: visible; }
    .approach-aura, .scroll-nudge { display: none !important; }
  }

/* Keep long English names inside small screens and artwork titles in the caption. */
@media (max-width: 1024px) {
  .tunnel-frame .frame-title { display: none; }
}
@media (max-width: 380px) {
  html[data-lang="en"] .hero h1 { font-size: 42px; }
}