/* =============================================================
   KLYMB CASE STUDY — VERSION 2
   A light editorial page (the portfolio's identity) with dark
   product "stages" where they make the product glow. Crimson is
   KLYMB's identity accent, used only inside product contexts.

   Reusable presentation patterns (used across chapters for
   consistency — not reinvented per section):
     .chapter        editorial chapter shell + big index number
     .pull           serif transition line between chapters
     .stage          dark product presentation surface
     .screen         framed app screenshot (no device frame)
     .annotate       numbered callouts over a screen/artifact
     .compare        before → after
     .specimen       component / poster grid
   ============================================================= */

/* --- KLYMB identity tokens (scoped to the case study) ------ */
.cs {
  --klymb:        #F5354F; /* crimson — sampled from the product */
  --klymb-deep:   #C21F3A;
  --klymb-soft:   rgba(245, 53, 79, 0.14);

  --stage:        #0E0D11; /* near-black product ground */
  --stage-2:      #17141A;
  --stage-line:   rgba(255, 255, 255, 0.09);
  --stage-text:   #EDEAE6;
  --stage-dim:    rgba(237, 234, 230, 0.6);

  /* nutrition's own accent — sampled from the scan/log screens' mint
     green, used only for that feature's ambient glow */
  --nutrition:      #2ED9A4;
  --nutrition-soft: rgba(46, 217, 164, 0.20);

  --chapter-gap:  clamp(3.25rem, 6vw, 5.5rem);
}

/* =============================================================
   HERO (Chapter 00)
   Masthead beside one dark stage holding the single flagship
   screen (Home). One confident visual — no competing screens.
   ============================================================= */
.k-hero {
  padding-top: var(--space-6);
}

.k-hero__masthead {
  max-width: 52ch;
}

.k-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.k-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-3);
}

.k-hero__oneline {
  margin-top: var(--space-5);
  max-width: 40ch;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.k-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
}

.k-hero__meta div dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.k-hero__meta div dd {
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* the product hero — a premium black container with a crimson glow.
   Three screens stand on the floor and are pushed slightly past the
   container's own bottom edge, so the container works like a window:
   it crops the phones naturally rather than framing them completely.
   The container keeps its own rounded corners throughout. */
.k-hero__stage {
  position: relative;
  margin-top: var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) 0;
  min-height: clamp(360px, 48vh, 600px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(78% 60% at 50% 6%, rgba(245, 53, 79, 0.24), transparent 60%),
    radial-gradient(130% 90% at 50% 118%, rgba(245, 53, 79, 0.10), transparent 55%),
    var(--stage);
}

.k-hero__screens {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.5rem, 1.8vw, 1.4rem);
  width: 100%;
  max-width: 800px;
  /* push past the stage's bottom edge — overflow:hidden on the stage
     crops the very bottom of each phone, so the container reads as a
     window the devices continue behind, not a box that holds them. */
  transform: translateY(clamp(28px, 5vw, 56px));
}

.k-hero__screen { flex: 0 1 210px; }
.k-hero__screen--lead { flex-basis: 262px; z-index: 2; }
.k-hero__screen--side { flex-basis: 206px; opacity: 0.92; }

@media (min-width: 900px) {
  .k-hero__screen--lead { flex-basis: 300px; }
  .k-hero__screen--side { flex-basis: 232px; }
}

/* mobile: lead only — the side screens reappear in their own chapters */
@media (max-width: 560px) {
  .k-hero__stage { min-height: 0; padding-bottom: clamp(1rem, 4vw, 2rem); }
  .k-hero__screens .k-hero__screen--side { display: none; }
  .k-hero__screen--lead { flex-basis: 250px; }
}

/* =============================================================
   CHAPTER SHELL
   ============================================================= */
.chapter {
  padding-block: var(--chapter-gap);
}

/* Header: a big faint index number, an eyebrow, a title */
.chapter__head {
  max-width: 46ch;
  margin-bottom: var(--space-7);
}

