/* Generated from tokens.json by scripts/build-tokens.rb. Do not edit by hand: change tokens.json and run the script again. */

:root, [data-theme="light"] {
  --black: #170A0D;
  --white: #EEEEEE;
  --grey: #BCBCBC;
  --dark-grey: #626262;
  --surface: var(--white);
  --ink: var(--black);
  --ink-muted: var(--dark-grey);
  --surface-muted: var(--grey);
  --surface-inverse: var(--black);
  --ink-inverse: var(--white);
  --focus: var(--ink);
  --button-bg: var(--surface-inverse);
  --button-ink: var(--ink-inverse);
  --button-bg-hover: var(--grey);
  --button-ink-hover: var(--black);
  --button-bg-pressed: var(--dark-grey);
  --button-ink-pressed: var(--white);
  --button-bg-disabled: var(--surface-muted);
  --button-ink-disabled: var(--ink-muted);
  --hover-dark: var(--black);
  --on-hover-dark: var(--white);
  --hover-light: var(--white);
  --on-hover-light: var(--black);
  --menu-bg: var(--black);
  --menu-ink: var(--white);
  --work-divider: var(--grey);
}

[data-theme="dark"] {
  --surface: var(--black);
  --ink: var(--white);
  --ink-muted: var(--grey);
  --surface-muted: var(--dark-grey);
  --surface-inverse: var(--white);
  --ink-inverse: var(--black);
  --focus: var(--ink);
  --button-bg: var(--surface-inverse);
  --button-ink: var(--ink-inverse);
  --button-bg-hover: var(--grey);
  --button-ink-hover: var(--black);
  --button-bg-pressed: var(--dark-grey);
  --button-ink-pressed: var(--white);
  --button-bg-disabled: var(--surface-muted);
  --button-ink-disabled: var(--ink-muted);
  --hover-dark: var(--black);
  --on-hover-dark: var(--white);
  --hover-light: var(--white);
  --on-hover-light: var(--black);
  --menu-bg: var(--black);
  --menu-ink: var(--white);
  --work-divider: var(--dark-grey);
}

:root {
  /* spacing */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  /* layout */
  --columns: 12;
  --gutter: 24px;
  --margin-phone: 24px;
  --margin-tablet: 40px;
  --margin-desktop: 40px;
  --content-max: 1520px;
  --text-max: 640px;
  /* breakpoint */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1600px;
  /* radius */
  --radius-none: 0;
  /* outline */
  --focus-width: 2px;
  --focus-offset: 2px;
  /* underline */
  --underline-width: 1px;
  --underline-width-hover: 2px;
  --underline-offset: 0.25em;
  /* button */
  --button-padding-block: 14px;
  --button-padding-inline: 29px;
  --button-gap: 30px;
  --button-logo-height: 40px;
  /* hoverButton */
  --hover-label-padding-block: 7px;
  --hover-label-padding-inline: 4px;
  --hover-label-min-width: 88px;
  /* navLink */
  --nav-link-gap: 40px;
  --nav-link-shift: 40px;
  --nav-link-gap-phone: 24px;
  /* menu */
  --menu-inset: 40px;
  --menu-inset-phone: 24px;
  --menu-close-size: 48px;
  --menu-close-top: 29px;
  /* header */
  --header-gap: 40px;
  /* workItem */
  --work-item-indent: 117px;
  --work-item-shift: 48px;
  --work-number-offset: 0.3em;
  --work-title-width: 585px;
  --work-image-width: 461px;
  --work-image-height: 325px;
  /* bullet */
  --bullet-size: 7px;
  --bullet-slot: 21px;
  --bullet-top: 11px;
  /* cursor */
  --cursor-dot-size: 11px;
  --cursor-dot-size-moving: 24px;
  /* type */
  --font-display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

.display {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 92px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.h1 {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 68px;
  font-weight: 400;
}

.h2 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
}

.h3 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
}

.bullet-heading {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hover-label {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.nav-link-text {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 118px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.nav-link-number {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 31px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.menu-close {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.work-title {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 76px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.work-number {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 35px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lead {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 32px;
  font-weight: 300;
}

.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.button-label {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.header-link {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
}

.body-lower {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
}