:root {
  color-scheme: light;
  --paper: #fbfaf8;
  --ink: #1b1b1a;
  --muted: #77756f;
  --line: #dedcd6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
.interactive-title { transition: color 0.28s ease; }
.color-shift { transition: color 0.28s ease; }
@media (hover: hover) {
  .interactive-title:hover, .color-shift:hover { color: #baa9e7; }
}
.case-page { width: min(100% - 80px, 1440px); margin: 0 auto; }
.case-nav { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.case-brand { display: grid; gap: 3px; line-height: 1; }
.case-brand strong { font-size: 16px; letter-spacing: .04em; }
.case-brand span, .case-back, .eyebrow, .case-meta, .figure-caption span { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.case-back { font-size: 12px; letter-spacing: .02em; }
.case-back:hover { color: var(--ink); }
.case-main { padding: 70px 0 80px; }
.case-heading { max-width: 920px; margin-bottom: 42px; }
.eyebrow { margin: 0 0 18px; font-weight: 650; }
h1 { margin: 0 0 14px; font-size: clamp(38px, 5vw, 68px); line-height: 1.12; font-weight: 650; }
.subtitle { margin: 0 0 22px; color: #52514d; font-size: 18px; line-height: 1.65; }
.case-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 11px; }
.case-hero { margin: 0; }
.case-hero img, .case-gallery img, .comparison-pair img { width: 100%; height: auto; }
.case-hero figcaption, .figure-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-top: 11px; }
.case-hero figcaption { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.case-story { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; margin: 78px 0 76px; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-label { margin: 0; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.story-copy { max-width: 760px; }
.story-copy p { margin: 0; color: #494843; font-size: 16px; line-height: 1.9; }
.story-copy p + p { margin-top: 14px; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
.case-gallery figure, .comparison-pair figure { min-width: 0; margin: 0; }
.figure-caption { justify-content: flex-start; padding-top: 12px; }
.figure-caption strong { color: #45443f; font-size: 13px; font-weight: 550; }
.case-end { display: flex; justify-content: space-between; gap: 24px; margin-top: 66px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.case-end a { color: var(--ink); font-size: 13px; letter-spacing: 0; transition: color .28s ease; }
.comparison-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.comparison-pair figcaption { display: flex; align-items: baseline; gap: 12px; padding: 0 0 12px; }
.comparison-pair figcaption span { color: var(--muted); font-size: 10px; letter-spacing: .09em; }
.comparison-pair figcaption strong { font-size: 15px; font-weight: 600; }
.case-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 46px; border-top: 1px solid var(--line); }
.case-notes article { padding: 22px 24px 0 0; border-right: 1px solid var(--line); }
.case-notes article + article { padding-left: 24px; }
.case-notes article:last-child { border: 0; }
.case-notes h2 { margin: 0 0 12px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.case-notes p { margin: 0; color: #56554f; font-size: 14px; line-height: 1.8; }
@media (max-width: 700px) {
  .case-page { width: min(100% - 40px, 640px); }
  .case-nav { height: 68px; }
  .case-main { padding: 48px 0 58px; }
  .case-heading { margin-bottom: 30px; }
  h1 { font-size: 40px; }
  .subtitle { font-size: 16px; }
  .case-story { grid-template-columns: 1fr; gap: 20px; margin: 48px 0; padding: 22px 0; }
  .case-gallery, .comparison-pair { grid-template-columns: 1fr; gap: 26px; }
  .case-notes { grid-template-columns: 1fr; margin-top: 36px; }
  .case-notes article, .case-notes article + article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-notes article:last-child { border-bottom: 0; }
  .case-end { margin-top: 46px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }