/* Brand identity and controls, independent from the original layout file. */
body { font-family: var(--font-body); }
h1, h2, .video-screen h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: normal;
}
h3, h4, b, strong { font-weight: 500; }
#principles .principle > p + p { margin-top: 1.6em; }
::selection { color: var(--text); background: #27513c; }
.light ::selection { color: #245e3e; background: #e0efe6; }

.header {
  background: rgba(2, 15, 22, .92);
  border-bottom-color: var(--border);
}
.header-in { min-height: 94px; gap: 22px; }
.brand { gap: 14px; flex: none; letter-spacing: normal; }
.brand-logo { display: block; width: 156px; height: auto; flex: none; }
.brand i { height: 30px; border-color: var(--border); }
.brand em { color: var(--green); font: 400 13px/1.4 var(--font-body); letter-spacing: normal; }
.nav { gap: 3px; }
.nav a, .nav > span {
  display: block;
  padding: 9px 10px;
  border-radius: 7px;
  transition: color .18s ease, background-color .18s ease;
}
.nav a:hover { color: var(--text); background: var(--hover-subtle); }

.button {
  min-height: 50px;
  border-radius: 12px;
  background: var(--action-bg);
  color: var(--action-text);
  font-weight: 500;
  box-shadow: none;
  transition: transform .18s ease, background-color .18s ease;
}
.button:hover {
  background: var(--action-hover);
  color: var(--action-text);
  box-shadow: none;
}
.button-outline { color: var(--text); background: transparent; border-color: var(--border); }
.button-outline:hover { color: var(--text); background: var(--hover-subtle); }
.light .button-outline { color: var(--ink); }
.small-button { min-height: 44px; }
:is(a, button, input):focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.hero h1 { font-size: clamp(48px, 5.1vw, 70px); line-height: 1.05; }
.section h2 { line-height: 1.1; }
.hero { background: linear-gradient(180deg, #041923, #020f16); }
.glass, .surface:not(.light .surface) {
  background: linear-gradient(145deg, #082a38, #041923);
  border-color: var(--border);
}
.glass { box-shadow: var(--shadow); }
.bicon, .fake-input, .float-tags span, .vid-stats > div, .bubble {
  border-color: var(--border);
}
.user-q { background: rgba(68, 160, 101, .1); }
.fake-input { background: rgba(2, 15, 22, .35); }
.bottom-strip { border-color: var(--border); }
#principles .tick-list li::before {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(68, 160, 101, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 6 2.25 2.25L9.5 3.5' stroke='%23427552' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.light .surface { background: #ffffff; border-color: var(--border-light); }
.light .chapter { color: var(--muted-on-light); }
.footer { background: var(--deep); border-top-color: var(--border); }
.footer .brand-logo { width: 146px; }
.video-grid > * { min-width: 0; }
.experience-brand {
  display: grid;
  place-items: center;
  height: 136px;
  padding: 18px;
  background: var(--surface-panel);
}
.experience-brand img { width: 165px; max-width: 100%; height: auto; object-fit: contain; }

.menu-toggle {
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 9px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
}
.menu-toggle:hover { background: var(--hover-subtle); }
.menu-toggle svg { display: block; width: 24px; height: 24px; }
.menu-toggle .menu-close-icon, .menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: block; }

@media (max-width: 1080px) {
  .header-in { min-height: 86px; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    padding: 14px 21px 20px;
    background: var(--surface-section);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav.open { display: flex; }
  .menu-toggle { display: grid; margin-left: auto; }
  .top-demo { display: none; }
}
@media (max-width: 575px) {
  .header-in { min-height: 78px; gap: 10px; }
  .brand { gap: 10px; min-width: 0; }
  .brand-logo { width: 124px; }
  .brand i { height: 24px; }
  .brand em { font-size: 11px; }
  .hero h1 { font-size: clamp(43px, 11.5vw, 58px); }
  .hero-grid > *, .chess-layout > *, .experience-intro > * { min-width: 0; }
  .statement { padding: 26px 22px; }
  .statement .button { width: 100%; }
  .quiet h2 { font-size: clamp(38px, 10.5vw, 48px); }
  .experience-brand { height: 188px; }
  .experience-brand img { width: 200px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .button:hover { transform: none; }
}