/* ==========================================================================
   Case-study layer. Loaded after site.css on project pages only.
   ========================================================================== */

.project { padding-top: clamp(3rem, 2rem + 5vw, 6rem); }

.project__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.project__back:hover { color: var(--ink); gap: 0.75rem; }
.project__back::before { content: '\2190'; }

.project__title {
  margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: var(--step-5);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.94;
  max-width: 15ch;
}

.project__standfirst {
  margin-top: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* --- Credits ------------------------------------------------------------- */

.credits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-top: 1px solid var(--rule-strong);
}

.credit { padding-block: 1.35rem; border-bottom: 1px solid var(--rule); }
.credit__label {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}
.credit__value { font-size: var(--step-0); font-weight: 500; }
.credit__value--lead {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.credit ul { list-style: none; margin: 0; padding: 0; }
.credit li { padding-block: 0.12rem; }
.credit--out .credit__value,
.credit--out li { color: var(--ink-faint); font-weight: 400; }

/* --- Figures -------------------------------------------------------------- */

.figure { margin: 0; }
.figure img { width: 100%; }

/* Full-bleed figures sit outside .shell already, so they inherit the full
   content width. Using 100vw here would add the scrollbar's width and push
   the image (and its caption) a few pixels off-axis. */
.figure--bleed {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

.figure__caption {
  margin-top: 0.85rem;
  font-size: var(--step--1);
  color: var(--ink-faint);
  max-width: 58ch;
}
.figure--bleed .figure__caption {
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.plate { display: grid; gap: clamp(0.5rem, 1.5vw, 1rem); }
.plate--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.plate--4 { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 45%), 1fr)); }

.plate img { width: 100%; background: var(--bg-sunk); }

/* ==========================================================================
   Creatures. Cut out with their alpha intact so they sit on the page itself
   rather than inside a visible box. Never give these a background.
   ========================================================================== */

.critters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 40%), 1fr));
  gap: clamp(0.5rem, 2vw, 2rem);
  align-items: end;
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.critters img {
  width: 100%;
  height: auto;
  background: none;
  /* The renders carry no contact shadow, so the page supplies one. */
  filter: drop-shadow(0 14px 18px oklch(0.18 0.02 255 / 0.16));
}

/* A loose, uneven line of them: a parade, not a specimen chart. */
.critter-parade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.25rem, 1.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.critter-parade img {
  width: clamp(4.5rem, 8vw, 9rem);
  height: auto;
  background: none;
  filter: drop-shadow(0 10px 14px oklch(0.18 0.02 255 / 0.14));
  transition: transform 520ms var(--ease-out);
}
.critter-parade img:nth-child(even) { align-self: flex-start; }
.critter-parade img:hover { transform: translateY(-0.6rem) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .critter-parade img { transition: none; }
  .critter-parade img:hover { transform: none; }
}

/* --- Chapters ------------------------------------------------------------- */

.chapter { padding-block: clamp(2.75rem, 2rem + 4vw, 6rem); }
.chapter + .chapter { border-top: 1px solid var(--rule); }

.chapter__title {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.036em;
  max-width: 22ch;
}

.chapter__body {
  margin-top: 1.5rem;
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.018em;
  max-width: var(--measure);
  display: grid;
  gap: 1.05em;
  color: var(--ink-soft);
}
.chapter__body strong { color: var(--ink); font-weight: 500; }

.chapter__media { margin-top: clamp(1.75rem, 1rem + 3vw, 3.5rem); }

/* --- The design question -------------------------------------------------- */

.question {
  margin-top: clamp(1.75rem, 1rem + 3vw, 3rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem) 0;
  border-block: 1px solid var(--rule-strong);
}
.question p {
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: 24ch;
}
.question p::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}

/* --- Visitor journey. Numbered because it genuinely is a sequence. -------- */

.journey {
  list-style: none;
  margin: clamp(1.75rem, 1rem + 3vw, 3rem) 0 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}
/* Eight steps: two even rows rather than an orphaned tail. */
@media (min-width: 34rem) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .journey { grid-template-columns: repeat(4, 1fr); } }

.journey li {
  counter-increment: step;
  padding: 1.35rem 1.5rem 1.6rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.journey li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent-ink);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.journey b { display: block; font-weight: 500; letter-spacing: -0.018em; }
.journey span { display: block; font-size: var(--step--1); color: var(--ink-faint); margin-top: 0.3rem; }

/* --- Draft notice --------------------------------------------------------- */

.draft {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  background: var(--bg-sunk);
  border: 1px dashed var(--rule-strong);
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: var(--measure);
}
.draft b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 0.4rem; }
.draft ul { margin: 0.6rem 0 0; padding-left: 1.15rem; }
.draft li { padding-block: 0.15rem; }

/* --- Next project --------------------------------------------------------- */

.next { border-top: 1px solid var(--rule-strong); }
.next__link {
  display: block;
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
}
.next__label { font-size: var(--step--1); color: var(--ink-faint); }
.next__name {
  font-size: var(--step-4);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-top: 0.4rem;
  transition: color var(--dur) var(--ease-out);
}
.next__link:hover .next__name { color: var(--accent-ink); }