:root {
  --font-body: "owners", system-ui, -apple-system, sans-serif;
  --font-narrow: "owners-narrow", "owners", system-ui, sans-serif;
  --font-wide: "owners-wide", "owners", system-ui, sans-serif;
  --font-display: "owners-xnarrow", "owners", system-ui, sans-serif;
  --blue: #4433ff;
  --white: #fff;
  --ink: var(--blue);
  --paper: var(--white);
  --rule: color-mix(in srgb, var(--ink) 35%, transparent);
  --ink-muted: color-mix(in srgb, var(--ink) 62%, transparent);
  --gutter: clamp(1.25rem, 2.78vw, 2.5rem);
  --indent: clamp(1.25rem, 10.83vw, 9.75rem);
  --line-length: 42rem;
  --header-height: 3.5625rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(2.5rem, 5vw, 4.5rem);
  --space-3xl: clamp(3.5rem, 8vw, 7rem);
  --section-padding-block: clamp(3.5rem, 7.5vw, 6.75rem);
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.9375rem;
  --font-size-s: 1.125rem;
  --font-size-m: clamp(1.25rem, 1.153rem + 0.385vw, 1.5rem);
  --font-size-l: clamp(1.25rem, 1.008rem + 0.963vw, 1.875rem);
  --font-size-xl: 3.4375rem;
  --font-size-2xl: clamp(3.4375rem, 3.195rem + 0.963vw, 4.0625rem);
  --font-size-3xl: clamp(4.6875rem, 2.63rem + 8.189vw, 10rem);
  --font-size-pill: clamp(0.9375rem, 0.671rem + 1.06vw, 1.625rem);
  --line-height-display: 0.9;
  --line-height-solid: 1;
  --line-height-statement: 1.067;
  --line-height-tight: 1.2;
  --line-height-body: 1.4;
  --line-height-double: 2;
  --letter-spacing-body: 0.05em;
  --letter-spacing-display: 0.05em;
  --letter-spacing-label: 0.16em;
  --letter-spacing-micro: 0.24em;
  --radius-section: 0.7rem;
  --radius-card: 1rem;
  --radius-pill: 100vmax;
  --hairline: 1px;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 240ms;
  --duration-menu: 640ms;
  --easing-menu: cubic-bezier(0.76, 0, 0.24, 1);
}

@media (max-width: 48rem) {
  :root {
    --line-height-statement: 1.2;
  }
}
.theme-blue {
  --ink: var(--white);
  --paper: var(--blue);
  --rule: color-mix(in srgb, var(--white) 30%, transparent);
  --ink-muted: color-mix(in srgb, var(--white) 65%, transparent);
  background-color: var(--paper);
  color: var(--ink);
}

.theme-white {
  --ink: var(--blue);
  --paper: var(--white);
  --rule: color-mix(in srgb, var(--blue) 30%, transparent);
  --ink-muted: color-mix(in srgb, var(--blue) 62%, transparent);
  background-color: var(--paper);
  color: var(--ink);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-height) + var(--space-m));
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

cite {
  font-style: inherit;
}

hr {
  border: 0;
  border-block-start: var(--hairline) solid currentColor;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

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

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-s);
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-solid);
  letter-spacing: var(--letter-spacing-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.display--hero {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-display);
}
.display--compact {
  font-size: var(--font-size-xl);
}
.display em,
.display i {
  font-style: italic;
}

.section-label {
  display: inline-block;
  margin-block-end: var(--space-2xl);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-body);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  text-decoration-skip-ink: auto;
}

.micro-label {
  font-size: var(--font-size-2xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-micro);
  text-transform: uppercase;
}
.micro-label--muted {
  color: var(--ink-muted);
}
.micro-label--lowercase {
  text-transform: none;
}
.micro-label a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 0.08em;
  transition: text-decoration-color var(--duration) var(--easing);
}
.micro-label a:hover,
.micro-label a:focus-visible {
  text-decoration-color: currentColor;
}

