/* Aurigenesis — public site
   All colour and type values are taken from _Brand/aurigenesis.tokens.json.
   Nothing here is invented: if a value needs to change, change it in the
   tokens file first and mirror it here, never the other way round. */

/* Space Grotesk, served from this domain rather than Google's servers, so no
   visitor data goes to a third party (LG München I, 20.01.2022, 3 O 17493/20).
   Variable font: one file per character set covers every weight from 300 to
   700. SIL Open Font License, see /assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* blue ramp */
  --blue-900: #042C53;
  --blue-800: #0C447C;
  --blue-600: #185FA5;
  --blue-400: #378ADD;
  --blue-200: #85B7EB;
  --blue-50:  #D2E4F7;

  /* teal ramp — accent and rules */
  --teal-600: #0F6E56;
  --teal-400: #1D9E75;
  --teal-100: #9FE1CB;
  --teal-50:  #E1F5EE;

  /* neutrals (neutralScreen + slate) */
  --ink:       #1E293B;
  --secondary: #5A6B7D;
  --rule:      #DEE2E6;
  --panel:     #F7FAFC;
  --white:     #FFFFFF;

  --maxw: 1080px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchored sections stop just below the top edge rather than flush against it.
   Desktop raises this to clear the sticky header (see responsive block). */
section[id] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Switching language or page cross-fades instead of flashing. The header keeps
   its place and only its words change. Browsers without support navigate as
   before; people who ask for reduced motion get an instant switch. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(masthead),
  ::view-transition-new(masthead) { animation-duration: 0.26s; }
}

/* Set for a moment while a language switch restores your place, so opening
   accordions and the jump itself do not animate. */
html.no-anim { scroll-behavior: auto; }
html.no-anim .acc-panel,
html.no-anim .acc-trigger .chev { transition: none !important; }

/* Keyboard users jump past the header straight to the content. */
.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--blue-900);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  transition: top 0.2s ease;
}
.skip:focus { top: 12px; outline: 2px solid var(--teal-400); outline-offset: 2px; }

.masthead a:focus-visible,
footer a:focus-visible,
.contact a:focus-visible,
.doc a:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 2px;
}

body {
  margin: 0;
  font-family: 'Space Grotesk', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  view-transition-name: masthead;
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: 24px;
}

.masthead img { height: 30px; width: auto; display: block; }

.mast-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.masthead nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

/* Language switch */
.lang {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding-left: 22px;
  border-left: 1px solid var(--rule);
}

.lang a { color: var(--secondary); text-decoration: none; }
.lang a:hover { color: var(--blue-600); }
.lang a[aria-current="true"] { color: var(--blue-900); }
.lang .sep { color: var(--rule); }

.masthead nav a {
  color: var(--secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.masthead nav a:hover { color: var(--blue-600); }

/* The section currently being read. */
.masthead nav a.is-active {
  color: var(--blue-900);
  text-decoration: underline;
  text-decoration-color: var(--teal-400);
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-900);
  color: var(--white);
  padding: 104px 0 96px;
}

.hero .wrap { position: relative; z-index: 1; }

/* Ice lattice. The honeycomb is the basal plane of ordinary ice (Ih), seen
   down its main axis: lines are bonds, dots are the oxygen positions. It is
   brightest at one seed point, below and to the right of the headline, and
   fades outward from there, the way a crystal organises around a nucleus.
   Sized in pixels, so it stays crisp at every width. */
.lattice {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  /* The text runs full width on phones; keep the lattice quieter there. */
  .lattice { width: 78%; opacity: 0.55; }
}

.lattice line { stroke-width: 1; }
.lattice .n,
.lattice .glow { transform-box: fill-box; transform-origin: center; }

/* Growth, driven per element from site.js. A bond draws out over the first
   40% of its animation (380ms), glowing, then settles to its resting
   faintness; a node pops in with a flash as its bond arrives. Before its
   turn, each element holds its first frame, so it is not there yet. */
.lattice.growing line {
  stroke-dasharray: var(--len);
  animation: lattice-bond 0.95s linear var(--d) both;
}
.lattice.growing .n {
  animation: lattice-node 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d) both;
}
.lattice.growing .glow {
  opacity: 0;
  animation: lattice-glow 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes lattice-bond {
  0%   { stroke-dashoffset: var(--len); stroke-opacity: var(--flash); }
  40%  { stroke-dashoffset: 0;          stroke-opacity: var(--flash); }
  100% { stroke-dashoffset: 0;          stroke-opacity: var(--op); }
}
@keyframes lattice-node {
  0%   { transform: scale(0);   fill-opacity: var(--flash); }
  35%  { transform: scale(1.4); fill-opacity: var(--flash); }
  100% { transform: scale(1);   fill-opacity: var(--op); }
}
@keyframes lattice-glow {
  0%   { opacity: 0; transform: scale(0.3); }
  35%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0.85; transform: scale(1); }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-100);
  margin: 0 0 22px;
}

.hero h1 {
  font-weight: 300;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
  max-width: 17em;
}

.hero p {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--blue-200);
  max-width: 34em;
  margin: 0;
  font-weight: 300;
}

/* ---------- generic section ---------- */

section { padding: 88px 0; }

section.tinted { background: var(--panel); }

/* Editorial two-column: the heading holds the left rail, the prose runs in the
   wider right column. Keeps the measure readable without leaving the right half
   of a 1080px page empty, which is how a single narrow column reads on desktop. */
