/* Keep the visual archive full width and fit both programs into one outcome bar. */
.work .visual.koc-carousel{
  display:flex;
  flex-direction:column;
  height:auto;
  aspect-ratio:auto;
}
.work .koc-media{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  flex:none;
}
@media(min-width:761px){
  .work .visual.koc-carousel,.work .visual.nikke-carousel{
    height:clamp(390px,26.5vw,420px);
    aspect-ratio:auto;
  }
  .work .koc-media{
    flex:1 1 auto;
    min-height:0;
    aspect-ratio:auto;
  }
}
@media(min-width:761px) and (max-width:1200px){
  .work .visual.koc-carousel,.work .visual.nikke-carousel{
    height:clamp(380px,49vw,520px);
  }
}
.work .koc-performance{
  height:auto;
  display:grid;
  grid-template-columns:3fr 2fr;
  padding:14px 18px 15px;
  background:#e8ddcb;
  color:#302a24;
}
.koc-outcome{
  min-width:0;
}
.koc-outcome + .koc-outcome{
  margin:0 0 0 12px;
  padding-left:12px;
  border-left:1px solid #3b32284a;
}
.koc-outcome-heading{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:11px;
  font:700 12px/1.2 'Space Grotesk',sans-serif;
  letter-spacing:.06em;
}
.koc-outcome-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.koc-outcome--reverse .koc-outcome-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.koc-outcome-metric{
  min-width:0;
  padding:0 11px;
  border-left:1px solid #3b322835;
}
.koc-outcome-metric:first-child{
  padding-left:0;
  border-left:0;
}
.koc-outcome-metric strong{
  display:block;
  font:600 clamp(26px,2.8vw,40px)/.95 'Space Grotesk',sans-serif;
  letter-spacing:-.06em;
}
.koc-outcome-metric > span{
  display:block;
  margin-top:5px;
  font:600 11px/1.25 'Space Grotesk',sans-serif;
  color:#51483d;
}
.koc-outcome-metric > small{
  display:block;
  margin-top:3px;
  font:500 9px/1.25 'Space Grotesk',sans-serif;
  color:#706455;
}
.koc-outcome--reverse .koc-outcome-metric:last-child strong{
  font-size:clamp(18px,1.7vw,24px);
  letter-spacing:-.04em;
}
@media(min-width:1201px){
  .koc-outcome-metric strong{font-size:clamp(28px,2.4vw,36px)}
}
@media(max-width:560px){
  .work .koc-performance{grid-template-columns:1fr;padding:10px 12px 12px}
  .koc-outcome + .koc-outcome{margin:9px 0 0;padding:9px 0 0;border-left:0;border-top:1px solid #3b32284a}
  .koc-outcome-heading{flex-wrap:wrap;gap:3px 9px;font-size:10px}
  .koc-outcome-metric{padding:0 6px}
  .koc-outcome-metric strong{font-size:clamp(21px,6vw,29px)}
  .koc-outcome-metric > span{font-size:10px}
  .koc-outcome-metric > small{font-size:8px}
  .koc-outcome--reverse .koc-outcome-metric:last-child strong{font-size:17px}
}

/* WORKS project titles already contain a single intentional <br>.
   Avoid the legacy 46% right-hand reservation forcing extra wraps on NIKKE.
   Keep typography and the rest of the card layout unchanged. */
.work #nikke .project-head {
  padding-right: 0;
}
.work #nikke .project-head h3 {
  white-space: nowrap;
}
@media (max-width: 420px) {
  .work #nikke .project-head h3 {
    font-size: clamp(20px, 6.8vw, 29px);
  }
}

/* WORKS static project covers: show only the first existing visual in each
   card. Preserve the image frame, outcome metrics, role panel and case links. */
.work .koc-media .koc-carousel-track,
.work .nikke-media .nikke-carousel-track {
  display: block;
  width: 100%;
  height: 100%;
  animation: none !important;
  transform: none !important;
  will-change: auto;
}
.work .koc-media .koc-carousel-track > img,
.work .nikke-media .nikke-carousel-track > img {
  display: none;
}
.work .koc-media .koc-carousel-track > img:first-child,
.work .nikke-media .nikke-carousel-track > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: none;
}


/* Simplified Chinese featured WORKS headings use a single line only.
   English headline line breaks remain unchanged. */
html[lang="zh-CN"] .work :is(#koc, #nikke) .project-head { padding-right: 0; }
html[lang="zh-CN"] .work :is(#koc, #nikke) .project-head h3 { white-space: nowrap; }
html[lang="zh-CN"] .work #nikke .project-head h3 { font-size: clamp(22px, 2.75vw, 43px); }
@media (max-width: 760px) {
  /* Keep the requested single-line Chinese title without letting its
     unbroken text widen the whole document at narrow phone widths. */
  html[lang="zh-CN"] .work #nikke .project-head h3 {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(15px, 4.25vw, 29px);
  }
}

/* Mobile WORKS: the inline renderer now nests the project cards inside
   .work-pair. Restore the positioning/flex context that the old direct-child
   selector no longer matches. Absolute category captions must stay anchored
   to their own project rather than escaping into the hero viewport. */
@media (max-width: 760px) {
  .work #more-work .work-pair > .project {
    position: relative;
    top: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
}