:root {
  --ink: #07111a;
  --ink-soft: rgba(7, 17, 26, 0.86);
  --ink-glass: rgba(6, 17, 25, 0.7);
  --cream: #f3e7d1;
  --cream-soft: rgba(243, 231, 209, 0.76);
  --cream-faint: rgba(243, 231, 209, 0.45);
  --line: rgba(243, 231, 209, 0.26);
  --cyan: #79dde1;
  --cyan-soft: rgba(121, 221, 225, 0.38);
  --amber: #efa977;
  --serif: "Bodoni 72", Didot, "Didot LT STD", "Baskerville", Georgia, serif;
  --sans: Avenir, "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  --scroll-y: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  color: var(--ink);
  background: var(--cream);
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.scene,
.scene__plate,
.scene__light,
.scene__grain,
.scene__shade {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene {
  z-index: 0;
  overflow: hidden;
  background: #315f76;
}

/* One painted Los Angeles plate per chapter. The active plate crossfades in as its
   chapter takes over the screen; the pointer adds a gentle drift. Plates never slice or
   tile, so no seams can appear while scrolling. */
.scene__plate {
  inset: -4vh -3vw;
  background-position: var(--plate-x, center) center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: translate3d(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 6px), 0) scale(1.05);
  transition: opacity 1200ms ease, transform 700ms ease-out;
  will-change: opacity, transform;
}

.scene__plate.is-active {
  opacity: 1;
}

/* Opening chapter: the hills, downtown, and sky move at different speeds.
   Interim version cut from one painting: bands overlap with feathered masks instead of
   hard edges, and the motion is capped to the first screen and a half. The page switches
   to the next chapter's painting before the bands can drift far enough to show a seam.
   Purpose-painted layers will replace these bands (see the About parallax art brief). */
.scene__plate--hillside {
  inset: 0;
  transform: none;
}

.scene__band {
  position: absolute;
  inset: -5vh -4vw;
  background-image: url("./scenes/01-hillside-sunset.jpg");
  background-position: var(--plate-x, center) center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
  --hero-scroll: min(var(--scroll-y), 1400);
}

.scene__band--base {
  transform: translate3d(calc(var(--pointer-x) * 3px), calc(var(--pointer-y) * 2px), 0) scale(1.04);
}

.scene__band--sky {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 52%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 52%);
  transform: translate3d(
      calc(var(--pointer-x) * 4px),
      calc(var(--hero-scroll) * -0.018px + var(--pointer-y) * 3px),
      0
    )
    scale(1.055);
}

