:root {
      --header: #1A2E28;
      --header2: #243F37;
      --bg: #F3EDE3;
      --article: #FBF7F1;
      --text: #1E1A16;
      --muted: #6E645B;
      --accent: #B85A2A;
      --cta: #1F6A45;
      --cta-h: #174F34;
      --cta-t: #FFFFFF;
      --border: #E3D6C6;
      --card: #FFFFFF;
      --soft: #EFE4D4;
      --serif: "Fraunces", serif;
      --sans: "Outfit", sans-serif;
      --max: 820px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 5rem
    }

    body {
      margin: 0;
      font-family: var(--sans);
      color: var(--text);
      background: var(--bg);
      line-height: 1.7
    }

    img {
      max-width: 100%;
      height: auto
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }

    button {
      font-family: inherit
    }

    .skip {
      position: absolute;
      left: -999px;
      top: 0;
      background: var(--header);
      color: var(--text);
      padding: .5rem 1rem;
      z-index: 10000
    }

    .skip:focus {
      left: 1rem;
      top: 1rem
    }

    .ca-strip {
      background: var(--cta);
      color: var(--text);
      text-align: center;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .04em;
      padding: .4rem 1rem
    }

    .leaf {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -.12em;
      fill: currentColor
    }

    .masthead {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--header);
      color: var(--text);
      border-bottom: 1px solid #E3D6C6
    }

    .mast-inner {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: .7rem 1.1rem
    }

    .brand {
      text-decoration: none;
      color: var(--text);
      display: flex;
      flex-direction: column;
      line-height: 1.1
    }

    .brand strong {
      font-family: var(--serif);
      font-size: 1.45rem;
      letter-spacing: .15em;
      font-weight: 800;
      color: var(--text)
    }

    .brand strong {
      white-space: nowrap
    }

    @media(max-width:480px) {
      .brand strong {
        font-size: 1.2rem
      }

      .ad-label {
        display: none
      }
    }

    .brand strong .leaf {
      color: var(--accent);
      margin-right: .3rem
    }

    .brand span {
      font-size: .62rem;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: #8A7B6C;
      margin-top: .15rem
    }

    .nav-desk {
      display: none;
      gap: 1.15rem;
      list-style: none;
      margin: 0;
      padding: 0
    }

    .nav-desk a {
      color: #3C342C;
      text-decoration: none;
      font-size: .82rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-family: var(--serif);
      font-weight: 600
    }

    .nav-desk a:hover {
      color: var(--accent)
    }

    .mast-right {
      display: flex;
      align-items: center;
      gap: .75rem
    }

    .ad-label {
      font-size: .65rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      border: 1px solid var(--accent);
      padding: .2rem .45rem;
      color: var(--accent);
      border-radius: 4px
    }

    .search-btn,
    .menu-btn {
      background: none;
      border: 0;
      color: var(--text);
      cursor: pointer;
      padding: .35rem;
      display: flex
    }

    .search-btn:focus,
    .menu-btn:focus,
    a:focus,
    button:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    .mobile-nav {
      display: none;
      background: var(--header2);
      padding: .5rem 1.1rem 1rem
    }

    .mobile-nav.open {
      display: block
    }

    .mobile-nav a {
      display: block;
      color: #3C342C;
      text-decoration: none;
      padding: .55rem 0;
      border-bottom: 1px solid #D9CBB8;
      font-family: var(--serif);
      text-transform: uppercase
    }

    .crumb-bar {
      background: var(--card);
      border-bottom: 1px solid var(--border)
    }

    .crumb-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: .55rem 1.1rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      font-size: .8rem;
      color: var(--muted)
    }

    .disclose-link {
      background: none;
      border: 0;
      color: var(--accent);
      font-size: .78rem;
      cursor: pointer;
      text-decoration: none;
      padding: 0;
      font-weight: 600
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 1.1rem 3rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem
    }

    article.story {
      background: var(--article);
      border: 1px solid var(--border);
      border-top: 0;
      padding: 1.5rem 1.15rem 2.5rem;
      max-width: 100%;
      min-width: 0
    }

    .kicker {
      display: inline-block;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 700;
      margin-bottom: .6rem
    }

    h1 {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(1.7rem, 4.5vw, 2.75rem);
      line-height: 1.22;
      margin: 0 0 .75rem;
      color: var(--text)
    }

    .deck {
      font-size: 1.05rem;
      color: #5C534B;
      margin: 0 0 1.1rem
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .45rem 1rem;
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: 1.25rem
    }

    .author-photo {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      background: var(--card);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      font-size: 1.5rem
    }

    .meta strong {
      color: var(--text);
      font-weight: 600
    }

    .hero-fig {
      margin: 0 0 1.5rem
    }

    .ed-img {
      width: 100%;
      border-radius: 8px;
      display: block;
      object-fit: contain;
      max-height: 460px;
      border: 1px solid #E3D6C6;
      background: radial-gradient(circle at 50% 40%, #E7DCCB, #F7F1E8 70%)
    }

    .cap {
      font-size: .8rem;
      color: var(--muted);
      margin: .45rem 0 0;
      font-style: italic
    }

    .gallery {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
      margin: .4rem 0 1rem
    }

    .gallery img {
      width: 100%;
      height: 170px;
      object-fit: cover;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #E3D6C6;
      display: block
    }

    @media(min-width:700px) {
      .gallery {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    .stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6rem;
      margin: 1.4rem 0 1.8rem
    }

    .stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .9rem .8rem;
      text-align: center
    }

    .stat b {
      display: block;
      font-family: var(--serif);
      font-size: 1.5rem;
      color: var(--text);
      line-height: 1.2
    }

    .stat span {
      font-size: .75rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted)
    }

    @media(min-width:700px) {
      .stats {
        grid-template-columns: repeat(4, 1fr)
      }
    }

    .story p {
      margin: 0 0 1.05rem;
      font-size: 1.05rem;
      color: #5C534B
    }

    .story h2 {
      font-family: var(--serif);
      font-size: 1.75rem;
      font-weight: 700;
      margin: 2.5rem 0 1rem;
      line-height: 1.3;
      color: var(--text)
    }

    .story h3 {
      font-family: var(--serif);
      font-size: 1.3rem;
      font-weight: 600;
      margin: 1.5rem 0 .5rem;
      color: #FFF
    }

    .story ul.list,
    .story ol.list {
      color: #5C534B;
      margin: 0 0 1.6rem;
      padding-left: 1.3rem;
      font-size: 1.05rem
    }

    .story .list li {
      margin: .4rem 0
    }

    .pull {
      font-family: var(--serif);
      font-size: 1.45rem;
      font-style: italic;
      color: var(--text);
      border-left: 4px solid var(--accent);
      padding: .2rem 0 .2rem 1.2rem;
      margin: 1.8rem 0;
      line-height: 1.4;
      background: linear-gradient(90deg, rgba(184, 90, 42, 0.10) 0%, transparent 100%)
    }

    .notice {
      background: var(--card);
      border: 1px solid var(--accent);
      padding: .85rem 1rem;
      font-size: .88rem;
      color: #3C342C;
      border-radius: 8px;
      margin: 0 0 1.4rem;
      box-shadow: 0 0 15px rgba(184, 90, 42, 0.16)
    }

    .product-card {
      background: var(--card);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 1.4rem;
      margin: 1.6rem 0;
      box-shadow: 0 8px 32px rgba(31, 106, 69, .12)
    }

    .badge {
      display: inline-block;
      background: var(--cta);
      color: var(--text);
      font-size: .75rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 800;
      padding: .3rem .6rem;
      border-radius: 4px;
      margin-bottom: .8rem
    }

    .product-card h3 {
      font-family: var(--serif);
      margin: .2rem 0 .4rem;
      font-size: 1.55rem;
      color: #FFF
    }

    .cat {
      font-size: .85rem;
      color: var(--accent);
      margin: 0 0 .8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600
    }

    .product-card ul {
      margin: .6rem 0 1.2rem;
      padding-left: 1.2rem;
      color: #5C534B
    }

    .product-card li {
      margin: .4rem 0
    }

    .price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: .4rem .8rem;
      margin: .2rem 0 .6rem
    }

    .price b {
      font-family: var(--serif);
      font-size: 1.9rem;
      color: var(--text)
    }

    .price s {
      color: var(--muted)
    }

    .price em {
      font-style: normal;
      font-size: .75rem;
      font-weight: 700;
      color: var(--text);
      background: var(--cta);
      border-radius: 4px;
      padding: .15rem .45rem
    }

    .price-note {
      font-size: .78rem;
      color: var(--muted);
      margin: 0 0 1rem !important
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--cta);
      color: var(--cta-t);
      text-decoration: none;
      font-weight: 700;
      letter-spacing: .06em;
      padding: .9rem 1.4rem;
      border-radius: 6px;
      width: 100%;
      text-align: center;
      border: 0;
      cursor: pointer;
      font-size: .95rem;
      text-transform: uppercase;
      transition: all 0.2s
    }

    .cta:hover {
      background: var(--cta-h);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(31, 106, 69, 0.28)
    }

    .cta-note {
      font-size: .75rem !important;
      color: var(--muted) !important;
      margin: .55rem 0 0 !important;
      text-align: center
    }

    .table-wrap {
      overflow-x: auto
    }

    .compare {
      width: 100%;
      border-collapse: collapse;
      font-size: .95rem;
      margin: 1.2rem 0 1.6rem
    }

    .compare caption {
      text-align: left;
      color: var(--muted);
      font-size: .85rem;
      margin-bottom: .5rem
    }

    .compare th,
    .compare td {
      border: 1px solid var(--border);
      padding: .8rem .75rem;
      text-align: left;
      vertical-align: top;
      color: #5C534B
    }

    .compare th {
      background: var(--card);
      font-weight: 700;
      color: var(--text);
      font-family: var(--serif)
    }

    .cards {
      display: grid;
      gap: 1rem;
      margin: 1.2rem 0 1.8rem
    }

    .mini {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.2rem;
      transition: border-color 0.2s
    }

    .mini:hover {
      border-color: var(--accent)
    }

    .mini h3 {
      margin: 0 0 .4rem;
      font-size: 1.15rem;
      font-family: var(--serif);
      color: #FFF
    }

    .mini p {
      font-size: .95rem;
      margin: 0
    }

    .step-n {
      display: inline-flex;
      width: 1.9rem;
      height: 1.9rem;
      border-radius: 50%;
      background: var(--cta);
      color: var(--text);
      font-weight: 700;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      margin-bottom: .5rem
    }

    .split {
      display: grid;
      gap: 1rem;
      margin: 1.2rem 0 1.8rem
    }

    .split .mini ul {
      margin: 0;
      padding-left: 1.2rem;
      color: #5C534B;
      font-size: .95rem
    }

    .split .mini li {
      margin: .35rem 0
    }

    .box-fig {
      margin: 1rem 0 1.6rem
    }

    .box-fig img {
      width: 100%;
      max-height: 380px;
      object-fit: cover;
      border-radius: 8px;
      display: block;
      border: 1px solid #E3D6C6;
      background: #fff
    }

    .cta-band {
      background: var(--card);
      color: var(--text);
      border-radius: 12px;
      padding: 1.6rem 1.25rem;
      margin: 2rem 0;
      text-align: center;
      border: 1px solid #E3D6C6
    }

    .cta-band h2 {
      color: var(--text);
      margin: .2rem 0 .8rem;
      font-family: var(--serif);
      font-size: 1.6rem
    }

    .cta-band p {
      color: #9CA3AF;
      margin-bottom: 1.2rem
    }

    .cta-band .cta {
      max-width: 360px
    }

    .rating {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .6rem 1.2rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.2rem;
      margin: 1rem 0
    }

    .rating .score {
      font-family: var(--serif);
      font-size: 2.6rem;
      font-weight: 800;
      color: var(--text);
      line-height: 1
    }

    .rating .stars {
      color: #FFC107;
      font-size: 1.3rem;
      letter-spacing: .1em
    }

    .rating p {
      margin: 0;
      font-size: .9rem;
      color: var(--muted)
    }

    .faq button.q {
      width: 100%;
      text-align: left;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: .95rem 1.1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: .6rem;
      color: var(--text);
      font-family: var(--serif);
      font-size: 1rem
    }

    .faq button.q::after {
      content: "+";
      color: var(--accent);
      font-size: 1.3rem;
      line-height: 1
    }

    .faq .item.open button.q::after {
      content: "–"
    }

    .faq .a {
      display: none;
      padding: .9rem 1.1rem 1.1rem;
      border: 1px solid var(--border);
      border-top: 0;
      border-radius: 0 0 8px 8px;
      background: #0A0A0A;
      color: #5C534B
    }

    .faq .a ul {
      margin: .5rem 0;
      padding-left: 1.2rem
    }

    .faq .item.open .a {
      display: block
    }

    .faq .item.open button.q {
      border-radius: 8px 8px 0 0;
      border-color: var(--accent);
      color: var(--accent)
    }

    .cats {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin: 1.8rem 0 0
    }

    .cats span {
      border: 1px solid var(--border);
      padding: .35rem .7rem;
      font-size: .75rem;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--muted);
      border-radius: 99px;
      background: #111111
    }

    .aside {
      display: none
    }

    footer {
      background: #000000;
      color: #9CA3AF;
      padding: 2.5rem 1.1rem 3.5rem;
      font-size: .88rem;
      border-top: 1px solid #E3D6C6
    }

    .foot-inner {
      max-width: 1180px;
      margin: 0 auto
    }

    .foot-brand {
      font-family: var(--serif);
      color: var(--text);
      font-size: 1.3rem;
      letter-spacing: .15em;
      font-weight: 800
    }

    .foot-brand .leaf {
      color: var(--accent);
      margin-right: .3rem
    }

    .foot-tag {
      font-size: .75rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin: .35rem 0 1.2rem;
      color: #6B7280
    }

    .foot-links {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1.2rem;
      margin: 1.2rem 0
    }

    .foot-links button,
    .foot-links a {
      background: none;
      border: 0;
      color: #9CA3AF;
      cursor: pointer;
      padding: 0;
      text-decoration: none;
      font-size: .88rem
    }

    .foot-links button:hover,
    .foot-links a:hover {
      color: var(--accent)
    }

    .cookie {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--card);
      color: #3C342C;
      padding: 1.2rem;
      z-index: 200;
      display: none;
      box-shadow: 0 -8px 40px rgba(0, 0, 0, .6);
      border-top: 1px solid var(--accent)
    }

    .cookie.show {
      display: block
    }

    .cookie-inner {
      max-width: 980px;
      margin: 0 auto
    }

    .cookie p {
      margin: 0 0 .9rem;
      font-size: .95rem
    }

    .cookie-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem
    }

    .cookie-actions button {
      border: 0;
      border-radius: 6px;
      padding: .75rem 1rem;
      cursor: pointer;
      font-weight: 700;
      font-family: var(--sans)
    }

    .btn-acc {
      background: var(--cta);
      color: var(--text)
    }

    .btn-acc:hover {
      background: var(--cta-h)
    }

    .btn-rej {
      background: #E3D6C6;
      color: #FFF
    }

    .btn-cus {
      background: var(--header);
      color: var(--accent);
      border: 1px solid var(--accent)
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .8);
      z-index: 300;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 4rem 1rem 2rem;
      overflow: auto;
      backdrop-filter: blur(4px)
    }

    .modal.open {
      display: flex
    }

    .modal-box {
      background: var(--card);
      max-width: 640px;
      width: 100%;
      border-radius: 12px;
      padding: 1.5rem 1.4rem 1.7rem;
      position: relative;
      border: 1px solid #E3D6C6;
      box-shadow: 0 10px 40px rgba(184, 90, 42, 0.16)
    }

    .modal h2 {
      font-family: var(--serif);
      margin: .2rem 0 1.2rem;
      color: var(--text);
      font-size: 1.6rem
    }

    .modal p,
    .modal li {
      font-size: .95rem;
      color: #5C534B
    }

    .close {
      position: absolute;
      top: .8rem;
      right: .9rem;
      background: none;
      border: 0;
      font-size: 1.6rem;
      cursor: pointer;
      line-height: 1;
      color: #9CA3AF;
      transition: color 0.2s
    }

    .close:hover {
      color: var(--accent)
    }

    .search-panel {
      display: none;
      background: var(--card);
      padding: .8rem 1.1rem;
      border-bottom: 1px solid #E3D6C6
    }

    .search-panel.open {
      display: block
    }

    .search-panel input {
      width: 100%;
      max-width: 480px;
      padding: .7rem .8rem;
      border-radius: 6px;
      border: 1px solid #3F3F46;
      background: var(--header);
      color: var(--text);
      font-family: var(--sans)
    }

    .search-panel input:focus {
      border-color: var(--accent);
      outline: none
    }

    @media(min-width:860px) {
      .menu-btn {
        display: none
      }

      .nav-desk {
        display: flex
      }

      article.story {
        padding: 2.5rem 2.8rem 3.5rem;
        max-width: var(--max);
        margin: 0 auto
      }

      .wrap {
        grid-template-columns: minmax(0, 1fr) 280px;
        padding-top: 2rem
      }

      .aside {
        display: block
      }

      .aside-card {
        background: var(--card);
        border: 1px solid var(--border);
        padding: 1.2rem;
        border-radius: 10px;
        position: sticky;
        top: 5.5rem
      }

      .aside-card h3 {
        font-family: var(--serif);
        margin: 0 0 .6rem;
        color: var(--text)
      }

      .aside-card a.toc {
        display: block;
        color: #3C342C;
        text-decoration: none;
        font-size: .9rem;
        border-bottom: 1px solid var(--border);
        padding: .5rem 0
      }

      .aside-card a.toc:hover {
        color: var(--accent)
      }

      .aside-card .cta {
        width: 100%;
        min-width: 0;
        margin-top: 1rem
      }

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

      .cards.three {
        grid-template-columns: 1fr 1fr 1fr
      }

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

      .cta {
        width: auto;
        min-width: 260px
      }

      .product-card .cta,
      .cta-band .cta {
        width: 100%
      }
    }
  </style>
