/* TOYOTA public-page consistency layer — r45
   Shared typography, spacing, surfaces, navigation and keyboard focus. */
:root {
  --site-bg: #050608;
  --site-panel: #101217;
  --site-line: rgba(220, 225, 232, .18);
  --site-text: #ede7da;
  --site-muted: #aaa69c;
  --site-gold: #e8ce93;
  --site-radius: 14px;
}
html { color-scheme: dark; scroll-behavior: smooth; }
body { color: var(--site-text); }
img, picture, video { max-width: 100%; }
header.top { min-height: 68px; }
header.top .logo { line-height: 1.15; }
.chrome-h1 { line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.wrap > p, .wrap > ul, .wrap > ol, .wrap > h2, .wrap > h3 { margin-top: 12px; }
.wrap p { line-height: 1.75; }
.ornate.panel { border-radius: var(--site-radius); }
.p-t { letter-spacing: .025em; }
.cbtn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.chips .cbtn { white-space: normal; }
footer { color: var(--site-muted); text-align: center; line-height: 1.65; }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--site-gold); outline-offset: 3px; }
@media (max-width: 520px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  header.top { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  header.top .logo { font-size: clamp(18px, 5vw, 24px); letter-spacing: clamp(2px, 1vw, 5px); }
  .chrome-h1 { font-size: clamp(1.45rem, 6vw, 2rem); }
  .chips { gap: 6px; }
}