.label {
  font-family: var(--font-narrow);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.label--muted {
  color: var(--ink-muted);
}
.label--lowercase {
  line-height: var(--line-height-solid);
  text-transform: none;
}
.label--meta {
  font-size: var(--font-size-s);
  font-weight: 400;
  line-height: 0.83;
}
.label--heading {
  font-size: var(--font-size-s);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.button-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-solid);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.menu-link {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-double);
  letter-spacing: 0;
  text-transform: uppercase;
}

.prose {
  font-size: var(--font-size-s);
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  max-width: var(--line-length);
}
.prose p + p {
  margin-block-start: 1.25em;
}
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.prose--note {
  font-weight: 400;
  font-style: italic;
  line-height: var(--line-height-solid);
}

.statement {
  font-size: var(--font-size-l);
  font-weight: 500;
  line-height: var(--line-height-statement);
  letter-spacing: var(--letter-spacing-body);
  text-wrap: balance;
}
.statement--quote {
  font-size: var(--font-size-m);
  line-height: 1.25;
}
.statement--continuation {
  font-size: var(--font-size-m);
  font-weight: 400;
  line-height: 1.1;
}
.statement--italic {
  font-style: italic;
}

.group-title {
  font-family: var(--font-narrow);
  font-size: var(--font-size-l);
  font-weight: 400;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  text-transform: uppercase;
}

.wordmark {
  font-family: var(--font-wide);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  text-transform: uppercase;
}
.wordmark__secondary {
  font-weight: 400;
}

.text-italic {
  font-style: italic;
}

@media (max-width: 48rem) {
  .display--hero {
    line-height: 0.93;
    letter-spacing: 0;
  }

  .group-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-label);
  }

  .label--meta {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-solid);
  }
}
main {
  margin-block-start: var(--header-height);
}

.section {
  padding-block: var(--section-padding-block);
  padding-inline: var(--gutter);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.15em;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--ink);
  color: var(--paper);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: var(--line-height-solid);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing), border-color var(--duration) var(--easing);
}
.button:hover, .button:focus-visible {
  background-color: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}
.button--outline {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button--outline:hover, .button--outline:focus-visible {
  background-color: var(--ink);
  color: var(--paper);
}
.button--small {
  padding: 0.5em 1em;
}
.button .button__arrow {
  transition: transform var(--duration) var(--easing);
}
.button:hover .button__arrow {
  transform: translateX(0.15em);
}
.button[data-arrow=down]:hover .button__arrow {
  transform: translate(0, 0.15em);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.field {
  padding: 0.55em 1.15em;
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-s);
  line-height: var(--line-height-solid);
  letter-spacing: var(--letter-spacing-body);
}
.field::placeholder {
  color: var(--ink-muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  padding: 0.3em 1.1em;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-pill);
  font-weight: 400;
  line-height: var(--line-height-solid);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing);
}
.pill[aria-pressed=true] {
  background-color: var(--ink);
  color: var(--paper);
}
.pill:hover:not([aria-pressed=true]) {
  background-color: color-mix(in srgb, var(--ink) 10%, transparent);
}

.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
}

.card {
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
  padding: var(--space-l) calc(var(--indent) - var(--gutter));
  background-color: transparent;
}

.card--solid {
  border-color: transparent;
  background-color: var(--paper);
  color: var(--ink);
}

.duotone {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 0.35rem);
  background-color: var(--blue);
  isolation: isolate;
}
.duotone img {
  width: 100%;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: screen;
}
.duotone[data-ratio="16-10"] {
  aspect-ratio: 16/10;
}
.duotone[data-ratio="16-9"] {
  aspect-ratio: 16/9;
}
.duotone[data-ratio="4-3"] {
  aspect-ratio: 4/3;
}
.duotone img {
  height: 100%;
  object-fit: cover;
}

.drawing {
  display: block;
  width: 100%;
  background: none;
}

