@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --paper: #F4F5F3;
  --paper-2: #ECEFEF;
  --ink: #151B22;
  --ink-2: #1D252E;
  --ink-3: #26303B;
  --slate: #3D4B5B;
  --steel: #7D8996;
  --mist: #DEE3E7;
  --rule: #C4CBD2;
  --rule-ink: #34404D;
  --ice: #8FD0D3;
  --teal: #1F6E72;
  --teal-deep: #174F52;
  --error: #A3312B;
  --error-ink: #F2A6A0;
  --ok: #1F6E72;

  --text: var(--ink);
  --text-soft: var(--slate);
  --text-meta: var(--slate);
  --accent: var(--teal);

  --ridi-f21: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;
  --ridi-e33: "Alegreya Sans", "Gill Sans", "Seravek", "Trebuchet MS", sans-serif;
  --ridi-b28: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

  --step--2: 0.75rem;
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --ridi-fb5: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --ridi-a2b: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --ridi-895: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --ridi-28f: clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --ridi-14f: clamp(2.125rem, 1.6rem + 2.8vw, 4.25rem);
  --step-hero: clamp(2.25rem, 8vw + 0.5rem, 7.5rem);
  --step-numeral: clamp(6rem, 22vw, 22rem);
  --step-numeral-sm: clamp(3.5rem, 10vw, 8rem);

  --mono-size: 0.75rem;
  --mono-size-lg: 0.8125rem;
  --mono-track: 0.08em;
  --display-track: -0.02em;
  --measure: 64ch;
  --measure-wide: 72ch;

  --base: 8px;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4rem, 10vw, 9rem);
  --shell-max: 1440px;
  --rail-w: 132px;
  --bar-h: 4.5rem;

  --radius: 0;
  --radius-field: 2px;
  --hair: 1px solid var(--rule);
  --hair-ink: 1px solid var(--ink);
  --hair-dark: 1px solid var(--rule-ink);
  --shadow-lift: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(21, 27, 34, 0.45);
  --shadow-panel: 0 0 0 1px var(--ink), 0 24px 60px -30px rgba(21, 27, 34, 0.55);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 320ms;
  --dur-4: 640ms;
  --dur-5: 1100ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --ease-magnet: cubic-bezier(0.3, 1.35, 0.5, 1);
  --magnet-max: 6px;

  --z-base: 1;
  --z-header: 50;
  --z-rail: 60;
  --z-preview: 70;
  --z-consent: 80;
  --z-chat: 90;
  --z-skip: 100;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--text);
  font-family: var(--ridi-e33);
  font-size: var(--ridi-fb5);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

img, picture, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--ridi-f21);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: var(--display-track);
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
  hanging-punctuation: first;
  overflow-wrap: break-word;
}

h1, .h1 {
  font-size: var(--step-hero);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-variation-settings: "opsz" 96;
}
h2, .h2 { font-size: var(--ridi-14f); font-variation-settings: "opsz" 84; }
h3, .h3 { font-size: var(--ridi-895); line-height: 1.12; font-variation-settings: "opsz" 48; }
h4, .h4 { font-size: var(--ridi-a2b); line-height: 1.2; font-variation-settings: "opsz" 24; }

h1 em, h2 em, h3 em, .h1 em, .h2 em { font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

p { text-wrap: pretty; hanging-punctuation: first last; }
strong, b { font-weight: 700; }
small { font-size: var(--step--1); }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--teal-deep); text-decoration-thickness: 2px; }

::selection { background: var(--ink); color: var(--paper); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 0;
}
.band--ink :focus-visible, .site-footer :focus-visible, .consent :focus-visible { outline-color: var(--ice); }

.lede {
  font-size: var(--ridi-a2b);
  line-height: 1.45;
  color: var(--slate);
  max-width: 44ch;
}

.eyebrow, .meta, .mono {
  font-family: var(--ridi-b28);
  font-size: var(--mono-size);
  font-weight: 500;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-meta);
}
.meta { font-weight: 400; }
.eyebrow { display: inline-flex; align-items: baseline; gap: 0.75em; margin-bottom: 0.75em; position: relative; z-index: 2; }
.eyebrow__num { color: var(--teal); }
.band--ink .eyebrow, .band--ink .meta { color: var(--steel); }
.band--ink .eyebrow__num { color: var(--ice); }

