/* Shared case layout. Loaded after local styles; mobile roles live here once. */
.hero .hero-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) max-content;
  justify-content: start;
  gap: 32px 64px;
  margin: 48px 0 0;
  padding: 0;
  align-items: start;
}
.hero .hero-meta > div { margin: 0; padding: 0; min-width: 0; }
.hero .hero-meta dt,
.hero .hero-meta dd {
  padding: 0;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.hero .hero-meta dt { margin: 0; line-height: 1.25; color: #777; }
.hero .hero-meta dd { margin: 8px 0 0; line-height: 1.4; color: #4d4d49; }
@media (max-width: 760px) {
  :root {
    --case-body-size: 18px;
    --case-body-leading: 1.55;
    --case-section-title: 36px;
    --case-card-title: 20px;
    --case-small-size: 16px;
    --case-label-size: 14px;
    --case-space-xs: 8px;
    --case-space-sm: 12px;
    --case-space-md: 16px;
    --case-space-lg: 24px;
    --case-space-xl: 32px;
    --case-space-group: 48px;
    --case-space-section: 80px;
  }
  .hero .hero-meta { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .hero { padding: var(--case-space-lg) 0 var(--case-space-group); }
  .hero h1 { font-size: clamp(40px, 12.82vw, 50px); margin: var(--case-space-xl) 0 var(--case-space-lg); }
  .hero .hero-tags { gap: var(--case-space-xs); }
  .hero .hero-tags span { font-size: var(--case-small-size); padding: var(--case-space-xs) var(--case-space-sm); }
  .hero .hero-description { font-size: var(--case-body-size); line-height: var(--case-body-leading); }
  .hero .prototype-link { font-size: var(--case-small-size); margin-top: var(--case-space-lg); min-height: 48px; }
  .hero-artifact { margin-top: var(--case-space-lg); }
  .case-section { padding-top: var(--case-space-section); }
  .case-section > p,
  .case-section .editorial-intro,
  .case-section .context-copy,
  .sky-research .research-method-copy,
  .sky-research .research-finding p,
  .sky-solution .solution-copy p,
  .sky-critical .critical-state p,
  .research-insight-row p,
  .case-quote blockquote p,
  .testing-plan-copy,
  .layout-option > p,
  .decisions-copy p {
    font-size: var(--case-body-size);
    line-height: var(--case-body-leading);
  }
  .case-section > h2 + p,
  .case-section > h2 + .editorial-intro,
  .case-section > h2 + .context-copy,
  .case-section > h2 + .testing-plan-copy { margin-top: var(--case-space-lg); }
  .case-section p + p,
  .case-section .editorial-intro + .editorial-intro { margin-top: var(--case-space-sm); }
  .case-section .body-copy { font-size: var(--case-body-size); line-height: var(--case-body-leading); }
  .sky-research .research-finding h4,
  .sky-research .research-small-label,
  .sky-constraints .constraint-item h3,
  .constraint-row h3,
  .case-pair h3,
  .layout-option > h3,
  .decisions-copy h3 { font-size: var(--case-card-title); line-height: 1.3; }
  .artifact figcaption,
  .material figcaption { font-size: var(--case-small-size); line-height: 1.5; margin-top: var(--case-space-sm); }
  .eyebrow, .section-number { font-size: var(--case-label-size); }
  .more-cases h2 { font-size: var(--case-section-title); line-height: 1.15; margin-bottom: var(--case-space-group); }
  .more-case h3 { font-size: 22px; line-height: 1.3; margin: var(--case-space-lg) 0 var(--case-space-md); }
}

/* Preserve the authored type scale when a phone rotates during media playback. */
@media (max-width: 1100px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}