/* V9 case shell. Keep the approved media, body typography and interactive
   components; align the reading frame with the warm-paper entrance pages. */
body.v9-case { background: var(--sand); color: var(--sumi); }
.v9-case main > .container, .v9-case .site-footer > .container { max-width: var(--wrap); padding-left: var(--gut); padding-right: var(--gut); }
/* Case pages are not body.v7, so they need the blur themselves; without it the .96 tint let
   headings read through the header (found live 2026-09-25). Same 20px as v7.css. */
.v9-case .site-header { background: rgb(244 241 236 / .96); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.v9-case .site-header.scrolled { border-bottom-color: var(--hair); }
/* The drop-down menu only exists below 1024px. Unscoped, this painted an opaque sand box
   behind Work / About / Contact on desktop, which showed over dark sections (2026-09-25). */
@media (max-width: 1023px) {
  .v9-case .site-header.mobile-menu-open,
  .v9-case .site-header.mobile-enhanced nav { background: var(--sand); }
}
.v9-case a:focus-visible, .v9-case button:focus-visible,
.v9-case summary:focus-visible { outline: 2px solid var(--mura); outline-offset: 4px; }

/* The image sits on the same edges as the page. Preserve per-image framing. */
.v9-case .case-hero-fullbleed {
  width: calc(100% - var(--gut) * 2);
  max-width: calc(var(--wrap) - var(--gut) * 2);
  margin: 28px auto 0;
  max-height: none;
}
/* The hero is the case page's one entrance: a fade on the site curve (V5 used fade + 1.04 scale;
   the contained frame has no room to scale). Keyframes live in v7.css. 2026-09-25. */
.v9-case .case-hero-fullbleed img,
.v9-case .case-hero-fullbleed svg,
.v9-case .case-hero-fullbleed video { animation: v7-fade 1.2s cubic-bezier(.22, 1, .36, 1) .05s both; }
@media (prefers-reduced-motion: reduce) {
  .v9-case .case-hero-fullbleed img,
  .v9-case .case-hero-fullbleed svg,
  .v9-case .case-hero-fullbleed video { animation: none; opacity: 1; }
}

.v9-case .case-intro { padding: 40px 0 48px; }
.v9-case .case-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; color: var(--sumi); text-decoration-color: var(--sumi-3); }
.v9-case .case-back:hover { color: var(--mura); text-decoration-color: var(--mura); }
.v9-case .case-eyebrow { color: var(--sumi-3); line-height: 1.8; }
.v9-case .case-status { margin: 0 0 20px; }
.v9-case .case-status .st { color: var(--sumi-3); }
.v9-case .case-intro .case-title { font-size: clamp(38px, 4.5vw, 52px); line-height: 1.16; letter-spacing: -.02em; font-weight: 300; }
.v9-case .case-intro .case-title .ch { display: block; margin: 14px 0 0; font-size: 22px; color: var(--sumi-2); line-height: 1.5; }
html:not([data-lang="zh"]) .v9-case .case-intro .case-title .ch { display: none; }
.v9-case .case-intro .case-tagline { font-size: 17px; color: var(--sumi-2); line-height: 1.85; max-width: 38em; }
html[data-lang="zh"] .v9-case .case-intro .case-tagline { line-height: 1.95; }
.v9-case .case-brief { max-width: none; padding: 0; border-left: 0; margin: 36px 0 0; }
.v9-case .case-intro > .case-brief:last-child { margin-bottom: 0; }
.v9-case .case-brief .brief-row { border-top: 1px solid var(--hair); padding: 18px 0; gap: 8px 24px; }
.v9-case .case-brief .brief-label { color: var(--sumi-3); }
.v9-case .case-brief .brief-text { color: var(--sumi); }

/* Reuse the existing chapter links at every width; no second navigation tree. */
.v9-case .mobile-chapters { display: block; margin: 0 0 48px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* Chapter disclosure: the site's quiet link (ink underline, murasaki on hover) with an arrow
   that flips when open (swapped, not rotated, so the underline stays below), instead of the
   browser's default triangle (2026-09-25). */
.v9-case .mobile-chapters summary { list-style: none; display: inline-flex; align-items: center; gap: .45em; cursor: pointer; min-height: 44px;
  font-size: 15px; color: var(--sumi); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--sumi-3);
  text-underline-offset: 6px; transition: color .2s ease, text-decoration-color .2s ease; }
