@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Source+Sans+3:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --pine: #14231A;
  --forest: #1F3A2B;
  --moss: #56643A;
  --bark: #2E2520;
  --oat: #E4D8BF;
  --cream: #F3ECDD;
  --amber: #C9831E;

  --amber-deep: #A96A12;
  --amber-ink: #8A5510;
  --amber-soft: #E9B764;
  --oat-deep: #D6C7A6;
  --cream-bright: #FAF5EA;
  --muted: #5B4E44;
  --muted-on-dark: #C9C0AC;
  --error: #9E2A1C;
  --error-on-dark: #F2A48F;
  --ok: #3E5A2A;

  --ink: var(--bark);
  --ground: var(--cream);
  --accent: var(--amber);
  --focus: var(--amber);

  --rule-light: rgba(46, 37, 32, .18);
  --rule-mid: rgba(46, 37, 32, .36);
  --rule-dark: rgba(243, 236, 221, .22);
  --rule-dark-strong: rgba(243, 236, 221, .42);
  --keyline: 1px solid var(--bark);
  --rule-thick: 6px;
  --rule-thin: 2px;

  --gijo-710: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --gijo-bf8: "Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gijo-d16: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-mega: clamp(4.5rem, 1.6rem + 12vw, 13rem);
  --fs-h1: clamp(2.25rem, 1.2rem + 5.6vw, 6.5rem);
  --fs-h2: clamp(1.75rem, 1.05rem + 3.1vw, 3.9rem);
  --fs-h3: clamp(1.3rem, 1.02rem + 1.15vw, 2rem);
  --fs-h4: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1.06rem + .6vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --fs-small: .9375rem;
  --fs-mono: .78rem;
  --fs-mono-lg: .875rem;

  --lh-tight: .98;
  --lh-snug: 1.12;
  --lh-head: 1.2;
  --lh-body: 1.6;
  --track-display: -.01em;
  --track-tight: -.02em;
  --track-mono: .08em;
  --measure: 66ch;
  --measure-narrow: 44ch;

  --space-3xs: .25rem;
  --space-2xs: .375rem;
  --space-xs: .625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.375rem;
  --space-2xl: 5.0625rem;
  --space-3xl: 7.59rem;

  --shell: 1320px;
  --shell-narrow: 880px;
  --gutter: clamp(20px, 4vw, 56px);
  --section: clamp(72px, 10vw, 160px);
  --section-half: clamp(40px, 5vw, 80px);

  --radius: 3px;
  --radius-0: 0;
  --tap: 44px;
  --control-h: 48px;
  --header-h: 76px;
  --header-h-condensed: 60px;

  --dur-instant: 90ms;
  --dur-quick: 150ms;
  --dur-base: 180ms;
  --dur-slow: 420ms;
  --dur-scene: 900ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-heavy: cubic-bezier(.7, 0, .2, 1);
  --ease-linear: linear;

  --z-header: 50;
  --z-nav: 60;
  --z-consent: 80;
  --z-chat: 90;
  --z-skip: 100;

  --consent-offset: 0px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--ground);
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gijo-bf8);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  overflow-x: clip;
  overflow-wrap: break-word;
}

html.nav-open,
html.nav-open body {
  overflow: hidden;
}

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

ul[class], ol[class] {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
  background: var(--oat);
}

iframe, embed, object {
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--amber);
  color: var(--pine);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--gijo-710);
  font-weight: 700;
  color: inherit;
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "lnum";
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  max-width: 16ch;
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  max-width: 22ch;
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 700;
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-head);
  font-weight: 500;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  max-width: 52ch;
}

.mega {
  font-family: var(--gijo-710);
  font-weight: 700;
  font-size: var(--fs-mega);
  line-height: .82;
  letter-spacing: var(--track-tight);
  font-variant-numeric: lining-nums tabular-nums;
}

.label,
.mono {
  font-family: var(--gijo-d16);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.4;
}

.mono--plain {
  text-transform: none;
  letter-spacing: .02em;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.label--rule::before {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.muted {
  color: var(--muted);
}

.num {
  font-family: var(--gijo-d16);
  font-variant-numeric: tabular-nums;
}

small, .small {
  font-size: var(--fs-small);
}

strong, b {
  font-weight: 600;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  display: inline-block;
  vertical-align: middle;
}

.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-s);
}

.prose h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin-top: var(--space-xl);
  max-width: 30ch;
}

.prose h3 {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-top: var(--space-l);
}

