*,
    *::before,
    *::after {

      box-sizing: border-box;
      margin: 0;
      padding: 0;

    }

    :root {

      --cream:
        #ffffff;

      --ink:
        #0D0D0D;

      --ink-mid:
        #444440;

      --ink-faint:
        #999993;

      --rust:
        #8B4513;

      --rule:
        rgba(0,0,0,0.08);

      --card-bg:
        #FFFFFF;

      --radius:
        14px;

      --serif:
        "Sora",
        sans-serif;

      --sans:
        "Sora",
        system-ui,
        sans-serif;

      --col:
        1200px;

    }

    body {

      font-family:
        var(--sans);

      background:
        var(--cream);

      color:
        var(--ink);

      -webkit-font-smoothing:
        antialiased;

    }

    /* ─────────────────────────────
       NAV
    ───────────────────────────── */

    #menuToggle {
      display: none;
    }

    @media (max-width: 768px) {

      #menuToggle {
        display: block;
      }

      .nav-menu {

        display: none;

        flex-direction: column;

        position: absolute;

        top: 70px;
        left: 0;

        width: 100%;

        background: #000000;

        padding: 20px;

        z-index: 999;

      }

      .nav-menu.active {
        display: flex;
      }

    }

    /* ─────────────────────────────
       PROGRESS BAR
    ───────────────────────────── */

    #progress-bar {

      position: fixed;

      top: 0;
      left: 0;

      width: 0%;

      height: 2px;

      background:
        var(--rust);

      z-index: 9999;

    }

    /* ─────────────────────────────
       BACK LINK
    ───────────────────────────── */

    .back-wrap {

      max-width:
        var(--col);

      margin: 0 auto;

      padding:
        36px 24px 0;

    }

    .back-link {

      display: inline-flex;

      align-items: center;

      gap: 7px;

      text-decoration: none;

      font-size: 12px;

      letter-spacing: .12em;

      text-transform: uppercase;

      color:
        var(--ink-faint);

      transition:
        color .2s;

    }

    .back-link:hover {

      color:
        var(--rust);

    }

    /* ─────────────────────────────
       ARTICLE HEADER
    ───────────────────────────── */

    .article-header {

      max-width:
        var(--col);

      margin: 0 auto;

      padding:
        40px 24px 36px;

      border-bottom:
        1px solid var(--rule);

    }

    .article-eyebrow {

      display: flex;

      align-items: center;

      gap: 12px;

      margin-bottom: 24px;

    }

    .cat-pill {

      border:
        1px solid var(--rule);

      background:
        #fff;

      padding:
        4px 12px;

      border-radius:
        999px;

      font-size:
        10px;

      letter-spacing:
        .16em;

      text-transform:
        uppercase;

      color:
        var(--ink-mid);

    }

    .article-date {

      font-size:
        12px;

      color:
        var(--ink-faint);

    }

    .article-title {

      font-family:
        var(--serif);

      font-size:
        clamp(38px, 5vw, 62px);

      font-weight:
        400;

      line-height:
        1.06;

      letter-spacing:
        -.02em;

      margin-bottom:
        26px;

      color:
        var(--ink);

    }

    .article-summary-lead {

      font-family:
        var(--serif);

      font-style:
        italic;

      font-size:
        clamp(19px, 2vw, 24px);

      line-height:
        1.7;

      color:
        var(--ink-mid);

      padding-left:
        22px;

      border-left:
        3px solid var(--rust);

      margin-bottom:
        34px;

    }

    .article-byline {

      display: flex;

      align-items: center;

      gap: 12px;

    }

    .avatar {

      width: 38px;
      height: 38px;

      border-radius: 50%;

      background:
        #DDD8CF;

      display: flex;

      align-items: center;
      justify-content: center;

      font-size: 11px;

      font-weight: 600;

      color:
        #5a4a38;

    }

    .byline-name {

      display: block;

      font-size: 14px;

      font-weight: 600;

      color:
        var(--ink);

    }

    .byline-meta {

      font-size: 12px;

      color:
        var(--ink-faint);

    }

    /* ─────────────────────────────
       META STRIP
    ───────────────────────────── */

    .article-meta-strip {

      display: flex;

      flex-wrap: wrap;

      gap: 12px;

      margin-top: 30px;

    }

    .meta-chip {

      border:
        1px solid var(--rule);

      padding:
        8px 14px;

      border-radius:
        999px;

      background:
        #fff;

      font-size:
        11px;

      letter-spacing:
        .08em;

      text-transform:
        uppercase;

      color:
        var(--ink-mid);

    }

    /* ─────────────────────────────
       HERO IMAGE
    ───────────────────────────── */

    .article-image-wrap {

      max-width:
        1200px;
      margin: 0 auto;
      padding:
        50px 24px;

    }

    .article-image-wrap img {

      width: 100% !important;
      border: 2px solid #e08442;
      border-radius:
        var(--radius);

      display: block;

    }

    .article-image-placeholder {

      width: 100%;

      height: 420px;

      border-radius:
        var(--radius);

      display: flex;

      align-items: center;
      justify-content: center;

      font-size: 70px;

    }

    /* ─────────────────────────────
       ARTICLE BODY
    ───────────────────────────── */

    .article-body {

      max-width:
        var(--col);

      margin: 0 auto;

      padding:
        0 24px 80px;

    }

    .article-body .prose {

      font-family:
        var(--serif);

      font-size:
        clamp(19px, 2vw, 22px);

      line-height:
        1.9;

      color:
        var(--ink-mid);

    }

    .article-body .prose p {

      margin-bottom:
        1.7em;

    }

    .article-body .prose h2 {

      font-family:
        var(--serif);

      font-size:
        1.8em;

      font-weight:
        500;

      line-height:
        1.2;

      margin:
        2em 0 .7em;

      color:
        var(--ink);

    }

    .article-body .prose h3 {

      font-size:
        1.4em;

      margin:
        1.7em 0 .6em;

      color:
        var(--ink);

    }

    .article-body .prose blockquote {

      border-left:
        3px solid var(--rust);

      padding-left:
        22px;

      margin:
        2em 0;

      color:
        var(--ink);

      font-style:
        italic;

    }

    .article-body .prose strong {

      color:
        var(--ink);

      font-weight:
        600;

    }

    .article-body .prose ul,
    .article-body .prose ol {

      padding-left:
        1.4em;

      margin-bottom:
        1.5em;

    }

    .article-body .prose li {

      margin-bottom:
        .5em;

    }

    .article-body .prose img {

      width: 100%;

      border-radius:
        10px;

      margin:
        2em 0;

    }

    .article-body .prose a {

      color:
        var(--rust);

      text-decoration:
        underline;

      text-underline-offset:
        3px;

    }

    /* ─────────────────────────────
       RELATED
    ───────────────────────────── */

    .related-section {

      border-top:
        1px solid var(--rule);

      background:
        #fff;

      padding:
        70px 24px 90px;

    }

    .related-inner {

      max-width:
        1050px;

      margin: 0 auto;

    }

    .related-header {

      display: flex;

      align-items: baseline;

      gap: 14px;

      margin-bottom: 34px;

    }

    .related-header h2 {

      font-family:
        var(--serif);

      font-size:
        34px;

      font-weight:
        400;

      color:
        var(--ink);

    }

    .related-header span {

      font-size:
        10px;

      letter-spacing:
        .2em;

      text-transform:
        uppercase;

      color:
        var(--ink-faint);

    }

    .related-grid {

      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));

      gap: 1px;

      border:
        1px solid var(--rule);

      background:
        var(--rule);

      border-radius:
        var(--radius);

      overflow: hidden;

    }

    .related-card {

      background:
        #fff;

      cursor: pointer;

      transition:
        background .2s;

    }

    .related-card:hover {

      background:
        #FDFAF6;

    }

    .related-card-img {

      width: 100%;

      height: 160px;

      object-fit: cover;

      display: block;

    }

    .related-card-placeholder {

      width: 100%;

      height: 160px;

      display: flex;

      align-items: center;
      justify-content: center;

      font-size: 44px;

    }

    .related-body {

      padding:
        20px;

    }

    .related-title {

      font-family:
        var(--serif);

      font-size:
        20px;

      line-height:
        1.35;

      margin-bottom:
        12px;

      color:
        var(--ink);

    }

    .related-meta {

      font-size:
        12px;

      color:
        var(--ink-faint);

    }

    .related-read {

      display: inline-flex;

      align-items: center;

      gap: 5px;

      margin-top: 16px;

      font-size:
        13px;

      color:
        var(--rust);

      font-weight:
        500;

    }

    /* ─────────────────────────────
       EMPTY
    ───────────────────────────── */

    .feed-msg {

      padding:
        4rem 2rem;

      text-align:
        center;

      color:
        var(--ink-faint);

      font-style:
        italic;

    }

    /* ─────────────────────────────
       MOBILE
    ───────────────────────────── */

    @media (max-width: 600px) {

      .article-title {

        font-size:
          42px;

      }

      .article-summary-lead {

        font-size:
          18px;

      }

      .article-image-placeholder {

        height:
          240px;

        font-size:
          48px;

      }

      .related-grid {

        grid-template-columns:
          1fr;

      }

    }