.v9-case .mobile-chapters summary::-webkit-details-marker { display: none; }
.v9-case .mobile-chapters summary::marker { content: ''; }
.v9-case .mobile-chapters summary::after { content: '↓'; }
.v9-case .mobile-chapters[open] summary::after { content: '↑'; }
.v9-case .mobile-chapters summary:hover { color: var(--mura); text-decoration-color: var(--mura); }
.v9-case .mobile-chapters nav { display: grid; gap: 0 32px; padding: 12px 0 4px; }
.v9-case .mobile-chapters a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.7; color: var(--sumi); text-decoration: underline; text-decoration-color: var(--sumi-3); text-underline-offset: 5px; }
.v9-case .mobile-chapters a:hover { color: var(--mura); }
.v9-case .story-section { padding-top: 64px; padding-bottom: 80px; scroll-margin-top: 104px; }
.v9-case .story-section + .story-section { border-top-color: var(--hair); }
.v9-case .story-eyebrow { color: var(--sumi-3); letter-spacing: .2em; margin-bottom: 14px; line-height: 1.8; }
.v9-case .story-heading { line-height: 1.4; margin-bottom: 28px; }
.v9-case .story-section--dark { padding-top: 80px; padding-bottom: 80px; }
.v9-case .story-section--dark .story-eyebrow { color: #b8b1a6; }
.v9-case .site-footer { margin-top: 56px; padding: 36px 0 48px; border-top-color: var(--hair); color: var(--sumi-2); }
.v9-case .site-footer .container { gap: 24px; align-items: start; }
.v9-case .site-footer .container > div { max-width: 48%; }
.v9-case .site-footer a { display: inline-block; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.7; color: var(--sumi); text-decoration: underline; text-decoration-color: var(--sumi-3); text-underline-offset: 6px; }
.v9-case .site-footer a:hover { color: var(--mura); }

@media (min-width: 1024px) {
  .v9-case .case-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .v9-case .case-back { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .v9-case .case-eyebrow { grid-column: 1; grid-row: 2; margin-bottom: 20px; }
  .v9-case .case-status { grid-column: 2; grid-row: 2; padding-top: 3px; }
  .v9-case .case-intro .case-title { grid-column: 1; grid-row: 3; margin: 0; }
  .v9-case .case-intro .case-tagline { grid-column: 2; grid-row: 3; margin: 0; }
  .v9-case .case-brief { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
  .v9-case .case-brief .brief-row { display: block; }
  .v9-case .case-brief .brief-label { margin-bottom: 12px; }
  .v9-case .case-intro > .intro-cards { grid-column: 1 / -1; grid-row: 5; }
  .v9-case .mobile-chapters nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:719px), (max-width:1023px) and (max-height:520px) and (pointer:coarse) {
  .v9-case .case-hero-fullbleed { margin-top: 20px; }
  .v9-case .case-intro { padding: 24px 0 28px; }
  .v9-case .case-back { margin-bottom: 18px; }
  .v9-case .case-intro .case-title { font-size: 34px; line-height: 1.2; overflow-wrap: break-word; }
  .v9-case .case-intro .case-title .ch { font-size: 19px; margin-top: 10px; }
  .v9-case .case-intro .case-tagline { font-size: 16px; }
  .v9-case .case-brief { margin-top: 28px; }
  .v9-case .case-brief .brief-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .v9-case .mobile-chapters { margin-bottom: 24px; }
  .v9-case .story-section, .v9-case .story-section--dark { padding-top: 40px; padding-bottom: 48px; scroll-margin-top: 88px; }
  .v9-case .story-heading { margin-bottom: 22px; }
  .v9-case .site-footer { margin-top: 32px; }
  .v9-case .site-footer .container { gap: 12px 24px; }
  .v9-case .site-footer .container > div { max-width: 100%; }
}