/* Share the desktop row metrics with the mobile drawer: 19px label leading
   plus 14px vertical inset. Borders stay inside the same 33px box. */
.work-nav .category,
.work-nav .index-link {
  padding: 7px 0;
  block-size: calc(1lh + 14px);
  min-height: 0;
}
/* Uppercase only the four categories, including the inherited hover copies.
   Project names and translated Chinese labels keep their authored casing. */
.work-nav .category { text-transform: uppercase; }

/* Keep both the original label and hover copy on one identical line. */
.work-nav .index-title {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card captions: 8px below the artwork, no added gap between text rows. */
.card-caption { padding-top: 8px; }
.card-tags { margin-top: 0; }

/* Remove the bear's frame stroke without changing the illustration. */
.portrait { border: 0; }

/* Keep every thumbnail at its resting size, including on hover-out.
   Page entry animates the outer frame; card labels and clicks stay unchanged. */
.project-art img,
.card-button:hover .project-art img {
  transform: none;
  transition: none;
}

/* Frame the footer like one nav item without changing its smaller text.
   The measured nav border-box includes both rules. Keep the old breathing
   room outside the frame so it cannot inflate the requested row height. */
.sidebar-footer {
  box-sizing: border-box;
  block-size: var(--nav-item-height, 33px);
  border-block: 1px solid var(--line);
  justify-content: flex-start;
  padding: 0;
  margin-block-start: 24px;
}

/* Year and clock form the left group; language stays flush right.
   Share the exact same spacing with the mobile drawer. */
.sidebar-footer #clock { margin-inline-start: 20px; }
.sidebar-footer .language-switch { margin-inline-start: auto; }
/* Use the same text-sized language controls at every width, not the old
   stacked mobile footer's added button padding. */
.sidebar-footer .language-switch button { padding: 0; }

/* V2 desktop: hug the intro/portrait instead of reserving a fixed 213px header.
   The mobile drawer owns its own placement without changing these metrics. */
@media (min-width: 761px) {
  .introduction {
    min-height: 0;
    padding-bottom: 20px;
  }

  /* When intro copy wraps taller, keep the portrait's bottom on the same edge
     so the project gap is still exactly 20px, without overlapping the text. */
  .philosophy { align-self: stretch; }
  .portrait { align-self: end; }

  /* Keep the SAME responsive header measurable on direct case-study loads.
     It is invisible and out of flow, not a blank spacer above the case study.
     Anchoring to .content preserves its exact gallery width at every viewport.
     Hide the wrapper with non-inherited opacity: inherited visibility can stay
     hidden on animated paragraphs after rapid hidden/measurable route changes. */
  .content { position: relative; }
  .is-case-study .introduction[hidden] {
    display: grid;
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    pointer-events: none;
  }
}