/* ─── Reset ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
    html { color-scheme: light only; forced-color-adjust: none; -webkit-forced-color-adjust: none; scroll-behavior: smooth; }
    body { font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; background: hsl(30,33%,97%); color: hsl(24,23%,8%); }

    @media (prefers-color-scheme: dark) {
      html, body { background-color: hsl(30,33%,97%) !important; color: hsl(24,23%,8%) !important; }
      * { background-color: unset; color: unset; }
      .navbar-global { background: hsla(30,33%,97%,0.95) !important; border-bottom-color: hsl(23,19%,87%) !important; }
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font-family: inherit; font-size: 100%; }
    img, svg { display: block; max-width: 100%; height: auto; }
    ul, ol { list-style: none; }

    /* ─── Brand tokens ─── */
    :root {
      --burgundy:     hsl(351, 57%, 35%);
      --burgundy-h:   hsl(350, 54%, 42%);
      --burgundy-pale:hsl(352, 33%, 96%);
      --gold:         hsl(34, 45%, 56%);
      --light-gold:   hsl(33, 50%, 65%);
      --cream:        hsl(30, 33%, 97%);
      --dark-cream:   hsl(35, 27%, 93%);
      --text-main:    hsl(24, 23%, 8%);
      --text-medium:  hsl(21, 12%, 37%);
      --text-light:   hsl(21, 11%, 56%);
      --border:       hsl(23, 19%, 87%);
      --dark-bg:      hsl(24, 23%, 8%);
    }

    /* ─── Animations ─── */
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-up { animation: fadeUp 0.6s cubic-bezier(.16,1,.3,1) forwards; }

    /* ─── Reading progress bar ─── */
    #read-progress {
      position: fixed; top: 0; left: 0; height: 3px;
      background: var(--burgundy); z-index: 200;
      width: 0%; transition: width .15s ease-out;
    }

    /* ─── Age Gate ─── */
    #avip-age-gate {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,.82); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center; padding: 1rem;
    }
    #avip-age-gate.hiding { animation: fadeOut .3s ease forwards; }
    .age-gate-box {
      background: #fff; border-radius: 16px;
      max-width: 420px; width: 100%; padding: 2.5rem 2rem;
      text-align: center; box-shadow: 0 24px 64px rgba(26,20,16,.4);
    }
    .age-gate-box h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem; font-weight: 600; color: var(--text-main); margin-bottom: .5rem;
    }
    .age-gate-box p { font-size: .9rem; color: var(--text-medium); line-height: 1.6; margin-bottom: 1.75rem; }
    .age-gate-actions { display: flex; gap: .75rem; justify-content: center; }
    .btn-sim {
      background: var(--burgundy); color: #fff; border: none; cursor: pointer;
      border-radius: 6px; padding: .75rem 2rem; font-size: .875rem; font-weight: 500; transition: background .15s;
    }
    .btn-sim:hover { background: var(--burgundy-h); }
    .btn-nao {
      background: transparent; color: var(--text-medium); border: 1px solid var(--border); cursor: pointer;
      border-radius: 6px; padding: .75rem 2rem; font-size: .875rem; font-weight: 500; transition: background .15s;
    }
    .btn-nao:hover { background: var(--dark-cream); }

    /* ─── Page wrap ─── */
    .page-wrap { display: flex; flex-direction: column; min-height: 100vh; }

    /* ─── Navbar global ─── */
    .navbar-global {
      position: sticky; top: 0; z-index: 50;
      background: hsla(30,33%,97%,.95); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .navbar-global .inner {
      max-width: 1280px; margin: 0 auto; padding: 0 2rem;
      height: 4rem; display: flex; align-items: center; justify-content: space-between;
    }
    .brand { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: var(--text-main); }
    .brand em { font-style: italic; color: var(--burgundy); }
    .nav-links { display: none; gap: 2rem; }
    .nav-links a {
      font-size: .8125rem; font-weight: 500; text-transform: uppercase;
      letter-spacing: .05em; color: var(--text-medium); transition: color .15s; padding-bottom: .25rem;
    }
    .nav-links a:hover { color: var(--burgundy); }
    .nav-links a.active { color: var(--burgundy); border-bottom: 2px solid var(--burgundy); }
    .nav-actions { display: none; gap: 1rem; align-items: center; }
    .nav-actions a.link { font-size: .8125rem; font-weight: 500; color: var(--text-main); transition: color .15s; }
    .nav-actions a.link:hover { color: var(--burgundy); }
    .btn-cta {
      display: inline-block; background: var(--burgundy); color: #fff;
      padding: .5rem 1.25rem; border-radius: 6px; font-size: .8125rem; font-weight: 500; transition: background .15s;
    }
    .btn-cta:hover { background: var(--burgundy-h); }
    @media (min-width: 768px) { .nav-links, .nav-actions { display: flex; } }

    /* ─── Breadcrumb ─── */
    .breadcrumb-bar {
      background: #fff; border-bottom: 1px solid var(--border); padding: .75rem 0;
    }
    .breadcrumb-bar .inner {
      max-width: 1100px; margin: 0 auto; padding: 0 2rem;
      overflow-x: auto; white-space: nowrap;
    }
    .breadcrumb-bar nav {
      display: flex; align-items: center; gap: .5rem;
      font-size: .75rem; font-weight: 500;
    }
    .breadcrumb-bar a { color: var(--burgundy); }
    .breadcrumb-bar a:hover { text-decoration: underline; }
    .breadcrumb-bar span { color: var(--text-light); }
    .breadcrumb-bar .current { color: var(--text-main); overflow: hidden; text-overflow: ellipsis; }

    /* ─── Article hero ─── */
    .article-hero {
      background: #fff; padding: 3.5rem 0 2.5rem;
    }
    .article-hero .inner {
      max-width: 780px; margin: 0 auto; padding: 0 2rem; text-align: center;
    }
    .article-cat-badge {
      display: inline-block; background: var(--burgundy-pale); color: var(--burgundy);
      font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
      padding: .25rem .75rem; border-radius: 9999px;
      border: 1px solid hsl(351,30%,82%); margin-bottom: 1.5rem;
    }
    .article-hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.25rem; font-weight: 600; color: var(--text-main);
      line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1.5rem; text-wrap: balance;
    }
    @media (min-width: 640px) { .article-hero h1 { font-size: 3rem; } }
    .article-hero .lead {
      font-size: 1.125rem; color: var(--text-medium); line-height: 1.7;
      margin-bottom: 2rem; text-wrap: balance;
    }
    .article-meta {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 1rem; font-size: .8125rem; color: var(--text-light);
    }
    .article-meta span { display: flex; align-items: center; gap: .375rem; }

    /* ─── Main layout ─── */
    .article-layout {
      max-width: 1100px; margin: 0 auto; width: 100%;
      padding: 2.5rem 2rem 3.5rem;
      display: flex; flex-direction: column; gap: 3.5rem;
    }
    @media (min-width: 1024px) { .article-layout { flex-direction: row; } }

    /* ─── Article body ─── */
    .article-body-col { flex: 1; min-width: 0; }

    /* cover image */
    .article-cover {
      width: 100%; height: 240px; border-radius: 12px;
      background: linear-gradient(135deg, #F2EDE6, #E5DDD8);
      margin-bottom: .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.07);
    }
    @media (min-width: 640px) { .article-cover { height: 360px; } }
    .article-cover-caption {
      font-size: .75rem; color: var(--text-light); text-align: center;
      font-style: italic; margin-bottom: 2rem;
    }

    /* mobile TOC toggle */
    .toc-mobile-toggle {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--cream); border: 1px solid var(--border);
      padding: 1rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
      color: var(--text-main); cursor: pointer; width: 100%; margin-bottom: 2rem;
    }
    @media (min-width: 1024px) { .toc-mobile-toggle { display: none; } }
    .toc-mobile-panel {
      background: var(--cream); border: 1px solid var(--border);
      border-radius: 8px; padding: 1rem; margin-bottom: 2rem; display: none;
    }
    .toc-mobile-panel.open { display: block; }
    .toc-mobile-panel ol { padding-left: 1rem; list-style: decimal; }
    .toc-mobile-panel li { margin-bottom: .5rem; }
    .toc-mobile-panel a { font-size: .875rem; color: var(--text-medium); transition: color .15s; }
    .toc-mobile-panel a:hover { color: var(--burgundy); }

    /* prose article */
    .prose { font-size: .9375rem; line-height: 1.8; color: var(--text-medium); }
    .prose h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.625rem; font-weight: 600; color: var(--text-main);
      margin: 2.5rem 0 1rem; line-height: 1.2;
    }
    .prose h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem; font-weight: 600; color: var(--text-main);
      margin: 2rem 0 .75rem;
    }
    .prose p { margin-bottom: 1.25rem; }
    .prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
    .prose ul { list-style: disc; }
    .prose ol { list-style: decimal; }
    .prose li { margin-bottom: .5rem; }
    .prose strong { font-weight: 600; color: var(--text-main); }
    .prose a { color: var(--burgundy); text-decoration: underline; }
    .prose blockquote {
      border-left: 3px solid var(--burgundy); padding: 1rem 1.25rem;
      background: var(--cream); border-radius: 0 8px 8px 0;
      font-style: italic; color: var(--text-main); margin: 1.5rem 0;
    }
    .prose blockquote p { margin: 0; }

    /* highlight box */
    .highlight-box {
      background: var(--cream); border-left: 3px solid var(--burgundy);
      padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin: 2rem 0;
    }
    .highlight-box p { font-size: .9375rem; color: var(--text-main); line-height: 1.7; margin: 0; }

    /* FAQ accordion */
    .faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
    .faq-item {
      border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
    }
    .faq-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      padding: 1rem; text-align: left; background: #fff; border: none; cursor: pointer;
      transition: background .15s;
    }
    .faq-btn:hover { background: var(--cream); }
    .faq-btn span { font-weight: 500; font-size: .9375rem; color: var(--text-main); }
    .faq-btn svg { flex-shrink: 0; color: var(--text-medium); transition: transform .2s; }
    .faq-btn.open svg { transform: rotate(180deg); }
    .faq-answer {
      max-height: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; opacity: 0;
    }
    .faq-answer.open { max-height: 200px; opacity: 1; }
    .faq-answer-inner {
      padding: 0 1rem 1rem; border-top: 1px solid var(--border);
      font-size: .875rem; color: var(--text-medium); line-height: 1.625;
    }

    /* tags & share */
    .article-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
    .tags-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
    .tags-row span { font-size: .8125rem; font-weight: 500; color: var(--text-main); }
    .tag-link {
      background: var(--cream); border: 1px solid var(--border); color: var(--text-medium);
      font-size: .75rem; padding: .25rem .75rem; border-radius: 9999px; transition: border-color .15s, color .15s;
    }
    .tag-link:hover { border-color: var(--burgundy); color: var(--burgundy); }
    .share-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
    .share-row span { font-size: .8125rem; font-weight: 500; color: var(--text-main); }
    .share-btn {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .8125rem; font-weight: 500; padding: .5rem .875rem;
      border-radius: 4px; border: none; cursor: pointer; transition: filter .15s, background .15s;
    }
    .share-btn.whatsapp { background: #25D366; color: #fff; }
    .share-btn.whatsapp:hover { filter: brightness(1.08); }
    .share-btn.twitter { background: #000; color: #fff; }
    .share-btn.twitter:hover { background: #333; }
    .share-btn.copy { background: var(--cream); border: 1px solid var(--border); color: var(--text-main); }
    .share-btn.copy:hover { background: var(--dark-cream); }

    /* author box */
    .author-box {
      margin-top: 2.5rem; background: var(--cream); border: 1px solid var(--border);
      border-radius: 12px; padding: 1.5rem;
      display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
    }
    @media (min-width: 640px) { .author-box { flex-direction: row; text-align: left; } }
    .author-avatar {
      width: 3.5rem; height: 3.5rem; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--burgundy-pale), hsl(351,30%,82%));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 700;
      color: var(--burgundy);
    }
    .author-name { font-size: .9375rem; font-weight: 500; color: var(--text-main); margin-bottom: .25rem; }
    .author-bio { font-size: .8125rem; color: var(--text-medium); line-height: 1.625; }

    /* ─── Sidebar ─── */
    .article-sidebar { width: 100%; }
    @media (min-width: 1024px) { .article-sidebar { width: 280px; flex-shrink: 0; } }

    .sidebar-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2rem; }

    /* TOC widget */
    .toc-widget {
      background: var(--cream); border: 1px solid var(--border);
      border-radius: 8px; padding: 1.25rem; display: none;
    }
    @media (min-width: 1024px) { .toc-widget { display: block; } }
    .toc-widget h3 {
      font-size: .6875rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--burgundy); margin-bottom: 1rem;
    }
    .toc-list { display: flex; flex-direction: column; gap: .75rem; }
    .toc-item { display: flex; align-items: flex-start; gap: .5rem; }
    .toc-dot {
      width: .375rem; height: .375rem; border-radius: 50%;
      background: transparent; margin-top: .375rem; flex-shrink: 0; transition: background .15s;
    }
    .toc-dot.active { background: var(--burgundy); }
    .toc-item a { font-size: .8125rem; color: var(--text-medium); line-height: 1.4; transition: color .15s; }
    .toc-item a:hover, .toc-item a.active { color: var(--burgundy); font-weight: 500; }

    /* CTA widget */
    .cta-widget {
      background: var(--burgundy); border-radius: 12px; padding: 1.5rem; text-align: center;
      box-shadow: 0 4px 16px rgba(114,28,36,.2);
    }
    .cta-widget h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.375rem; font-weight: 500; color: #fff; line-height: 1.375; margin-bottom: .5rem;
    }
    .cta-widget p { font-size: .8125rem; color: rgba(255,255,255,.7); margin-bottom: 1.25rem; }
    .btn-white {
      display: block; width: 100%; background: #fff; color: var(--burgundy);
      padding: .625rem; border-radius: 4px; font-size: .8125rem; font-weight: 500;
      transition: background .15s;
    }
    .btn-white:hover { background: var(--cream); }

    /* Related articles widget */
    .related-widget h3 {
      font-size: .6875rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--burgundy); margin-bottom: 1rem;
    }
    .related-list { display: flex; flex-direction: column; gap: 1rem; }
    .related-item {
      display: flex; gap: .75rem;
      padding-bottom: 1rem; border-bottom: 1px solid var(--border);
    }
    .related-item:last-child { border-bottom: none; padding-bottom: 0; }
    .related-thumb {
      width: 60px; height: 60px; border-radius: 6px; flex-shrink: 0;
      background: linear-gradient(135deg, #F2EDE6, #E5DDD8);
    }
    .related-cat {
      font-size: .625rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .05em; color: var(--burgundy); margin-bottom: .25rem; display: block;
    }
    .related-title {
      font-size: .8125rem; font-weight: 500; color: var(--text-main);
      line-height: 1.375; transition: color .15s;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .related-item:hover .related-title { color: var(--burgundy); }

    /* Newsletter widget */
    .newsletter-widget {
      background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
    }
    .newsletter-widget h3 { font-size: .9375rem; font-weight: 500; color: var(--text-main); margin-bottom: .25rem; }
    .newsletter-widget p { font-size: .8125rem; color: var(--text-medium); margin-bottom: 1rem; }
    .newsletter-widget input {
      width: 100%; background: #fff; border: 1px solid var(--border);
      border-radius: 4px; padding: .5rem .75rem; font-size: .8125rem; color: var(--text-main);
      outline: none; transition: border-color .15s; margin-bottom: .5rem;
    }
    .newsletter-widget input:focus { border-color: var(--burgundy); }
    .newsletter-widget button {
      width: 100%; background: var(--burgundy); color: #fff; border: none;
      padding: .5rem; border-radius: 4px; font-size: .8125rem; font-weight: 500;
      cursor: pointer; transition: background .15s;
    }
    .newsletter-widget button:hover { background: var(--burgundy-h); }

    /* ─── Related articles section ─── */
    .related-section {
      background: var(--cream); padding: 3.5rem 0; border-top: 1px solid var(--border);
    }
    .related-section .inner {
      max-width: 1100px; margin: 0 auto; padding: 0 2rem;
    }
    .related-section .section-eyebrow {
      font-size: .8125rem; text-transform: uppercase; font-weight: 500;
      color: var(--text-light); letter-spacing: .1em; margin-bottom: .25rem;
    }
    .related-section h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.875rem; font-weight: 500; color: var(--text-main); margin-bottom: 2rem;
    }
    .related-grid {
      display: grid; gap: 1.5rem; grid-template-columns: 1fr;
    }
    @media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
    .related-card {
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      overflow: hidden; display: flex; flex-direction: column;
      transition: box-shadow .3s, transform .3s;
    }
    .related-card:hover { box-shadow: 0 8px 24px rgba(26,20,16,.1); transform: translateY(-4px); }
    .related-card-thumb {
      height: 160px; background: linear-gradient(135deg, #F2EDE6, #E5DDD8);
      position: relative;
    }
    .related-card-badge {
      position: absolute; top: .75rem; left: .75rem;
      font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
      background: var(--burgundy-pale); color: var(--burgundy);
      border: 1px solid hsl(351,30%,82%); padding: .25rem .5rem; border-radius: 4px;
    }
    .related-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .related-card-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.125rem; font-weight: 500; color: var(--text-main);
      line-height: 1.375; margin-bottom: 1rem; flex: 1;
    }
    .related-card-footer {
      display: flex; align-items: center; justify-content: space-between; font-size: .75rem;
    }
    .related-card-footer span { color: var(--text-light); }
    .related-card-footer a { color: var(--burgundy); font-weight: 500; }

    /* ─── Dark footer ─── */
    .dark-footer { background: #1A1410; padding: 4rem 0; }
    .dark-footer .inner {
      max-width: 1280px; margin: 0 auto; padding: 0 2rem;
      text-align: center; color: rgba(255,255,255,.7); font-size: .875rem;
    }
    .dark-footer .brand-white {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: 1rem;
    }
    .dark-footer .brand-white em { font-style: italic; color: var(--light-gold); }
    .dark-footer p { margin-bottom: 2rem; }
    .dark-footer .bottom-bar {
      border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    @media (min-width: 768px) { .dark-footer .bottom-bar { flex-direction: row; justify-content: space-between; } }
    .dark-footer .footer-links { display: flex; gap: 1rem; }
    .dark-footer .footer-links a:hover { color: #fff; }

    /* ─── Global white footer ─── */
    .global-footer { background: #fff; border-top: 1px solid var(--border); padding: 4rem 0 2rem; }
    .global-footer .inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
    .gf-top { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 4rem; }
    @media (min-width: 768px) { .gf-top { flex-direction: row; justify-content: space-between; } }
    .gf-brand-area .brand { margin-bottom: 1rem; }
    .gf-brand-area > p { font-size: .875rem; color: var(--text-medium); line-height: 1.625; max-width: 280px; margin-bottom: 1.5rem; }
    .social-links { display: flex; gap: 1rem; }
    .social-btn {
      width: 2.5rem; height: 2.5rem; border-radius: 50%;
      background: var(--cream); display: flex; align-items: center; justify-content: center;
      color: var(--text-main); border: none; cursor: pointer; transition: background .15s, color .15s;
    }
    .social-btn:hover { background: var(--burgundy); color: #fff; }
    .gf-links-row { display: flex; gap: 4rem; flex-wrap: wrap; }
    .gf-links-col h4 {
      font-size: .6875rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--burgundy); margin-bottom: 1rem;
    }
    .gf-links-col ul { display: flex; flex-direction: column; gap: .75rem; }
    .gf-links-col a { font-size: .875rem; color: var(--text-medium); transition: color .15s; }
    .gf-links-col a:hover { color: var(--burgundy); }
    .gf-bottom {
      border-top: 1px solid var(--border); padding-top: 2rem;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    @media (min-width: 768px) { .gf-bottom { flex-direction: row; justify-content: space-between; } }
    .gf-bottom p { font-size: .8125rem; color: var(--text-light); }
    .gf-bottom-links { display: flex; gap: 1.5rem; }
    .gf-bottom-links a { font-size: .8125rem; color: var(--text-light); transition: color .15s; }
    .gf-bottom-links a:hover { color: var(--text-main); }

    /* cover as image */
    img.article-cover { object-fit: cover; }