/* NATRIUM tokens. Shared by the site and the identity guide. */

@font-face {
  font-family: 'Akzidenz Ext';
  src: url('../fonts/akzidenz-grotesk-extended.otf') format('opentype');
  font-display: swap;
}

:root {
  --black: #030303;
  --bone: #ebe6dd;
  --na: #ffa41b;           /* Natrium 589: the lamp, the one accent */
  --neon: #c2334d;         /* only in the first seconds of the warm-up */
  --line: rgba(235, 230, 221, 0.18);
  --soft: rgba(235, 230, 221, 0.58);
  --faint: rgba(235, 230, 221, 0.32);

  --ext: 'Akzidenz Ext', 'Helvetica Neue', Arial, sans-serif;
  --text: var(--ext); /* one typeface everywhere: the face of the wordmark */

  --u: 8px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: 400ms;
  color-scheme: dark;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1440px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--bone);
  font: 400 14px/1.7 var(--text);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--na); color: var(--black); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, svg { display: block; max-width: 100%; }
ul { list-style: none; }

.micro {
  font: 400 10px/16px var(--ext);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}
.title {
  font: 400 clamp(26px, 4.4vw, 72px)/1.08 var(--text);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.title-s {
  font: 400 clamp(22px, 2.8vw, 40px)/1.1 var(--text);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.lede { font-size: 15px; line-height: 1.65; color: var(--soft); max-width: 34em; }

/* The wordmark. Fixed, centred, never in a bar, and it inverts over images. */
.logo {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 168px;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 20;
}
.corner {
  position: fixed;
  top: 24px;
  z-index: 20;
  mix-blend-mode: difference;
  color: #fff;
}
.corner.l { left: var(--gutter); }
@media (max-width: 599px) {
  .logo { width: 128px; top: 28px; }
  .corner.l { display: none; }
}
.corner.r { right: var(--gutter); }
.corner .micro { color: #fff; }

:focus-visible { outline: 1px solid var(--na); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}