/* Layout: full-bleed reel as a film poster — title centered, client marks as credits above/below, a quiet index of four categories along the bottom; then a white gallery grid. */
:root{
  --bg:#ffffff;           /* page */
  --bg-2:#f3f2ef;         /* tile placeholder */
  --fg:#141413;           /* text on page */
  --fg-dim:#6d6b66;
  --fg-faint:#b9b6b0;
  --line:#e6e4df;
  --on-video:#ffffff;     /* text over the reel */
  --on-video-dim:rgba(255,255,255,.7);
  --on-video-line:rgba(255,255,255,.28);
  --mark-opacity:.62;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --kr:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--kr);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
body.intro-only .works,body.intro-only footer{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--fg);color:var(--bg);padding:8px 12px}

/* intro */
.intro{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;grid-template-rows:1fr auto;isolation:isolate;color:var(--on-video);background:#000}
.intro-media{position:absolute;inset:0;z-index:-1;cursor:pointer}
.reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-tall{display:none}
.intro-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.2) 0%,rgba(0,0,0,.4) 72%),linear-gradient(to bottom,rgba(0,0,0,.3),transparent 24%,transparent 68%,rgba(0,0,0,.55))}
.intro-billing{align-self:center;display:grid;justify-items:center;gap:clamp(24px,3.6vh,42px);padding:56px var(--gutter-r) 0 var(--gutter);pointer-events:none}
.marks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,2.6vw,44px);max-width:1100px}
.mark{display:block;opacity:var(--mark-opacity);filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
.title-copy{text-align:center}
.title-eyebrow{margin:0 0 6px;font-family:var(--sans);font-size:11px;letter-spacing:.42em;color:var(--on-video-dim)}
.title{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(46px,9.2vw,148px);line-height:.95;letter-spacing:.06em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.title-sub{margin:12px 0 0;font-size:13px;letter-spacing:.3em;color:var(--on-video-dim)}

/* bottom index: four quiet columns, number · Korean · English */
.intro-tabs{display:grid;grid-template-columns:repeat(5,1fr);margin:0 var(--gutter-r) 0 var(--gutter);padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--on-video-line)}
.intro-tabs a{position:relative;display:flex;align-items:baseline;gap:14px;padding:18px 0 0;color:var(--on-video-dim);transition:color .3s}
.intro-tabs a::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--on-video);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.intro-tabs a:hover,.intro-tabs a:focus-visible{color:var(--on-video)}
.intro-tabs a:hover::before,.intro-tabs a:focus-visible::before{width:calc(100% - 24px)}
.intro-tabs small{font-family:var(--sans);font-size:10px;letter-spacing:.18em;opacity:.7;font-variant-numeric:tabular-nums}
.intro-tabs span{font-size:15px;font-weight:500;letter-spacing:.24em}
.intro-tabs em{font-family:var(--display);font-style:italic;font-size:14px;letter-spacing:.02em;opacity:.75}

/* works */
.works{padding:0 0 64px;background:var(--bg)}
.works-bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:calc(44px + env(safe-area-inset-top,0px)) var(--gutter-r) 20px var(--gutter);background:var(--bg)}
.works-title{margin:0;display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.works-title small{font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.works-title span{font-size:15px;font-weight:500;letter-spacing:.24em}
.works-title em{font-family:var(--display);font-style:italic;font-size:14px;color:var(--fg-dim)}
.works-count{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--fg-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 var(--gutter-r) 0 var(--gutter);transition:opacity .25s}
.grid.fading{opacity:0}
.tile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);max-width:100%;color:#fff}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tile video{opacity:0}
.tile.playing video{opacity:1}
.tile:hover img,.tile:hover video{transform:scale(1.035)}
.tile-cap{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;gap:12px;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.tile-cap strong{font-weight:500;font-size:15px;line-height:1.35;min-width:0}
.tile-cap span{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.75);white-space:nowrap}

/* about */
.about{padding:8px var(--gutter-r) 24px var(--gutter);display:grid;gap:clamp(48px,7vw,96px)}
.about-lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start;border-top:1px solid var(--line);padding-top:clamp(32px,5vw,64px)}
.about-statement{margin:0;font-weight:500;font-size:clamp(30px,3.8vw,56px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.about-copy{display:grid;gap:16px;max-width:36em;font-size:16px;line-height:1.85;color:var(--fg)}
.about-copy p{margin:0}
.about-roles{margin-top:8px!important;font-family:var(--display);font-style:italic;font-size:17px;color:var(--fg-dim)}
.about-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fg)}
.about-steps li{display:grid;gap:6px;padding:18px 18px 0 0}
.about-steps small{font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--fg-dim)}
.about-steps strong{font-size:20px;font-weight:500;letter-spacing:.18em}
.about-steps span{font-size:13px;line-height:1.6;color:var(--fg-dim)}
.about-history h3,.about-meta h3{margin:0 0 18px;font-size:13px;font-weight:500;letter-spacing:.24em}
.about-history h3 span{margin-left:12px;font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:0;color:var(--fg-dim)}
.about-history ul{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,5vw,72px)}
.about-history li{break-inside:avoid;display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.about-history li strong{font-weight:500;min-width:0}
.about-history li span{color:var(--fg-dim);text-align:right}
.about-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:28px}
.about-meta p{margin:0;font-size:14px;line-height:1.9;color:var(--fg-dim)}
.about-meta a{color:var(--fg);border-bottom:1px solid var(--line)}
.about-mail{user-select:all}
@media (max-width:820px){.about-lead{grid-template-columns:1fr}.about-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}.about-history ul{columns:1}}
@media (max-width:640px){.about-meta{grid-template-columns:1fr}.about-history li{flex-direction:column;gap:2px}.about-history li span{text-align:left}}

