@font-face{font-family:'Galmuri11 KR';src:url('/assets/fonts/galmuri/Galmuri11-ko.woff2') format('woff2');unicode-range:U+AC00-D7A3,U+3131-318E;font-display:swap}
@font-face{font-family:'Galmuri14 KR';src:url('/assets/fonts/galmuri/Galmuri14-ko.woff2') format('woff2');unicode-range:U+AC00-D7A3,U+3131-318E;font-display:swap}
@font-face{font-family:'Galmuri11';src:url('/assets/fonts/galmuri/Galmuri11-ko.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Galmuri14';src:url('/assets/fonts/galmuri/Galmuri14-ko.woff2') format('woff2');font-display:swap}
@font-face{font-family:'DungGeunMo';src:url('/assets/fonts/DungGeunMo.woff2') format('woff2'), url('/assets/fonts/DungGeunMo.woff') format('woff');font-display:swap}
:root{
  --bg:#030706;--panel:#06100b;--line:#355744;--line-hi:#6dff9c;
  --ink:#e7f4eb;--dim:#759280;--green:#68ff9a;--acid:#d8e53b;--black:#010302;
  --gutter:clamp(16px,4vw,64px);
}
*{box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;background:var(--bg);-ms-overflow-style:none;scrollbar-width:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Galmuri11 KR','DungGeunMo','IBM Plex Mono','Consolas',monospace;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:transparent!important}
button,a{font:inherit}
a{color:inherit}
::selection{background:var(--green);color:#001507}
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(rgba(104,255,154,.024) 1px,transparent 1px),
  linear-gradient(90deg,rgba(104,255,154,.024) 1px,transparent 1px);
  background-size:48px 48px}
.ambient:after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 76% 18%,rgba(104,255,154,.06),transparent 25%),
  linear-gradient(180deg,transparent 0 60%,rgba(0,0,0,.45));mix-blend-mode:screen}
.studio-nav,main,footer{position:relative;z-index:1}
.studio-nav{position:fixed;top:0;left:0;right:0;height:68px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(104,255,154,.22);background:rgba(3,7,6,.82);backdrop-filter:blur(14px);z-index:20}
.studio-mark{text-decoration:none;font-size:var(--fs-m);font-family:var(--f-mid);letter-spacing:2.6px;font-weight:700;white-space:nowrap}
.nav-tools{display:flex;align-items:center;gap:12px}
.language-switch{display:flex;align-items:center;gap:6px}
.language-switch button{appearance:none;border:1px solid transparent;background:transparent;color:var(--dim);padding:8px 10px;cursor:pointer;font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1px;transition:color .2s ease,border-color .2s ease,background .2s ease}
.language-switch button:hover{color:var(--ink);border-color:var(--line)}
.language-switch button.active{color:var(--green);border-color:var(--line-hi);background:rgba(104,255,154,.06)}
.studio-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding:clamp(110px,15vh,170px) var(--gutter) 42px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line);background:#020504}
.studio-hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.88) contrast(1.06) brightness(1.24);transform:scale(1.02);opacity:1;visibility:visible}
.studio-hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.28) 48%,rgba(0,0,0,.34) 100%),
  linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.42) 100%)}
.hero-title,.hero-bottom{position:relative;z-index:2}
.hero-title{display:flex;align-items:center;flex:1;padding:4vh 0}
.studio-hero h1{margin:0;font-family:Arial Black,'Arial Narrow','Pretendard KR',sans-serif;font-size:clamp(72px,15vw,225px);font-weight:900;line-height:.72;letter-spacing:-.082em;text-transform:uppercase}
.studio-hero h1 span{display:block}
.studio-word i{font:inherit;font-style:normal}
.studio-hero h1 span:first-child{
  color:transparent;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.082em;
  font-weight:900;
  background:
    repeating-linear-gradient(
      to bottom,
      #f4fff7 0,
      #f4fff7 3px,
      rgba(244,255,247,.62) 3px,
      rgba(244,255,247,.62) 4px,
      transparent 4px,
      transparent 5px
    );
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.32)) drop-shadow(0 0 7px rgba(49,255,106,.10));
}
.studio-hero h1 span:last-child{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #f4fff7;margin-left:8vw;text-shadow:none;filter:drop-shadow(0 0 3px rgba(244,255,247,.78)) drop-shadow(0 0 10px rgba(244,255,247,.34)) drop-shadow(0 0 24px rgba(244,255,247,.14))}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-top:1px solid rgba(104,255,154,.24);padding-top:20px}
.hero-bottom p{margin:0;max-width:920px;color:#dce9e0;font-size:clamp(12px,1.05vw,15px);line-height:1.8;text-shadow:0 2px 14px rgba(0,0,0,.72)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:0 0 auto}
.footage-note{color:#9ab1a2;font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:.7px;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.hero-bottom a{flex:0 0 auto;text-decoration:none;color:var(--ink);font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.4px;border:1px solid var(--line);padding:12px 16px;transition:transform .22s ease,border-color .22s ease,background .22s ease}
.hero-bottom a:hover{border-color:var(--green);background:rgba(104,255,154,.08);transform:translateY(-2px)}
.projects{padding:clamp(72px,9vw,130px) var(--gutter) clamp(90px,10vw,150px)}
.projects-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.projects-head h2{margin:0;font-family:Arial Black,'Pretendard KR',sans-serif;font-size:clamp(28px,4vw,58px);letter-spacing:-.04em}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);perspective:1400px}
.project-card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;aspect-ratio:auto;min-width:0;overflow:hidden;border:1px solid var(--line);background:var(--panel);text-decoration:none;display:flex;flex-direction:column;transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.75,.2,1),border-color .24s ease,box-shadow .24s ease,background .24s ease;will-change:transform}
.project-card:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(104,255,154,.15),transparent 35%);transition:opacity .22s ease}
.project-card:hover,.project-card:focus-visible{transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.025);border-color:var(--green);box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px rgba(104,255,154,.12)}
.project-card:hover:before,.project-card:focus-visible:before{opacity:1}
.project-card:focus-visible{outline:1px solid var(--acid);outline-offset:4px}
.corner{position:absolute;z-index:7;width:22px;height:22px;pointer-events:none}
.corner-a{top:10px;left:10px;border-top:1px solid var(--acid);border-left:1px solid var(--acid)}
.corner-b{right:10px;bottom:10px;border-right:1px solid var(--green);border-bottom:1px solid var(--green)}
.project-art{position:relative;flex:0 0 auto;aspect-ratio:920/430;display:flex;align-items:center;justify-content:center;background:#020403;overflow:hidden;border-bottom:1px solid var(--line)}
.project-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.75,.2,1),filter .35s ease;filter:saturate(.86) contrast(1.02)}
.project-live:hover .project-art img,.project-live:focus-visible .project-art img{transform:scale(1.055);filter:saturate(1) contrast(1.04)}
.project-info{position:relative;z-index:5;flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(16px,2vw,26px)}
.project-main{align-self:flex-start}
.project-index{display:block;color:var(--green);font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.25px;margin-bottom:9px}
.project-info h3{margin:0;font-family:Arial Black,'Pretendard KR',sans-serif;font-size:clamp(24px,3.5vw,54px);letter-spacing:-.04em;line-height:.9}
.project-genre{margin:12px 0 0;color:var(--dim);font-size:clamp(var(--fs-s),.92vw,12px);font-family:var(--f-small);line-height:1.55;letter-spacing:1.05px;text-transform:uppercase}
.project-meta{text-align:right;display:flex;flex-direction:column;gap:8px;align-items:flex-end;align-self:flex-end}
.project-meta span{color:var(--dim);font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:.9px}
.project-meta strong,.next-note strong{font-size:var(--fs-s);font-family:var(--f-small);line-height:1.45;letter-spacing:1px;font-weight:400;color:var(--ink)}
.project-next{background:#010302}
.next-field{position:relative;flex:1;padding:clamp(20px,3vw,38px);display:flex;flex-direction:column;justify-content:space-between;background:
  linear-gradient(rgba(104,255,154,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(104,255,154,.03) 1px,transparent 1px),#010302;background-size:34px 34px}
.next-title{position:relative;z-index:2;margin:auto 0}
.next-field h3{position:relative;z-index:2;margin:0;font-family:Arial Black,'Pretendard KR',sans-serif;font-size:clamp(42px,6.3vw,96px);line-height:.82;letter-spacing:-.06em}
.next-field h3 em{font-style:normal;color:var(--green)}
.tease-redacted{
  position:relative;
  display:inline-block;
  overflow:hidden;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:
    repeating-linear-gradient(
      to bottom,
      #68ff9a 0,
      #68ff9a 2px,
      rgba(104,255,154,.54) 2px,
      rgba(104,255,154,.54) 3px,
      #68ff9a 3px,
      #68ff9a 5px
    );
  background-size:100% 5px;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 3px rgba(104,255,154,.28),0 0 11px rgba(104,255,154,.10);
  animation:teaseCrtScan .34s linear infinite,teaseCrtFlicker 4.6s steps(2,end) infinite;
}
.tease-redacted:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18%;
  height:2px;
  pointer-events:none;
  background:rgba(230,255,238,.72);
  box-shadow:0 0 5px rgba(104,255,154,.48);
  opacity:0;
  animation:teaseCrtSweep 5.2s linear infinite;
}
.tease-redacted:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);
  opacity:.32;
}
@keyframes teaseCrtScan{
  from{background-position:0 0}
  to{background-position:0 5px}
}
@keyframes teaseCrtFlicker{
  0%,12%,14%,42%,44%,73%,75%,100%{opacity:1;transform:translateX(0);filter:brightness(1)}
  13%{opacity:.84;transform:translateX(.8px);filter:brightness(1.18)}
  43%{opacity:.94;transform:translateX(-.7px);filter:brightness(.88)}
  74%{opacity:.88;transform:translateX(.5px);filter:brightness(1.12)}
}
@keyframes teaseCrtSweep{
  0%,68%{top:-18%;opacity:0}
  69%{opacity:.62}
  76%{top:112%;opacity:.18}
  77%,100%{top:112%;opacity:0}
}
.project-genre-next{margin-top:18px;max-width:500px;color:#8ea797}
.next-line{height:1px;background:linear-gradient(90deg,var(--acid),rgba(216,229,59,0));transform-origin:left;transition:transform .35s ease}
.project-next:hover .next-line,.project-next:focus-visible .next-line{transform:scaleX(.68)}
.project-next .project-info{align-items:flex-end;border-top:1px solid var(--line)}
.next-note{display:flex;flex-direction:column;gap:8px;max-width:62%}
footer{min-height:96px;padding:28px var(--gutter);border-top:1px solid var(--line);display:flex;align-items:flex-end;color:var(--dim);font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.1px}
@media(max-width:980px){
  .studio-hero h1{font-size:clamp(72px,18vw,180px)}
  .project-grid{grid-template-columns:1fr;gap:20px}
  .project-card{aspect-ratio:auto;min-height:0}
  .project-art{width:100%}
  .next-field{min-height:360px}
}
@media(max-width:700px){
  .studio-nav{height:60px;padding:0 14px;gap:10px}
  .studio-mark{font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.8px}
  .language-switch{gap:3px}
  .language-switch button{font-size:var(--fs-s);font-family:var(--f-small);padding:7px 8px;letter-spacing:.5px}
  .studio-hero{min-height:max(100svh,680px);padding:82px 14px 22px;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  .studio-hero-video{object-position:55% center}
  .studio-hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.38) 58%,rgba(0,0,0,.70) 100%)}
  .hero-title{align-items:center;min-height:0;padding:20px 0 26px}
  .studio-hero h1{font-size:clamp(56px,19vw,104px);line-height:1;letter-spacing:0;width:100%;display:flex;flex-direction:column;gap:.18em}
  .studio-hero h1 span{line-height:.82}
  .studio-hero h1 span:first-child{letter-spacing:-.07em}
  .studio-hero h1 span:last-child{margin-left:0;margin-top:0;font-size:.90em;letter-spacing:0;word-spacing:0;font-kerning:none;font-feature-settings:"kern" 0;-webkit-text-stroke:1.5px #f4fff7;text-shadow:none;filter:drop-shadow(0 0 2px rgba(244,255,247,.72)) drop-shadow(0 0 8px rgba(244,255,247,.28)) drop-shadow(0 0 18px rgba(244,255,247,.12))}
  .studio-word{display:flex!important;align-items:baseline;justify-content:flex-start;gap:.075em;white-space:nowrap;font-family:Roboto,'Noto Sans',Arial,sans-serif;font-weight:100}
  .studio-word i{display:block;flex:0 0 auto;line-height:1;font-family:inherit;font-style:normal;font-weight:100;letter-spacing:0;color:#f4fff7;-webkit-text-fill-color:#f4fff7;-webkit-text-stroke:0;text-shadow:0 0 2px rgba(244,255,247,.78),0 0 8px rgba(244,255,247,.26)}

  .hero-bottom{align-items:stretch;flex-direction:column;gap:14px;padding-top:14px;position:relative;z-index:3;background:linear-gradient(180deg,rgba(2,5,4,.08),rgba(2,5,4,.34))}
  .hero-bottom p{max-width:none;font-size:var(--fs-s);font-family:var(--f-small);line-height:1.72}
  .hero-actions{align-items:flex-start;gap:9px}
  .footage-note{font-size:var(--fs-s);font-family:var(--f-small);white-space:normal}
  .hero-bottom a{align-self:flex-start}
  .projects{padding:70px 14px 90px}
  .project-info{padding:18px;gap:14px}
  .project-info h3{font-size:clamp(28px,10vw,48px)}
  .project-meta span{display:none}
  .project-genre{font-size:var(--fs-s);font-family:var(--f-small);line-height:1.5}
  .next-field{padding:22px;min-height:330px}
  .next-field h3{font-size:clamp(46px,14vw,74px)}
  .next-note{max-width:66%}
}
@media(max-width:420px){
  .studio-mark{font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.35px}
  .language-switch button{padding:6px 6px}
  .studio-hero h1{font-size:clamp(50px,18.2vw,76px)}
  .project-info{flex-direction:column;justify-content:space-between}
  .project-meta{align-self:flex-start;text-align:left;align-items:flex-start}
  .next-note{max-width:none}
  .project-next .project-info{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .project-card,.project-art img,.hero-bottom a,.next-line{transition:none!important}
  .tease-redacted,.tease-redacted:before,.tease-redacted:after{animation:none!important;transform:none!important}
  .project-card:hover,.project-card:focus-visible{transform:none}
  .studio-hero-video{transform:none}
}
@media(max-width:700px) and (max-height:740px){
  .studio-hero{min-height:700px}
  .hero-title{padding:12px 0 20px}
  .studio-hero h1{font-size:clamp(48px,16.5vw,82px)}
  .studio-hero h1 span{line-height:.84}
  .studio-hero h1{gap:.16em}
  .hero-bottom p{font-size:var(--fs-s);font-family:var(--f-small);line-height:1.62}
}


/* PROJECT 02 — DECKWAKE CAPSULE
   Industrial cassette realism: gunmetal hull plate, aged ivory plastic,
   amber CRT, emergency red, hazard paint. Sized with container queries so the
   same capsule fits each theme's slot. Motion recipes from transitions.dev
   (texts reveal, number pop-in, card hover tilt, text states swap, matrix dot
   loader, shimmer text), each with a reduced-motion guard. */
@font-face{font-family:'Saira Stencil One';src:url('/assets/fonts/SairaStencilOne-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Share Tech Mono';src:url('/assets/fonts/ShareTechMono-latin.woff2') format('woff2');font-display:swap}
.project-deck{
  /* colours from the in-engine footage: blue-grey steel, emergency red accent, monitor teal */
  --dk-hull:#141a1e;--dk-hull-2:#080b0d;--dk-ivory:#e2e8ec;--dk-ivory-dim:#8e9ba5;
  --dk-amber:#d9342a;--dk-red:#e3352b;--dk-teal:#6fe0bf;
  --stagger-dur:500ms;--stagger-distance:12px;--stagger-stagger:45ms;--stagger-blur:3px;--stagger-ease:cubic-bezier(0.22,1,0.36,1);
  --digit-dur:500ms;--digit-distance:8px;--digit-stagger:70ms;--digit-blur:2px;--digit-ease:cubic-bezier(0.34,1.45,0.64,1);
  --tilt-perspective:1000px;--tilt-return:1000ms;--tilt-return-ease:cubic-bezier(0.22,1,0.36,1);--tilt-follow:400ms;--tilt-follow-ease:cubic-bezier(0.22,1,0.36,1);
  --tilt-glare-opacity:.26;--tilt-glare-fade:300ms;--tilt-glare-ease:cubic-bezier(0.22,1,0.36,1);
  --text-swap-dur:150ms;--text-swap-translate-y:4px;--text-swap-blur:2px;--text-swap-ease:ease-in-out;
  --matrix-cycle:1200ms;--matrix-base:rgba(111,224,191,.16);--matrix-active:#6fe0bf;--matrix-ease:ease-in-out;
  --shimmer-dur:2600ms;--shimmer-base:#3f8f78;--shimmer-highlight:#d6fff3;--shimmer-band:400%;--shimmer-ease:linear;
  background:#07090b;
}
.project-grid>.project-spring{grid-column:1/-1;aspect-ratio:auto}

/* The capsule slot: a dark bay holding one tilting hull plate. */
.project-deck .next-field.deck-capsule{
  display:flex;padding:clamp(10px,1.6vw,22px);
  background:radial-gradient(120% 90% at 50% 100%,rgba(227,53,43,.10),transparent 60%),#07090a;
  container-type:inline-size;container-name:deck;
}
.deck-cap{
  --hz:0px;
  --pad:clamp(16px,4.6cqi,46px);
  position:relative;flex:1;min-height:100%;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;
  gap:clamp(14px,3.2cqi,30px);
  padding:var(--pad) var(--pad) calc(var(--pad) + var(--hz));
  overflow:hidden;isolation:isolate;
  border:1px solid rgba(200,214,224,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.55);
  background:linear-gradient(180deg,var(--dk-hull),var(--dk-hull-2));
  color:var(--dk-ivory);
}
/* Hull: frames from the footage. Emergency-lit by default; the lit corridor fades in
   when power is restored. */
.deck-hull{position:absolute;inset:0;z-index:-2;pointer-events:none;isolation:isolate;background:#050709 url('/assets/media/deckwake/deckwake-emergency-960.jpg?v=2') center/cover no-repeat}
.deck-hull:after{content:"";position:absolute;inset:0;z-index:0;opacity:0;background:url('/assets/media/deckwake/deckwake-corridor-960.jpg?v=2') center 40%/cover no-repeat;transition:opacity .7s cubic-bezier(0.22,1,0.36,1)}
.deck-hull:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(5,7,9,.92) 0%,rgba(5,7,9,.45) 38%,rgba(5,7,9,.1) 70%),linear-gradient(90deg,rgba(5,7,9,.55),rgba(5,7,9,0) 60%)}
.deck-capsule.is-restored .deck-hull:after{opacity:1}
/* Practical light: emergency red by default, fluorescent white when power is restored. */
.deck-light{position:absolute;inset:0;z-index:-1;pointer-events:none}
.deck-light:before,.deck-light:after{content:"";position:absolute;inset:0;transition:opacity .7s cubic-bezier(0.22,1,0.36,1)}
.deck-light:before{background:radial-gradient(55% 50% at 92% 4%,rgba(227,53,43,.30),transparent 70%),linear-gradient(180deg,rgba(227,53,43,.06),transparent 40%);animation:deckEmergency 3.2s ease-in-out infinite}
.deck-light:after{opacity:0;background:linear-gradient(180deg,rgba(214,236,240,.20),rgba(214,236,240,0) 46%),radial-gradient(70% 40% at 50% 0%,rgba(230,246,248,.18),transparent 70%)}
.deck-capsule.is-restored .deck-light:before{opacity:.15}
.deck-capsule.is-restored .deck-light:after{opacity:1}
@keyframes deckEmergency{0%,100%{opacity:.75}50%{opacity:1}}

.deck-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:2}
.project-deck .deck-cap span.project-index,
:root .project-deck .deck-cap .project-index{display:inline-block;margin:0;padding:5px 7px;background:var(--dk-amber);color:#fff;font-family:'Share Tech Mono','Galmuri11 KR','DungGeunMo',monospace;font-size:var(--fs-s);letter-spacing:1.6px;line-height:1.2}
.deck-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Saira Stencil One',Impact,'Pretendard KR',sans-serif;font-size:clamp(var(--fs-s),1.9cqi,14px);letter-spacing:.14em;color:var(--dk-ivory-dim);white-space:nowrap}
.deck-beacon{display:block;width:8px;height:8px;border-radius:50%;background:var(--dk-red);box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 10px 2px rgba(227,53,43,.75);animation:deckBeacon 1.6s steps(1,end) infinite}
.deck-capsule.is-restored .deck-beacon{background:#7fe08a;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 10px 2px rgba(127,224,138,.6);animation:none}
@keyframes deckBeacon{0%,60%{opacity:1}61%,100%{opacity:.25}}

.deck-titleblock{position:relative;z-index:2;align-self:end;display:flex;flex-direction:column;gap:clamp(8px,1.6cqi,14px)}
.project-deck .deck-capsule h3.deck-title{margin:0;display:flex;flex-wrap:nowrap;font-family:'Saira Stencil One',Impact,'Pretendard KR',sans-serif;font-weight:400;font-size:clamp(40px,15cqi,150px);line-height:.86;letter-spacing:.01em;color:var(--dk-ivory);text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.6)}
.deck-title .t-stagger-line{display:inline-block}
.deck-sub{font-family:'Share Tech Mono','Galmuri11 KR','DungGeunMo',monospace;font-size:clamp(var(--fs-s),1.7cqi,13px);letter-spacing:.32em;color:var(--dk-ivory-dim)}
.deck-sub:before{content:"";display:inline-block;width:2.2em;height:1px;margin-right:.8em;vertical-align:middle;background:var(--dk-amber)}

/* Aged ivory CRT bezel with an amber phosphor screen. */
.deck-crt{position:relative;z-index:2;justify-self:start;width:min(100%,330px);padding:6px;background:linear-gradient(180deg,#2b343b,#14191d);border:1px solid rgba(0,0,0,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.55)}
.deck-crt-screen{position:relative;overflow:hidden;padding:10px 12px;display:grid;gap:6px;background:radial-gradient(120% 140% at 50% 50%,#08201a,#020806 75%);box-shadow:inset 0 0 18px rgba(0,0,0,.9);font-family:'Share Tech Mono','Galmuri11 KR','DungGeunMo',monospace;font-size:clamp(var(--fs-s),1.8cqi,12.5px);letter-spacing:.08em;color:var(--dk-teal);text-shadow:0 0 6px rgba(111,224,191,.45)}
.deck-crt-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.deck-crt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;min-height:1.25em;overflow:hidden}
.deck-crt-state{color:#ff8a80}
.deck-capsule.is-restored .deck-crt-state{color:#bff3c5;text-shadow:0 0 6px rgba(127,224,138,.45)}


/* Wide slots: title left, CRT right. */
@container deck (min-width:600px){
  .deck-cap{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto}
  .deck-top{grid-column:1/-1;grid-row:1}
  .deck-crt{grid-column:2;grid-row:2;align-self:start;justify-self:end;width:clamp(210px,31cqi,300px)}
  .deck-titleblock{grid-column:1/-1;grid-row:3}
  .project-deck .deck-capsule h3.deck-title{font-size:clamp(48px,12.4cqi,140px)}
}
@container deck (max-width:340px){
  .deck-tag{display:none}
}

/* Info column copy. */
.project-deck .next-note{gap:14px}
.deck-genre{margin:0}
.project-deck .deck-status{display:block;font-family:'Share Tech Mono','Galmuri11 KR','DungGeunMo',monospace;font-size:var(--fs-s);letter-spacing:1.4px}
.deck-year{display:inline-flex;align-items:baseline;vertical-align:baseline;font-family:'Saira Stencil One',Impact,'Pretendard KR',sans-serif;font-size:2.4em;letter-spacing:.04em;line-height:1;color:var(--dk-amber)}

/* transitions.dev — texts reveal (title letters). */
.deck-anim .t-stagger-line{opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease),transform var(--stagger-dur) var(--stagger-ease),filter var(--stagger-dur) var(--stagger-ease);transition-delay:calc(var(--stagger-stagger) * var(--i,0));will-change:transform,opacity,filter}
.deck-anim .t-stagger.is-shown .t-stagger-line{opacity:1;transform:translateY(0);filter:blur(0)}
/* transitions.dev — number pop-in (year). */
@keyframes t-digit-pop-in{0%{transform:translate(0,var(--digit-distance));opacity:0;filter:blur(var(--digit-blur))}100%{transform:translate(0,0);opacity:1;filter:blur(0)}}
.t-digit-group{display:inline-flex;align-items:baseline}
.t-digit{display:inline-block;will-change:transform,opacity,filter}
.t-digit-group.is-animating .t-digit{animation:t-digit-pop-in var(--digit-dur) var(--digit-ease) both}
.t-digit-group.is-animating .t-digit[data-stagger="1"]{animation-delay:var(--digit-stagger)}
.t-digit-group.is-animating .t-digit[data-stagger="2"]{animation-delay:calc(var(--digit-stagger) * 2)}
/* transitions.dev — card hover tilt (hull plate + glare). */
.t-tilt-card{transform:perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));transform-style:preserve-3d;transition:transform var(--tilt-return) var(--tilt-return-ease);will-change:transform}
.t-tilt-card.is-tilting{transition:transform var(--tilt-follow) var(--tilt-follow-ease)}
.t-tilt-glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;background:
  radial-gradient(circle 95px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,240,214,.48),rgba(255,240,214,.06) 52%,rgba(255,240,214,0) 84%),
  radial-gradient(circle 200px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,240,214,.22),rgba(255,240,214,.04) 58%,rgba(255,240,214,0) 78%),
  radial-gradient(circle 360px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgba(255,240,214,.10),rgba(255,240,214,0) 88%);
  transition:opacity var(--tilt-glare-fade) var(--tilt-glare-ease)}
.t-tilt.is-hover .t-tilt-glare{opacity:var(--tilt-glare-opacity)}
/* transitions.dev — text states swap (power state). */
.t-text-swap{display:inline-block;transform:translateY(0);filter:blur(0);opacity:1;transition:transform var(--text-swap-dur) var(--text-swap-ease),filter var(--text-swap-dur) var(--text-swap-ease),opacity var(--text-swap-dur) var(--text-swap-ease);will-change:transform,filter,opacity}
.t-text-swap.is-exit{transform:translateY(calc(var(--text-swap-translate-y) * -1));filter:blur(var(--text-swap-blur));opacity:0}
.t-text-swap.is-enter-start{transform:translateY(var(--text-swap-translate-y));filter:blur(var(--text-swap-blur));opacity:0;transition:none}
/* transitions.dev — matrix dot loader, scan variant. */
.t-matrix{display:grid;grid-template-columns:repeat(4,3px);grid-auto-rows:3px;gap:2px}
.t-matrix i{display:block;background:var(--matrix-base);animation:t-matrix-pulse var(--matrix-cycle) var(--matrix-ease) infinite;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes t-matrix-pulse{0%,45%,100%{background-color:var(--matrix-base)}15%{background-color:var(--matrix-active)}}
/* transitions.dev — shimmer text. */
.t-shimmer{position:relative;display:inline-block;color:var(--shimmer-base)}
.t-shimmer:before{content:attr(data-text);position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,transparent 0%,transparent 40%,var(--shimmer-highlight) 50%,transparent 60%,transparent 100%);background-size:var(--shimmer-band) 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite}
@keyframes t-shimmer{0%{background-position:100% 0}100%{background-position:0% 0}}

/* Theme slots. CRT (base) shares the dark next-card styling. */
.project-deck .project-info{border-top-color:rgba(217,52,42,.32)}

@media(max-width:980px){
  .project-deck .next-field.deck-capsule{min-height:420px}
}
@media(max-width:700px){
  .project-deck .next-field.deck-capsule{min-height:400px;padding:10px}
}
@media(prefers-reduced-motion:reduce){
  .deck-anim .t-stagger-line{transition:none!important}
  .t-digit-group .t-digit{animation:none!important}
  .t-tilt-card{transform:none!important;transition:none!important}
  .t-text-swap{transition:none!important}
  .t-matrix i,.t-shimmer:before,.deck-light:before,.deck-beacon{animation:none!important}
}
.project-deck .deck-view{font-family:'Share Tech Mono','Galmuri11 KR','DungGeunMo',monospace;font-size:var(--fs-s);letter-spacing:1.6px;color:var(--dk-ivory)}
.project-deck .deck-view:after{content:" \2192";color:var(--dk-amber);display:inline-block;transition:transform .25s cubic-bezier(0.22,1,0.36,1)}
.project-deck:hover .deck-view:after,.project-deck:focus-visible .deck-view:after{transform:translateX(4px)}


/* STUDIO SECTIONS — roadmap, tech, about, press, news, contact.
   Theme colors come from --ink / --dim / --line / --green / --panel. */
.st-sec{position:relative;z-index:1;padding:clamp(56px,7vw,104px) var(--gutter) 0}
.st-sec:last-of-type{padding-bottom:clamp(72px,8vw,120px)}
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2.6vw,32px);padding-bottom:12px;border-bottom:1px solid var(--line)}
.st-head h2{margin:0;font-family:Arial Black,Arial,Helvetica,'Pretendard KR',sans-serif;font-size:clamp(28px,4vw,56px);font-weight:900;letter-spacing:-.04em;line-height:.9;color:var(--ink)}
.st-head span,.st-head a{font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.4px;color:var(--dim);text-decoration:none;white-space:nowrap}
.st-head a:hover{color:var(--green)}
.st-lead{max-width:760px;margin:0 0 clamp(20px,2.4vw,30px);font-size:clamp(13px,1.15vw,15px);line-height:1.8;color:var(--ink)}
.st-k{display:block;margin-bottom:12px;font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.4px;color:var(--green)}

/* Roadmap */
.st-road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--line)}
.st-road li{position:relative;padding:26px clamp(12px,1.4vw,20px) 0 0;min-width:0}
.st-road li:before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;background:var(--bg);border:2px solid var(--dim)}
.st-road li.is-now:before{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(104,255,154,.12)}
.st-when{display:block;font-family:Arial Black,Arial,Helvetica,'Pretendard KR',sans-serif;font-size:clamp(20px,2vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.st-road li.is-now .st-when{color:var(--green)}
.st-road strong{display:block;margin:12px 0 8px;font-size:var(--fs-s);font-family:var(--f-small);font-weight:400;letter-spacing:1.2px;line-height:1.5;color:var(--ink)}
.st-road p{margin:0;font-size:var(--fs-s);font-family:var(--f-small);line-height:1.7;color:var(--dim)}

/* Tech + contact grids */
.st-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.st-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.st-cell{min-width:0;padding:clamp(18px,2vw,26px);background:var(--panel)}
.st-cell h3{margin:0 0 10px;font-family:Arial,Helvetica,'Pretendard KR',sans-serif;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.st-cell p{margin:0;font-size:var(--fs-s);font-family:var(--f-small);line-height:1.75;color:var(--dim)}
.st-link{display:block;text-decoration:none;transition:background .2s ease}
.st-link strong{display:block;font-size:clamp(12px,1.1vw,14px);font-weight:400;letter-spacing:.6px;color:var(--ink);overflow-wrap:anywhere}
.st-link:hover,.st-link:focus-visible{background:var(--black)}
.st-link:hover strong,.st-link:focus-visible strong{color:var(--green)}

/* About */
.st-about-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:start}
.st-about-body .st-lead{margin:0}
.st-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.st-facts div{padding:16px 18px;background:var(--panel)}
.st-facts dt{margin-bottom:8px;font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.4px;color:var(--dim)}
.st-facts dd{margin:0;font-family:Arial Black,Arial,Helvetica,'Pretendard KR',sans-serif;font-size:clamp(22px,2.4vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--ink)}

/* Press */
.st-press-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2.4vw,32px);padding:clamp(18px,2.2vw,28px);border:1px solid var(--line);background:var(--panel);text-decoration:none;transition:border-color .2s ease}
.st-press-card .st-k{margin:0}
.st-press-card strong{font-family:Arial,Helvetica,'Pretendard KR',sans-serif;font-size:clamp(15px,1.6vw,22px);font-weight:700;line-height:1.3;color:var(--ink)}
.st-go{font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.4px;color:var(--dim);white-space:nowrap}
.st-go:after{content:" \2197";color:var(--green)}
.st-press-card:hover,.st-press-card:focus-visible{border-color:var(--green)}

/* News */
.st-news-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.st-news-list a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:var(--fs-m);font-family:var(--f-mid);line-height:1.5;transition:color .2s ease,padding .25s cubic-bezier(0.22,1,0.36,1)}
.st-news-list a:after{content:"\2192";color:var(--dim)}
.st-news-list time{font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1px;color:var(--green)}
.st-news-list a:hover,.st-news-list a:focus-visible{color:var(--green);padding-left:8px}

footer{justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.foot-mail{color:inherit;text-decoration:none;letter-spacing:1.1px}
.foot-mail:hover{text-decoration:underline}


@media(max-width:980px){
  .st-road{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--line);margin-left:6px}
  .st-road li{padding:0 0 26px 24px}
  .st-road li:before{left:-7px;top:4px}
  .st-road strong{margin-top:8px}
  .st-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-about-body{grid-template-columns:1fr}
}
@media(max-width:700px){
  .st-sec{padding-left:14px;padding-right:14px}
  .st-head{flex-wrap:wrap}
  .st-grid-4{grid-template-columns:1fr}
  .st-press-card{grid-template-columns:1fr;gap:10px}
  .st-news-list a{grid-template-columns:1fr;gap:4px}
  .st-news-list a:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .st-link,.st-press-card,.st-news-list a{transition:none!important}
}

