/* Typography values taken from the original Cargo stylesheet */
:root{
  --text:rgba(0,0,0,.75);
  --bg:#fff;
  --link-underline:rgba(0,64,255,.2);
  --pad:1.5rem;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:86.67%;}
body{
  font-family:"Helvetica Neue",Helvetica,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:1.2rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.04rem;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--link-underline);
}
a:hover{border-bottom-color:rgba(0,64,255,.6);}
a:focus-visible,button:focus-visible{outline:1px solid var(--text);outline-offset:2px;}
b,strong{font-weight:700;}
img{max-width:100%;}

/* ---------- header (matches original: brand left, menu right, always visible) ---------- */
header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem 1.4rem;
  flex-wrap:wrap;
  padding:var(--pad) var(--pad) 0;
  background:var(--bg);
}
header .brand{flex:1 1 auto;}
header nav{
  flex:0 1 auto;
  text-align:right;
}
header nav a{margin-left:1.4rem;}
header nav a:first-child{margin-left:0;}
header nav a.active{font-weight:700;}

/* ---------- layout ---------- */
main{padding:3.5rem var(--pad) 4rem;}

/* intro : 75 / 25 as in the original grid */
.intro{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  margin-bottom:6rem;
}
.intro .col-img{flex:0 0 74%;}
.intro .col-txt{flex:1 1 0;min-width:0;}
.intro img{width:100%;height:auto;display:block;}
.yt-link{display:inline-block;border-bottom:0;}
.yt-link:hover{border-bottom:0;}
.yt-link svg{width:20px;height:20px;display:block;fill:currentColor;}

/* ---------- works ---------- */
.year-nav a,.year-nav .current{margin-right:.7rem;display:inline-block;}
.year-nav .current{font-weight:700;}
.works hr, .listing hr{
  border:none;
  border-top:1px solid rgba(0,0,0,.75);
  margin:.5rem 0 1.6rem;
}

/* project row: title / KR / EN / media */
.project, .entry{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  margin-bottom:4rem;
}
.project .col, .entry .col{flex:1 1 0;min-width:0;}
.entry .col-media{align-self:flex-start;}
.entry .col-media .slideshow{max-width:100%;}

/* ---------- slideshow ---------- */
.slideshow{position:relative;width:100%;overflow:hidden;}
.slides{display:flex;align-items:flex-start;transition:transform .5s ease;}
.slides img{width:100%;flex:0 0 100%;height:auto;display:block;}
.slideshow .arrow{
  position:absolute;top:0;bottom:0;width:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .2s;
  background:transparent;border:none;
}
.slideshow:hover .arrow,.slideshow:focus-within .arrow{opacity:1;}
.arrow.prev{left:0;}
.arrow.next{right:0;}
.arrow svg{width:26px;height:26px;}
.arrow polyline{
  fill:none;stroke:#fff;stroke-width:3;
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.6));
}
.counter{
  position:absolute;bottom:.4rem;right:.6rem;
  font-size:1rem;color:#fff;
  text-shadow:0 0 3px rgba(0,0,0,.7);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.slideshow:hover .counter{opacity:1;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* brand left, menu right as a 2-column block (WORKS LECTURE / MAGAZINE CONTACT) */
  header{flex-wrap:nowrap;align-items:flex-start;}
  header .brand{flex:1 1 auto;min-width:0;}
  header nav{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:auto auto;
    gap:.15rem 1.1rem;
    justify-content:end;
    text-align:right;
  }
  header nav a{margin:0;white-space:nowrap;line-height:1.45;}

  main{padding:3rem var(--pad) 3rem;}
  .intro,.project,.entry{flex-direction:column;gap:1.5rem;}
  .intro{margin-bottom:3.5rem;}
  .intro .col-img{flex:1 1 auto;width:100%;}
  .project,.entry{margin-bottom:3rem;}
  .slideshow .arrow,.counter{opacity:1;}
  .contact-inner{flex-direction:column;gap:2.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .slides{transition:none;}
}

/* ---------- contact ---------- */
.contact-inner{
  display:flex;
  gap:2rem;
  align-items:flex-start;
  max-width:60rem;
}
.contact-inner .col{flex:1 1 0;min-width:0;}
.contact-form{display:block;}
.contact-form label{
  display:block;
  margin-bottom:.35rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  background:transparent;
  border:1px solid rgba(0,0,0,.25);
  padding:.5rem .6rem;
  margin-bottom:1.2rem;
  border-radius:0;
  -webkit-appearance:none;
}
.contact-form textarea{resize:vertical;}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:rgba(0,0,0,.75);
}
.contact-form button{
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  background:transparent;
  border:1px solid rgba(0,0,0,.75);
  padding:.5rem 1.4rem;
  cursor:pointer;
  border-radius:0;
}
.contact-form button:hover{
  background:rgba(0,0,0,.75);
  color:#fff;
}
.contact-form button[disabled]{opacity:.4;cursor:default;}
.form-note{margin-top:1rem;}

/* contact (email + phone only) */
.contact .col-narrow{max-width:34rem;line-height:2;}
.contact .col-narrow a{display:inline-block;}