/* ============================================================
   JUJE HSIUNG — portfolio
   Visual system: reference-rebuild of the Dumont photography
   portfolio — a full-viewport coverflow where each project is a
   full-screen image with tiny corner meta. Own implementation.
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --paper:#f4f3f1;
  --muted:#8f8f94;
  --line:#d8d6d2;
  --accent:#ff0099;
  --pad:20px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:500;letter-spacing:.02em;line-height:1.3;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.meta{font-size:13px;letter-spacing:.01em;line-height:1.4}
.meta--muted{color:var(--muted)}

/* ---------------- fixed chrome (Menu + copyright) ---------------- */
.chrome{
  position:fixed;inset:var(--pad) var(--pad) auto var(--pad);z-index:50;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;mix-blend-mode:difference;color:#fff;
}
.chrome__menu{
  font-size:14px;font-weight:600;background:none;border:0;color:inherit;
  cursor:pointer;letter-spacing:.01em;pointer-events:auto;
}
.chrome__copy{font-size:14px;font-weight:500;line-height:1.3;text-align:left}

/* ---------------- overlay menu ---------------- */
.menu{
  position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.menu.open{opacity:1;pointer-events:auto}
.menu a{
  font-size:clamp(40px,8vw,110px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  color:var(--paper);opacity:.5;transition:opacity .3s var(--ease);
}
.menu a:hover{opacity:1}
.menu__close{
  position:absolute;top:var(--pad);right:var(--pad);
  background:none;border:0;color:var(--paper);font-size:14px;font-weight:600;cursor:pointer;
}

/* ---------------- works grid (all images, uncropped) ---------------- */
.works{padding:80px 0 40px}
.works__head{padding:0 var(--pad) 14px;border-bottom:1px solid var(--line)}
.works__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px 2px;padding:2px var(--pad) 0;
  align-items:end;
}
.works__item{
  position:relative;overflow:hidden;background:var(--paper);opacity:0;
  transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.works__item.in{opacity:1;transform:none}
.works__item img{
  width:100%;height:auto;object-fit:contain;display:block;
  transition:transform 1s var(--ease);
}
.works__item:hover img{transform:scale(1.02)}
.works__item figcaption{
  display:flex;justify-content:space-between;gap:12px;
  padding:8px 0 0;font-size:13px;color:var(--muted);
}
.works__item figcaption span:first-child{color:var(--ink);font-weight:500}

@media (max-width:860px){
  .works__grid{grid-template-columns:1fr}
}

/* ---------------- about ---------------- */
.about{
  padding:110px var(--pad);display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:24px;
  border-top:1px solid var(--line);
}
.about__list{display:grid;gap:22px;max-width:640px}
.about__row{display:grid;grid-template-columns:120px 1fr;gap:16px}
.about__row dt{color:var(--muted);font-size:13px}
.about__row dd{font-size:13px}
.about__row a{font-weight:600}

/* ---------------- films ---------------- */
.films{padding:0 var(--pad) 80px}
.films__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-top:14px}
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;cursor:pointer}
.film img,.film video,.film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.film iframe{object-fit:fill}
.film video{opacity:0;transition:opacity .6s var(--ease)}
.film.playing video{opacity:1}
.film__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.85);color:#111;
  display:grid;place-items:center;font-size:16px;padding-left:3px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.film:hover .film__play{transform:translate(-50%,-50%) scale(1.08)}
.film.playing .film__play{opacity:0;pointer-events:none}
.film__cap{position:absolute;left:14px;bottom:12px;color:#fff;font-size:13px;mix-blend-mode:difference;z-index:2}

/* ---------------- instagram ---------------- */
.ig{padding:0 var(--pad) 80px}
.ig__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ig__handle{font-size:13px;font-weight:600}
.ig__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding-top:2px}
.ig__grid a{aspect-ratio:1;overflow:hidden}
.ig__grid img{transition:transform .6s var(--ease)}
.ig__grid a:hover img{transform:scale(1.04)}

/* ---------------- footer ---------------- */
.footer{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:40px var(--pad) var(--pad);border-top:1px solid var(--line);color:var(--muted);font-size:13px;
}
.footer a{color:var(--ink);font-weight:600}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .about{grid-template-columns:1fr;padding:70px var(--pad)}
  .about__row{grid-template-columns:100px 1fr}
  .films__grid{grid-template-columns:1fr}
  .ig__grid{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .cover img{transform:none}
}