/* Local editorial study: images lead; the trajectory is their annotation. */
:root {
  --body-type: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --metadata-type: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
body { font-family: var(--body-type); }
.brand, .project-line strong, .dialog-copy h2 { font-family: var(--ui); }
.site-header nav a, .header-actions a {
  font-family: var(--metadata-type);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .025em;
}
.legacy-video-background::after { background: rgb(5 5 5 / .65); }
.hero-kicker, .section-eyebrow, .story-item-label, .project-line small,
.works-page-kicker, .works-section-heading, .origin-figures strong {
  font-family: var(--metadata-type);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .045em;
}
.text-link { font-family: var(--metadata-type); font-size: 12px; font-weight: 400; }
.practice-hero--featured {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(32px, 5vw, 88px);
  padding-top: 48px;
  padding-bottom: 80px;
}
.practice-hero--featured .hero-copy { padding-top: 44px; }
.practice-hero--featured .hero-kicker { font-size: 11px; margin-bottom: 32px; }
.practice-hero--featured h1 {
  font-size: clamp(32px, 2.7vw, 46px);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.practice-hero--featured .hero-copy > p:not(.hero-kicker) {
  max-width: 26ch;
  font-size: 15px;
  line-height: 1.65;
  color: #b7b7b1;
}
.hero-feature .story-card { overflow: visible; }
.hero-feature .story-card .project-line {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px 0 18px;
  background: transparent;
  border-bottom: 1px solid #777;
}
.hero-feature .story-card .project-line strong {
  font-size: clamp(44px, 7.7vw, 126px);
  line-height: .94;
  font-weight: 800;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.hero-feature .project-line small { color: var(--blue); }
.hero-feature .story-caption { font-size: 14px; line-height: 1.65; max-width: 55ch; }
.hero-feature .story-item-label { margin-bottom: 16px; color: #d4d4cb; font-size: 11px; }
.story-section { padding-top: clamp(72px, 7vw, 120px); padding-bottom: clamp(80px, 9vw, 150px); }
.story-heading {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 2fr);
  align-items: start;
  column-gap: 44px;
  margin-bottom: 60px;
  padding-top: 18px;
  border-top: 1px solid #666;
}
.story-heading .section-eyebrow { grid-column: auto; max-width: 23ch; color: #a5a59f; }
.story-heading h2 {
  font-family: var(--body-type);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.035em;
}
.story-heading > p:last-child { font-size: 16px; line-height: 1.65; color: #b9b9b3; max-width: 53ch; }
.story-item-label { color: #a1a19a; font-size: 11px; }
.story-card .project-line { padding: 18px 0 14px; border-bottom: 0; }
.story-card .project-line strong {
  font-size: clamp(25px, 2.15vw, 36px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.04;
}
.story-card .project-line small { color: #a9a9a3; font-size: 12px; }
.story-caption { max-width: 44ch; margin-top: 6px; font-size: 15px; line-height: 1.65; }
.project:hover img, .project:focus-visible img { transform: none; }
.project:hover .project-line strong { color: #a8beff; }
.street-comparison { grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); align-items: center; gap: clamp(44px, 7vw, 112px); }
.context-reference { max-width: 360px; }
.reference-media { aspect-ratio: 1280 / 851; }
.context-reference figcaption { font-size: 13px; line-height: 1.6; max-width: 39ch; }
.context-reference figcaption strong { font-size: 12px; color: #aaa; }
.image-credit { font-size: 11px; line-height: 1.6; }
.street-comparison .story-card .project-line strong { font-size: clamp(30px, 3.6vw, 60px); }
.street-comparison .story-caption { max-width: 55ch; font-size: 17px; }
.everyday-pair {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  width: 75%;
  margin: 90px 0 0 auto;
  padding-top: 0;
  gap: clamp(30px, 5vw, 80px);
  border-top: 0;
}
.everyday-pair > :last-child { margin-top: 110px; }
.version-encounters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: 30px; align-items: start; }
.version-encounters .story-item,
.version-encounters .story-item:first-child,
.version-encounters .story-item:last-child { border: 0; padding: 0; }
.version-encounters .story-item-label { min-height: 3.3em; color: #a1a19a; }
.version-encounters .story-item:nth-child(2) { margin-top: 70px; }
.version-encounters .story-item:last-child .project-line strong { font-size: clamp(32px, 3.7vw, 62px); }
.version-encounters .story-caption { font-size: 14px; color: #aaa; }
.story-reflection {
  width: 75%;
  margin: 70px 0 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  padding: 28px 0 0;
  border-left: 0;
}
.story-reflection h3 { font-size: clamp(25px, 2.6vw, 40px); font-style: italic; }
.story-reflection p { font-size: 15px; line-height: 1.65; color: #b9b9b3; }
#city-returns > .story-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
#city-returns > .story-grid > :first-child .project-line strong { font-size: clamp(30px, 3vw, 50px); }
.origin-story { margin-top: 100px; padding-top: 44px; }
.origin-lead { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); }
.origin-lead .project-line strong { font-size: clamp(32px, 3.3vw, 54px); }
.origin-lead h3 { font-size: clamp(26px, 2.4vw, 36px); }
.origin-lead p { font-size: 15px; line-height: 1.7; }
.origin-figures { width: 78%; margin: 48px 0 0 auto; gap: 28px; }
.origin-figures figcaption { font-size: 13px; line-height: 1.6; }
.origin-figures strong { font-size: 11px; color: #aaa; }
.origin-status { margin-left: auto; width: 78%; font-size: 13px; line-height: 1.6; color: #aaa; }
#current > .story-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
#current > .story-grid > :first-child .project-line strong { font-size: clamp(40px, 5.2vw, 84px); }
.current-question { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 130px); margin-top: 90px; }
.current-question h3 { font-size: clamp(36px, 4.5vw, 68px); }
.current-question p { font-size: 16px; max-width: 51ch; }
.current-question .section-eyebrow { font-size: 11px; }
.current-question .story-item { align-self: center; }
.profile-summary { padding-top: 64px; padding-bottom: 72px; gap: 80px; }
.profile-summary p { font-size: 15px; }
.profile-summary .section-eyebrow { font-size: 11px; }
.works-card .project-line strong, .archive-card .project-line strong { font-size: clamp(19px, 1.65vw, 27px); line-height: 1.08; letter-spacing: -.025em; }
.works-card .project-line small, .archive-card .project-line small { font-size: 11px; }
.works-page-header h1 { font-family: var(--ui); font-weight: 700; font-size: clamp(60px, 8vw, 128px); line-height: .9; letter-spacing: -.055em; }
.works-page-guide p { font-size: 15px; }
.works-page-kicker, .works-section-heading { font-size: 11px; }
.works-grid, .works-archive-grid, .works-context-grid { row-gap: 42px; }
.dialog-copy p, .dialog-copy #dialogDescription { font-family: var(--body-type); }

@media (max-width: 1100px) {
  .practice-hero--featured { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; }
  .practice-hero--featured .hero-copy { padding-top: 32px; }
  .story-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px 36px; }
  .story-heading .section-eyebrow { grid-column: 1 / -1; max-width: none; }
  .version-encounters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .version-encounters .story-item:last-child { grid-column: 1 / -1; width: 80%; margin-left: auto; margin-top: 28px; }
  .version-encounters .story-item:nth-child(2) { margin-top: 0; }
  .version-encounters .story-item-label { min-height: 0; }
  .version-encounters .story-item:last-child .project-line strong { font-size: 48px; }
  .origin-lead { grid-template-columns: 1.3fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .practice-hero--featured { grid-template-columns: 1fr; gap: 36px; padding-top: 28px; padding-bottom: 64px; }
  .practice-hero--featured .hero-copy { padding: 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px 26px; }
  .practice-hero--featured .hero-kicker { grid-column: 1 / -1; margin: 0 0 8px; }
  .practice-hero--featured h1 { font-size: 32px; }
  .practice-hero--featured .hero-copy > p:not(.hero-kicker) { margin: 0; max-width: none; font-size: 14px; }
  .practice-hero--featured .text-link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  .hero-feature .story-card .project-line strong { font-size: clamp(38px, 9.8vw, 72px); }
  .story-heading { gap: 16px; margin-bottom: 36px; }
  .story-heading h2 { font-size: 27px; }
  .story-heading > p:last-child { font-size: 14px; }
  .street-comparison { gap: 24px; grid-template-columns: 1fr 1.7fr; }
  .street-comparison .story-card .project-line strong { font-size: 30px; }
  .street-comparison .story-caption { font-size: 15px; }
  .story-card .project-line { grid-template-columns: 1fr; gap: 8px; }
  .everyday-pair { width: 90%; gap: 30px; margin-top: 52px; }
  .everyday-pair > :last-child { margin-top: 60px; }
  .story-reflection { width: 100%; }
  #city-returns > .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #city-returns > .story-grid > :first-child { grid-column: 1 / -1; width: 90%; }
  .origin-lead { grid-template-columns: 1fr; }
  .origin-figures, .origin-status { width: 100%; }
  .origin-lead > :last-child { max-width: 58ch; }
  #current > .story-grid { gap: 28px; }
  .current-question { grid-template-columns: 1fr; gap: 28px; }
  .current-question .story-item { width: 80%; margin-left: auto; }
  .works-card .project-line strong, .archive-card .project-line strong { font-size: 20px; }
}
@media (max-width: 480px) {
  .site-header nav a, .header-actions a { font-size: 10px; }
  .brand { font-size: 20px; }
  .practice-hero--featured .hero-copy { gap: 12px 18px; grid-template-columns: 1fr; }
  .practice-hero--featured h1 { font-size: 30px; }
  .practice-hero--featured h1 br { display: none; }
  .practice-hero--featured .hero-copy > p:not(.hero-kicker) { max-width: 37ch; }
  .hero-feature .story-card .project-line strong { font-size: clamp(30px, 9.4vw, 46px); }
  .hero-feature .story-card .project-line { padding-top: 16px; gap: 12px; }
  .hero-feature .story-caption { font-size: 13px; }
  .story-section { padding-top: 56px; padding-bottom: 64px; }
  .story-heading { grid-template-columns: 1fr; gap: 16px; }
  .story-heading h2 { font-size: 24px; }
  .story-heading h2 br { display: none; }
  .story-heading > p:last-child { font-size: 15px; }
  .street-comparison { grid-template-columns: 1fr; gap: 30px; }
  .context-reference { width: 68%; }
  .street-comparison .story-card .project-line strong { font-size: 34px; }
  .everyday-pair { width: 100%; grid-template-columns: 1fr; gap: 36px; }
  .everyday-pair > :first-child { width: 90%; }
  .everyday-pair > :last-child { width: 82%; margin: 0 0 0 auto; }
  .version-encounters { grid-template-columns: 1fr; gap: 36px; }
  .version-encounters .story-item:first-child { width: 85%; }
  .version-encounters .story-item:nth-child(2) { width: 85%; margin-left: auto; }
  .version-encounters .story-item:last-child { width: 100%; margin: 0; grid-column: auto; }
  .version-encounters .story-item:last-child .project-line strong { font-size: 38px; }
  .story-reflection { grid-template-columns: 1fr; gap: 8px; }
  .story-reflection h3 { font-size: 30px; }
  .origin-story { margin-top: 60px; }
  .origin-figures { grid-template-columns: 1fr; width: 88%; }
  .origin-figures img { aspect-ratio: auto; max-height: 300px; }
  #current > .story-grid { grid-template-columns: 1fr; gap: 36px; }
  #current > .story-grid > :last-child { width: 82%; margin-left: auto; }
  #current > .story-grid > :first-child .project-line strong { font-size: 48px; }
  .current-question { margin-top: 64px; }
  .current-question h3 { font-size: 38px; }
  .current-question .story-item { width: 88%; }
  .profile-summary { grid-template-columns: 1fr; gap: 36px; }
  .works-card .project-line strong, .archive-card .project-line strong { font-size: 18px; }
  .works-grid, .works-context-grid, .works-archive-grid { row-gap: 26px; }
}