</head>

<body>
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <symbol id="leaf" viewBox="0 0 24 24">
      <path
        d="M12 1l2.1 4.1 2.6-1.3-.9 5.7 3.1-2.9.7 2.2 3.3-.5-1.4 4.3 1.5.9-5.6 4.4.6 2.3-5.2-.8.2 4.6h-2l.2-4.6-5.2.8.6-2.3L1 13.5l1.5-.9L1.100 8.300l3.300.5.700-2.200 3.100 2.900-.900-5.700 2.600 1.300z" />
    </symbol>

    .masthead, .masthead .brand, .masthead .brand strong, .ca-strip, .menu-btn, .search-btn, .mobile-nav, .mobile-nav a, .foot-brand, footer, .cta, .btn-acc {
      color: #fff;
    }
    .masthead .brand span, .nav-desk a, .ca-strip { color: #F3E7D6; }
    .nav-desk a:hover, .brand strong .leaf, .ad-label { color: #E7C48A; }
    .mobile-nav { background: var(--header2); }
    .mobile-nav a { color: #F6F0E6; border-bottom-color: rgba(255,255,255,.12); }
    footer { background: var(--header); color: #F6F0E6; }
    footer a, footer button { color: #E7C48A; }
    .cta, .btn-acc { background: var(--cta); color: #fff; }
    .logo-img { height: 38px; width: auto; display: block; }
    .brand { flex-direction: row; align-items: center; gap: .65rem; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }