:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --panel:#eeeeec;
  --line:#1d1d1d;
  --softline:#bebebe;
  --gutter:8px;
  --micro:7px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#fff}
body{margin:0;background:#fff;color:var(--ink);font-family:"Satoshi","Pretendard",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure,p,h1,h2,dl,dt,dd{margin:0}

/* ---------- HOME HERO ---------- */
.hero{height:100svh;min-height:560px;position:relative;background:#fff;overflow:hidden}
.hero-mark-wrap{position:absolute;left:50%;top:44.7%;width:min(21.2vw,407px);aspect-ratio:360/230;transform:translate(-50%,-50%)}
.hero-mark-paths{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.hero-mark-paths path{fill:none;stroke:#000;stroke-width:1}
.hero-beads{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.chrome-bead{position:absolute;width:clamp(14px,1.63vw,31px);height:clamp(14px,1.63vw,31px);object-fit:contain;transform:translate(-50%,-50%) scale(var(--scale,1)) rotate(var(--rot,0deg));filter:grayscale(1) contrast(1.03) brightness(var(--bright,1));opacity:var(--alpha,.92);animation:bead-glint var(--dur,3.4s) ease-in-out infinite alternate;animation-delay:var(--delay,0s);will-change:filter,transform}
@keyframes bead-glint{0%{filter:grayscale(1) contrast(1.01) brightness(calc(var(--bright,1)*.94));transform:translate(-50%,-50%) scale(var(--scale,1)) rotate(var(--rot,0deg))}100%{filter:grayscale(1) contrast(1.15) brightness(calc(var(--bright,1)*1.08));transform:translate(-50%,-50%) scale(calc(var(--scale,1)*1.025)) rotate(calc(var(--rot,0deg) + 2deg))}}
.hero-info,.hero-bottom{position:absolute;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.63vw,12px);line-height:1.14;letter-spacing:-.045em;font-weight:600}
.hero-info{top:84.55%;display:grid;grid-template-columns:auto auto;gap:15px;align-items:start}
.hero-contact{left:var(--gutter)}
.hero-social{right:var(--gutter);text-align:left}
.hero-bottom{bottom:27px}
.hero-copy-left{left:var(--gutter)}
.hero-copy-right{right:var(--gutter);text-align:right}

/* ---------- WORKS LIST ---------- */
.works{background:#fff;position:relative}
.works-titlebar,.more-titlebar{
  height:74px;
  border-bottom:1px solid #111;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:0 15px 14px;
  background:#fff;
}
.works-titlebar h1,.more-titlebar h2{
  font-size:clamp(27px,1.48vw,31px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.055em;
}
.works-titlebar span,.more-titlebar span{
  font-size:clamp(27px,1.48vw,31px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.055em;
}
.works-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:1px;
  row-gap:0;
  background:#aaa;
  border-bottom:1px solid #aaa;
}
.work-card{
  display:block;
  min-width:0;
  position:relative;
  background:#fff;
  overflow:hidden;
}
.card-meta-top{
  height:32px;
  font-family:"Satoshi","Pretendard",sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.025em;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid #d2d2d2;
}
.card-stage{
  height:50vw;
  min-height:500px;
  background:#ececec;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7.2vw 5vw;
  overflow:hidden;
  position:relative;
}
.card-stage img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transform:scale(1);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.card-meta-bottom{
  min-height:67px;
  font-family:"Satoshi","Pretendard",sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.025em;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:11px 16px 13px;
  border-top:1px solid #d2d2d2;
  border-bottom:1px solid #111;
}
.card-meta-bottom .card-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.card-meta-bottom strong{
  font-weight:600;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:38vw;
}
.card-meta-bottom em{
  font-style:normal;
  font-weight:500;
  white-space:nowrap;
}
.card-meta-bottom .card-index{white-space:nowrap;font-weight:600}
.work-card:hover .card-stage img,.more-card:hover .card-stage img{transform:scale(1.008)}

/* text enters as the Works section enters the viewport; no extra redesign */
.works-titlebar h1,.works-titlebar span,.card-meta-top,.card-meta-bottom{
  opacity:1;
  transform:none;
}
.js .works:not(.is-entered) .works-titlebar h1,
.js .works:not(.is-entered) .works-titlebar span{
  opacity:0;
  transform:translateY(10px);
}
.js .works .works-titlebar h1,.js .works .works-titlebar span{
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1);
}

@media(max-width:900px){
  .works-titlebar,.more-titlebar{height:54px;padding:0 10px 10px}
  .works-titlebar h1,.more-titlebar h2,.works-titlebar span,.more-titlebar span{font-size:25px}
  .works-grid{grid-template-columns:1fr}
  .card-meta-top{height:28px;padding:0 10px;font-size:10px}
  .card-stage{height:auto;aspect-ratio:1/1.08;min-height:0;padding:10vw 7vw}
  .card-meta-bottom{min-height:58px;padding:10px;font-size:10px}
  .card-meta-bottom strong{max-width:75vw}
}
/* ---------- PROJECT TOP ---------- */
.project-page{background:#fff}
.project-intro{height:100svh;min-height:560px;position:relative;padding:7px var(--gutter) 0;background:#fff}
.project-minihead{display:flex;justify-content:space-between;align-items:start;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.49vw,9px);font-weight:600;line-height:1}
.project-title{margin-top:7px;font-size:clamp(42px,5.55vw,107px);line-height:.78;letter-spacing:-.075em;font-weight:900;text-transform:uppercase;white-space:nowrap;max-width:95vw;overflow:hidden;text-overflow:clip}
.project-specs{position:absolute;left:var(--gutter);bottom:24px;width:clamp(160px,15.7vw,302px)}
.project-specs dl{font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.43vw,8px);line-height:1.15;margin-bottom:15px}
.project-specs dl>div{display:grid;grid-template-columns:42% 58%;gap:4px}
.project-specs dd{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-actions{display:grid;grid-template-columns:1fr 1fr;height:16px;margin-bottom:26px;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.42vw,8px);line-height:16px;text-align:center}
.project-actions a{background:#efefef;color:#111}
.project-actions a.dark{background:#050505;color:#fff}
.project-cover{width:100%;background:#efefed;padding:12px;display:flex;align-items:center;justify-content:center;min-height:125px}
.project-cover img{width:auto;height:auto;max-width:100%;max-height:125px;object-fit:contain}

/* ---------- PROJECT DETAIL ---------- */
.project-content{background:#fff}
.project-about-block{border-top:1px solid #111;border-bottom:1px solid #111;display:grid;grid-template-columns:2fr 1.3fr .7fr;min-height:110px;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.44vw,8px);line-height:1.12}
.project-about-block>div{padding:7px 8px 10px}
.project-about-block>div+div{border-left:1px solid #bbb}
.meta-label{margin-bottom:2px;font-weight:600}
.project-about-copy p{max-width:96%;line-height:1.14}
.project-feature-col>div:last-child,.project-page-col>div:last-child{display:grid;gap:1px}
.project-feature-col>div:last-child>div::before,.project-page-col>div:last-child>div::before{content:"• ";}

.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#a9a9a9}
.gallery-panel{background:#efefed;min-width:0;display:flex;align-items:center;justify-content:center;padding:5.3vw;overflow:visible}
.gallery-panel.dark{background:#050505}
.gallery-panel.white{background:#fff}
.gallery-panel.regular{min-height:55.8vw}
.gallery-panel.regular img{max-width:86%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.gallery-panel.tall{align-items:flex-start;min-height:auto;padding:4.2vw 6vw}
.gallery-panel.tall img{width:min(78%,820px);height:auto;max-height:none;object-fit:contain}
.gallery-panel.wide{grid-column:1/-1;min-height:auto;padding:5vw 9vw}
.gallery-panel.wide img{width:min(84%,1500px);height:auto;max-height:none;object-fit:contain}

/* ---------- MORE WORKS ---------- */
.more-works{background:#fff;padding-top:17px}
.more-titlebar{height:32px;border-top:1px solid #111;border-bottom:1px solid #111;align-items:flex-end;padding-bottom:6px}
.more-titlebar h2,.more-titlebar span{font-size:clamp(14px,1.6vw,30px)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#aaa}
.more-card{display:block;background:#efefed;min-width:0}
.more-card .card-stage{height:29.1vw;min-height:250px;max-height:560px;padding:4vw}
.more-card .card-meta-bottom{min-height:22px}

/* ---------- BLACK ENDING ---------- */
.black-footer{height:84svh;min-height:480px;position:relative;background:#000;color:#fff;overflow:hidden}
.black-footer-name{position:absolute;left:1.2%;right:1%;bottom:92px;font-size:14.3vw;line-height:.75;letter-spacing:-.078em;font-weight:700;white-space:nowrap;transform:translateY(18px);opacity:0;transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .7s ease}
.black-footer.is-visible .black-footer-name{transform:translateY(0);opacity:1}
.black-footer-info{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;display:grid;grid-template-columns:1.2fr 1.2fr 1.2fr .7fr;column-gap:6vw;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.42vw,8px);line-height:1.12}
.black-footer-info>div{display:grid;grid-template-columns:auto 1fr;gap:10px}
.black-footer-info>div:last-child{justify-self:end}
.black-footer-info p{margin:0}
.black-footer-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:7px;display:flex;justify-content:space-between;font-family:"Satoshi","Pretendard",sans-serif;font-size:clamp(6px,.42vw,8px)}

/* ---------- ABOUT ---------- */
.about-page{min-height:100svh;padding:7px var(--gutter) 60px}
.about-minihead{display:flex;justify-content:space-between;font-family:"Satoshi","Pretendard",sans-serif;font-size:8px}
.about-page>h1{font-size:clamp(54px,9vw,170px);line-height:.8;letter-spacing:-.075em;margin-top:9px}
.about-copy{margin:25vh 0 8vh;max-width:850px;font-size:clamp(18px,2.4vw,46px);line-height:1.12;letter-spacing:-.04em}
.about-copy p+p{margin-top:1em}
.about-grid{border-top:1px solid #111;display:grid;grid-template-columns:repeat(4,1fr)}
.about-grid>div{padding:8px;border-right:1px solid #bbb;min-height:180px}
.about-grid>div:last-child{border-right:0}
.about-grid h2{font-size:10px;margin-bottom:20px}
.about-grid p{font-size:9px;line-height:1.45}

@media (max-width:760px){
  :root{--gutter:7px}
  .hero{min-height:620px}
  .hero-mark-wrap{width:58vw;top:43%}
  .chrome-bead{width:clamp(13px,4.25vw,18px);height:clamp(13px,4.25vw,18px)}
  .hero-info,.hero-bottom{font-size:6.3px}
  .hero-info{top:83.2%;gap:8px}
  .hero-social{max-width:42vw}
  .hero-bottom{bottom:18px}
  .hero-copy-right{max-width:50vw}

  .works-titlebar{height:31px;padding-bottom:6px}
  .works-titlebar h1,.works-titlebar span{font-size:20px}
  .works-grid{grid-template-columns:1fr}
  .card-stage{height:91vw;min-height:0;padding:11vw 8vw}
  .card-meta-top,.card-meta-bottom{font-size:6.5px}

  .project-intro{min-height:680px;padding-top:7px}
  .project-title{font-size:10.4vw;line-height:.82;margin-top:8px;max-width:97vw}
  .project-specs{width:43vw;bottom:24px}
  .project-specs dl{font-size:6.1px}
  .project-actions{font-size:6px;margin-bottom:18px}
  .project-cover{min-height:106px;padding:9px}
  .project-cover img{max-height:110px}
  .project-about-block{grid-template-columns:1fr;font-size:6.3px}
  .project-about-block>div+div{border-left:0;border-top:1px solid #bbb}
  .project-gallery{grid-template-columns:1fr}
  .gallery-panel.wide{grid-column:auto}
  .gallery-panel.regular,.gallery-panel.tall,.gallery-panel.wide{min-height:auto;padding:24px 10px}
  .gallery-panel.regular img,.gallery-panel.tall img,.gallery-panel.wide img{width:100%;max-width:100%;height:auto;max-height:none}

  .more-grid{grid-template-columns:1fr}
  .more-card .card-stage{height:80vw;min-height:0;padding:10vw}

  .black-footer{height:72svh;min-height:520px}
  .black-footer-name{font-size:18.2vw;white-space:normal;line-height:.78;letter-spacing:-.075em;bottom:180px;max-width:94%}
  .black-footer-info{grid-template-columns:1fr 1fr;gap:12px 18px;bottom:55px;font-size:6.2px}
  .black-footer-info>div{grid-template-columns:1fr;gap:2px}
  .black-footer-info>div:last-child{justify-self:stretch}
  .black-footer-bottom{font-size:6px}
  .about-grid{grid-template-columns:1fr}
  .about-grid>div{border-right:0;border-bottom:1px solid #bbb}
}

/* ===== V17 exact-motion corrections ===== */
/* Project titles use English display names and are never clipped. */
.project-title{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  max-width:98vw;
  width:98vw;
  overflow-wrap:normal;
  word-break:keep-all;
  text-wrap:balance;
}
.project-title.title-long{font-size:clamp(34px,4.65vw,90px);line-height:.82;max-width:94vw}
.project-title.title-xlong{font-size:clamp(30px,3.9vw,76px);line-height:.84;max-width:96vw}

/* The reference's chrome spheres stay in place but their reflections keep rotating. */
.chrome-bead{
  transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--scale,1)) rotate(var(--rot,0deg));
  animation:bead-alive var(--dur,3.25s) ease-in-out infinite alternate;
  image-rendering:auto;
  backface-visibility:hidden;
}
@keyframes bead-alive{
  0%{
    filter:grayscale(1) contrast(1.04) brightness(calc(var(--bright,1)*.91));
    transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(calc(var(--scale,1)*.985)) rotate(var(--rot,0deg));
  }
  48%{
    filter:grayscale(1) contrast(1.18) brightness(calc(var(--bright,1)*1.10));
  }
  100%{
    filter:grayscale(1) contrast(1.10) brightness(calc(var(--bright,1)*1.03));
    transform:translate(calc(-50% + var(--dx2,0px)),calc(-50% + var(--dy2,0px))) scale(calc(var(--scale,1)*1.025)) rotate(calc(var(--rot,0deg) + 3deg));
  }
}
.hero-mark-wrap{perspective:800px}
.hero-beads{will-change:transform;transition:transform .18s cubic-bezier(.2,.7,.2,1)}

/* Main and project pages end with exactly the same black ending structure. */
.home-black-footer{margin-top:0}
.black-footer-name{
  left:.65%;right:.65%;bottom:91px;
  font-size:12.35vw;
  line-height:.76;
  letter-spacing:-.082em;
  font-weight:700;
  transform:translateY(34px);
  opacity:0;
}
.black-footer.is-visible .black-footer-name{transform:translateY(0);opacity:1}
.black-footer-info{opacity:0;transform:translateY(9px);transition:opacity .55s ease .18s,transform .7s cubic-bezier(.2,.75,.2,1) .18s}
.black-footer-bottom{opacity:0;transition:opacity .5s ease .3s}
.black-footer.is-visible .black-footer-info{opacity:1;transform:none}
.black-footer.is-visible .black-footer-bottom{opacity:1}

/* Keep section headers visually fixed to the recording: no decorative restyling. */
.works-titlebar,.more-titlebar{background:#fff}

@media (max-width:760px){
  .project-title,.project-title.title-long,.project-title.title-xlong{font-size:9.7vw;line-height:.84;max-width:97vw;width:97vw}
  .black-footer-name{font-size:17.4vw;bottom:181px;line-height:.79;max-width:96%;}
}


/* ===== V19 — reference-faithful hero motion =====
   Geometry stays fixed. Only the chrome reflection moves, matching the recording. */
.hero-mark-wrap{
  transform:translate(-50%,-50%);
  animation:none !important;
  will-change:auto;
}
.hero-beads{
  transform:none !important;
  transition:none !important;
  perspective:none;
}
.chrome-bead{
  display:block;
  overflow:hidden;
  border-radius:50%;
  opacity:var(--alpha,.94);
  transform:translate(-50%,-50%) scale(var(--scale,1)) rotate(var(--rot,0deg));
  animation:none !important;
  filter:none;
  box-shadow:inset 0 0 0 .45px rgba(255,255,255,.72),0 .35px 1.1px rgba(0,0,0,.12);
  will-change:auto;
}
.chrome-bead>img{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  max-width:none;
  object-fit:cover;
  border-radius:50%;
  filter:grayscale(1) contrast(1.08) brightness(var(--bright,1));
  opacity:1;
  transition:opacity 120ms linear;
  animation:none !important;
  transform:none !important;
}
.chrome-bead>img.chrome-next{opacity:0}
.chrome-bead>i{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 36% 28%,rgba(255,255,255,.54),rgba(255,255,255,.12) 24%,transparent 46%);
  mix-blend-mode:screen;
  opacity:.58;
  animation:none !important;
  transform:none !important;
}

/* All interface English uses the same font. Korean falls back to Pretendard. */
html,body,button,input,textarea,select,
.hero-info,.hero-bottom,.card-meta-top,.card-meta-bottom,
.project-minihead,.project-specs dl,.project-actions,.project-about-block,
.black-footer-info,.black-footer-bottom,.about-minihead{
  font-family:"Satoshi","Pretendard",sans-serif !important;
}

/* ===== V20 — SJH / liquid-chrome reference correction ===== */
.hero-mark-wrap{
  width:min(29.4vw,565px);
  aspect-ratio:500/190;
  top:44.7%;
}
.chrome-bead{
  width:clamp(15px,1.58vw,30px);
  height:clamp(15px,1.58vw,30px);
  box-shadow:none;
  opacity:var(--alpha,.98);
}
.chrome-bead>img{
  inset:-1%;
  width:102%;
  height:102%;
  filter:grayscale(1) contrast(1.16) brightness(var(--bright,1));
  transition:opacity 150ms ease;
}
.chrome-bead>i{
  background:none;
  opacity:0;
}
@media (max-width:760px){
  .hero-mark-wrap{width:82vw;aspect-ratio:500/190;top:43.5%}
  .chrome-bead{width:clamp(13px,4.15vw,18px);height:clamp(13px,4.15vw,18px)}
}
/* V20.1 scale correction after direct screenshot comparison */
.hero-mark-wrap{width:min(33.8vw,650px)}
.chrome-bead{width:clamp(18px,1.95vw,38px);height:clamp(18px,1.95vw,38px)}
@media (max-width:760px){
  .hero-mark-wrap{width:88vw}
  .chrome-bead{width:clamp(15px,5vw,21px);height:clamp(15px,5vw,21px)}
}

/* ===== V21 — real WebGL liquid chrome ===== */
.hero-webgl-wrap{
  width:min(29.4vw,565px);
  aspect-ratio:500/190;
  top:44.7%;
  overflow:visible;
}
.hero-webgl{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:transparent;
}
/* Keep the SVG only as an invisible geometry source. */
.hero-mark-paths{opacity:0!important;pointer-events:none}
.hero-beads{display:none!important}
@media(max-width:760px){
  .hero-webgl-wrap{width:72vw;max-width:430px;top:43.2%}
}

/* ===== V22 — reference-matched animated GIF hero ===== */
.hero-gif-wrap{
  width:min(31vw,600px);
  aspect-ratio:1400/560;
  top:44.7%;
  overflow:visible;
}
.hero-liquid-gif{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:normal;
}
.hero-webgl{display:none!important}
@media(max-width:760px){
  .hero-gif-wrap{width:76vw;max-width:430px;top:43.2%}
}


/* ===== V24 MAIN — measured directly against the supplied reference recording ===== */
.hero{height:100svh;min-height:560px;background:#fff;overflow:hidden}
.hero-mark-wrap.hero-gif-wrap{
  left:50%;
  top:43.90%;
  width:30vw;
  max-width:none;
  aspect-ratio:1100/420;
  transform:translate(-50%,-50%);
}
.hero-liquid-gif{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.hero-info,.hero-bottom{
  font-family:"Satoshi","Pretendard",sans-serif !important;
  font-size:.59vw;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:600;
}
.hero-info{top:86.15%;grid-template-columns:auto auto;gap:.85vw}
.hero-contact{left:.73vw}
.hero-social{right:.73vw}
.hero-bottom{bottom:4.35vh}
.hero-copy-left{left:.73vw}
.hero-copy-right{right:.73vw}
@media(max-width:760px){
 .hero-mark-wrap.hero-gif-wrap{width:74vw;top:43.5%}
 .hero-info,.hero-bottom{font-size:7px}
 .hero-info{top:84.5%;gap:9px}
 .hero-contact{left:7px}.hero-social{right:7px}
 .hero-bottom{bottom:18px}.hero-copy-left{left:7px}.hero-copy-right{right:7px}
}

/* ===== V24.1 measured hero lock ===== */
.hero-mark-wrap.hero-gif-wrap{
  left:49.91%;
  top:43.90%;
  width:33.4vw;
  max-width:none;
  aspect-ratio:1100/420;
  transform:translate(-50%,-50%);
}
.hero-info,.hero-bottom{
  font-family:"Satoshi","Pretendard",sans-serif !important;
  font-size:.59vw;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:600;
}
.hero-info{top:84.77%;gap:.85vw}
.hero-contact{left:.80vw}
.hero-social{right:.80vw}
.hero-bottom{bottom:5.05vh}
.hero-copy-left{left:.80vw}
.hero-copy-right{right:.80vw}
@media(max-width:760px){
 .hero-mark-wrap.hero-gif-wrap{left:50%;top:43.5%;width:82vw}
 .hero-info,.hero-bottom{font-size:7px}
 .hero-info{top:84.5%}
 .hero-contact{left:7px}.hero-social{right:7px}
 .hero-bottom{bottom:18px}.hero-copy-left{left:7px}.hero-copy-right{right:7px}
}

/* ===== V26 — scale + hero cleanup ===== */
/* Keep the approved hero design, but remove clipped/overlapping bead artifacts. */
.hero-mark-wrap.hero-gif-wrap{
  left:50%;
  top:43.9%;
  width:34.8vw;
  max-width:none;
  aspect-ratio:1100/420;
  transform:translate(-50%,-50%);
  overflow:visible;
}
.hero-liquid-gif{object-fit:contain;overflow:visible}

/* Project intro: larger, easier to read, and closer to the reference scale. */
.project-minihead{
  font-size:clamp(10px,.66vw,13px);
  line-height:1.05;
}
.project-title{
  margin-top:9px;
}
.project-specs{
  width:clamp(250px,20.5vw,410px);
  bottom:30px;
}
.project-specs dl{
  font-size:clamp(10px,.70vw,14px);
  line-height:1.17;
  margin-bottom:18px;
}
.project-specs dl>div{grid-template-columns:39% 61%;gap:8px}
.project-specs dd{overflow:visible;text-overflow:unset}
.project-actions{
  height:30px;
  margin-bottom:24px;
  font-size:clamp(10px,.68vw,13px);
  line-height:30px;
}
.project-cover{
  min-height:235px;
  padding:20px 22px;
}
.project-cover img{
  max-width:92%;
  max-height:210px;
}

/* Slightly enlarge the remaining small project/works UI text. */
.card-meta-top,.card-meta-bottom{
  font-size:12.5px;
}
.card-meta-top{height:36px;padding:0 16px}
.card-meta-bottom{min-height:72px;padding:12px 16px 14px}
.project-about-block{
  font-size:clamp(9px,.58vw,11.5px);
  line-height:1.2;
}
.project-about-block>div{padding:10px 11px 13px}
.more-card .card-meta-bottom{min-height:30px}

@media(max-width:760px){
  .hero-mark-wrap.hero-gif-wrap{width:88vw;top:43.5%}
  .project-minihead{font-size:8px}
  .project-specs{width:57vw;bottom:28px}
  .project-specs dl{font-size:8px;margin-bottom:13px}
  .project-actions{height:24px;line-height:24px;font-size:8px;margin-bottom:16px}
  .project-cover{min-height:180px;padding:14px}
  .project-cover img{max-height:160px;max-width:94%}
  .card-meta-top,.card-meta-bottom{font-size:8px}
  .project-about-block{font-size:8px}
}
/* V26.1: preserve approved hero size, only clean alignment/cropping. */
.hero-mark-wrap.hero-gif-wrap{width:33.4vw;left:49.91%;top:43.9%;overflow:visible}
@media(max-width:760px){.hero-mark-wrap.hero-gif-wrap{width:82vw;left:50%}}

/* ===== V28 — keep V26 hero EXACTLY; only enlarge project intro/detail UI ===== */
.project-specs{
  left:3.1vw;
  width:min(88vw,1320px);
  bottom:3.7vh;
}
.project-specs dl{
  font-size:clamp(15px,1.25vw,24px);
  line-height:1.16;
  margin-bottom:28px;
}
.project-specs dl>div{grid-template-columns:23% 77%;gap:14px}
.project-specs dd{white-space:normal;overflow:visible;text-overflow:unset}
.project-actions{
  height:58px;
  margin-bottom:38px;
  font-size:clamp(15px,1.12vw,22px);
  line-height:58px;
}
.project-cover{
  min-height:48vh;
  max-height:560px;
  padding:36px 44px;
}
.project-cover img{
  max-height:min(43vh,500px);
  max-width:76%;
}
.card-meta-top,.card-meta-bottom{font-size:clamp(12px,.78vw,15px)}
.project-about-block{font-size:clamp(11px,.72vw,14px)}
.black-footer-info,.black-footer-bottom{font-size:clamp(10px,.62vw,13px)}

@media(max-height:820px) and (min-width:761px){
  .project-specs{width:min(78vw,1100px);bottom:22px}
  .project-specs dl{font-size:clamp(12px,1vw,18px);margin-bottom:18px}
  .project-actions{height:40px;line-height:40px;margin-bottom:20px;font-size:clamp(12px,.9vw,17px)}
  .project-cover{min-height:300px;max-height:38vh;padding:24px 30px}
  .project-cover img{max-height:32vh}
}
@media(max-width:760px){
  .project-specs{left:10px;width:calc(100vw - 20px);bottom:22px}
  .project-specs dl{font-size:10px;margin-bottom:14px}
  .project-actions{height:30px;line-height:30px;font-size:10px;margin-bottom:16px}
  .project-cover{min-height:220px;max-height:none;padding:18px}
  .project-cover img{max-height:200px;max-width:88%}
  .card-meta-top,.card-meta-bottom{font-size:9px}
  .project-about-block{font-size:9px}
}