/* V3 — below-the-hero editorial layer. The hero (art.css) is preserved byte-for-byte.
   Language borrowed from the hero: thin Manrope display, hairline indexes, amber micro-labels on dark, image-first, restrained Korean. */
.sec-en { margin: 0; font: 200 clamp(52px, 8.6vw, 136px)/.92 var(--f); letter-spacing: -.055em; }
.amb { color: var(--amber); } .motion .amb { color: var(--amber); }

/* ---------- Selected Work head ---------- */
.wh { display: grid; gap: 28px; padding-bottom: clamp(32px, 5vw, 64px); }
.wh-en { margin: 0; font: 200 clamp(60px, 14vw, 168px)/.88 var(--f); letter-spacing: -.06em; }
.wh-ko { margin: 0 0 8px; font-size: 20px; letter-spacing: -.03em; }
.wh-note { margin: 0 0 22px; font-size: 13px; color: var(--mute); max-width: 34ch; }
.wh-idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.wh-idx a { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); min-height: 44px; font-size: 15px; transition: padding .35s var(--ease); }
.wh-idx .n { font-size: 11px; letter-spacing: .14em; color: var(--mute); } .wh-idx .sx { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.wh-idx a:hover { padding-left: 10px; }
@media (min-width: 900px) { .wh { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; } .wh-t { grid-column: 1 / 8; } .wh-r { grid-column: 8 / 13; } .wh-en { font-size: clamp(100px, 11.6vw, 176px); } }

/* ---------- 03 HANGYEOL TEA HOUSE — the symbol (square + diamond) is the picture frame ---------- */
.wk-hangyeol { background: var(--w-paper); color: var(--w-ink); padding: 0; overflow: hidden; }
.hx-grid { position: relative; display: flex; flex-direction: column; padding: 52px var(--gut) 60px; gap: 30px; }
.hx-no { margin: 0; font: 200 clamp(56px, 18vw, 90px)/1 var(--f); letter-spacing: -.05em; color: var(--w-accent); } .hx-no small { font-size: 12px; letter-spacing: .14em; margin-left: 8px; vertical-align: top; font-weight: 400; color: var(--w-ink); }
.hx-frame { position: relative; width: 100%; aspect-ratio: 1; order: 1; }
.hx-sq { position: absolute; inset: 0; border: 2px solid var(--w-accent); border-radius: 7%; }
.hx-diamond { position: absolute; inset: 14%; display: block; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #151813; }
.hx-diamond .plate-host video, .hx-diamond .plate-host img { object-position: 50% 60%; transform: scale(1.04); }
.hx-t { order: 2; }
.hx-kr { margin: 0; font: 400 clamp(64px, 20vw, 96px)/1 "Gowun Batang", "Batang", "AppleMyungjo", "Noto Serif KR", serif; color: var(--w-accent); letter-spacing: -.02em; }
.hx-title { margin: 6px 0 0; font: 500 clamp(22px, 6vw, 30px)/1.15 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.hx-ko { margin: 18px 0 20px; font-size: 20px; line-height: 1.42; letter-spacing: -.03em; max-width: 16em; }
@media (min-width: 900px) {
  .wk-hangyeol { height: clamp(760px, calc(100svh - var(--hd)), 920px); }
  .hx-grid { display: block; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0; }
  .hx-no { position: absolute; left: var(--gut); top: 44px; }
  .hx-frame { position: absolute; right: var(--gut); top: 50%; width: min(46vw, calc(100% - 120px)); transform: translateY(-50%); }
  .hx-t { position: absolute; left: var(--gut); bottom: 56px; width: min(36vw, 480px); }
  .hx-kr { font-size: clamp(88px, 9vw, 136px); } .hx-title { font-size: clamp(22px, 2.2vw, 32px); }
}

/* ---------- SERVICES ---------- */
.sv-head { margin-bottom: clamp(28px, 5vw, 56px); }
.sv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.sv-row { border-bottom: 1px solid var(--line); transition: opacity .4s; }
.sv-row a, .sv-row .plain { display: grid; grid-template-columns: 40px 1fr; gap: 6px 10px; padding: 22px 0; align-items: baseline; }
.sv-row .no { color: var(--mute); padding-top: 12px; align-self: start; }
.sv-row .tt { font: 200 clamp(32px, 9vw, 64px)/1.05 var(--f); letter-spacing: -.045em; }
.sv-row .dd { grid-column: 2; font-size: 14px; color: var(--mute); }
.sv-row .th { grid-column: 2; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 12px; }
.sv-pv { display: none; }
@media (min-width: 900px) {
  .sv-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .sv-list { grid-column: 1 / 8; } .sv-pv { display: block; grid-column: 9 / 13; position: sticky; top: 90px; margin: 0; }
  .sv-row .tt { transition: opacity .4s; } .sv-row:not(.on):not(:hover) .tt { opacity: .56; }
  .sv-row a, .sv-row .plain { grid-template-columns: 56px 1fr; padding: 26px 0; } .sv-row .tt { font-size: clamp(40px, 4.8vw, 74px); } .sv-row .th { display: none; }
  .sv-pv img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .sv-pv figcaption { margin-top: 10px; color: var(--mute); }
}

/* ---------- APPROACH ---------- */
.ap .ap-ko { margin: 18px 0 0; font-size: 20px; letter-spacing: -.03em; }
.tl { display: flex; align-items: center; gap: 12px; } .tl .lb { color: var(--mute); } .tl i { flex: 1; height: 1px; background: color-mix(in srgb, var(--ink) 32%, transparent); position: relative; }
.tl i::after { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.card figure.mat { padding: 9%; } .card figure.mat img { object-fit: contain; }
@media (min-width: 900px) { .ap .card:nth-child(n) { margin-top: 0; } .ap .strip { padding-bottom: 20px; } }

/* ---------- MOTION ---------- */
.mo2 { background: #FFFFFF; color: var(--hero-ink); }
.mo2 .mute, .mo2 .mo-note { color: rgba(23,25,20,.7); }
.mo2 .sec-en { color: #111310; } .mo-head { margin-bottom: 28px; } .mo-note { margin: 16px 0 0; font-size: 13px; max-width: 44ch; }
.mo-ch { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px auto 0; width: min(100%, 420px); }
.mo-ch button { text-align: left; padding: 8px 12px; min-height: 44px; border: 1px solid rgba(23,25,20,.22); font-size: 12px; display: grid; gap: 2px; transition: border-color .3s; } .mo-ch button:hover { border-color: var(--amber); }
.mo-ch small { color: rgba(23,25,20,.62); font-size: 10.5px; }
.mo-bar { height: 2px; background: rgba(23,25,20,.16); width: min(100%, 420px); margin: 12px auto 0; } .mo-bar i { display: block; height: 100%; width: 0; background: var(--amber); }
.mo2 .mo-list button { border-top-color: rgba(23,25,20,.18); } .mo2 .mo-list b { font-weight: 200; letter-spacing: -.045em; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.05; } .mo2 .mo-list small { color: rgba(23,25,20,.7); } .mo2 .mo-list button:not([aria-pressed="true"]) b { font-weight: 200; opacity: .62; } .mo2 .mo-list button[aria-pressed="true"] b { opacity: 1; }
@media (min-width: 900px) { .mo2 .mo-grid { grid-template-rows: auto 1fr auto auto auto; } .mo2 .mo-stage { grid-row: 1 / 3; } .mo2 .mo-ui { grid-row: 3; } .mo-ch { grid-column: 1 / 6; grid-row: 4; width: 100%; } .mo-bar { grid-column: 1 / 6; grid-row: 5; width: 100%; } .mo2 .mo-head { margin-bottom: 0; } }

/* ---------- BRAND WORLD detail ---------- */
.dv .bw-top a { letter-spacing: .08em; }
.dv-hero { display: grid; gap: 26px; padding: 12px 0 clamp(44px, 8vw, 100px); }
.dv-hero h1 { margin: 0; font: 200 clamp(46px, 13vw, 132px)/.95 var(--f); letter-spacing: -.055em; }
[data-variant="ledger"] .dv-hero h1 { font: 400 clamp(52px, 15vw, 140px)/.92 Georgia, "Cormorant Garamond", "Times New Roman", serif; letter-spacing: -.03em; }
[data-variant="stack"] .dv-hero h1 { font: 500 clamp(40px, 11vw, 112px)/1.06 "Gowun Batang", "Batang", "AppleMyungjo", "Noto Serif KR", serif; letter-spacing: -.03em; }
.dv-hero .ko { margin: 12px 0 0; opacity: .86; } .dv-hero .tag { margin: 18px 0 22px; font-size: var(--t-lead); line-height: 1.4; letter-spacing: -.02em; max-width: 20em; font-weight: 500; }
.bw-film.sq { aspect-ratio: 1; }
.dv-sec { border-top: 1px solid color-mix(in srgb, var(--w-ink) 20%, transparent); padding: clamp(44px, 8vw, 120px) 0; }
.dv-h { margin: 0 0 22px; font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.dv-big { margin: 0; font-size: clamp(24px, 6.4vw, 46px); line-height: 1.26; font-weight: 500; letter-spacing: -.035em; max-width: 20em; } [data-variant="wide"] .dv-big { font-weight: 300; }
.dv-sm { margin: 18px 0 0; max-width: 46ch; opacity: .86; font-size: 14px; }
.dv-two { display: grid; gap: 28px; } .dv-dia { width: min(100%, 360px); } .dv-dia svg { width: 100%; height: auto; overflow: visible; }
.dv-dia .ax-ring { fill: none; stroke: var(--w-accent); stroke-width: .9; stroke-dasharray: 1; } .dv-dia .ax-sym { fill: var(--w-accent); }
.js .dv-dia:not(.in) .ax-ring { stroke-dashoffset: 1; } .js .dv-dia:not(.in) .ax-sym { opacity: 0; } .dv-dia.in .ax-ring { animation: draw 2.4s var(--ease) both; animation-delay: calc(var(--i) * .35s); } .dv-dia.in .ax-sym { animation: symIn 1.2s ease 1.9s both; }
.js .dv-dia:not(.in) .cx-pane { transform: translate(var(--dx), var(--dy)); } .js .dv-dia.in .cx-pane { transform: none; }
.hx-r { fill: none; stroke: var(--w-accent); stroke-width: 1.6; } .hx-d { fill: var(--w-accent); }
.dv-strip { padding-top: 0; } .dv-strip .card:nth-child(n) { margin-top: 0; } .dv-strip .card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .dv-strip figcaption { font-size: 12px; opacity: .86; margin-top: 2px; } .dv-strip .tl .lb { color: color-mix(in srgb, var(--w-ink) 80%, transparent); }
.dv-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dv-logo .logo-stage { grid-column: 1 / 3; } .dv-logo .sym img { width: 38%; }
.dv-pal { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; } .dv-pal div { aspect-ratio: 3 / 4; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11px; line-height: 1.45; }
.dv-apps { display: grid; gap: 22px; } .dv-apps figure { margin: 0; } .dv-apps .mat { background: var(--w-tint); } .dv-apps img { width: 100%; height: auto; display: block; } .dv-apps figcaption { margin-top: 8px; font-size: 11.5px; opacity: .86; }
.dv-next { display: grid; gap: 8px; padding: clamp(56px, 12vw, 150px) var(--gut); background: var(--n-paper); color: var(--n-ink); }
.dv-next .nt { font: 200 clamp(44px, 12vw, 176px)/.95 var(--f); letter-spacing: -.055em; } .dv-next .na { font-size: 32px; color: var(--n-acc); }
@media (min-width: 900px) {
  .dv-hero { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; } .dv-hero .dv-t { grid-column: 1 / 8; } .dv-hero .dv-f { grid-column: 8 / 13; }
  [data-variant="wide"] .dv-hero .dv-f { grid-column: 7 / 13; } [data-variant="stack"] .dv-hero .dv-f { grid-column: 1 / 6; order: -1; } [data-variant="stack"] .dv-hero .dv-t { grid-column: 7 / 13; }
  .dv-hero h1 { font-size: clamp(64px, 8.4vw, 132px); } [data-variant="ledger"] .dv-hero h1 { font-size: clamp(72px, 9.6vw, 148px); } [data-variant="stack"] .dv-hero h1 { font-size: clamp(52px, 6.4vw, 100px); }
  .dv-two { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; } .dv-two .dv-h { grid-column: 1 / 4; } .dv-two > div:nth-child(2) { grid-column: 4 / 9; } .dv-dia { grid-column: 9 / 13; width: 100%; }
  .dv-sec .wrap > .dv-h { margin-bottom: 32px; }
  .dv-strip { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } .dv-strip-sec .strip { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
  .dv-logo { grid-template-columns: 2fr 1fr 1fr; } .dv-logo .logo-stage { grid-column: 1; grid-row: 1; } .dv-logo .sym { aspect-ratio: auto; min-height: 100%; } .dv-logo .sym img { width: 44%; }
  .dv-pal div { aspect-ratio: 2 / 1; padding: 16px; }
  .dv-apps { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; } .dv-apps .a0 { grid-column: 1 / 8; } .dv-apps .a1 { grid-column: 8 / 13; align-self: end; } .dv-apps .a2 { grid-column: 1 / 6; } .dv-apps .a3 { grid-column: 6 / 13; align-self: start; }
  .dv-next { grid-template-columns: 1fr auto; align-items: end; padding-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); padding-right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); } .dv-next .lb { grid-column: 1 / 3; } .dv-next .na { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) { .dv-dia .ax-ring, .dv-dia .ax-sym { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } .dv-dia .cx-pane { transform: none !important; } }