@media (max-width: 48rem) {
  .button {
    white-space: normal;
    text-align: center;
  }
}
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  height: var(--header-height);
  overflow: hidden;
  border-block-end: var(--hairline) solid currentColor;
  transition: height var(--duration-menu) var(--easing-menu);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: calc(var(--header-height) - var(--hairline));
}
.site-header__logo {
  display: inline-block;
  white-space: nowrap;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  width: min(7.125rem, 28.35vw);
  height: calc(1.25rem + var(--space-xs) * 2);
  padding-block: var(--space-xs);
  padding-inline: 0;
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: var(--hairline);
  background-color: currentColor;
  transition: transform var(--duration) var(--easing), opacity var(--duration) var(--easing);
}

.site-menu {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height));
  justify-content: center;
  padding-block: 3.75rem;
  visibility: hidden;
  transition: visibility 0s linear var(--duration-menu);
  overflow-y: auto;
}
.site-menu__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
}
.site-menu__list a {
  display: block;
  width: min(24.875rem, 100%);
  padding-block: 0.1875rem;
  text-align: center;
  transition: opacity var(--duration) var(--easing);
}
.site-menu__list a:hover {
  opacity: 0.6;
}

.language-switch {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--gutter) + 7.125rem + var(--space-m));
  display: flex;
  align-items: center;
  gap: 0.35em;
  height: var(--header-height);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--duration-menu) var(--easing-menu);
}
.language-switch a {
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
}
.language-switch a[aria-current=page] {
  text-decoration: underline;
}

.site-header.is-open {
  height: 100dvh;
}
.site-header.is-open .site-menu {
  visibility: visible;
  transition-delay: 0s;
}
.site-header.is-open .language-switch {
  opacity: 1;
}
.site-header.is-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .menu-toggle span:first-child {
  transform: translateY(0.625rem) rotate(15deg);
}
.site-header.is-open .menu-toggle span:last-child {
  transform: translateY(-0.625rem) rotate(-15deg);
}

body.is-locked {
  overflow: hidden;
}

@media (max-width: 48rem) {
  .site-header__author {
    display: none;
  }

  .site-header__bar {
    gap: var(--space-s);
  }

  .site-menu {
    padding-block: 3.75rem 2.5rem;
  }

  .language-switch {
    position: static;
    height: auto;
    margin-block: auto 0;
    padding-block-start: var(--space-2xl);
    justify-content: center;
  }
}
.hero {
  --hero-step-1: 22.6%;
  --hero-step-2: 33.6%;
  position: relative;
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
  padding-inline: var(--gutter);
  overflow: hidden;
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__line {
  margin-inline-start: var(--hero-step-1);
}
.hero__line--shifted {
  margin-inline-start: var(--hero-step-2);
}
.hero__opening {
  margin-block-start: clamp(1.5rem, 3vw, 2.75rem);
  margin-inline-start: var(--hero-step-2);
  line-height: var(--line-height-display);
  text-transform: uppercase;
}
.hero__body {
  margin-block-start: clamp(2.5rem, 6vw, 5.5rem);
  margin-inline-start: var(--hero-step-2);
  max-width: 56rem;
}
.hero__quote {
  margin-block-end: var(--space-l);
  line-height: var(--line-height-solid);
}
.hero__meta {
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.hero__drawing {
  position: absolute;
  inset-inline-start: 6.875%;
  inset-block-start: 30.7%;
  width: min(22.3%, 20.0625rem);
}

@media (max-width: 60rem) {
  .hero {
    display: grid;
  }
  .hero__title {
    width: 100%;
  }
  .hero__line {
    margin-inline-start: 0;
  }
  .hero__line--shifted {
    margin-inline-start: 12%;
  }
  .hero__opening, .hero__body {
    margin-inline-start: 0;
    max-width: none;
    text-align: center;
  }
  .hero__drawing {
    position: static;
    order: 1;
    width: 79%;
    margin-inline: auto;
    margin-block: clamp(1.5rem, 5vw, 2.5rem);
  }
  .hero__body {
    order: 2;
    max-width: none;
  }
  .hero__meta {
    order: 3;
  }
}
.threshold__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-2xl);
}
.threshold__head {
  grid-column: 1;
  grid-row: 1;
  max-width: 24ch;
}
.threshold__left {
  grid-column: 1;
  grid-row: 2;
}
.threshold__right {
  grid-column: 2;
  grid-row: 2;
}
.threshold__statement {
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
}
.threshold__conclusion {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
.threshold__reference {
  margin-block-start: var(--space-l);
  color: var(--ink-muted);
}

.scale {
  --scale-inset: calc(var(--indent) - var(--gutter));
  --scale-muted: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  margin-inline: var(--scale-inset);
}
.scale__caption {
  display: block;
  width: max-content;
  margin-inline: auto;
  padding: 0.25em 0.9em;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-pill);
}
.scale__connector {
  width: var(--hairline);
  height: 3.5rem;
  margin-inline: auto;
  background-image: linear-gradient(to bottom, currentColor 0 4px, transparent 4px 9px);
  background-size: var(--hairline) 9px;
}
.scale__edges {
  display: flex;
  justify-content: space-between;
  margin-block-end: 2.25rem;
}
.scale__axis {
  position: relative;
  height: var(--hairline);
  background-color: currentColor;
}
.scale__axis::before, .scale__axis::after {
  content: "";
  position: absolute;
  inset-block-start: -1.25rem;
  width: var(--hairline);
  height: 2.5rem;
  background-color: currentColor;
}
.scale__axis::before {
  inset-inline-start: 0;
}
.scale__axis::after {
  inset-inline-end: 0;
}
.scale__band {
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 17.5%;
  height: 0.85rem;
  border-radius: 0.15rem;
  background-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.scale__dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background-color: var(--ink);
}
.scale__stations {
  position: relative;
  min-height: 11.5rem;
  margin-block-start: 1.5rem;
}
.scale__station {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--position);
  transform: translateX(-50%);
  width: max-content;
  max-width: 12rem;
  text-align: center;
}
.scale__name {
  color: var(--scale-muted);
}
.scale__arrow {
  position: relative;
  width: var(--hairline);
  height: 2.75rem;
  margin: 1rem auto;
  background-color: currentColor;
}
.scale__arrow::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  border: 0.3rem solid transparent;
  border-block-start-color: currentColor;
}
.scale__arrow--dashed {
  background-color: transparent;
  background-image: linear-gradient(to bottom, currentColor 0 4px, transparent 4px 9px);
  background-size: var(--hairline) 9px;
}
.scale__arrow--dashed::after {
  content: none;
}
.scale__note {
  margin-block-end: 1.5rem;
}

