/* =============================================================================
   MAGI MACHINA — Layout: header, footer, sections, golden grids.
   ========================================================================== */

/* --- Header — same shell metric as the content, so everything lines up ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: var(--sp-3);
  color: var(--ink);
  transition: color var(--dur-s) var(--ease-fade), padding var(--dur-s) var(--ease);
}
/* three columns: the nav sits on the true centre whatever the widths of the
   wordmark and the tools on either side */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}
.site-header__inner > .brand { justify-self: start; }
.site-header__inner > .header-tools { justify-self: end; }
.site-header.is-scrolled { padding-block: var(--sp-2); }

/* Progressive blur: three backdrop layers, each masked to its own band
   (strongest right under the bar, nothing ~70 % below it), and a paper tint
   that keeps the nav legible. No hard edge, no line: the page melts into the
   bar. It unfolds from the top once the page leaves the hero, and folds to
   zero area (no backdrop work at all) above it. It lives on its own child —
   NEVER put backdrop-filter, filter, transform, opacity or will-change on
   .site-header itself: that traps the fixed mobile menu. */
.site-header__veil {
  position: absolute;
  inset: 0 0 auto 0;
  height: 170%;
  z-index: -1;
  pointer-events: none;
  transform-origin: top center;
  scale: 1 0;
  transition: scale var(--dur-s) var(--ease);
}
.site-header.is-scrolled .site-header__veil { scale: 1 1; }
.site-header__veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--glass) 0%,
              color-mix(in srgb, var(--glass) 72%, transparent) 42%, transparent 100%);
}
.site-header__veil > i { position: absolute; inset: 0; }
.site-header__veil > i:nth-child(1) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.site-header__veil > i:nth-child(2) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 72%);
  mask-image: linear-gradient(to bottom, #000 38%, transparent 72%);
}
.site-header__veil > i:nth-child(3) {
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 22%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 22%, transparent 52%);
}
@media (max-width: 860px) {
  /* phones: one layer is enough, and cheaper */
  .site-header__veil > i:nth-child(n+2) { display: none; }
  .site-header__veil > i:nth-child(1) {
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__veil { transition: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 1.1ch;
  line-height: 1;
  white-space: nowrap;
}
.brand > svg {
  height: 1.05rem;
  width: auto;
  display: block;
  color: var(--ink);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2.4vw, var(--sp-5));
}
.site-nav__list {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: clamp(var(--sp-1), 0.9vw, var(--sp-3));
}
/* Nav links: a pill opens behind the label (scale .9 → 1) and the label rolls
   up onto its own copy. The current page keeps the blue and a faint pill.
   <a class="site-nav__link"><span class="roll"><span class="roll__t" data-i18n>… */
.site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  isolation: isolate;
  display: block;
  line-height: 1;
  padding: 0.4em 0.8em;
  border-radius: var(--radius-pill);
  opacity: 0.72;
  transition: opacity var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease);
}
.site-nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.roll {
  display: block;
  height: 1.4em;
  line-height: 1.4;
  overflow: hidden;
}
.roll__t {
  display: block;
  text-shadow: 0 1.5em currentColor;
  transition: transform var(--dur-s) var(--ease);
}
.site-nav__link[aria-current="page"] { opacity: 1; color: var(--accent); }
.site-nav__link[aria-current="page"]::before {
  opacity: 1;
  transform: none;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.site-nav__link:focus-visible { opacity: 1; }
.site-nav__link:focus-visible::before { opacity: 1; transform: none; }
.site-nav__link:active::before { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .site-nav__link:hover { opacity: 1; }
  .site-nav__link:hover::before { opacity: 1; transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-nav__link:hover .roll__t { transform: translateY(-1.5em); }
}

/* Header tools (language) */
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Language toggle */
.lang-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  opacity: 0.92;
}
/* one pill slides under the chosen language (both options are two mono
   letters wide, so half the toggle each) */
.lang-toggle::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  box-shadow: var(--glow-box);
  transition: translate var(--dur-s) var(--ease-pop);
}
.lang-toggle:has(.lang-toggle__opt[data-lang="en"][aria-pressed="true"])::before { translate: 100% 0; }
.lang-toggle__opt {
  padding: 0.42em 0.8em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.55;
  transition: background var(--dur-xs) var(--ease), opacity var(--dur-xs) var(--ease);
}
.lang-toggle__opt span {
  display: inline-block;
  transition: color var(--dur-s) var(--ease), transform var(--dur-xs) var(--ease);
}
.lang-toggle__opt[aria-pressed="true"] { opacity: 1; }
.lang-toggle__opt[aria-pressed="true"] span { color: #fff; }
.lang-toggle__opt:active span { transform: scale(0.88); }
@media (hover: hover) and (pointer: fine) {
  .lang-toggle__opt:hover { opacity: 1; }
}
:root[data-theme="dark"] .lang-toggle__opt[aria-pressed="true"] span,
:root[data-theme="magi"] .lang-toggle__opt[aria-pressed="true"] span { color: var(--ocean-2); }

/* Mobile nav toggle */
.nav-burger { display: none; }

/* --- Section scaffolding: panels (v12.13), one in two (v12.14) ----------
   Sections alternate: a panel, then open page, then a panel — the page
   breathes between them instead of reading as one block. A panel is set off
   the viewport edge by --panel-m, one --panel-gap from its neighbours
   (vertical margins collapse), rounded, a tone lifted off the page, a
   hairline: .section--panel, or .section--ocean for the recessed emphasis
   panels (CTA bands, #privacy), which always stay panels. A plain .section
   is open: its content sits right on the page. The hero, the horizon band
   and the footer stay full-bleed. Every section keeps the same margins, so
   the shell's width below holds for all of them.
   The fill lives on ::before at z-index -1, and .section itself never forms
   a stacking context (no z-index, no isolation, no filter), so the ambient
   ink (#mm-field, first child of main, z 0) is drawn over the fill and
   under the content (.section > .u-shell, z 1). */
.section {
  position: relative;
  margin: var(--panel-gap) var(--panel-m);
  padding-block: clamp(var(--sp-5), 6.5vw, var(--sp-7));
}
.section--panel,
.section--ocean { border-radius: var(--radius-panel); }
.section--panel::before,
.section--ocean::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--panel-bg);
  background-image: var(--panel-glow);
  box-shadow: inset 0 0 0 1px var(--panel-line);
  pointer-events: none;
}
/* the content keeps the logo's vertical: the section's margin comes out of
   the gutter, so only a panel's hairline steps into it */