.scene__band--city {
  -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 47%, #000 70%, transparent 79%);
  mask-image: linear-gradient(180deg, transparent 38%, #000 47%, #000 70%, transparent 79%);
  transform: translate3d(
      calc(var(--pointer-x) * 8px),
      calc(var(--hero-scroll) * -0.038px + var(--pointer-y) * 5px),
      0
    )
    scale(1.065);
}

.scene__band--hills {
  -webkit-mask-image: linear-gradient(176deg, transparent 50%, #000 61%);
  mask-image: linear-gradient(176deg, transparent 50%, #000 61%);
  transform: translate3d(
      calc(var(--pointer-x) * 13px),
      calc(var(--hero-scroll) * -0.068px + var(--pointer-y) * 8px),
      0
    )
    scale(1.085);
}

.scene__plate--hollywood {
  background-image: url("./scenes/02-hollywood-hills-golden-hour.jpg");
}

.scene__plate--echo-park {
  background-image: url("./scenes/03-echo-park-evening.jpg");
}

.scene__plate--night {
  background-image: url("./scenes/04-downtown-night.jpg");
}

.scene__plate--rooftop {
  background-image: url("./scenes/05-rooftop-sunset.jpg");
}

.scene__light {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 220, 170, 0.21), transparent 35%),
    linear-gradient(180deg, rgba(3, 12, 18, 0.02) 0%, rgba(3, 12, 18, 0.12) 58%, rgba(3, 12, 18, 0.55) 100%);
  mix-blend-mode: soft-light;
}

.scene__shade {
  background:
    linear-gradient(90deg, rgba(3, 12, 18, 0.46), transparent 27%, transparent 68%, rgba(3, 12, 18, 0.14)),
    linear-gradient(180deg, rgba(4, 13, 20, 0.22), transparent 34%, rgba(4, 13, 20, 0.3));
}

.scene__grain {
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 76px;
  padding: 0 3vw;
  border-bottom: 1px solid rgba(243, 231, 209, 0.15);
  background: linear-gradient(180deg, rgba(4, 13, 20, 0.46), transparent);
  backdrop-filter: blur(7px);
}

.wordmark,
.site-nav a,
.return-link {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-family: var(--mono);
  font-size: 0.63rem;
}

.wordmark {
  justify-self: start;
  font-weight: 700;
  letter-spacing: 0.42em;
}

.site-nav {
  display: flex;
  gap: clamp(1.2rem, 3vw, 3.5rem);
}

.site-nav a,
.return-link {
  position: relative;
  color: var(--cream-soft);
  transition: color 180ms ease;
}

.site-nav a::after,
.return-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.55rem;
  height: 1px;
  background: var(--cyan);
  transition: right 220ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.return-link:hover,
.return-link:focus-visible {
  color: var(--cream);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.return-link:hover::after,
.return-link:focus-visible::after {
  right: 0;
}

.return-link {
  justify-self: end;
  padding: 0.72rem 1rem;
  border: 1px solid var(--line);
}

.progress {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  transform: translateY(-50%);
  color: var(--cream-faint);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.progress__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.progress__track {
  position: relative;
  width: 1px;
  height: 120px;
  overflow: hidden;
  background: var(--line);
}

.progress__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  background: var(--cyan);
}

.progress__count {
  writing-mode: vertical-rl;
}

main {
  position: relative;
  z-index: 10;
}

.chapter {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(7rem, 11vh, 10rem) clamp(2rem, 7vw, 8rem);
}

.chapter--hero {
  align-items: flex-end;
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.chapter--right {
  justify-content: flex-end;
}

.chapter--left {
  justify-content: flex-start;
}

.chapter--final {
  min-height: 112svh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 13, 20, 0.38) 20%, rgba(4, 13, 20, 0.92) 100%);
}

.hero-copy {
  width: min(760px, 68vw);
  padding-left: 0.2rem;
  text-shadow: 0 2px 28px rgba(4, 13, 20, 0.42);
}

.eyebrow,
.card-index,
.language-note,
.page-footer,
.scroll-cue,
.coordinate {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--cyan);
  font-size: clamp(0.58rem, 0.68vw, 0.72rem);
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.92;
  text-wrap: balance;
}

h1 {
  font-size: clamp(6rem, 16vw, 13.5rem);
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

h2 {
  max-width: 14ch;
  font-size: clamp(3.2rem, 6.2vw, 6.4rem);
  letter-spacing: -0.035em;
}

.hero-kicker {
  margin: 0.4rem 0 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-intro,
.lede {
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.7;
}

.hero-intro {
  max-width: 62ch;
  margin: 0;
  color: var(--cream);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.65;
}

.hero-rule {
  width: 5rem;
  height: 1px;
  margin: 1.8rem 0 1.1rem;
  background: var(--cyan);
}

.hero-thesis {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 1.6vw, 1.45rem);
}

.coordinate {
  position: absolute;
  right: clamp(4rem, 12vw, 14rem);
  top: 27%;
  display: grid;
  color: var(--cream-soft);
  font-size: 0.56rem;
}

.coordinate i {
  width: 96px;
  height: 96px;
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: inset 0 0 0 28px rgba(7, 17, 26, 0.08);
}

.coordinate i::before,
.coordinate i::after {
  content: "";
  position: absolute;
  background: var(--line);
}

.coordinate i::before {
  width: 128px;
  height: 1px;
  right: -16px;
  bottom: 47px;
}

.coordinate i::after {
  width: 1px;
  height: 128px;
  right: 47px;
  bottom: -16px;
}

.scroll-cue {
  position: absolute;
  right: clamp(2rem, 6vw, 7rem);
  bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--cream-soft);
  font-size: 0.58rem;
  text-decoration: none;
}

.scroll-cue b {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--cyan);
  animation: breathe 2.4s ease-in-out infinite;
}

.story-card,
.final-card {
  position: relative;
  width: min(780px, 58vw);
  padding: clamp(2rem, 4.5vw, 5rem);
  border: 1px solid var(--line);
  /* Half the previous combined opacity (0.92–0.83), without a second dark layer. */
  background: linear-gradient(140deg, rgba(9, 27, 38, 0.46), rgba(7, 17, 26, 0.415));
  box-shadow: 0 28px 90px rgba(2, 9, 14, 0.32);
  backdrop-filter: blur(4.25px) saturate(0.9);
}

