*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --paper:    #F6F3EC;
      --paper-2:  #EDE8DC;
      --paper-3:  #E5DFD0;
      --ink:      #0E1014;
      --ink-2:    #1B1E23;
      --meta:     #504E4A;
      --meta-2:   #7A7570;
      --rule:     #CEC6B5;
      --oxblood:  #6B1F28;
      --oxblood-2:#8A2A34;
      --serif:    'Playfair Display', Georgia, serif;
      --sans:     'Inter Tight', system-ui, sans-serif;
      --mono:     'JetBrains Mono', monospace;
      --ease:     cubic-bezier(0.16, 1, 0.3, 1);
      --max:      820px;
    }

    html { scroll-behavior: smooth; scrollbar-color: var(--rule) var(--paper); scrollbar-width: thin; }
    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    ::selection { background: var(--oxblood); color: var(--paper); }
    :focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 1px; }

    /* Progress */
    #progress {
      position: fixed; top: 0; left: 0;
      height: 2px; width: 0%;
      background: var(--oxblood);
      z-index: 1000;
      transition: width 0.05s linear;
    }

    .w { max-width: 1400px; margin: 0 auto; padding: 0 52px; }
    .col { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    /* Nav */
    nav {
      position: sticky;
      top: 0; z-index: 100;
      background: var(--paper);
      border-bottom: 1px solid var(--ink);
      transition: box-shadow 0.25s;
    }
    nav.scrolled { box-shadow: 0 2px 16px rgba(14,16,20,0.07); }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
    }
    .nav-logo { display: flex; flex-direction: column; line-height: 1; }
    .nav-logo-n {
      font-family: var(--serif);
      font-size: 15px; font-weight: 700;
      letter-spacing: 0.05em;
    }
    .nav-logo-s {
      font-family: var(--mono);
      font-size: 8px; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--meta); margin-top: 2px;
    }
    .nav-back {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--meta); transition: color 0.15s;
    }
    .nav-back:hover { color: var(--oxblood); }
    .nav-r { display: flex; align-items: center; gap: 14px; }
    .nav-jsm {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--meta); border: 1px solid var(--rule);
      padding: 6px 12px; border-radius: 2px;
      transition: border-color 0.15s, color 0.15s;
    }
    .nav-jsm:hover { border-color: var(--ink); color: var(--ink); }

    /* Article header */
    .art-head {
      padding: 56px 0 40px;
      border-bottom: 1px solid var(--rule);
    }
    .art-eyebrow {
      display: flex; align-items: center; gap: 14px;
      justify-content: center;
      margin-bottom: 24px;
    }
    .art-beat {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase;
      background: var(--oxblood); color: var(--paper);
      padding: 4px 12px; border-radius: 1px;
    }
    .art-issue {
      font-family: var(--mono); font-size: 9px;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta);
    }
    .art-title {
      font-family: var(--serif);
      font-size: clamp(34px, 5vw, 60px);
      font-weight: 700; line-height: 1.05;
      letter-spacing: -0.02em;
      text-align: center;
      margin-bottom: 22px;
    }
    .art-title em { font-style: italic; color: var(--oxblood); }
    .art-deck {
      font-family: var(--serif);
      font-size: clamp(17px, 1.7vw, 21px);
      font-style: italic;
      color: var(--meta);
      line-height: 1.5;
      max-width: 64ch;
      margin: 0 auto 28px;
      text-align: center;
    }
    .art-byline {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; flex-wrap: wrap;
    }
    .art-byline span {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta-2);
    }
    .byline-sep { color: var(--rule) !important; }

    /* Body */
    .art-body {
      padding: 56px 0 64px;
    }
    .art-section {
      margin-bottom: 28px;
    }
    .art-section + .art-section {
      padding-top: 28px;
      border-top: 1px solid var(--rule);
    }
    .art-h {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--oxblood);
      margin-bottom: 22px;
      padding-bottom: 8px;
      border-bottom: 2px solid var(--ink);
      display: inline-block;
    }
    .art-section p {
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.62;
      color: var(--ink);
      margin-bottom: 22px;
    }
    .art-section p:last-child { margin-bottom: 0; }
    .art-section.art-lead p:first-child::first-letter {
      font-family: var(--serif);
      font-size: 64px;
      font-weight: 700;
      float: left;
      line-height: 0.9;
      padding: 6px 10px 0 0;
      color: var(--oxblood);
    }

    /* Colophon */
    .colophon {
      border-top: 3px solid var(--ink);
      padding: 40px 0;
      text-align: center;
    }
    .colophon p {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--meta);
      line-height: 1.8;
    }
    .colophon p + p { margin-top: 6px; }

    /* CTA */
    .post-cta {
      background: var(--paper-3);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      padding: 56px 0;
      text-align: center;
    }
    .post-cta-h {
      font-family: var(--serif);
      font-size: clamp(22px, 2.6vw, 30px);
      font-weight: 700;
      line-height: 1.2;
      max-width: 32ch;
      margin: 0 auto 18px;
    }
    .post-cta-h em { font-style: italic; color: var(--oxblood); }
    .post-cta-p {
      font-size: 14px;
      color: var(--meta);
      max-width: 56ch;
      margin: 0 auto 22px;
    }
    .post-cta-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--ink); color: var(--paper);
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      padding: 14px 22px; border-radius: 2px;
      border: 1px solid var(--ink);
      transition: background 0.15s, border-color 0.15s;
    }
    .post-cta-btn:hover { background: var(--oxblood); border-color: var(--oxblood); }
    .post-cta-btn .arr { transition: transform 0.15s; }
    .post-cta-btn:hover .arr { transform: translateX(3px); }

    /* Footer */
    footer {
      background: var(--ink);
      color: var(--paper);
      padding: 40px 0;
    }
    .ft-row {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px;
    }
    .ft-name {
      font-family: var(--serif); font-size: 15px;
      font-weight: 700; letter-spacing: 0.06em;
    }
    .ft-links {
      display: flex; gap: 22px; flex-wrap: wrap;
    }
    .ft-links a {
      font-family: var(--mono); font-size: 9.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(248,248,246,0.5);
      transition: color 0.15s;
    }
    .ft-links a:hover { color: var(--paper); }
    .ft-fine {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(248,248,246,0.1);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.05em;
      color: rgba(248,248,246,0.28);
    }

    @media (max-width: 720px) {
      .w { padding: 0 20px; }
      .col { padding: 0 20px; }
      .art-section p { font-size: 17.5px; }
    }