.section > .u-shell {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * (var(--gutter) - var(--panel-m)), var(--content-max));
}
.section--tight { padding-block: clamp(var(--sp-5), 6vw, var(--sp-7)); }
/* Emphasis panel — recessed rather than lifted: quiet grey by day, deep night
   in the dark themes. It covers the ambient ink, as the hero does. */
.section--ocean {
  color: var(--ink);
  isolation: isolate;
}
.section--ocean::before {
  background-color: var(--paper-2);
  background-image: none;
}
:root[data-theme="dark"] .section--ocean,
:root[data-theme="magi"] .section--ocean { color: var(--sky-1); }
:root[data-theme="dark"] .section--ocean::before,
:root[data-theme="magi"] .section--ocean::before { background-color: var(--ocean-2); }
:root[data-theme="dark"] .section--ocean .eyebrow,
:root[data-theme="magi"] .section--ocean .eyebrow { color: var(--teal-1); }

.section__head {
  display: grid;
  gap: var(--sp-3);
  max-width: 54rem;
  margin-bottom: clamp(var(--sp-4), 5vw, var(--sp-6));
}
.section__head--center {
  text-align: center;
  margin-inline: auto;
  justify-items: center;
}
.section__lead {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 410;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}
:root[data-theme="dark"] .section--ocean .section__lead,
:root[data-theme="magi"] .section--ocean .section__lead { color: color-mix(in srgb, var(--sky-1) 72%, transparent); }

/* --- Golden grids -------------------------------------------------------- */
.golden-split,
.golden-split--reverse {
  display: grid;
  gap: clamp(var(--sp-4), 5vw, var(--sp-7));
  align-items: center;
}
/* fr units, not percentages — % tracks + gap overflow the container
   (the column would overhang the shell by exactly the gap width) */