.story-card::before,
.final-card::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  pointer-events: none;
  border: 1px solid rgba(121, 221, 225, 0.13);
}

.story-card--wide {
  width: min(1080px, 78vw);
}

.card-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.6;
}

.story-card h2 + .lede,
.final-card h2 + .lede {
  margin-top: 2rem;
}

.story-card p,
.final-card p {
  max-width: 66ch;
  color: var(--cream-soft);
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2.3rem 0;
  padding: 1px;
  background: var(--line);
}

.signal-grid span {
  padding: 0.8rem 1rem;
  color: var(--cream-soft);
  background: rgba(5, 17, 24, 0.72);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.career-line {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 2.5rem 0 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}

.career-line li {
  min-height: 230px;
  padding: 1.35rem;
  background: rgba(6, 17, 25, 0.8);
}

.career-line__year {
  margin-bottom: 2rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
}

.career-line h3,
.method-map h3 {
  margin: 0 0 0.8rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}

.career-line p,
.method-map p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.project-thread {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--cyan);
  font-size: 0.9rem;
}

.method-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2.2rem 0;
  padding: 1px;
  background: var(--line);
}

.method-map > div {
  min-height: 150px;
  padding: 1.25rem;
  background: rgba(6, 17, 25, 0.78);
}

.method-map > div > span {
  display: block;
  margin-bottom: 1rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.56rem;
}

.callout {
  position: relative;
  margin-top: 2.5rem;
  padding: 1.5rem 1.5rem 1.4rem 4.6rem;
  border: 1px solid var(--cyan-soft);
  background: rgba(37, 95, 104, 0.13);
}

.callout__marker {
  position: absolute;
  left: 1.1rem;
  top: 1.55rem;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
}

.callout p {
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.16rem;
}

.callout strong {
  display: block;
  font-weight: 400;
  font-style: italic;
  color: var(--amber);
}

.final-card {
  width: min(920px, 74vw);
  text-align: center;
  background: rgba(5, 16, 24, 0.82);
}

.final-card h2,
.final-card p {
  margin-left: auto;
  margin-right: auto;
}

.final-card h2 {
  max-width: 16ch;
}

.final-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.primary-action,
.text-action {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.primary-action {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--cyan);
  background: rgba(121, 221, 225, 0.08);
}

.primary-action span {
  color: var(--cyan);
}

.text-action {
  padding: 1rem 0.2rem;
  color: var(--cream-soft);
  border-bottom: 1px solid var(--line);
}

.language-note {
  margin-top: 3rem;
  color: var(--cream-faint) !important;
  font-size: 0.54rem;
}

.page-footer {
  position: absolute;
  left: clamp(2rem, 7vw, 8rem);
  right: clamp(2rem, 7vw, 8rem);
  bottom: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--cream-faint);
  font-size: 0.52rem;
}

