/* ────────────────────────────────────────────────────────────
   AXESS COMPUTE — axesscompute.com
   Standalone enterprise site stylesheet. Shares the AXESS design
   system (JetBrains Mono / General Sans, deep-navy background,
   hairline accents, X-mark motif) with axess.xyz, but drops the
   AXESS OS shell for a direct marketing-site chrome.
   ──────────────────────────────────────────────────────────── */

:root {
  --bg:       #070c14;
  --bg-deep:  #04070c;
  --bg-card:  rgba(255, 255, 255, 0.025);
  --bg-card-2: rgba(255, 255, 255, 0.04);
  --ink:      #e6f1ee;
  --ink-dim:  #6b8590;
  --ink-mute: #4a626d;
  --hairline: rgba(70, 210, 220, 0.10);
  --hairline-strong: rgba(70, 210, 220, 0.22);

  /* Axess Compute accent — the green from axess.xyz's compute lane */
  --accent:    #22b573;
  --accent-2:  #12a5a5;
  --accent-3:  #46d2dc;

  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, #0b131f 0%, var(--bg) 40%, var(--bg-deep) 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle grid backdrop — very faint so it feels like the AXESS OS grid
   without competing with the Tron canvas on the parent page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 80%);
  opacity: 0.35;
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ──────────────────────────────────────────────────────────
   Utility bar — top strip like axessmobility.com's AXESS LANE™
   ────────────────────────────────────────────────────────── */
.util {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 45%, #0b131f) 0%,
      color-mix(in srgb, var(--accent-2) 55%, #0b131f) 50%,
      color-mix(in srgb, var(--accent-3) 45%, #0b131f) 100%);
  padding: 0.55rem var(--pad-x);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.util a { border-bottom: 1px dashed rgba(255, 255, 255, 0.25); }
.util a:hover { border-color: rgba(255, 255, 255, 0.6); }

/* ──────────────────────────────────────────────────────────
   Header
   ────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem var(--pad-x);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hdr__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}
.hdr__brand .brand-x {
  width: 22px; height: 22px;
  color: var(--accent);
}
.hdr__brand sup {
  font-size: 8px;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--ink-dim);
  margin-left: 2px;
}
.hdr__nav {
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hdr__nav a {
  padding: 0.35em 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hdr__nav a:hover { color: var(--ink); border-color: var(--accent); }
.hdr__nav a[aria-current="page"] { color: var(--ink); }

@media (max-width: 640px) {
  /* On axess.xyz vertical pages the nav is hidden below 640px because
     the parent OS carries the nav. On axesscompute.com we're standalone,
     so we need mobile nav. See override further down for standalone. */
  .hdr__nav { display: none; }
}

/* ──────────────────────────────────────────────────────────
   Section frame
   ────────────────────────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  padding: clamp(4rem, 9vw, 7rem) var(--pad-x);
}
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* Section eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent),
              0 0 8px 0 color-mix(in srgb, currentColor 65%, transparent);
}

.h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 1.25rem;
  max-width: 20ch;
}
.h1 .accent { color: var(--accent); }

.h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.lead {
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  max-width: 62ch;
  margin: 0;
}
.body {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0;
}

/* Trademark symbol */
sup.tm {
  font-size: 0.55em;
  letter-spacing: 0;
  vertical-align: super;
  color: var(--ink-dim);
}

/* ──────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────── */
.hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.hero__wrap { position: relative; z-index: 2; }
.hero__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__mark .brand-x {
  width: 36px; height: 36px;
  color: var(--accent);
}

/* Glowing X watermark behind hero content */
.hero__watermark {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(58vw, 640px);
  aspect-ratio: 1;
  color: var(--accent);
  opacity: 0.10;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 40%, transparent));
}

/* Data readout under hero — mono, tabular-ish */
.readout {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}
.readout__k { display: block; margin-bottom: 0.35rem; color: var(--ink-mute); }
.readout__v { color: var(--ink); font-size: 15px; letter-spacing: 0.06em; }
@media (max-width: 540px) {
  .readout { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────────────────
   Three-up cards (Platform section)
   ────────────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
}

.card {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.card:hover {
  border-color: var(--hairline-strong);
  background: var(--bg-card-2);
}
.card__index {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.card__body {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────
   Deep-feature cards — sub-items grouped inside a card
   ────────────────────────────────────────────────────────── */
.feature-card {
  padding: 2rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  position: relative;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 1px;
  background: var(--accent);
}
.feature-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.feature-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.feature-card__list li {
  padding-left: 0;
}
.feature-card__list dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.feature-card__list dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.feature-card__list--plain li {
  font-size: 0.94rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.feature-card__list--plain li::before {
  content: "+";
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  flex-shrink: 0;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────
   CTA / Contact section
   ────────────────────────────────────────────────────────── */
.cta {
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) var(--pad-x);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%,
      color-mix(in srgb, var(--accent) 8%, transparent) 0%,
      transparent 70%);
}
.cta .h2 { max-width: 22ch; margin-inline: auto; }
.cta .lead { margin-inline: auto; margin-top: 0.75rem; text-align: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85em 1.6em;
  background: var(--accent);
  color: #04121a;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.15s ease;
  margin-top: 2rem;
}
.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* Hero button row — primary + ghost side by side */
.hero__ctas {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--accent);
  box-shadow: none;
}

/* ──────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────── */
.foot {
  padding: 3.5rem var(--pad-x) 2rem;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}
.foot__brand .brand-x {
  width: 18px; height: 18px;
  color: var(--accent);
}
.foot__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.foot__links a {
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.foot__links a:hover { color: var(--ink); border-color: var(--accent); }
.foot__legal {
  max-width: var(--wrap);
  margin: 1.5rem auto 0;
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 0.14em;
}

/* ──────────────────────────────────────────────────────────
   Iframe-embed adjustments — when the page is loaded inside the
   web-window, drop redundant chrome. We detect via ?embed=1.
   The parent web-window sets its own scrollbar treatment.
   ────────────────────────────────────────────────────────── */
body.is-embedded .util { display: none; }
body.is-embedded .hero { min-height: calc(100vh - 60px); }

/* Cyan scrollbar — wider (8px) + higher opacity + subtle track. */
html { scrollbar-width: thin; scrollbar-color: rgba(140, 220, 230, 0.45) rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); border-radius: 999px; }
::-webkit-scrollbar-thumb {
  background: rgba(140, 220, 230, 0.45);
  border-radius: 999px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover { background: rgba(140, 220, 230, 0.70); }

/* ──────────────────────────────────────────────────────────
   STANDALONE-ONLY OVERRIDES
   These extend the base card/section system with patterns
   only used on axesscompute.com — no cross-vertical nav, no
   iframe embed adjustments, no ?embed=1 utility hiding.
   ────────────────────────────────────────────────────────── */

/* Utility bar override — remove the gradient; use a hairline instead.
   The gradient reads well inside the AXESS OS shell but too loud on a
   standalone site. Keep it monochrome + hairline. */
.util {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.util a { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.util a:hover { border-bottom-color: var(--accent); color: var(--ink); }

/* Header — tighten padding for enterprise feel. */
.hdr__nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* ──────────────────────────────────────────────────────────
   STAT STRIP — big-number band under the hero
   ────────────────────────────────────────────────────────── */
.stat-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 2.5rem var(--pad-x);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.stat-strip__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 780px) {
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.stat {
  border-left: 1px solid var(--hairline);
  padding-left: 1.25rem;
}
.stat__v {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.stat__k {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ──────────────────────────────────────────────────────────
   COMPANY / THESIS SECTION — 2-col text block for standalone
   ────────────────────────────────────────────────────────── */
.thesis {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .thesis { grid-template-columns: 1fr; gap: 1.5rem; }
}
.thesis__intro .h2 { margin-top: 0.25rem; }
.thesis__body p {
  font-size: 17px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  margin: 0 0 1.15rem;
}
.thesis__body p:last-child { margin-bottom: 0; }

/* ──────────────────────────────────────────────────────────
   CAREERS TEASER — hairline list of open roles / stub
   ────────────────────────────────────────────────────────── */
.roles {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hairline);
  margin-top: 1.5rem;
}
.role {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.2s ease, padding 0.2s ease;
}
.role:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  padding-left: 0.75rem;
}
.role__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}
.role__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.role__arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
}
@media (max-width: 640px) {
  .role { grid-template-columns: 1fr auto; }
  .role__meta { grid-column: 1 / -1; }
}

/* ──────────────────────────────────────────────────────────
   SPEC TEASER — small dense table-like block for tech specs
   ────────────────────────────────────────────────────────── */
.spec-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1.5rem;
}
@media (max-width: 780px) {
  .spec-teaser { grid-template-columns: 1fr; }
}
.spec {
  padding: 1.25rem 1.25rem;
  border-right: 1px solid var(--hairline);
}
.spec:last-child { border-right: none; }
@media (max-width: 780px) {
  .spec { border-right: none; border-bottom: 1px solid var(--hairline); }
  .spec:last-child { border-bottom: none; }
}
.spec__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: block;
  margin-bottom: 0.5rem;
}
.spec__v {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
}

/* ──────────────────────────────────────────────────────────
   IN-CONTEXT FAMILY BAR — sits above footer, shows sibling brands
   ────────────────────────────────────────────────────────── */
.family {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem var(--pad-x);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.family__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 780px) {
  .family__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
.family__intro .eyebrow { margin-bottom: 0.5rem; }
.family__intro h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.family__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 720px) {
  .family__grid { grid-template-columns: 1fr; }
}
.family__card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.family__card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline));
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  transform: translateY(-2px);
}
.family__card-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.family__card-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 8px var(--dot);
}
.family__card--energy   { --dot: #12a5a5; }
.family__card--mobility { --dot: #2b8fe0; }
.family__card--portfolio { --dot: #46d2dc; }
.family__card-body {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.family__card-host {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ──────────────────────────────────────────────────────────
   MOBILE MENU — hamburger button + dropdown nav
   Hidden by default on desktop; revealed under 640px where
   the base .hdr__nav is hidden.
   ────────────────────────────────────────────────────────── */
.hdr__menu {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  width: 42px;
  height: 42px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hdr__menu:hover { border-color: var(--accent); }
.hdr__menu-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}
.hdr__menu-lines span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hdr__menu[aria-expanded="true"] .hdr__menu-lines span:nth-child(1) {
  transform: translateY(3.25px) rotate(45deg);
}
.hdr__menu[aria-expanded="true"] .hdr__menu-lines span:nth-child(2) {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobile-nav dropdown panel */
.mnav {
  position: sticky;
  top: 68px; /* below the sticky header */
  z-index: 9;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-x);
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mnav.is-open {
  transform: scaleY(1);
  opacity: 1;
}
.mnav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.mnav a:last-child { border-bottom: none; }

/* Show hamburger only on mobile, and reveal a proper mobile nav */
@media (max-width: 640px) {
  .hdr__menu { display: inline-flex; }
}
@media (min-width: 641px) {
  /* On desktop, mnav is never used regardless of hidden attribute */
  .mnav { display: none !important; }
}