/* ==========================================================================
   Selected Work — case chapters (scripts/case-showcase.js), 2026-10-21.
   Concept: each case is a chapter with its own atmosphere (glow colours taken
   from the work), an outlined chapter numeral, and a main stage designed around
   its strongest proof. Copy and stage alternate sides; the award chapter opens
   up into a full-width "artboard canvas". Media stay sharp: no blur or grain,
   only dimming on inactive panels.
   Layout: ≥1100px two columns · 768–1099 one column · phones one column with
   swipe strips. Depth: --depth (−1…1, set while a chapter passes) drifts layers.
   ========================================================================== */
.vgl-cases {
  --cs-line: rgba(255, 255, 255, 0.12);
  --cs-muted: rgba(255, 255, 255, 0.64);
  --cs-faint: rgba(255, 255, 255, 0.42);
  --cs-accent: #b9a2ff;
  --cs-panel: #0e0b1a;
  --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 1360px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  pointer-events: auto; /* the theme's .team wrapper is pointer-events:none */
  font-family: "PPNeueMontreal", system-ui, sans-serif;
  color: #fff;
}
@media (min-width: 1024px) {
  #engagement .team { margin-bottom: clamp(4rem, 7vw, 8rem); }
}

/* ---- chapter cards --------------------------------------------------------- */
.cs-toc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cs-toc__item {
  --glow-l: color-mix(in srgb, var(--glow) 55%, #fff);
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 14px;
  min-width: 0;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 60%),
    rgba(14, 11, 26, 0.55);
  color: #fff;
  text-decoration: none;
  transition: transform 0.5s var(--cs-ease), border-color 0.4s ease, background-color 0.4s ease;
}
.cs-toc__media {
  grid-row: 1 / span 3;
  align-self: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cs-panel);
}
.cs-toc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--cs-ease);
}
.cs-toc__no {
  align-self: end;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--glow-l);
}
.cs-toc__type {
  grid-column: 2;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cs-toc__brand {
  grid-column: 2;
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  color: var(--cs-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-toc__teaser {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--cs-line);
  font-size: 12.5px;
  color: var(--cs-muted);
}
.cs-toc__teaser i {
  font-style: normal;
  color: var(--glow-l);
  transition: transform 0.4s var(--cs-ease);
}
@media (hover: hover) {
  .cs-toc__item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--glow) 60%, transparent); }
  .cs-toc__item:hover .cs-toc__media img { transform: scale(1.08); }
  .cs-toc__item:hover .cs-toc__teaser i { transform: translateY(3px); }
}
.cs-toc__item:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }

/* ---- chapter frame ----------------------------------------------------------- */
.cs-ch {
  --glow-l: color-mix(in srgb, var(--glow) 50%, #fff);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head stage" "body stage";
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  row-gap: 0;
  padding-block: clamp(5rem, 9vw, 8.5rem);
}
.cs-ch--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "stage head" "stage body";
}
/* the copy column stays one block, centred against the stage */
.cs-ch__head { grid-area: head; align-self: end; position: relative; z-index: 1; min-width: 0; }
.cs-ch__body { grid-area: body; align-self: start; position: relative; z-index: 1; min-width: 0; }
.cs-ch__stage { grid-area: stage; align-self: center; position: relative; z-index: 1; min-width: 0; }
/* atmosphere: two soft lights in the case's own colours, on the stage side */
.cs-ch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 70% 48%, color-mix(in srgb, var(--glow) 20%, transparent), transparent 72%),
    radial-gradient(30% 36% at 88% 82%, color-mix(in srgb, var(--glow2) 13%, transparent), transparent 70%);
}
.cs-ch--flip::before {
  background:
    radial-gradient(38% 46% at 30% 48%, color-mix(in srgb, var(--glow) 20%, transparent), transparent 72%),
    radial-gradient(30% 36% at 12% 82%, color-mix(in srgb, var(--glow2) 13%, transparent), transparent 70%);
}
/* outlined chapter numeral behind the copy */
.cs-ch__num {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3.5rem);
  left: -0.04em;
  z-index: 0;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: clamp(8rem, 17vw, 17rem);
  font-weight: 700;
  line-height: 0.8; /* decorative numeral, single line */
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--glow) 40%, rgba(255, 255, 255, 0.2));
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, calc(var(--depth, 0) * -70px), 0);
}
.cs-ch--flip .cs-ch__num { left: auto; right: -0.02em; }

