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

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic.ttf') format('truetype');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --type-editorial-weight: 400;
  --type-editorial-tracking: 0;
  --type-section-leading: 115%;
  --type-body-weight: 400;
  --type-ui-weight: 500;
  --type-emphasis-weight: 600;
  --ink: #0b0b0b;
  --muted: #666b73;
  --body-on-surface: #484b50;
  --line: #dfe2e7;
  --paper: #ffffff;
  --soft: #f3f4f6;
  --media: #eef0f4;
  --accent-soft: #edf2ff;
  --accent-on-dark: #b8c9ff;
  --blue: #225cff;
  --accent: var(--blue);
  --red: #ff5f57;
  --max: 1240px;
  --intro-measure: 70%;
  --pad: clamp(20px, 4vw, 64px);
  --image-radius: 0;
  --surface-radius: 1rem;
  --control-radius: .65rem;
  --pill-radius: 999px;
  --grid-gap: 16px;
  --content-gap: 24px;
  --section-gap: 32px;
  --content-group-gap: 80px;
  --subsection-gap: clamp(40px, 5vw, 64px);
  --chapter-padding: clamp(96px, 11vw, 160px);
  --chapter-padding-mobile: clamp(60px, 14vw, 96px);
  --eyebrow-heading-gap: 28px;
  --heading-content-gap: 20px;
  --h2-before-gap: 40px;
  --h2-after-gap: 32px;
  --component-heading-before: 12px;
  --component-heading-after: 16px;
  --caption-gap: 12px;
  --card-content-gap: 12px;
  --story-column-gap: clamp(40px, 5vw, 80px);
  --toc-width: 13.5rem;
  --body-size: 16px;
  --body-leading: 160%;
  --body-tracking: 0;
  --type-hero: 80px;
  --type-section: 60px;
  --type-editorial-subsection: 44px;
  --type-subsection: 22px;
  --type-subsection-leading: 130%;
  --type-small-heading: var(--body-size);
  --type-data: 38px;
  --type-button: var(--body-size);
  --type-navigation-size: 14px;
  --type-hero-leading: 110%;
  --type-small-leading: 150%;
  --small-title-size: 12px;
  --type-eyebrow-size: 18px;
  --type-eyebrow-weight: var(--type-emphasis-weight);
  --type-eyebrow-leading: 135%;
  --type-eyebrow-tracking: .08em;
  --small-title-leading: var(--type-eyebrow-leading);
  --small-title-weight: var(--type-ui-weight);
  --small-title-tracking: var(--type-eyebrow-tracking);
  --tag-radius: var(--control-radius);
  --tag-padding-y: 4px;
  --tag-padding-x: 10px;
  --type-ui-leading: 150%;
  --space-tight: 4px;
  --space-small: 8px;
  --hero-deck-gap: 36px;
  --tag-leading: var(--small-title-leading);
  --tag-tracking: var(--small-title-tracking);
  --brand-tracking: -.03em;
  --icon-size: 28px;
  --close-icon-size: 18px;
  --actor-reporting: #6B7785;
  --actor-operations: #425A8B;
  --motion-fast: 160ms ease;
  --header-surface: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .78) 58%, rgba(255, 255, 255, 0) 100%);
  --header-mask: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  --header-blur: 6px;
  --viewer-surface: rgba(255, 255, 255, .5);
  --viewer-blur: 12px;
  --project-hover-shadow: 0 10px 30px rgba(11, 11, 11, .08);
  --actor-tag-radius: 3px;
  --guide-line: 1px dashed var(--blue);
  --guide-faint-line: 1px dashed rgba(34,92,255,.35);
  --guide-context-line: 1px dashed rgba(34,92,255,.4);
  --focus-outline: 3px solid var(--blue);
  --quiet-border: 1px solid var(--line);
  --callout-inset: clamp(24px, 4vw, 48px);
  --comparison-inset: clamp(24px, 3vw, 32px);
  --guide-stripe: rgba(34,92,255,.045);
  --guide-gap-color: rgba(34,92,255,.24);
  --guide-padding-color: rgba(34,92,255,.18);
  --header-ink: #000000;
  --actor-tag-leading: 120%;
  --actor-tag-tracking: .04em;
  --inverse-secondary: #b8bac0;
  --toc-surface: rgba(255,255,255,.96);
  --toc-blur: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;

  background: var(--paper);

  font-synthesis: none;

  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  max-width: 100%;
  border-radius: var(--image-radius);
}

a:focus-visible,
button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 50;
  padding: var(--card-content-gap) var(--grid-gap);
  background: var(--ink);

  color: var(--paper);
  transform: translateY(-160%);
}

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

.shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-inline: var(--pad);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: var(--header-surface);

  transform: translateY(0);
  transition: transform var(--motion-fast);
  will-change: transform;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
  -webkit-mask-image: var(--header-mask);
  mask-image: var(--header-mask);
}

.site-header.is-scroll-hidden {
  transform: translateY(-100%);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, var(--section-gap));

}

.nav a {
  position: relative;
}

.nav a:not(.disabled)::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 100%;
  bottom: -4px;
  background: currentColor;
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  right: 0;
}

.kicker,
.draft-tag,
.eyebrow,
.callout strong {

  text-transform: uppercase;
}

.kicker {
  margin: 0 0 var(--heading-content-gap);
}

.hero {
  padding-block: clamp(80px, 12vw, 144px) clamp(64px, 8vw, 112px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.display {
  max-width: 930px;
  margin: 0;

}

.hero-copy {
  align-self: end;
  margin-bottom: var(--space-small);
}

.hero-note {
  max-width: 29rem;
  margin: 0;
}

.hero-meta {
  display: grid;
  gap: var(--space-tight);
  max-width: 29rem;
  margin: var(--heading-content-gap) 0 0;
}

.hero-meta span {
  display: block;
}

.work-section {
  padding-block: clamp(48px, 7vw, 96px) 112px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--section-gap);
  align-items: baseline;
  margin-bottom: var(--content-gap);
}

.section-title {
  margin: 0;

}

.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  padding: clamp(16px, 2vw, var(--content-gap));
  border-radius: var(--surface-radius);
  background: var(--soft);

  transition: box-shadow var(--motion-fast);
}

.project-card + .project-card {
  margin-top: clamp(16px, 2.5vw, var(--section-gap));
}

.project-media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--media);

  border-radius: var(--image-radius);
}

.project-media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--heading-content-gap);
  align-items: start;
}

.project-title {
  margin: 0 0 var(--space-small);

}

.project-subtitle {
  margin: 0;
}

.project-tags {
  margin-top: var(--grid-gap);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-small);
}

.tag-list span {
  padding: var(--tag-padding-y) var(--tag-padding-x);

  text-transform: uppercase;
}

.project-card .tag-list span {
  background: var(--paper);

}

.project-arrow {
  inline-size: 1.7rem;
  margin-top: 2px;

  text-align: center;
  transition: color var(--motion-fast), font-weight var(--motion-fast);
}

.project-card:hover {
  box-shadow: var(--project-hover-shadow);
}

.site-footer {
  padding-block: var(--section-gap);
  background: var(--paper);

}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--section-gap);
}

.footer-primary {
  display: flex;
  align-items: baseline;
  gap: var(--content-gap);
  min-width: 0;
}

@media (max-width: 720px) {
  .footer-primary { flex-direction: column; align-items: flex-start; gap: calc(var(--content-gap) / 4); }
}

.footer-copyright,
.footer-note,
.footer-contact {
  margin: 0;

}

.footer-copyright {
  flex: 0 0 auto;

}

.footer-contact {
  text-align: right;
}

.footer-contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.page-intro {
  padding-block: clamp(64px, 9vw, 128px) clamp(48px, 6vw, 80px);
}

.page-title {
  margin: 0;

}

.page-title span {
  display: block;
}

.page-pronunciation {
  margin: var(--grid-gap) 0 0;

}

.page-deck {
  margin: var(--section-gap) 0 0;
}

.page-intro-body {
  margin-top: var(--content-gap);
}

.page-intro-body p {
  margin: 0 0 var(--grid-gap);
}

.page-intro-body p:last-child {
  margin-bottom: 0;
}

.case-hero {
  padding-block: clamp(64px, 9vw, 128px) 40px;
}

.case-title {
  margin: 0;

}

.case-deck {
  margin: var(--hero-deck-gap) 0 0;

}

.draft-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-small);
  margin-bottom: var(--content-gap);
}

.draft-tag::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--blue);
}

.case-cover {
  overflow: hidden;
  margin-top: clamp(48px, 7vw, 96px);
  border: var(--quiet-border);
  border-radius: var(--image-radius);
  background: var(--soft);

}

.case-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.fact {
  min-width: 0;
  padding: var(--heading-content-gap) var(--heading-content-gap) var(--content-gap) 0;
}

.fact + .fact {
  padding-left: var(--heading-content-gap);
  border-left: 1px solid var(--ink);
}

.fact dt {
  margin-bottom: var(--space-small);

  text-transform: uppercase;

}

.fact dd {
  margin: 0;

}

.case-tags {
  padding-top: var(--heading-content-gap);
}

.case-body {
  padding-block: clamp(64px, 8vw, 128px);
}

.case-layout {
  display: grid;
  grid-template-columns: var(--toc-width) minmax(0, 1fr);
  gap: var(--story-column-gap);
  align-items: start;
}

.case-toc {
  position: sticky;
  top: 92px;
}

.case-toc nav {
  display: grid;
  gap: var(--space-tight);
}

.case-toc a {
  display: block;
  padding: var(--space-small) var(--card-content-gap);
  border-radius: var(--control-radius);

  text-transform: uppercase;
}

.case-toc a:hover,
.case-toc a[aria-current="true"] {

  background: var(--soft);

}

.case-sections {
  min-width: 0;
}

.story-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr);
  gap: clamp(32px, 7vw, 112px);
  padding-block: clamp(56px, 7vw, 112px);
}

.case-sections .story-row {
  grid-template-columns: 1fr;
  gap: var(--content-gap);
  scroll-margin-top: 32px;
}

.story-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.eyebrow {
  margin: var(--space-tight) 0 0;
}

.story-content h2 {
  max-width: 820px;
  margin: 0 0 var(--card-content-gap);

}

.story-content h3 {
  margin: var(--section-gap) 0 var(--card-content-gap);

}

.story-content p {
  max-width: 720px;
  margin: 0 0 var(--heading-content-gap);
}

.callout {
  max-width: 820px;
  margin-top: var(--section-gap);
  padding: var(--callout-inset);
  background: var(--soft);

  border-radius: var(--surface-radius);
}

.callout strong {
  display: block;
  margin-bottom: var(--card-content-gap);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--section-gap);
}

.metric {
  min-height: 0;
  padding: var(--content-gap);
  background: var(--soft);

  border-radius: var(--surface-radius);
}

.metric-value {
  display: block;
  margin-bottom: var(--card-content-gap);

}

.content-frame {
  margin-top: var(--section-gap);
  min-height: 350px;
  padding: var(--content-gap);
  background: var(--soft);

  border-radius: var(--surface-radius);
  display: grid;
  place-items: center;
  text-align: center;

}

.comparison-card > span {

  text-transform: uppercase;
}

.case-diagram {
  width: 100%;
  margin: var(--section-gap) 0 0;
  overflow: hidden;
  border-radius: var(--image-radius);
  background: var(--soft);

}

.case-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.comparison-card ul {
  margin: var(--card-content-gap) 0 0;
  padding-left: var(--heading-content-gap);

}

.comparison-card li {
  margin-bottom: var(--space-small);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: var(--section-gap);
}

.comparison-card {
  padding: var(--comparison-inset);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

.comparison-card p {
  margin: var(--card-content-gap) 0;
}

.comparison-card-accent {
  background: var(--accent-soft);

}

.section-intro {
  max-width: 720px;
  margin-top: var(--heading-content-gap);

}

.workflow-primary {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: var(--section-gap);
  background: var(--paper);

}

.validation-finding > div > span {

  text-transform: uppercase;
}

.decision-sequence article > span {

  text-transform: uppercase;
}

.validation-finding {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: var(--content-gap);
  border-top: 1px solid var(--ink);
}

.split-evidence {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.validation-finding h3 {
  margin: var(--card-content-gap) 0 var(--grid-gap);

}

.split-evidence .case-diagram {
  margin: 0;
}

.validation-finding-risk {
  display: block;
}

.validation-finding-risk > div {
  max-width: 760px;
}

.decision-sequence {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--ink);
}

.decision-sequence article {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--heading-content-gap);
  align-items: start;
  padding: var(--heading-content-gap) 0;
  border-bottom: var(--quiet-border);
}

.decision-sequence h3,
.decision-sequence p {
  margin: 0;
}

.decision-sequence p strong {
  display: block;

  text-transform: uppercase;
}

.decision-sequence .decision-final {
  margin-top: var(--grid-gap);
  padding: var(--comparison-inset);
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--ink);

  color: var(--paper);
}

.decision-sequence .decision-final > span {
  color: var(--accent-on-dark);
}

.decision-sequence .decision-final p {
  color: var(--paper);
}

.validation-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-sequence.validation-decision-grid .decision-card {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  min-width: 0;
}

.validation-decision-grid .decision-card h3,
.validation-decision-grid .decision-card p {
  margin: 0;
}

.validation-decision-grid .decision-card .case-diagram {
  margin-top: auto;
}

.decision-sequence.validation-decision-grid .decision-final {
  grid-column: 1 / -1;
  display: grid;
  grid-template: auto auto auto 1fr / minmax(0, .7fr) minmax(0, 1.3fr);
}

.validation-decision-grid .decision-final > span,
.validation-decision-grid .decision-final > h3,
.validation-decision-grid .decision-final > p {
  grid-column: 1;
}

.validation-decision-grid .decision-final .case-diagram {
  grid-column: 2;
  grid-row: 1 / span 4;
  margin-top: 0;
}

.about-copy {
  padding-bottom: clamp(80px, 10vw, 144px);
}

.bio-section {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr);
  gap: clamp(32px, 7vw, 112px);
  padding-block: clamp(48px, 6vw, 80px);
  border-top: var(--quiet-border);
}

.bio-section h2 {
  margin: var(--space-tight) 0 0;

  text-transform: uppercase;

}

.bio-section-visual {
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
}

.bio-section-visual > h2 {
  max-width: 900px;
  margin: 0;

  text-transform: none;
}

.outside-stories {
  display: grid;
}

