
:root {
  --ground: #1a1814;

  --ground-deep: #141210;
  --panel: #24211b;
  --panel-raised: #2c2821;
  --panel-hover: #322d25;
  --sand: #eadfc8;
  --sand-soft: #d9cdb4;
  --dust: #a99f8a;
  --dust-dim: #a0967f;
  --ochre: #c8a15f;
  --olive: #7d7b52;
  --olive-bright: #a3a06c;
  --clay: #d08466;
  --burnt: #e07a3c;
  --burnt-hover: #ea8c50;
  --burnt-press: #c9682e;
  --on-burnt: #1a1814;

  --hairline: rgba(234, 223, 200, .14);
  --hairline-strong: rgba(234, 223, 200, .26);
  --hairline-faint: rgba(234, 223, 200, .07);
  --ochre-line: rgba(200, 161, 95, .55);
  --ochre-wash: rgba(200, 161, 95, .08);
  --burnt-wash: rgba(224, 122, 60, .12);
  --clay-wash: rgba(181, 104, 76, .14);
  --olive-wash: rgba(125, 123, 82, .2);
  --scrim: rgba(12, 11, 9, .72);

  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
  --shadow-near: 0 10px 24px -14px rgba(0, 0, 0, .7);
  --shadow-inset: inset 0 1px 0 rgba(234, 223, 200, .05);

  --kife-9dc: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --kife-654: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --kife-745: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-base: 1.0625rem;
  --step--2: .72rem;
  --step--1: .85rem;
  --kife-b47: 1.0625rem;
  --kife-46f: clamp(1.18rem, .9vw + .95rem, 1.33rem);
  --kife-6df: clamp(1.38rem, 1.4vw + 1rem, 1.66rem);
  --kife-0cb: clamp(1.62rem, 2.2vw + 1rem, 2.08rem);
  --kife-879: clamp(1.9rem, 3.2vw + 1rem, 2.6rem);
  --kife-5dd: clamp(2.1rem, 4.4vw + .9rem, 3.24rem);
  --kife-0c6: clamp(2.1rem, 6vw + .5rem, 5.4rem);
  --step-display: clamp(2.4rem, 9vw + .2rem, 8.2rem);

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-body: 1.6;
  --tracking-display: -.01em;
  --tracking-tight: -.02em;
  --tracking-mono: .08em;
  --measure: 64ch;
  --measure-wide: 78ch;

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.375rem;
  --space-2xl: 5.0625rem;
  --space-3xl: 7.59rem;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 10vw, 144px);
  --content-max: 1240px;
  --sidebar-w: clamp(240px, 21vw, 300px);
  --topbar-h: 56px;

  --radius: 2px;
  --radius-input: 4px;
  --frame-color: var(--ochre);
  --frame-len: 14px;
  --frame-w: 1px;
  --frame-offset: -8px;

  --dur-instant: 90ms;
  --dur-fast: 140ms;

  --dur-base: 180ms;
  --dur-slow: 320ms;
  --dur-slower: 560ms;
  --dur-scene: 900ms;
  --dur-pulse: 2.4s;
  --dur-marquee: 52s;
  --dur-marquee-slow: 70s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-edge: cubic-bezier(.16, .84, .3, 1);
  --ease-press: cubic-bezier(.3, 0, .2, 1);

  --z-base: 1;
  --z-frame: 3;
  --z-topbar: 40;
  --z-scrim: 45;
  --z-sidebar: 50;
  --z-consent: 60;
  --z-chat: 70;
  --z-skip: 100;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--ground);
  color: var(--sand);
  font-family: var(--kife-654);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: 'kern', 'liga', 'calt';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul[role='list'], ol[role='list'] {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
  font-style: italic;
  color: var(--dust);
}

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: 1px;
  text-underline-offset: .22em;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-xl) 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--burnt);
  color: var(--on-burnt);
}

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

:focus:not(:focus-visible) {
  outline: none;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  stroke-width: 1.6;
  vertical-align: -.16em;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--kife-9dc);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--sand);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

