/* The founder-selected StemOverflow identity, shared by branding_head.html and
   brand.html. This small stylesheet comes last, after each page's layout rules.
   It changes colours and the home link without changing practice or sign-in.
   Academic diagrams, subject colours and editorial serif headings stay intact. */
:root {
  /* The navy frame and cream paper are the identity's quiet base. */
  --paper: #F5F1E6;
  --surface: #FFFDF6;
  --surface-soft: #EEEADF;
  --sidebar: #EEEADF;
  --ink: #101521;
  --body-text: #3F4853;
  --muted: #58636D;
  --line: #DDDACE;
  --line-strong: #BDBCB3;

  /* The bright dot is decorative. Darker teal keeps text/buttons readable:
     #00756F on cream has 4.93:1 contrast, and cream-white on it has 5.47:1. */
  --teal: #009D94;
  --teal-strong: #00756F;
  --teal-hover: #005E59;
  --teal-soft: #E2EEEA;
  --teal-line: #9CC6BD;
  --teal-wash: #009D9409;
  --focus-wash: #009D9414;
  --on-accent: #FFFDF6;

  /* Neutral depth follows the navy frame, while blue/ochre/rose retain their
     existing semantic roles for subjects, coin faces and feedback. */
  --panel-shadow: #10152106;
  --soft-shadow: #10152114;
  --dialog-shadow: #10152129;
  --backdrop: #10152152;
}

/* One readable HTML wordmark sits beside the local decorative discovery mark.
   Ordinary system fallbacks avoid a font download and keep the name visible. */
.brand.stemoverflow-brand {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 44px;
  color: var(--ink);
  font-family: 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-decoration: none;
}
.brand-symbol { display: block; width: 1.15em; height: 1.15em; flex: none; object-fit: contain; }
.brand-wordmark { font-weight: 450; white-space: nowrap; }
.brand.stemoverflow-brand:hover { color: var(--ink); }

/* The practice drawer, account navigation and footer keep their compact scale.
   The practice room's single existing toolbar gains no additional banner. */
.practice-header .brand.stemoverflow-brand,
.sidebar .brand.stemoverflow-brand,
.learner-header .brand.stemoverflow-brand,
.admin-topbar .brand.stemoverflow-brand,
.landing-footer .brand.stemoverflow-brand { font-size: 21px; }
.profile-history-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

/* Bright decorative teal never becomes low-contrast reading text. */
.editor-heading button,
.welcome-heading h1 span,
.catalogue-heading h1 span { color: var(--teal-strong); }

/* Let the sign-in header wrap on small phones instead of crowding the home
   wordmark against the return link. Both links retain visible focus and taps. */
@media (max-width: 600px) {
  .brand.stemoverflow-brand { font-size: 22px; }
  .practice-header .brand.stemoverflow-brand { font-size: 20px; }
  .login-header { flex-wrap: wrap; gap: 8px 16px; }
  .login-header > a:last-child { margin-left: auto; }
}