.outside-story {
  display: grid;
  grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.outside-story + .outside-story {
  padding-top: clamp(48px, 6vw, 80px);
  border-top: var(--quiet-border);
}

.outside-story-copy {
  max-width: 32rem;
}

.outside-story-content > p {
  margin: 0 0 var(--heading-content-gap);
}

.outside-story-content > p:last-of-type {
  margin-bottom: 0;
}

.outside-story-heading {
  margin: 0;
}

.outside-gallery {
  display: grid;
  gap: var(--card-content-gap);
  width: 100%;
  max-width: none;
  margin: 0;
}

.outside-story-content .outside-gallery {
  margin-top: var(--comparison-inset);
}

.outside-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.travel-gallery,
.sports-gallery,
.disney-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.travel-gallery img,
.sports-gallery img,
.disney-gallery img {
  aspect-ratio: 4 / 5;
}

.sports-golf-1 {
  object-position: center 60%;
}

.disney-gallery img:first-child {
  object-position: center 35%;
}

.disney-gallery img:nth-child(2) {
  object-position: center 52%;
}

.not-found {
  min-height: calc(100vh - 92px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(64px, 10vw, 144px);
}

.not-found h1 {
  max-width: 980px;
  margin: 0;

}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 48px;
  padding: var(--card-content-gap) var(--heading-content-gap);
  border-radius: var(--pill-radius);
  background: var(--ink);

  color: var(--paper);

}

@media (max-width: 720px) {
  .site-header {
    height: 76px;
  }

  .nav {
    gap: var(--grid-gap);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    margin-top: var(--grid-gap);
  }

  .project-card {
    grid-template-columns: 1fr;
    gap: var(--heading-content-gap);
  }

  .project-media,
  .project-media img {
    min-height: 240px;
  }

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

  .fact:nth-child(3) {
    border-left: 0;
  }

  .fact:nth-child(n+3) {
    border-top: 1px solid var(--ink);
  }

  .story-row {
    grid-template-columns: 1fr;
    gap: var(--content-gap);
  }

  .story-content {
    min-width: 0;
  }

  .metrics,
  .comparison-grid,
  .split-evidence {
    grid-template-columns: 1fr;
  }

  .workflow-primary {
    overflow-x: auto;
  }

  .workflow-primary img {
    min-width: 760px;
  }

  .decision-sequence article {
    grid-template-columns: 1fr;
    gap: var(--space-small);
  }

  .validation-decision-grid {
    grid-template-columns: 1fr;
  }

  .decision-sequence.validation-decision-grid .decision-final {
    grid-column: auto;
    grid-template: none;
  }

  .validation-decision-grid .decision-final > span,
  .validation-decision-grid .decision-final > h3,
  .validation-decision-grid .decision-final > p,
  .validation-decision-grid .decision-final .case-diagram {
    grid-column: auto;
    grid-row: auto;
  }

  .bio-section {
    grid-template-columns: 1fr;
    gap: var(--content-gap);
  }

  .bio-section-visual {
    gap: 40px;
  }

  .outside-story {
    grid-template-columns: 1fr;
    gap: var(--eyebrow-heading-gap);
  }

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

  .sports-gallery {
    width: 100%;
    max-width: none;
  }

  .sports-gallery img {
    grid-area: auto;
  }

  .metric {
    min-height: 150px;
  }
}

body[data-project-page="afars"] .narrow-copy,
body[data-project-page="afars"] .section-intro {
  max-width: 46rem;
}

body[data-project-page="afars"] .afars-primary-metrics {
  display: grid;

  width: 100%;

}

.story-content > .balanced-bridge-copy {
  margin-block: var(--section-gap);
}

.story-content > .balanced-bridge-copy > p:last-child {
  margin-bottom: 0;
}

body[data-project-page="afars"] .afars-primary-metrics .metric {
  min-height: 0;

}

body[data-project-page="afars"] .section-intro {
  margin-bottom: clamp(48px, 7vw, 80px);

}

body[data-project-page="afars"] .research-note {
  width: 100%;
  margin-top: clamp(48px, 7vw, 80px);
  padding: var(--content-gap);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

body[data-project-page="afars"] .research-note > p:not(.kicker) {
  max-width: 52rem;
  margin-bottom: 0;
}

body[data-project-page="afars"] .research-artifacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
  margin-top: var(--section-gap);
}

body[data-project-page="afars"] .research-artifact {
  min-width: 0;
  margin: 0;
}

body[data-project-page="afars"] .research-artifact-label {
  margin: 0 0 var(--card-content-gap);

  text-transform: uppercase;
}

body[data-project-page="afars"] .research-artifact img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--image-radius);
}

body[data-project-page="afars"] .research-artifact figcaption {
  margin-top: var(--caption-gap);

}

body[data-project-page="afars"] .asset-placeholder.compact {
  min-height: 9rem;
}

body[data-project-page="afars"] .model-principle {
  max-width: 52rem;
  margin-top: var(--section-gap);
}

body[data-project-page="afars"] .evidence-annotations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--grid-gap);
}

body[data-project-page="afars"] .evidence-annotations > div {
  padding: var(--heading-content-gap) 0;
  border-top: var(--quiet-border);
}

body[data-project-page="afars"] .evidence-annotations span,
body[data-project-page="afars"] .upstream-callout > span,
body[data-project-page="afars"] .prototype-sequence span {

  text-transform: uppercase;
}

body[data-project-page="afars"] .upstream-callout {
  width: 100%;
  max-width: none;

}

body[data-project-page="afars"] .afars-principle-card > div {
  padding: 0;
  border: 0;
}

body[data-project-page="afars"] .afars-principle-card p {
  margin: var(--card-content-gap) 0 0;
}

body[data-project-page="afars"] .scope-first-release {
  display: grid;
  gap: var(--space-small);
  width: 100%;
  margin-top: var(--section-gap);
  padding: var(--content-gap);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

body[data-project-page="afars"] .scope-first-release span {

  text-transform: uppercase;
}

body[data-project-page="afars"] .scope-rows {
  display: grid;
  gap: 20px;
  width: 100%;
  margin-top: var(--section-gap);
}

body[data-project-page="afars"] .scope-rows article {
  display: grid;
  grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding: 4px 0;
}

body[data-project-page="afars"] .scope-decision-meta {
  display: grid;
  gap: var(--space-tight);
}

body[data-project-page="afars"] .scope-actor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-tight);
}

body[data-project-page="afars"] .scope-actor-tag {
  width: fit-content;
  padding: var(--space-tight) var(--space-small);
  border-radius: var(--actor-tag-radius);
  color: var(--paper);

}

body[data-project-page="afars"] .scope-actor-reporting {
  background: var(--actor-reporting);
}

body[data-project-page="afars"] .scope-actor-operations {
  background: var(--actor-operations);
}

body[data-project-page="afars"] .scope-rows h3,
body[data-project-page="afars"] .scope-rows p,
body[data-project-page="afars"] .scope-rows .kicker {
  margin: 0;
}

body[data-project-page="afars"] .scope-rows h3 {
  margin: 0 !important;
}

body[data-project-page="afars"] .prototype-placeholder {
  align-content: start;
  padding: var(--callout-inset);
}

body[data-project-page="afars"] .prototype-sequence {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--grid-gap);
  align-items: center;
  width: 100%;
  margin-top: clamp(32px, 5vw, 64px);
  text-align: left;
}

body[data-project-page="afars"] .prototype-sequence > strong {
  grid-column: 1 / -1;
  padding-top: var(--content-gap);
  border-top: var(--quiet-border);
  text-align: center;
}

body[data-project-page="afars"] .quiet-status {
  padding-top: clamp(80px, 10vw, 144px);
}

body[data-project-page="afars"] .status-part {
  margin-top: var(--subsection-gap);
}

body[data-project-page="afars"] .status-part > .kicker {
  margin-bottom: var(--section-gap);
}

body[data-project-page="afars"] .status-reflection h2 {
  margin-top: 0;
}

@media (max-width: 820px) {

  body[data-project-page="afars"] .scope-rows article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body[data-project-page="afars"] .prototype-sequence > strong {
    grid-column: auto;
  }
}

.visual-system-page {
  padding-bottom: clamp(80px, 10vw, 144px);
}

.visual-system-hero {
  padding-block: clamp(64px, 9vw, 128px) clamp(48px, 6vw, 80px);
}

.visual-system-hero h1 {
  max-width: 900px;
  margin: 0;
}

.visual-system-hero .type-lead {
  max-width: 760px;
  margin: var(--section-gap) 0 0;
}

.visual-system-section {
  padding-block: clamp(56px, 7vw, 96px);
}

.visual-system-section + .visual-system-section {
  border-top: var(--quiet-border);
}

.visual-system-section > .type-section {
  max-width: 820px;
  margin: var(--heading-content-gap) 0 var(--section-gap);
}

.visual-system-intro {
  max-width: 720px;
  margin: 0 0 var(--section-gap);
}

.type-specimens {
  display: grid;
  gap: var(--grid-gap);
}