/* ---- copy column --------------------------------------------------------------- */
.cs-ch__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glow-l);
}
.cs-ch__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--cs-faint);
}
.cs-ch__meta span::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.cs-ch__brand {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--cs-muted);
}
.cs-ch__title {
  margin: 0;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: clamp(1.8rem, 2.75vw, 2.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cs-ch__lede {
  max-width: 46ch;
  margin: 1.3rem 0 0;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.cs-ch__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.cs-ch__tags li {
  padding: 0.36em 0.8em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.cs-ch__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.6rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.cs-ch__cta i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--glow) 60%, transparent);
  border-radius: 50%;
  font-style: normal;
  background: color-mix(in srgb, var(--glow) 18%, transparent);
  transition: transform 0.45s var(--cs-ease), background 0.35s ease;
}
.cs-ch__cta:hover i { transform: translateX(5px); background: var(--glow); }
.cs-ch__cta:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; border-radius: 6px; }
.cs-kicker {
  margin: 0 0 0.8rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-faint);
}

/* results: the "how much" sits right under the "what" */
.cs-results { margin-top: 2rem; }
.cs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
  margin: 0;
}
.cs-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cs-line);
}
.cs-stat dd {
  margin: 0;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, var(--glow-l));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-stat dt { font-size: 12.5px; line-height: 1.4; color: var(--cs-muted); }
.cs-stat.is-pending dd { background: none; color: transparent; -webkit-text-stroke: 1px rgba(185, 162, 255, 0.6); }
.cs-source,
.cs-note {
  margin: 1rem 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--cs-faint);
}
.cs-note { margin-top: 0.3rem; }
.cs-source.is-pending { color: var(--cs-accent); }

/* draft preview only: what PM still has to supply */
.cs-need {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.3rem;
  padding: 0.75rem;
  border: 1px dashed rgba(185, 162, 255, 0.55);
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(113, 96, 252, 0.08) 0 12px, transparent 12px 24px), var(--cs-panel);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}
.cs-need b {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-accent);
}

/* ---- shared media ---------------------------------------------------------------- */
.cs-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* stage: a soft light follows the pointer (desktop) */
@media (hover: hover) {
  .cs-ch__stage::after {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(28% 32% at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glow) 26%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .cs-ch__stage:hover::after { opacity: 1; }
}

/* ---- chain (Sulwhasoo): expanding step panels ------------------------------------- */
.cs-chain {
  display: flex;
  gap: 10px;
  height: clamp(440px, 64vh, 620px);
}
.cs-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: var(--cs-panel);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: flex 0.85s var(--cs-ease), border-color 0.5s ease, box-shadow 0.6s ease;
}
.cs-panel .cs-media {
  filter: brightness(0.5) saturate(0.85);
  transform: scale(1.06);
  transition: filter 0.7s ease, transform 1.2s var(--cs-ease);
}
.cs-panel.is-active {
  flex: 4.2 1 0;
  border-color: color-mix(in srgb, var(--glow) 55%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--glow) 60%, transparent);
  cursor: zoom-in;
}
.cs-panel.is-active .cs-media { filter: none; transform: none; }
.cs-panel__shade {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 18, 0.88));
  pointer-events: none;
}
.cs-panel__no {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.cs-panel__label {
  position: absolute;
  left: 50%;
  bottom: 22px;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}
.cs-panel__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: grid;
  gap: 0.3rem;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.4s ease, transform 0.6s var(--cs-ease);
}
.cs-panel__body b {
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cs-panel__body span { max-width: 32ch; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.cs-panel.is-active .cs-panel__label { opacity: 0; }
.cs-panel.is-active .cs-panel__body { opacity: 1; transform: none; transition-delay: 0.3s; }
.cs-panel__timer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--glow-l);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.cs-chain.is-timing .cs-panel.is-active .cs-panel__timer {
  transform: scaleX(1);
  transition: transform var(--dwell, 3800ms) linear;
}
.cs-panel:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs-panel.is-pending { cursor: default; }

/* ---- bento (awards): artboard canvas ------------------------------------------- */
.cs-ch--bento {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "head body" "stage stage";
  column-gap: clamp(1.5rem, 4vw, 4.5rem);
  row-gap: clamp(2rem, 3.5vw, 3rem);
}
.cs-ch--bento .cs-ch__head { align-self: end; }
.cs-ch--bento .cs-ch__body { align-self: end; }
.cs-ch--bento .cs-legend { margin-top: 0; }
.cs-ch--bento::before {
  background:
    radial-gradient(40% 40% at 25% 70%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 72%),
    radial-gradient(35% 35% at 80% 85%, color-mix(in srgb, var(--glow2) 14%, transparent), transparent 70%);
}
.cs-ch--bento .cs-ch__title { max-width: 16ch; }
.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.cs-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--cs-line);
  border-radius: 10px;
  background: rgba(14, 11, 26, 0.5);
  color: #fff;
  font: 500 12.5px/1.2 "PPNeueMontreal", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.cs-legend__item em { font-style: normal; color: var(--cs-faint); }
