/* Case study page (YCharts Marketing, etc.) — shell matches About */
/*
 * Section rhythm (see .cursor/rules/portfolio-six-column-grid.mdc):
 * Web: 6 col, 20px padding + gutters. Inside a section: 20px eyebrow↔sub-section; 10px between items in a sub-section; 0 between text↔text.
 * Mobile: 10px padding + gutters; same 20 / 10 / 0 inside sections.
 */

/* Case study title + year bar — fixed under main nav (or mobile header); scroll-area padding is set in about.js */
.page-yc .case-study-meta {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 199; /* under .nav (200), above case content */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--divider-subtle);
  /* top: set inline in about.js to sit below .nav / .mobile-header */
}
/* Text / Small / Semibold (.75rem) */
.page-yc .case-study-meta__title {
  margin: 0;
  min-width: 0;
  text-align: left;
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  line-height: var(--type-sm-semi-lh);
  letter-spacing: var(--type-sm-semi-tracking);
  color: var(--text);
}
/* Text / Small / Regular (.75rem) */
.page-yc .case-study-meta__year {
  margin: 0;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  line-height: var(--type-sm-reg-lh);
  letter-spacing: var(--type-sm-reg-tracking);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Avoid double rule when meta bar sits directly above the main grid (placeholder templates) */
.page-yc .case-study-meta + .g6.case-main {
  border-top: none;
}

.page-yc .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
}

.page-yc .footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
}

.page-yc .scroll-area {
  position: fixed; left: 0; right: 0;
  overflow-y: auto; overflow-x: clip;
}
.page-yc .scroll-area::-webkit-scrollbar { display: none; }
.page-yc .scroll-area { scrollbar-width: none; }

/* Web (default): 6-column grid, 20px gutters + 20px horizontal padding. ≤768: see media query (10px). */
.page-yc .g6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  padding: 0 20px;
}

/* ── Hero (full bleed between fixed nav + footer; height = scroll viewport) ── */
.page-yc .case-hero {
  position: relative;
  width: 100%;
  /* Fill the visible viewport remainder under fixed chrome. */
  height: var(--yc-view-h, calc(100svh - 120px));
  min-height: var(--yc-view-h, calc(100svh - 120px));
  overflow: hidden;
  /* iOS-style vibrancy glass — shared by headline panel + pills */
  --yc-glass-blur: 24px;
  --yc-glass-saturate: 180%;
  --yc-glass-fill: rgba(255, 255, 255, 0.34);
  --yc-glass-border: rgba(255, 255, 255, 0.48);
  --yc-glass-edge: rgba(255, 255, 255, 0.65);
  --yc-glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .page-yc .case-hero {
  --yc-glass-fill: rgba(42, 42, 40, 0.48);
  --yc-glass-border: rgba(255, 255, 255, 0.16);
  --yc-glass-edge: rgba(255, 255, 255, 0.12);
  --yc-glass-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
.page-yc .case-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--card);
}
.page-yc .case-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  display: block;
  user-select: none;
  pointer-events: none;
}
.page-yc .case-hero-layer {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.page-yc .case-hero-grid {
  flex: 1 0 auto;
  width: 100%;
  align-content: start;
  padding-top: 20px;
  padding-bottom: 20px;
  row-gap: 20px;
}
.page-yc .case-hero-text-glass {
  grid-column: 1 / span 4;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}
.page-yc .case-hero-h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.page-yc .case-hero-line--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  gap: 0.22em;
}
.page-yc .case-hero-frag {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  max-width: 100%;
}
/* Hero headline: solid black. (Liquid-glass type treatment removed for now — reintroduce when refined.) */
.page-yc .case-hero-frag--glass,
.page-yc .case-hero-frag--accent {
  color: #000000;
  -webkit-text-fill-color: currentColor;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

/* Body grid after hero */
.page-yc .scroll-area > .g6.case-main {
  border-top: 1px solid var(--divider-subtle);
}

/* Context — expandable teaser (4-line clamp + read more/less); shared by Well / YCharts. Vertical inset: 40+40=80px web, 20+20=40px mobile. */
.page-yc .case-context {
  grid-column: 1 / -1;
  padding: 40px 0;
}
.page-yc .case-context .case-lbl {
  margin-bottom: 10px;
}
.page-yc .case-context-inner {
  max-width: none;
}
.page-yc .case-context-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  font-size: var(--type-d2-size);
  font-weight: 500;
  line-height: var(--type-d2-lh);
  letter-spacing: var(--type-d2-tracking);
  color: var(--text);
}
.page-yc .case-context-body.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.page-yc .case-context-body p {
  margin: 0;
}
.page-yc .case-context-body p + p {
  margin-top: 0;
}
.page-yc .case-context-toggle {
  margin-top: 10px;
  padding: 0;
  font: inherit;
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: var(--muted);
  border: none;
  background: none;
  cursor: none;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.page-yc .case-context-toggle:hover {
  color: var(--text);
}
.page-yc .case-context-toggle:focus-visible {
  outline: 1px solid var(--ring);
  outline-offset: 3px;
}

/* Spacer between Context and Contextsm */
.page-yc .case-context-spacer {
  grid-column: 1 / -1;
  height: 58vh;
  min-height: 520px;
  position: relative;
  overflow: visible;
}
.page-yc .case-context-spacer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../wds/assets/ycm/ycm-img.bluegradient.png");
  background-repeat: no-repeat;
  background-size: min(58vw, 820px) auto;
  background-position: 112% 152%;
  opacity: 0.72;
  pointer-events: none;
}

/* Context small block (below Context) */
.page-yc .case-context-sm {
  grid-column: 1 / -1;
  padding: 0;
}
.page-yc .case-context-sm-inner {
  max-width: 34rem;
}
.page-yc .case-context-sm-inner p {
  margin: 0;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  line-height: var(--type-sm-reg-lh);
  letter-spacing: var(--type-sm-reg-tracking);
  color: var(--text);
}
.page-yc .case-context-sm-inner p + p {
  margin-top: 0;
}

/* ycm.pattern — full bleed, no padding, natural height */
.page-yc .case-pattern {
  grid-column: 1 / -1;
  margin: 20px -20px 0;
  width: calc(100% + 40px);
}
.page-yc .case-pattern img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ycm.website-preview — 6-column with 20px spacing, image fills frame */
.page-yc .case-website-preview {
  grid-column: 1 / -1;
  padding-top: 20px;
}
.page-yc .case-website-preview-meta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 0 0 20px;
  width: 100%;
  height: auto;
  align-items: start;
}
.page-yc .case-website-preview-idx {
  grid-column: 4 / 5;
  margin: 0;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
  color: var(--muted);
  text-align: right;
}
.page-yc .case-website-preview-copy {
  grid-column: 5 / -1;
  margin: 0;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
  color: var(--text);
  text-align: left;
}
.page-yc .case-website-preview-frame {
  width: calc(100% + 40px);
  margin: 0 -20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--card);
}
.page-yc .case-website-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Carousel scaffold (structure pass only) */
.page-yc .case-carousel {
  grid-column: 1 / -1;
  padding-top: 20px;
}
.page-yc .case-carousel-idx {
  margin: 0;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  line-height: var(--type-sm-reg-lh);
  letter-spacing: var(--type-sm-reg-tracking);
  color: var(--muted);
}
.page-yc .case-carousel-copy {
  margin: 0;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  line-height: var(--type-sm-reg-lh);
  letter-spacing: var(--type-sm-reg-tracking);
  color: var(--text);
}
.page-yc .case-carousel-stage {
  width: calc(100% + 40px);
  margin: 0 -20px;
  overflow: hidden;
}
.page-yc .case-carousel-scroll {
  width: 100%;
  margin: 0;
  height: auto;
  position: relative;
}
.page-yc .case-carousel-sticky {
  position: static;
  top: auto;
  height: auto;
  min-height: 0;
  background: transparent;
  overflow: visible;
}
.page-yc .case-carousel-shell {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  height: auto;
  padding: 20px 0 0;
}
.page-yc .case-carousel-textmeta {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px 0 0;
  align-items: flex-start;
}
.page-yc .case-carousel-media {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: clamp(80px, 15vw, 120px) minmax(0, 1fr);
  gap: 20px;
  height: auto;
  align-items: start;
}
[data-theme="dark"] .page-yc .case-carousel,
[data-theme="dark"] .page-yc .case-carousel-stage,
[data-theme="dark"] .page-yc .case-carousel-scroll,
[data-theme="dark"] .page-yc .case-carousel-sticky,
[data-theme="dark"] .page-yc .case-carousel-shell,
[data-theme="dark"] .page-yc .case-carousel-textmeta,
[data-theme="dark"] .page-yc .case-carousel-media,
[data-theme="dark"] .page-yc .case-carousel-previews,
[data-theme="dark"] .page-yc .case-carousel-thumb,
[data-theme="dark"] .page-yc .case-carousel-main,
[data-theme="dark"] .page-yc .case-carousel-main-image {
  background: transparent !important;
}
.page-yc .case-carousel-previews {
  --carousel-preview-width: clamp(80px, 15vw, 120px);
  --carousel-preview-ratio: 4 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 0;
}
.page-yc .case-carousel-thumb {
  width: var(--carousel-preview-width);
  aspect-ratio: var(--carousel-preview-ratio);
  flex: 0 0 auto;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  overflow: hidden;
  opacity: 0.9;
  transition: opacity 0.25s;
}
.page-yc .case-carousel-thumb:hover,
.page-yc .case-carousel-thumb.is-active {
  opacity: 1;
}
.page-yc .case-carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  user-select: none;
  pointer-events: none;
}
.page-yc .case-carousel-invert-frame {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  /* width/height set by case-yc.js to match first thumbnail exactly */
  width: 0;
  height: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.9);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 3;
  transform: translateY(0);
  transition: transform 0.24s var(--expo);
}
.page-yc .case-carousel-main {
  position: relative;
  height: auto;
  overflow: visible;
  background: transparent;
}
.page-yc .case-carousel-main-image {
  position: static;
  width: 100%;
  height: auto;
  display: none;
  opacity: 1;
  transition: none;
  user-select: none;
  pointer-events: none;
  background: transparent;
}
.page-yc .case-carousel-main-image.is-active {
  display: block;
  opacity: 1;
}