.split {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 0 72px;
  align-items: start;
}

.split > .head { grid-column: 1; }
.split > .body { grid-column: 2; }
.split > .full { grid-column: 1 / -1; }

.rule {
  width: 52px;
  height: 2px;
  background: var(--teal-400);
  border: 0;
  margin: 0 0 22px;
}

h2 {
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 28px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--blue-900);
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--secondary);
  max-width: 40em;
  margin: 0 0 18px;
}

.lede:last-child { margin-bottom: 0; }

.lede strong { color: var(--blue-800); font-weight: 500; }

/* ---------- sectors ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 44px;
}

.card {
  background: var(--white);
  padding: 32px 30px 34px;
}

.card h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--blue-800);
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}

.card p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--secondary);
  margin: 0;
}

.card .mark {
  width: 26px;
  height: 2px;
  background: var(--teal-400);
  display: block;
  margin: 0 0 18px;
}

/* ---------- accordion (what becomes possible) ---------- */

.acc {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  max-width: 46em;
}

.acc-item { border-bottom: 1px solid var(--rule); }

.tinted .acc,
.tinted .acc-item { border-color: #DDE5EE; }

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--blue-800);
  text-align: left;
  letter-spacing: 0.005em;
}

.acc-trigger:hover { color: var(--blue-600); }

.acc-trigger:focus-visible {
  outline: 2px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 2px;
}

.acc-trigger .chev {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--teal-400);
  transition: transform 0.35s ease;
}

.acc-item.open .acc-trigger .chev { transform: rotate(90deg); }
.acc-item.open .acc-trigger { color: var(--blue-900); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s ease;
}

.acc-item.open .acc-panel { grid-template-rows: 1fr; }

.acc-inner { overflow: hidden; }

.acc-panel p {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--secondary);
  max-width: 42em;
}

.acc-panel p:first-child { padding-top: 2px; }
.acc-panel strong { color: var(--blue-800); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-trigger .chev { transition: none; }
}

/* ---------- contact ---------- */

.contact a {
  color: var(--blue-600);
  text-decoration: none;
  border-bottom: 1px solid var(--teal-100);
  font-weight: 500;
}

.contact a:hover { border-bottom-color: var(--teal-400); }

/* ---------- footer ---------- */

footer {
  background: var(--blue-900);
  color: var(--blue-200);
  padding: 52px 0 46px;
  font-size: 13px;
  line-height: 1.75;
}

footer .name {
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}

footer p { margin: 0 0 6px; max-width: 50em; }

footer a { color: var(--teal-100); text-decoration: none; }

footer a:hover { color: var(--white); }

footer .legal {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

/* ---------- inner pages ---------- */

.doc { padding: 72px 0 84px; }

.doc h1 {
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 34px);
  color: var(--blue-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.doc h2 {
  font-size: 18px;
  margin: 40px 0 12px;
}

.doc p, .doc li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink);
  max-width: 44em;
}

.doc a { color: var(--blue-600); }

.doc .back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  text-decoration: none;
}

.doc .back:hover { color: var(--blue-600); }

.doc .meta {
  font-size: 13px;
  color: var(--secondary);
  margin-bottom: 34px;
}

/* ---------- responsive ---------- */

/* The header stays in reach while you read, on every screen size, and takes
   a soft shadow once the page has moved under it. Sections anchored from the
   nav stop just below it rather than behind it. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  transition: box-shadow 0.25s ease;
}
.masthead.scrolled { box-shadow: 0 8px 24px -14px rgba(4, 44, 83, 0.28); }
section[id] { scroll-margin-top: 96px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 0; }
  .split > .head, .split > .body { grid-column: 1; }
  .split > .head { margin-bottom: 20px; }
}

@media (max-width: 720px) {
  .masthead .wrap { min-height: 66px; }
  .masthead nav { gap: 18px; font-size: 13px; }
  .hero { padding: 68px 0 62px; }
  section { padding: 58px 0; }
  .grid { margin-top: 32px; }
  footer { padding: 42px 0 38px; }
}

/* Phones: two lines. The logo and the language switch share the top line,
   and all the sections run across the full width beneath, so every link
   stays visible without stacking the header three rows deep. */
@media (max-width: 680px) {
  :root { --gutter: 18px; }
  .masthead .wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo lang" "nav nav";
    align-items: center;
    row-gap: 10px;
    column-gap: 14px;
    padding-top: 12px;
    padding-bottom: 11px;
    min-height: 0;
  }
  .masthead .wrap > a { grid-area: logo; }
  .masthead img { height: 26px; }
  .mast-right { display: contents; }
  .masthead nav {
    grid-area: nav;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 18px;
    row-gap: 6px;
  }
  /* The five sections spread across the line; short navs sit left. */
  .masthead nav:has(a:nth-of-type(5)) { justify-content: space-between; column-gap: 10px; }
  .masthead nav a { font-size: 12.5px; letter-spacing: 0.01em; }
  /* The 404 page has no language switch; its one link takes that place. */
  .masthead .wrap > nav { grid-area: lang; }
  .lang {
    grid-area: lang;
    justify-self: end;
    padding-left: 0;
    border-left: 0;
    gap: 6px;
    font-size: 12.5px;
  }
  .hero { padding: 48px 0 52px; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 38px); }
}