/* One type scale for the homepage and both fading console pages. */
:root {
  --site-font: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --site-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --site-gutter: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --site-panel-inset: 1.2rem;
  --site-prompt-size: .74rem;
  --site-title-size: clamp(1.75rem, 8vw, 4.6rem);
  --site-role-size: 1.05rem;
  --site-body-size: 1.02rem;
  --site-body-leading: 1.75;
  --site-status-size: .78rem;
  --site-button-size: .78rem;
  --site-button-padding: .85em 1.25em;
}
.hero .who, .console .prompt { font: 400 var(--site-prompt-size)/1.7 var(--site-font); letter-spacing: .05em; }
.hero h1, .console h1 { font: 600 var(--site-title-size)/1.06 var(--site-font); letter-spacing: .015em; }
.hero .role, .console .role { font: 600 var(--site-role-size)/1.6 var(--site-font); letter-spacing: .06em; }
.hero .prop, .console .copy, .console .appreciation { font: 400 var(--site-body-size)/var(--site-body-leading) var(--site-font-body); }
.hero .btn, .console .button { max-width: 100%; min-height: 44px; padding: var(--site-button-padding); font: 500 var(--site-button-size)/1.7 var(--site-font); overflow-wrap: anywhere; }
.hero .status-rows, .console .status { font: 400 var(--site-status-size)/1.6 var(--site-font); }
.hero .status-rows .status-accent { color: var(--accent); }
.console .coffee-note { font: 400 var(--site-prompt-size)/1.7 var(--site-font); }
@media (max-width: 900px) {
  :root { --site-role-size: .84rem; --site-body-size: .9rem; --site-body-leading: 1.65; }
}
@media (max-width: 640px) {
  :root { --site-panel-inset: .8rem; --site-status-size: .74rem; }
  .hero .actions, .console .actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  :root { --site-button-size: .7rem; --site-button-padding: .7rem .8rem; }
}
@media print {
  .hero .btn, .console .button { color: #17251d; }
  .hero .status-rows .status-accent { color: #17251d; }
}