.golden-split { grid-template-columns: 1.618fr 1fr; }
.golden-split--reverse { grid-template-columns: 1fr 1.618fr; }
/* grid items must be allowed to shrink — wide <pre> art must never blow the track */
.golden-split > *, .golden-split--reverse > * { min-width: 0; }

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Footer — follows the theme: ink on paper by day, bone on night ------- */
.site-footer {
  background: var(--paper-2);
  color: var(--ink-soft);
  padding-block: clamp(var(--sp-6), 8vw, var(--sp-7)) 0;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-s) var(--ease-fade), color var(--dur-s) var(--ease-fade);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.site-footer__top {
  display: grid;
  grid-template-columns: var(--golden-minor) 1fr;
  gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  position: relative;
}
.site-footer__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-soft);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--sp-5);
}
.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}
.footer-col__list { display: grid; gap: var(--sp-2); }
.footer-col__list a {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding-bottom: 0.15em;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0% 1px no-repeat;
  transition: color var(--dur-xs) var(--ease), background-size var(--dur-s) var(--ease);
}
.footer-col__list a:focus-visible { color: var(--accent); background-size: 100% 1px; background-position: 0 100%; }
@media (hover: hover) and (pointer: fine) {
  .footer-col__list a:hover { color: var(--accent); background-size: 100% 1px; background-position: 0 100%; }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-5), 6vw, var(--sp-6));
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* The giant wordmark — full bleed, sinking below the edge of the page */
.site-footer__giant {
  margin-top: clamp(var(--sp-5), 6vw, var(--sp-7));
  position: relative;
}
.site-footer__giant svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);    /* black on paper by day, bone on night */
  transform: translateY(8%);
}
@media (prefers-reduced-motion: no-preference) {
  .site-footer__giant.is-armed svg {
    translate: 0 34%;
    transition: translate 1.4s var(--ease);
  }
  .site-footer__giant.is-armed.is-risen svg { translate: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .golden-split,
  .golden-split--reverse,
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }

  /* The sheet is always there, folded up out of sight: it unrolls from the
     top (clip-path), its links cascade in after it, and it rolls back up
     faster than it came. The wordmark, the toggles and the burger stay on
     top of it. */
  .site-nav__list {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 55;            /* fullscreen sheet, under the burger (60) */
    background: var(--paper);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    font-size: var(--fs-md);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-exit) var(--ease-in), visibility 0s linear var(--dur-exit);
  }
  .site-nav.is-open .site-nav__list {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--dur-l) var(--ease), visibility 0s;
  }
  .site-nav__link { font-size: var(--fs-sm); padding: 0.55em 1.2em; }
  .site-nav__list > li {
    opacity: 0;
    transition: opacity var(--dur-exit) var(--ease-in), translate var(--dur-exit) var(--ease-in);
  }
  .site-nav.is-open .site-nav__list > li {
    opacity: 1;
    translate: none;
    transition: opacity var(--dur-l) var(--ease), translate var(--dur-l) var(--ease);
    transition-delay: calc(120ms + var(--n, 0) * 45ms);
  }
  .site-nav__list > li:nth-child(2) { --n: 1; }
  .site-nav__list > li:nth-child(3) { --n: 2; }
  .site-nav__list > li:nth-child(4) { --n: 3; }
  .site-nav__list > li:nth-child(5) { --n: 4; }
  .brand, .header-tools { position: relative; z-index: 56; }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2);
    z-index: 60;
  }
  .nav-burger span {
    width: 22px; height: 1.5px; background: currentColor;
    transition: transform var(--dur-s) var(--ease), opacity var(--dur-xs) var(--ease);
  }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .site-nav__list > li { translate: 0 -0.8em; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .site-nav__list, .site-nav.is-open .site-nav__list { clip-path: none; }
}

/* A lead that follows a heading outside .section__head (which spaces its own
   children with a grid gap) still needs air above it. */
:not(.section__head) > h2 + .section__lead,
:not(.section__head) > h1 + .section__lead { margin-top: var(--sp-3); }
/* Same for an eyebrow outside those spaced containers: without it the label
   sits glued to its heading (the founder block, the golden splits). */
:not(.section__head, .cta-band__inner) > .eyebrow + :is(h1, h2, h3) { margin-top: var(--sp-3); }

/* Homepage sections announce themselves: a numbered eyebrow and a rule that
   starts the block, so two adjacent sections never read as one. */
.eyebrow__num {
  color: var(--ink-faint);
  margin-right: 0.2em;
  font-variant-numeric: tabular-nums;
}
.section__mark {
  display: block;
  width: 3.2rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--sp-4);
  transform-origin: left center;   /* the rule draws itself from the left */
}