@media (max-width: 48rem) {
  .threshold__intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .threshold__intro .threshold__head,
.threshold__intro .threshold__left,
.threshold__intro .threshold__right {
    grid-column: 1;
    grid-row: auto;
  }

  .scale {
    --axis-position: 43.25%;
    --axis-length: 43.8rem;
    --axis-end-padding: 0.8rem;
    --tick-width: 3.125rem;
    --name-from-axis: 4.2rem;
    --verdict-from-axis: 5.95rem;
    --note-from-axis: 9.45rem;
    --arrow-from-axis: 6.55rem;
    --arrow-length: 3.7rem;
    --edge-gap: 3.15rem;
    position: relative;
    margin-inline: 0;
    padding-block: var(--axis-end-padding);
    min-height: calc(var(--axis-length) + var(--axis-end-padding) * 2);
  }
  .scale__connector {
    display: none;
  }
  .scale__axis {
    position: absolute;
    inset-block: var(--axis-end-padding);
    inset-inline-start: var(--axis-position);
    width: var(--hairline);
    height: auto;
  }
  .scale__axis::before, .scale__axis::after {
    inset-block-start: auto;
    inset-inline-start: calc(var(--tick-width) / -2);
    inset-inline-end: auto;
    width: var(--tick-width);
    height: var(--hairline);
  }
  .scale__axis::before {
    inset-block-start: 0;
  }
  .scale__axis::after {
    inset-block-end: 0;
  }
  .scale__band {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 1.25rem;
    height: 11.2rem;
    border-radius: 0;
  }
  .scale__band::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: var(--tick-width);
    height: var(--hairline);
    background-color: currentColor;
  }
  .scale__dot {
    width: 1.25rem;
    height: 1.25rem;
  }
  .scale__edges {
    position: absolute;
    inset-block: var(--axis-end-padding);
    inset-inline: 0 calc(100% - var(--axis-position) + var(--edge-gap));
    flex-direction: column;
    justify-content: space-between;
    margin-block-end: 0;
    text-align: end;
  }
  .scale__edges span:first-child {
    transform: translateY(-50%);
  }
  .scale__edges span:last-child {
    transform: translateY(50%);
  }
  .scale__caption {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% - var(--axis-position) + 2.5rem);
    transform: translateY(-50%);
    margin-inline: 0;
  }
  .scale__stations {
    position: absolute;
    inset-block: var(--axis-end-padding);
    inset-inline: 0;
    min-height: 0;
    margin-block-start: 0;
  }
  .scale__station {
    position: absolute;
    inset-block-start: var(--position);
    inset-inline-start: var(--axis-position);
    transform: none;
    width: 0;
    max-width: none;
  }
  .scale__name {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--name-from-axis);
    transform: translate(-50%, -50%);
    width: 4.75rem;
    text-align: center;
  }
  .scale__verdict {
    position: absolute;
    inset-inline-start: var(--verdict-from-axis);
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .scale__note {
    position: absolute;
    inset-inline-start: var(--note-from-axis);
    transform: translateX(-50%);
    width: 5rem;
    margin-block-end: 0;
    text-align: center;
  }
  .scale__arrow {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--arrow-from-axis);
    height: var(--arrow-length);
    margin: 0;
    transform-origin: top center;
    transform: rotate(-45deg);
  }
  .scale__station:nth-child(1) .scale__note {
    inset-block-start: 3.45rem;
  }
  .scale__station:nth-child(1) .scale__verdict {
    inset-block-start: 6.9rem;
  }
  .scale__station:nth-child(2) .scale__note {
    inset-block-start: 2.3rem;
  }
  .scale__station:nth-child(2) .scale__verdict {
    inset-block-start: -4.6rem;
  }
  .scale__station:nth-child(3) .scale__arrow {
    transform: rotate(-135deg);
  }
  .scale__station:nth-child(3) .scale__note {
    inset-block-start: -4.7rem;
  }
  .scale__station:nth-child(3) .scale__verdict {
    inset-block-start: -7.55rem;
  }
}
.test__intro {
  margin-block-start: var(--space-m);
  max-width: 46ch;
}
.test__questions {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-block: clamp(3rem, 6vw, 5.5rem);
}
.test__conclusion {
  display: grid;
  gap: var(--space-l);
  max-width: 46ch;
}

.question {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3xs);
  width: min(100%, 42rem);
  padding: var(--space-l) var(--space-m) var(--space-l) 2.25rem;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-card);
}
.question:nth-child(1) {
  margin-inline-start: 26.8%;
}
.question:nth-child(2) {
  margin-inline-start: 42.7%;
}
.question:nth-child(3) {
  margin-inline-start: 10.7%;
}
.question:nth-child(4) {
  margin-inline-start: 34.7%;
}
.question__index {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14.8vw, 13.375rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  text-align: center;
  user-select: none;
}
.question__answers {
  margin-block-start: var(--space-m);
}

.diagnostic {
  width: min(100%, 42rem);
  margin-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5.5rem);
  scroll-margin-block-start: var(--space-2xl);
}
.diagnostic__label {
  margin-block-end: var(--space-xs);
}
.diagnostic__box {
  display: grid;
  align-content: start;
  gap: var(--space-s);
  min-height: 11rem;
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-card);
}
.diagnostic__verdict {
  color: var(--ink);
}
.diagnostic__box:not(.is-complete) .diagnostic__verdict {
  color: var(--ink-muted);
}

