/* =========================================================
   CASE STUDY TEMPLATE (locked)
   Shared by every page in /usecases/. Page specific photos
   are set inline on .hero and .reflection with background-image
   so this file never changes per entry.
   ========================================================= */
/* =========================================
   TOKENS
   ========================================= */
:root {
  --nav-surface: #D9D9D5;  /* fixed navigation: one step darker than --panel so it never matches a content container */
  --panel-line: #C2C2BD;   /* separation line under the fixed bar */
  --accent-on-panel: #B0002B; /* small red text on gray surfaces: 5.2:1 on --nav-surface, 5.7:1 on --panel */
  --paper: #F3F3F1;
  --ink: #0E0E0E;
  --ink-soft: #3A3A3A;
  --muted: #5E5E5E;
  --rule: rgba(14, 14, 14, 0.14);
  --panel: #E4E4E1;
  --accent: #FF124B;
  --accent-text: #D80032;
  --cherry: #e5093e;   /* brand cherry red (homepage --hero-crimson); white on it 4.73:1 */

  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Montserrat', 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Content stops at --content-max on wide screens. Every content edge sits
     at var(--gutter), so growing the gutter caps the top bar, sections,
     ownership block and More case studies together and keeps them aligned.
     The hero keeps the --frame margin. Gray panels, the brief and the
     reflection run edge to edge, and their content sits on the same gutter
     line as every other section, so all text shares one left edge. */
  --content-max: 1600px;
  --frame: clamp(16px, 4vw, 56px);
  --gutter: max(clamp(16px, 4vw, 56px), calc((100% - var(--content-max)) / 2));
  --wrap: 1320px;
  --section-gap: clamp(64px, 9vw, 140px);
}

body.dark-theme {
  --nav-surface: #262626;
  --panel-line: #3A3A3A;
  --accent-on-panel: #FF4D79;
  --paper: #111111;
  --ink: #F2F2F0;
  --ink-soft: #CFCFCF;
  --muted: #A3A3A3;
  --rule: rgba(242, 242, 240, 0.16);
  --panel: #1C1C1C;
  --accent-text: #FF4D79;
}

/* =========================================
   RESET
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
main img:not(.no-lightbox) { cursor: zoom-in; transition: filter 0.25s ease; }
main img:not(.no-lightbox):hover { filter: brightness(0.94); }

.wrap { padding: 0 var(--gutter); }

/* =========================================
   EDITORIAL PRIMITIVES
   ========================================= */
.chip {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.5em 0.85em;
  background: var(--cherry);
  color: #fff;
  white-space: nowrap;
}
.chip--light { background: #F3F3F1; color: #0E0E0E; }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.86;
  color: var(--cherry);
}
.display--xl { font-size: clamp(3.4rem, 10.5vw, 10rem); }
.display--lg { font-size: clamp(2.8rem, 7.4vw, 7rem); }
.display--md { font-size: clamp(1.9rem, 3.4vw, 3.4rem); }

.lead { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ink-soft); max-width: 60ch; }
.lead + .lead { margin-top: 1rem; }

/* =========================================
   TOP BAR
   ========================================= */
.top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem var(--gutter);
}
.breadcrumb {
  font-family: var(--font-label); font-size: 0.8rem; font-weight: 500; color: var(--muted);
}
.breadcrumb a { color: var(--ink); }
.breadcrumb a:hover { color: var(--accent-text); }
.theme-toggle {
  background: none; border: 1px solid var(--rule); color: var(--ink);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.theme-toggle:hover { background: var(--rule); }

/* =========================================
   HERO (framed photo, giant title)
   ========================================= */
.hero {
  position: relative;
  margin: 0 var(--frame);   /* fixed frame; content inset follows the gutter */
  min-height: clamp(520px, 82vh, 860px);
  background-color: #111; background-position: center; background-size: cover; background-repeat: no-repeat;
      /* photo is set per page with an inline background-image */
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.45) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
}
.hero__chip { position: absolute; top: clamp(16px, 3vw, 40px); z-index: 2; }
/* Inside the hero, 100% is the hero width, so the cap offset is (100% - max) / 2 */
.hero__chip--l { left: calc(max(0px, (100% - var(--content-max)) / 2) + clamp(16px, 3vw, 40px)); }
.hero__chip--r { right: calc(max(0px, (100% - var(--content-max)) / 2) + clamp(16px, 3vw, 40px)); }

.hero__body {
  position: absolute; z-index: 2;
  left: calc(max(0px, (100% - var(--content-max)) / 2) + clamp(16px, 3vw, 40px)); right: calc(max(0px, (100% - var(--content-max)) / 2) + clamp(16px, 3vw, 40px)); bottom: clamp(20px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.hero__logo { height: clamp(28px, 3.4vw, 44px); width: auto; margin-bottom: clamp(16px, 2vw, 28px); }
.hero__title { color: #fff; }
.hero__subtitle {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 34ch; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: rgba(255,255,255,0.88);
}
.hero__info {
  font-size: 0.85rem; line-height: 1.55; color: rgba(255,255,255,0.92);
  max-width: 300px; flex-shrink: 0;
}
.hero__info div + div { margin-top: 0.15rem; }
.hero__info b { font-weight: 700; color: #fff; }

/* =========================================
   SECTIONS (all aligned to the hero edges)
   ========================================= */
.sec {
  margin: var(--section-gap) var(--gutter) 0;
  scroll-margin-top: 24px;
}
/* Gray panel: edge to edge background, content on the gutter line */
.sec--gray {
  margin-left: 0; margin-right: 0;   /* edge to edge; content sits on the gutter line like every other section */
  background: var(--panel);
  padding: clamp(40px, 5vw, 80px) var(--gutter);
}
.sec__chip { margin-bottom: clamp(16px, 2vw, 28px); }

/* Side by side: image + text */
.split__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.split--reverse .split__grid { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.split--reverse .split__media { order: 2; }

/* UI sections: the screens get the wider column */
.split--ui .split__grid { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.split--ui.split--reverse .split__grid { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.split--ui .split__text { position: sticky; top: 24px; }

.split__media { margin: 0; min-width: 0; }
.split__media img { width: 100%; }
.split__text { display: flex; flex-direction: column; min-width: 0; }
.split__text .display { margin-bottom: clamp(20px, 2.4vw, 32px); }
.split__foot { margin-top: clamp(20px, 2.4vw, 32px); display: flex; justify-content: flex-start; }

/* Rows, like the education list in the reference */
.rows { margin-top: clamp(24px, 3vw, 40px); }
.row {
  display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 1.25rem;
  padding: 0.9rem 0; border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__label { font-weight: 700; font-size: 0.92rem; line-height: 1.3; }
.row__text { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.row__link { color: var(--accent-text); font-weight: 700; font-size: 0.8rem; display: inline-block; margin-top: 0.25rem; }
.row__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Point list inside text columns */
.points { list-style: none; margin-top: clamp(16px, 2vw, 24px); }
.points li { color: var(--ink-soft); font-size: clamp(0.95rem, 1.2vw, 1.05rem); padding: 0.85rem 0; border-top: 1px solid var(--rule); }
.points li:last-child { border-bottom: 1px solid var(--rule); }
.points li strong { color: var(--ink); display: block; margin-bottom: 0.15rem; }

/* =========================================
   METRICS
   ========================================= */
.metrics__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px);
  border-top: 2px solid var(--ink); padding-top: clamp(20px, 2.5vw, 32px);
}
.metric__value {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85;
  font-size: clamp(3.4rem, 8vw, 7.5rem); color: var(--accent);
}
.metric__label { margin-top: 0.9rem; font-weight: 700; font-size: 1rem; }
.metric__text { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.25rem; max-width: 34ch; }
.metric--list ul { list-style: none; margin-top: 0.2rem; }
.metric--list li {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.12; padding: 0.35rem 0; border-bottom: 1px solid var(--rule);
}
.metric--list li:first-child { padding-top: 0; }

/* =========================================
   FIGURES
   ========================================= */
.figure { margin: 0; }
.figure + .figure { margin-top: clamp(24px, 3vw, 40px); }
.figure img { width: 100%; background: #fff; }
.figure--framed img { border: 1px solid var(--rule); }
.figure__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px); }
.figure__grid--delivery { grid-template-columns: minmax(0, 0.418fr) minmax(0, 1.713fr); align-items: start; }
.figure__caption {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--muted);
}
.figure__caption .chip { flex-shrink: 0; }

/* =========================================
   REFLECTION (framed dark block)
   ========================================= */
.reflection {
  position: relative;
  margin: var(--section-gap) 0 0;   /* full width, edge to edge */
  background-color: #0A0A0A; background-position: right center; background-size: cover; background-repeat: no-repeat;
  color: #D6D6D6;
  overflow: hidden;
}
.reflection::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.93) 52%, rgba(5,5,5,0.35) 100%);
}
.reflection__inner {
  position: relative; z-index: 1;
  padding: clamp(40px, 6vw, 96px) var(--gutter);
}
.reflection__top { display: flex; justify-content: space-between; gap: 1rem; }
.reflection .display { color: #fff; margin: clamp(32px, 6vw, 88px) 0 clamp(28px, 4vw, 56px); }
.reflection__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); max-width: 1100px; }
.reflection h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 0.95; color: #fff; margin-bottom: 1.25rem;
}
.reflection p { font-size: 0.95rem; line-height: 1.6; padding: 0.9rem 0; border-top: 1px solid rgba(255,255,255,0.14); }
.reflection strong { color: #fff; display: block; margin-bottom: 0.15rem; }

.page-end { height: var(--section-gap); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 960px) {
  .split__grid, .split--reverse .split__grid,
  .split--ui .split__grid, .split--ui.split--reverse .split__grid { grid-template-columns: 1fr; }
  .split__text, .split--reverse .split__text { order: 1; }
  .split__media, .split--reverse .split__media { order: 2; }
  .split--ui .split__text { position: static; }
  .metrics__grid { grid-template-columns: 1fr 1fr; }
  .metric--list { grid-column: 1 / -1; }
  .reflection__cols { grid-template-columns: 1fr; }
  .reflection::before { background: rgba(5,5,5,0.9); }
  .hero__body { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .hero { min-height: 640px; }
  .hero__chip--r { display: none; }
  .metrics__grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 0.3rem; }
  .figure__grid, .figure__grid--delivery { grid-template-columns: 1fr; }
  .figure__grid--delivery img:first-child { max-width: 260px; margin: 0 auto; }
  .figure__caption { flex-direction: column; align-items: flex-start; }
  .reflection__top .chip:last-child { display: none; }
}

/* =========================================
   LIGHTBOX GALLERY MODAL
   ========================================= */
#lightbox {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center;
  z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
#lightbox.active { opacity: 1; pointer-events: auto; }
#lightbox img { max-width: 85%; max-height: 85vh; object-fit: contain; cursor: zoom-out; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
#lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2.5rem; font-weight: bold; cursor: pointer; background: none; border: none; z-index: 2010; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.05); color: white; border: none;
  font-size: 2.5rem; padding: 1rem 1.5rem; cursor: pointer; transition: background 0.2s; z-index: 2010;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
#lightbox-prev { left: 20px; }
#lightbox-next { right: 20px; }
@media (max-width: 768px) {
  .lightbox-nav { padding: 0.5rem 1rem; font-size: 1.5rem; }
  #lightbox img { max-width: 95%; }
}

/* =========================================
   TEMPLATE EXTENSIONS (shared by every entry)
   ========================================= */
/* Aliases so diagrams authored with the old token names keep theming.
   Declared on body so they follow body.dark-theme. */
body {
  --surface: #FFFFFF;
  --text-main: var(--ink);
  --text-muted: var(--muted);
  --card-border: var(--rule);
  --card-bg: var(--surface);
  --img-bg: var(--panel);
}
body.dark-theme { --surface: #181818; }

/* Hero with a looping video instead of a photo */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::before { z-index: 1; }

/* Story beats inside a text column */
.beat + .beat { margin-top: clamp(24px, 3vw, 36px); }
.beat__label {
  display: block;
  font-family: var(--font-label); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: 0.45rem;
}
.beat__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.1; margin-bottom: 0.6rem;
}
.beat .lead + .lead { margin-top: 0.75rem; }
.lead code, .row__text code, .points code {
  font-size: 0.88em; padding: 0.05em 0.35em; background: var(--panel); border-radius: 3px;
}
.lead a, .row__text a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.row__text ul { margin: 0.4rem 0 0.4rem 1.1rem; }
.row__text li + li { margin-top: 0.3rem; }

/* Decision: big statement beside its supporting paragraph */
.duo {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.statement {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.08; color: var(--ink);
}

/* Inline SVG diagrams sit on a panel */
.figure--diagram .figure__panel {
  background: var(--surface); border: 1px solid var(--rule);
  padding: clamp(16px, 2.5vw, 32px);
}
.figure--diagram svg { width: 100%; height: auto; display: block; }
.sec--gray .figure--diagram .figure__panel { background: var(--paper); }
.figure video { width: 100%; display: block; }

/* Metric values that are words, not numbers */
.metric__value--word { font-size: clamp(2.2rem, 4.4vw, 4rem); }

/* Section intro paragraph above rows */
.rows--top { margin-top: clamp(16px, 2vw, 24px); }

/* Buttons + demo disclaimer modal */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(20px, 2.4vw, 32px); }
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-label); font-weight: 600; font-size: 0.85rem;
  padding: 0.85em 1.3em; border: 2px solid var(--ink); cursor: pointer;
  background: var(--ink); color: var(--paper); transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.hero .btn { border-color: #fff; background: #fff; color: #0E0E0E; }
.hero .btn:hover { background: var(--cherry); border-color: var(--cherry); color: #fff; }

.modal-overlay {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.6);
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--paper); color: var(--ink); max-width: 480px; width: 100%;
  padding: clamp(24px, 4vw, 40px); border: 1px solid var(--rule);
}
.modal-box h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.03em; font-size: 1.6rem; line-height: 0.95; margin-bottom: 1rem;
  color: var(--cherry);
}
.modal-box p, .modal-box li { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }
.modal-box ul { margin: 0.6rem 0 0 1.1rem; }
.modal-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.modal-cancel { background: none; border: none; color: var(--muted); font: inherit; cursor: pointer; }
.modal-cancel:hover { color: var(--ink); }

@media (max-width: 960px) {
  .duo { grid-template-columns: 1fr; }
}

/* =========================================
   OWNERSHIP (right under the hero): chip + statement, aligned to the hero edges
   ========================================= */
.owner {
  margin: clamp(28px, 3.5vw, 48px) var(--gutter) 0;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
  gap: clamp(16px, 3vw, 48px); align-items: start;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.3; color: var(--ink);
}
.owner__label {
  justify-self: start;
  font-family: var(--font-label); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.01em;
  line-height: 1; padding: 0.5em 0.85em; margin-top: 0.35em;
  background: var(--cherry); color: #fff; white-space: nowrap;
}
.owner strong { color: var(--accent-text); font-weight: 800; }
.owner__text { max-width: 46ch; }   /* readable line length at any width */
@media (max-width: 760px) { .owner { grid-template-columns: 1fr; } }

/* =========================================
   MORE CASE STUDIES (replaces the homepage footer on case pages)
   Cards come from js/projects.js and use the homepage card styles (my-work.css).
   ========================================= */
.more { margin: var(--section-gap) var(--gutter) 0; padding-bottom: var(--section-gap); }
.more__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.more__filters { display: flex; gap: 1.25rem; }
.more__filter {
  background: none; border: none; padding: 0.35rem 0; cursor: pointer;
  font-family: var(--font-label); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.more__filter:hover { color: var(--ink); }
.more__filter.is-active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
/* Same card widths as the homepage grid (my-work.css): 250px on mobile,
   272px fixed from 901px. Rows stretch so rules and meta align per row. */
.more__grid {
  display: grid; grid-template-columns: repeat(auto-fill, 250px);
  justify-content: center; gap: 32px; align-items: stretch;
}
@media (min-width: 901px) {
  .more__grid { grid-template-columns: repeat(auto-fill, 272px); justify-content: start; }
}
.more__grid .card[hidden] { display: none; }
.more__contact {
  margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem;
}
.more__links {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-family: var(--font-label); font-weight: 500; font-size: 0.88rem;
}
.more__links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.more__links a:hover { color: var(--cherry); }
/* Social chips: same icons and chip size as the homepage footer (28px, clears
   the 24px target floor); hover follows the case study cherry red */
.more__social { list-style: none; display: flex; gap: 0.5rem; }
.more__social-link {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 0.375rem;
  background: var(--ink); color: var(--paper);
  transition: background-color 120ms ease, color 120ms ease;
}
.more__social-link:hover { background: var(--cherry); color: #fff; }
.more__social-link:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }
.more__social-icon { width: 1rem; height: 1rem; }

/* =========================================
   STACK: one text block, several images in rows
   Use when a titled text is illustrated by more than one image.
   The text runs horizontally (title + lead side by side) or sits
   next to a feature image; the rest of the images follow in rows,
   so reading continues without empty columns.
   ========================================= */
.stack__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(20px, 4vw, 64px); align-items: end;
}
.stack__intro .display { margin: 0; }
.stack__feature {
  display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.stack__feature--text-first { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.stack__feature--text-first .stack__text { order: -1; }
.stack__text { min-width: 0; }
.stack__text .display { margin-bottom: clamp(20px, 2.4vw, 32px); }
.stack__row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px); align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}
.stack__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* One landscape (3:2) and two portraits (2:3): 2.25 : 1 : 1 gives equal heights */
.stack__row--lpp { grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr) minmax(0, 1fr); }
/* Mixed ratios in one row: every image boxed at 3:2, whole image kept */
.stack__row--fit img { aspect-ratio: 3 / 2; object-fit: contain; }
/* Mixed ratios, cropped to one 3:2 box (photos only, never product sheets) */
.stack__row--cover img { aspect-ratio: 3 / 2; object-fit: cover; }
/* One landscape (3:2) and two tall strips (about 0.44): 3.45 : 1 : 1 gives equal heights */
.stack__row--lnn { grid-template-columns: minmax(0, 3.45fr) minmax(0, 1fr) minmax(0, 1fr); }
.stack__row .figure + .figure, .stack__pair .figure + .figure { margin-top: 0; }
.stack__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.stack__media { min-width: 0; }