h1, .h1 {
  font-size: var(--kife-0c6);
  line-height: var(--leading-tight);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 144;
}

h2, .h2 {
  font-size: var(--kife-5dd);
  line-height: 1.08;
  font-variation-settings: 'opsz' 120;
}

h3, .h3 {
  font-size: var(--kife-0cb);

  line-height: var(--leading-snug);
  font-variation-settings: 'opsz' 72;
}

h4, .h4 {
  font-size: var(--kife-46f);
  line-height: 1.3;
  font-weight: 600;
  font-variation-settings: 'opsz' 24;
}

h1 em, h2 em, h3 em, .h1 em, .h2 em, .display em {
  font-style: italic;
  font-weight: 400;
  color: var(--ochre);
}

.display {
  font-family: var(--kife-9dc);
  font-size: var(--step-display);
  line-height: .96;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

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

strong, b {
  font-weight: 600;
}

.mono, code, kbd, samp {
  font-family: var(--kife-745);
  font-feature-settings: 'zero', 'ss01';
}

.mono-meta, .eyebrow, .meta {
  font-family: var(--kife-745);
  font-size: var(--step--2);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--dust);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  color: var(--ochre);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.lede {
  font-size: var(--kife-46f);
  line-height: 1.5;
  color: var(--sand-soft);
  max-width: 56ch;
}

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

.accent {
  color: var(--burnt);
}

.num {
  font-family: var(--kife-745);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.prose {
  max-width: var(--measure);
  color: var(--sand-soft);
  hanging-punctuation: first last;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  font-size: var(--kife-879);
  margin-top: 2.2em;
  color: var(--sand);
}

.prose h3 {
  font-size: var(--kife-6df);
  margin-top: 1.9em;
  color: var(--sand);
}

.prose h4 {
  margin-top: 1.6em;
}

.prose h2 + *, .prose h3 + *, .prose h4 + * {
  margin-top: .7em;
}

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

.prose li + li {
  margin-top: .45em;
}

.prose ul li::marker {
  color: var(--ochre);
}

.prose ol li::marker {
  font-family: var(--kife-745);
  font-size: .85em;
  color: var(--ochre);
}

.prose a {
  color: var(--sand);
  text-decoration-color: var(--burnt);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

.prose a:hover {
  color: var(--burnt);
}

.prose a:active {
  color: var(--burnt-press);
}

.prose strong {
  color: var(--sand);
}

.prose blockquote {
  border-left: 2px solid var(--clay);
  padding: .2em 0 .2em 1.2em;
  font-family: var(--kife-9dc);
  font-size: var(--kife-6df);
  line-height: 1.35;
  color: var(--sand);
}

.prose code {
  font-size: .86em;
  padding: .1em .35em;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.prose table {
  font-size: var(--step--1);
}

.prose th, .prose td {
  text-align: left;
  padding: .7em .9em;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.prose th {
  font-family: var(--kife-745);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--dust);
  font-weight: 500;
}

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

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

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--section-y) * .55);
}

.section--panel {
  background: var(--panel);
}

.section + .section--rule {
  border-top: 1px solid var(--hairline);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-m));
}

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

.stack--s { --stack-gap: var(--space-s); }
.stack--l { --stack-gap: var(--space-l); }
.stack--xl { --stack-gap: var(--space-xl); }

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

.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, 280px)), 1fr));
}

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

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

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

@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  }
  .split--wide-right {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  }
  .split--center {
    align-items: center;
  }
}

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

.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;
}

.media {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-radius: var(--radius);
}

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

.media--wide { aspect-ratio: 3 / 2; }
.media--square { aspect-ratio: 1 / 1; }
.media--tall { aspect-ratio: 4 / 5; }

.media--vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(26, 24, 20, .5) 100%);
}

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

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 160, 108, .55); opacity: 1; }
  60% { box-shadow: 0 0 0 6px rgba(163, 160, 108, 0); opacity: .75; }
}

@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-run-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --dur-scene: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track,
  .status__dot {
    animation: none !important;
    transform: none !important;
  }
}
