/* ==========================================================================
   GalvaBase — component layer for index.html and toolkit.html.
   Loads AFTER brand.css and contains NO colour literals: every colour is a
   token from brand.css (the only file allowed to hold a hex — BACKLOG-189,
   enforced by scripts/check_site.py). Light/dark theming therefore comes
   for free from brand.css's token mapping.
   genesis.html is the cockpit and has its own stylesheet (genesis.css),
   deliberately separate — docs/BRAND.md §1.
   ========================================================================== */

/* BRAND.md §3: headlines are Space Grotesk 700 (brand.css defaults to 500,
   which is the wordmark's weight, not the headline's). */
h1, h2, h3 { font-weight: 700; }

.k {
  font-family: var(--font-data);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
}

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; padding-block: 10px; flex-wrap: wrap; row-gap: 8px;
}
.topbar .wordmark { width: auto; height: 27px; }
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; row-gap: 8px }
.nav a {
  font-weight: 600; font-size: 14px; color: var(--fg-dim);
  white-space: nowrap; text-decoration: none;
}
.nav a:hover { color: var(--fg) }

/* ---------------- nav dropdown (behaviour in nav.js) ---------------- */
.nav-dropdown { position: relative }
.nav-dropdown-btn {
  font-family: var(--font-text); font-weight: 600; font-size: 14px; color: var(--fg-dim);
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.nav-dropdown-btn:hover, .nav-dropdown.open .nav-dropdown-btn { color: var(--fg) }
.nav-dropdown-btn .caret { font-size: 10px; transition: transform .15s }
.nav-dropdown.open .nav-dropdown-btn .caret { transform: rotate(180deg) }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--rule); padding: 6px; min-width: 216px;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  display: none; flex-direction: column; gap: 2px; z-index: 30;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex }
.nav-dropdown-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; font-size: 14px; font-weight: 600; color: var(--fg);
  text-decoration: none;
}
.nav-dropdown-menu a:hover { background: var(--bg) }
.dd-tag {
  font-family: var(--font-data); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 7px; color: var(--paper); background: var(--accent);
}
.dd-tag.muted { background: none; color: var(--fg-dim); border: 1px solid var(--rule) }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-block; font-family: var(--font-display); font-size: 14px; font-weight: 700;
  padding: 11px 20px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, filter .15s;
}
.btn-primary { background: var(--accent); color: var(--paper) }
.btn-primary:hover { filter: brightness(1.07) }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--rule) }
.btn-ghost:hover { border-color: var(--fg) }
@media (prefers-reduced-motion: reduce) { .btn { transition: none } }

/* ---------------- section scaffolding ---------------- */
main section { padding: 92px 0; border-bottom: 1px solid var(--rule) }
main section:last-of-type { border-bottom: none }
.sec-label { margin-bottom: 12px }
main section h2 { font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 30px; max-width: 22ch }

/* ---------------- hero ---------------- */
.hero { padding: 104px 0 92px }
.hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center }
.hero .k { margin-bottom: 18px }
.hero h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 22px; max-width: 17ch }
.hero h1 em { font-style: normal; color: var(--accent) }
.hero-sub { font-size: 18px; max-width: 52ch; margin-bottom: 34px; color: var(--fg-dim) }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap }

/* the animated logo — plays once on load, rests at g. (BRAND.md §4 Motion).
   The plate and the dot keep their baked mark colours (they are the mark itself);
   the line and the letter are themed here so no page carries a hex. */
.anim-logo { width: 132px; height: 132px; flex: none }
.anim-logo .al-line { stroke: var(--zinc) }
.anim-logo .al-g path { fill: var(--paper) }
.anim-logo .al-dot { transform-box: fill-box; transform-origin: center; animation: al-dot 2.6s cubic-bezier(.4,0,.6,1) .5s 1 forwards }
.anim-logo .al-line { transform-box: fill-box; transform-origin: center; animation: al-line 2.6s ease .5s 1 forwards; stroke: var(--zinc) }
.anim-logo .al-g { transform-box: fill-box; transform-origin: center; animation: al-g 2.6s ease .5s 1 forwards }
@keyframes al-dot {
  0%, 14% { transform: translate(0, 0) scale(1) }
  24%     { transform: translate(0, -7px) scale(1) }
  34%     { transform: translate(0, 16px) scale(1, .82) }
  46%     { transform: translate(14px, -2px) scale(.8) }
  61%, 100% { transform: translate(25.7px, 29.6px) scale(.585) }
}
@keyframes al-line {
  0%, 30% { transform: none; opacity: 1 }
  36%     { transform: scale(1.06, .5) translateY(2px); opacity: 1 }
  51%, 100% { transform: scale(.7, .4); opacity: 0 }
}
@keyframes al-g {
  0%, 37% { opacity: 0; transform: scale(.85) }
  58%, 100% { opacity: 1; transform: scale(1) }
}
@media (prefers-reduced-motion: reduce) {
  .anim-logo .al-dot { animation: none; transform: translate(25.7px, 29.6px) scale(.585) }
  .anim-logo .al-line { animation: none; opacity: 0 }
  .anim-logo .al-g { animation: none; opacity: 1 }
}