.page-footer a {
  text-decoration: none;
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  .return-link {
    grid-column: 2;
  }

  .progress {
    display: none;
  }

  .chapter,
  .chapter--hero {
    padding-left: clamp(1.25rem, 5vw, 3rem);
    padding-right: clamp(1.25rem, 5vw, 3rem);
  }

  .hero-copy,
  .story-card,
  .story-card--wide,
  .final-card {
    width: 100%;
  }

  .coordinate {
    display: none;
  }

  .career-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene__plate--hillside {
    --plate-x: 58%;
  }

  .scene__plate--hollywood {
    --plate-x: 62%;
  }

  .scene__plate--echo-park {
    --plate-x: 72%;
  }

  .scene__plate--night {
    --plate-x: 66%;
  }

  .scene__plate--rooftop {
    --plate-x: 40%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .site-header {
    min-height: 64px;
    padding: 0 1rem;
  }

  .wordmark {
    font-size: 0.54rem;
    letter-spacing: 0.28em;
  }

  .return-link {
    padding: 0.55rem 0.7rem;
    font-size: 0.5rem;
  }

  .chapter {
    min-height: 100svh;
    align-items: center;
    padding-top: 6rem;
    padding-bottom: 5rem;
  }

  .chapter--hero {
    align-items: flex-end;
  }

  .hero-copy {
    text-shadow: 0 3px 24px rgba(4, 13, 20, 0.72);
  }

  h1 {
    font-size: clamp(5.4rem, 29vw, 8rem);
  }

  h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .hero-intro {
    max-width: 38ch;
    font-size: 1.08rem;
  }

  .scroll-cue {
    right: 1.25rem;
    bottom: 1rem;
  }

  .scroll-cue span {
    display: none;
  }

  .story-card,
  .final-card {
    padding: 2rem 1.3rem;
    backdrop-filter: blur(4.25px) saturate(0.9);
  }

  .story-card::before,
  .final-card::before {
    inset: 0.48rem;
  }

  .card-index {
    margin-bottom: 2.2rem;
  }

  .signal-grid,
  .career-line,
  .method-map {
    grid-template-columns: 1fr;
  }

  .career-line li {
    min-height: 0;
  }

  .career-line__year {
    margin-bottom: 0.7rem;
  }

  .callout {
    padding: 1.3rem 1.1rem 1.25rem 3.3rem;
  }

  .final-actions {
    flex-direction: column;
  }

  .primary-action,
  .text-action {
    width: 100%;
    justify-content: space-between;
  }

  .page-footer {
    left: 1.25rem;
    right: 1.25rem;
    gap: 0.6rem;
    font-size: 0.44rem;
  }

  .page-footer span:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .scene__plate,
  .scene__band {
    transform: scale(1.04);
  }

  .scene__plate--hillside {
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Chapter 02 callout: the boxed callout with a vertical marker, sized for a short set of sentences. */
.feature-note {
  margin-top: 2.2rem;
}

.feature-note p {
  max-width: 60ch;
  color: var(--cream-soft);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
}

.feature-note p + p {
  margin-top: 0.55rem;
}

.feature-note .feature-note__title {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.15;
}

.feature-note .feature-note__lead {
  margin-top: 0.35rem;
  color: var(--amber);
  font-family: var(--serif);
  font-size: 1.16rem;
  font-style: italic;
}

/* The page masthead is Alex's name, stacked on two lines. Sized so the longer line,
   "LeBrun", fits the hero column on desktop and on phones. */
.hero-name {
  font-size: clamp(4.4rem, 10vw, 9.5rem);
}

.hero-name span {
  display: block;
}

@media (max-width: 640px) {
  .hero-name {
    font-size: clamp(3.3rem, 17vw, 5.2rem);
  }
}

/* Typography pass: optical spacing and flow.
   The Bodoni/Didot display cuts are drawn tight, and the old negative tracking made letters
   and words touch at large sizes. Kerning comes from the font's own pairs, tracking opens
   slightly, words get a little air, and lines break in balanced, orphan-free shapes. */
html {
  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3 {
  font-kerning: normal;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

h1 {
  letter-spacing: 0.02em;
}

h2 {
  line-height: 0.98;
  letter-spacing: 0.006em;
  word-spacing: 0.05em;
}

.hero-kicker {
  line-height: 1.12;
}

.hero-thesis,
.callout p,
.career-line h3,
.method-map h3,
.work-discipline h3,
.feature-note .feature-note__title,
.feature-note .feature-note__lead {
  letter-spacing: 0.012em;
  word-spacing: 0.03em;
}

/* Spacing pass: one rhythm for frames and their contents.
   Between framed cards: 144 px on desktop (enough painting between frames, not a gap),
   128 px on phones. Inside cards: 40 px under the chapter header row, 32 px before
   paragraphs of a new kind, 40 px before boxed elements. Nothing touches: names, frames,
   inner rules, and the footer all keep clear space. */
.chapter {
  padding-top: clamp(4rem, 8vh, 6rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}

.chapter--hero {
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.chapter--final {
  padding-bottom: 9rem;
}

.hero-kicker {
  margin-top: 1.2rem;
}

.card-index {
  margin-bottom: 2.5rem;
}

.feature-note,
.method-map {
  margin-top: 2.5rem;
}

.method-map {
  margin-bottom: 0;
}

.language-note {
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .chapter {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .chapter--final {
    padding-bottom: 8.5rem;
  }

  .story-card,
  .final-card {
    padding: 2.25rem 1.6rem;
  }

  .story-card::before,
  .final-card::before {
    inset: 0.5rem;
  }

  .card-index {
    margin-bottom: 1.75rem;
  }
}

/* Keep the opening eyebrow below the fixed masthead on short viewports. */
.chapter--hero {
  padding-top: max(7rem, 12vh);
}

/* Portfolio disciplines use the same display type and quiet rules as the page. */
.work-discipline {
  margin-block: 2rem;
}
.work-discipline + .work-discipline {
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.work-discipline h3 {
  margin: 0 0 1rem;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}