.prose h2 + *, .prose h3 + * {
  margin-top: var(--space-xs);
}

.prose ul, .prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: var(--space-2xs);
}

.prose li::marker {
  color: var(--amber-ink);
  font-family: var(--gijo-d16);
}

.prose a {
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}

.prose a:hover {
  color: var(--amber-ink);
  text-decoration-color: currentColor;
}

.prose blockquote {
  border-left: var(--rule-thick) solid var(--accent);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-m);
  font-family: var(--gijo-710);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.35;
  hanging-punctuation: first last;
}

.prose code, .prose kbd {
  font-family: var(--gijo-d16);
  font-size: .88em;
  background: var(--oat);
  padding: .1em .35em;
  border-radius: var(--radius);
}

.prose pre {
  overflow-x: auto;
  font-family: var(--gijo-d16);
  font-size: var(--fs-small);
  background: var(--oat);
  padding: var(--space-s);
  border-left: 4px solid var(--bark);
}

.prose hr {
  border: 0;
  border-top: var(--rule-thin) solid var(--rule-mid);
  margin-block: var(--space-xl);
}

.prose table {
  font-size: var(--fs-small);
}

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: calc(var(--shell-narrow) + var(--gutter) * 2);
}

.block {
  position: relative;
  padding-block: var(--section);
  background: var(--ground);
  color: var(--ink);
}

.block + .block,
.block--ruled {
  border-top: var(--rule-thick) solid var(--bark);
}

.block--tight { padding-block: var(--section-half); }

.block--cream { --ground: var(--cream); --ink: var(--bark); background: var(--cream); color: var(--bark); }
.block--oat { --ground: var(--oat); --ink: var(--bark); background: var(--oat); color: var(--bark); }

.block--forest,
.block--moss,
.block--bark,
.block--pine {
  --ink: var(--cream);
  --muted: var(--muted-on-dark);
  --rule-light: var(--rule-dark);
  --rule-mid: var(--rule-dark-strong);
  color: var(--cream);
}

.block--forest { --ground: var(--forest); background: var(--forest); }
.block--moss { --ground: var(--moss); background: var(--moss); --muted: #E4DCC8; }
.block--bark { --ground: var(--bark); background: var(--bark); }
.block--pine { --ground: var(--pine); background: var(--pine); }

.block--forest + .block,
.block--pine + .block,
.block + .block--forest,
.block + .block--pine {
  border-top-color: var(--bark);
}

.block--bark + .block,
.block + .block--bark {
  border-top-color: var(--pine);
}

.rule {
  border: 0;
  height: var(--rule-thick);
  background: var(--bark);
  margin: 0;
}

.rule--thin {
  height: var(--rule-thin);
  background: var(--rule-mid);
}

.rule--accent {
  background: var(--accent);
}

.stack > * + * { margin-top: var(--stack, var(--space-s)); }
.stack--s { --stack: var(--space-xs); }
.stack--m { --stack: var(--space-m); }
.stack--l { --stack: var(--space-l); }
.stack--xl { --stack: var(--space-xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster, var(--space-s));
  align-items: center;
}

.cluster > * { min-width: 0; }

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-l));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
}

.grid > *,
.split > *,
.split--wide > * {
  min-width: 0;
}

.split {
  display: grid;
  gap: var(--space-xl) clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }

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

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

.frame {
  position: relative;
  margin: 0;
  border: var(--keyline);
  background: var(--oat);
  overflow: hidden;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--wide { aspect-ratio: 3 / 2; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--pano { aspect-ratio: 2 / 1; }

.block--forest .frame,
.block--moss .frame,
.block--bark .frame,
.block--pine .frame {
  border-color: var(--rule-dark-strong);
}

.caption {
  font-family: var(--gijo-d16);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: var(--space-xs);
  max-width: 60ch;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-quick: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-scene: 0ms;
  }

  html {
    scroll-behavior: auto;
    scroll-snap-type: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-pin],
  .pin,
  .pin__stage {
    position: static !important;
    height: auto !important;
  }

  [data-pin-step],
  .pin__step {
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }
}

@media print {
  .site-header, .site-footer, .consent, .chat-launcher, .chat-panel, .skip-link {
    display: none !important;
  }

  body { background: #fff; color: #000; }
  .block { padding-block: 1.5rem; background: #fff !important; color: #000 !important; border-top: 2px solid #000; }
  a { text-decoration: underline; }
}