/* ============================================================
   WORK — hero + horizontal scroll galleries
   ============================================================ */
body{ background:var(--bg); color:var(--paper); }

.work-hero{
  position:relative; overflow:hidden;
  padding-top:clamp(120px,20vh,220px);
  border-bottom:1px solid var(--line-dark);
}
.work-hero__bgtext{
  position:absolute; left:var(--space); top:clamp(84px,12vh,140px);
  transform:none; text-align:left;
  font-size:clamp(64px,11vw,190px); letter-spacing:-.02em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(245,246,241,.24);
  pointer-events:none; user-select:none; z-index:0;
}
.work-hero .wrap{ position:relative; z-index:1; }
.work-hero__title{ font-size:clamp(44px,8vw,130px); letter-spacing:-.03em; margin-top:14px; }
.work-hero__sub{ margin-top:18px; font-size:var(--fs-micro); letter-spacing:.34em; color:var(--muted-paper); }

.gallery{ padding-bottom:clamp(60px,10vh,120px); }
.gallery + .gallery{ border-top:1px solid var(--line-dark); }
.gallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(26px,4vh,44px); }
.gallery__title{ font-size:clamp(32px,4.6vw,66px); margin-top:8px; letter-spacing:-.02em; }
.gallery__progress{ display:flex; align-items:center; gap:12px; font-size:var(--fs-micro); letter-spacing:.2em; }
.gallery__progress i{ width:90px; height:1px; background:var(--line-dark); position:relative; overflow:hidden; }
.gallery__progress i::after{ content:''; position:absolute; inset:0; background:var(--green); transform-origin:left; transform:scaleX(0); }
.gallery__foot{ margin-top:18px; font-size:var(--fs-micro); letter-spacing:.3em; color:var(--muted-paper); text-align:center; }

/* horizontal scroller */
.h-scroll{
  overflow-x:auto; overflow-y:hidden; cursor:default;
  scrollbar-width:thin; scrollbar-color:var(--green-700) transparent;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
  padding:6px 0 22px;
  user-select:none;
}
.h-scroll::-webkit-scrollbar{ height:5px; }
.h-scroll::-webkit-scrollbar-track{ background:rgba(245,246,241,.06); border-radius:99px; }
.h-scroll::-webkit-scrollbar-thumb{ background:var(--green-700); border-radius:99px; }
.h-scroll::-webkit-scrollbar-thumb:hover{ background:var(--green); }
.h-scroll__inner{ display:flex; gap:clamp(16px,2vw,28px); padding:0 var(--space); width:max-content; }

/* project card */
.p-card{
  width:clamp(300px,34vw,460px); flex-shrink:0; 
  border:1px solid var(--line-dark); border-radius:var(--radius);
  background:var(--bg-2); overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.p-card:hover{ transform:translateY(-8px); border-color:var(--green-600); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.p-card__art svg{ width:100%; height:auto; aspect-ratio:16/10; display:block; }
.p-card__body{ padding:22px 24px 26px; }
.p-card__title{ font-size:clamp(28px,2.6vw,40px); letter-spacing:-.01em; }
.p-card__desc{ margin-top:8px; font-size:var(--fs-small); color:var(--muted-paper); line-height:1.7; }
.p-card__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.p-card__tags span{ font-size:9px; letter-spacing:.2em; border:1px solid var(--line-dark); color:var(--green-200); border-radius:99px; padding:5px 11px; }

/* drawing card (framed canvas) */
.d-card{
  width:clamp(240px,24vw,320px); flex-shrink:0; 
  margin:14px 0;
}
.d-card__frame{
  position:relative; padding:14px 14px 20px; background:var(--paper);
  border-radius:6px; box-shadow:0 22px 50px rgba(0,0,0,.45);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-origin:center;
}
.d-card:hover .d-card__frame{ transform:translateY(-10px) rotate(var(--tilt,0deg)); box-shadow:0 40px 80px rgba(0,0,0,.6); }
.d-card:nth-child(odd) .d-card__frame{ --tilt:-1.5deg; }
.d-card:nth-child(even) .d-card__frame{ --tilt:1.5deg; }
.d-card__frame svg{ width:100%; height:auto; aspect-ratio:3/4; border-radius:2px; display:block; }
.d-card__cap{ display:flex; justify-content:space-between; margin-top:12px; font-size:var(--fs-micro); letter-spacing:.18em; color:var(--muted-paper); }
.d-card__cap span:first-child{ color:var(--paper); }

/* work hero title: Archivo Black (similar bold display, different from Syne) */
.work-hero__title{ font-family:'Bricolage Grotesque','Noto Sans SC',sans-serif; font-weight:800; letter-spacing:-.01em; }