@media (max-width: 60rem) {
  .question {
    width: 100%;
  }
  .question:nth-child(n) {
    margin-inline-start: 0;
  }
}
@media (max-width: 48rem) {
  .question {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-m) var(--space-m) var(--space-m) var(--space-s);
  }
  .question__index {
    font-size: clamp(8.75rem, 14.8vw, 13.375rem);
  }
  .question__answers {
    margin-block-start: var(--space-s);
  }
}
.essays__intro {
  margin-block-start: var(--space-m);
  max-width: 52ch;
}
.essays__list {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.pathway {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-s);
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
.pathway__door {
  display: grid;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-m);
  transition: background-color var(--duration) var(--easing);
}
.pathway__door:hover {
  background-color: color-mix(in srgb, var(--ink) 8%, transparent);
}
.pathway__rank {
  color: var(--ink-muted);
  line-height: var(--line-height-solid);
}
.pathway__purpose {
  color: var(--ink-muted);
}
.pathway__title {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 2px;
}

.objection {
  display: grid;
  gap: var(--space-s);
}
.objection__quote {
  max-width: 34rem;
}

.essay-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-m) var(--space-2xl);
  padding: var(--space-l) calc(var(--indent) - var(--gutter));
}
.essay-featured__title {
  display: inline-block;
  margin-block: var(--space-2xs) var(--space-s);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 2px;
}
.essay-featured__quote {
  margin-block-end: var(--space-s);
}

.essay-group {
  padding: var(--space-l) calc(var(--indent) - var(--gutter));
}
.essay-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  margin-block-end: var(--space-m);
}
.essay-group__name {
  position: relative;
  flex: 1;
}
.essay-group__index {
  position: absolute;
  inset-inline-end: 100%;
  padding-inline-end: var(--space-m);
}
.essay-group__tag {
  flex: none;
  text-align: end;
}

.essay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs) var(--space-2xl);
  padding-block: var(--space-s);
}
.essay:first-of-type {
  padding-block-start: 0;
}
.essay + .essay {
  border-block-start: var(--hairline) solid var(--rule);
}
.essay__title {
  grid-column: 1;
  display: inline-block;
  justify-self: start;
  margin-block-end: var(--space-2xs);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 2px;
}
.essay__body {
  grid-column: 1;
}
.essay__subtitle {
  color: var(--ink-muted);
}
.essay--appendix .essay__title {
  font-size: var(--font-size-m);
}
.essay__actions {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
}

@media (max-width: 48rem) {
  .essay-featured,
.essay {
    grid-template-columns: minmax(0, 1fr);
  }

  .essay__actions {
    grid-column: 1;
    grid-row: auto;
    margin-block-start: var(--space-s);
    justify-content: flex-end;
  }

  .essay-group__index {
    position: static;
    padding-inline-end: 0.5rem;
  }

  .essay-group__name {
    flex: 0 1 auto;
    min-width: 0;
  }

  .essay-group__tag {
    flex: 1 1 0;
    min-width: 0;
  }
}
.notebook__intro {
  margin-block-start: var(--space-m);
  max-width: 52ch;
}
.notebook__notes {
  display: grid;
  gap: var(--space-s);
  margin-block: clamp(2.5rem, 5vw, 4rem) var(--space-l);
}
.notebook__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-2xl);
  transition: background-color var(--duration) var(--easing);
}
.notebook__note:hover {
  background-color: color-mix(in srgb, var(--ink) 6%, transparent);
}
.notebook__date {
  grid-column: 2;
  grid-row: 1;
  text-align: end;
}
.notebook__title {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.notebook__excerpt {
  grid-column: 1;
  grid-row: 2;
}
.notebook__title {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 2px;
}
@media (max-width: 48rem) {
  .notebook__note {
    grid-template-columns: minmax(0, 1fr);
  }
  .notebook__date, .notebook__title, .notebook__excerpt {
    grid-column: 1;
    grid-row: auto;
    text-align: start;
  }
}
.notebook__excerpt {
  color: var(--ink-muted);
  max-width: 56ch;
}

.book {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--gutter);
  background-color: #e9e9e9;
  background-image: url("/assets/images/book-photo.jpg");
  background-size: 116%;
  background-position: 49% 45%;
  background-repeat: no-repeat;
}
.book::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.book > * {
  position: relative;
  z-index: 1;
}
.book__intro {
  max-width: 34rem;
  color: var(--blue);
}
.book__title {
  color: var(--blue);
}
.book__subtitle {
  margin-block-start: var(--space-s);
}
.book__body {
  margin-block-start: var(--space-m);
  max-width: 34rem;
}
.book__meta {
  margin-block-start: var(--space-m);
}
.book__invitation {
  margin: clamp(2rem, 4vw, 3rem) 0 var(--space-l);
  max-width: min(46rem, 100%);
  color: var(--white);
}
.book__enter {
  margin-block-start: var(--space-m);
}
.book__retailers {
  margin-block-start: var(--space-m);
  color: var(--white);
}
.book__retailers a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.book__claims {
  display: grid;
  gap: var(--space-m);
  margin-block: clamp(4rem, 11vw, 9rem) var(--space-l);
  max-width: 34rem;
  color: var(--white);
}

