:root {
  /* Neutrals - warm off-white paper, near-black ink. Never pure #fff / #000. */
  --background-primary: #FAFAF8;   /* default page surface */
  --background-soft: #F4F4F2;
  --background-secondary: #EBEBE2; /* alternating sections, cards on light */
  --background-tertiary: #C7BDB2;  /* dividers, muted UI */
  --background-quaternary: #A9A197;
  --foreground-primary: #06141B;   /* primary ink + the dark surface color */
  --foreground-secondary: #050F15; /* darkest surface (pre-footer) */
  --foreground-tertiary: #0A1D2B;
  --divider: rgb(6 20 27 / 0.06);
  --logo-tint: #8A8276;

  /* Brand - the single cyan signature. Links, focus, numerals, the Tusi figure.
     Never a large fill of body text. */
  --brand: #65D9EE;
  --brand-contrast: #07404F;       /* ink for text/graphics ON a brand fill */
  --brand-light: #C3D0D8;          /* body text on the dark footer */

  /* Accents - sparingly: numerals, single cards, illustrations, highlights.
     Cycle teal, brown, orange, yellow. Each has a *-contrast pair for text
     sitting on that fill. Never body copy, never large background fills,
     and NEVER the eyebrow color - eyebrows are ink. */
  --accent-teal: #0A99C3;          --accent-teal-contrast: #B2F3FF;
  --accent-brown: #AD5913;         --accent-brown-contrast: #F4C29D;
  --accent-orange: #FF7C0F;        --accent-orange-contrast: #6D1D00;
  --accent-yellow: #FEDE59;        --accent-yellow-contrast: #7C6503;
  --accent-ocean: #0D4E6E;         --accent-ocean-contrast: #BEE6F5;

  /* Type families - real files wired below, graceful fallbacks after. */
  --font-serif: "TribeSerif", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "TribeSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-caption: "TribeCaption", var(--font-sans);

  /* Corner radius scale */
  --rounded-sm: 0.25rem;   /* inline images inside cards */
  --rounded-md: 0.375rem;  /* chips, buttons, menu items */
  --rounded-lg: 0.5rem;    /* cards (default) */
  --rounded-xl: 0.75rem;   /* large feature panels / media */
  --rounded-2xl: 1rem;     /* hero media */
  --rounded-full: 9999px;  /* pills, dots */

  /* Motion - the house easing. Purposeful, eased, never bouncy. ~0.3-0.65s. */
  --ease-tribe: cubic-bezier(0.625, 0.05, 0, 1);

  /* Soft, tinted elevation keyed to the ink color - never generic gray shadow. */
  --shadow-card: 0 30px 80px -30px rgba(6, 20, 27, 0.35);
  --shadow-menu: 0 10px 30px -10px rgba(6, 20, 27, 0.35);
}