/* ---------------- story ---------------- */
.story-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start }
.story-copy p { margin-bottom: 20px; max-width: 62ch; color: var(--fg-dim) }
.story-copy p:last-child { margin-bottom: 0 }
.story-copy b { color: var(--fg); font-weight: 600 }
.panel { border: 1px solid var(--rule); background: var(--surface); padding: 26px 28px }
.story-def { position: sticky; top: 96px }
.story-def .def { font-size: 15.5px; color: var(--fg); margin-bottom: 14px; line-height: 1.5 }
.story-def .def em { font-style: italic; color: var(--fg-dim) }
.story-def .rule-line { height: 1px; background: var(--rule); margin: 16px 0 }
.story-def .def-name {
  font-family: var(--font-data); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-dim);
}
.story-def .def-name b { color: var(--accent); font-weight: 400 }

/* ---------------- products ---------------- */
.p-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px }
.p-card { border: 1px solid var(--rule); background: var(--surface); padding: 24px 26px }
.p-card h3 { font-size: 19px; margin-bottom: 8px }
.p-card p { font-size: 15px; color: var(--fg-dim) }
.p-card .st {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px;
}
.p-card .st.mut { color: var(--fg-dim) }
.p-card .p-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--fg) }
.p-side { display: grid; gap: 16px; align-content: start }
.p-card .btn { margin-top: 20px }

/* Genesis on the bench — the cockpit framed as an object (BRAND.md §1).
   Colours are the cockpit tokens from brand.css, never literals. */
.bench {
  margin-top: 20px; background: var(--cockpit-bg); border: 1px solid var(--cockpit-line);
  padding: 18px; display: flex; align-items: center; gap: 16px;
}
.bench .ring {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cockpit-cyan);
  box-shadow: 0 0 16px color-mix(in srgb, var(--cockpit-bright) 13%, transparent) inset;
  flex: none; position: relative;
}
.bench .ring::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px dashed var(--cockpit-cyan); opacity: .5;
}
.bench .t {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .08em;
  color: var(--cockpit-bright); text-transform: uppercase;
}
.bench .d { font-size: 12.5px; color: var(--cockpit-dim); margin-top: 4px }

/* ---------------- values ---------------- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px }
.value h3 { font-size: 16px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule) }
.value p { font-size: 15px; color: var(--fg-dim) }

/* ---------------- closing cta ---------------- */
.cta-inner { max-width: 620px }
.cta h2 { margin-bottom: 16px }
.cta p { margin-bottom: 30px; color: var(--fg-dim) }

/* ---------------- footer — always the inversion (BRAND.md §2 rule 3) ---------------- */
.footer { background: var(--ink); color: var(--zinc); padding: 34px 0 }
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.footer .wordmark { width: auto; height: 19px }
.footer .wordmark .letters { fill: var(--paper) }
.footer .wordmark .stop { fill: var(--spark-bright) }
.footer-meta {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--graphite);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  main section { padding: 64px 0 }
  .hero { padding: 72px 0 64px }
  .hero-grid { grid-template-columns: 1fr; gap: 30px }
  .hero-grid .anim-logo { order: -1 }
  .story-grid { grid-template-columns: 1fr; gap: 32px }
  .story-def { position: static }
  .p-grid { grid-template-columns: 1fr }
  .values-grid { grid-template-columns: 1fr; gap: 26px }
}
@media (max-width: 640px) {
  .nav { gap: 16px }
  .nav a:not(.btn) { display: none }
  .nav-dropdown { display: none }
  .anim-logo { width: 96px; height: 96px }
  .footer-inner { flex-direction: column; align-items: flex-start }
}