@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

    :root {
      --bg: #faf8f3;
      --text: #1f1a14;
      --muted: #6c5a4b;
      --card: #ffffff;
      --line: #eadfce;
      --primary: #ea580c;
      --primary-2: #b45309;
      --accent: #f59e0b;
      --ok: #15803d;
      --warn: #b45309;
      --danger: #b91c1c;
      --shadow-sm: 0 2px 8px rgba(64, 39, 19, 0.08);
      --shadow-md: 0 16px 40px rgba(64, 39, 19, 0.14);
      --radius: 14px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% -20%, #fbe6c8 0%, rgba(251, 230, 200, 0) 40%),
        radial-gradient(circle at 92% 8%, #fdeccf 0%, rgba(253, 236, 207, 0) 38%),
        var(--bg);
      line-height: 1.56;
    }

    .lp-top {
      all: initial;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
      padding: 9px 18px;
      background: #0b0b12;
      position: relative;
      z-index: 999999;
      border-bottom: 2px solid #caa14b;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    .lp-brand {
      all: initial;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #f5f2e8;
      text-decoration: none;
      font: 800 13px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      letter-spacing: 0.6px;
      cursor: pointer;
    }

    .lp-dot {
      all: initial;
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #caa14b;
      box-shadow: 0 0 8px #caa14b;
    }

    .lp-wrap {
      all: initial;
      display: flex;
      align-items: center;
      gap: 12px;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    .lp-meta {
      all: initial;
      color: #8b8b96;
      font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    .lp-link {
      all: initial;
      box-sizing: border-box;
      color: #caa14b;
      text-decoration: none;
      font: 700 11px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      border: 1px solid rgba(202, 161, 75, 0.55);
      padding: 5px 11px;
      border-radius: 20px;
      white-space: nowrap;
      cursor: pointer;
    }

    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(8px);
      background: rgba(250, 248, 243, 0.86);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      width: min(1160px, 92vw);
      margin: 0 auto;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      text-decoration: none;
      color: #4a2b14;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      letter-spacing: -0.01em;
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    .brand-badge {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, #ea580c, #f59e0b);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      box-shadow: var(--shadow-sm);
    }

    .links {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .links a {
      text-decoration: none;
      color: #71563f;
      font-weight: 600;
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 10px;
      transition: 0.2s ease;
    }

    .links a:hover {
      color: var(--primary);
      background: #fff1e7;
    }

    .container {
      width: min(1160px, 92vw);
      margin: 0 auto;
    }

    .hero {
      margin-top: 16px;
      border-radius: 18px;
      overflow: hidden;
      color: #fff;
      box-shadow: var(--shadow-md);
      background:
        linear-gradient(130deg, rgba(30, 14, 6, 0.72), rgba(79, 30, 6, 0.6)),
        url('yellowstone-caldera-aerial.jpg') center/cover;
      padding: clamp(24px, 5vw, 48px);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,0.25);
      background: rgba(255,255,255,0.08);
      border-radius: 999px;
      padding: 7px 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 14px;
    }

    .hero h1 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2rem, 5.4vw, 4rem);
      line-height: 1.1;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
      max-width: 920px;
    }

    .hero h1 span { color: #ffd08d; }

    .hero p {
      max-width: 860px;
      color: rgba(255,245,231,0.92);
      font-size: clamp(0.98rem, 2vw, 1.13rem);
      margin-bottom: 16px;
    }

    .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

    .btn {
      text-decoration: none;
      padding: 10px 15px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: 0.2s ease;
    }

    .btn.primary { background: #ea580c; color: #fff; }
    .btn.primary:hover { background: #c2410c; }
    .btn.ghost {
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    .btn.ghost:hover { background: rgba(255,255,255,0.15); }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      max-width: 760px;
    }

    .hero-stats .item {
      text-align: center;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      background: rgba(255,255,255,0.07);
      padding: 9px;
    }

    .hero-stats .v {
      font-family: 'JetBrains Mono', monospace;
      font-size: 1.16rem;
      font-weight: 700;
      color: #ffe3bd;
    }

    .hero-stats .l {
      margin-top: 3px;
      font-size: 0.78rem;
      color: rgba(255,241,220,0.84);
    }

    .section {
      margin-top: 18px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      padding: clamp(16px, 3vw, 24px);
    }

    .kicker {
      display: inline-block;
      border-radius: 999px;
      background: #fff1e7;
      color: var(--primary);
      padding: 5px 9px;
      font-family: 'JetBrains Mono', monospace;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    h2, h3 {
      font-family: 'Plus Jakarta Sans', sans-serif;
      letter-spacing: -0.02em;
    }

    .section h2 {
      font-size: clamp(1.24rem, 2.7vw, 1.78rem);
      color: #4d2f18;
      margin-bottom: 7px;
    }

    .section .sub {
      color: var(--muted);
      margin-bottom: 11px;
    }

    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }

    .card {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 13px;
    }

    .card h3 {
      font-size: 1rem;
      color: #5c3215;
      margin-bottom: 6px;
    }

    .card p {
      font-size: 0.92rem;
      color: #5d4939;
      margin-bottom: 7px;
    }

    .mini {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #7a5f4b;
      background: #fdf7ef;
      border-radius: 8px;
      padding: 6px 8px;
      margin-bottom: 7px;
    }

    .badge {
      display: inline-block;
      border-radius: 999px;
      padding: 4px 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
    }

    .badge.green { background: #eaf8ef; color: var(--ok); }
    .badge.orange { background: #fff5e8; color: var(--warn); }
    .badge.red { background: #feecec; color: var(--danger); }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid #f0e1cc;
      border-radius: 11px;
      margin-top: 8px;
    }

    table {
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    th, td {
      text-align: left;
      border-bottom: 1px solid #f7ecdf;
      padding: 10px 12px;
      vertical-align: top;
    }

    th {
      background: #fff5e8;
      color: #64351a;
      font-weight: 700;
    }

    .timeline {
      border-left: 2px solid #f1dfc9;
      margin-left: 10px;
      padding-left: 14px;
      display: grid;
      gap: 10px;
    }

    .mile {
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      padding: 11px;
      position: relative;
    }

    .mile::before {
      content: "";
      position: absolute;
      left: -19px;
      top: 14px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ea580c;
      box-shadow: 0 0 0 3px #fff1e7;
    }

    .mile .year {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #ea580c;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .mile h3 {
      font-size: 0.98rem;
      color: #5c3215;
      margin-bottom: 4px;
    }

    .mile p {
      font-size: 0.9rem;
      color: #5f4a3a;
    }

    .refs {
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      max-height: 460px;
      overflow: auto;
    }

    .ref-item {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      border-bottom: 1px solid #f5ecdf;
      align-items: flex-start;
    }

    .ref-id {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      background: #fff1e7;
      color: #ea580c;
      border-radius: 7px;
      padding: 3px 6px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .ref-item a {
      color: #5f4a3a;
      text-decoration: none;
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .ref-item a:hover { color: #ea580c; }

    .footer {
      margin: 20px 0 40px;
      border-top: 1px solid #efdfca;
      padding-top: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      color: #6e5c4d;
      font-size: 13px;
    }

    .footer a {
      color: #ea580c;
      text-decoration: none;
      font-weight: 700;
    }

    @media (max-width: 980px) {
      .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 700px) {
      .links { display: none; }
      .hero-stats, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    }