@font-face {
  font-family: "Switzer";
  src: url("/assets/Switzer-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("/assets/Switzer-VariableItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #edf0f3;
  --ink: #17151d;
  --violet: #6155f9;
  --yellow: #efc806;
  --orbit-color: #efc806;
  --page-gutter: clamp(1.25rem, 5.2vw, 5.25rem);
  --viewport-height: 100vh;
  --header-height: clamp(4.75rem, 8.5vh, 6rem);
  font-family: "Switzer", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports (height: 100svh) {
  :root { --viewport-height: 100svh; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

body { min-height: 100%; }

.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  background: var(--paper);
}

.identity {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  height: var(--header-height);
  align-items: center;
  padding-inline: var(--page-gutter);
  background: #fff;
}

.identity img {
  display: block;
  width: clamp(8.8rem, 15vw, 12.5rem);
  height: auto;
}

.network {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(
    calc(100vw - 2 * var(--page-gutter)),
    calc(var(--viewport-height) - 2 * var(--header-height) - 2rem)
  );
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.network__orbit,
.network__polygon {
  fill: none;
  stroke: var(--orbit-color);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}

.network__polygon {
  stroke-linejoin: round;
  transition: opacity .28s ease;
}

.network__nodes {
  transition: opacity .28s ease;
}

.network__nodes circle {
  fill: var(--orbit-color);
  stroke: var(--orbit-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.message {
  position: relative;
  z-index: 2;
  width: min(100% - 2 * var(--page-gutter), 84rem);
  margin: -1.4vh 0 0 -1.5vw;
  text-align: center;
  pointer-events: none;
}

.message p {
  margin: 0;
  color: var(--violet);
  font-size: clamp(3.4rem, 10.1vw, 9.7rem);
  font-weight: 470;
  letter-spacing: -.085em;
  line-height: .91;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(237, 240, 243, .86), 0 0 30px rgba(237, 240, 243, .84);
}

@media (max-width: 640px) {
  :root {
    --header-height: max(4.6rem, calc(env(safe-area-inset-top) + 3.4rem));
  }
  .identity {
    padding-top: env(safe-area-inset-top);
  }
  .identity img { width: 8.65rem; }
  .message { width: calc(100% - 2.3rem); margin: -4vh 0 0; }
  .message p {
    font-size: clamp(3.45rem, 14.2vw, 5.7rem);
    white-space: normal;
    line-height: .94;
    letter-spacing: -.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network__polygon,
  .network__nodes { transition: none; }
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 5px;
}

.site-footer {
  position: absolute;
  inset: auto var(--page-gutter) max(1.25rem, env(safe-area-inset-bottom));
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  font-size: .75rem;
  line-height: 1.5;
}
.site-footer a, .site-footer button {
  padding: .35rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.site-footer a:hover, .site-footer button:hover { text-decoration: underline; }

.cookie-banner {
  position: fixed;
  z-index: 10;
  bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem));
  left: var(--page-gutter);
  width: min(28rem, calc(100% - 2 * var(--page-gutter)));
  max-height: calc(var(--viewport-height) - 6rem);
  overflow: auto;
  padding: 1.5rem;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 8px 35px rgba(23, 21, 29, .09);
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease;
}
.cookie-banner.is-in { opacity: 1; transform: none; }
.cookie-banner h2 {
  margin: 0 0 .65rem;
  color: var(--violet);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.035em;
}
.cookie-banner p {
  margin: 0 0 .7rem;
  font-size: .875rem;
  line-height: 1.5;
}
.cookie-banner__privacy { color: var(--ink); font-size: .8rem; text-underline-offset: .2em; }
.cookie-banner__actions { display: flex; gap: .75rem; margin-top: 1.25rem; }
.cookie-banner__actions button {
  flex: 1;
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border: 1px solid var(--violet);
  border-radius: 0;
  background: #fff;
  color: var(--violet);
  cursor: pointer;
  font-size: .875rem;
}
.cookie-banner__actions button:hover { background: var(--violet); color: #fff; }
@media (min-width: 760px) and (max-height: 700px) {
  .cookie-banner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem 2rem;
    width: calc(100% - 2 * var(--page-gutter));
    padding: 1.25rem;
  }
  .cookie-banner h2, .cookie-banner p, .cookie-banner__privacy { grid-column: 1; margin: 0; }
  .cookie-banner p { max-width: 45rem; }
  .cookie-banner__actions {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    min-width: 15rem;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }