@font-face {
  font-family: NeueMontreal;
  src: url("NeueMontreal-W26.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: HWCigars;
  src: url("HWCigars-W26.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #171715;
  --paper: #e7e0d5;
  --cream: #f4f0e8;
  --muted: #b9b6ae;
  --accent: #a87560;
  --line: rgba(23, 23, 21, .26);
  --pad: clamp(20px, 3.2vw, 52px);
  --sans: EBGaramond, "EB Garamond", Georgia, serif;
  --display: HWCigars, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 12px 16px; background: var(--cream); transition: top .2s; }
.skip-link:focus { top: 16px; }

/* Spans the viewport so the wordmark can frame it, like the home page. */
.case-header {
  position: fixed;
  z-index: 50;
  inset: var(--pad);
  display: flex;
  height: auto;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  color: var(--cream);
  mix-blend-mode: difference;
}

.case-brand { display: flex; align-items: flex-start; gap: 9px; }
.case-brand > span:first-child { font: 35px/.72 var(--display); letter-spacing: -.06em; }
.case-brand small { font-size: 8px; line-height: 1; text-transform: uppercase; }
.case-brand sup { font-size: 7px; }
.case-header > *:not(.brand) { pointer-events: auto; }
.case-header nav { display: none; }
.case-header nav a { border-bottom: 1px solid transparent; padding-bottom: 4px; }
.case-header nav a:hover, .case-header nav a:focus-visible { border-color: currentColor; }
/* The overlay is the navigation, as on the home page — the inline nav goes and
   the pill shows at every width. */

.case-mobile-nav { position: fixed; z-index: 45; inset: 0; padding: 110px var(--pad) 35px; flex-direction: column; gap: 10px; background: var(--ink); color: var(--cream); }
.case-mobile-nav:not([hidden]) { display: flex; }
.case-mobile-nav a { font: clamp(3rem, 14vw, 5rem)/.92 var(--display); }
.case-mobile-nav a:last-child { margin-top: auto; font: 12px var(--sans); }

.case-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; padding: 112px var(--pad) var(--pad); background: var(--ink); color: var(--cream); }
.hero-stage { position: relative; display: grid; place-items: center; width: 100%; }
/* Two stacked copies inside a difference-blended box: over the panel they read
   cream, over the photograph they invert. `--chars` scales the title so long
   names stay on one line. */
/* Two overlapping SVGs on one viewBox, exactly as the reference does it: the
   wordmark minus one letter, and that letter on its own. Both are white and
   the wrapper blends with difference, so the mark reads dark on the panel and
   inverts wherever it crosses the photograph. Splitting the letter out lets it
   land a beat after the rest. */
.case-hero .hero-title { position: absolute; top: 50%; left: 50%; z-index: 1; width: min(86vw, 1180px); margin: 0; transform: translate(-50%, -50%); mix-blend-mode: difference; overflow: clip; line-height: 0; }
.hero-title__mark { display: block; width: 100%; height: auto; }
.hero-title__mark--solo { position: absolute; inset: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-index { position: absolute; top: 50%; left: var(--pad); font: 12px var(--display); transform: translateY(-50%); }
.hero-year { position: absolute; left: var(--pad); bottom: var(--pad); font-size: 10px; text-transform: uppercase; }
.case-label { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }

/* Anchored left, under the title, rather than right: at `right: var(--pad)`
   it lands on top of .hero-photo, which is unreadable now that the hero
   images are product screenshots carrying their own headline. */
.hero-summary { position: relative; z-index: 2; width: min(52ch, 74vw); margin: 0; text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.45rem); line-height: 1.25; }
.hero-photo { position: relative; width: min(42vw, 620px); aspect-ratio: 754/530; height: auto; margin: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-scroll { position: absolute; bottom: var(--pad); left: 50%; transform: translateX(-50%); font-size: 9px; text-transform: uppercase; }

.case-intro { display: grid; grid-template-columns: 1fr 2.2fr; gap: 8vw; padding: clamp(90px, 12vw, 180px) var(--pad); }
.section-label { font: 12px var(--display); text-transform: uppercase; }
.intro-copy > p:first-child { max-width: 980px; font: clamp(2.7rem, 5.8vw, 7.2rem)/.91 var(--sans); letter-spacing: -.055em; }
.intro-copy > p:first-child em { font-family: var(--display); font-weight: 400; }
.intro-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); margin-top: 9vw; padding-top: 28px; border-top: 1px solid var(--line); }
.intro-body p { max-width: 560px; font-size: 15px; line-height: 1.4; }
.intro-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.intro-meta span { display: block; margin-bottom: 4px; font-size: 9px; text-transform: uppercase; }
.intro-meta strong { font: 400 1.4rem/1.05 var(--display); }

.photo-spread { display: grid; min-height: 92vh; grid-template-columns: 1.45fr .85fr; gap: clamp(8px, 1vw, 16px); padding: 0 var(--pad); }
.photo-spread figure { position: relative; overflow: hidden; }
.photo-spread figure:last-child { margin-top: 18vh; margin-bottom: 8vh; }
.photo-spread img { height: 100%; object-fit: cover; filter: saturate(.76) contrast(.95); }
.photo-spread figcaption { position: absolute; right: 16px; bottom: 14px; left: 16px; color: #fff; font-size: 9px; text-transform: uppercase; text-shadow: 0 1px 20px rgba(0,0,0,.5); }

.metrics { padding: clamp(90px, 12vw, 180px) var(--pad); background: var(--accent); }
.metrics-heading { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 9vw; }
.metrics-heading h2 { max-width: 900px; font: clamp(3.8rem, 8.5vw, 10.5rem)/.79 var(--sans); letter-spacing: -.07em; text-transform: uppercase; }
.metrics-heading h2 em { font-family: var(--display); font-weight: 400; text-transform: none; }
.metric-grid { display: grid; grid-template-columns: repeat(var(--metric-count, 3), 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { display: flex; min-height: 250px; flex-direction: column; padding: 28px 20px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric strong { font: clamp(3.2rem, 6vw, 7.6rem)/1 var(--display); letter-spacing: -.045em; }
.metric span { margin-top: 18px; font-size: 12px; }
.metric small { margin-top: auto; font-size: 9px; line-height: 1.3; text-transform: uppercase; }
.academic-note { max-width: 660px; margin-top: 28px; font-size: 12px; line-height: 1.4; }

.process { padding: clamp(90px, 12vw, 180px) var(--pad); background: var(--ink); color: var(--cream); }
.process-head { display: grid; grid-template-columns: 1fr 3fr; align-items: start; }
.process h2 { font: clamp(3.4rem, 7.2vw, 9rem)/.83 var(--sans); letter-spacing: -.07em; text-transform: uppercase; }
.process h2 em { font-family: var(--display); font-weight: 400; text-transform: none; }
.process ol { list-style: none; margin-top: 9vw; padding: 0; border-top: 1px solid rgba(255,255,255,.3); }
.process li { display: grid; grid-template-columns: .35fr 1.2fr 2fr; gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.process li > span { font-size: 9px; }
.process li h3 { font: clamp(2rem, 3.2vw, 4.2rem)/1 var(--display); font-weight: 400; }
.process li p { max-width: 540px; font-size: 14px; line-height: 1.35; }

.system { padding: clamp(90px, 12vw, 180px) var(--pad); }
.system-head { display: grid; grid-template-columns: 1fr 2.2fr; gap: 8vw; }
.system h2 { max-width: 960px; font: clamp(3rem, 6.5vw, 8rem)/.87 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.system h2 em { font-family: var(--display); font-weight: 400; text-transform: none; }
.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9vw; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.system-card { min-height: 330px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-card small { font-size: 9px; text-transform: uppercase; }
.system-card h3 { margin-top: 11vh; font: clamp(1.8rem, 3vw, 3.8rem)/1 var(--display); font-weight: 400; }
.system-card p { max-width: 340px; margin-top: 24px; font-size: 13px; line-height: 1.35; }

.proof-note { display: grid; grid-template-columns: 1fr 2.2fr; gap: 8vw; padding: 70px var(--pad); border-top: 1px solid var(--line); background: var(--cream); }
.proof-note p:last-child { max-width: 720px; font-size: 13px; line-height: 1.4; }
.proof-note a { border-bottom: 1px solid currentColor; }

.next-project { position: relative; display: block; min-height: 74vh; overflow: hidden; background: var(--ink); color: var(--cream); }
.next-project img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.65) contrast(.95); transition: transform 1.2s; }
.next-project:hover img { transform: scale(1.025); }
.next-project small { position: absolute; z-index: 2; top: var(--pad); left: var(--pad); font-size: 10px; text-transform: uppercase; }
.next-project strong { position: absolute; z-index: 2; top: 50%; right: var(--pad); left: var(--pad); font: clamp(5rem, 15vw, 18rem)/.7 var(--display); font-weight: 400; letter-spacing: -.07em; transform: translateY(-50%); }
.next-project span { position: absolute; z-index: 2; right: var(--pad); bottom: var(--pad); font-size: 10px; text-transform: uppercase; }

.case-footer { display: grid; min-height: 45vh; grid-template-columns: 2fr 1fr 1fr; align-items: end; gap: 30px; padding: var(--pad); background: var(--ink); color: var(--cream); }
.case-footer-brand { font: clamp(6rem, 15vw, 18rem)/.6 var(--display); letter-spacing: -.08em; }
.case-footer p, .case-footer div { font-size: 10px; line-height: 1.4; text-transform: uppercase; }
.case-footer div { display: grid; gap: 9px; justify-items: start; }

body.theme-jobee { --paper: #e7e0d5; --accent: #b8b3aa; }
body.theme-vietnipa { --paper: #ded7cb; --accent: #b96e58; }
body.theme-bendua { --paper: #dfe0d1; --accent: #929678; }
body.theme-bioha { --paper: #d7d9d6; --accent: #85929a; }

@media (max-width: 900px) {
  .case-header { inset: var(--pad); }
  .case-header nav { display: none; }
    .case-hero { min-height: 92svh; padding-top: 95px; }
  .case-label { margin-left: 0; }
  .case-hero .hero-title { width: 88vw; }
  .hero-photo { width: 74vw; }
  .hero-index { display: none; }
  .hero-photo { right: var(--pad); bottom: 8vh; width: 55vw; height: 35vh; }
  .hero-summary { bottom: 8vh; left: var(--pad); width: 36vw; font-size: 1rem; }
  .hero-scroll { display: none; }
  .case-intro, .system-head, .proof-note { grid-template-columns: 1fr; }
  .intro-copy > p:first-child { font-size: clamp(2.6rem, 8vw, 5rem); }
  .photo-spread { min-height: 72vh; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 210px; border-bottom: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: 0; }
  .process-head { grid-template-columns: 1fr; gap: 60px; }
  .process li { grid-template-columns: 38px 1fr; }
  .process li p { grid-column: 2; }
  .system-grid { grid-template-columns: 1fr 1fr; }
  .system-card { min-height: 280px; }
  .case-footer { grid-template-columns: 1fr; gap: 55px; }
}

@media (max-width: 560px) {
  .case-hero { min-height: 88svh; }
  .case-hero .hero-title { width: 92vw; }
  .hero-photo { width: 84vw; }
  .hero-photo { width: 64vw; height: 34vh; }
  .hero-summary { bottom: 46vh; left: var(--pad); width: 70vw; }
  .case-intro { gap: 60px; }
  .intro-body { grid-template-columns: 1fr; }
  .photo-spread { min-height: 100svh; grid-template-columns: 1fr; }
  .photo-spread figure:first-child { height: 56svh; }
  .photo-spread figure:last-child { height: 40svh; margin: 0 0 7vh 20%; }
  .metrics-heading { display: grid; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { min-height: 175px; border-right: 0; }
  .system-grid { grid-template-columns: 1fr; }
  .system-card { min-height: 250px; }
  .next-project { min-height: 62vh; }
  .case-footer-brand { font-size: 35vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .next-project img { transition: none; }
}