:root {
      --ink: #0E0C0A;
      --ink2: #1A1714;
      --ivory: #F9F5EF;
      --ivory2: #EDE7DC;
      --gold: #B8944A;
      --gold2: #D4AF72;
      --red: #B5302A;
      --stone: #5A524A;
      --stone2: #8A7E74
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: "Jost", system-ui, sans-serif;
      background: var(--ivory);
      color: var(--ink);
      line-height: 1.7;
      overflow-x: hidden
    }

    ::selection {
      background: var(--gold);
      color: var(--ink)
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      display: block;
      max-width: 100%
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      background: rgba(14, 12, 10, .94);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(184, 148, 74, .1)
    }

    .nav-logo {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 19px;
      font-weight: 600;
      color: var(--gold2)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px
    }

    .nav-link {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1px;
      color: rgba(212, 175, 114, .5);
      transition: color .2s;
      text-transform: uppercase
    }

    .nav-link:hover {
      color: var(--gold2)
    }

    .nav-cta {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--gold);
      padding: 8px 18px;
      border-radius: 1px;
      transition: background .2s
    }

    .nav-cta:hover {
      background: var(--gold2)
    }

    .breadcrumb {
      padding: 80px 60px 0;
      background: var(--ivory)
    }

    .breadcrumb-inner {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap
    }

    .breadcrumb-inner a,
    .breadcrumb-inner span {
      font-size: 11px;
      color: var(--stone2)
    }

    .breadcrumb-inner a:hover {
      color: var(--gold)
    }

    .breadcrumb-inner .sep {
      color: var(--stone2);
      opacity: .4
    }

    .breadcrumb-inner .current {
      color: var(--ink);
      font-weight: 500
    }

    .blog-hero-img {
      width: 100%;
      height: 400px;
      overflow: hidden;
      position: relative
    }

    .blog-hero-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.85)
    }

    .blog-hero-img::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to top, var(--ivory), transparent)
    }

    .blog-hero {
      padding: 28px 60px 40px;
      background: var(--ivory);
      border-bottom: 1px solid rgba(184, 148, 74, .12)
    }

    .blog-category {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(184, 148, 74, .3);
      padding: 5px 12px;
      border-radius: 1px;
      margin-bottom: 16px
    }

    .blog-h1 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(30px, 5vw, 54px);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: -1px;
      color: var(--ink);
      max-width: 820px;
      margin-bottom: 14px
    }

    .blog-h1 em {
      font-style: italic;
      color: var(--gold)
    }

    .blog-meta-row {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    .bmi {
      font-size: 11px;
      color: var(--stone2)
    }

    .blog-excerpt {
      font-size: 15px;
      font-weight: 300;
      color: var(--stone);
      line-height: 1.75;
      max-width: 640px;
      border-left: 2px solid var(--gold);
      padding-left: 16px
    }

    .blog-layout {
      display: grid;
      grid-template-columns: 1fr 290px;
      gap: 44px;
      padding: 44px 60px 72px;
      max-width: 1200px;
      margin: 0 auto;
      align-items: start
    }

    article.ba h2 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 700;
      color: var(--ink);
      margin: 32px 0 12px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(184, 148, 74, .15);
      line-height: 1.2
    }

    article.ba h3 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(17px, 2.5vw, 21px);
      font-weight: 700;
      color: var(--ink);
      margin: 24px 0 9px;
      padding-left: 12px;
      border-left: 2.5px solid var(--gold);
      line-height: 1.3
    }

    article.ba p {
      font-size: 15px;
      color: var(--stone);
      line-height: 1.85;
      margin-bottom: 14px;
      font-weight: 300
    }

    article.ba strong {
      color: var(--ink);
      font-weight: 600
    }

    article.ba ul,
    article.ba ol {
      margin: 8px 0 16px 20px;
      color: var(--stone)
    }

    article.ba li {
      padding: 3px 0;
      font-size: 15px;
      font-weight: 300;
      line-height: 1.75
    }

    article.ba table {
      width: 100%;
      border-collapse: collapse;
      margin: 18px 0;
      font-size: 13.5px;
      overflow-x: auto;
      display: block
    }

    article.ba th {
      background: var(--ink);
      color: var(--gold2);
      padding: 9px 14px;
      text-align: left;
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600
    }

    article.ba td {
      padding: 9px 14px;
      border-bottom: 1px solid rgba(184, 148, 74, .1);
      color: var(--stone);
      font-weight: 300;
      vertical-align: top
    }

    article.ba tr:nth-child(even) td {
      background: rgba(184, 148, 74, .04)
    }

    .hl-box {
      background: rgba(184, 148, 74, .07);
      border-left: 3px solid var(--gold);
      padding: 14px 18px;
      margin: 18px 0;
      border-radius: 0 4px 4px 0;
      font-style: italic;
      color: var(--stone);
      font-size: 15px;
      line-height: 1.75
    }

    .fq {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-weight: 700;
      color: var(--ink);
      font-size: 16px;
      margin: 18px 0 5px
    }

    .fa {
      padding: 7px 0 9px 14px;
      border-left: 2px solid var(--gold);
      color: var(--stone);
      font-size: 14px;
      font-weight: 300;
      line-height: 1.75;
      margin-bottom: 4px
    }

    .bcta {
      background: var(--ink);
      padding: 26px 28px;
      margin: 32px 0;
      border-radius: 2px
    }

    .bcta h4 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--gold2);
      margin-bottom: 7px;
      line-height: 1.2
    }

    .bcta p {
      font-size: 13px;
      color: rgba(212, 175, 114, .5);
      margin-bottom: 12px
    }

    .bcta-btns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .bg {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--gold);
      padding: 11px 20px;
      border-radius: 1px;
      display: inline-block;
      transition: background .2s
    }

    .bg:hover {
      background: var(--gold2)
    }

    .bo {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(184, 148, 74, .4);
      padding: 10px 18px;
      border-radius: 1px;
      display: inline-block;
      transition: all .2s
    }

    .bo:hover {
      border-color: var(--gold);
      color: var(--gold2)
    }

    .sidebar {
      position: sticky;
      top: 74px
    }

    .sc {
      background: var(--ink2);
      padding: 22px 18px;
      margin-bottom: 14px;
      border-radius: 2px
    }

    .st {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(212, 175, 114, .35);
      margin-bottom: 14px;
      padding-bottom: 9px;
      border-bottom: 1px solid rgba(184, 148, 74, .1)
    }

    .tl {
      list-style: none
    }

    .tl li {
      border-bottom: 1px solid rgba(184, 148, 74, .07)
    }

    .tl a {
      display: block;
      padding: 7px 0;
      font-size: 12px;
      font-weight: 300;
      color: rgba(212, 175, 114, .5);
      transition: color .2s;
      line-height: 1.4
    }

    .tl a:hover {
      color: var(--gold2)
    }

    .pc {
      background: var(--ink2);
      padding: 20px 16px
    }

    .pci {
      width: 100%;
      height: 120px;
      object-fit: cover;
      margin-bottom: 12px;
      filter: brightness(.7)
    }

    .pc h4 {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 17px;
      color: var(--gold2);
      margin-bottom: 7px
    }

    .pc p {
      font-size: 11px;
      color: rgba(212, 175, 114, .4);
      line-height: 1.65;
      margin-bottom: 12px
    }

    .rb-box {
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(212, 175, 114, .3);
      margin-bottom: 3px
    }

    .rb-num {
      font-size: 11px;
      color: var(--gold);
      display: block;
      font-weight: 700
    }

    .ri {
      padding: 9px 0;
      border-bottom: 1px solid rgba(184, 148, 74, .07)
    }

    .ri:last-child {
      border-bottom: none
    }

    .ri a {
      font-size: 12px;
      font-weight: 300;
      color: rgba(212, 175, 114, .5);
      line-height: 1.5;
      transition: color .2s;
      display: block
    }

    .ri a:hover {
      color: var(--gold2)
    }

    .rc {
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(212, 175, 114, .25);
      display: block;
      margin-bottom: 2px
    }

    footer {
      background: #08070A;
      padding: 36px 60px 20px;
      border-top: 1px solid rgba(184, 148, 74, .08)
    }

    .ft {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 36px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(184, 148, 74, .07)
    }

    .fb {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 20px;
      color: var(--gold2);
      margin-bottom: 5px
    }

    .fs {
      font-size: 11px;
      font-weight: 300;
      color: rgba(212, 175, 114, .3);
      line-height: 1.8
    }

    .fc h4 {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(212, 175, 114, .3);
      margin-bottom: 11px
    }

    .fc a,
    .fc p {
      display: block;
      font-size: 12px;
      font-weight: 300;
      color: rgba(212, 175, 114, .4);
      margin-bottom: 6px;
      transition: color .2s;
      line-height: 1.6
    }

    .fc a:hover {
      color: var(--gold)
    }

    .fr {
      font-size: 10px;
      color: rgba(212, 175, 114, .25);
      line-height: 1.8;
      margin-bottom: 12px
    }

    .fr strong {
      color: rgba(212, 175, 114, .4)
    }

    .fd {
      font-size: 9px;
      color: rgba(255, 255, 255, .1);
      line-height: 1.8
    }

    .fbot {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 7px;
      border-top: 1px solid rgba(184, 148, 74, .06);
      padding-top: 12px;
      margin-top: 12px
    }

    .fcp {
      font-size: 10px;
      color: rgba(255, 255, 255, .15)
    }

    @media(max-width:900px) {
      .blog-layout {
        grid-template-columns: 1fr
      }

      .sidebar {
        position: static
      }

      nav,
      .breadcrumb,
      .blog-hero,
      .blog-layout {
        padding-left: 20px;
        padding-right: 20px
      }

      footer {
        padding: 28px 20px 16px
      }

      .ft {
        grid-template-columns: 1fr
      }

      .blog-hero-img {
        height: 240px
      }
    }

    @media(max-width:600px) {
      .blog-h1 {
        font-size: 26px
      }

      .blog-meta-row {
        gap: 10px
      }

      .bcta-btns {
        flex-direction: column
      }
    }