:root{
      --bg:#f7f7f4;
      --panel:#ffffff;
      --text:#161616;
      --muted:#66645f;
      --line:#deddd7;
      --soft:#efeee9;
      --accent:#1f3f39;
      --max:1180px;
      --radius:18px;
      --shadow:0 12px 40px rgba(0,0,0,.05);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }

    a{color:inherit;text-decoration:none}
    a:hover{opacity:.78}
    .wrap{width:min(calc(100% - 40px),var(--max));margin:0 auto}
    .site-header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(247,247,244,.92);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(222,221,215,.8);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:24px}
    .brand{font-weight:700;letter-spacing:-.02em;font-size:1.02rem}
    .nav-links{display:flex;gap:22px;flex-wrap:wrap;font-size:.94rem;color:var(--muted)}

    .hero{
      padding:92px 0 74px;
      display:grid;
      grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
      gap:70px;
      align-items:end;
    }
    .eyebrow{
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:.74rem;
      font-weight:700;
      color:var(--accent);
      margin-bottom:18px;
    }
    h1{
      margin:0;
      font-size:clamp(3.4rem,7vw,6.9rem);
      line-height:.93;
      letter-spacing:-.058em;
      font-weight:760;
      max-width:930px;
    }
    .hero-copy{font-size:1.22rem;color:var(--muted);max-width:800px;margin:30px 0 0}
    .hero-side{
      padding:28px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.55);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-side strong{display:block;margin-bottom:10px}
    .hero-side p{margin:0;color:var(--muted)}
    .hero-side .question{font-size:1.2rem;line-height:1.35;letter-spacing:-.02em;color:var(--text);margin-top:18px}

    .section{padding:74px 0;border-top:1px solid var(--line)}
    .section-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:60px}
    .section h2{margin:0;font-size:1.05rem;letter-spacing:-.02em}
    .section-intro{font-size:1.72rem;line-height:1.28;letter-spacing:-.03em;max-width:940px;margin:0 0 34px}
    .body-copy{max-width:900px;color:var(--muted);font-size:1.08rem}
    .body-copy p:first-child{margin-top:0}

    .principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
    .principle{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.6)}
    .principle span{display:block;color:var(--accent);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
    .principle strong{display:block;font-size:1.08rem;margin-bottom:6px}
    .principle p{margin:0;color:var(--muted);font-size:.95rem}

    .series-card{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .series-head{padding:34px 34px 28px;background:var(--soft);border-bottom:1px solid var(--line)}
    .series-head h3{font-size:clamp(2rem,4vw,3.2rem);line-height:1.03;letter-spacing:-.045em;margin:4px 0 14px}
    .series-head p{margin:0;color:var(--muted);font-size:1.08rem;max-width:830px}
    .series-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .pill{display:inline-flex;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.82rem;color:var(--muted)}

    .article-list{padding:0 34px}
    .article-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
    .article-row:last-child{border-bottom:0}
    .article-number{font-weight:700;color:var(--accent);font-size:.9rem}
    .article-title{font-size:1.08rem;font-weight:700;letter-spacing:-.015em}
    .article-desc{display:block;color:var(--muted);font-size:.91rem;margin-top:3px;font-weight:400}
    .status{white-space:nowrap;font-size:.84rem;color:var(--muted)}

    .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .category-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
    .category-card .label{display:block;color:var(--accent);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
    .category-card h3{margin:0 0 8px;font-size:1.18rem;letter-spacing:-.02em}
    .category-card p{margin:0;color:var(--muted)}
    .category-card.future{box-shadow:none;background:rgba(255,255,255,.48)}

    .quote{
      padding:30px 32px;
      border-left:4px solid var(--accent);
      background:var(--soft);
      border-radius:0 var(--radius) var(--radius) 0;
      font-size:1.28rem;
      line-height:1.45;
      letter-spacing:-.025em;
      margin-top:34px;
    }

    .footer-cta{padding:84px 0 96px;border-top:1px solid var(--line)}
    .footer-cta-box{background:#111;color:#fff;border-radius:28px;padding:40px}
    .footer-cta-box h2{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;letter-spacing:-.05em;margin:0 0 18px;max-width:850px}
    .footer-cta-box p{color:#c9c9c9;max-width:760px;font-size:1.08rem;margin:0}
    footer{padding:26px 0 38px;color:var(--muted);font-size:.9rem}

    @media (max-width:900px){
      .hero,.section-grid{grid-template-columns:1fr}
      .hero{gap:32px;padding-top:60px}
      .section-grid{gap:28px}
      .principles{grid-template-columns:1fr}
      .category-grid{grid-template-columns:1fr}
    }

    @media (max-width:620px){
      .wrap{width:min(calc(100% - 24px),var(--max))}
      .nav{align-items:flex-start;flex-direction:column}
      .nav-links{gap:14px}
      .hero{padding:44px 0 58px}
      .series-head,.article-list{padding-left:24px;padding-right:24px}
      .article-row{grid-template-columns:40px 1fr}
      .status{grid-column:2}
      .footer-cta-box{padding:28px}
    }

/* Series essay pages use the same site palette, header, width, and responsive navigation. */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.article-layout{padding-top:30px;padding-bottom:92px}
.breadcrumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-bottom:70px}
.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}
.essay{max-width:800px;margin:0 auto}
.article-header{padding-bottom:32px;border-bottom:1px solid var(--line)}
.article-header h1{font-size:clamp(2.5rem,5.6vw,5rem);line-height:1.02;max-width:none;margin:0 0 22px}
.article-header p{color:var(--muted);font-size:.98rem;margin:0}
.article-header p a{text-decoration:underline;text-underline-offset:3px}
.article-header .pubdate{margin-top:6px;font-size:.88rem;color:var(--muted)}
.article-body{font-size:1.075rem;line-height:1.77;overflow-wrap:break-word}
.article-body p{margin:1.35em 0}
.article-body h2{font-size:clamp(1.65rem,3vw,2.2rem);line-height:1.18;letter-spacing:-.035em;margin:2.4em 0 .8em}
.article-body h3{font-size:1.36rem;line-height:1.3;letter-spacing:-.02em;margin:2em 0 .7em}
.article-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.article-body ul,.article-body ol{padding-left:1.45em;margin:1.2em 0}
.article-body li{padding-left:.25em;margin:.35em 0}
.article-body blockquote{margin:1.6em 0;padding:.2em 1.4em;border-left:4px solid var(--accent);background:var(--soft);border-radius:0 var(--radius) var(--radius) 0}
.article-body blockquote p{margin:.8em 0}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
.article-body pre{overflow-x:auto;padding:20px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);font-size:.82rem;line-height:1.4}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.article-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-top:32px;margin-top:46px;border-top:1px solid var(--line)}
.sequence-link{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.sequence-link span{display:block;color:var(--accent);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.sequence-link strong{display:block;font-size:1.03rem;line-height:1.3}
.series-backlink{margin:26px 0 0;color:var(--accent);font-weight:650}
.series-backlink a{text-decoration:underline;text-underline-offset:3px}

.discuss-box{margin-top:46px;padding:28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.discuss-box strong{display:block;font-size:1.12rem;margin-bottom:8px}
.discuss-box p{margin:0;color:var(--muted)}
.discuss-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.discuss-actions a{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:999px;font-weight:650;font-size:.92rem;border:1px solid var(--text);transition:.15s ease}
.discuss-actions a.primary{background:var(--text);color:#fff}
.discuss-actions a.secondary{background:transparent;color:var(--text)}

@media (max-width:620px){
  .article-layout{padding-top:22px;padding-bottom:65px}
  .breadcrumbs{margin-bottom:44px}
  .article-body{font-size:1rem}
  .article-sequence{grid-template-columns:1fr}
  .discuss-box{padding:22px}
}