/* A deliberately stepped scale: display, section, title, reading, label. */
:root {
  --type-display: clamp(3rem, 8vw, 8rem);
  --type-section: clamp(2rem, 4.2vw, 4rem);
  --type-title: clamp(1.5rem, 2.8vw, 2.5rem);
  --type-lead: clamp(1.25rem, 1.8vw, 1.5rem);
  --type-body: 1.125rem;
  --type-label: .875rem;
  --type-caption: .8125rem;
}

/* Keep the moving wall's main words much larger than their explanations. */
.word-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: clamp(1.5rem, 6.25vw, 8rem);
  line-height: 1.2;
  letter-spacing: -.045em;
  padding-bottom: .16em;
}
.concept-row {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  font-size: clamp(2.5rem, 13vw, 14rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.065em;
  padding-block: .025em .1em;
}
.concept-row > span:first-child { align-self: center; }
.word-row .concept-tagline {
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.015em;
  max-width: 25ch;
  padding-block: .4em;
}

/* Navigation and annotations stay quiet and readable. */
.main-nav, .detail-tabs { font-size: 1rem; }
.page-label, .footer-note, .footer-studio, .motion-control,
.detail-location, .detail-credit, .intro-bottom,
.catalog-nav a, .relation-heading > span,
.relation-heading > a, .back-to-articles, .reading-aside {
  font-size: var(--type-label);
}
.page-label, .entry-category, .card-category, .reading-category {
  letter-spacing: .025em;
}
.catalog-heading > span, .card-number, .type-number,
.entry-number, .entry-category, .card-category, .reading-category,
.work-caption, .detail-figure figcaption, .craft-card > span {
  font-size: var(--type-caption);
}

/* Page titles give each page one clear visual starting point. */
.catalog-title, .articles-intro h1, .reading-header h1, .info-name {
  font-size: var(--type-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.06em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.catalog-title { margin-bottom: 38px; }
.articles-intro { gap: 5vw; padding-bottom: 64px; }
.articles-intro > p { font-size: var(--type-lead); line-height: 1.5; }
.reading-header h1 { max-width: 1200px; }
.reading-lead {
  font-size: var(--type-lead);
  line-height: 1.5;
  letter-spacing: -.015em;
  max-width: 48ch;
  margin-top: 36px;
}
.info-intro { justify-content: flex-start; gap: 32px; }
.info-name { font-size: clamp(3.5rem, 9vw, 10rem); }
.info-intro > p {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.025em;
  max-width: 40ch;
}
.intro-bottom { margin-top: auto; padding-top: 56px; }

/* Section titles are a full step above card titles and reading text. */
.catalog-section { margin-top: 72px; }
.catalog-heading { margin-bottom: 30px; }
.catalog-heading h2, .relation-heading h2 {
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.catalog-intro, .relation-heading > p {
  font-size: var(--type-body);
  line-height: 1.55;
}
.catalog-projects .grid-project h3, .type-panel h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.concept-card h3 {
  font-size: clamp(3rem, 4.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.055em;
  margin-block: 30px 20px;
}
.research-card h3, .article-entry h2, .perspective-list summary {
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.craft-card h3 { font-size: 1.75rem; font-weight: 600; }
.entry-description, .research-card > p, .perspective-list details p {
  font-size: var(--type-body);
  line-height: 1.55;
}
.entry-description { max-width: 62ch; }
.relation-list .relation-definition {
  font-size: var(--type-lead);
  line-height: 1.4;
}
.relation-list .relation-example { font-size: var(--type-label); }
.article-body { font-size: 1.25rem; line-height: 1.65; max-width: 68ch; }
.article-body h2 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.2;
  text-wrap: balance;
}
.article-body .concept-definition { font-size: var(--type-lead); line-height: 1.4; }

/* A larger project name, supported by small location and image captions. */
.work-title { font-size: var(--type-title); font-weight: 600; line-height: 1.15; }
.work-title h2 { font-weight: inherit; letter-spacing: -.035em; }
.work-title > span { font-size: var(--type-label); font-weight: 400; line-height: 1.4; }
.detail-information h2 {
  font-size: var(--type-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.detail-description { font-size: var(--type-lead); line-height: 1.5; letter-spacing: -.015em; }

@media (max-width: 1050px) {
  .concept-card h3 { font-size: 3.5rem; }
}
@media (max-width: 640px) {
  :root { --type-title: 1.75rem; }
  .word-row { gap: 8px; padding-bottom: .24em; }
  .concept-row { padding-block: .05em .18em; }
  .word-row .concept-tagline { font-size: .9375rem; line-height: 1.4; max-width: 97%; }
  .catalog-title { margin-bottom: 28px; }
  .catalog-nav { gap: 0 20px; }
  .catalog-section { margin-top: 48px; }
  .catalog-heading { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 24px; }
  .catalog-heading h2 { font-size: 2rem; }
  .catalog-heading > a { font-size: var(--type-caption); }
  .catalog-projects .grid-project h3, .type-panel h3 { font-size: 1.375rem; }
  .concept-card h3 { font-size: 3rem; }
  .catalog-intro, .relation-heading > p, .research-card > p, .entry-description,
  .perspective-list details p { font-size: 1.0625rem; }
  .relation-list .relation-definition { font-size: 1.25rem; }
  .relation-list .relation-example { font-size: var(--type-label); }
  .articles-intro { gap: 25px; padding-bottom: 42px; }
  .article-entry { grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 10px; }
  .article-entry h2 { font-size: 1.75rem; }
  .reading-lead { margin-top: 28px; }
  .article-body { font-size: var(--type-body); }
  .info-intro { gap: 28px; }
  .intro-bottom { padding-top: 40px; }
  .detail-information h2 { font-size: var(--type-display); }
}
@media (max-width: 360px) {
  .concept-card h3 { font-size: 2.625rem; }
  .main-nav { font-size: .9375rem; }
}
@media (max-height: 600px) and (min-width: 641px) {
  .work-title { font-size: 1.75rem; }
}