/* ---------------------------------------------------------------- */
/* Fonts (self-hosted)                                               */
/* ---------------------------------------------------------------- */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------- */
/* Design tokens                                                     */
/* ---------------------------------------------------------------- */

:root {
  /* colour */
  --bone:       #F4EFE6;  /* page background. NEVER substitute white */
  --bone-deep:  #EAE3D6;  /* image fields, secondary surfaces */
  --ink:        #1A1613;  /* body text, inverted section backgrounds */
  --ink-soft:   #3D3630;  /* secondary text */
  --muted:      #8A8175;  /* metadata, captions, Yakabod accent */
  --vermillion: #C1392B;  /* primary accent, Multimedia accent */
  --jade:       #1F5C4A;  /* Harmony accent */
  --ochre:      #D89B2C;  /* Herakify accent */
  --border:     #D6CDBE;  /* hairlines, dividers */

  /* spacing — 8px base */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   48px;
  --space-xl:  96px;
  --space-xl2:129px;  /* measured project-band gap; the 96→192 step is too coarse here */
  --space-2xl:192px;

  /* radius */
  --radius-none: 0;
  --radius-sm:   4px;
}

/* ---------------------------------------------------------------- */
/* Reset                                                              */
/* ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------- */
/* Type scale                                                        */
/* ---------------------------------------------------------------- */

.display-xl {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.display-l {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.h1 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
}

.h2 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
}

.h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
}

.body-l {
  font-family: "Archivo", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
}

.body {
  font-family: "Archivo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
}

.body-s {
  font-family: "Archivo", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
}

.label {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.meta {
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  .display-xl { font-size: clamp(128px, 11vw, 156px); } /* exceeds build-spec's 120px intentionally — see CLAUDE.md */
  .display-l  { font-size: 80px; }
  .h1         { font-size: 56px; }
  .h2         { font-size: 36px; }
  .h3         { font-size: 22px; }
  .body-l     { font-size: 20px; }
  .body       { font-size: 17px; }
  .body-s     { font-size: 15px; }
}

/* Body copy max width — the "reading column" */
.reading-column {
  max-width: 640px;
}

/* ---------------------------------------------------------------- */
/* Grid                                                               */
/* ---------------------------------------------------------------- */

.grid {
  display: grid;
  width: 100%;
  margin-inline: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-inline: 24px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    padding-inline: 48px;
  }
}

@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    padding-inline: clamp(24px, 4vw, 48px);
    max-width: 1680px; /* intentionally wider than build-spec's 1240px column — see CLAUDE.md */
  }
}

/* ---------------------------------------------------------------- */
/* Nav                                                                */
/* ---------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  background: var(--bone);
  height: 72px;
}

.nav__inner {
  width: 100%;
  max-width: 1680px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .nav__inner {
    padding: 0 48px;
  }
}

@media (min-width: 1200px) {
  .nav__inner {
    padding: 0 clamp(24px, 4vw, 48px);
  }
}

.nav__logo {
  white-space: nowrap;
}

.nav__links {
  display: flex;
  gap: 32px;
}

.nav a {
  position: relative;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.nav a:hover {
  color: var(--vermillion);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.nav__toggle-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.nav__toggle.is-active .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle.is-active .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-active .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 767.98px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bone);
    border-top: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease-out;
  }

  .nav__links.is-open {
    max-height: 320px;
  }

  .nav__links li {
    border-bottom: 1px solid var(--border);
  }

  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 24px;
  }

  .nav a::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links,
  .nav__toggle-bar {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */

.hero {
  padding-block: var(--space-l) var(--space-2xl);
  row-gap: 28px; /* tightened for the stacked layout so text and jaguar read as one block */
}

.hero__intro {
  grid-column: 1 / -1;
}

.hero__name {
  color: var(--ink);
  text-transform: uppercase;
  max-width: 9ch;
}