.chapter__index {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.chapter__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.chapter__title {
  font-size: var(--text-2xl);
  margin-top: var(--space-2);
}

.chapter__lead {
  margin-top: var(--space-4);
  max-width: 52ch;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* a quieter beat — used once, for Icons, to break the left-aligned
   rhythm of the surrounding chapters */
.chapter__head--center {
  margin-inline: auto;
  text-align: center;
}
.chapter__head--center .chapter__lead { margin-inline: auto; }

/* tighter chapters (Role, Reflection) create rhythm against the big ones */
.chapter--tight {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Back link at the very top */
.cs-back {
  display: inline-flex;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* =============================================================
   ROLE — a quiet, confident scope statement
   ============================================================= */
.role__inner { max-width: 40ch; }

.role__statement {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* the opening statement of the case study — no label above it,
   the metadata row in the hero already covers "the role" */
.role__statement--open { margin-top: 0; }

/* =============================================================
   MOMENT — a product-thinking beat (screen + insight)
   ============================================================= */
.moment {
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.moment__insight {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .moment__insight {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.insight__kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.insight__statement {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-text);
  max-width: 20ch;
}

.insight__text {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  max-width: 42ch;
}

/* Product-thinking moment: the insight leads, the screen supports.
   Statement on one side, supporting evidence on the other. */
.pt {
  display: grid;
  gap: var(--space-6);
}

.pt__lead .insight__statement { max-width: 24ch; }

.pt__do {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--klymb);
  max-width: 44ch;
}

.pt__do-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.pt__do-text {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

@media (min-width: 880px) {
  .pt {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: center;
  }
  .pt--reverse .pt__lead { order: 2; }
  .pt--reverse .pt__evidence { order: 1; }
}

/* mascot moment: text leads on the left, the logo → mascot artifact
   sits beside it — a side-by-side beat, distinct from the full-width
   onboarding strip and the centred evolution compare above it */
.pt--mascot .pt__lead .insight__statement { max-width: 20ch; }
.pt--mascot .pt__lead .insight__text { margin-top: var(--space-5); }

@media (min-width: 880px) {
  .pt--mascot { grid-template-columns: 0.85fr 1.15fr; }
}

/* a centred lead used above the evolution and mascot moments */
.pt__lead--center {
  text-align: center;
  max-width: 42ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.pt__lead--center .insight__statement {
  max-width: none;
  margin-inline: auto;
}

/* the five real onboarding screens — shown individually, equal spacing,
   consistent phone styling (the same .screen frame used everywhere) */
.onboarding-stage { margin-top: var(--space-6); }

.onboarding-set {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  align-items: start;
}

.onboarding-set .screen {
  width: 100%;
  /* the base .screen radius is tuned to full-size phones (Home,
     Tracker); at this thumbnail width the same px radius reads
     proportionally larger, so it's scaled down to match */
  border-radius: clamp(10px, 1.6vw, 16px);
}

/* mobile / small: a contained scroll strip keeps each screen legible */
@media (max-width: 720px) {
  .onboarding-set {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    scroll-snap-type: x proximity;
  }
  .onboarding-set .screen { scroll-snap-align: start; }
}

.moment__caption {
  margin: var(--space-5) auto 0;
  max-width: 56ch;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

/* =============================================================
   PULL — the transition line that threads chapters together
   ============================================================= */
.pull {
  padding-block: var(--section-gap);
}

.pull__line {
  max-width: 24ch;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.pull--center .pull__line {
  margin-inline: auto;
  text-align: center;
}

/* =============================================================
   STAGE — dark product presentation surface
   ============================================================= */
.stage {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--klymb-soft), transparent 60%),
    var(--stage);
  color: var(--stage-text);
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* Full-bleed variant for immersive moments (breaks the container) */
.stage--bleed {
  border-radius: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--gutter);
}

/* A quiet label inside a stage */
.stage__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stage-dim);
}

/* =============================================================
   SCREEN — a framed app screenshot (rounded, subtle rim, shadow).
   Never a skeuomorphic device frame.
   ============================================================= */
.screen {
  position: relative;
  display: block;
  border-radius: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid var(--stage-line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  background: var(--stage-2);
}

.screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Crop to a region (e.g. the top of a long screen) */
.screen--crop {
  aspect-ratio: var(--crop, 1 / 1);
}

.screen--crop img {
  position: absolute;
  inset: 0;
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* On the light page (no stage), give a screen a soft ground */
.screen--light {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

/* =============================================================
   ANNOTATE — numbered callouts (static, Figma-style). Reused for
   the Home screen and the bug tracker. Pins sit on the edge of
   the asset and are keyed to a numbered legend, so alignment is
   forgiving and reads as documentation, not decoration.
   ============================================================= */
.annotate {
  display: grid;
  gap: var(--space-6);
}

.annotate__figure {
  position: relative;
}

/* numbered pin */
.annotate__pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--klymb);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  box-shadow: 0 0 0 4px rgba(245, 53, 79, 0.22);
}

/* legend list */
.annotate__legend {
  display: grid;
  gap: var(--space-4);
  align-self: center;
}

.annotate__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.annotate__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--klymb);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
}

.annotate__label {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.annotate__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* When the annotated figure sits on a dark stage, legend text flips */
.stage .annotate__label { color: var(--stage-text); }
.stage .annotate__desc  { color: var(--stage-dim); }

@media (min-width: 900px) {
  .annotate {
    grid-template-columns: 1fr minmax(260px, 340px);
    gap: var(--space-8);
    align-items: center;
  }
}

/* wide artifacts (e.g. the bug tracker): media on top, legend as a
   row of columns below */
.annotate--wide { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .annotate--wide .annotate__legend {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* =============================================================
   ECOSYSTEM DIAGRAM (generated, Figma-style, light)
   ============================================================= */
.cs-diagram {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: clamp(1rem, 3vw, 2rem);
}

.cs-diagram__svg { width: 100%; height: auto; }

.cs-diagram .eco-node rect {
  fill: var(--color-surface-soft);
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
}

.cs-diagram .eco-node text {
  fill: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-anchor: middle;
  dominant-baseline: middle;
}

.cs-diagram .eco-node--key rect {
  fill: var(--color-bg);
  stroke: var(--klymb);
  stroke-width: 1.6;
}

.cs-diagram .eco-node--key text {
  fill: var(--klymb-deep);
  font-weight: var(--weight-semibold);
  font-size: 16px;
}

.cs-diagram__caption {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

/* =============================================================
   COMPARE — before → after (composition tells the story)
   ============================================================= */
.compare {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.compare__item {
  display: grid;
  gap: var(--space-3);
}

.compare__tag {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stage-dim);
}

/* the arrow between before and after */
.compare__arrow {
  display: grid;
  place-items: center;
  color: var(--klymb);
}

.compare__arrow svg { width: 22px; height: 22px; }

@media (min-width: 720px) {
  .compare {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-5);
    align-items: center;
  }
  .compare__arrow svg { transform: rotate(0deg); }
}

/* stacked (mobile) arrow points down */
@media (max-width: 719px) {
  .compare__arrow svg { transform: rotate(90deg); }
}

/* =============================================================
   FEATURE — a product moment: dominant screen + short aside
   ============================================================= */
.feature__inner {
  display: grid;
  gap: var(--space-6);
}

.feature__aside {
  align-self: center;
}

.feature__kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.feature__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-2);
}

.feature__note {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  max-width: 42ch;
}

/* a small "decision" callout attached to a feature */
.decision {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--klymb);
}

.decision__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--klymb-deep);
}

.decision__text {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

@media (min-width: 880px) {
  .feature__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-9);
    align-items: center;
  }
  .feature--reverse .feature__aside { order: 2; }
  .feature--reverse .feature__media { order: 1; }
}

/* two screens shown side by side within a feature */
.feature__pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-3), 2vw, var(--space-5));
  width: 100%;
}

/* nutrition is image-first: give the screens real presence (comment 5) */
.feature--wide .feature__inner { grid-template-columns: 1fr; gap: var(--space-6); }
.feature--wide .feature__aside { max-width: 60ch; }

@media (min-width: 880px) {
  .feature--wide .feature__inner {
    grid-template-columns: 0.72fr 1.28fr;
    align-items: center;
    gap: var(--space-8);
  }
}

/* =============================================================
   SPECIMEN — component and poster grids
   ============================================================= */
/* Component cards (light/glassmorphic) on the dark stage */
.specimen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.specimen__card {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.specimen__card img { display: block; width: 100%; height: auto; }

/* the nav component spans the row but stays proportionate */
.specimen__full {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 540px;
}

@media (min-width: 720px) {
  .specimen { grid-template-columns: repeat(4, 1fr); }
  .specimen__wide { grid-column: span 2; }
}

/* system-in-context: a real screen beside the specimen */
.system__inner {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .system__inner {
    grid-template-columns: 1fr 260px;
    gap: var(--space-8);
    align-items: center;
  }
}

/* =============================================================
   ICONS — light showcase (the sheet lives on cream already)
   ============================================================= */
/* zoomed window into the real icon sheet (legible craft) */
.icons__zoom {
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: #F7F5EF; /* the sheet's own cream */
  background-image: url("../assets/klymb/more/icons.png");
  background-repeat: no-repeat;
  background-position: 8% 14%;
  background-size: auto 340%;
}

.icons__sheet {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.icons__sheet img { display: block; width: 100%; height: auto; }

.icons__caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.icons__obs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}

.icons__obs li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.icons__obs li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--klymb);
}

/* =============================================================
   ENGINEERING — the bug tracker, shown large and readable
   (same treatment as the icon sheet, for consistency).
   ============================================================= */