.price-basis {
  font-family: var(--ridi-b28);
  font-size: var(--mono-size-lg);
  letter-spacing: 0.04em;
  color: var(--slate);
}

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.hp {
  position: absolute !important;
  left: -10000px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  stroke: currentColor;
  fill: none;
  vertical-align: -0.15em;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: var(--ridi-28f); margin-top: 2.5em; }
.prose h3 { font-size: var(--ridi-895); margin-top: 2em; }
.prose h4 { font-size: var(--ridi-a2b); margin-top: 1.75em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.75em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose ul li::marker { color: var(--teal); }
.prose ol li::marker { font-family: var(--ridi-b28); font-size: 0.8em; color: var(--teal); }
.prose blockquote {
  border-left: 1px solid var(--teal);
  padding: 0.25em 0 0.25em 1.25em;
  font-family: var(--ridi-f21);
  font-style: italic;
  font-size: var(--ridi-a2b);
  line-height: 1.4;
  color: var(--ink);
}
.prose hr { border: 0; border-top: var(--hair); margin-block: 2.5em; }
.prose code { font-family: var(--ridi-b28); font-size: 0.85em; background: var(--mist); padding: 0.1em 0.35em; }
.prose a { overflow-wrap: anywhere; }

.shell {
  width: min(100% - 2 * var(--gutter), var(--shell-max));
  margin-inline: var(--gutter) auto;
}
.shell--wide { width: min(100% - 2 * var(--gutter), 1680px); }

.section {
  position: relative;
  overflow-x: clip;
  padding-block: var(--section);
  border-top: var(--hair);
}
.section--flush-top { border-top: 0; }
.section--tight { padding-block: calc(var(--section) * 0.6); }

.band--ink {
  background: var(--ink);
  color: var(--paper);
  border-top-color: var(--ink);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--paper); }
.band--ink p { color: #D3D9DE; }
.band--ink a { color: var(--ice); }
.band--mist { background: var(--mist); border-top-color: var(--rule); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
}
.split > * { min-width: 0; }
@media (min-width: 1200px) {
  .split--wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split--wide-right > .split__narrow { order: 0; }
}

.grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid > * { min-width: 0; }

.stack > * + * { margin-top: var(--stack-gap, var(--s-4)); }
.stack--lg { --stack-gap: var(--s-6); }
.stack--sm { --stack-gap: var(--s-2); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.cluster > * { min-width: 0; }

.rule { border: 0; border-top: var(--hair); margin: 0; }
.rule--accent { border-top: 1px solid var(--teal); }
.band--ink .rule { border-top: var(--hair-dark); }

.numeral {
  display: block;
  font-family: var(--ridi-f21);
  font-weight: 400;
  font-size: var(--step-numeral);
  line-height: 0.78;
  letter-spacing: -0.045em;
  font-variation-settings: "opsz" 96;
  font-variant-numeric: lining-nums;
  color: var(--mist);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.numeral--bleed { margin-inline-start: calc(var(--gutter) * -1 - 0.04em); }
.numeral--behind {
  position: absolute;
  inset-block-start: calc(var(--section) * 0.35);
  inset-inline-start: 0;
  z-index: 0;
  margin-inline-start: -0.08em;
}
.numeral--sm { font-size: var(--step-numeral-sm); }
.band--ink .numeral { color: var(--slate); }
.band--mist .numeral { color: var(--paper); }
.section > .shell, .section > .split { position: relative; z-index: 1; }

.frame {
  margin: 0;
  position: relative;
}
.frame img {
  width: 100%;
  object-fit: cover;
  background: var(--mist);
}
.frame--portrait img { aspect-ratio: 2 / 3; }
.frame--landscape img { aspect-ratio: 3 / 2; }
.frame figcaption {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: var(--hair);
  font-family: var(--ridi-b28);
  font-size: var(--mono-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.band--ink .frame figcaption { border-top: var(--hair-dark); color: var(--steel); }

.baseline-ticks {
  background-image: linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 100% calc(var(--base) * 3);
}

@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;
    scroll-behavior: auto !important;
  }
  [data-magnetic] { translate: none !important; }
}