.hero__tagline {
  margin-top: var(--space-m);
  font-size: 22px; /* larger than .body-l's 17px — see CLAUDE.md intentional divergences */
}

@media (min-width: 768px) {
  .hero__tagline {
    font-size: 28px;
  }
}

.hero__meta {
  margin-top: var(--space-m);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 14px; /* larger than .meta's 12px, at the mono ≤14px ceiling — see CLAUDE.md */
}

.hero__image {
  grid-column: 1 / -1;
}

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

.hero__caption {
  margin-top: var(--space-s);
  color: var(--muted);
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  .hero {
    align-items: start;
    padding-block: 196px 193px; /* measured: nav→name gap, hero→"Selected Work" gap */
    /* capped tracks instead of 12-col fractions: at 1680px, 6/12-column spans leave a
       growing dead gap between text and jaguar since neither fills its fractional
       share. Capping intro/image and letting a trailing 1fr track absorb the extra
       width keeps the pair grouped together regardless of container width. */
    grid-template-columns: minmax(0, 680px) minmax(0, 420px) 1fr;
  }

  .hero__intro {
    grid-column: 1 / 2;
  }

  .hero__image {
    /* spans the jaguar's own track plus the trailing 1fr spacer, then
       centers within that combined space so it isn't hugging the left
       edge of its 420px track with dead space to its right */
    grid-column: 2 / -1;
    display: flex;
    justify-content: center;
  }

  .hero__image-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
  }

  .hero__image img {
    width: auto;
    max-width: 100%;
    max-height: var(--hero-image-cap, 356px);
  }
}

/* ---------------------------------------------------------------- */
/* Selected Work                                                     */
/* ---------------------------------------------------------------- */

.work {
  padding-bottom: var(--space-2xl);
  scroll-margin-top: calc(72px + var(--space-m));
}

.work__label {
  grid-column: 1 / -1;
  color: var(--vermillion);
  margin-bottom: 51px; /* measured: label → first band */
}

/* ---------------------------------------------------------------- */
/* Two-tone image field                                              */
/* ---------------------------------------------------------------- */

.two-tone-field {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(
    to right,
    var(--bone-deep) 0%,
    var(--bone-deep) 39%,
    var(--accent) 39%,
    var(--accent) 100%
  );
}

.two-tone-field img {
  position: absolute;
  top: 50%;
  left: 42%;
  height: 85%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transition: transform 300ms ease-out;
}

/* Self-contained bone-panel graphics (not a phone mockup meant to
   straddle the two-tone split) should sit truly centred instead of at
   the 42% straddle point — see CLAUDE.md, yak-challenge-2.png. */
.two-tone-field--centered img {
  left: 50%;
}

/* ---------------------------------------------------------------- */
/* Project mark                                                      */
/* ---------------------------------------------------------------- */

.project-mark {
  width: 56px;
  height: 56px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-mark img {
  width: auto;
  height: auto;
  max-width: 50.4px; /* 90% of the 56px square, sized by the glyph's larger dimension */
  max-height: 50.4px;
}

/* ---------------------------------------------------------------- */
/* Skill chip                                                        */
/* ---------------------------------------------------------------- */

.chip {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- */
/* Project band                                                      */
/* ---------------------------------------------------------------- */

.project-band {
  row-gap: var(--space-m);
}

.project-band + .project-band {
  margin-top: var(--space-xl2); /* measured: gap between bands */
}

.project-band__link {
  display: contents;
  color: inherit;
}

.project-band__field {
  grid-column: 1 / -1;
}

.project-band__content {
  grid-column: 1 / -1;
}

.project-band__category {
  color: var(--muted);
  margin-top: 19px; /* measured: mark → category */
}

.project-band__headline {
  margin-top: 27px; /* measured: category → headline */
}

.project-band__name {
  color: var(--muted);
  margin-top: 20px; /* measured: headline → project name */
}

.project-band__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: 20px; /* measured: project name → chips */
}

.project-band__cta {
  position: relative;
  display: inline-block;
  color: var(--accent);
  margin-top: 27px; /* measured: chips → link */
}

.project-band__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease-out;
}