.type-specimen {
  display: grid;
  grid-template-columns: minmax(11rem, .55fr) minmax(0, 1.45fr);
  gap: var(--content-gap);
  align-items: start;
  padding: var(--content-gap);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

.type-specimen-meta {
  display: grid;
  gap: var(--space-tight);
}

.type-specimen-example {
  min-width: 0;
  margin: 0;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.swatch {
  overflow: hidden;
  border: var(--quiet-border);
  border-radius: var(--surface-radius);
  background: var(--paper);

}

.swatch-color {
  height: 7rem;
  background: var(--swatch);
}

.swatch-copy {
  padding: var(--grid-gap);
}

.swatch-copy strong {
  display: block;

}

.swatch-copy span {
  display: block;
  margin-top: var(--space-tight);

}

.component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.component-demo {
  min-width: 0;
}

.component-demo > .type-caption {
  margin: var(--card-content-gap) 0 0;
}

.component-demo .callout {
  height: calc(100% - 2.1rem);
  margin-top: 0;
}

.component-demo .metric {
  height: calc(100% - 2.1rem);
}

.component-demo .content-frame {
  height: calc(100% - 2.1rem);
  margin-top: 0;
}

.component-demo .comparison-card {
  height: calc(100% - 2.1rem);
  padding: var(--content-gap);
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--soft);

}

.component-demo .comparison-card .type-component {
  margin: var(--card-content-gap) 0 0;
}

.hierarchy-demo {
  padding: var(--callout-inset);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

.hierarchy-demo .type-section {
  max-width: 760px;
  margin: var(--card-content-gap) 0 var(--heading-content-gap);
}

.hierarchy-demo .type-lead {
  max-width: 700px;
  margin: 0;
}

.hierarchy-demo .type-component {
  margin: var(--section-gap) 0 var(--card-content-gap);
}

.hierarchy-demo .type-body {
  max-width: 680px;
  margin: 0;
}

.hierarchy-demo .metric {
  max-width: 24rem;
  margin-top: var(--section-gap);
  background: var(--paper);

}

.hierarchy-demo .type-caption {
  margin: var(--card-content-gap) 0 0;
}

@media (max-width: 820px) {
  .type-specimen,
  .component-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 440px) {
  .swatch-grid {
    grid-template-columns: 1fr;
  }
}

body[data-project-page] .metric {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--card-content-gap);
}

body[data-project-page] .metric-value {
  margin: 0;

}

body[data-project-page] .metric-label {
  margin: 0;
}

body[data-project-page="afars"] .story-content .kicker,
body[data-project-page="afars"] .locked-copy > .kicker,
body[data-project-page="afars"] .decision-section > .kicker {

  text-transform: uppercase;
}

body[data-project-page="afars"] .story-content h3,
body[data-project-page="afars"] .locked-copy h3,
body[data-project-page="afars"] .decision-section > h3 {
  margin: var(--component-heading-before) 0 var(--component-heading-after);

}

body[data-project-page="afars"] .locked-statement {
  width: 100%;
  max-width: none;

}

body[data-project-page="afars"] .locked-statement > p:last-child {
  max-width: 48rem;

}

body[data-project-page="afars"] .editorial-tension {

  width: 100%;
  max-width: none;

}

body[data-project-page="afars"] .editorial-tension > div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}

body[data-project-page="afars"] .editorial-tension strong {
  display: block;

}

body[data-project-page="afars"] .asset-placeholder,
body[data-project-page="afars"] .product-heroes figure > div {
  border: 1px dashed var(--line);
  border-radius: 0;
  background: var(--soft);

}

body[data-project-page="afars"] .locked-subsection {
  grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.35fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin-top: var(--subsection-gap);
  padding-block: 0;
}

body[data-project-page="afars"] .section-intro:has(+ .locked-subsection),
body[data-project-page="afars"] .section-intro:has(+ .decision-section) {
  margin-bottom: 0;
}

body[data-project-page="afars"] .insight-line {
  margin-top: var(--content-gap) !important;

}

body[data-project-page="afars"] .locked-subsection .case-diagram {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-project-page="afars"] #findings .section-intro {
  margin-bottom: 0;
}

body[data-project-page="afars"] .afars-finding-stack {
  display: block;
  margin-top: var(--subsection-gap);
}

body[data-project-page="afars"] .afars-finding-stack .locked-copy {
  max-width: 46rem;
}

body[data-project-page="afars"] .afars-finding-stack .case-diagram {
  margin-top: var(--section-gap);
}

body[data-project-page="afars"] .afars-finding-stack .afars-evidence-70 {
  width: 70%;
  margin-inline: auto;
}

body[data-project-page="afars"] .afars-finding-stack .afars-evidence-full {
  width: 100%;
  margin-inline: 0;
}

body[data-project-page="afars"] .decision-section {
  margin-top: var(--subsection-gap);
  padding-block: 0;
  border: 0 !important;
}

body[data-project-page="afars"] .decision-section + .decision-section {
  border-top: 0;
}

body[data-project-page="afars"] .measurement-areas {
  width: 100%;

}

body[data-project-page="afars"] .measurement-areas span,
body[data-project-page="afars"] .product-heroes figcaption span {

  text-transform: uppercase;
}

body[data-project-page="afars"] .measurement-areas strong,
body[data-project-page="afars"] .product-heroes figcaption strong {
  display: block;

}

body[data-project-page="afars"] .prototype-placeholder {
  width: 100%;
  min-height: 28rem;
  border-radius: 0;
}

body[data-project-page="afars"] .product-heroes {
  width: 100%;
  gap: var(--grid-gap);
}

body[data-project-page="afars"] .product-heroes figure > div {
  min-height: 24rem;
}

body[data-project-page="afars"] .product-heroes figcaption {
  padding: var(--grid-gap) 0 0;
}

@media (max-width: 820px) {

  body[data-project-page="afars"] .afars-finding-stack .afars-evidence-70,
  body[data-project-page="afars"] .afars-finding-stack .afars-evidence-full {
    width: 100%;
  }
}

body[data-project-page="afars"] .story-content > p {
  max-width: 46rem;
}

.product-heroes,
.measurement-areas {
  display: grid;

}

.measurement-areas span {
  display: block;
  margin-bottom: var(--space-small);

  text-transform: uppercase;
}

.asset-placeholder {
  display: grid;
  min-height: 18rem;
  place-content: center;
  padding: var(--section-gap);
  border: 1px dashed var(--line);
  background: var(--soft);

  text-align: center;
}

.prototype-placeholder {
  display: grid;
  min-height: 28rem;
  place-content: center;
  margin-top: var(--section-gap);
  padding: var(--section-gap);
  background: var(--ink);

  color: var(--paper);
  text-align: center;
}

.prototype-placeholder span {
  color: var(--accent-on-dark);

}

.prototype-placeholder strong {
  margin-top: var(--grid-gap);

}

.prototype-placeholder p {
  margin: var(--card-content-gap) auto 0;
  color: var(--inverse-secondary);
}

.product-heroes {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--grid-gap);
}

.product-heroes figure {
  margin: 0;
}

.product-heroes figure > div {
  display: grid;
  min-height: 22rem;
  place-content: center;
  padding: var(--grid-gap);
  border: 1px dashed var(--line);
  background: var(--soft);

  text-align: center;
}

.product-heroes figcaption {
  padding: var(--card-content-gap) 0;

}

.measurement-areas strong {
  display: block;

}

@media (max-width: 820px) {

  .prototype-placeholder {
    min-height: 20rem;
  }
}

.locked-statement {
  max-width: 46rem;

}

.editorial-tension {
  display: grid;

  max-width: 50rem;

}

.editorial-tension span,
.product-heroes figcaption span {
  display: block;
  margin-bottom: var(--space-small);

  text-transform: uppercase;
}

.locked-subsection {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 112px);
}

.locked-copy h3,
.decision-section > h3 {
  margin-top: var(--space-tight);

}

.insight-line {
  margin-top: var(--content-gap) !important;

}

.decision-section {
  padding-block: clamp(64px, 8vw, 112px);
}

.decision-section + .decision-section {
  border-top: var(--quiet-border);
}

.prototype-placeholder strong {
  max-width: 58rem;

}

.product-heroes figcaption span {
  margin: 0 0 var(--space-tight);
}

.product-heroes figcaption strong {
  display: block;
}

body[data-project-page="citysite"] .story-content > h2 {
  max-width: 900px;
}

