:root {
  --bg: #f4f4f4;
  --fg: #111;
  --dim: #8c8c8c;
  --line: #dcdcdc;
  --tile: #e6e6e6;
  --pad: clamp(16px, 2.5vw, 36px);
  --gap: 4px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Inter Tight", system-ui, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* header */
header {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) var(--pad) 28px; font-size: 18px; letter-spacing: -.01em;
  color: #fff; mix-blend-mode: difference;
}
header nav { display: flex; gap: 28px; }
header a:hover { opacity: .6; }

/* home: reel */
.reel { position: relative; height: 100svh; max-height: 1100px; background: #000; overflow: hidden; }
.reel video { width: 100%; height: 100%; object-fit: cover; }

/* home: intro */
.intro { padding: clamp(80px, 12vw, 180px) var(--pad) clamp(56px, 8vw, 120px); }
.intro p { font-size: clamp(26px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -.025em; font-weight: 300; max-width: 22em; }
.intro p b { font-weight: 400; }

/* home: mosaic */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: 0 var(--pad); }
.tile { position: relative; overflow: hidden; background: var(--tile); display: block; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile video { opacity: 0; transition: opacity .4s; }
.tile.playing video { opacity: 1; }
.tile::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,0)); }
.tile .t {
  position: absolute; left: 18px; top: 14px; right: 18px; z-index: 2;
  color: #fff; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.08; letter-spacing: -.02em;
}

.c4 { grid-column: span 4; } .c6 { grid-column: span 6; }
.c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.rA { height: 38vw; } .rB { height: 30vw; } .rC { height: 32vw; } .rD { height: 26vw; }

/* home: info */
.info { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); padding: clamp(100px, 12vw, 180px) var(--pad) 0; }
.info h2 { grid-column: 1 / span 4; font-size: 18px; font-weight: 400; }
.info .body { grid-column: 5 / span 8; }
.info .body p { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -.02em; font-weight: 300; }
.info .body p + p { margin-top: .9em; color: var(--dim); }
.info dl, .credits { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 56px; font-size: 15px; line-height: 1.6; }
.info dt, .credits dt { color: var(--dim); margin-bottom: 6px; }

/* footer */
footer { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; padding: clamp(100px, 12vw, 180px) var(--pad) 28px; }
footer .mail { font-size: clamp(32px, 6vw, 88px); letter-spacing: -.04em; font-weight: 300; line-height: 1; overflow-wrap: anywhere; }
footer .mail:hover { opacity: .5; }
footer .small { font-size: 14px; color: var(--dim); display: flex; gap: 24px; }

/* project page */
.project-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); padding: clamp(110px, 12vw, 170px) var(--pad) clamp(32px, 4vw, 56px); }
.project-head h1 { grid-column: 1 / span 6; font-size: clamp(40px, 6vw, 96px); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.project-head .lede { grid-column: 7 / span 6; align-self: end; }
.project-head .lede p { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; letter-spacing: -.015em; font-weight: 300; }
.project-head .credits { margin-top: 32px; }

.hero-media { padding: 0 var(--pad); }
.hero-media .frame { display: flex; justify-content: center; }
.hero-media video, .hero-media img { width: 100%; max-height: 88svh; object-fit: contain; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: var(--gap) var(--pad) 0; }
.gallery figure { background: var(--tile); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figure.full { grid-column: span 2; }

.next { display: block; position: relative; margin: clamp(100px, 12vw, 180px) var(--pad) 0; height: 46vw; max-height: 640px; overflow: hidden; background: var(--tile); }
.next img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.next:hover img { transform: scale(1.03); }
.next::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0) 55%); }
.next .t { position: absolute; left: 18px; top: 14px; z-index: 2; color: #fff; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.025em; }
.next .t small { display: block; font-size: 15px; letter-spacing: 0; opacity: .75; margin-bottom: 6px; }

@media (max-width: 760px) {
  header { font-size: 15px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  header nav { gap: 16px; }
  header .tag { display: none; }
  .grid > .tile { grid-column: span 12; height: auto; aspect-ratio: 4 / 3; }
  .grid > .tile.tall { aspect-ratio: 4 / 5; }
  .info h2, .info .body, .project-head h1, .project-head .lede { grid-column: span 12; }
  .info dl, .credits { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure.full { grid-column: span 1; }
  .next { height: 70vw; }
}

/* signature: x-ray scanner (WebGL canvas does the image, this is the HUD on top) */
:root { --accent: #ff5a1f; --mono: "JetBrains Mono", ui-monospace, monospace; --kr: "IBM Plex Sans KR", "Inter Tight", sans-serif; }
canvas.xr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.scanning > canvas.xr { opacity: 1; }
.hero-media .frame, .gallery figure { position: relative; }
.tile, .reel, .hero-media .frame, .gallery figure { cursor: crosshair; }
.scan { position: absolute; top: 0; bottom: 0; left: 35%; width: 30%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s; }
.scanning > .scan { opacity: 1; }
.scan .r { position: absolute; left: 0; right: 0; top: 0; height: 9px;
  background:
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 40px) top / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 8px) top / 100% 4px no-repeat;
  opacity: .85; }
.scan .r.b { top: auto; bottom: 0; transform: scaleY(-1); }
.scan b, .scan em { position: absolute; font: 400 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--accent); white-space: pre; }
.scan b { left: 8px; top: 16px; }
.scan em { left: 8px; bottom: 16px; }
.scan .cy { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--accent) 0 10px, rgba(255,90,31,.28) 10px calc(100% - 10px), var(--accent) calc(100% - 10px)); }
.scan .cy::after { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 9px; background: var(--accent); }
/* fallback when WebGL is unavailable */
.no-gl > .scan { -webkit-backdrop-filter: grayscale(1) invert(1) contrast(1.35); backdrop-filter: grayscale(1) invert(1) contrast(1.35); }

/* korean client section */
.kr { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--gap); padding: clamp(100px, 12vw, 180px) var(--pad) 0; font-family: var(--kr); word-break: keep-all; }
.kr h2 { grid-column: 1 / span 4; font-size: 18px; font-weight: 400; }
.kr .body { grid-column: 5 / span 8; min-width: 0; }
.kr .body > p { font-size: clamp(21px, 2vw, 29px); line-height: 1.45; letter-spacing: -.02em; font-weight: 300; max-width: 30em; }
.kr dl { display: grid; grid-template-columns: 7em 1fr; gap: 14px 24px; margin-top: 48px; font-size: 16px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 24px; }
.kr dt { color: var(--dim); }
.kr .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 99px;
  font: 400 15px var(--kr); border: 1px solid var(--fg); background: var(--fg); color: var(--bg); cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--fg); }
.btn:hover { opacity: .75; }
.btn:focus-visible, .tile:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .kr h2, .kr .body { grid-column: span 12; }
  .kr dl { grid-template-columns: 1fr; gap: 4px; }
  .kr dd { margin-bottom: 12px; }
}
/* HUD stays readable on the orange look */
.scan[data-look="ORANGE"] b, .scan[data-look="ORANGE"] em { color: #2a0800; }
.scan[data-look="ORANGE"] .r { filter: brightness(.25); }