/* Approved Areal typography. Noto Serif headings remain unchanged. */
@font-face {
  font-family:'Areal Mono';
  src:url('./fonts/areal-mono.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face {
  font-family:'Areal Semi Mono';
  src:url('./fonts/areal-semi-mono.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
html[data-ui-type=areal] {
  --mono:'Areal Mono','Ubuntu Mono',monospace;
  --body:'Areal Semi Mono','Areal Mono',monospace;
  --ds-type-control:12px;--ds-type-caption:12px;--ds-type-body:16px;--ds-type-intro:18px;
}
html[data-ui-type=areal] body {font-family:var(--body);font-size:var(--ds-type-body);line-height:1.6}
html[data-ui-type=areal] :is(button,nav,summary,label,input,select,textarea,.eyebrow,.chapter-index,.caption,.case-facts,.section-tail,.site-footer,.index-grid) {
  font-family:var(--mono);
}

/* Areal has a larger drawn x-height: 12px controls replace the previous 13px. */
html[data-ui-type=areal] body :is(.ds-control,.masthead .ui-button,.recap-download,.case-contents>summary,.back-top,.lb-controls button,.video-start,.ds-chapter,.case-overview .case-jumps a) {
  font-family:var(--mono);font-size:var(--ds-type-control);line-height:1.25;letter-spacing:0;
}
html[data-ui-type=areal] .masthead #main-nav {font-size:var(--ds-type-control)}
html[data-ui-type=areal] .masthead .case-contents>nav>a {font-size:var(--ds-type-control)}
html[data-ui-type=areal] .case-overview .hero-intro p {font-family:var(--body);font-size:var(--ds-type-intro);line-height:1.6;max-width:52ch}
html[data-ui-type=areal] .case-overview .recap-approach {font-family:var(--body);font-size:14px;line-height:1.65}
html[data-ui-type=areal] .case-overview .recap-idea-label {font-family:var(--mono);font-size:11px;letter-spacing:.04em}
html[data-ui-type=areal] .case-overview .case-facts>div {grid-template-columns:96px minmax(0,1fr);gap:12px}
html[data-ui-type=areal] .case-overview .case-facts dt {font-size:11px;line-height:1.5;letter-spacing:0}
html[data-ui-type=areal] .case-overview .case-facts dd {font-size:13px;line-height:1.6}
html[data-ui-type=areal] .chapter-header>p {font-family:var(--body);font-size:15px;line-height:1.65}
html[data-ui-type=areal] .chapter-index {font-size:12px}
html[data-ui-type=areal] .caption {font-size:var(--ds-type-caption);line-height:1.6}
html[data-ui-type=areal] .caption>span {white-space:normal;min-width:0;overflow-wrap:break-word}
html[data-ui-type=areal] :is(.section-tail,.site-footer) {font-size:var(--ds-type-caption)}
html[data-ui-type=areal] .metric p {font-family:var(--body);font-size:13px;line-height:1.6}
html[data-ui-type=areal] .metric-note p {font-family:var(--body);font-size:13px;line-height:1.65;max-width:70ch}
html[data-ui-type=areal] .metric-note .metric-source {font-family:var(--mono);font-size:11px;line-height:1.6}
html[data-ui-type=areal] .source-links a {font-family:var(--body);font-size:16px;line-height:1.55}
html[data-ui-type=areal] .source-links small {font-family:var(--mono);font-size:12px;line-height:1.6}
html[data-ui-type=areal] .image-index>summary {font-size:12px}
html[data-ui-type=areal] :is(.lb-toolbar,.lb-caption) {font-family:var(--mono);font-size:12px;line-height:1.6}

html[data-ui-type=areal] .ds-field :is(input,textarea,select) {font-family:var(--body);font-size:16px;line-height:1.6}
html[data-ui-type=areal] .ds-field label {font-size:12px;line-height:1.5}

@media (max-width:600px) {
  html[data-ui-type=areal] {--ds-type-intro:16px}
  html[data-ui-type=areal] .case-overview .recap-approach {font-size:14px}
  html[data-ui-type=areal] .case-overview .case-facts dd {font-size:12px}
  html[data-ui-type=areal] .case-overview .case-facts>div {grid-template-columns:88px minmax(0,1fr);gap:12px}
  html[data-ui-type=areal] .chapter-header>p {font-size:15px}
  html[data-ui-type=areal] .metric p {font-size:12px}
  html[data-ui-type=areal] .source-links a {font-size:15px}
}
@media (max-width:420px) {
  html[data-ui-type=areal] .case-overview .case-facts>div {grid-template-columns:1fr;gap:4px}
  html[data-ui-type=areal] .case-overview .case-facts {gap:16px}
  html[data-ui-type=areal] body .masthead .case-contents>summary {font-size:11px}
}
@media (max-width:360px) {
  /* Let the pixel contents icon carry the control on the narrowest phones. */
  html[data-ui-type=areal] body .masthead .case-contents>summary {width:var(--control-height);padding-inline:0}
  html[data-ui-type=areal] .case-contents>summary>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}