:root {
    --background: #faf7f2;
    --surface: #ffffff;
    --foreground: #1a1612;
    --muted: #6b6359;
    --border: #ece6dc;
    --accent: #e85d3c;
    --accent-hover: #d54a2a;
    --accent-soft: #fde9e2;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --background: #13110f;
      --surface: #1c1916;
      --foreground: #f5efe6;
      --muted: #a39787;
      --border: #2a2622;
      --accent: #ff7a5e;
      --accent-hover: #ff9079;
      --accent-soft: #2a1d18;
    }
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11";
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }
  .font-display {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  header.site {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--background) 85%, transparent);
    backdrop-filter: blur(8px);
  }
  header.site .inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--foreground);
  }
  .brand .dot {
    display: inline-block;
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 9999px;
    background: var(--accent);
  }
  .brand .name { font-size: 1.5rem; line-height: 1; }
  .back-link {
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration: none;
  }
  .back-link:hover { color: var(--foreground); }

  .hero {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(60% 50% at 20% 0%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%),
      radial-gradient(50% 40% at 90% 10%, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 70%),
      var(--background);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .hero .inner {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 4rem;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .eyebrow .dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background: var(--accent);
  }
  h1 {
    margin-top: 2rem;
    font-size: clamp(2.5rem, 6.5vw, 4rem);
    line-height: 1.05;
  }
  h1 em { color: var(--accent); }
  .lede {
    margin-top: 1.5rem;
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--muted);
  }

  main { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

  section.block { margin-top: 4rem; }
  .kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  section.block h2 {
    margin-top: 0.5rem;
    font-size: 2.25rem;
    line-height: 1.1;
  }
  section.block h2 em { color: var(--accent); }
  section.block > p {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--foreground) 85%, transparent);
  }

  .cards {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .cards { grid-template-columns: 1fr 1fr; }
    .cards.quad { grid-template-columns: repeat(4, 1fr); }
  }
  .card {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  .card .n {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
  }
  .card h3 {
    margin-top: 0.75rem;
    font-size: 1.375rem;
    line-height: 1.2;
  }
  .card p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--muted);
  }

  .subhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .subhead .dot {
    height: 0.375rem;
    width: 0.375rem;
    border-radius: 9999px;
    background: var(--accent);
  }
  section.block ul { margin-top: 1rem; padding-left: 1.25rem; }
  section.block ul li {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--foreground) 85%, transparent);
  }
  section.block ul li::marker { color: var(--accent); }
  section.block strong { color: var(--foreground); font-weight: 500; }
  section.block a { color: var(--accent); }

  .keypoint {
    margin-top: 4rem;
    border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
    background: var(--accent-soft);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
  }
  .keypoint h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 500;
    font-family: inherit;
  }
  .keypoint p {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--foreground);
  }

  .sig-list { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
  .sig {
    display: inline-block;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--foreground) 85%, transparent);
    justify-self: start;
  }

  .endcap {
    margin-top: 4.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
  }
  .endcap .rule {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }
  .endcap h2 { margin-top: 0.75rem; font-size: 2rem; line-height: 1.15; }
  .endcap h2 em { color: var(--accent); }
  .endcap p { margin-top: 0.75rem; font-size: 0.9rem; color: var(--muted); }
  .endcap .actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  .endcap a.button {
    display: inline-block;
    border-radius: 9999px;
    background: var(--foreground);
    color: var(--background);
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }
  .endcap a.button:hover { opacity: 0.9; }
  .endcap a.button.secondary {
    background: var(--surface);
    color: var(--foreground);
    border: 1px solid var(--border);
  }
  .endcap a.button.secondary:hover { border-color: color-mix(in oklab, var(--foreground) 30%, transparent); }

  footer.site {
    border-top: 1px solid var(--border);
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
  }