/* Rebuilt from the Cargo "Wireframe Z207" layout.
   Original font is Monument Grotesk Mono (licensed via Cargo); DM Mono is the free stand-in.
   To use the real font, add an @font-face and put its name first in --font. */

:root {
  --font: "DM Mono", "Monument Grotesk Mono", ui-monospace, Menlo, monospace;
  --text: rgba(0, 0, 0, 0.85);
  --muted: rgba(0, 0, 0, 0.4);
  --link: rgba(102, 210, 43, 0.85);
  --rule: rgba(0, 0, 0, 0.15);
  --bg: #fff;
  --main-width: 70%;
  --h1-size: 3.5rem;
  --h2-size: 2rem;
  --caption-size: 1.08rem;
  --caption-font: "Newsreader", Georgia, serif;
  --h3-size: 1.3rem;
  --measure: 800px;         /* max width of project content (~103 characters of 12.96px DM Mono) */
}

* { box-sizing: border-box; }

html {
  font-size: 12.96px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-decoration: none;
}

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0.8rem 0;
}

p { margin: 0; }

.muted { color: var(--muted); }

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.icon-arrow { font-family: system-ui, sans-serif; }

/* ---------- Main column (works) ---------- */

.main {
  width: var(--main-width);
  padding: 1rem;
}

.view[hidden] { display: none; }

.project {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1rem;
}

.project__media {
  grid-column: span 5;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.project__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__text { grid-column: span 5; }

.project__text p + p { margin-top: 1.2em; }

.project__icon {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  color: var(--muted);
}

.project__icon svg {
  width: 2.4rem;
  height: 2.4rem;
}

/* Wireframe placeholder, like Cargo's default image */
.placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f1f1f1;
}

.placeholder::before {
  content: "";
  position: absolute;
  inset: 11% 7.5%;
  border: 1px solid #555;
  outline: 6px solid #ddd;
  outline-offset: -7px;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), #aaa, transparent calc(50% + 0.5px))
    #fff;
}

/* ---------- Vertical divider ---------- */

.divider {
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  left: calc(var(--main-width) - 1px);
  width: 1px;
  background: var(--rule);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - var(--main-width));
  height: 100vh;
  height: 100dvh;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar .view--bio {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar .view[hidden] { display: none; }

.bio p + p { margin-top: 1.2em; }

.bio .bio__cv { margin-top: 3.6em; }

.footer {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--muted);
}

/* ---------- CV ---------- */

.cv-section {
  display: grid;
  grid-template-columns: 4fr 8fr;
  column-gap: 1rem;
  padding-bottom: 3.6em;
}

.cv-section p + p { margin-top: 1.2em; }

.cv-name { padding-bottom: 4.8em; }

.cv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cv-list li.gap { height: 1.2em; }

.cv-foot { margin-top: 4.8em; }

/* ---------- Project detail page ---------- */

.detail {
  padding: 1rem;
}

.detail img {
  display: block;
  width: 100%;
  margin: 1.2em 0;
}

/* ---------- Case study (e.g. aako.html) ---------- */
/* Same single type size as the rest of the site; hierarchy comes from rules, columns and muted labels. */

/* Sticky top bar. Pulled up over .detail's top padding so nothing shows above it. */
.case-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: -1rem;
  padding-top: 1rem;
  background: var(--bg);
}

.case-bar hr { margin-bottom: 0; }

.case-bar__title {
  display: inline-flex;
  align-items: baseline;
}

/* Hamburger: mobile only */
.toc-toggle {
  display: none;
  align-self: center;
  margin: 0 0.6em 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, var(--link));
  cursor: pointer;
}

.toc-toggle svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

/* TOC column + content column */
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: 1rem;
  padding-top: 0.8rem;
}

.case-toc {
  position: sticky;
  top: calc(var(--bar-h, 3rem) + 0.8rem);
  align-self: start;
  max-height: calc(100vh - var(--bar-h, 3rem) - 1.6rem);
  overflow-y: auto;
  scrollbar-width: none;
}

.case-toc::-webkit-scrollbar { display: none; }

.case .case-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-toc li + li { margin-top: 0.4em; }

.case-toc a,
.case-content a { color: var(--accent, var(--link)); }

/* Links in the project text are underlined; the table of contents is not */
.case-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.case-toc a[aria-current] { color: var(--text); }

/* One shared width for everything in the content column (text, images, tables, rules),
   so all right edges line up and lines stay readable on wide screens */
.case-content {
  width: 100%;
  max-width: var(--measure);
}

.case-hero { scroll-margin-top: var(--bar-h, 3rem); }

.case h1,
.case h2,
.case h3 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Section title, sampled from Cargo's h2: 2rem, weight 500, line-height 1.3, sentence case, project accent */
.case h2 {
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--accent, var(--muted));
}

/* Type levels below h2:
   h3 = DM Mono 1.3rem, weight 500 (between body and h2) · body = --text · strong = weight 500, accent color
   caption = Newsreader italic, --caption-size
   secondary = .muted · caption = --caption-size, muted */
.case h3 { font-size: var(--h3-size); font-weight: 500; line-height: 1.3; }

.case strong {
  font-weight: 500;
  color: var(--accent, var(--text));
}

/* All rules on project pages: one opaque light grey, so lines can't stack or render darker */
.case { --rule: #e6e6e6; }

/* Homepage: a project entry takes its project's accent for its title and links */
.project.case--aako .project__text > p:first-child,
.project.case--garden .project__text > p:first-child,
.project.case--journey .project__text > p:first-child { color: var(--accent); }

/* Skill keywords under the title: body color, so they read apart from the accent title */
.project__tags { color: var(--text); }
.project__tags span { white-space: nowrap; }

.project[class*="case--"] .project__text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.project[class*="case--"] .project__icon { color: var(--accent); }

/* Per-project accent color (used by h2, the table of contents and the hamburger) */
.case--aako { --accent: #bb432a; }   /* rgb(0.733, 0.263, 0.165); both AAKO pages */
.case--garden { --accent: #4f8a2b; }
.case--journey { --accent: #a8532a; }

.case p + p,
.case h2 + p,
.case h3 + p,
.case p + h3,
.case ol + p { margin-top: 1.2em; }

.case ol {
  margin: 1.2em 0 0;
  padding-left: 2em;
}

.case-hero { padding: 4.8em 0 2.4em; }


/* Big title, sampled from Cargo's h1: 3.5rem, line-height 0.9, regular weight, sentence case */
.case .case-hero h1 {
  margin: 1.2rem 0 1.6rem;
  font-size: var(--h1-size);
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
}

/* The accent background sits on the text itself and hugs each wrapped line */
.case-hero h1 span {
  padding: 0.04em 0.2em 0.1em;
  background: var(--accent, var(--text));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Secondary title, directly under the h1 */
.case-hero .case-subtitle {
  margin-top: -0.8rem;
  margin-bottom: 1.2em;
  color: var(--muted);
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  padding-top: 1.2em;
}

.case-section {
  padding-bottom: 3.6em;
  scroll-margin-top: calc(var(--bar-h, 3rem) + 1.2em);
}

.case-index { padding-bottom: 1.2em; }

.case-body > * + * { margin-top: 1.2em; }

.case-body > h2 { margin-bottom: 1.6rem; }

.case-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  padding-top: 2.4em;
}

.case-cols > * + * { margin-top: 0; }

.case-figure {
  margin: 0;
  padding-top: 1.2em;
}

.case-figure .placeholder,
.case-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  object-fit: cover;
}

.case-figure figcaption {
  margin-top: 0.6em;
  text-align: center;
  font-family: var(--caption-font);
  font-style: italic;
  font-size: var(--caption-size);
  color: var(--muted);
}

.case-figure--wide { padding-bottom: 1.2em; }

/* Annotated screenshots: phone screens with click labels drawn over them */
.case-annot { display: block; width: 100%; height: auto; overflow: visible; }
.case-annot .d-hl { fill: none; stroke: var(--accent, var(--text)); stroke-width: 2; }
.case-annot .d-hl-line { fill: none; stroke: var(--accent, var(--text)); stroke-width: 1.5; }
.case-annot .d-tag { fill: var(--accent, var(--text)); fill-opacity: 0.22; }
.case-annot .d-tag-text { font-family: var(--font); font-size: 15px; fill: var(--accent, var(--text)); }

/* Real screenshots: keep their own proportions instead of the 16:9 crop */
.case .case-shots .case-figure img { aspect-ratio: auto; height: auto; object-fit: contain; }
.case .case-shots { padding-top: 1.2em; }
.case .case-shots + p { margin-top: 1.6em; }

.case-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.case-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.case-cols--flush { padding-top: 0; }

.case-meta--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.case-body > h3 { margin-top: 2.4em; }

/* Tall image, e.g. a receipt */
.case-figure--tall .placeholder,
.case-figure--tall img { aspect-ratio: 3 / 4; }

/* Unstyled list, one item per line */
.case .case-plain {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
}

/* Step-by-step flow: who acts on the left, what happens on the right */
.case .case-flow {
  list-style: none;
  margin: 2.4em 0 0;
  padding: 0;
  counter-reset: flow;
}

.case-flow li {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 2fr);
  column-gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  counter-increment: flow;
}

.case-flow li:last-child { border-bottom: 1px solid var(--rule); }

.case-flow li::before {
  content: counter(flow, decimal-leading-zero);
  color: var(--muted);
}

.case-flow__who { text-transform: uppercase; }


/* Thumbnail strip under a main image */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.case-grid .placeholder,
.case-grid img,
.case-grid video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  object-fit: cover;
}

.case-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.6rem; }
.case-grid--square img,
.case-grid--square video { aspect-ratio: 1 / 1; }
.case-figure > .case-grid { margin: 0; }

/* Shader graphs: the full graph on the left, the four small skins packed 2x2 on the right at the same height */
.case-shader { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.case-shader img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
  background: #e8e8e7;
}
.case-shader__small {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  aspect-ratio: 672 / 521;
}
.case-shader__small img { height: 100%; min-height: 0; }

/* Figures that keep the image's own proportions instead of the 16:9 crop */
.case-figure--natural img { aspect-ratio: auto; object-fit: contain; }
.case-figure--narrow img { max-width: 520px; margin: 0 auto; }

/* Lightbox: any image or video in a case study opens full screen with its caption */
.case-content img.is-zoomable,
.case-content video.is-zoomable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.6rem 1rem 1.2rem;
  background: var(--bg);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-open { overflow: hidden; }

.lightbox__media img,
.lightbox__media video {
  display: block;
  object-fit: contain;
  border-radius: 6px;
}

.lightbox__caption {
  max-width: 40em;
  margin-top: 0.9em;
  text-align: center;
  font-family: var(--caption-font);
  font-style: italic;
  font-size: var(--caption-size);
  color: var(--muted);
}

.lightbox__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem;
  cursor: default;
}

.lightbox button {
  font: inherit;
  color: var(--accent, var(--text));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lightbox__nav { display: flex; gap: 1.6rem; }
.lightbox__count { color: var(--muted); }

.case-quote {
  margin: 2.4em 0 0;
  padding: 1.2em 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-transform: uppercase;
}

.case-list {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 1rem;
  margin: 0;
  padding-top: 1.2em;
}

.case-list dt,
.case-list dd {
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}

.case-list dt { color: var(--muted); }

/* Findings: label in body color, supporting text muted (the h3 stays body color) */
.case-list--findings dt { color: var(--text); }
.case-list--findings dd p { color: var(--muted); }

/* Label above value instead of beside it, for narrow columns */
.case-list--stack { grid-template-columns: minmax(0, 1fr); }
.case-list--stack dd { border-top: 0; padding-top: 0; }

.case-receipt-text { padding-top: 1.2em; }

/* Cards: side-by-side boxes; the --accent one is outlined in the project color */
.case-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.4em;
}

.case-card {
  padding: 1rem;
  border: 2px solid var(--rule);
}

.case-card--accent { border-color: var(--accent, var(--text)); }

.case-card > .muted:first-child { margin-bottom: 0.4em; }
.case-card--accent > .muted:first-child { color: var(--accent, var(--text)); }

.case-card dl { margin: 1.2em 0 0; }
.case-card dt { color: var(--muted); }
.case-card dd { margin: 0.3em 0 0; }
.case-card dd + dt { margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid var(--rule); }

.case-card h3 + p { margin-top: 0.6em; }
.case-card__n { display: block; margin-bottom: 0.8em; color: var(--accent, var(--muted)); }

/* Four cards in a 2×2 grid, or in one row */
.case-cards--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-cards--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Card → card with an arrow between (one row per topic) */
.case-flowrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.8rem;
  margin-top: 0.8em;
}
.case-flowrow__arrow { align-self: center; color: var(--accent, var(--muted)); }
.case-flowrow + .case-flowrow { margin-top: 1rem; }
.case-flowrow .case-card > .muted:first-child { margin-bottom: 0.3em; }
.case-flowrow .case-card h3 { margin-bottom: 0.6em; }
.case-flowrow .case-card--accent h3 { color: var(--accent, var(--text)); }
.case-flowhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.8rem;
  margin-top: 2.4em;
}
.case-flowhead span:nth-child(2) { visibility: hidden; }

/* Vertical flow: stacked cards with ↓ between */
.case .case-vflow { margin: 2.4em 0 0; padding: 0; list-style: none; }
.case-vflow li { padding: 0.8rem 1rem; border: 2px solid var(--rule); }
.case-vflow li:last-child { border-color: var(--accent, var(--text)); }
.case-vflow li + li { margin-top: 2em; position: relative; }
.case-vflow li + li::before {
  content: "↓";
  position: absolute;
  top: -1.75em;
  left: 1rem;
  color: var(--accent, var(--muted));
}
.case-vflow b { font-weight: 500; }
.case-vflow span { display: block; margin-top: 0.3em; color: var(--muted); }

/* From → to rows: old value struck through, new value in accent */
.case-fromto { margin-top: 2.4em; }
.case-fromto > div {
  display: grid;
  grid-template-columns: 22% minmax(0, 1fr) 3em minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.case-fromto > div:last-child { border-bottom: 1px solid var(--rule); }
.case-fromto s { color: var(--muted); text-decoration-thickness: 1px; }
.case-fromto i { font-style: normal; text-align: center; color: var(--accent, var(--muted)); }

/* Two cards whose rows line up (Before / After) */
.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  margin-top: 2.4em;
}
.case-pair > * { padding: 0.8rem 1rem; border-left: 2px solid var(--rule); border-right: 2px solid var(--rule); }
.case-pair > :nth-child(-n+2) { border-top: 2px solid var(--rule); }
.case-pair > :nth-last-child(-n+2) { border-bottom: 2px solid var(--rule); }
.case-pair > :nth-child(even) { border-left-color: var(--accent, var(--text)); border-right-color: var(--accent, var(--text)); }
.case-pair > :nth-child(2) { border-top-color: var(--accent, var(--text)); }
.case-pair > :last-child { border-bottom-color: var(--accent, var(--text)); }
.case-pair > :nth-child(n+3) .muted { display: block; margin-bottom: 0.3em; }
.case-pair > :nth-child(odd):not(:first-child) { color: var(--muted); }

/* Small photo squares inside a card */
.case-sqs { display: flex; gap: 4px; margin-top: 0.8em; }
.case-sq { display: block; width: 18px; height: 18px; border: 1px solid var(--muted); }

/* Principle cards: red bold titles */
.case-cards--principles h3 { color: var(--accent, var(--text)); }

/* AI events: camera roll + AI on the left, event cards stacked on the right */
.case-events {
  display: grid;
  grid-template-columns: 270px 240px;
  justify-content: center;
  gap: 1.6rem;
  align-items: center;
  margin-top: 2.4em;
}
.case-events .case-illo { margin: 0; }
.case-events__cards { display: grid; gap: 0.6rem; }
.case-events__cards .case-card { padding: 0.7rem 1rem; }
.case-events__cards p { margin-top: 0.2em; }

/* Big-number card */
.case-stat-card b {
  display: block;
  margin-bottom: 0.3em;
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1;
  color: var(--accent, var(--text));
}

/* Step row with a face at the end; the muted row has grey rules */
.case-steprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}
.case .case-steprow .case-steps { margin-top: 0.8em; }
.case-face {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  fill: none;
  stroke: var(--accent, var(--text));
  stroke-width: 1.6;
  stroke-linecap: round;
}
.case-face--muted { stroke: var(--muted); }
.case-face .case-face__dot { fill: currentColor; stroke: none; }
.case-face--muted .case-face__dot { fill: var(--muted); }
.case .case-steps--muted li { border-top-color: var(--muted); }
.case-steps-label--accent { color: var(--accent, var(--text)); }

/* ---- Reframe style options (review page) ---- */
.st-pa2 p + p { margin-top: 0.4em; }
.st-pa2__p { color: var(--muted); }
.st-pa2__arrow { color: var(--accent); }
.st-pa2__a { font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: var(--accent); }

.st-pa4 { margin-top: 2.4em; }
.st-pa4 > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.st-pa4 > div:last-child { border-bottom: 1px solid var(--rule); }
.st-pa4 > div > p:first-child { grid-column: 1 / -1; }
.case .st-pa4__a { margin-top: 0.2em; font-size: var(--h2-size); font-weight: 500; line-height: 1.15; color: var(--accent); }

.st-svg { max-width: 640px; }

.st-ba3__b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; margin-top: 0.4em; }
.st-ba3__a { margin-top: 0.4em; }