/* Motion pair section under carousel */
.page-yc .case-motion-pair {
  grid-column: 1 / -1;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
}
.page-yc .case-motion-item {
  grid-column: span 2;
  background: #f7f7f6;
  overflow: hidden;
}
.page-yc .case-motion-item:first-child {
  grid-column: 2 / 4;
}
.page-yc .case-motion-item:last-child {
  grid-column: 4 / 6;
}
.page-yc .case-motion-item video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #f7f7f6;
}

/* Next project footer section */
.page-yc .case-next {
  grid-column: 1 / -1;
  margin-top: 20px;
}
.page-yc .case-next-link {
  display: block;
  background: #ececec;
  padding: 20px;
}
.page-yc .case-next-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  align-items: start;
}
.page-yc .case-next-label {
  grid-column: 1 / 2;
  margin: 0;
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: var(--text);
}
.page-yc .case-next-grid img {
  width: 100%;
  display: block;
  background: #dcdcdc;
  object-fit: cover;
}
.page-yc .case-next-grid img:nth-of-type(1) { grid-column: 2 / 4; aspect-ratio: 4 / 3; }
.page-yc .case-next-grid img:nth-of-type(2) { grid-column: 4 / 5; aspect-ratio: 3 / 4; }
.page-yc .case-next-grid img:nth-of-type(3) { grid-column: 5 / 7; aspect-ratio: 4 / 3; }
.page-yc .case-next-grid img:nth-of-type(4) { grid-column: 3 / 4; aspect-ratio: 3 / 4; }
.page-yc .case-next-grid img:nth-of-type(5) { grid-column: 4 / 6; aspect-ratio: 4 / 3; }

/* Pills (hero: full width row, 5px horizontal gap) */
.page-yc .case-tags.case-tags--hero {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
}
.page-yc .case-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
  color: var(--text);
  border: 1px solid var(--divider-subtle);
  border-radius: 20px;
  padding: 4px 10px;
}
.page-yc .case-tags--hero .case-tag {
  border: 1px solid var(--yc-glass-border);
  background: var(--yc-glass-fill);
  backdrop-filter: blur(var(--yc-glass-blur)) saturate(var(--yc-glass-saturate));
  -webkit-backdrop-filter: blur(var(--yc-glass-blur)) saturate(var(--yc-glass-saturate));
  box-shadow:
    0 1px 0 var(--yc-glass-edge) inset,
    0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .page-yc .case-tags--hero .case-tag {
  box-shadow:
    0 1px 0 var(--yc-glass-edge) inset,
    0 2px 12px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .page-yc .case-tags--hero .case-tag {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.92);
  }
  [data-theme="dark"] .page-yc .case-tags--hero .case-tag {
    background: rgba(36, 35, 32, 0.92);
  }
}

