/* Accessible colour roles and 2026 homepage artwork alignment.
 * Loaded after the standard theme styles; safe for all tool page templates.
 */
:root {
  --accent-ink: #b83b0c;
  --accent-on-pale: #b83b0c;
  --accent-button: #bd3b0a;
  --accent-button-hover: #a63810;
}
html[data-theme="dark"] {
  --accent-ink: #ffa47f;
  --accent-on-pale: #ffa47f;
  --accent-button: #bd3b0a;
  --accent-button-hover: #a63810;
}
/* Body-sized orange text must pass WCAG AA against the cream/white surfaces. */
.eyebrow, .text-link, .strip-heading span, .category-strip a>span,
.tool-card .arrow, .card-icon, .sidebar-box .text-link, .workspace-icon,
.mega-feature-link, .mega-link:hover, .mega-link:focus-visible,
.breadcrumbs span[aria-current="page"], .status, .hero-proof .proof-emblem,
.art-float>span, .char-keyboard-description a, .inline-note a {
  color: var(--accent-ink);
}
.logo-words>span { color: var(--accent-ink); }
.logo-symbol { background: var(--accent-button); color: #fff; }
.button-primary, .gi-download-top { background: var(--accent-button); border-color: var(--accent-button); color: #fff; }
.button-primary:hover, .button-primary:focus-visible,
.gi-download-top:hover { background: var(--accent-button-hover); border-color: var(--accent-button-hover); color: #fff; }
html:not([data-theme="dark"]) .italic-accent,
html:not([data-theme="dark"]) .hero-copy em { color: #f45411; }
/* Avoid tiny decorative glyphs being the only hover or focus indicator. */
.button:focus-visible, .icon-button:focus-visible, .mega-link:focus-visible,
.char-key:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
/* Fix hero image clipping, natural row alignment and imperfect round icon. */
.hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 3vw, 54px); }
.hero-copy, .hero-art { min-width: 0; }
.hero-art { overflow: visible; isolation: isolate; padding: 30px 11px 45px; }
.hero-keyboard { width: min(100%, 520px); max-width: 100%; transform: rotate(-4deg); margin-inline: auto; padding: clamp(17px, 2vw, 26px); }
.hero-keyboard .keys-row { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: clamp(4px, .6vw, 8px); margin-top: 10px; width: 100%; }
.hero-keyboard .keys-row:nth-of-type(3) { width: 93%; margin-left: 6%; grid-template-columns: repeat(9,minmax(0,1fr)); }
.hero-keyboard .keys-row:nth-of-type(4) { width: 76%; margin-left: 12%; grid-template-columns: repeat(7,minmax(0,1fr)); }
.hero-keyboard .keys-row:last-child { width: 77%; margin-left: 12%; grid-template-columns: minmax(0,5fr) minmax(0,1fr); }
.hero-keyboard .keycap { display: grid; place-items: center; min-width: 0; aspect-ratio: 1 / 1; font-size: clamp(.61rem, .88vw, .88rem); line-height: 1; }
.hero-keyboard .space-key, .hero-keyboard .orange-key { width: auto; max-width: none; height: auto; min-height: 33px; aspect-ratio: auto; }
.hero-keyboard .space-key { font-size: .67rem; }
.art-float { bottom: 0; right: 0; align-items:center; max-width: calc(100% - 15px); }
.art-float>span { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; aspect-ratio:1; padding:0; line-height:1; font-size: 1.1rem; border-radius: 50%; }
.proof-emblem { flex: 0 0 43px; width: 43px; height: 43px; aspect-ratio: 1; line-height: 1; }
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 8px; }
  .hero-copy>p { max-width: 640px; }
  .hero-art { width: min(100%, 630px); margin-inline: auto; min-height: auto; }
  .hero-keyboard .keycap { font-size: clamp(.67rem, 1.35vw, .9rem); }
}
@media (max-width: 700px) {
  .hero-art { padding: 12px 6px 0; min-height:0; margin-top:24px; }
  .hero-keyboard { width: min(96%, 445px); transform:rotate(-3deg); padding: 17px 14px 20px; border-width: 7px; }
  .hero-keyboard .keys-row { gap: 5px; margin-top: 8px; }
  .hero-keyboard .keycap { font-size: clamp(.54rem, 2.2vw, .84rem); }
  .art-float { position: relative; bottom: auto; right: auto; margin: -12px 0 0 auto; max-width: 95%; width: max-content; }
  .art-float>span { flex-basis:42px; width:42px; height:42px; }
}
@media (max-width: 390px) {
  .hero-keyboard .keys-row { gap: 3px; margin-top: 6px; }
  .hero-keyboard .keycap { font-size: .57rem; }
  .art-float { padding: 11px 13px; gap: 10px; }
}
/* Keep the desktop headline to two deliberate lines without covering the illustration. */
@media (min-width: 941px) {
  .hero-copy h1 { font-size: clamp(3.2rem, 5vw, 4.5rem); line-height: 1.08; }
  .hero-copy h1 .italic-accent { white-space: nowrap; }
}
.art-glow { width: 84%; height: 75%; transform: none; }
@media (max-width: 700px) {
  .hero-art { display: block; padding-bottom: 32px; }
  .hero-keyboard { display: block; width: min(94%, 430px); margin: 4px auto 0; }
  .art-float { width: max-content; max-width: 83%; margin: -13px 0 0 auto; }
}
/* Contrast cleanup across the shared header, tool listings and typing test. */
.skip-link { background: var(--accent-button); color: #fff; }
.hero-keyboard .orange-key { background: var(--accent-button); border-color: var(--accent-button); color: #fff; }
.category-strip b, .gi-index-grid .arrow, .filter-card .arrow,
.gi-index-list .arrow, .gi-index-grid .tool-card .arrow { color: var(--accent-ink); }
.two-col-intro em { color: #f45411; }
.feature-ribbon .eyebrow { color: #ffa47f; }
.tst-kicker, .tst-step, .tst-guide-no, .tst-prompt-label,
.tst-shortcut, .tst-related a, .tst-stat small, .tst-stat-card small,
.tst-stats small, .tst-stats-row small, .tst-guide-no { color: var(--accent-ink); }
.tst-results a, .tst-related a:hover { color: var(--accent-ink); }
.mega-row-arrow { color: var(--accent-ink); }
.mega-promo-primary>span:last-child, .mega-promo-secondary>span:last-child { color: var(--accent-ink); }
.gi-language-link>span:last-child { color: var(--accent-ink); }
.gi-index-prose a, .editorial-content a:not(.button) { color: var(--accent-ink); }