/* Shared theme and typography adapter for the original case-study layouts. */
:root {
  --chrome-header-height: 72px;
  --chrome-gutter: clamp(20px, 4vw, 64px);
  --legacy-chrome-accent: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.legacy-case-page {
  --appearance-unit: 16px;
  --legacy-case-muted: color-mix(in srgb, var(--muted) 90%, var(--text));
  min-width: 320px;
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Match the homepage font roles while retaining the original content layout. */
.legacy-case-page #content-holder :where(.is-content, p, li, h4, h5, h6, span, a, [data-font]) {
  font-family: var(--sans);
}
.legacy-case-page #content-holder :is(h1, h2, h3),
.legacy-case-page #content-holder :is(h1, h2, h3) * {
  font-family: var(--serif);
}
.legacy-case-page #content-holder h1 { letter-spacing: -.02em; text-wrap: balance; }
/* Imported section surfaces and reading colors follow the appearance palette. */
.legacy-case-page #content-holder,
.legacy-case-page #content-holder .content-container,
.legacy-case-page #content-holder .transition-wrap,
.legacy-case-page #content-holder .sections,
.legacy-case-page #content-holder smp-section {
  color: var(--text);
  background-color: var(--bg) !important;
}
.legacy-case-page #content-holder [data-case-surface="raised"] {
  background-color: var(--surface) !important;
}
.legacy-case-page #content-holder [data-case-texture] {
  background-image: linear-gradient(color-mix(in srgb, var(--bg) 91%, transparent), color-mix(in srgb, var(--bg) 91%, transparent)), url("background-pattern.jpg") !important;
  background-size: auto, 760px !important;
}
.legacy-case-page #content-holder :is(p, li, blockquote) { color: var(--legacy-case-muted); }
.legacy-case-page #content-holder :is(h1, h2, h3, h4, h5, h6) { color: var(--text); }
.legacy-case-page #content-holder strong { color: inherit; }
.legacy-case-page #content-holder .footer-links a:any-link { color: var(--legacy-case-muted); }
.legacy-case-page #content-holder .footer-links a:hover { color: var(--text); }
.legacy-case-page #content-holder [data-module="spacer"] .spacer { background: var(--line); }
.legacy-case-page #content-holder :focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }
.legacy-case-page #content-holder { position: relative; height: auto; min-height: 0; }
.legacy-case-page #content-holder .content-container,
.legacy-case-page #content-holder .transition-wrap { position: relative; height: auto; }
.legacy-case-page #content-holder [data-case-hero] { padding-top: max(0px, calc(var(--legacy-hero-padding, 8rem) - var(--chrome-header-height))) !important; }
.legacy-case-page #content-holder iframe { max-width: 100%; }
.legacy-case-page .site-header,
.legacy-case-page .mobile-nav { font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.legacy-case-page > .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); }
.legacy-case-page .brand { width: 52px; min-height: 44px; }
.legacy-case-page .header-actions { gap: clamp(16px, 2vw, 32px); }
.legacy-case-page .desktop-nav { gap: clamp(24px, 2.75vw, 48px); }
.legacy-case-page .desktop-nav a { min-height: 44px; font-size: 12px; }
.legacy-case-page .desktop-nav a,
.legacy-case-page .mobile-nav a { color: var(--legacy-chrome-accent); }
.legacy-case-page .desktop-nav a[aria-current],
.legacy-case-page .mobile-nav a[aria-current] { color: var(--text); text-decoration: none; }
.legacy-case-page .menu-button { width: 44px; height: 44px; }
.legacy-case-page .menu-icon,
.legacy-case-page .menu-icon::before,
.legacy-case-page .menu-icon::after { width: 24px; height: 2px; }
.legacy-case-page .menu-button[aria-expanded="false"] .menu-icon::before { transform: translateY(-7.2px); }
.legacy-case-page .menu-button[aria-expanded="false"] .menu-icon::after { transform: translateY(7.2px); }
.legacy-case-page .mobile-nav { overflow-y: auto; }
.legacy-case-page .mobile-nav a { min-height: 76px; font-size: 16px; }
.legacy-case-page .skip-link { color: var(--bg); background: var(--text); }
.legacy-case-page .site-header :focus-visible:not(.settings-trigger),
.legacy-case-page .mobile-nav :focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }

@media (max-width: 47.999rem) {
  .legacy-case-page #content-holder [data-case-hero] h1:not([data-font-size-xs]) {
    font-size: 2.222rem !important;
    line-height: 1.2 !important;
  }
  .legacy-case-page #content-holder [data-case-credit] { margin-inline: 0 !important; }
}

@media (max-width: 30rem) {
  :root { --chrome-header-height: 72px; }
  .legacy-case-page .brand { width: 44px; }
}