.cs-legend__item:hover,
.cs-legend__item.is-on { border-color: rgba(185, 162, 255, 0.6); background: rgba(113, 96, 252, 0.16); }
.cs-legend__item:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; }
.cs-dot--film { background: #f472b6; }
.cs-dot--stage { background: #a78bfa; }
.cs-dot--online { background: #38bdf8; }
.cs-dot--ooh { background: #fbbf24; }
.cs-canvas {
  position: relative;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid var(--cs-line);
  border-radius: 24px;
  background-color: rgba(12, 9, 24, 0.62);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 20px 20px;
}
.cs-canvas::before { /* canvas title bar, like a design file */
  content: "Campaign canvas — one concept, every screen";
  position: absolute;
  top: -0.65rem;
  left: 22px;
  padding: 0 0.6rem;
  background: #0b0816;
  font: 500 10.5px/1.3 var(--cs-mono);
  letter-spacing: 0.04em;
  color: var(--cs-faint);
}
.cs-canvas__inner { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.cs-canvas__row { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px); }
.cs-board {
  flex: var(--r) 1 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  transition: opacity 0.35s ease;
}
.cs-board__label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 500 10.5px/1.3 var(--cs-mono);
  color: rgba(255, 255, 255, 0.58);
}
.cs-board__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-board__label em { flex: 0 0 auto; font-style: normal; color: var(--cs-accent); }
.cs-board__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--r, 1.5);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: var(--cs-panel);
  cursor: zoom-in;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.cs-board.is-lead .cs-board__frame { border-radius: 10px; }
/* selection: purple outline + corner handles, like picking an artboard */
.cs-board__handle {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  border: 1.5px solid #9e86ff;
  background: #fff;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cs-board__handle:nth-of-type(1) { top: 3px; left: 3px; }
.cs-board__handle:nth-of-type(2) { top: 3px; right: 3px; }
.cs-board__handle:nth-of-type(3) { bottom: 3px; left: 3px; }
.cs-board__handle:nth-of-type(4) { bottom: 3px; right: 3px; }
.cs-board__frame:hover,
.cs-board.is-hl .cs-board__frame,
.cs-board__frame:focus-visible {
  outline: none;
  border-color: #9e86ff;
  box-shadow: 0 0 0 1px #9e86ff, 0 24px 60px -24px rgba(113, 96, 252, 0.7);
}
.cs-board__frame:hover .cs-board__handle,
.cs-board.is-hl .cs-board__handle,
.cs-board__frame:focus-visible .cs-board__handle { opacity: 1; }
.cs-canvas.is-filtering .cs-board:not(.is-hl) { opacity: 0.22; }
/* swipe-strip controls, phones only (built by case-showcase.js) */
.cs-canvas__bar,
.cs-canvas__progress { display: none; }
.cs-board.is-pending .cs-board__frame { cursor: default; }

/* ---- route (photo booth): screen + timeline, flip cards in the copy ----------------- */
.cs-journey { position: relative; }
.cs-screen { position: relative; }
.cs-screen__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--glow) 45%, rgba(255, 255, 255, 0.15));
  border-radius: 22px;
  background: var(--cs-panel);
  cursor: zoom-in;
  box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--glow) 75%, transparent);
  transform: translate3d(0, calc(var(--depth, 0) * -14px), 0);
}
.cs-screen__frame:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs-live {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
}
.cs-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.6); animation: csPulse 1.8s ease-out infinite; }
@keyframes csPulse { to { box-shadow: 0 0 0 9px rgba(255, 77, 94, 0); } }
/* box-shadow can't run on the compositor: hold the loop while its chapter is off screen
   (case-showcase.js sets .is-near), so it doesn't cost a style recalc every frame. */
.cs-ch:not(.is-near) .cs-live i { animation-play-state: paused; }
.cs-timeline {
  display: grid;
  gap: 12px;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.cs-seg {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cs-seg__bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.cs-seg__bar b { display: block; width: calc(var(--p, 0) * 100%); height: 100%; background: var(--glow-l); }
.cs-seg.is-past .cs-seg__bar b { width: 100%; opacity: 0.55; }
.cs-seg__no { font: 700 11px/1.08 "Montserrat", "PPNeueMontreal", system-ui, sans-serif; color: var(--cs-faint); font-variant-numeric: tabular-nums; }
.cs-seg__title {
  font-family: "Montserrat", "PPNeueMontreal", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
}
.cs-seg__text { font-size: 12px; line-height: 1.45; color: var(--cs-faint); }
.cs-seg.is-active .cs-seg__no { color: var(--glow-l); }
.cs-seg.is-active .cs-seg__title { color: #fff; }
.cs-seg:hover .cs-seg__title { color: #fff; }
.cs-seg:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 4px; border-radius: 4px; }

.cs-flips { margin-top: 1.8rem; }
.cs-flips__row { display: flex; gap: 12px; }
.cs-flip {
  position: relative;
  flex: 0 1 180px;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  perspective: 1000px;
}
.cs-flip__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--cs-ease);
}
.cs-flip.is-flipped .cs-flip__inner { transform: rotateY(180deg); }
.cs-flip__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: var(--cs-panel);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cs-flip__back {
  transform: rotateY(180deg);
  border-color: color-mix(in srgb, var(--glow) 60%, transparent);
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--glow) 80%, transparent);
}
.cs-flip__face em {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
}
.cs-flip__back em { background: color-mix(in srgb, var(--glow) 70%, rgba(8, 6, 18, 0.5)); }
.cs-flip:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; border-radius: 16px; }
.cs-flip.is-pending { position: relative; border-radius: 16px; cursor: default; }

/* ---- compare (carnival): layered "imagined → real" --------------------------------- */
.cs-imagined {
  position: relative;
  aspect-ratio: 10 / 9;
}
.cs-layer { position: absolute; margin: 0; }
.cs-layer__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: var(--cs-panel);
  cursor: zoom-in;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.cs-layer__frame:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
/* The AI frame sits on top: its burned-in 動畫創意演繹 notice (bottom strip) must
   stay readable, so the real photo tucks behind it instead of covering it. */