@media (max-width: 960px) {
  .stack__intro, .stack__feature, .stack__feature--text-first { grid-template-columns: 1fr; }
  .stack__feature--text-first .stack__text { order: 0; }
  .stack__feature .stack__text { order: -1; }
  .stack__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stack__row, .stack__row--3, .stack__row--4 { grid-template-columns: 1fr; }
  .stack__row--lpp, .stack__row--lnn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack__row--lpp > .figure:first-child, .stack__row--lnn > .figure:first-child { grid-column: 1 / -1; }
}

/* =========================================
   BRAND GUIDE: mark tiles, swatches, do / don't
   Live components for brand case studies. Tile and swatch
   colours are the brand's own and stay fixed in dark mode.
   ========================================= */
.mark-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.mark-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mark-tile { margin: 0; }
.mark-tile__stage {
  display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  background: #FFFFFF; color: #252525; border: 1px solid var(--rule);
}
.mark-tile__stage svg { width: 36%; height: auto; display: block; }
.mark-tile__stage--black { background: #252525; color: #FFFFFF; border-color: #252525; }
.mark-tile__stage--gray { color: #AEAEAE; }
.mark-tile__stage--wide svg { width: 72%; }
.mark-tile__stage--photo { background-size: cover; background-position: center; color: #FFFFFF; }
.mark-tile__stage--diagram svg { width: 70%; color: #252525; }
.mark-tile figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
.mark-tile figcaption b { display: block; color: var(--ink); font-weight: 700; }
.mark-tile--dont .mark-tile__stage { position: relative; }
.mark-tile--dont .mark-tile__stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--cherry) calc(50% - 1px), var(--cherry) calc(50% + 1px), transparent calc(50% + 1px));
}
.mark-tile__tag { color: var(--accent-text, var(--cherry)); font-weight: 700; }

.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.swatches--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.swatch { margin: 0; }
.swatch__chip { aspect-ratio: 4 / 3; border: 1px solid var(--rule); }
.swatch__name { margin-top: 0.7rem; font-weight: 700; font-size: 0.95rem; }
.swatch__hex { font-family: var(--font-label, inherit); font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; }
.swatch__use { margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.stack__sub {
  margin-top: clamp(28px, 3.4vw, 48px); margin-bottom: clamp(12px, 1.4vw, 18px);
  font-family: var(--font-label, inherit); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.stack__sub + .stack__row { margin-top: 0; }

@media (max-width: 960px) {
  .mark-grid, .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================
   BRIEF: fast abstract under the hero that doubles as a local index.
   One cell per section: number, name, the one fact to take away.
   Two rows at most on desktop (.brief--5 for up to 10 cells,
   .brief--6 for up to 12).
   ========================================= */
.brief {
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  background: var(--panel);
  padding: clamp(24px, 3vw, 40px) var(--gutter);
}
.brief__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.brief--6 .brief__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.brief__item {
  display: block; min-width: 0; padding: 0.9rem 1rem 0.95rem 0;
  border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none;
}
.brief__num { display: block; font-family: var(--font-label); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--accent-on-panel); }
.brief__title { display: block; margin-top: 0.2rem; font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.brief__text { display: block; margin-top: 0.2rem; font-size: 0.85rem; line-height: 1.4; color: var(--muted); }
.brief__item:hover .brief__title { color: var(--accent-on-panel); }
.brief__item:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }
@media (max-width: 960px) { .brief__grid, .brief--6 .brief__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .brief__grid, .brief--6 .brief__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shared text column: on stack pages the "My part" statement and the
   two column text blocks start on the same line as every lead paragraph */
.owner--stack, .duo--stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 64px); }
.owner--stack {
  border-bottom: 0; padding-bottom: 0;
  grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px);   /* label on top, like every section chip */
  font-family: var(--font-body); font-weight: 400; letter-spacing: 0;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.55;
}
.owner--stack .owner__text { max-width: none; }   /* runs to the right content edge like every other block */
.owner--stack .owner__label { margin-top: 0; }
@media (max-width: 960px) { .duo--stack { grid-template-columns: 1fr; } }

/* =========================================
   TYPE SPECIMEN (brand case studies)
   TeX Gyre Adventor: open source revival of ITC Avant Garde Gothic
   (GUST Font License), loaded only where a specimen is shown.
   ========================================= */
@font-face { font-family: 'Adventor Specimen'; src: url('../assets/fonts/texgyreadventor-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Adventor Specimen'; src: url('../assets/fonts/texgyreadventor-bold.woff') format('woff'); font-weight: 700; font-display: swap; }
.specimen { border-top: 2px solid var(--ink); }
.specimen__line { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.specimen__meta { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.specimen__meta b { display: block; color: var(--ink); }
.specimen__sample { font-family: 'Adventor Specimen', sans-serif; color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.specimen__sample--xl { font-size: clamp(2.2rem, 6vw, 5.5rem); font-weight: 700; letter-spacing: 0; }
.specimen__sample--md { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.specimen__sample--demi { font-weight: 700; }
@media (max-width: 560px) { .specimen__line { grid-template-columns: 1fr; gap: 0.4rem; } }

/* =========================================
   CASE NAV: fixed index that appears once the brief scrolls past the top.
   Built by js/case-nav.js from the brief, so the brief is the single source.
   Desktop: breadcrumb row + one row index (number and title), active
   section marked. Mobile: a floating mask button opens the same index.
   ========================================= */
.case-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--nav-surface); border-bottom: 1px solid var(--panel-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 0.55rem var(--gutter) 0;
  transform: translateY(-100%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.case-nav.is-visible { transform: none; visibility: visible; transition: transform 0.22s ease, visibility 0s; }
.case-nav__crumbs { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.case-nav__crumbs a { color: var(--ink); text-decoration: none; }
.case-nav__crumbs a:hover { color: var(--accent-on-panel); }
.case-nav__list {
  position: relative;
  list-style: none; display: flex; gap: clamp(16px, 2vw, 32px);
  overflow-x: auto; scrollbar-width: none; margin-top: 0.15rem;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.case-nav__list::-webkit-scrollbar { display: none; }
.case-nav__list li { flex: 0 0 auto; }
.case-nav__link {
  display: inline-flex; align-items: baseline; gap: 0.4em; min-height: 24px;
  padding: 0.55rem 0 0.6rem; border-bottom: 2px solid transparent;
  font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.case-nav__num { font-family: var(--font-label); font-weight: 600; font-size: 0.72rem; color: var(--accent-on-panel); }
.case-nav__link:hover { color: var(--ink); }
.case-nav__link[aria-current="true"] { color: var(--ink); }
/* Liquid indicator: one bar that travels between items. The leading edge
   moves first and the trailing edge follows, so it stretches and settles
   (timings set per direction in js/case-nav.js). */
.case-nav__ink {
  position: absolute; bottom: 0; left: 0; right: 100%; height: 2px;
  background: var(--cherry); border-radius: 2px; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease;
}
.case-nav__ink.is-on { opacity: 1; }
.case-nav__link:focus-visible, .case-nav__crumbs a:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }

/* Mobile trigger: the homepage mask in a rounded cherry box */
.case-nav__fab {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 44px; height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--cherry); display: none; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.case-nav__fab img { width: 18px; height: 27px; }
.case-nav__fab.is-visible { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; }
.case-nav__fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 899px) {
  .case-nav { padding: 64px var(--gutter) 1rem; max-height: 85vh; overflow-y: auto; }
  .case-nav__fab { display: grid; }
  .case-nav__ink { display: none; }
  .case-nav__list { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; margin-top: 0.75rem; }
  .case-nav__link { display: flex; width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--panel-line); font-size: 1rem; }
  .case-nav__link[aria-current="true"] { border-bottom-color: var(--panel-line); color: var(--accent-on-panel); }
  .case-nav.is-open { transform: none; visibility: visible; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); transition: transform 0.22s ease, visibility 0s; }
  .case-nav.is-visible:not(.is-open) { transform: translateY(-100%); visibility: hidden; }
}
/* Keep jumped-to sections and focused elements clear of the fixed bar (WCAG 2.4.11) */
.has-case-nav { scroll-padding-top: 96px; }
.has-case-nav .sec, .has-case-nav .reflection { scroll-margin-top: 0; }
@media (max-width: 899px) { .has-case-nav { scroll-padding-top: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .case-nav, .case-nav.is-visible, .case-nav__fab, .case-nav__fab.is-visible, .case-nav__ink { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* One figure under a stack feature runs full width */
.stack__row--1 { grid-template-columns: minmax(0, 1fr); }

/* =========================================
   COLOR CARDS (locked pattern for every brand color on a case study)
   Printed swatch card format: solid color field on top, white label
   strip below with brand, color name and values. The card is a physical
   object, so it stays white with dark type in both themes.
   ========================================= */
.pms {
  margin: 0; background: #FFFFFF; color: #111111;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column;
}
.pms__chip { aspect-ratio: 1 / 1; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.pms__label { padding: 0.75rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.pms__brand { font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; }
.pms__name { font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.pms__code { font-family: var(--font-label); font-size: 0.78rem; color: #4A4A4A; letter-spacing: 0.02em; }
.pms__use { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid rgba(0, 0, 0, 0.10); font-size: 0.8rem; line-height: 1.4; color: #3A3A3A; }
/* A figure that groups four screens runs as one row of four under the text */
.figure__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .figure__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mixed image ratios in one row: each figure grows by its image ratio
   (--ar = width / height, set per figure) so every image ends at the same height */
.stack__row--flow { display: flex; gap: clamp(16px, 2vw, 32px); align-items: flex-start; }
.stack__row--flow > .figure { flex: var(--ar, 1) 1 0; min-width: 0; }
@media (max-width: 560px) { .stack__row--flow { flex-direction: column; } .stack__row--flow > .figure { flex: none; width: 100%; } }