/* Real brand fonts. Serif has NO bold - never fake one. */
@font-face { font-family: "TribeSerif";   src: url("/fonts/TribeSerif-Light.otf") format("opentype"); font-weight: 300; }
@font-face { font-family: "TribeSerif";   src: url("/fonts/TribeSerif-Book.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-Light.woff2") format("woff2"); font-weight: 300; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-Regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-Medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "TribeSans";    src: url("/fonts/TribeSans-DemiBold.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "TribeCaption"; src: url("/fonts/TribeCaption-Regular.woff2") format("woff2"); font-weight: 400; }

/* Canonical type roles - apply these classes to match the website exactly. */
.tribe-eyebrow {
  font-family: var(--font-caption);
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 1.6px; line-height: 1.2;
  text-transform: uppercase;
  color: var(--foreground-primary); /* eyebrows are INK - never accent-orange */
}
.tribe-eyebrow--quiet { color: rgb(6 20 27 / 0.5); } /* secondary/meta captions */
.tribe-display {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1;
  text-wrap: balance;
}
.tribe-h2 {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 3rem; line-height: 1.1; text-wrap: balance;
}
.tribe-h3 {
  font-family: var(--font-serif); font-weight: 300;
  font-size: 1.5rem; line-height: 1.2;
}
.tribe-body {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 1rem; line-height: 1.625;
  color: rgb(6 20 27 / 0.7); /* body sits at /70 on a light surface */
}
.tribe-body-lead { font-size: 1.125rem; }
.tribe-meta {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 0.75rem; line-height: 1.4;
  color: rgb(6 20 27 / 0.55);
}
.tribe-button-label {
  font-family: var(--font-caption);
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 1.2px; text-transform: uppercase;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--background-primary); color: var(--foreground-primary); }
body { margin: 0; font-family: var(--font-sans); font-weight: 300; line-height: 1.625; }
a { color: var(--brand-contrast); text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.page { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0 2.5rem; border-bottom: 1px solid var(--divider); margin-bottom: 2.5rem; }
.site-header img { height: 18px; display: block; }
.site-footer { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); }
.prose { font-size: 1.0625rem; line-height: 1.75; color: rgb(6 20 27 / 0.78); }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-serif); font-weight: 300; color: var(--foreground-primary); line-height: 1.15; text-wrap: balance; margin: 2.5rem 0 1rem; }
.prose h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-top: 0; }
.prose h2 { font-size: 1.875rem; }
.prose h3 { font-size: 1.375rem; }
.prose p, .prose li { text-wrap: pretty; }
/* strong defaults to 700, which has no face here, so the browser would
   synthesize one. 500 is the real TribeSans Medium. */
.prose strong { font-weight: 500; }
/* Cyan is reserved for links, focus rings and step numerals, so the quote
   rule is a hairline of the ink color. */
.prose blockquote { margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 2px solid rgb(6 20 27 / 0.2); color: rgb(6 20 27 / 0.7); }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--background-soft); padding: 0.1em 0.35em; border-radius: var(--rounded-sm); }
.prose pre { background: var(--background-secondary); padding: 1rem 1.25rem; border-radius: var(--rounded-lg); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--divider); margin: 2.5rem 0; }
.steps { list-style: none; padding: 0; margin: 2rem 0; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--divider); }
.steps li:last-child { border-bottom: 1px solid var(--divider); }
.steps .num { font-family: var(--font-serif); font-weight: 300; font-size: 1.5rem; color: var(--brand-contrast); }
.steps .title { font-family: var(--font-serif); font-weight: 300; font-size: 1.25rem; }
.steps .meta { font-family: var(--font-sans); font-size: 0.8125rem; color: rgb(6 20 27 / 0.55); }
.button { display: inline-block; font-family: var(--font-caption); font-size: 0.75rem; letter-spacing: 1.2px; text-transform: uppercase; background: var(--foreground-primary); color: var(--background-primary); border: 0; border-radius: var(--rounded-full); padding: 0.9rem 1.5rem; cursor: pointer; text-decoration: none; transition: opacity 0.3s var(--ease-tribe); }
.button:hover { opacity: 0.85; }
.button--outline { background: transparent; color: var(--foreground-primary); border: 1px solid rgb(6 20 27 / 0.3); }
.field { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.5rem 0; }
.field label { font-family: var(--font-caption); font-size: 0.75rem; letter-spacing: 1.6px; text-transform: uppercase; }
.field input, .field textarea { font: inherit; padding: 0.85rem 1rem; border: 1px solid rgb(6 20 27 / 0.2); border-radius: var(--rounded-md); background: var(--background-primary); color: var(--foreground-primary); }
.field textarea { min-height: 8rem; }
.check { display: flex; gap: 0.75rem; align-items: baseline; margin: 1rem 0; font-family: var(--font-sans); font-size: 1rem; }
.check input { accent-color: var(--foreground-primary); }
.field .readonly { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9375rem; }
.notice { padding: 1rem 1.25rem; border-radius: var(--rounded-lg); background: var(--background-secondary); margin: 1.5rem 0; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }