@import url("design-system/tokens.css");

/* Font families fall back to the live design-system stacks when local portfolio assets are absent. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ds-portfolio-ink); }
body { margin: 0; color: var(--ds-portfolio-pearl); background: var(--ds-portfolio-ink); font-family: "Inter Tight Local", var(--ds-portfolio-text-font); }
body, button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-synthesis: none; }
p { text-wrap: pretty; }
.skip-link { position: fixed; z-index: 10; top: var(--ds-portfolio-grid-gap); left: var(--ds-portfolio-grid-gap); padding: var(--ds-portfolio-grid-gap); color: var(--ds-portfolio-ink); background: var(--ds-portfolio-bone); transform: translateY(-200%); transition: transform var(--ds-motion-fast); }
.skip-link:focus { transform: none; }
.site-header { position: fixed; z-index: 5; top: 0; right: 0; left: 0; display: grid; grid-template-columns: auto 1fr auto; gap: var(--ds-portfolio-grid-gap); align-items: center; padding: var(--ds-portfolio-grid-gap) var(--ds-portfolio-gutter); border-bottom: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 18%, transparent); background: color-mix(in srgb, var(--ds-portfolio-ink) 90%, transparent); backdrop-filter: blur(var(--ds-portfolio-grid-gap)); }
.brand, .site-header nav, .header-status, .eyebrow, .section-mark, .hero-meta span, .story-arc span, .screen-ledger > article > span, .screen-ledger dt, .output-grid span, .render-status, .render-slot figcaption span, .render-slot figcaption small, .reference-grid figcaption span, .input-ledger span, .input-ledger small, .brief-link, footer { font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font); font-size: var(--ds-portfolio-meta-size); letter-spacing: var(--ds-portfolio-meta-tracking); line-height: var(--ds-portfolio-meta-leading); text-transform: uppercase; }
.brand { display: grid; grid-template-columns: auto auto auto; gap: var(--ds-portfolio-grid-gap); align-items: center; text-decoration: none; }
.brand span { color: var(--ds-portfolio-ember); }
.brand i, .eyebrow i, .section-mark i { display: block; width: clamp(2rem, 6vw, 7rem); height: calc(var(--ds-portfolio-focus-width) / 2); background: currentColor; opacity: .5; }
.site-header nav { justify-self: center; display: flex; gap: clamp(var(--ds-portfolio-grid-gap), 3vw, var(--ds-portfolio-pause-space)); }
.site-header nav a { color: var(--ds-portfolio-muted); text-decoration: none; transition: color var(--ds-motion-fast); }
.site-header nav a:hover, .site-header nav a:focus-visible, .site-header nav a.is-active { color: var(--ds-portfolio-ember); }
.header-status { color: var(--ds-portfolio-muted); }
.section-dark { color: var(--ds-portfolio-pearl); background: var(--ds-portfolio-ink); }
.section-light { color: var(--ds-portfolio-ink); background: var(--ds-portfolio-bone); }
.section-dark, .section-light { padding: var(--ds-portfolio-scene-space) var(--ds-portfolio-gutter); }
.hero { position: relative; display: grid; min-height: 100svh; padding-top: clamp(var(--ds-portfolio-pause-space), 12vw, calc(var(--ds-portfolio-pause-space) * 2)); overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.hero::before { width: min(70vw, 70rem); aspect-ratio: 1; top: 18%; right: -22%; border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ember) 30%, transparent); border-radius: 50%; box-shadow: 0 0 var(--ds-portfolio-pause-space) color-mix(in srgb, var(--ds-portfolio-ember) 14%, transparent); }
.hero::after { right: 0; bottom: 0; left: 0; height: var(--ds-portfolio-section-blend-depth); background: linear-gradient(to bottom, transparent, var(--ds-portfolio-ink)); }
.eyebrow, .section-mark { display: grid; grid-template-columns: auto auto 1fr; gap: var(--ds-portfolio-grid-gap); align-items: center; color: var(--ds-portfolio-muted); }
.eyebrow span, .section-mark span { color: var(--ds-portfolio-ember); }
.hero-copy { align-self: center; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ds-portfolio-grid-gap); margin-block: var(--ds-portfolio-pause-space); }
.hero-kicker { grid-column: 1 / 5; align-self: start; color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.hero h1 { grid-column: 4 / 13; font-family: "Instrument Serif Local", var(--ds-portfolio-display-font); font-size: var(--ds-portfolio-proposal-type-monument); font-weight: var(--ds-portfolio-proposal-weight-editorial); letter-spacing: var(--ds-portfolio-editorial-tracking); line-height: var(--ds-portfolio-editorial-leading); }
h1 em, h2 em { color: var(--ds-portfolio-ember); font-weight: inherit; }
.hero-summary { grid-column: 9 / 13; align-self: end; max-width: var(--ds-portfolio-body-measure); color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-portfolio-grid-gap); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); }
.hero-meta div { display: grid; gap: var(--ds-portfolio-grid-gap); padding-top: var(--ds-portfolio-grid-gap); }
.hero-meta div + div { border-left: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); padding-left: var(--ds-portfolio-grid-gap); }
.hero-meta span { color: var(--ds-portfolio-ember); }
.hero-meta strong { font-size: var(--ds-portfolio-body-size); font-weight: var(--ds-portfolio-proposal-weight-functional); line-height: var(--ds-portfolio-body-leading); }
.scroll-cue { align-self: end; justify-self: end; color: var(--ds-portfolio-muted); font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font); font-size: var(--ds-portfolio-meta-size); letter-spacing: var(--ds-portfolio-meta-tracking); text-decoration: none; }
.scroll-cue span { color: var(--ds-portfolio-ember); font-size: var(--ds-portfolio-proposal-type-row); }
.section-mark.light { color: var(--ds-portfolio-light-muted); }
.section-mark.light span { color: var(--ds-portfolio-ember-on-light); }
.proposition-grid, .narrative-heading, .screen-heading, .output-heading, .render-heading, .reference-intro, .inputs-heading, .next-content { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); }
.proposition-grid h2, .narrative-heading h2, .screen-heading h2, .output-heading h2, .render-heading h2, .reference-intro h2, .inputs-heading h2, .next-content h2 { grid-column: 1 / 9; font-family: "Instrument Serif Local", var(--ds-portfolio-display-font); font-size: var(--ds-portfolio-proposal-type-display); font-weight: var(--ds-portfolio-proposal-weight-editorial); letter-spacing: var(--ds-portfolio-editorial-tracking); line-height: var(--ds-portfolio-editorial-leading); }
.proposition-grid > div, .narrative-heading > p, .screen-heading > p, .output-heading > p, .render-heading > p, .reference-intro > p, .inputs-heading > p, .next-content > div { grid-column: 9 / 13; align-self: end; color: var(--ds-portfolio-light-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.status-line { margin-top: var(--ds-portfolio-grid-gap); font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font); font-size: var(--ds-portfolio-meta-size); letter-spacing: var(--ds-portfolio-meta-tracking); line-height: var(--ds-portfolio-meta-leading); text-transform: uppercase; }
.status-line b { color: var(--ds-portfolio-ember-on-light); font-weight: inherit; }
.narrative-heading > p, .screen-heading > p, .render-heading > p, .reference-intro > p, .next-content > div { color: var(--ds-portfolio-muted); }
.story-arc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-portfolio-grid-gap); padding: 0; margin: var(--ds-portfolio-pause-space) 0 0; border-block: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); list-style: none; }
.story-arc li { min-height: clamp(15rem, 27vw, 24rem); padding: var(--ds-portfolio-grid-gap) 0; }
.story-arc li + li { border-left: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); padding-left: var(--ds-portfolio-grid-gap); }
.story-arc span, .screen-ledger > article > span { color: var(--ds-portfolio-ember); }
.story-arc strong { display: block; margin-top: var(--ds-portfolio-pause-space); font-size: var(--ds-portfolio-proposal-type-row); font-weight: var(--ds-portfolio-proposal-weight-impact); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.story-arc p { margin-top: var(--ds-portfolio-grid-gap); color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.screen-ledger { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); }
.screen-ledger > article { padding-top: var(--ds-portfolio-grid-gap); }
.screen-ledger > article + article { border-left: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); padding-left: var(--ds-portfolio-grid-gap); }
.screen-ledger h3 { margin-top: var(--ds-portfolio-pause-space); font-size: var(--ds-portfolio-proposal-type-section); font-weight: var(--ds-portfolio-proposal-weight-impact); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.screen-ledger dl { margin: var(--ds-portfolio-pause-space) 0 0; }
.screen-ledger dl div { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: var(--ds-portfolio-grid-gap); padding-block: var(--ds-portfolio-grid-gap); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); }
.screen-ledger dt { color: var(--ds-portfolio-ember); }
.screen-ledger dd { margin: 0; color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.output-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); border-block: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); }
.output-grid article { min-height: clamp(14rem, 27vw, 23rem); padding-block: var(--ds-portfolio-grid-gap); }
.output-grid article + article { border-left: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); padding-left: var(--ds-portfolio-grid-gap); }
.output-grid span { color: var(--ds-portfolio-ember-on-light); }
.output-grid h3 { margin-top: var(--ds-portfolio-pause-space); font-size: var(--ds-portfolio-proposal-type-row); font-weight: var(--ds-portfolio-proposal-weight-impact); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.output-grid p { margin-top: var(--ds-portfolio-grid-gap); color: var(--ds-portfolio-light-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.render-status { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); padding-block: var(--ds-portfolio-grid-gap); border-block: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); color: var(--ds-portfolio-muted); }
.render-status strong { color: var(--ds-portfolio-ember); font-weight: inherit; }
.render-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); }
.render-slot { margin: 0; }
.render-void { position: relative; display: grid; place-items: center; aspect-ratio: 2.25 / 1; overflow: hidden; background: var(--ds-portfolio-panel); }
.render-slot:nth-child(2) .render-void { aspect-ratio: 2.6 / 1; }
.render-void::before, .render-void::after { position: absolute; content: ""; background: color-mix(in srgb, var(--ds-portfolio-muted) 16%, transparent); }
.render-void::before { width: 160%; height: calc(var(--ds-portfolio-focus-width) / 2); transform: rotate(-18deg); }
.render-void::after { width: calc(var(--ds-portfolio-focus-width) / 2); height: 160%; transform: rotate(-18deg); }
.render-void span { color: var(--ds-portfolio-ember); font-family: "Instrument Serif Local", var(--ds-portfolio-display-font); font-size: var(--ds-portfolio-proposal-type-display); }
.render-void i { position: absolute; width: min(33%, 14rem); aspect-ratio: 1; border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ember) 50%, transparent); border-radius: 50%; }
.render-slot figcaption { display: grid; gap: calc(var(--ds-portfolio-grid-gap) / 2); padding-top: var(--ds-portfolio-grid-gap); }
.render-slot figcaption span { color: var(--ds-portfolio-ember); }
.render-slot figcaption strong { font-size: var(--ds-portfolio-proposal-type-row); font-weight: var(--ds-portfolio-proposal-weight-functional); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.render-slot figcaption small { color: var(--ds-portfolio-muted); }
.reference-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); }
.reference-grid figure { margin: 0; }
.reference-grid figure:nth-child(1) { grid-column: 1 / 7; }
.reference-grid figure:nth-child(2) { grid-column: 7 / 13; margin-top: var(--ds-portfolio-pause-space); }
.reference-grid figure:nth-child(3) { grid-column: 3 / 11; }
.reference-grid img { width: 100%; background: var(--ds-portfolio-panel); filter: saturate(.7) contrast(1.04); }
.reference-grid figcaption { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-portfolio-grid-gap); padding-top: var(--ds-portfolio-grid-gap); }
.reference-grid figcaption span { color: var(--ds-portfolio-ember); }
.reference-grid figcaption strong { color: var(--ds-portfolio-muted); font-size: var(--ds-portfolio-body-size); font-weight: var(--ds-portfolio-proposal-weight-functional); }
.input-ledger { margin-top: var(--ds-portfolio-pause-space); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); }
.input-ledger details { border-bottom: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); }
.input-ledger summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ds-portfolio-grid-gap); align-items: center; min-height: clamp(5rem, 11vw, 8rem); cursor: pointer; list-style: none; }
.input-ledger summary::-webkit-details-marker { display: none; }
.input-ledger summary span { color: var(--ds-portfolio-ember-on-light); }
.input-ledger summary strong { font-size: var(--ds-portfolio-proposal-type-row); font-weight: var(--ds-portfolio-proposal-weight-functional); letter-spacing: var(--ds-portfolio-title-tracking); line-height: var(--ds-portfolio-title-leading); }
.input-ledger summary small { color: var(--ds-portfolio-ember-on-light); }
.input-ledger summary::after { grid-column: 3; grid-row: 1; justify-self: end; color: var(--ds-portfolio-ember-on-light); content: "+"; font-family: "Oxygen Mono Local", var(--ds-portfolio-mono-font); }
.input-ledger details[open] summary::after { content: "−"; }
.input-ledger p { max-width: var(--ds-portfolio-body-measure); margin: 0 0 var(--ds-portfolio-grid-gap) clamp(2rem, 9vw, 12rem); color: var(--ds-portfolio-light-muted); font-size: var(--ds-portfolio-body-size); line-height: var(--ds-portfolio-body-leading); }
.next-content h2 { color: var(--ds-portfolio-pearl); }
.next-content p { color: var(--ds-portfolio-muted); }
.brief-link { display: inline-flex; gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); color: var(--ds-portfolio-ember); text-decoration: none; }
.brief-link:hover, .brief-link:focus-visible { color: var(--ds-portfolio-pearl); }
.next-step footer { display: flex; justify-content: space-between; gap: var(--ds-portfolio-grid-gap); margin-top: var(--ds-portfolio-pause-space); padding-top: var(--ds-portfolio-grid-gap); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); color: var(--ds-portfolio-muted); }
:focus-visible { outline: var(--ds-portfolio-focus-width) solid var(--ds-portfolio-ember); outline-offset: var(--ds-portfolio-focus-offset); }

@media (max-width: 60rem) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; overflow-x: auto; max-width: 100%; padding-top: var(--ds-portfolio-grid-gap); border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); }
  .header-status { grid-column: 2; grid-row: 1; }
  .hero-copy, .proposition-grid, .narrative-heading, .screen-heading, .output-heading, .render-heading, .reference-intro, .inputs-heading, .next-content { grid-template-columns: repeat(6, 1fr); }
  .hero-kicker { grid-column: 1 / 3; }
  .hero h1 { grid-column: 2 / 7; }
  .hero-summary { grid-column: 4 / 7; }
  .proposition-grid h2, .narrative-heading h2, .screen-heading h2, .output-heading h2, .render-heading h2, .reference-intro h2, .inputs-heading h2, .next-content h2 { grid-column: 1 / 5; }
  .proposition-grid > div, .narrative-heading > p, .screen-heading > p, .output-heading > p, .render-heading > p, .reference-intro > p, .inputs-heading > p, .next-content > div { grid-column: 4 / 7; }
  .story-arc, .output-grid { grid-template-columns: repeat(2, 1fr); }
  .story-arc li:nth-child(3), .output-grid article:nth-child(3) { border-left: 0; padding-left: 0; border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); }
  .output-grid article:nth-child(3) { border-color: color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); }
  .screen-ledger { grid-template-columns: 1fr; }
  .screen-ledger > article + article { border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); border-left: 0; padding-top: var(--ds-portfolio-scene-space-compact); padding-left: 0; }
}

@media (max-width: 38rem) {
  .section-dark, .section-light { padding-block: var(--ds-portfolio-scene-space-compact); }
  .brand i, .header-status { display: none; }
  .site-header nav { gap: var(--ds-portfolio-pause-space); }
  .hero { min-height: 48rem; padding-top: calc(var(--ds-portfolio-pause-space) * 2); }
  .hero-copy, .proposition-grid, .narrative-heading, .screen-heading, .output-heading, .render-heading, .reference-intro, .inputs-heading, .next-content { grid-template-columns: 1fr; }
  .hero-kicker, .hero h1, .hero-summary, .proposition-grid h2, .narrative-heading h2, .screen-heading h2, .output-heading h2, .render-heading h2, .reference-intro h2, .inputs-heading h2, .next-content h2, .proposition-grid > div, .narrative-heading > p, .screen-heading > p, .output-heading > p, .render-heading > p, .reference-intro > p, .inputs-heading > p, .next-content > div { grid-column: 1; }
  .hero h1 { font-size: clamp(5rem, 24vw, var(--ds-portfolio-proposal-type-monument)); }
  .hero-summary { margin-top: var(--ds-portfolio-grid-gap); }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-meta div + div { border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); border-left: 0; padding-top: var(--ds-portfolio-grid-gap); padding-left: 0; }
  .story-arc, .output-grid, .render-gallery { grid-template-columns: 1fr; }
  .story-arc li:nth-child(n + 2), .output-grid article:nth-child(n + 2) { border-top: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, var(--ds-portfolio-pearl) 20%, transparent); border-left: 0; padding-left: 0; }
  .output-grid article:nth-child(n + 2) { border-color: color-mix(in srgb, var(--ds-portfolio-ink) 18%, transparent); }
  .screen-ledger dl div { grid-template-columns: 1fr; }
  .reference-grid { grid-template-columns: 1fr; }
  .reference-grid figure:nth-child(n) { grid-column: 1; margin-top: 0; }
  .reference-grid figure + figure { margin-top: var(--ds-portfolio-pause-space); }
  .input-ledger summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .input-ledger summary small { display: none; }
  .input-ledger p { margin-left: clamp(2rem, 9vw, 12rem); }
  .next-step footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (min-width: 60.0625rem) {
  html, body { height: 100%; overflow: hidden; }
  .journey { display: flex; align-items: stretch; width: 100%; height: 100svh; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; scrollbar-width: none; overscroll-behavior: none; }
  .journey::-webkit-scrollbar { display: none; }
  .journey > section { flex: 0 0 auto; min-width: 100vw; min-height: 100svh; height: 100svh; overflow: hidden; padding-top: clamp(var(--ds-portfolio-scene-space-compact), 11vh, var(--ds-portfolio-scene-space)); padding-bottom: clamp(var(--ds-portfolio-grid-gap), 5vh, var(--ds-portfolio-pause-space)); }
  .journey > .hero { width: 100vw; }
  .journey > .proposition { width: 118vw; }
  .journey > .narrative { width: 158vw; }
  .journey > .screens { width: 152vw; }
  .journey > .output-section { width: 148vw; }
  .journey > .reference-section { width: 172vw; }
  .journey > .inputs { width: 138vw; }
  .journey > .next-step { width: 100vw; }
  .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .reference-grid figure:nth-child(n) { grid-column: auto; margin-top: 0; }
  .reference-grid img { width: 100%; height: clamp(15rem, 42vh, 28rem); object-fit: cover; }
  .scroll-cue span { display: inline-block; animation: horizontal-cue var(--ds-motion-slow) var(--ds-portfolio-ease-signature) infinite alternate; }
  @keyframes horizontal-cue { from { transform: translateX(0); } to { transform: translateX(var(--ds-portfolio-grid-gap)); } }
}
@media (min-width: 60.0625rem) {
  .journey > section { padding-top: clamp(5.5rem, 9vh, 7rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
  .hero-copy { margin-block: clamp(2rem, 4vh, 3.5rem); }
  .hero-meta div { gap: calc(var(--ds-portfolio-grid-gap) / 2); }
  .proposition-grid,
  .narrative-heading,
  .screen-heading,
  .output-heading,
  .reference-intro,
  .inputs-heading,
  .next-content { margin-top: clamp(2rem, 5vh, 4rem); }
  .story-arc { margin-top: clamp(2rem, 5vh, 4rem); }
  .story-arc li { min-height: clamp(14rem, 38vh, 21rem); }
  .story-arc strong { margin-top: clamp(2rem, 7vh, 4.5rem); }

  .screens { display: grid; grid-template-columns: minmax(27rem, 0.72fr) minmax(64rem, 1.8fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--ds-portfolio-pause-space); }
  .screens > .section-mark { grid-column: 1 / -1; }
  .screens > .screen-heading { grid-column: 1; display: block; align-self: center; }
  .screens > .screen-heading h2,
  .screens > .screen-heading p { max-width: var(--ds-portfolio-body-measure); }
  .screens > .screen-heading p { margin-top: var(--ds-portfolio-grid-gap); }
  .screens > .screen-ledger { grid-column: 2; align-self: center; margin-top: clamp(2rem, 5vh, 4rem); }
  .screen-ledger h3 { margin-top: clamp(2rem, 6vh, 4rem); }
  .screen-ledger dl { margin-top: clamp(2rem, 5vh, 3rem); }

  .output-heading { align-items: end; }
  .output-grid { margin-top: clamp(2rem, 5vh, 4rem); }
  .output-grid article { min-height: clamp(14rem, 38vh, 20rem); }
  .output-grid h3 { margin-top: clamp(2rem, 7vh, 4rem); }

  .reference-section { display: grid; grid-template-columns: minmax(28rem, 0.72fr) minmax(72rem, 2fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--ds-portfolio-pause-space); }
  .reference-section > .section-mark { grid-column: 1 / -1; }
  .reference-section > .reference-intro { grid-column: 1; display: block; align-self: center; }
  .reference-section > .reference-intro p { max-width: var(--ds-portfolio-body-measure); margin-top: var(--ds-portfolio-grid-gap); }
  .reference-section > .reference-grid { grid-column: 2; align-self: center; margin-top: clamp(2rem, 5vh, 4rem); }

  .inputs { display: grid; grid-template-columns: minmax(28rem, 0.72fr) minmax(58rem, 1.55fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--ds-portfolio-pause-space); }
  .inputs > .section-mark { grid-column: 1 / -1; }
  .inputs > .inputs-heading { grid-column: 1; display: block; align-self: center; }
  .inputs > .inputs-heading p { max-width: var(--ds-portfolio-body-measure); margin-top: var(--ds-portfolio-grid-gap); }
  .inputs > .input-ledger { grid-column: 2; align-self: center; margin-top: clamp(2rem, 5vh, 4rem); }
  .input-ledger summary { min-height: clamp(4.5rem, 9vh, 6rem); }
  .input-ledger p { margin-bottom: var(--ds-portfolio-grid-gap); }
}
/* Spatial journey: fixed wayfinding, asymmetrical scenes and layered movement. */
.journey-progress { position: absolute; right: 0; bottom: calc(var(--ds-portfolio-focus-width) / -2); left: 0; height: var(--ds-portfolio-focus-width); overflow: hidden; pointer-events: none; }
.journey-progress i { display: block; width: 100%; height: 100%; background: var(--ds-portfolio-ember); transform: scaleX(var(--journey-progress, 0)); transform-origin: left center; will-change: transform; }
.site-header nav a { position: relative; padding-block: calc(var(--ds-portfolio-grid-gap) / 2); }
.site-header nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: calc(var(--ds-portfolio-focus-width) / 2); background: currentColor; content: ""; transform: scaleX(0); transform-origin: right center; transition: transform var(--ds-motion-fast) var(--ds-portfolio-ease-signature); }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after, .site-header nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }

@media (min-width: 60.0625rem) {
  [data-parallax] { --base-y: 0px; --base-rotate: 0deg; --parallax-x: 0px; --parallax-y: 0px; transform: translate3d(var(--parallax-x), calc(var(--base-y) + var(--parallax-y)), 0) rotate(var(--base-rotate)); will-change: transform; }
  .motion-ready [data-reveal] { opacity: 0; filter: blur(calc(var(--ds-portfolio-focus-width) * 1.5)); translate: 0 2rem; transition: opacity var(--ds-motion-slow) var(--ds-portfolio-ease-signature) var(--reveal-delay, 0ms), filter var(--ds-motion-slow) var(--ds-portfolio-ease-signature) var(--reveal-delay, 0ms), translate var(--ds-motion-slow) var(--ds-portfolio-ease-signature) var(--reveal-delay, 0ms); }
  .motion-ready [data-reveal].is-in-view { opacity: 1; filter: none; translate: 0 0; }
  .journey > section { position: relative; isolation: isolate; }
  .journey > section::after { position: absolute; z-index: -1; top: 15%; bottom: 12%; left: 52%; width: 32vw; border: calc(var(--ds-portfolio-focus-width) / 2) solid color-mix(in srgb, currentColor 9%, transparent); border-radius: 50%; content: ""; pointer-events: none; transform: translate3d(var(--scene-orbit, 0px), 0, 0) rotate(-11deg); }
  .journey > section:nth-child(even)::after { left: 13%; width: 42vw; transform: translate3d(var(--scene-orbit, 0px), 0, 0) rotate(14deg); }
  .section-mark { width: min(42rem, 38vw); }

  .proposition-grid h2 { --base-y: 3vh; grid-column: 1 / 8; }
  .proposition-grid > div { grid-column: 8 / 12; align-self: start; margin-top: 17vh; }

  .narrative-heading h2 { grid-column: 2 / 9; }
  .narrative-heading > p { grid-column: 9 / 12; align-self: center; margin-top: 9vh; }
  .story-arc { --base-rotate: -.35deg; margin-left: 9vw; }
  .story-arc li:nth-child(2) { transform: translateY(4vh); }
  .story-arc li:nth-child(3) { transform: translateY(-2vh); }
  .story-arc li:nth-child(4) { transform: translateY(6vh); }

  .screens > .screen-heading { align-self: start; margin-top: 12vh; }
  .screens > .screen-ledger { --base-rotate: .25deg; align-self: end; margin-bottom: 3vh; }
  .screen-ledger > article:nth-child(2) { transform: translateY(-5vh); }

  .output-heading h2 { grid-column: 1 / 8; }
  .output-heading > p { grid-column: 9 / 12; margin-bottom: -3vh; }
  .output-grid { --base-rotate: -.25deg; margin-left: 5vw; }
  .output-grid article:nth-child(2) { transform: translateY(5vh); }
  .output-grid article:nth-child(3) { transform: translateY(-2vh); }
  .output-grid article:nth-child(4) { transform: translateY(7vh); }

  .reference-section > .reference-intro { align-self: start; margin-top: 10vh; }
  .reference-grid figure:nth-child(1) { --base-y: -4vh; --base-rotate: -1deg; }
  .reference-grid figure:nth-child(2) { --base-y: 6vh; --base-rotate: 1.2deg; }
  .reference-grid figure:nth-child(3) { --base-y: -1vh; --base-rotate: -.6deg; }

  .inputs > .inputs-heading { align-self: start; margin-top: 11vh; }
  .inputs > .input-ledger { align-self: end; margin-bottom: 2vh; }
  .next-content h2 { --base-y: 3vh; grid-column: 1 / 8; }
  .next-content > div { grid-column: 9 / 13; margin-top: 14vh; }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] { --parallax-x: 0px !important; --parallax-y: 0px !important; }
  .motion-ready [data-reveal] { opacity: 1; filter: none; translate: 0 0; }
}
/* The first slide is a reliable entry point even when observers initialize late. */
@media (min-width: 60.0625rem) {
  .motion-ready .hero [data-reveal] { opacity: 1; filter: none; translate: 0 0; }
}