body[data-project-page="citysite"] .case-diagram.role-intro-visual {
  width: 80%;
  max-width: none;
  margin-top: var(--section-gap);
  margin-inline: auto;
}

body[data-project-page="citysite"] .case-diagram.workflow-primary {
  margin-inline: auto;
}

body[data-project-page="citysite"] .workflow-primary img {
  margin-inline: auto;
}

body[data-project-page="citysite"] .closing-question,
body[data-project-page="citysite"] .model-emphasis {
  max-width: 760px;
  margin-top: var(--eyebrow-heading-gap);

}

body[data-project-page="citysite"] .expansion-comparison + p {
  margin-top: var(--section-gap);
}

body[data-project-page="citysite"] .research-findings {
  display: grid;

}

body[data-project-page="citysite"] .research-finding {
  display: grid;
  grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.35fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

body[data-project-page="citysite"] .research-finding-reverse .research-copy {
  order: 2;
}

body[data-project-page="citysite"] .research-finding-reverse .case-diagram {
  order: 1;
}

body[data-project-page="citysite"] .research-finding-reverse {
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .8fr);
}

body[data-project-page="citysite"] .research-copy > span,
body[data-project-page="citysite"] .north-star-editorial > span,
body[data-project-page="citysite"] .reframe-inline span,
body[data-project-page="citysite"] .north-star-role > div:first-child > span {

  text-transform: uppercase;
}

body[data-project-page="citysite"] .research-copy h3,
body[data-project-page="citysite"] .north-star-role h3 {
  margin: var(--component-heading-before) 0 var(--component-heading-after);

}

body[data-project-page="citysite"] .reframe-inline {
  display: grid;

}

body[data-project-page="citysite"] .reframe-inline > div {
  display: grid;

}

body[data-project-page="citysite"] .reframe-inline > b {
  align-self: center;

}

body[data-project-page="citysite"] .north-star-editorial {
  margin-top: var(--section-gap);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--surface-radius);
  background: var(--soft);

}

body[data-project-page="citysite"] .north-star-editorial p {
  max-width: 760px;
  margin: var(--grid-gap) 0 0;
}

body[data-project-page="citysite"] .validation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-content-gap);
  margin: var(--content-gap) 0;
}

body[data-project-page="citysite"] .validation-chips span {
  padding: var(--card-content-gap) var(--grid-gap);
  border-radius: var(--pill-radius);
  background: var(--soft);

  text-transform: uppercase;
}

body[data-project-page="citysite"] .north-star-role {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--content-gap);
  align-items: start;
  margin-top: clamp(64px, 9vw, 112px);
}

body[data-project-page="citysite"] .north-star-role-reverse > div:first-child,
body[data-project-page="citysite"] .north-star-role-reverse .north-star-video {
  order: initial;
}

body[data-project-page="citysite"] .north-star-video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--soft);

}

body[data-project-page="citysite"] .outcome-block {
  margin-top: clamp(40px, 5vw, 64px);
}

body[data-project-page="citysite"] .outcome-label {
  margin-bottom: var(--card-content-gap);

  text-transform: uppercase;
}

@media (max-width: 820px) {
  body[data-project-page="citysite"] .case-diagram.role-intro-visual {
    width: 100%;
  }

  body[data-project-page="citysite"] .research-finding-reverse .research-copy,
  body[data-project-page="citysite"] .north-star-role-reverse > div:first-child {
    order: 1;
  }

  body[data-project-page="citysite"] .research-finding-reverse .case-diagram,
  body[data-project-page="citysite"] .north-star-role-reverse .north-star-video {
    order: 2;
  }

  body[data-project-page="citysite"] .reframe-inline > b {
    transform: rotate(90deg);
    transform-origin: center;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .project-card,
  .project-arrow {
    transition: none;
  }

  .project-card:hover .project-arrow {
    transform: none;
  }
}

@media (max-width: 900px) {
  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--content-gap) / 4);
  }

  .footer-contact {
    text-align: left;
  }

  .case-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .case-toc {
    top: 0;
    z-index: 10;
    margin-inline: calc(var(--pad) * -1);
    padding: var(--card-content-gap) var(--pad);
    overflow-x: auto;
    background: var(--toc-surface);
    backdrop-filter: blur(var(--toc-blur));
  }

  .case-toc nav {
    display: flex;
    width: max-content;
    gap: var(--space-tight);
  }

  .case-toc a {
    padding: var(--space-small) var(--card-content-gap);
    white-space: nowrap;
  }

  .case-sections .story-row {
    scroll-margin-top: 72px;
  }
}

@media (max-width: 440px) {
  .nav a:first-child {
    display: none;
  }
}

body[data-project-page] :is(
  .research-artifact-label,
  .measurement-areas span,
  .scope-first-release span,
  .evidence-annotations span,
  .upstream-callout > span,
  .research-copy > span,
  .north-star-editorial > span,
  .reframe-inline span,
  .north-star-role > div:first-child > span,
  .validation-chips span,
  .decision-card > span,
  .outcome-label
) {

  text-transform: uppercase;
}

.tag-list span {
  border-radius: var(--tag-radius);
}

.callout,
.metric,
.content-frame,
.comparison-card {
  border: var(--quiet-border);
  box-shadow: none;
}

.case-toc a[aria-current="true"] {

  background: var(--accent-soft);

}

body[data-project-page] .case-hero {
  padding-bottom: clamp(48px, 6vw, 80px);
}

body[data-project-page] .case-cover {
  padding: clamp(12px, 2vw, var(--content-gap));
  border: 0;
  background: var(--media);

}

body[data-project-page] .case-cover img {
  border-radius: 0;
}

body[data-project-page] .facts {
  margin-top: 0;
  border: 0;

}

body[data-project-page] .case-body {
  padding-block: clamp(80px, 10vw, 144px);
}

body[data-project-page] .case-sections .story-row {
  gap: var(--h2-before-gap);
  padding-block: var(--chapter-padding);
}

body[data-project-page] .case-sections .story-row:first-child {
  padding-top: 0;
}

body[data-project-page] .case-sections .story-row:last-child {
  padding-bottom: 0;
}

body[data-project-page] .story-content h2 {
  margin-bottom: var(--h2-after-gap);
}

body[data-project-page] .story-content > p + p {
  margin-top: var(--heading-content-gap);
}

body[data-project-page] .story-content p,
body[data-project-page] .section-intro {
  width: 100%;
  max-width: none;
}

body[data-project-page] .callout,
body[data-project-page] .metric,
body[data-project-page] .content-frame,
body[data-project-page] .comparison-card {
  border: 0;
}

body[data-project-page] .case-diagram {
  border: 0 !important;
}

body[data-project-page] .validation-finding {
  border: 0;
}

body[data-project-page] .decision-sequence {
  display: grid;
  gap: var(--grid-gap);
  border: 0;
}

body[data-project-page] .decision-sequence article {
  padding: clamp(24px, 3vw, var(--hero-deck-gap));
  border: 0;
  border-radius: var(--surface-radius);
  background: var(--soft);

}

body[data-project-page] .decision-sequence .decision-final {
  background: var(--ink);

}

body[data-project-page] .decision-sequence.validation-decision-grid .decision-final {
  background: var(--soft);
  color: var(--body-on-surface);
}

body[data-project-page] .validation-decision-grid .decision-final > span {
  color: var(--ink);
}

body[data-project-page] .validation-decision-grid .decision-final > p {
  color: var(--body-on-surface);
}

body[data-project-page] .validation-decision-grid .decision-final > .final-takeaway {
  color: var(--ink);
}

body[data-project-page] .validation-decision-grid .decision-final .final-takeaway strong {
  font: inherit;
  text-transform: none;
}

@media (max-width: 720px) {
  body[data-project-page] .facts {
    gap: var(--space-small);
  }

  body[data-project-page] .case-sections .story-row {
    padding-block: var(--chapter-padding-mobile);
  }

  body[data-project-page] .decision-sequence article {
    gap: var(--grid-gap);
  }
}

.tag-list span {
  border: 0;
  background: var(--soft);

}