.st-ba5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3em minmax(0, 1fr);
  margin-top: 2.4em;
}
.st-ba5__col > div { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.st-ba5__col > div p { margin-top: 0.3em; }
.st-ba5__h { padding-bottom: 0.8rem; font-size: 1.4rem; font-weight: 500; line-height: 1.2; }
.st-ba5__col--after .st-ba5__h { color: var(--accent); }
.st-ba5__mid { align-self: center; text-align: center; font-size: 1.6rem; color: var(--accent); }

.st-pr3 { margin-top: 2.4em; }
.st-pr3 > div {
  display: grid;
  grid-template-columns: 30% 22% minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
}
.st-pr3 > div:last-child { border-bottom: 1px solid var(--rule); }
.st-pr3__x { font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: var(--accent); }

.st-pr4 { padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.st-pr4 p + p { margin-top: 0.8em; }
.st-chip { display: inline-block; padding: 0.2em 0.7em; border: 1.5px solid var(--muted); border-radius: 999px; color: var(--muted); }
.st-chip--accent { border-color: var(--accent); color: var(--accent); font-weight: 500; }

.case .st-pr5 b { color: var(--accent); }

/* ---- First experience: feeling curve (desktop) with step rows as the phone fallback ---- */
.fx-curve { margin-top: 1.6em; }
.case-diagram-fallback.fx-fallback { grid-template-columns: minmax(0, 1fr); }
.fx-card__head { display: flex; justify-content: space-between; align-items: center; }
.fx-card__head .case-face { width: 2.4rem; height: 2.4rem; }
.case .fx-card ol { margin-top: 0.8em; }
.case .fx-card li + li { margin-top: 0.6em; }

.fx-timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.2em; }
.case .fx-timeline ol { list-style: none; margin: 0.8em 0 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--accent); }
.case .fx-timeline__col--muted ol { border-left-color: var(--muted); }
.fx-timeline li { position: relative; padding-bottom: 1.2em; }
.fx-timeline li::before { content: ""; position: absolute; left: calc(-1.2rem - 6px); top: 0.25em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.fx-timeline__col--muted li::before { background: var(--muted); }
.fx-timeline b { font-weight: 500; }
.fx-timeline span { display: block; color: var(--muted); }
.fx-timeline__end { margin-left: -1.2rem; }

.fx-curve__before { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.fx-dot-muted { fill: var(--muted); }
.fx-face, .fx-face-muted { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.fx-face { stroke: var(--accent); }
.fx-face-muted { stroke: var(--muted); }
.fx-face-muted .fx-eye { fill: var(--muted); stroke: none; }

.fx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.8em; }
.fx-chip { padding: 0.5em 1em; border: 2px solid var(--accent); border-radius: 999px; color: var(--accent); background: #fff; font-weight: 500; }
.fx-chip--muted { border-color: var(--muted); color: var(--muted); font-weight: 400; }
.fx-chip-arrow { color: var(--muted); }
.fx-chip-face { margin-left: auto; }

/* Phone screens: one shared height (never too tall); widths follow each screenshot */
.case-phones {
  --phone-h: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.4em;
}
.case-phone { margin: 0; width: min-content; }
.case-phone img,
.case-phone video,
.case-phone__screen {
  display: block;
  margin: 0;
  height: var(--phone-h);
  width: auto;
  border: 2px solid var(--rule);
  border-radius: 22px;
  background: #f4f4f4;
}
.case-phone__screen { aspect-ratio: 692 / 1488; }
.case-phone figcaption {
  margin-top: 0.6em;
  text-align: center;
  font-family: var(--caption-font);
  font-style: italic;
  font-size: var(--caption-size);
  color: var(--muted);
}

/* Feeling curve with a small square image on its right */
.fx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 1rem;
  align-items: center;
  margin-top: 1.6em;
}
.fx-row .fx-curve { margin: 0; }
.fx-row__img { margin: 0; }
.fx-row__img img { display: block; width: 100%; height: auto; margin: 0; border-radius: 16px; }
.fx-row__img figcaption { margin-top: 0.6em; text-align: center; font-family: var(--caption-font); font-style: italic; font-size: var(--caption-size); color: var(--muted); }

/* Scope tags: cut (struck, faint), kept (neutral), new (accent, from .fx-chip) */
.fx-chip--cut { border-color: var(--rule); color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.fx-chip--kept { border-color: var(--muted); color: var(--text); font-weight: 400; }
.case .case-steps-label + .fx-chips { margin-top: 0.8em; }
.fx-chips--box .fx-chip { border-radius: 4px; }

/* Four annotated screens in one row (same scale as the album screens) */
.case-annot-wrap { overflow-x: auto; }
.case-annot--row .d-tag-text { font-size: 12.96px; }
.case-annot--row text.d-muted,
.case-annot--row text.d-accent-text { font-family: var(--font); font-size: 12.96px; }
.case-annot--row .d-muted { fill: var(--muted); }
.case-annot--row .d-accent-text { fill: var(--accent, var(--text)); }

/* ---- Echo creation: connector diagram (desktop), tag rows as the phone fallback ---- */
.cr-svg { margin-top: 1.6em; }
.cr-row { gap: 2.4rem; }
.cr-row .cr-svg { margin: 0; }
.cr-row .case-phone img { height: auto; width: 100%; border-radius: 16px; }
.cr-row .case-phone { width: auto; }
.case-diagram-fallback.cr-fallback { grid-template-columns: minmax(0, 1fr); }
/* (older review-page styles below) */
.cr-accent { color: var(--accent, var(--text)); }
.cr-table { width: 100%; margin-top: 1.2em; border-collapse: collapse; }
.cr-table th { text-align: left; font-weight: 400; padding-bottom: 0.6rem; }
.cr-head-a { color: var(--accent, var(--text)); }
.cr-table td { padding: 0.55rem 0.6rem 0.55rem 0; border-top: 1px solid var(--rule); vertical-align: middle; }
.cr-table tr:last-child td { border-bottom: 1px solid var(--rule); }
.cr-n { width: 2.4em; }
.cr-n--a { color: var(--accent, var(--text)); }
.cr-b { width: 36%; color: var(--muted); }
.cr-arrow { width: 3em; text-align: center; color: var(--accent, var(--muted)); }
.cr-a { color: var(--text); }
.cr-a--merged { color: var(--accent, var(--text)); font-weight: 500; background: color-mix(in srgb, var(--accent) 8%, transparent); padding-left: 0.6rem; }

.case .cr-diff { list-style: none; margin: 1.2em 0 0; padding: 0; }
.cr-diff li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--rule); }
.cr-diff li:last-child { border-bottom: 1px solid var(--rule); }
.cr-diff--merged > span:nth-child(2) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cr-diff--merged .cr-diff__mark { color: var(--accent); }
.cr-diff--kept .cr-diff__mark { color: var(--muted); }
.cr-big { margin-top: 1.2em; font-size: var(--h2-size); font-weight: 500; color: var(--accent, var(--text)); }

.cr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.2em; }
.cr-two__n { font-size: 3rem; font-weight: 500; line-height: 1; }
.cr-two__n.muted { color: var(--muted); }
.case .cr-list { margin: 0.8em 0 0; padding-left: 1.8em; }
.cr-list li { padding: 0.35em 0; border-bottom: 1px solid var(--rule); }
.cr-list--muted li { color: var(--muted); }
.cr-list:not(.cr-list--muted) li { color: var(--accent, var(--text)); }

.cr-br { margin-top: 1.2em; }
.cr-br__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.cr-br__row:last-child { border-bottom: 1px solid var(--rule); }
.cr-br__row--merge .cr-br__steps { padding-right: 1rem; border-right: 2px solid var(--accent); }
.cr-br__steps p { margin: 0; padding: 0.15em 0; color: var(--muted); }
.cr-br__row:not(.cr-br__row--merge) .cr-br__steps p { color: var(--text); }
.cr-br__out b { display: block; font-weight: 500; color: var(--accent); }
.cr-br__out span { color: var(--text); }

.cr-svg { max-width: 640px; }

/* Review page only: an option block, labelled A or B */
.case-option {
  margin-top: 2.4em;
  padding: 0 1rem 1.2rem;
  border: 1px dashed var(--muted);
}
.case-option__tag {
  display: inline-block;
  margin: 0 0 0 -1rem;
  padding: 0.2em 0.6em;
  color: #fff;
  background: var(--text);
}
.case-option > :nth-child(2) { margin-top: 1.2em; }
.case-review-note {
  margin-bottom: 1.2em;
  padding: 0.8rem 1rem;
  color: #fff;
  background: var(--text);
}

/* A labelled row above a step diagram (e.g. Before / After) */
.case-steps-label { margin-top: 2.4em; }
.case .case-steps-label + .case-steps,
.case .case-steps-label + .case-fromto,
.case .case-steps-label + .st-ba5 { margin-top: 0.8em; }

/* Problem → answer rows: links to the section that answers it */
.case-fromto--answers a { margin-left: 0.4em; color: var(--muted); text-decoration: none; }
.case-fromto--answers a::before { content: "→ "; }

/* Stat row: big accent numbers with a short label under each */
.case-stats {
  display: grid;
  grid-template-columns: repeat(var(--stats, 4), minmax(0, 1fr));
  gap: 1rem;
  margin: 2.4em 0 0;
}

.case-stats div { padding-top: 0.8rem; border-top: 1px solid var(--rule); }

.case-stats b {
  display: block;
  margin-bottom: 0.3em;
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1;
  color: var(--accent, var(--text));
}