/* Content sections */
.page-yc .case-block {
  grid-column: 1 / -1;
  padding: 20px 0 0;
}
.page-yc .case-lbl {
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: var(--muted);
  margin-bottom: 20px;
}
.page-yc .case-txt {
  font-size: var(--type-base-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-base-reg-tracking);
  line-height: var(--type-base-reg-lh);
  color: var(--text);
  max-width: 40rem;
}
.page-yc .case-txt + .case-txt { margin-top: 0; }
.page-yc .case-txt strong {
  font-weight: 500;
  letter-spacing: var(--type-base-semi-tracking);
  line-height: var(--type-base-semi-lh);
}
.page-yc .case-note {
  color: var(--muted);
  font-size: var(--type-sm-reg-size);
  line-height: var(--type-sm-reg-lh);
  letter-spacing: var(--type-sm-reg-tracking);
  font-weight: 400;
}

/* Two col on large: role | timeline */
.page-yc .case-split {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px 0 0;
  border-top: 1px solid var(--divider-subtle);
  margin-top: 20px;
}
.page-yc .case-split .case-lbl { margin-bottom: 20px; }
.page-yc .case-split .case-txt { max-width: none; }

/* Full-width figures */
.page-yc .case-fig {
  grid-column: 1 / -1;
  margin: 20px 0 0;
  background: var(--card);
  overflow: hidden;
  border: 1px solid var(--divider-subtle);
}
.page-yc .case-fig--browser {
  aspect-ratio: 16/9;
}
.page-yc .case-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}
.page-yc .case-fig-cap {
  grid-column: 1 / -1;
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
  color: var(--muted);
  margin-top: 10px;
  padding: 0 0 10px;
}

/* Horizontal image strip (same behavior as work page) */
.page-yc .cs-images {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
  gap: 10px;
  padding: 8px 0 0 20px;
  margin: 0 -20px 0;
  max-width: none;
  width: calc(100% + 40px);
  grid-column: 1 / -1;
}
.page-yc .cs-images::after {
  content: '';
  flex: 0 0 20px;
  min-width: 20px;
  align-self: stretch;
  pointer-events: none;
  scroll-snap-align: none;
}
.page-yc .cs-images::-webkit-scrollbar { display: none; }
.page-yc .cs-img-browser {
  flex: 0 0 min(75vw, 960px);
  overflow: hidden;
  background: transparent;
  scroll-snap-align: start;
  height: 55vh;
}
.page-yc .cs-img-browser img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transform-origin: center;
  display: block;
  user-select: none;
  pointer-events: none;
}
.page-yc .cs-img-ag {
  flex: 0 0 min(44vw, 280px);
  aspect-ratio: 1/1;
  background: #0a0a0a;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 1.25rem; gap: 0.5rem;
  overflow: hidden;
  scroll-snap-align: start;
}
.page-yc .ag-big {
  font-size: var(--type-base-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-base-semi-tracking);
  line-height: var(--type-base-semi-lh);
  color: #f0efe9;
}
.page-yc .ag-alphabet {
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: #f0efe9;
  white-space: nowrap;
}
.page-yc .ag-lower {
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  color: rgba(240,239,233,0.45);
  white-space: nowrap;
}

.page-yc .case-spacer { grid-column: 1 / -1; height: 20px; }
.page-yc .case-bottom-pad { grid-column: 1 / -1; height: 15vh; min-height: 80px; }

@media (max-width: 768px) {
  .page-yc .nav { display: none; }
  .page-yc .footer { display: none; }
  .page-yc .mobile-header {
    border-bottom: 1px solid var(--divider-strong);
  }
  .page-yc .mobile-bottom-nav {
    border-top: 1px solid var(--divider-strong);
  }
  .page-yc .case-study-meta { padding: 10px; }
  .page-yc .g6 { padding: 0 10px; column-gap: 10px; }
  .page-yc .case-hero-grid { padding-top: 10px; padding-bottom: 10px; row-gap: 20px; }
  .page-yc .case-hero-text-glass { grid-column: 1 / -1; width: auto; }
  .page-yc .case-context {
    padding: 20px 0;
  }
  .page-yc .case-context-body {
    font-size: clamp(1.6rem, 4.2vw, var(--type-d2-size));
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  /* Mobile: stable image positioning, no vh-based movement. */
  .page-yc .case-hero-bg img {
    object-fit: contain;
    object-position: 50% 50%;
  }
  .page-yc .case-context-spacer {
    height: 48vh;
    min-height: 300px;
  }
  .page-yc .case-context-spacer::before {
    background-size: min(96vw, 640px) auto;
    background-position: 58% 70%;
    opacity: 0.7;
  }
  .page-yc .case-pattern {
    margin: 20px -10px 0;
    width: calc(100% + 20px);
  }
  .page-yc .case-website-preview-meta {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0 0 14px;
  }
  .page-yc .case-website-preview-idx,
  .page-yc .case-website-preview-copy {
    grid-column: 1 / -1;
  }
  .page-yc .case-website-preview-frame {
    width: calc(100% + 20px);
    margin: 0 -10px;
  }
  .page-yc .case-carousel-stage {
    width: calc(100% + 20px);
    margin: 0 -10px;
  }
  .page-yc .case-carousel-scroll {
    width: 100%;
    margin: 0;
    height: auto;
  }
  .page-yc .case-carousel-sticky {
    position: static;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .page-yc .case-carousel-shell {
    padding: 10px 0 0;
    column-gap: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .page-yc .case-carousel-textmeta {
    grid-column: 1 / -1;
    gap: 10px;
    padding: 0;
    order: 2;
  }
  .page-yc .case-carousel-media {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    order: 1;
  }
  .page-yc .case-carousel-previews {
    --carousel-preview-width: 100px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: 100%;
    padding: 0;
    scrollbar-width: none;
  }
  .page-yc .case-carousel-previews::-webkit-scrollbar {
    display: none;
  }
  .page-yc .case-carousel-thumb {
    width: var(--carousel-preview-width);
    flex: 0 0 var(--carousel-preview-width);
    scroll-snap-align: start;
    position: relative;
  }
  .page-yc .case-carousel-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s var(--expo);
  }
  .page-yc .case-carousel-thumb.is-active::after {
    opacity: 1;
  }
  .page-yc .case-carousel-invert-frame {
    display: none;
  }
  .page-yc .case-carousel-main {
    width: 100%;
  }
  .page-yc .case-context-sm-inner { max-width: 100%; }
  .page-yc .case-motion-pair {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 20px;
  }
  .page-yc .case-motion-item,
  .page-yc .case-motion-item:first-child,
  .page-yc .case-motion-item:last-child {
    grid-column: 1 / -1;
  }
  .page-yc .case-next {
    margin-top: 20px;
  }
  .page-yc .case-next-link {
    padding: 10px;
  }
  .page-yc .case-next-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 10px;
  }
  .page-yc .case-next-label {
    grid-column: 1 / -1;
  }
  .page-yc .case-next-grid img:nth-of-type(1),
  .page-yc .case-next-grid img:nth-of-type(2),
  .page-yc .case-next-grid img:nth-of-type(3),
  .page-yc .case-next-grid img:nth-of-type(4),
  .page-yc .case-next-grid img:nth-of-type(5) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
  .page-yc .case-split {
    grid-template-columns: 1fr;
  }
  .page-yc .cs-images {
    margin: 0 -10px 0;
    width: calc(100% + 20px);
    padding: 8px 0 0 10px;
    scroll-padding-left: 10px;
    scroll-padding-right: 10px;
  }
  .page-yc .cs-img-browser {
    flex-basis: calc(100vw - 40px);
    height: 55vh;
  }
  .page-yc .cs-img-browser img {
    width: 100%;
    height: 100%;
    transform: scale(1.12);
  }
  .page-yc .cs-images::after { flex: 0 0 10px; min-width: 10px; }
}

/* ── Lightbox ── */
[data-lightbox] { cursor: zoom-in; pointer-events: auto; }
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
  cursor: zoom-out;
}
.gallery-lightbox.is-open { opacity: 1; }
.gallery-lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(90vw, 1200px);
  cursor: default;
}
.gallery-lightbox__inner img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}
.gallery-lightbox__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.gallery-lightbox__n {
  font-size: var(--type-sm-reg-size, 0.75rem);
  color: rgba(255,255,255,0.3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.gallery-lightbox__cap {
  margin: 0;
  font-size: var(--type-sm-reg-size, 0.75rem);
  color: rgba(255,255,255,0.7);
}
.gallery-lightbox__close {
  position: absolute;
  top: -36px; right: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.gallery-lightbox__close:hover { color: #fff; }

.page-yc .case-work-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--divider-subtle);
  border-radius: 20px;
  background: none;
  font-family: var(--font);
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: #ffffff;
  background: #000000;
  text-decoration: none;
}
[data-theme="dark"] .page-yc .case-work-nav__cta {
  color: #000000;
  background: #ffffff;
}
.page-yc .case-work-nav__row--current .case-work-nav__client,
.page-yc .case-work-nav__row--current .case-work-nav__desc {
  color: var(--muted);
  text-decoration: line-through;
}