:root {
      --charcoal: #11110F;
      --ink: #0B0B0A;
      --temple: #191713;
      --temple-2: #242017;
      --gold: #D8A84F;
      --gold-soft: #F0C86D;
      --parchment: #F4E8D0;
      --muted: #B9AA8B;
      --moss: #73845A;
      --line: rgba(216, 168, 79, 0.22);
      --shadow: rgba(0, 0, 0, 0.42);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; background: var(--charcoal); }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--parchment);
      background:
        radial-gradient(circle at 16% 7%, rgba(216, 168, 79, 0.18), transparent 30rem),
        radial-gradient(circle at 84% 12%, rgba(115, 132, 90, 0.12), transparent 26rem),
        linear-gradient(180deg, #0D0D0C 0%, var(--charcoal) 42%, #090908 100%);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.72;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.20;
      mix-blend-mode: soft-light;
      background-image:
        linear-gradient(rgba(244, 232, 208, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 232, 208, 0.025) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }
    .wrap { width: min(1040px, calc(100% - 40px)); margin: 0 auto; position: relative; }
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 18px 0;
      border-bottom: 1px solid rgba(216, 168, 79, 0.10);
      background: rgba(17, 17, 15, 0.78);
      backdrop-filter: blur(18px);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--parchment); text-decoration: none; font-weight: 780; letter-spacing: -0.035em; }
    .brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 12px 30px var(--shadow), 0 0 0 1px rgba(216, 168, 79, 0.24); }
    nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 0.94rem; }
    nav a { color: var(--muted); text-decoration: none; transition: color .18s ease; }
    nav a:hover { color: var(--gold-soft); }
    .pill, .cta {
      border: 1px solid rgba(216,168,79,.34);
      color: var(--gold-soft);
      background: linear-gradient(180deg, rgba(240,200,109,.18), rgba(216,168,79,.10));
      padding: 9px 14px;
      border-radius: 999px;
      font-weight: 760;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .article { max-width: 790px; margin: 0 auto; padding: 64px 0 82px; }
    .back { color: var(--gold-soft); text-decoration: none; font-weight: 720; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 18px; color: var(--gold-soft); font-weight: 760; letter-spacing: .13em; text-transform: uppercase; font-size: .76rem; }
    .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold); box-shadow: 0 0 16px rgba(216,168,79,.55); }
    h1 { margin: 0; font-size: clamp(2.35rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.06em; max-width: 920px; }
    .meta { color: rgba(185,170,139,.92); margin: 18px 0 34px; font-size: .96rem; }
    .article-body { font-size: 1.06rem; }
    .article-body p { color: rgba(244,232,208,.82); margin: 0 0 18px; }
    .article-body h2 { margin: 44px 0 14px; color: var(--parchment); font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.12; letter-spacing: -.035em; }
    .article-body ul { margin: 0 0 22px; padding-left: 22px; color: rgba(244,232,208,.82); }
    .article-body li { margin: 8px 0; }
    .article-body li::marker { color: var(--gold-soft); }
    .callout {
      margin: 34px 0;
      padding: 24px;
      border: 1px solid rgba(216,168,79,.22);
      border-radius: 26px;
      background: linear-gradient(180deg, rgba(36,32,23,.74), rgba(17,17,15,.70));
      box-shadow: 0 24px 64px rgba(0,0,0,.24);
    }
    .callout strong { display: block; color: var(--gold-soft); margin-bottom: 8px; }
    .cta-panel {
      margin-top: 54px;
      padding: 30px;
      border: 1px solid rgba(216,168,79,.24);
      border-radius: 30px;
      background: radial-gradient(circle at 10% 0%, rgba(216,168,79,.16), transparent 26rem), rgba(25,23,19,.78);
      box-shadow: 0 32px 80px rgba(0,0,0,.28);
    }
    .cta-panel h2 { margin-top: 0; }
    .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
    .ghost { color: var(--muted); border-color: rgba(216,168,79,.18); background: transparent; }
    footer { padding: 44px 0; border-top: 1px solid rgba(216,168,79,.10); color: var(--muted); }
    .footer-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-links a { color: var(--muted); text-decoration: none; }
    .footer-links a:hover { color: var(--gold-soft); }
    @media (max-width: 760px) {
      nav { display: none; }
      .article { padding-top: 42px; }
      h1 { font-size: clamp(2.35rem, 15vw, 4.2rem); }
      .cta-actions { flex-direction: column; }
    }