body[data-project-page] .case-cover,
body[data-project-page] .case-diagram {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-project-page] .case-cover img,
body[data-project-page] .case-diagram img {
  display: block;
  border-radius: var(--image-radius);
}

.case-image-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.lightbox-open {
  overflow: hidden;
}

/* Final desktop product evidence shares the CitySite walkthrough treatment. */
body[data-project-page] .final-desktop-media { overflow: visible; }
body[data-project-page] .final-desktop-media > img,
body[data-project-page] .final-desktop-media .case-image-trigger {
  border-radius: 20px;
  box-shadow: var(--project-hover-shadow);
}
body[data-project-page] .final-desktop-media img { border-radius: 20px; }

.case-lightbox {
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, var(--section-gap));
  border: 0;
  background: var(--viewer-surface);
  -webkit-backdrop-filter: blur(var(--viewer-blur));
  backdrop-filter: blur(var(--viewer-blur));

}

.case-lightbox::backdrop {
  background: transparent;
}

.case-lightbox-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--grid-gap);
  width: 100%;
  height: 100%;
}

.case-lightbox-close {
  justify-self: end;
  padding: var(--space-small) var(--card-content-gap);
  border: 0;
  border-radius: var(--control-radius);
  background: var(--ink);

  color: var(--paper);
  font: inherit;

  cursor: pointer;
}

.case-lightbox-close span {
  margin-left: var(--space-tight);

}

.case-lightbox-image {
  align-self: center;
  justify-self: center;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 8.5rem);
  object-fit: contain;
  border-radius: var(--image-radius);
}

.case-lightbox-caption {
  max-width: 72rem;
  margin: 0 auto;

  text-align: center;
}

body[data-project-page] .facts {
  margin: clamp(24px, 3vw, var(--section-gap)) 0 0;
}

body[data-project-page] .fact,
body[data-project-page] .fact + .fact,
body[data-project-page] .fact:nth-child(n) {
  padding-block: var(--card-content-gap);
}

body[data-project-page] .case-tags {
  margin-top: clamp(20px, 2.5vw, var(--eyebrow-heading-gap));
  padding-top: 0;
}

body[data-project-page] .facts {
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body[data-project-page] .fact,
body[data-project-page] .fact + .fact,
body[data-project-page] .fact:nth-child(n) {
  padding: var(--card-content-gap) var(--heading-content-gap);
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-project-page] .fact:first-child {
  padding-left: 0;
}

body[data-project-page] .fact:last-child {
  padding-right: 0;
}

body[data-project-page] .fact:not(:last-child) {
  border-right: var(--quiet-border);
}

body[data-project-page] .case-toc a,
body[data-project-page] .case-toc a:hover,
body[data-project-page] .case-toc a[aria-current="true"] {
  background: transparent;
}

body[data-project-page] .case-toc a {
  position: relative;
  padding-left: var(--grid-gap);

}

body[data-project-page] .case-toc a[aria-current="true"]::before {
  position: absolute;
  left: 0;
  content: "→";

}

@media (max-width: 720px) {
  body[data-project-page] .facts {
    row-gap: var(--content-gap);
  }

  body[data-project-page] .fact:nth-child(2) {
    padding-right: 0;
    border-right: 0;
  }

  body[data-project-page] .fact:nth-child(3) {
    padding-left: 0;
    border-right: var(--quiet-border);
  }
}

.visual-system-page :is(.metric, .callout, .content-frame, .comparison-card) {
  border: 0;
  box-shadow: none;
}

.visual-system-page .metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--card-content-gap);
}

.visual-system-page .anatomy-sheet {
  border: var(--quiet-border);
  padding: var(--content-gap);
  margin-top: var(--section-gap);
}

.visual-system-page .anatomy-sheet :is(p,h3,h4),
.visual-system-page .measured-card-content :is(p,h3,h4) {
  margin: 0;
}

.visual-system-page .anatomy-sheet .type-section {
  max-width: 820px;
}

.visual-system-page .context-edge {
  padding: var(--card-content-gap);
  background: var(--soft);

}

.visual-system-page .measure-gap {
  position: relative;
  height: var(--measure);
  min-height: 0;
  background: repeating-linear-gradient(135deg,var(--guide-stripe),var(--guide-stripe) 4px,transparent 4px,transparent 8px);
  border-left: 1px solid var(--blue);
  margin: 0;
}

.visual-system-page .measure-gap::before,
.visual-system-page .measure-gap::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 1px;
  left: -4px;
  background: var(--blue);
}

.visual-system-page .measure-gap::before {
  top: 0;
}

.visual-system-page .measure-gap::after {
  bottom: 0;
}

.visual-system-page .measure-gap span {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);

  background: var(--paper);

  padding-inline: var(--space-tight);
  max-width: calc(100% - 1rem);
}

.visual-system-page .chapter-measure {
  --measure: calc(var(--chapter-padding) * 2);
}

.visual-system-page .anatomy-media {
  display: grid;
  place-content: center;
  text-align: center;
  min-height: 7rem;
  padding: var(--grid-gap);
  background: var(--media);

}

.visual-system-page .annotated-card-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--grid-gap);
}

.visual-system-page .measured-card {
  min-width: 0;
  border-radius: var(--surface-radius);
  background: var(--soft);

  padding: var(--card-inset);
  position: relative;
}

.visual-system-page .measured-card-content {
  border: var(--guide-faint-line);
}

.visual-system-page .dimension-inset {
  margin: 0 0 var(--card-content-gap);
}

.visual-system-page .measured-card-content + .dimension-inset {
  margin: var(--card-content-gap) 0 0;
}

.visual-system-page .dimension-horizontal {
  border-top: var(--guide-context-line);
  padding-top: var(--space-small);
}

.visual-system-page .layout-shell-guide {
  padding: var(--pad);
  background: var(--soft);

  border: var(--quiet-border);
}

.visual-system-page .layout-columns-guide {
  display: grid;
  grid-template-columns: var(--toc-width) minmax(0,1fr);
  gap: var(--story-column-gap);
}

.visual-system-page .layout-toc-guide {
  padding: var(--grid-gap);
  border: 1px dashed var(--blue);

}

.visual-system-page .layout-story-guide {
  padding-block: var(--grid-gap);
  min-width: 0;

}

.visual-system-page .width-guide {
  padding: var(--card-content-gap);
  margin-top: var(--grid-gap);
  background: var(--paper);

  border: 1px dashed var(--blue);

  text-align: center;
}

.visual-system-page .width-80 {
  width: 80%;
  margin-inline: auto;
}

.visual-system-page .width-70 {
  width: 70%;
  margin-inline: auto;
}

.visual-system-page .responsive-rules {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--content-gap);
  margin-top: var(--section-gap);
}

.visual-system-page .type-context {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--line);
  padding-top: var(--card-content-gap);

}

.visual-system-page .type-context p {
  margin: var(--space-small) 0 0;
}

.visual-system-page .type-context .measure-gap {
  margin-block: var(--space-small);
}