/* Site links — same set on every page: STUDIO / NINE WINTERS / DECKWAKE / DEVLOG / PRESS KIT. */
.site-links{display:flex;align-items:center;gap:4px;margin-right:auto;margin-left:clamp(16px,3vw,40px)}
.site-link{padding:8px 10px;border:1px solid transparent;color:var(--dim);font-size:var(--fs-s);font-family:var(--f-small);letter-spacing:1.2px;text-decoration:none;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.site-link:hover{color:var(--ink);border-color:var(--line)}
.site-link.active{color:var(--green);border-color:var(--line)}
@media(max-width:900px){
  .studio-nav{height:auto;min-height:60px;flex-wrap:wrap;row-gap:0;padding-top:10px;padding-bottom:8px}
  .site-links{order:3;width:100%;margin:6px 0 0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .site-links::-webkit-scrollbar{display:none}
  .site-link{padding:7px 9px;font-size:var(--fs-s);font-family:var(--f-small)}
}
@media(max-width:700px){.studio-hero{padding-top:118px}}

/* Page transitions between site pages (cross-document View Transitions).
   Browsers without support just navigate as before. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:kkiri-vt-out .2s cubic-bezier(.22,1,.36,1) both}
::view-transition-new(root){animation:kkiri-vt-in .34s cubic-bezier(.22,1,.36,1) both}
@keyframes kkiri-vt-out{to{opacity:0;filter:blur(2px)}}
@keyframes kkiri-vt-in{from{opacity:0;transform:translateY(8px);filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Korean type: Galmuri (1px pixel strokes, crisp at 12px/15px) fills Hangul inside the pixel
   body text; Pretendard fills Hangul inside Latin display fonts that have no Korean glyphs. */
.st-lead,.hero-bottom p{font-family:var(--f-mid);font-size:var(--fs-m)}
html:lang(ko) .deck-sub{letter-spacing:.12em}
html:lang(ko) .st-head h2{letter-spacing:-.02em}
/* Korean pages: the whole sentence (Latin and digits too) comes from Galmuri, so mixed text
   like "Unity로" or "2–4인" keeps one size and stroke weight. */
html:lang(ko) body,html:lang(ko) .project-genre,html:lang(ko) .st-road p,html:lang(ko) .st-cell p,html:lang(ko) .st-news-list span,html:lang(ko) .st-head span{font-family:'Galmuri11','DungGeunMo',monospace}
html:lang(ko) .st-lead,html:lang(ko) .hero-bottom p{font-family:'Galmuri14','DungGeunMo',monospace}
html:lang(ko) .studio-nav,html:lang(ko) .site-links,html:lang(ko) .studio-mark{font-family:'DungGeunMo','IBM Plex Mono','Consolas',monospace}
/* Running sentences in cards and lists read as body copy, not labels. */
.st-road p,.st-cell p,.st-news-list a{font-size:var(--fs-m);font-family:var(--f-mid);line-height:1.7}
html:lang(ko) .st-road p,html:lang(ko) .st-cell p,html:lang(ko) .st-news-list span{font-family:'Galmuri14','DungGeunMo',monospace}