/* Shared home layout and motion overrides. */
.home-page:not(.home-motion-ready) .hero-quote{visibility:hidden}

.home-page .principle-ko .fill-char.preserved-space,
.home-page .showcase-project h3 .fill-char.preserved-space{
  white-space:pre!important;
}

/*
  HOME SCROLL GUIDE
  Geometry is supplied by home-interactions.js from the rendered Hero English
  title: 5% title-width gap and 100% title-height line.
  SCROLL stays visible for the full idle-visible state.
  No page-level inline script owns timing or layout.
*/
.home-page .index-scroll-guide{
  position:fixed;
  z-index:2147483000;
  left:var(--index-scroll-guide-left,90vw);
  right:auto;
  top:var(--index-scroll-guide-top,50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#fff;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.home-page .index-scroll-guide.is-idle-visible{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease,visibility 0s linear 0s;
}
.home-page .index-scroll-guide-line{
  position:relative;
  width:1px;
  height:var(--index-scroll-guide-height,25vh);
  overflow:hidden;
  background:rgba(255,255,255,.05);
}
.home-page .index-scroll-guide-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform:scaleY(0);
  transform-origin:top center;
  opacity:0;
}
.home-page .index-scroll-guide.is-sweeping .index-scroll-guide-line::after{
  animation:index-scroll-guide-sweep 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.home-page .index-scroll-guide-label{
  margin-top:12px;
  font-family:"Averta PE",Arial,sans-serif;
  font-weight:300;
  font-size:10px;
  line-height:1;
  letter-spacing:.04em;
  color:rgba(255,255,255,.4);
  opacity:0;
  transition:opacity .38s ease;
}
.home-page .index-scroll-guide.is-idle-visible .index-scroll-guide-label{
  opacity:1;
}
@keyframes index-scroll-guide-sweep{
  0%{transform:scaleY(0);opacity:0}
  8%{opacity:1}
  100%{transform:scaleY(1);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .home-page .index-scroll-guide-line{
    background:rgba(255,255,255,.45);
  }
  .home-page .index-scroll-guide-line::after{
    display:none;
  }
  .home-page .index-scroll-guide-label{
    transition:none;
  }
}

/* One animation vocabulary: hidden -> three A-Z / 0-9 states -> authored glyph. */
.home-page .managed-character.is-scrambling::after{display:none!important}
.home-page .managed-character.motion-pending{color:transparent!important}
.home-page .managed-character.motion-scrambling{
  position:relative;
  color:transparent!important;
}
.home-page .managed-character.motion-scrambling::before{
  content:attr(data-scramble-glyph);
  position:absolute;
  inset:0 auto auto 0;
  color:rgba(var(--scramble-rgb,17,17,17),var(--scramble-alpha,1));
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  white-space:pre;
  pointer-events:none;
}
.home-page .managed-character.motion-resolved{
  color:rgba(var(--scramble-rgb,17,17,17),var(--final-alpha,1))!important;
}

/* HERO: keep current font size; reduce current line-height by 5%. */
.home-page .definition-copy{
  font-size:calc(clamp(43px,6.15vw,106px) - 3px - 3pt)!important;
  line-height:1.0374!important;
}
.home-page .definition-source{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  font-weight:300!important;
  font-size:16px!important;
  line-height:1.2!important;
}

/* SUBTRACTIVE / DESIGN: fixed two-line lockup, 10% more leading than .79. */
.home-page .subtractive-title{
  line-height:.869!important;
}
.home-page .subtractive-title>span{
  display:block!important;
}

/* DESIGN PRINCIPLES */
.home-page .principles-section{
  --principles-lock-top:12vh;
  --principles-edge-space:clamp(108px,12vh,168px);
  --principles-bottom-space:clamp(54px,6vh,84px);
  padding-top:var(--principles-edge-space)!important;
  padding-bottom:var(--principles-bottom-space)!important;
}
.home-page .principles-persistent-label{top:var(--principles-lock-top)!important}
.home-page .principles-head{
  top:var(--principles-lock-top)!important;
  padding-top:0!important;
}

/* LESS rows never travel vertically: only glyph states change in-place. */
.home-page .principles-intro,
.home-page .principles-intro-row,
.home-page .principles-intro-en,
.home-page .principles-intro-ko{
  transform:none!important;
  translate:none!important;
  transition:none!important;
  animation:none!important;
}

.home-page .principles-intro-ko{
  font-size:.9em!important;
  line-height:.99!important;
}

/*
  185vh leaves 85vh of effective sticky travel. The JS timeline spends that
  distance on English reveal, English hold, Korean morph and Korean hold before
  the page is allowed to continue into the cards.
*/
.home-page .principles-intro-stage{height:185vh!important}
/* Final Korean intro -> first principle copy: 200px -> 100px. */
.home-page .principles-after-intro{height:100px!important}
.home-page .principles-cards-stage{
  margin-top:0!important;
  height:250vh!important;
}
.home-page .principles-grid{
  top:var(--principles-lock-top)!important;
  align-content:start!important;
  box-sizing:border-box!important;
  min-height:60vh!important;
  padding-top:0!important;
  gap:54px!important;
}

/* Numbers are removed from HTML; copy owns the full second column. */
@media(min-width:851px){
  .home-page .principle-card{
    grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)!important;
    column-gap:var(--gap)!important;
  }
  .home-page .principle-card-inner{
    grid-column:2!important;
    display:block!important;
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .home-page .principle-copy{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
}
.home-page .principle-no{display:none!important}

.home-page .principle-ko{
  font-size:calc(var(--principles-ko-size) * .486)!important;
  line-height:1.188!important;
}

/* Korean copy -> English caption: 18px -> 16.2px (additional 10% reduction). */
.home-page .principle-copy-stage{margin-bottom:16.2px!important}
.home-page .principle-en{margin-top:0!important}

.home-page .principle-card.timeline-card{
  opacity:var(--timeline-card-opacity,0)!important;
  transform:none!important;
}
.home-page .principle-en .fill-char{
  color:rgba(255,255,255,var(--en-alpha,.05))!important;
}

/* WORKS: each word is atomic; wrapping can happen only between words. */
.home-page .showcase-project h3{
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  line-break:auto!important;
}
.home-page .showcase-project h3 .work-word{
  display:inline-block!important;
  white-space:nowrap!important;
}

@media(max-width:850px){
  .home-page .definition-copy{
    font-size:calc(clamp(30px,8.4vw,58px) - 3px - 3pt)!important;
    line-height:1.083!important;
  }

  /* Mobile source value is .82; add the same 10% leading increase. */
  .home-page .subtractive-title{
    line-height:.902!important;
  }

  /*
    Keep the section label below the GNB, but place all actual principle content
    lower than the label. The content top scales gently with device width so
    the first LESS line and subsequent card copy never collide with the label.
  */
  .home-page .principles-section{
    --principles-label-top:70px;
    --principles-content-top:clamp(118px,30vw,132px);
    --principles-edge-space:clamp(84px,20vw,120px);
    --principles-bottom-space:clamp(42px,10vw,60px);
    padding-top:var(--principles-edge-space)!important;
    padding-bottom:var(--principles-bottom-space)!important;
  }
  .home-page .principles-persistent-label{
    top:var(--principles-label-top)!important;
  }
  .home-page .principles-head,
  .home-page .principles-grid{
    top:var(--principles-content-top)!important;
  }
  .home-page .principles-head{padding-top:0!important}
  .home-page .principles-intro-stage{height:180vh!important}
  .home-page .principles-cards-stage{height:245vh!important}
  .home-page .principles-grid{
    min-height:64vh!important;
    padding-top:0!important;
    gap:54px!important;
  }
  .home-page .principle-card-inner{
    position:relative!important;
    grid-column:1 / -1!important;
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .home-page .principle-copy{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  /* Responsive mobile card copy: exact 1.3x increase from the previous clamp. */
  .home-page .principle-ko{
    font-size:clamp(22.1px,6.24vw,27.3px)!important;
    line-height:1.22!important;
  }
  .home-page .principle-copy-stage{margin-bottom:16.2px!important}
}

@media(prefers-reduced-motion:reduce){
  .home-page .managed-character.motion-pending,
  .home-page .managed-character.motion-scrambling,
  .home-page .managed-character.motion-resolved{color:inherit!important}
  .home-page .managed-character.motion-scrambling::before{display:none!important}
  .home-page .principle-card.timeline-card{opacity:1!important;transform:none!important}
}