@media (max-width: 900px) {
  .visual-system-page .layout-columns-guide {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 820px) {
  .visual-system-page .annotated-card-grid,
  .visual-system-page .responsive-rules {
    grid-template-columns: 1fr;
  }

  .visual-system-page .width-70,
  .visual-system-page .width-80 {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .visual-system-page .chapter-measure {
    --measure: calc(var(--chapter-padding-mobile) * 2);
  }
}

.display,
.page-title,
.case-title,
.case-title-long,
.type-display,
.not-found h1 {

  text-wrap: balance;
}

.story-content h2,
.type-section,
.bio-section-visual > h2,
.type-editorial,
body[data-project-page="citysite"] .model-emphasis {

  text-wrap: balance;
}

.visual-system-page .font-pairing {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--grid-gap);
  margin-block: var(--section-gap);
}

.visual-system-page .font-pairing article {
  padding: var(--content-gap);
  background: var(--soft);

  border-radius: var(--surface-radius);
}

.visual-system-page .font-pairing p {
  margin: var(--space-small) 0 0;
}

.visual-system-page .type-button.type-specimen-example {
  margin: 0;
  padding: var(--card-content-gap) var(--heading-content-gap);
  border-radius: var(--pill-radius);
  background: var(--ink);

  color: var(--paper);
  width: fit-content;
}

.visual-system-page .pairing-examples {
  margin-top: var(--subsection-gap);
}

.visual-system-page .pairing-examples .callout {
  margin-top: 0;
}

.visual-system-page .pairing-examples .type-caption {
  margin-top: var(--caption-gap);
}

@media (max-width: 820px) {
  .visual-system-page .font-pairing {
    grid-template-columns: 1fr;
  }
}

.eyebrow,
.kicker,
.draft-tag,
.type-eyebrow,
body[data-project-page] :is(.eyebrow,.kicker,.draft-tag,.type-eyebrow) {

  text-transform: uppercase;
}
body[data-project-page="afars"] .story-content > p + :is(.afars-challenge,.prototype-placeholder,.measurement-areas),
body[data-project-page="afars"] .case-diagram + p,
body[data-project-page="afars"] :is(.product-heroes,.measurement-areas) + p { margin-top: var(--section-gap); }

/* Visual System measurement overlays: not production component styles. */

    /* Documentation guides only. The demonstrated .tag-list is unchanged. */
    .visual-system-page .tag-anatomy { margin-block: var(--section-gap); padding: var(--content-gap); border: var(--guide-line); border-radius: var(--surface-radius); }
    .visual-system-page .tag-anatomy .tag-list { margin-block: var(--eyebrow-heading-gap) var(--heading-content-gap); }
    .visual-system-page .tag-anatomy .tag-list span { position: relative; }
    .visual-system-page .tag-anatomy .tag-list span::before { content: ''; position: absolute; inset: var(--tag-padding-y) var(--tag-padding-x); border: var(--guide-line); pointer-events: none; }
    .visual-system-page .tag-anatomy .tag-list span:first-child::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--space-small); background: repeating-linear-gradient(135deg,transparent 0 2px,var(--guide-gap-color) 2px 4px); pointer-events: none; }
    .visual-system-page .tag-padding-map { display: inline-grid; grid-template-columns: var(--tag-padding-x) auto var(--tag-padding-x); grid-template-rows: var(--tag-padding-y) auto var(--tag-padding-y); margin-block: var(--space-small); outline: 1px solid var(--blue); background: repeating-linear-gradient(135deg,transparent 0 2px,var(--guide-padding-color) 2px 4px); }
    .visual-system-page .tag-padding-map div { grid-area: 2 / 2; background: var(--paper); padding: 0; border: var(--guide-line); }
    .visual-system-page .tag-specs { display: grid; grid-template-columns: minmax(150px,1fr) minmax(0,2fr); gap: var(--card-content-gap) var(--content-gap); }
    .visual-system-page .tag-specs dt, .visual-system-page .tag-specs dd { margin: 0; }
    @media (max-width: 600px) { .visual-system-page .tag-specs { grid-template-columns: 1fr; gap: var(--space-small); } .visual-system-page .tag-specs dd { margin-bottom: var(--card-content-gap); } }
.font-weight-sample[data-style="italic"] { font-style: italic; }