footer{border-top:1px solid var(--line);margin:0 var(--gutter-r) 0 var(--gutter);background:var(--bg)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:24px 0 calc(28px + env(safe-area-inset-bottom,0px));font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--fg-dim)}
.footer-top a:hover{color:var(--fg)}
.search-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding:28px 0 0;font-size:13px;color:var(--fg-dim)}
.search-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.search-label{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--fg-faint)}

/* dialogs */
dialog{border:0;padding:0;background:var(--bg);color:var(--fg);max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(255,255,255,.9)}
body.locked{overflow:hidden}
.dialog-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter-r) 18px var(--gutter);background:var(--bg);font-family:var(--sans);font-size:11px;letter-spacing:.2em}
.dialog-top button{letter-spacing:.2em}
.project-content{padding:8px var(--gutter-r) 48px var(--gutter);max-width:1500px;margin:0 auto}
.project-heading{display:grid;gap:4px;margin-bottom:28px}
.eyebrow{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.24em;color:var(--fg-dim)}
.project-heading h2{margin:0;font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.2;text-wrap:balance}
.project-heading p:last-child{margin:0;color:var(--fg-dim)}
.project-videos{display:grid;gap:16px}
.player-shell{position:relative;aspect-ratio:16/9;background:#000;color:#fff}
.player-shell video{width:100%;height:100%;object-fit:contain}
.start-film{position:absolute;inset:0;display:grid;place-content:center;gap:6px;font-size:40px;background:rgba(0,0,0,.25)}
.start-film span{font-family:var(--sans);font-size:11px;letter-spacing:.24em}
.project-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:6px}
.project-photos button{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.project-photos img{width:100%;height:100%;object-fit:cover}
.project-footer{margin-top:18px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--fg-dim)}
.preview-note{margin:10px 0 0;font-size:12px;color:var(--fg-dim)}
#imageDialog{background:rgba(255,255,255,.98);display:none;place-items:center}
#imageDialog[open]{display:grid}
#imageDialog img{max-width:92vw;max-height:84vh;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{position:fixed;font-size:26px;padding:14px;color:var(--fg)}
.lightbox-close{top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px))}
.lightbox-prev{left:calc(6px + env(safe-area-inset-left,0px));top:50%}
.lightbox-next{right:calc(6px + env(safe-area-inset-right,0px));top:50%}
#imageCaption{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:12px;letter-spacing:.12em;color:var(--fg-dim)}

@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .reel-wide{display:none}.reel-tall{display:block}
  .intro-billing{padding-top:40px;gap:22px}
  .marks{gap:12px 18px;max-width:340px}
  .title{font-size:clamp(34px,11vw,52px);letter-spacing:.04em}
  .title-sub{font-size:11px;letter-spacing:.18em}
  .intro-tabs{grid-template-columns:repeat(3,1fr)}
  .intro-tabs a{padding-top:14px;gap:10px}
  .intro-tabs em{display:none}
  .intro-tabs span{font-size:14px;letter-spacing:.2em}
  .works-bar{padding-top:calc(28px + env(safe-area-inset-top,0px))}
  .grid{gap:4px}
  .tile-cap{padding:28px 10px 9px}
  .tile-cap strong{font-size:12px}
  .tile-cap span{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile img,.tile video,.grid,.intro-tabs a::before{transition:none}}