.project-band__link:hover .project-band__cta::after {
  transform: scaleX(1);
}

.project-band__link:hover .two-tone-field img {
  transform: translate(-50%, -50%) scale(1.03);
}

@media (min-width: 768px) {
  .project-band__field,
  .project-band__content {
    grid-row: 1;
  }

  .project-band__field {
    grid-column: 1 / 6;
  }

  .project-band__content {
    grid-column: 6 / 9;
    align-self: center;
  }

  .project-band--reverse .project-band__field {
    grid-column: 4 / 9;
  }

  .project-band--reverse .project-band__content {
    grid-column: 1 / 4;
  }
}

@media (min-width: 1200px) {
  .project-band__field {
    grid-column: 1 / 8;
  }

  .project-band__content {
    grid-column: 8 / 13;
  }

  .project-band--reverse .project-band__field {
    grid-column: 6 / 13;
  }

  .project-band--reverse .project-band__content {
    grid-column: 1 / 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .two-tone-field img,
  .project-band__cta::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* About strip                                                       */
/* ---------------------------------------------------------------- */

.about {
  background: var(--ink);
  color: var(--bone);
  padding-block: 94px; /* measured: About strip internal top/bottom padding */
  padding-inline: 24px;
}

.about__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1680px; /* widened to match the site container — see CLAUDE.md */
  margin-inline: auto;
}

.about__image {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

.about__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.about__content {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
}

.about__label {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--vermillion);
}

.about__paragraph {
  margin-top: var(--space-m);
  line-height: 1.5;
  font-size: 19px; /* matches ashleyto-reference.png proportions — see CLAUDE.md */
}

@media (min-width: 768px) {
  .about {
    padding-inline: 48px;
  }

  .about__inner {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .about {
    padding-inline: clamp(24px, 4vw, 48px);
  }

  .about__inner {
    /* measured off assets/ashleyto-reference.png: text starts 9% in and
       runs 40% of the panel width; the remaining ~51% is the portrait's
       zone, with the image contained/centred inside it rather than
       full-bleed like the reference — see CLAUDE.md */
    grid-template-columns: 9% 40% 1fr;
    align-items: center;
  }

  .about__image,
  .about__content {
    grid-row: 1;
  }

  .about__image {
    grid-column: 3 / 4;
    height: 100%;
  }

  .about__image img {
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 520px;
  }

  .about__content {
    grid-column: 2 / 3;
    margin-top: 0;
  }

  .about__paragraph {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------------- */
/* Footer                                                            */
/* ---------------------------------------------------------------- */

.footer {
  padding-block: 26px var(--space-m); /* measured: About strip → footer */
}

.footer__links {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__copyright {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer__links {
    flex-direction: row;
    gap: var(--space-m);
  }
}

/* ================================================================== */
/* Case study template — reusable for Herakify / Harmony / Yakabod.    */
/* Set --accent on <main class="case-study"> to reskin. No             */
/* project-specific selectors below; content differs only via markup.  */
/* ================================================================== */

/* ---------------------------------------------------------------- */
/* Scroll reveal (build-spec §4)                                     */
/* ---------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Case intro                                                        */
/* ---------------------------------------------------------------- */

.case-intro {
  padding-block: 196px var(--space-xl); /* 196px matches the homepage's measured nav→content gap */
  row-gap: var(--space-l);
}

.case-intro__content {
  grid-column: 1 / -1;
}

.case-intro__back {
  display: inline-block;
  color: var(--muted);
}

/* mark sits above the eyebrow (back → mark → eyebrow → title), reading as
   a project badge — intentional divergence from the Figma order, see
   CLAUDE.md. Scoped to this context so the shared .project-mark component
   itself stays untouched. */
.case-intro__content .project-mark {
  margin-top: var(--space-l);
}

.case-intro__category {
  color: var(--muted);
  margin-top: var(--space-m);
}

.case-intro__title {
  margin-top: var(--space-s);
  color: var(--ink);
}

.case-intro__description {
  margin-top: var(--space-m);
}

.case-intro__field {
  grid-column: 1 / -1;
  margin-top: var(--space-l);
}

.two-tone-field--intro {
  aspect-ratio: 1 / 1;
}

@media (min-width: 1200px) {
  .case-intro {
    align-items: start;
  }

  .case-intro__content,
  .case-intro__field {
    grid-row: 1;
  }

  .case-intro__content {
    grid-column: 1 / 8;
  }

  .case-intro__field {
    grid-column: 8 / 13;
    margin-top: 0;
  }

  .two-tone-field--intro {
    aspect-ratio: 4 / 5;
  }
}

/* ---------------------------------------------------------------- */
/* Details strip                                                     */
/* ---------------------------------------------------------------- */

.details-strip {
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-l) 0 0 1px;
}

.details-strip__cell {
  border: 1px solid var(--border);
  margin: -1px 0 0 -1px;
  padding: var(--space-m);
}

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

.details-strip__value {
  color: var(--ink);
  margin-top: var(--space-2xs);
}

@media (min-width: 480px) {
  .details-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .details-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------------------------------------------------------------- */
/* Section marker                                                    */
/* ---------------------------------------------------------------- */

.section-marker {
  color: var(--ink);
}

.section-marker__num {
  color: var(--accent);
}

/* ---------------------------------------------------------------- */
/* Content section (Challenge / Solution)                            */
/* ---------------------------------------------------------------- */

.content-section {
  padding-top: var(--space-xl);
  row-gap: var(--space-m);
}

.content-section__text {
  grid-column: 1 / -1;
}

.content-section__heading {
  margin-top: var(--space-xs);
  color: var(--ink);
}

.content-section__body {
  margin-top: var(--space-m);
}

.content-section__field {
  grid-column: 1 / -1;
  margin-top: var(--space-l);
}

.content-section__text--solution {
  margin-top: var(--space-xl);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

@media (min-width: 1200px) {
  .content-section {
    align-items: start;
  }

  .content-section__text {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .content-section__text--solution {
    grid-row: 2;
    margin-top: var(--space-l);
  }

  .content-section__field {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------- */
/* Solution feature bands — full-bleed accent, edge to edge           */
/* ---------------------------------------------------------------- */

.feature-bands {
  background: var(--accent);
  margin-top: var(--space-xl);
}

.feature-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: var(--space-xl);
  align-items: center;
}

.feature-band__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 280px;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.feature-band__text {
  margin-top: var(--space-l);
}

.feature-band__heading {
  color: var(--bone);
}

.feature-band__description {
  color: var(--bone);
  opacity: 0.8;
  margin-top: var(--space-m);
  max-width: 480px;
}

@media (min-width: 768px) {
  .feature-band {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
    padding-inline: 48px;
  }
}

@media (min-width: 1200px) {
  .feature-band {
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    padding-inline: clamp(24px, 4vw, 48px);
  }

  .feature-band__media,
  .feature-band__text {
    grid-row: 1;
  }

  .feature-band__media {
    grid-column: 1 / 6;
  }

  .feature-band__text {
    grid-column: 7 / 13;
    margin-top: 0;
  }

  .feature-band--reverse .feature-band__media {
    grid-column: 8 / 13;
  }

  .feature-band--reverse .feature-band__text {
    grid-column: 1 / 7;
    padding-left: var(--space-xl);
  }
}

/* ---------------------------------------------------------------- */
/* Impact                                                             */
/* ---------------------------------------------------------------- */

.impact {
  padding-block: var(--space-xl);
  row-gap: var(--space-l);
}

.impact__intro {
  grid-column: 1 / -1;
}

.impact__heading {
  margin-top: var(--space-xs);
  color: var(--ink);
}

.impact__metrics {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.metric-block__number {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
}

.metric-block__label {
  color: var(--muted);
  margin-top: var(--space-xs);
}

.impact__details {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
}

.impact__body {
  max-width: 640px;
}

.learned {
  margin-top: var(--space-l);
  border-left: 3px solid var(--accent);
  padding-left: var(--space-m);
  max-width: 640px;
}

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

.learned__body {
  margin-top: var(--space-xs);
  font-size: 17px;
}

@media (min-width: 768px) {
  .impact__metrics {
    flex-direction: row;
    gap: var(--space-xl);
  }

  .metric-block {
    flex: 1;
  }

  .metric-block__number {
    font-size: 56px;
  }
}

@media (min-width: 1200px) {
  .impact__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-xl);
    align-items: start;
  }

  .learned {
    margin-top: 0;
  }
}

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

.next-project {
  background: var(--bone-deep);
  padding-block: var(--space-xl);
}

.next-project__inner {
  row-gap: var(--space-xs);
}

.next-project__label {
  grid-column: 1 / -1;
  color: var(--muted);
}

.next-project__heading-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-xs);
}

.next-project__title {
  color: var(--ink);
}

.next-project__tagline {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  margin-top: var(--space-xs);
}

.next-project__link {
  grid-column: 1 / -1;
  color: var(--accent);
  margin-top: var(--space-m);
  display: inline-block;
  width: fit-content;
}

/* ---------------------------------------------------------------- */
/* Multimedia gallery — distinct page structure (accent: vermillion) */
/* ---------------------------------------------------------------- */

.gallery-intro {
  padding-block: 196px var(--space-l);
  row-gap: 0;
}

.gallery-intro__back {
  grid-column: 1 / -1;
  color: var(--muted);
}

.gallery-intro__category {
  grid-column: 1 / -1;
  color: var(--muted);
  margin-top: var(--space-m);
}

.gallery-intro .project-mark {
  grid-column: 1 / -1;
  margin-top: var(--space-s);
}

.gallery-intro__title {
  grid-column: 1 / -1;
  color: var(--ink);
  margin-top: var(--space-s);
}

.gallery-intro__description {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
}

.details-strip--3 {
  margin-top: var(--space-l);
}

@media (min-width: 1200px) {
  .details-strip--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-label {
  grid-column: 1 / -1;
  color: var(--accent);
}

/* Motion */

.motion {
  padding-block: var(--space-xl) 0;
}

.motion__media {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  /* multimedia-animation.png is native 882x494 — capping here keeps it at
     or under 1x so it doesn't upscale/soften; see CLAUDE.md. A higher-res
     export would be needed to safely go wider or support retina. */
  max-width: 882px;
  margin-inline: auto;
}

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

.motion__caption {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  flex-wrap: wrap;
}

.motion__title {
  color: var(--ink);
}

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

.motion__description {
  grid-column: 1 / -1;
  margin-top: var(--space-s);
  color: var(--ink-soft);
}

/* Visual systems triptych */

.visual-systems {
  padding-block: var(--space-xl) 0;
}

.triptych {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.triptych__item {
  min-width: 0;
}

.triptych__item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.triptych__caption {
  margin-top: var(--space-xs);
  color: var(--muted);
}

.visual-systems__description {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  color: var(--ink-soft);
}

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

/* Illustration & photography */

.illustration-photo {
  padding-block: var(--space-xl) var(--space-2xl);
}

.duo {
  grid-column: 1 / -1;
  margin-top: var(--space-m);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.duo__item {
  min-width: 0;
}

.duo__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.duo__item figcaption {
  margin-top: var(--space-m);
}

.duo__title {
  color: var(--ink);
}

.duo__meta {
  color: var(--muted);
  margin-top: var(--space-2xs);
}

.duo__description {
  color: var(--ink-soft);
  margin-top: var(--space-s);
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-l);
  }

  .duo__item--offset {
    margin-top: 64px;
  }
}