/* Homepage editorial composition; shared design tokens remain unchanged. */
.editorial-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--story-column-gap);
}
.homepage-editorial .homepage-composition {
  padding-block: var(--content-gap) var(--chapter-padding);
}
.homepage-editorial .homepage-intro-rail { min-width: 0; }
.homepage-editorial .hero {
  position: sticky;
  top: calc(92px + var(--content-gap));
  padding: 0;
}
.homepage-editorial .editorial-intro {
  margin: 0;
  max-width: none;
  width: 100%;
  text-wrap: pretty;
}
.homepage-editorial .work-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--chapter-padding);
  min-width: 0;
  padding: 0;
}
.homepage-editorial .project-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.homepage-editorial .project-card + .project-card {
  margin-top: 0;
}
.homepage-editorial .project-media {
  aspect-ratio: auto;
  min-height: 0;
  background: transparent;
}
.homepage-editorial .project-media img {
  min-height: 0;
  height: auto;
}
.homepage-editorial .project-media img {
  display: block;
  object-fit: contain;
}
.homepage-editorial .project-index { margin: 0; text-align: left; }
.project-index-current { font-weight: var(--type-emphasis-weight); }
.homepage-editorial .project-title {
  margin: calc(var(--heading-content-gap) / 2) 0;
}
.homepage-editorial .project-subtitle { margin: 0; }
.homepage-editorial .project-card { cursor: pointer; }
.homepage-editorial .project-title-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 300ms ease-out;
}
.homepage-editorial .project-card:is(:hover, :focus-visible) .project-title-link {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  .homepage-editorial .project-title-link { transition: none; }
}
.homepage-editorial .project-meta { grid-template-columns: minmax(0, 1fr); }
.homepage-editorial .project-metadata {
  margin: var(--heading-content-gap) 0 0;

}
.homepage-editorial .project-tags { margin: calc(var(--content-gap) / 2) 0 0; }
.homepage-editorial .project-card .tag-list span { background: var(--soft); }
@media (max-width: 900px) {
  .editorial-split-grid { grid-template-columns: minmax(0, 1fr); gap: var(--content-group-gap); }
  .homepage-editorial .homepage-composition { padding-top: var(--chapter-padding); }
  .homepage-editorial .hero { position: static; }
  .homepage-editorial .project-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.visual-system-page .sticky-layout-demo { margin-block: var(--section-gap); align-items: start; }
.visual-system-page .sticky-layout-demo > div { min-width: 0; }
.visual-system-page .sticky-layout-demo img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.visual-system-page .sticky-layout-demo .sticky-demo-projects { display: grid; gap: var(--section-gap); }

/* Shared left-aligned measure for page introductions, not narrative bodies. */
.intro-measure {
  inline-size: var(--intro-measure);
  max-inline-size: none;
  text-align: left;
}
@media (max-width: 900px) {
  :root { --intro-measure: 100%; }
}
@media (max-width: 720px) {
  .homepage-editorial .homepage-composition { padding-block: var(--chapter-padding-mobile); gap: var(--content-group-gap); }
  .homepage-editorial .work-section { row-gap: var(--chapter-padding-mobile); }
}

/* Seven primary visual roles. Semantic heading rank remains independent of size. */
body { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--type-body-weight); line-height: var(--body-leading); letter-spacing: var(--body-tracking); color: var(--body-on-surface); --body-copy-color: var(--body-on-surface); }
h1,h2,.type-section,.page-title,.display,.not-found h1 { font-family: var(--font-editorial); font-size: var(--type-section); font-weight: var(--type-editorial-weight); line-height: var(--type-section-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
.case-title,.type-display { font-family: var(--font-editorial); font-size: var(--type-hero); font-weight: var(--type-editorial-weight); line-height: var(--type-hero-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
.type-editorial-subsection { font-family: var(--font-editorial); font-size: var(--type-editorial-subsection); font-weight: var(--type-editorial-weight); line-height: var(--type-section-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
h3,h4,h5,h6,.type-component,.type-small-heading,.type-editorial,.insight-line,.model-emphasis,.closing-question,.locked-statement > p:not(.kicker),.measurement-areas strong,.editorial-tension strong,.reframe-inline strong,.scope-first-release strong,.product-heroes figcaption strong,.prototype-placeholder strong { font-family: var(--font-sans); font-size: var(--type-small-heading); font-weight: var(--type-emphasis-weight); line-height: var(--type-small-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
.type-subsection,.decision-section > h3,.north-star-role h3,.outside-story-heading { font-family: var(--font-sans); font-size: var(--type-subsection); font-weight: var(--type-ui-weight); line-height: var(--type-subsection-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
.type-body,.type-lead,.case-deck,.page-deck,.section-intro,.metric-label,.scope-rationale,.fact dd,.project-subtitle,.type-caption,.research-artifact figcaption,.scope-reason { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--type-body-weight); line-height: var(--body-leading); letter-spacing: var(--body-tracking); color: var(--body-on-surface); }
.section-intro > p { font: inherit; color: inherit; }
.type-eyebrow,.eyebrow,.kicker,.draft-tag,.section-title,.fact dt,.research-artifact-label,.measurement-areas span,.scope-first-release span,.evidence-annotations span,.upstream-callout > span,.research-copy > span,.north-star-editorial > span,.reframe-inline span,.north-star-role > div:first-child > span,.validation-finding > div > span,.decision-card > span,.outcome-label,.comparison-card > span,.editorial-tension span,.product-heroes figcaption span,.prototype-sequence span { font-family: var(--font-sans); font-size: var(--type-eyebrow-size); font-weight: var(--type-eyebrow-weight); line-height: var(--type-eyebrow-leading); letter-spacing: var(--type-eyebrow-tracking); color: var(--ink); text-transform: uppercase; }
.type-data,.metric-value,.metric strong { font-family: var(--font-editorial); font-size: var(--type-data); font-weight: var(--type-editorial-weight); line-height: var(--type-section-leading); letter-spacing: var(--body-tracking); color: var(--ink); }
strong,b { font-weight: var(--type-emphasis-weight); }
.model-emphasis strong { font: inherit; }
.type-caption,.research-artifact figcaption,.scope-reason,.type-specimen-meta span,.type-context,.dimension-horizontal,.dimension-inset,.context-edge { color: var(--muted); }
.tag-list span { font-family: var(--font-sans); font-size: var(--small-title-size); font-weight: var(--small-title-weight); line-height: var(--small-title-leading); letter-spacing: var(--small-title-tracking); color: var(--muted); }
.tag-list.tag-list-plain { gap: var(--grid-gap); }
.tag-list.tag-list-plain span,.project-card .tag-list.tag-list-plain span { padding: 0; border: 0; border-radius: 0; background: transparent; }
.nav a,.case-toc a { font-family: var(--font-sans); font-size: var(--type-navigation-size); font-weight: var(--type-body-weight); line-height: var(--type-eyebrow-leading); letter-spacing: var(--body-tracking); color: var(--body-on-surface); background: transparent; }
.nav a[aria-current],.case-toc a[aria-current="true"],.case-toc a[aria-current="true"]::before { color: var(--ink); font-weight: var(--type-ui-weight); background: transparent; }
.case-toc a[aria-current="true"],.case-toc a[aria-current="true"]::before { font-weight: var(--type-emphasis-weight); }
.button,.type-button,.case-image-trigger-label,.lightbox-close { font-family: var(--font-sans); font-size: var(--type-button); font-weight: var(--type-ui-weight); line-height: var(--type-ui-leading); letter-spacing: var(--body-tracking); }
.brand { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--type-emphasis-weight); line-height: var(--body-leading); letter-spacing: var(--brand-tracking); }
.site-footer p { font-size: var(--small-title-size); font-weight: var(--type-body-weight); line-height: var(--body-leading); letter-spacing: var(--body-tracking); color: var(--muted); }
.footer-copyright { font-weight: var(--type-ui-weight); }
.font-weight-sample { font-size: var(--type-subsection); line-height: var(--type-subsection-leading); letter-spacing: var(--body-tracking); }
.font-weight-sample[data-family="editorial"] { font-family: var(--font-editorial); }
.font-weight-sample[data-weight="400"] { font-weight: 400; }
.font-weight-sample[data-weight="500"] { font-weight: 500; }
.font-weight-sample[data-weight="600"] { font-weight: 600; }
.font-weight-sample[data-weight="700"] { font-weight: 700; }
.scope-actor-tag { font-family: var(--font-sans); font-size: var(--small-title-size); font-weight: var(--small-title-weight); line-height: var(--actor-tag-leading); letter-spacing: var(--actor-tag-tracking); }
.story-content :is(h3,h4) { margin-block: var(--component-heading-before) var(--component-heading-after); }
.scope-rows h3,.scope-rows .type-component { margin: 0; }
.editorial-statement { background: transparent; border: 0; border-radius: 0; padding: 0; margin-block: var(--section-gap); }
.ruled-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--section-gap); align-items: start; border-block: var(--quiet-border); border-inline: 0; padding: var(--section-gap) 0; margin-block: var(--section-gap); background: transparent; border-radius: 0; box-shadow: none; }
.ruled-group.ruled-group-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ruled-group.ruled-group-stack { grid-template-columns: minmax(0,1fr); }
.ruled-group > :is(div,article) { min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; align-self: start; }
.ruled-group > :is(div,article) > :first-child { margin-top: 0; }
.ruled-group > :is(div,article) > :last-child { margin-bottom: 0; }
.ruled-group .metric { display: flex; flex-direction: column; gap: var(--card-content-gap); }
.ruled-group .metric-value { margin: 0; }
.ruled-group :is(.comparison-card,.metric) { max-width: none; }
.ruled-group .case-diagram { margin-top: var(--section-gap); }
.ruled-group.evidence-annotations p { margin-top: var(--card-content-gap); }
.ruled-group > b { display: none; }
.ruled-group-stack .locked-copy > .kicker { margin-bottom: var(--card-content-gap); }
.ruled-group-stack .locked-copy > h3 { margin-top: 0; }
.editorial-card { background: var(--soft); border: 0; border-radius: var(--surface-radius); padding: var(--callout-inset); margin-top: var(--section-gap); }
.editorial-card > :first-child { margin-top: 0; }
.editorial-card > :last-child { margin-bottom: 0; }
.homepage-editorial .project-subtitle { color: var(--body-on-surface); }
.page-pronunciation { font-family: var(--font-sans); font-size: var(--body-size); font-weight: var(--type-body-weight); line-height: var(--body-leading); }
a:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-tight); }
.story-content a:not(.button) { color: var(--ink); text-decoration: underline; text-underline-offset: var(--space-tight); }
@media (max-width: 820px) { .ruled-group,.ruled-group.ruled-group-three { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 720px) { :is(.case-title,.page-title,.type-display,.not-found h1) { overflow-wrap: anywhere; } }

/* Functional reference controls and supporting metadata use existing roles. */
.v2-nav-demo a { font-size: var(--type-navigation-size); font-weight: var(--type-body-weight); line-height: var(--type-eyebrow-leading); }
.v2-nav-demo a[aria-current] { font-weight: var(--type-emphasis-weight); }
.fact dt { color: var(--ink); }
.ruled-group-stack .research-finding { align-items: start; }

.case-lightbox-close span { font-size: var(--close-icon-size); line-height: 0; }
.case-lightbox-close { font-family: var(--font-sans); font-size: var(--type-button); font-weight: var(--type-ui-weight); line-height: var(--type-ui-leading); }

.scope-actor-tag { color: var(--paper); }

/* Preserve existing mobile media and prototype stacking after grouping cleanup. */
@media (max-width: 820px) {
  .product-heroes,.locked-subsection { grid-template-columns: minmax(0,1fr); }
  body[data-project-page] .prototype-sequence { grid-template-columns: minmax(0,1fr); }
}
/* Opt-in Section Reveal: default/no-JS content remains visible. */
@property --section-reveal-progress { syntax: '<number>'; inherits: true; initial-value: 1; }
:root { --section-reveal-duration: 750ms; --section-reveal-offset: 40px; --section-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .is-reveal-pending { --section-reveal-progress: 0; }
  .is-reveal-active { animation: section-reveal-progress var(--section-reveal-duration) var(--section-reveal-easing) both; }
  :is(.is-reveal-pending,.is-reveal-active)[data-reveal-mode="whole"],
  :is(.is-reveal-pending,.is-reveal-active)[data-reveal-mode="intro"] [data-reveal-part] {
    opacity: var(--section-reveal-progress);
    transform: translateY(calc(var(--section-reveal-offset) * (1 - var(--section-reveal-progress))));
  }
}
@keyframes section-reveal-progress { from { --section-reveal-progress: 0; } to { --section-reveal-progress: 1; } }
@media (prefers-reduced-motion: reduce) {
  .is-reveal-pending,.is-reveal-active { --section-reveal-progress: 1; animation: none; }
}