@media (max-width: 60rem) {
  .book {
    background-size: cover;
    background-position: 62% 30%;
  }
}
@media (max-width: 48rem) {
  .book__buy .button {
    display: flex;
    justify-content: center;
    padding-block: 0.85em;
  }
}
.press__intro {
  margin-block-start: var(--space-m);
  max-width: 52ch;
}
.press__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-m);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  margin-inline: calc(var(--indent) - var(--gutter));
}
.press__cards--single {
  grid-template-columns: minmax(0, 1fr);
}
.press__contact {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  color: var(--ink-muted);
}
.press__contact a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 1.3rem;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-card);
}
.article__meta {
  margin-block-end: calc(var(--space-2xs) * -1);
}
.article__byline {
  color: var(--ink-muted);
}
.article__action {
  margin-block-start: auto;
  align-self: flex-start;
}
.article__action a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.article__text {
  display: grid;
  gap: var(--space-xs);
}

@media (max-width: 48rem) {
  .press__cards {
    margin-inline: 0;
  }
}
.access__intro {
  margin-block-start: var(--space-m);
  max-width: 52ch;
}
.access__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-2xl) var(--space-xl);
  margin-block-start: clamp(3rem, 6vw, 5rem);
}
.access__column {
  display: grid;
  justify-items: center;
  gap: var(--space-l);
  text-align: center;
}
.access__text {
  max-width: 32ch;
}
.access__legal {
  max-width: none;
}

.coda {
  padding-block: clamp(5rem, 12vw, 11rem);
  padding-inline: var(--gutter);
  text-align: center;
}
.coda p {
  max-width: 40ch;
  margin-inline: auto;
}
.coda__drawing {
  width: min(14rem, 45%);
  margin-inline: auto;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.follow__intro {
  margin-block-start: var(--space-m);
  max-width: 52ch;
}
.follow__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  max-width: 34rem;
}
.follow .field {
  flex: 1 1 14rem;
}
.follow__note {
  margin-block-start: var(--space-xs);
  min-height: 1lh;
  color: var(--ink-muted);
}
.follow__links {
  margin-block-start: var(--space-l);
}

.site-footer {
  padding-inline: var(--gutter);
}
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  min-height: var(--header-height);
}
.site-footer__back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: opacity var(--duration) var(--easing);
}
.site-footer__back-to-top:hover {
  opacity: 0.7;
}
.site-footer__back-to-top span:last-child {
  transition: transform var(--duration) var(--easing);
}
.site-footer__back-to-top:hover span:last-child {
  transform: translateY(-0.15em);
}

@media (max-width: 48rem) {
  .site-footer__author {
    display: none;
  }
}
.is-revealed .page-outro {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 0;
}
.is-revealed main {
  position: relative;
  z-index: 1;
  background-color: var(--paper);
  margin-block-end: var(--outro-height);
}