:root {
  /* Type — each style is a size / line-height / letter-spacing set */
  --font-primary: 'Reform Grotesk', sans-serif;
  --font-weight-medium: 500;

  /* P: uppercase labels, nav, captions, buttons */
  --font-size-p: 12px;
  --line-height-p: 12px;
  --letter-spacing-p: 0.5px;

  /* Body small: running text */
  --font-size-body-sm: 13px;
  --line-height-body-sm: 18px;
  --letter-spacing-body-sm: 0.2px;

  /* Title: home hero */

  --font-size-title: 32px;
  --line-height-title: 36px;
  --letter-spacing-title: 1px;

  /* Icon: glyph buttons such as the close × */
  --font-size-icon: 24px;
  --line-height-icon: 1;

  /* Primitives — reference via semantic tokens below, not directly */
  --color-black: #0e0e0e;
  --color-black-50: rgba(14, 14, 14, 0.5);
  --color-white: #ffffff;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-grey-100: #f9f9f9;
  --color-grey-200: #efefef;

  /* Text */
  --text-primary: var(--color-black);
  --text-secondary: var(--color-black-50);
  --text-tertiary: var(--color-white-70);
  --text-inverse: var(--color-white);

  /* Surface */
  --surface-primary: var(--color-white);
  --surface-secondary: var(--color-grey-200);
  --surface-tertiary: var(--color-grey-100);
  --surface-inverse: var(--color-black);

  /* Shadow */
  --shadow-nav: 0 2px 12px rgba(14, 14, 14, 0.08);

  /* Border */
  --border-primary: var(--color-black);
  --border-secondary: var(--color-grey-200);

  --margin: 10px;
  --space-a: 20px;
  --space-b: 50px;
  --nav-height: calc(var(--line-height-p) + var(--margin) * 2);
  --transition-delay: 0.4s;
  --transition-page-out: 0.3s;
  --transition-page-in: 0.8s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --scrollbar-color: var(--text-primary);
  background-color: var(--surface-primary);
  color-scheme: light;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  letter-spacing: var(--letter-spacing-body-sm);
}

/* Page scrollbar: native one hidden, overlay thumb drawn by the root layout.
   Nested scroll areas: 4px, type colour, shown while html.scrolling is set. */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
  border-radius: 0;
}

html.scrolling ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
}

/* Firefox can't size below "thin", so nested areas get the colour only */
@supports not selector(::-webkit-scrollbar) {
  body * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  html.scrolling body * {
    scrollbar-color: var(--scrollbar-color) transparent;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

.uppercase {
  text-transform: uppercase;
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  letter-spacing: var(--letter-spacing-p);
}

/* Page transitions */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

::view-transition-old(root) {
  animation: fade-out var(--transition-page-out) ease both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: fade-in var(--transition-page-in) ease both;
  mix-blend-mode: normal;
}

/* Hidden visually but read by screen readers and search engines */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}