:root{--bg:#0b0c0c;--ink:#f2f1ec;--muted:#8d918a;--line:#292d29;--gold:#d5b66f;--ease-out:cubic-bezier(.23,1,.32,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 72% 12%,#242b21 0,transparent 27%),var(--bg)}.case-page{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,72px)}.case-nav{height:100px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:11px;letter-spacing:.18em}.brand-mark{width:29px;height:29px;border:1px solid #b9bdb5;border-radius:50%;display:grid;place-items:center;font-size:10px;letter-spacing:-.04em}.back-link{font-size:12px;color:var(--muted);text-decoration:none;transition:color 180ms var(--ease-out)}.back-link:hover{color:var(--gold)}.case-loading{padding:180px 0;color:var(--muted)}.case-hero{padding:clamp(76px,10vw,150px) 0 70px;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:8vw;border-bottom:1px solid var(--line)}.case-kicker{color:var(--gold);font-size:10px;letter-spacing:.16em}.case-hero h1{font-size:clamp(45px,8vw,120px);font-weight:420;letter-spacing:-.08em;line-height:.9;margin:22px 0 32px;max-width:900px}.case-hero p{color:var(--muted);font-size:13px;line-height:1.8;max-width:510px}.case-meta{align-self:end;display:grid;gap:20px;color:var(--muted);font-size:11px;line-height:1.5}.case-meta strong{color:var(--ink);font-size:13px;font-weight:420;display:block;margin-top:4px}.case-gallery{padding:clamp(48px,7vw,100px) 0;display:grid;gap:clamp(22px,3vw,48px)}.case-gallery figure{margin:0;overflow:hidden;background:#151915;opacity:0;transform:translateY(20px);animation:gallery-in 650ms var(--ease-out) forwards}.case-gallery figure:nth-child(2){animation-delay:50ms}.case-gallery figure:nth-child(3){animation-delay:100ms}.case-gallery figure:nth-child(4){animation-delay:150ms}.case-gallery figure:nth-child(5){animation-delay:200ms}.case-gallery figure:nth-child(n+6){animation-delay:250ms}.case-gallery img{width:100%;height:auto;display:block}.case-gallery figcaption{padding:11px 14px;color:#6e756d;font-size:10px;letter-spacing:.08em}@keyframes gallery-in{to{opacity:1;transform:translateY(0)}}.case-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0 40px;color:#6f756d;font-size:10px}.case-footer a{color:var(--gold);text-decoration:none}@media(max-width:680px){.case-nav{height:76px}.case-hero{display:block;padding-top:76px}.case-meta{display:flex;flex-wrap:wrap;margin-top:48px;gap:18px}.case-hero h1{font-size:60px}.case-footer{display:block}.case-footer a{display:inline-block;margin-top:15px}}
.case-video{padding:clamp(48px,7vw,100px) 0}.case-video video{display:block;width:100%;max-height:76vh;background:#050606;border:1px solid var(--line)}.case-video p{margin:12px 0 0;color:#6e756d;font-size:10px;letter-spacing:.08em}.case-media-unavailable{padding:clamp(48px,7vw,100px) 0;color:var(--muted);border-bottom:1px solid var(--line)}
.case-details{max-width:780px;margin:72px auto 0;padding-top:32px;border-top:1px solid #ddd;color:#222;line-height:1.8}.case-details h2{font-size:20px;margin:0 0 24px}.case-details p{margin:0 0 18px}.case-details figure{margin:24px 0}.case-details img,.case-details video{display:block;width:100%;max-height:620px;object-fit:contain;background:#111}.case-details figcaption{margin-top:8px;color:#777;font-size:13px}.case-details blockquote{margin:24px 0;padding-left:18px;border-left:3px solid #222;color:#555}.case-details hr{border:0;border-top:1px solid #ddd;margin:28px 0}
.case-hero h1{font-size:clamp(32px,5.4vw,82px);letter-spacing:-.06em}.case-hero{padding-top:clamp(58px,7vw,105px)}.case-video video{border:0}.case-details{border-top:1px solid var(--line);color:var(--muted)}.case-details h2{font-size:16px}.case-details img,.case-details video{border:0}
.case-hero h1{font-size:clamp(30px,4vw,64px);line-height:.96}.case-hero{padding-top:clamp(52px,6vw,88px)}


/* Compact the detail header so the case media enters the first viewport sooner. */
.case-nav { height: 64px; }
.case-hero { display: block; padding: 48px 0 32px; }
.case-hero-copy { max-width: 980px; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 22px; align-self: auto; }
.case-meta-item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.case-meta-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; color: var(--gold); opacity: .9; }
.case-meta-item span { display: grid; gap: 2px; }
.case-meta-item small { font-size: 10px; color: #747b72; letter-spacing: .04em; }
.case-meta-item strong { color: var(--ink); font-size: 12px; font-weight: 500; }
.case-video { padding: 36px 0 64px; }
.case-player-shell { position: relative; width: 100%; margin-inline: auto; overflow: hidden; background: #050606; }
.case-video .mp-root { border: 0; box-shadow: none; }
.case-video video { border: 0; }
@media (max-width: 680px) {
  .case-nav { height: 56px; }
  .case-hero { padding: 36px 0 24px; }
  .case-meta { margin-top: 18px; gap: 14px 18px; }
  .case-video { padding-top: 28px; padding-bottom: 48px; }
}

/* Tighten the detail header and move metadata labels into hover/focus tooltips. */
.case-nav { height: 40px; }
.case-hero { padding: 14px 0 12px; }
.case-hero h1 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.case-hero p { margin: 0; max-width: 760px; font-size: 11.5px; line-height: 1.5; }
.case-kicker { font-size: 9px; line-height: 1.2; }
.case-meta { margin-top: 8px; gap: 8px 14px; }
.case-meta-item { position: relative; display: inline-flex; min-height: 22px; padding: 2px; gap: 7px; }
.case-meta-item > svg { width: 16px; height: 16px; }
.case-meta-item .case-meta-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid #d5b66f33;
  background: #111412f2;
  color: var(--ink);
  box-shadow: 0 8px 24px #0008;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 320ms ease, transform 320ms var(--ease-out), visibility 320ms;
  pointer-events: none;
}
.case-meta-item:hover .case-meta-tooltip,
.case-meta-item:focus-visible .case-meta-tooltip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.case-meta-item:focus-visible { outline: none; }
.case-meta-item .case-meta-tooltip small { color: var(--muted); font-size: 10px; }
.case-meta-item .case-meta-tooltip strong { color: var(--ink); font-size: 12px; font-weight: 500; }
.case-video { padding-top: 18px; padding-bottom: 48px; }
.case-video .mp-root video { max-height: none; }
@media (max-width: 680px) {
  .case-nav { height: 36px; }
  .case-hero { padding: 10px 0; }
  .case-hero h1 { margin: 3px 0 5px; font-size: 24px; line-height: 1.05; }
  .case-hero p { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .case-meta { margin-top: 6px; gap: 6px 10px; }
  .case-meta-item { min-height: 20px; }
  .case-video { padding-top: 14px; padding-bottom: 36px; }
}

/* The compact top bar carries the case type; the hero keeps only title and optional summary. */
.case-nav .brand { gap: 8px; }
.brand-logo-mark { width: 32px; height: 32px; border: 0; border-radius: 0; object-fit: contain; }
.case-nav-kicker { color: var(--gold); font-size: 9px; line-height: 1; letter-spacing: .1em; }
.case-meta-item > strong { display: inline; margin: 0; color: var(--ink); font-size: 12px; font-weight: 500; }
.case-meta-item .case-meta-tooltip strong { display: none; }

/* Avoid inherited grid sizing clipping the 32px favicon artwork. */
.case-nav .brand-logo-mark { display: block; flex: 0 0 auto; width: 32px; height: 32px; max-width: none; max-height: none; overflow: visible; clip-path: none; line-height: 0; transform: translateZ(0); }
.case-tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.case-tag,
.case-meta-link { color: var(--gold); font-size: 11px; line-height: 1.35; text-decoration: none; transition: color 320ms ease, opacity 320ms ease; }
.case-tag:hover,
.case-tag:focus-visible,
.case-meta-link:hover,
.case-meta-link:focus-visible { color: #f0d68d; opacity: .86; outline: none; }