/* Step diagram: numbered stages in a row, accent rule on top of each */
.case .case-steps {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
  gap: 1rem;
  margin: 2.4em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.case-steps li {
  padding-top: 0.8rem;
  border-top: 2px solid var(--accent, var(--text));
  counter-increment: step;
}

.case-steps li::before {
  content: counter(step, decimal-leading-zero) " →";
  display: block;
  margin-bottom: 0.4em;
  color: var(--muted);
}

.case-steps li:last-child::before { content: counter(step, decimal-leading-zero); }

.case-steps b { font-weight: 500; }

.case-steps span { display: block; margin-top: 0.4em; color: var(--muted); }

/* Labelled SVG diagram; text matches body size at its 640px max width */
.case-diagram {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-top: 2.4em;
  overflow: visible;
}

.case-illo text,
.case-diagram text { font-family: var(--font); font-size: 12.96px; fill: var(--text); }
.case-illo .d-muted,
.case-diagram .d-muted { fill: var(--muted); }
.case-illo .d-line,
.case-diagram .d-line { stroke: var(--muted); stroke-width: 1; fill: none; }
.case-illo .d-accent,
.case-diagram .d-accent { stroke: var(--accent, var(--text)); stroke-width: 1.5; fill: none; }
.case-illo .d-fill,
.case-diagram .d-fill { fill: rgba(0, 0, 0, 0.06); }
.case-illo .d-dash,
.case-illo .d-tint,
.case-diagram .d-tint { fill: var(--accent, var(--text)); fill-opacity: 0.12; stroke: var(--accent, var(--text)); stroke-width: 1.5; }
.case-illo .d-accent-fill,
.case-diagram .d-accent-fill { fill: var(--accent, var(--text)); }
.case-diagram .d-dash { stroke: var(--muted); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }

/* Small illustration inside a column; 1:1 at its 320px max width.
   overflow: visible so strokes on the edge of the viewBox aren't cut in half */
.case-illo {
  display: block;
  overflow: visible;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 1.2em 0 0.4em;
}

.case-illo--wide { max-width: 560px; margin-top: 1.6em; }

/* Before / Now pair of diagrams side by side */
.case-ba {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 430px);
  justify-content: center;
  align-items: end;
  gap: 10px;
}
.case-ba .case-illo { max-width: none; margin: 0; }
.case-illo .d-solid { fill: var(--text); }
.case-illo .d-layer { fill: #d6d6d6; fill-opacity: 0.55; stroke: #8a8a8a; stroke-width: 2.5; stroke-linejoin: round; }
.case-illo .d-plane { fill: var(--accent, var(--text)); fill-opacity: 0.32; stroke: var(--accent, var(--text)); stroke-width: 3; stroke-linejoin: round; }
.case-illo .d-ellipse { fill: #e2e2e2; }
.case-illo .d-toggle { fill: #c8c8c8; }
.case-illo .d-knob { fill: #fff; stroke: #a8a8a8; stroke-width: 1.5; }
.case-illo .d-pin { stroke: var(--accent, var(--text)); stroke-width: 2; }
.case-illo .d-pin-label { fill: var(--accent, var(--text)); font-weight: 500; }
.case-illo .d-tint-fill { fill: var(--accent, var(--text)); fill-opacity: 0.14; }
.case-illo .d-pill,
.case-diagram .d-pill { fill: #fff; stroke: var(--muted); stroke-width: 1.5; }
.case-illo .d-pill-accent,
.case-diagram .d-pill-accent { fill: #fff; stroke: var(--accent, var(--text)); stroke-width: 2; }
.case-illo .d-accent-text,
.case-diagram .d-accent-text { fill: var(--accent, var(--text)); }
.case-illo .d-dash-accent { fill: none; stroke: var(--accent, var(--text)); stroke-width: 1.2; stroke-dasharray: 4 4; }

/* Charts narrower than the column sit centered in it */
.case-diagram,
.case-illo { margin-left: auto; margin-right: auto; }
.case-events .case-illo { margin: 0; }

/* Shown only where the diagram is too small to read (mobile) */
.case-diagram-fallback { display: none; }

/* Comparison table: rows line up across columns, each row ruled on top */
.case-table {
  width: 100%;
  margin-top: 2.4em;
  border-collapse: collapse;
  table-layout: fixed;
}

.case-table th,
.case-table td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: inherit;
}

.case-table th:last-child,
.case-table td:last-child { padding-right: 0; }

.case-table tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

.case-table td p { margin-top: 0.4em; }

/* First column holds row labels: keep it narrow */
.case-table--labels tr > :first-child { width: 22%; }

.case-table td:first-child strong,
.case-table th strong { font-weight: 500; }

.case-decision {
  padding-top: 2.4em;
  border-top: 1px solid var(--rule);
  margin-top: 2.4em !important;
}

.case-decision > * + * { margin-top: 1.2em; }

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .main,
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .sidebar { overflow: visible; }

  .divider { display: none; }

  .footer { padding-top: 3.6em; }

  .project { row-gap: 1rem; }
  .project__media,
  .project__text { grid-column: 1 / -1; }
  .project__icon { display: none; }

  .case-hero { padding-top: 2.4em; }
  .case-meta,
  .case-cols { grid-template-columns: minmax(0, 1fr); row-gap: 1.2em; }

  /* TOC becomes a dropdown under the sticky bar, opened by the hamburger */
  .toc-toggle { display: block; }
  .case-layout { display: block; padding-top: 0; }
  .case-toc {
    display: none;
    position: fixed;
    top: var(--bar-h, 3rem);
    left: 0;
    right: 0;
    z-index: 9;
    max-height: calc(100dvh - var(--bar-h, 3rem));
    padding: 0.8rem 1rem 1.2rem;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  .toc-open .case-toc { display: block; }
  .case-toc li + li { margin-top: 0; }
  .case-toc a { display: block; padding: 0.5em 0; }
  .case-list { grid-template-columns: minmax(0, 1fr); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .case-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-shader { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .case .case-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-cards,
  .case-cards--2x2,
  .case-cards--row { grid-template-columns: minmax(0, 1fr); }
  .case-flowrow { grid-template-columns: minmax(0, 1fr); }
  .case-flowrow__arrow { transform: rotate(90deg); justify-self: start; }
  .case-flowhead { display: none; }
  .case-fromto > div { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .case-fromto > div > :first-child { grid-column: 1 / -1; }
  .case-pair { column-gap: 0.6rem; }
  .st-pr3 > div { grid-template-columns: minmax(0, 1fr); gap: 0.3em; }
  .st-ba5 { grid-template-columns: minmax(0, 1fr); }
  .fx-timeline { grid-template-columns: minmax(0, 1fr); }
  .case-phones { --phone-h: 220px; gap: 0.6rem; }
  .case-phone img, .case-phone video, .case-phone__screen { border-radius: 14px; }
  .fx-row { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .fx-row__img { width: 150px; }
  .case-annot--row { width: 640px; max-width: none; }
  .st-ba5__mid { transform: rotate(90deg); padding: 0.4em 0; }
  .case-events { grid-template-columns: minmax(0, 270px); }
  .case-ba { grid-template-columns: minmax(0, 430px); gap: 2rem; }
  .case-diagram { display: none; }
  .case-diagram-fallback { display: grid; }
  .case-meta--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-cols--3.case-cols--flush { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.6rem; }
  .case-flow li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .case-flow li > span:last-child { grid-column: 2; padding-top: 0.4em; }
  .case-list dd { border-top: 0; padding-top: 0; }

  /* Bio first, works second, like Cargo's stacked mobile view */
  body { display: flex; flex-direction: column; }
  .sidebar { order: -1; }
}

/* Captions drawn inside SVG diagrams use the caption face too */
.case-illo .d-caption,
.case-diagram .d-caption { font-family: var(--caption-font); font-style: italic; font-size: 14px; fill: var(--muted); }

/* ---------- What’s in Your Bag? components ---------- */

.case { --tint: color-mix(in srgb, var(--accent, #000) 14%, #fff); --ai-line: #b9b9b9; }

/* Squares: one row of 20 per stat, each square = 5% */
.case-waffles { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); column-gap: 1rem; row-gap: 1.4rem; align-items: start; }
.case-waffles b { font-size: 1.6rem; font-weight: 500; line-height: 1; color: var(--accent); }
.case-waffle { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 440px; margin-bottom: 0.5em; }
.case-waffle i { aspect-ratio: 1; background: #e9e9e9; border-radius: 2px; }
.case-waffle i.on { background: var(--accent); }

/* Swimlanes: you on the left, AI & system on the right, steps numbered down the spine */
.case-lanes { display: grid; grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); margin-top: 2.4em; }
.case-lanes__head { padding-bottom: 0.6rem; color: var(--muted); }
.case-lanes__spine { display: flex; justify-content: center; align-items: center; background: linear-gradient(var(--rule), var(--rule)) center / 2px 100% no-repeat; color: var(--muted); }
.case-lanes__spine span { padding: 0.2em 0; background: var(--bg); }
.case-lane-card { margin: 0.3rem 0; padding: 0.7rem 0.9rem; border: 2px solid var(--ai-line); border-radius: 6px; background: var(--bg); }
.case-lane-card--you { border-color: var(--accent); background: var(--tint); }
.case-lane-card b { display: block; font-weight: 500; }
.case-lane-card--you b { color: var(--accent); }

/* Five step images: the first one large, the rest small */
.case-shots4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.case-shots4 figure { margin: 0; }
.case-shots4 > :first-child { grid-column: 1 / -1; }
.case-shots4 .placeholder,
.case-shots4 img { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 1 / 1; object-fit: cover; }
.case-shots4 > :first-child .placeholder,
.case-shots4 > :first-child img { aspect-ratio: 16 / 9; }
.case-shots4 figcaption { margin-top: 0.4em; }
.case-shots4 figcaption span { color: var(--accent); font-weight: 500; }

/* Table with a line-art icon in the first column */
.case-flower { display: block; width: 52px; height: 52px; fill: var(--tint); stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case-table--glyph tr > :first-child { width: 72px; }

/* A receipt drawn in type, with a torn bottom edge */
.case-receipt-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.case-receipt-wrap .case-receipt-text { padding-top: 0; }
.case-receipt-text > p + p { margin-top: 1.2em; }
.case-receipt {
  padding: 1.2rem 1rem 1.6rem;
  background: #fbfbf8;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  text-transform: uppercase;
  line-height: 1.55;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.case .case-receipt p { margin: 0; }
.case-receipt .c { text-align: center; }
.case-receipt .cut { margin: 0.7em 0; border-top: 1px dashed #999; }
.case .case-receipt .q { margin: 0.2em 0 0.8em; text-transform: none; }
.case-receipt .sk { display: flex; justify-content: space-between; gap: 1em; margin: 0.35em 0; }
.case-receipt .sk i { height: 0.7em; background: #ddd; border-radius: 2px; }

/* Plan → validate → implement */
.case-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--muted); }
.case-legend span::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.4em; vertical-align: -0.05em; border-radius: 2px; }
.case-legend__you::before { background: var(--accent); }
.case-legend__ai::before { border: 2px solid var(--ai-line); }
.case-body > .case-legend + .case-cycle { margin-top: 0.8em; }
.case-cycle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.case-cycle__box { min-width: 11em; padding: 0.6rem 0.8rem; border: 2px solid var(--ai-line); border-radius: 6px; text-align: center; font-weight: 500; }
.case-cycle__box small { display: block; font-size: 1em; font-weight: 400; color: var(--muted); }
.case-cycle__box--you { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.case-cycle__arrow { color: var(--muted); }
.case-body > .case-cycle + .case-return { margin-top: 0.8em; color: var(--accent); }

@media (max-width: 768px) {
  .case-waffles { grid-template-columns: 3.6em minmax(0, 1fr); }
  .case-lanes { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
  .case-shots4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-table--glyph tr > :first-child { width: 44px; }
  .case-table--glyph .case-flower { width: 36px; height: 36px; }
  .case-table--glyph td p { display: none; }
  .case-receipt-wrap { grid-template-columns: minmax(0, 1fr); }
  .case-cycle__box { min-width: 0; }
}

/* ---------- Journey to the Forgotten: dark theme sampled from the case-study PDF ---------- */
/* The page walks through the PDF's spreads: each section is a full-width band in its spread's color,
   titles in Instrument Serif, ▶ before subheads, orange for key lines, lilac for highlights. Body text stays DM Mono. */
.jn-page {
  --bg: #34312a;
  --text: #efe9df;
  --muted: rgba(239, 233, 223, 0.55);
  --jn-dots: radial-gradient(rgba(239, 233, 223, 0.07) 1px, transparent 1.6px) 0 0 / 12px 12px;
  --jn-bleed: calc(-2rem - (100vw - 3rem) / 4);   /* content column's left edge → the window's left edge */
  background: var(--jn-dots), var(--bg);
}
.jn-page .case--journey {
  --accent: #ff9447;
  --jn-lilac: #d98ae6;
  --jn-tri: #f2edb4;
  --jn-serif: "Instrument Serif", Georgia, serif;
  --rule: rgba(239, 233, 223, 0.16);
  overflow-x: clip;
}
.jn-page .case-toc { z-index: 2; }

.jn h2 { font-family: var(--jn-serif); font-weight: 400; font-size: 3.4rem; line-height: 1.05; color: var(--text); }
.jn h2 i { font-size: 0.6em; }   /* "Level 1 High Ground: …", as in the PDF */
.jn h3 { color: #f4efd2; }
.jn h3::before { content: ""; display: inline-block; margin-right: 0.6em; border-left: 0.75em solid var(--jn-tri); border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; vertical-align: -0.05em; }
.jn .jn-hl { color: var(--jn-lilac); }
.jn-lead { font-family: var(--caption-font); font-style: italic; font-size: 1.3rem; line-height: 1.35; color: #f4efd2; }
.jn-lead--accent { color: var(--accent); }
.jn-gp { font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #f0a5e6; }

/* Each section: a full-width band in its PDF spread's color */
.case-section.jn-band { position: relative; z-index: 0; padding: 4.8em 0; }
.jn-band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--jn-bleed); width: 100vw; background: var(--jn-dots), var(--band, var(--bg)); }
.jn-band--flow { --band: #0f1c1f; }
.jn-band--dev { --band: radial-gradient(ellipse 55% 45% at 65% 45%, rgba(170, 70, 40, 0.3), transparent 70%), #140b08; }
.jn-band--core { --band: #252e5f; }
.jn-band--space { --band: linear-gradient(180deg, #0d1c25 0%, #1b1a22 75%, #463216 100%); }
.jn-band--mech { --band: radial-gradient(ellipse 50% 35% at 25% 0%, rgba(214, 170, 40, 0.25), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(200, 70, 20, 0.3), transparent 70%), #231a0c; }
.jn-band--river { --band: linear-gradient(180deg, #6b2a1b 0%, #5b2238 55%, #45205a 100%); }
.jn-band--show { --band: #2b2925; }
.jn-band--voices { --band: #3a3246; }

/* Cover: gold haze from the PDF cover, full window width; the beam + labyrinth image fades in at the right edge */
.case .jn-hero { position: relative; z-index: 0; padding: 7.2em 0 6em; }
.jn-hero__text { position: relative; max-width: 520px; color: #fff; }
.jn-hero__text .muted,
.jn-meta dt { color: rgba(255, 255, 255, 0.72); }
.case .jn-hero h1 { margin: 1.2rem 0; font-family: var(--jn-serif); font-weight: 400; font-size: 6.6rem; line-height: 0.95; color: #fff; }
.jn-hero h1 span { padding: 0; background: none; }
.jn-hero .case-subtitle { margin-top: 0; font-size: var(--h3-size); color: #fff; }
.jn-meta { display: grid; gap: 0.7em; margin: 2.4em 0 0; }
.jn-meta dd { margin: 0.15em 0 0; font-weight: 500; }
.case .jn-hero .jn-intro { margin-top: 2.4em; }
.jn-hero a,
.jn-hero strong { color: #fff; }
.jn-hero::before {
  content: ""; position: absolute; z-index: -2; top: -0.8rem; bottom: 0; left: var(--jn-bleed); width: 100vw;
  background:
    radial-gradient(ellipse 55% 75% at 0% 55%, rgba(190, 140, 24, 0.8), transparent 70%),
    linear-gradient(180deg, #845f32 0%, #7f5b27 10%, #947936 30%, #ad8f50 50%, #b7985d 62%, #ba9866 82%, #6d3e1c 100%);   /* sampled from the cover image's left edge */
}
.jn-hero .jn-hero__img {
  position: absolute; z-index: -1; top: -0.8rem; height: calc(100% + 0.8rem); width: auto; max-width: none; margin: 0;
  right: calc(-1 * max(1rem, 100vw + var(--jn-bleed) - var(--measure)));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

/* Cards: thin light outline on a faint fill, rounded like the PDF's panels */
.jn-card { padding: 1rem 1.2rem; border: 1px solid rgba(239, 233, 223, 0.6); border-radius: 10px; background: rgba(239, 233, 223, 0.05); }
.jn-card > * + * { margin-top: 0.8em; }
.case .jn-card ul { margin: 0.8em 0 0; padding-left: 1.1em; }
.jn-card li + li { margin-top: 0.3em; }

/* Text beside media */
.jn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.jn-split--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.jn-split--narrow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.jn-split--fog { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); }
.case-body > .jn-question--flush { margin-top: 1em; }
.jn-split > div > * + * { margin-top: 1.2em; }
.jn .jn-split .case-figure,
.jn .jn-split + .case-figure { padding-top: 0; }

/* 01 Start with */
.jn-insp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.jn-insp .case-figure { padding-top: 0; }
.jn-question { margin-top: 2.4em; font-size: 1.6rem; font-weight: 500; line-height: 1.3; color: var(--accent); }
.case-body > .jn-pill { margin-top: 1em; padding: 0.6em 1.2em; border: 1px solid var(--text); border-radius: 10px; text-align: center; }

.case .jn-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; margin: 1.6em 0 0; padding: 0; list-style: none; }
.jn-chain li { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 0.6rem; text-align: center; border: 3px solid #5a3384; border-radius: 50%; background: #8e84b0; color: #2b2142; font-weight: 500; }
.jn-chain li + li::before { content: ""; position: absolute; top: 50%; right: calc(100% + 3px); width: 1.4rem; height: 1px; background: rgba(239, 233, 223, 0.5); }

.jn-concl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.jn-concl .case-figure { padding-top: 0; }
.jn-concl img { border: 1px solid var(--text); background: #fff; }

.jn-spectrum { margin-top: 1.6em; padding: 1.4rem; border-radius: 10px; background: #4a3322; }
.jn-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1rem; }
.jn-stage { display: contents; }
.jn-stage__head { grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; align-items: center; align-content: start; padding: 0.8rem; border-radius: 6px; background: #5e4330; }
.jn-stage__head b { font-weight: 500; color: #fff; }
.jn-stage__head span { grid-column: 1; color: rgba(255, 255, 255, 0.72); }
.jn-icon { grid-column: 2; grid-row: 1 / span 2; width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.jn-axis { grid-row: 2; grid-column: 1 / -1; position: relative; height: 2px; margin: 1rem 0; background: linear-gradient(90deg, var(--jn-lilac), var(--accent)); }
.jn-axis::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--jn-lilac); transform: translateY(-50%); }
.jn-axis::after { content: ""; position: absolute; right: -2px; top: 50%; border-left: 10px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateY(-50%); }
.case .jn-stage ul { grid-row: 3; margin: 0; padding-left: 1.1em; }
.jn-stage ul li + li { margin-top: 0.35em; }
.jn-ends { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; gap: 0.8rem; align-items: center; margin-top: 1.6em; font-weight: 500; }
.jn-ends span:last-child { color: #fff; }
.jn-ends i { position: relative; height: 1px; background: var(--jn-lilac); }
.jn-ends i::before,
.jn-ends i::after { content: ""; position: absolute; top: 50%; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }
.jn-ends i::before { left: -1px; border-right: 8px solid var(--jn-lilac); }
.jn-ends i::after { right: -1px; border-left: 8px solid var(--jn-lilac); }

/* 02 Game flow map: the two levels as ribboned lists of stops */
.jn-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 2.4em; }
.jn-level__tag { font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #f0a5e6; }
.jn .jn-ribbon { display: inline-block; margin-top: 0.4em; padding: 0.35em 1.6em; background: #f6efb8; color: #1d1b17; clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%, 0.7em 50%); }
.jn .jn-ribbon::before { content: none; }
.case .jn-stops { margin: 1.2em 0 0; padding: 0; list-style: none; }
.jn-stops > li { padding: 0.9em 0; border-top: 1px solid var(--rule); }
.jn-stop__name { font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); }
.jn-level--river .jn-stop__name { color: #8fd3e8; }
.case .jn-stops p + p { margin-top: 0.2em; }
.case .jn-stops ul { margin: 0.5em 0 0; padding-left: 1.1em; color: var(--muted); }

/* 04 Interaction core: body parts coming online, joined by a line in the four spectrum colors */
.case .jn-parts { --jn-dot: 7.6rem; position: relative; margin: 1.6em 0 0; padding: 0; list-style: none; }
.jn-parts::before { content: ""; position: absolute; top: 3rem; bottom: 3rem; left: calc(var(--jn-dot) / 2 - 1px); width: 2px; background: linear-gradient(180deg, #e6dfb8, #e9a7b4 30%, #e9a7b4 60%, #d4673f 78%, #8fc3e8); }
.jn-part { position: relative; display: grid; grid-template-columns: var(--jn-dot) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.jn-part + .jn-part { margin-top: 1.2rem; }
.jn .jn-part > img { position: relative; width: var(--jn-dot); height: auto; aspect-ratio: 1; margin: 0; border-radius: 50%; object-fit: cover; }
.jn-part__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4em 1rem; }
.jn-part__where { font-weight: 500; color: #f0a5e6; }
.jn-chip { padding: 0 0.6em; border-radius: 4px; color: #1d1b17; background: var(--chip); }
.jn-chip--abstract { --chip: #e6dfb8; }
.jn-chip--rep { --chip: #e9a7b4; }
.jn-chip--embodied { --chip: #d4673f; }
.jn-chip--none { --chip: #8fc3e8; }
.jn .jn-part h3::before { content: none; }
.jn-part__lead { color: rgba(255, 255, 255, 0.75); }

/* 05 High Ground space: four game points, then the linear map arrow */
.jn-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.jn .jn-point > img { width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0; border-radius: 6px; object-fit: cover; }
.jn-point--tall > img { object-position: center 35%; }
.jn-point .jn-lead { font-size: 1.15rem; }
.jn-linear { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em 1rem; margin-top: 1.6em; color: var(--muted); }
.jn-linear i { position: relative; grid-column: 1 / -1; height: 1px; background: #c2552c; }
.jn-linear i::after { content: ""; position: absolute; right: -1px; top: 50%; border-left: 9px solid #c2552c; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transform: translateY(-50%); }
.jn-linear b { grid-column: 1 / -1; justify-self: center; font-weight: 500; color: var(--accent); }

/* 06 Game mechanics: numbered lilac tags, as in the PDF */
.jn-type span { display: block; color: var(--muted); }
.jn-mech { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.jn-mech .case-figure { padding-top: 0; }
.jn .jn-mech img { max-height: 30rem; object-fit: cover; object-position: center 20%; }
.jn-tag { display: inline-flex; align-items: baseline; gap: 0.6em; padding: 0.1em 0.8em; border-radius: 999px; background: #7b5fb0; color: #fff; font-weight: 500; }
.jn-tag span { font-weight: 400; opacity: 0.75; }
.jn-card > .jn-tag:not(:first-child) { margin-top: 1.4em; }
.jn-code { margin: 0; padding: 1rem 1.2rem; overflow-x: auto; border-radius: 8px; background: #1b1c20; color: #d4d4d4; font: 0.92rem/1.5 var(--font); }
.jn-code .k { color: #569cd6; }
.jn-code .t { color: #4ec9b0; }
.jn-code .s { color: #ce9178; }
.jn-code .c { color: #6a9955; }
.jn-code .f { color: #dcdcaa; }
.jn .jn-flock { width: 100%; max-width: 480px; height: auto; margin: 1.2em 0 0; border-radius: 4px; }

/* 08 Exhibition: headset views as 16:9 tiles */
.jn .jn-hmd img { aspect-ratio: 565 / 332; border-radius: 4px; }

/* 09 Feedback: quotes in the serif italic, underlined with an orange glow */
.case .jn-quotes { margin: 1.6em 0 0; padding: 0; list-style: none; }
.jn-quotes li { font-family: var(--jn-serif); font-style: italic; font-size: 2rem; line-height: 1.2; }
.jn-quotes li + li { margin-top: 0.7em; }
.jn-quotes q { background: linear-gradient(transparent 62%, rgba(255, 148, 71, 0.35) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.jn-photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem; align-items: end; }
.jn-photos .case-figure { padding-top: 0; }

@media (max-width: 768px) {
  .jn-page { --jn-bleed: -1rem; }
  .jn h2 { font-size: 2.6rem; }
  .case .jn-hero { padding: 3.6em 0 0; }
  .case .jn-hero h1 { font-size: 4rem; }
  .jn-hero .jn-hero__img {
    position: static; width: calc(100% + 2rem); height: auto; margin: 1.2em -1rem 0;
    aspect-ratio: 4 / 5; object-fit: cover; object-position: center 70%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%);
    mask-image: linear-gradient(180deg, transparent, #000 30%);
  }
  .case-section.jn-band { padding: 3.6em 0; }
  .jn-insp,
  .jn-concl,
  .jn-split,
  .jn-split--media,
  .jn-split--narrow,
  .jn-split--fog,
  .jn-levels,
  .jn-points,
  .jn-mech,
  .jn-photos { grid-template-columns: minmax(0, 1fr); }
  .case .jn-chain { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .jn-chain li { aspect-ratio: auto; border-radius: 999px; }
  .jn-chain li + li::before { top: auto; right: auto; bottom: calc(100% + 3px); left: 50%; width: 1px; height: 0.8rem; }
  .jn-spectrum { padding: 1rem; }
  .jn-stages { display: block; }
  .jn-stage { display: block; padding: 0 0 1.4rem 1rem; border-left: 2px solid; border-image: linear-gradient(180deg, var(--jn-lilac), var(--accent)) 1; }
  .jn-stage:last-child { padding-bottom: 0.2rem; }
  .jn-axis { display: none; }
  .case .jn-stage ul { margin-top: 0.8em; }
  .jn-ends { grid-template-columns: minmax(0, 1fr); gap: 0.4em; }
  .jn-ends i { display: none; }
  .jn-ends span:first-child::after { content: " ↓"; }
  .case .jn-parts { --jn-dot: 4.6rem; }
  .jn-part { align-items: start; gap: 0.8rem; }
  .jn-linear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jn-quotes li { font-size: 1.6rem; }
}