.cs-layer--ai { top: 0; left: 0; width: 86%; z-index: 2; transform: translate3d(0, calc(var(--depth, 0) * -18px), 0); }
.cs-layer--real { top: 49%; right: 0; width: 64%; z-index: 1; transform: translate3d(0, calc(var(--depth, 0) * 26px), 0); }
.cs-layer--real .cs-chip { top: auto; bottom: 12px; }
.cs-layer.is-pending .cs-chip { display: none; } /* draft: the placeholder already says what it is */
.cs-layer--real .cs-layer__frame { border: 3px solid #f6f1ff; border-radius: 14px; }
.cs-layer--extra1 { top: 66%; left: 3%; width: 36%; z-index: 3; transform: translate3d(0, calc(var(--depth, 0) * 48px), 0); }
.cs-layer--extra2 { top: 92%; left: 42%; width: 30%; z-index: 3; }
.cs-layer--extra .cs-layer__frame { border-radius: 12px; border-color: color-mix(in srgb, var(--glow) 55%, transparent); }
.cs-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: calc(100% - 24px);
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}
.cs-chip b { font-weight: 600; color: #fff; }
.cs-layer--ai .cs-chip { background: color-mix(in srgb, var(--glow) 55%, rgba(8, 6, 18, 0.6)); color: #fff; }
.cs-imagined__arrow {
  position: absolute;
  top: 31%;
  left: 87.5%;
  width: 11%;
  z-index: 3;
  color: var(--glow-l);
  transform: translate3d(0, calc(var(--depth, 0) * 4px), 0);
}
.cs-imagined__when {
  position: absolute;
  top: 25%;
  left: 87.5%;
  z-index: 3;
  font: 500 10.5px/1.2 var(--cs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glow-l);
  white-space: nowrap;
}

/* ---- tablet: one column -------------------------------------------------------- */
@media (max-width: 1099px) {
  .cs-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-ch,
  .cs-ch--flip,
  .cs-ch--bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "stage" "body";
    row-gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  .cs-ch__head,
  .cs-ch__body,
  .cs-ch--bento .cs-ch__head,
  .cs-ch--bento .cs-ch__body { align-self: start; }
  .cs-ch--flip .cs-ch__num { right: auto; left: -0.04em; }
  .cs-results { margin-top: 0; }
  .cs-ch__lede { max-width: 60ch; }
  .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- phones ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* swipe strips bleed through the theme's mobile .section padding (0 2.5rem) */
  .cs-toc,
  .cs-chain,
  .cs-canvas__inner {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-inline: -2.5rem;
    padding-inline: 2.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2.5rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .cs-toc::-webkit-scrollbar,
  .cs-chain::-webkit-scrollbar,
  .cs-canvas__inner::-webkit-scrollbar { display: none; }
  .cs-toc__item { flex: 0 0 74%; scroll-snap-align: start; }

  .cs-ch { padding-block: 3.5rem; gap: 1.75rem; }
  .cs-ch__num { font-size: 7.5rem; top: 1.5rem; }
  .cs-ch__title { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* chain: every step open, side by side */
  .cs-chain { height: auto; }
  .cs-panel,
  .cs-panel.is-active {
    flex: 0 0 72%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    box-shadow: none;
  }
  .cs-panel .cs-media { filter: none; transform: none; }
  .cs-panel__label,
  .cs-panel__timer { display: none; }
  .cs-panel__body { opacity: 1; transform: none; }

  /* canvas: artboards in one full-bleed swipe strip, like the other strips. Every
     frame gets the same height (a filmstrip); the 9:16 poster used to set the row
     height and leave a gap over the 16:9 film. Cards are capped at 72vw so the
     next one always peeks in, and the bar says how many there are. */
  .cs-canvas {
    --board-h: clamp(150px, 45vw, 190px);
    margin-inline: -2.5rem;
    padding: 0 0 18px;
    border-radius: 0;
    border-inline: 0;
  }
  .cs-canvas::before { display: none; }
  .cs-canvas__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 2.5rem;
    border-bottom: 1px solid var(--cs-line);
    background: rgba(11, 8, 22, 0.72);
    font: 500 10.5px/1.3 var(--cs-mono);
    letter-spacing: 0.04em;
    color: var(--cs-faint);
  }
  .cs-canvas__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-canvas__nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .cs-canvas__count { margin-right: 6px; font-variant-numeric: tabular-nums; }
  .cs-canvas__count b { font-weight: 500; color: #fff; }
  .cs-canvas__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.25s ease, border-color 0.25s ease;
  }
  .cs-canvas__btn svg { width: 14px; height: 14px; }
  .cs-canvas__btn:disabled { opacity: 0.28; cursor: default; }
  .cs-canvas__btn:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
  .cs-canvas__inner { margin-inline: 0; padding-inline: 2.5rem; scroll-padding-inline: 2.5rem; align-items: flex-end; }
  .cs-canvas__row { display: contents; }
  .cs-board { flex: 0 0 auto; width: clamp(108px, calc(var(--r) * var(--board-h)), 72vw); scroll-snap-align: start; }
  /* title over format, so narrow artboards (9:16) keep both readable */
  .cs-board__label { flex-direction: column; gap: 2px; }
  /* 9:16 sits at the 108px floor: keep it at the common height (cover crops a sliver) */
  .cs-board__frame { max-height: var(--board-h); }
  .cs-canvas__progress {
    display: block;
    position: relative;
    height: 2px;
    margin: 18px 2.5rem 0;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
  }
  .cs-canvas__progress i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--vis, 0.3) * 100%);
    border-radius: 2px;
    background: var(--cs-accent);
    transform: translateX(calc(var(--pos, 0) * 100%));
  }

  /* route: timeline as a 2 × 2 list, flips side by side */
  .cs-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 16px; }
  .cs-flip { flex: 1 1 0; }

  /* compare: the AI frame, the real photo tucked under its corner (the AI frame's
     burned-in notice stays on top), then the extra shots in their own row with the
     caption underneath. Stacking the desktop collage with negative margins piled
     the extras over each other and over the real photo's caption. */
  .cs-imagined {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
  }
  .cs-layer { position: relative; inset: auto; width: 100%; transform: none; grid-column: 1 / -1; }
  .cs-layer--real { width: 86%; margin: -9% 0 0 auto; }
  .cs-layer--extra { grid-column: auto; margin-top: 18px; }
  .cs-imagined--x1 .cs-layer--extra { grid-column: 1 / -1; width: 66%; }
  .cs-imagined--x2 .cs-layer--extra .cs-layer__frame { aspect-ratio: 4 / 3; }
  .cs-layer--extra .cs-chip {
    position: static;
    display: block;
    max-width: none;
    margin-top: 8px;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 12px;
  }
  .cs-imagined__arrow,
  .cs-imagined__when { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-panel,
  .cs-panel .cs-media,
  .cs-panel__body,
  .cs-flip__inner,
  .cs-toc__item,
  .cs-toc__media img { transition: none; }
  .cs-live i { animation: none; }
  .cs-ch__num,
  .cs-screen__frame,
  .cs-layer,
  .cs-imagined__arrow { transform: none; }
}