.tracker-sheet {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.tracker-sheet img { display: block; width: 100%; height: auto; }

.tracker-sheet__caption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* =============================================================
   PROPOSAL — the mascot idea: logo → arrow → mascot concept, sitting
   beside the insight text (.pt--mascot). Deliberately unboxed — the
   glyphs breathe on one shared canvas rather than sitting in their
   own exported-asset tiles, so it reads as a sketch of an idea, not
   a component inventory.
   ============================================================= */
.proposal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-3), 4vw, var(--space-6));
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 2.5rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.proposal__glyph {
  flex: 0 0 auto;
  width: clamp(72px, 15vw, 116px);
}

.proposal__glyph img {
  display: block;
  width: 100%;
  height: auto;
}

/* the concept is the initiative — give it the greater weight, and a
   slight tilt, like it was pinned up rather than exported */
.proposal__glyph--concept {
  width: clamp(104px, 22vw, 168px);
  transform: rotate(-3deg);
}

.proposal__arrow { color: var(--klymb); flex: 0 0 auto; }
.proposal__arrow svg { width: 20px; height: 20px; }

/* =============================================================
   CORE EXPERIENCE — two full, uncropped product screens
   ============================================================= */
.exp__screens {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.exp__screen {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .exp__screens { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* =============================================================
   NUTRITION — the two ways to log a meal, shown full-width at the
   same scale as the Icon Set and Bug Tracker sheets, with a mint
   ambient glow (nutrition's own accent, not KLYMB crimson).
   ============================================================= */
/* wider than the default feature__note (42ch) so the paragraph doesn't
   wrap into noticeably more lines than the chapter leads around it */
.nutrition-text { margin-top: var(--chapter-gap); max-width: 54ch; }
.nutrition-text .feature__note { max-width: none; }

.nutrition-showcase {
  margin-top: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 5vw, 3.5rem);
  background:
    radial-gradient(70% 65% at 50% 0%, var(--nutrition-soft), transparent 62%),
    var(--stage);
}

.nutrition-showcase .screen {
  flex: 1 1 240px;
  max-width: 300px;
}

/* =============================================================
   SHARE CARDS — a curated, premium set inside a dark stage
   ============================================================= */
.share-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.share-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.share-card img { display: block; width: 100%; height: auto; }

@media (min-width: 720px) {
  .share-set { grid-template-columns: 1fr 1fr; align-items: start; }
  .share-card--wide {
    grid-column: 1 / -1;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
}

/* =============================================================
   DESIGN SYSTEM — the real components, organised into groups on a
   dark stage (they are glassmorphic, so they need a dark ground).
   Every component sits in an identical tile: same radius, same
   border, same padding — the presentation is the system.
   ============================================================= */
.ds { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }

.ds-group { display: grid; gap: var(--space-5); }

.ds-group__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stage-dim);
}

.ds-grid { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }

.ds-item {
  display: grid;
  place-items: center;
  padding: clamp(0.85rem, 2vw, 1.35rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--stage-line);
  background: var(--stage-2);
}

.ds-item img { display: block; width: 100%; height: auto; }

.ds-item--span { grid-column: 1 / -1; }
.ds-item--span img { max-width: 460px; }

/* per-group column counts */
.ds-grid--forms  { grid-template-columns: 1fr; }
.ds-grid--nav    { grid-template-columns: 1fr; }
/* four charts, always 2×2 — larger and more readable than a five-up row */
.ds-grid--charts { grid-template-columns: repeat(2, 1fr); }
.ds-grid--cards  { grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .ds-grid--forms { grid-template-columns: 1fr 1fr; }
  .ds-grid--nav   { grid-template-columns: 1fr 1fr; }
  .ds-grid--cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .ds-grid--cards  { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   TURNING POINT (comment 8) — engineering announces a shift
   ============================================================= */
.chapter--turn {
  padding-top: calc(var(--chapter-gap) + var(--space-6));
}

.chapter--turn .chapter__title {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  max-width: 18ch;
}

.chapter--turn .chapter__lead {
  font-size: var(--text-xl);
  max-width: 46ch;
}

/* =============================================================
   REFLECTION + PROJECT TRANSITION (comment 11)
   A confident closing statement that hands off, without a gap.
   ============================================================= */
.reflection { padding-bottom: var(--space-6); }

.reflection__inner { max-width: 60ch; }

.reflection__title {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
}

.reflection__text {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.project-nav {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-8);
}

.project-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
}

.project-nav__next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.project-nav__next-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.project-nav__next-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  transition: color var(--dur) var(--ease);
}

.project-nav__next:hover .project-nav__next-name { color: var(--klymb); }