/*
 * Article template styles: "mw-article" design system.
 *
 * Ported from the approved matcha-article-preview.html design file, with two fixes
 * applied on top:
 * 1. The .mw-ribbon component's four colors were wrong in the preview file (a leftover
 *    generic green ramp) and have been replaced with the four approved brand colors
 *    (deep green / matcha / sage / tint).
 * 2. The cream background (--mw-paper) was lightened from #F0EBDD to #FAF8F2, matched
 *    to the --paper token in matcha-wellness-elegant-demo.html, after the darker cream
 *    was flagged as too dark once seen live.
 *
 * What's deliberately NOT duplicated here:
 * - @font-face declarations. The preview file embedded its own woff2 data for Cormorant
 *   Garamond and Josefin Sans. This site already enqueues both families (plus EB
 *   Garamond) sitewide from Google Fonts in functions.php, with the exact weights and
 *   italics this stylesheet needs (400/500/600/700 upright, 500/600 italic for
 *   Cormorant Garamond; 400/500/600 for Josefin Sans). Re-embedding them here would
 *   mean loading the same fonts twice.
 * - .fake-header / .preview-note. Those were placeholders in the preview file standing
 *   in for "your theme's real header and footer appear here." The real header.php and
 *   footer.php (topbar, logo lockup, 5-item nav, minimal footer) do that job now, so
 *   this file starts directly at the .mw-article design system.
 *
 * The color tokens below (--mw-paper, --mw-ink, --mw-matcha, --mw-deep, etc.) are the
 * article template's OWN palette, distinct from the sitewide off-white/dark-green/brass
 * palette used in header.php and the homepage sections. That's intentional and carried
 * over as-is from the approved preview, not something to "fix" to match the homepage.
 *
 * Enqueued only on singular blog posts (is_single()), see functions.php.
 */
  /* Sizes are in px on purpose: many themes set the root font size to 10px.
     Fonts: Cormorant Garamond (headlines, italic accents, body) and Josefin Sans (labels). */
  .mw-article {
    --mw-paper: #FAF8F2;      /* Cream */
    --mw-ink: #1B2417;
    --mw-muted: #4F5B49;
    --mw-matcha: #3A6526;     /* Links and accents */
    --mw-deep: #1F3A14;       /* Buttons and dark panel */
    --mw-tint: #E5ECD9;
    --mw-rule: #CAD5BC;
    --mw-card: #FFFFFF;
    --mw-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --mw-sans: "Josefin Sans", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mw-measure: 660px;
    background: var(--mw-paper); color: var(--mw-ink);
    font-family: var(--mw-serif); font-weight: 500; font-size: 22px; line-height: 1.6;
    padding-bottom: 80px; text-align: left;
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  }
  .mw-article *, .mw-article *::before, .mw-article *::after { box-sizing: border-box; }
  .mw-article img { max-width: 100%; height: auto; display: block; }
  .mw-article a { color: var(--mw-matcha); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .mw-article a:hover { text-decoration-thickness: 2px; }
  .mw-article :focus-visible { outline: 3px solid var(--mw-matcha); outline-offset: 3px; border-radius: 2px; }
  .mw-wrap { max-width: 1010px; margin: 0 auto; padding: 0 24px; }

  /* Force full-width rendering: overrides any Kadence container/sidebar layout setting
     that could otherwise constrain or left-align our own centered .mw-wrap inside a
     narrower, non-centered parent container. */
  body.single .content-area, body.single .site-main,
  body.single-post .content-area, body.single-post .site-main,
  .content-container, .site-container {
    width: 100% !important; max-width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .mw-sr { position: absolute; left: -9999px; }

  .mw-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 40; pointer-events: none; }
  .mw-progress-bar { height: 100%; width: 100%; background: var(--mw-matcha); transform-origin: left center; transform: scaleX(0); }

  /* Buttons (Josefin Sans, semibold) */
  .mw-article .mw-btn {
    display: inline-block; font-family: var(--mw-sans); font-weight: 600; font-size: 14px; line-height: 1.2;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--mw-deep); color: var(--mw-paper); border: 0; border-radius: 999px; padding: 15px 26px;
    text-decoration: none; cursor: pointer;
  }
  .mw-article .mw-btn:hover { background: var(--mw-matcha); color: #fff; }
  .mw-article .mw-btn--quiet {
    background: transparent; color: var(--mw-ink); border: 1px solid var(--mw-rule);
    font-weight: 500; padding: 9px 17px; font-size: 12.5px;
  }
  .mw-article .mw-btn--quiet:hover { background: var(--mw-tint); color: var(--mw-ink); }
  .mw-article .mw-btn--light { background: var(--mw-paper); color: var(--mw-deep); }
  .mw-article .mw-btn--light:hover { background: #fff; color: var(--mw-deep); }

  /* Breadcrumb + header */
  .mw-crumbs { font-family: var(--mw-sans); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--mw-muted); padding-top: 24px; }
  .mw-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .mw-crumbs li { margin: 0; padding: 0; }
  .mw-crumbs li + li::before { content: "/"; margin-right: 6px; color: #A9B69C; }
  .mw-crumbs a { color: var(--mw-muted); }
  .mw-crumbs [aria-current="page"] { color: var(--mw-ink); }
  .mw-head { max-width: 100%; padding: 34px 0 26px; }
  .mw-article h1.mw-title {
    font-family: var(--mw-serif); font-weight: 700; letter-spacing: -0.012em; color: var(--mw-ink);
    font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; margin: 0 0 24px; text-wrap: balance; text-transform: none;
  }
  .mw-standfirst {
    font-family: var(--mw-serif); font-style: italic; font-weight: 600; color: var(--mw-matcha);
    font-size: clamp(23px, 2.6vw, 30px); line-height: 1.32; max-width: 720px; margin: 0 0 30px; text-wrap: pretty;
  }
  .mw-byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-top: 19px;
    border-top: 1px solid var(--mw-rule); font-family: var(--mw-sans); font-weight: 500; font-size: 14.5px; color: var(--mw-muted);
  }

  /* Category archive header: kicker + intro standfirst band */
  .mw-archive-head { max-width: 900px; margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
  .mw-archive-kicker {
    font-family: var(--mw-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--mw-matcha); margin: 0 0 14px;
  }
  .mw-archive-title {
    font-family: var(--mw-serif); font-weight: 700; letter-spacing: -0.01em; color: var(--mw-ink);
    font-size: clamp(36px, 5vw, 54px); line-height: 1.05; margin: 0 0 26px; text-transform: capitalize;
  }
  .mw-archive-intro {
    background: var(--mw-tint); border-radius: 6px; padding: 26px 32px; margin: 0 0 52px;
    font-family: var(--mw-serif); font-style: italic; font-weight: 600; color: var(--mw-muted);
    font-size: clamp(18px, 2vw, 21px); line-height: 1.5; text-align: left;
  }

  /* Category archive post grid */
  .mw-archive-grid {
    max-width: 1180px; margin: 0 auto 80px; padding: 0 24px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px;
  }
  .mw-archive-card {
    background: var(--mw-card); border: 1px solid var(--mw-rule); border-radius: 8px; overflow: hidden;
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
  }
  .mw-archive-card img { aspect-ratio: 16/10; object-fit: cover; }
  .mw-archive-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .mw-archive-card-kicker { font-family: var(--mw-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mw-matcha); }
  .mw-archive-card-title { font-family: var(--mw-serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--mw-ink); margin: 0; }
  .mw-archive-card-meta { font-family: var(--mw-sans); font-weight: 500; font-size: 13.5px; color: var(--mw-muted); }
  .mw-archive-card-excerpt { font-family: var(--mw-serif); font-weight: 500; font-size: 16.5px; line-height: 1.5; color: var(--mw-muted); }
  .mw-archive-card:hover .mw-archive-card-title { color: var(--mw-matcha); text-decoration: underline; text-underline-offset: 3px; }
  .mw-author { display: flex; align-items: center; gap: 11px; color: var(--mw-ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; }
  .mw-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
  .mw-spacer { flex: 1 1 auto; }
  .mw-hero { margin: 8px 0 48px; }
  .mw-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }

  /* ---- Shared: stat strip (used on About + Wholesale) ---- */
  .mw-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; background: var(--mw-tint); border-radius: 6px; padding: 20px 0; margin: 0 0 8px; }
  .mw-stat { padding: 6px 26px; text-align: center; border-right: 1px solid var(--mw-rule); }
  .mw-stat:last-child { border-right: none; }
  .mw-stat b { display: block; font-family: var(--mw-serif); font-size: 26px; font-weight: 700; color: var(--mw-ink); line-height: 1.1; white-space: nowrap; }
  .mw-stat span { font-family: var(--mw-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-muted); white-space: nowrap; }

  /* ---- Wholesale: "why us" numbered grid ---- */
  .mw-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin: 24px 0 40px; }
  .mw-why-item .mw-why-num { font-family: var(--mw-serif); font-size: 15px; color: var(--mw-gold, #B0842B); letter-spacing: 0.1em; display: block; margin: 0 0 8px; }
  .mw-why-item h3 { font-family: var(--mw-serif); font-size: 21px; font-weight: 700; margin: 0 0 8px; color: var(--mw-ink); }
  .mw-why-item p { font-size: 16px; color: var(--mw-muted); margin: 0; }

  /* ---- Wholesale: supplier cards ---- */
  .mw-supplier { background: var(--mw-card); border: 1px solid var(--mw-rule); border-radius: 6px; margin: 0 0 28px; overflow: hidden; }
  .mw-supplier-head { padding: 18px 22px; border-bottom: 1px solid var(--mw-rule); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
  .mw-supplier-head h2 { font-size: 25px; margin: 0 0 3px; font-weight: 700; }
  .mw-supplier-region { font-family: var(--mw-sans); font-size: 13.5px; color: var(--mw-muted); margin: 0; }
  .mw-moq { background: var(--mw-deep); color: var(--mw-paper); padding: 8px 14px; text-align: center; white-space: nowrap; border-radius: 4px; }
  .mw-moq b { display: block; font-family: var(--mw-serif); font-size: 19px; line-height: 1.1; font-weight: 700; }
  .mw-moq span { font-family: var(--mw-sans); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
  .mw-certs { padding: 11px 22px; background: var(--mw-tint); border-bottom: 1px solid var(--mw-rule); display: flex; gap: 8px; flex-wrap: wrap; }
  .mw-cert { font-family: var(--mw-sans); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--mw-muted); border: 1px solid var(--mw-rule); padding: 3px 8px; background: var(--mw-card); border-radius: 3px; }
  .mw-grade-subhead { padding: 10px 22px 6px; font-family: var(--mw-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mw-gold, #8A6A24); font-weight: 700; background: var(--mw-tint); border-bottom: 1px solid var(--mw-rule); }
  .mw-grade-row { display: grid; grid-template-columns: 180px 190px minmax(0,1fr) auto; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--mw-rule); align-items: center; }
  .mw-grade-row:last-child { border-bottom: none; }
  .mw-grade-name { font-family: var(--mw-serif); font-size: 17px; font-weight: 700; line-height: 1.15; }
  .mw-grade-name small { display: block; font-family: var(--mw-sans); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-muted); font-weight: 600; margin-top: 2px; }
  .mw-grade-cultivar { font-size: 13px; color: var(--mw-muted); }
  .mw-grade-use { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .mw-grade-badge { display: inline-block; border: 1px solid var(--mw-gold, #B0842B); color: var(--mw-gold, #8A6A24); font-family: var(--mw-sans); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 2px; white-space: nowrap; }
  .mw-grade-detail { font-size: 13.5px; color: var(--mw-muted); }
  .mw-grade-detail strong { color: var(--mw-ink); font-weight: 700; }
  .mw-grade-price { font-family: var(--mw-serif); font-size: 18px; font-weight: 700; white-space: nowrap; text-align: right; }
  .mw-grade-price .mw-perkg { font-family: var(--mw-sans); font-size: 11px; font-weight: 400; color: var(--mw-muted); margin-left: 2px; }
  @media (max-width: 680px) {
    .mw-grade-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 4px 10px; }
    .mw-grade-name { grid-column: 1; grid-row: 1; } .mw-grade-price { grid-column: 2; grid-row: 1; }
    .mw-grade-cultivar { grid-column: 1 / -1; grid-row: 2; font-size: 12px; } .mw-grade-use { grid-column: 1 / -1; grid-row: 3; }
  }

  /* ---- Wholesale: sample tiers ---- */
  .mw-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 20px 0; }
  .mw-tier { background: var(--mw-card); border: 1px solid var(--mw-rule); border-radius: 6px; padding: 22px; text-align: center; }
  .mw-tier.mw-tier--feature { border: 2px solid var(--mw-matcha); }
  .mw-tier b { display: block; font-family: var(--mw-serif); font-size: 32px; font-weight: 700; line-height: 1; margin: 0 0 6px; }
  .mw-tier .mw-tier-label { display: block; font-family: var(--mw-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mw-muted); margin: 0 0 10px; }
  .mw-tier p { font-size: 14.5px; color: var(--mw-muted); margin: 0 0 16px; }
  .mw-tier .mw-pill { display: inline-block; background: var(--mw-matcha); color: #fff; font-family: var(--mw-sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 2px; margin: 0 0 12px; }

  /* ---- Wholesale: terms grid ---- */
  .mw-terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; background: var(--mw-deep); color: var(--mw-paper); border-radius: 6px; padding: 32px; }
  .mw-term b { display: block; font-family: var(--mw-serif); font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 4px; }
  .mw-term span { display: block; font-family: var(--mw-sans); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 8px; }
  .mw-term p { font-size: 14px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5; }

  /* ---- Wholesale: how-it-works steps ---- */
  .mw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; margin: 20px 0 40px; }
  .mw-step .mw-step-n { font-family: var(--mw-serif); font-size: 36px; color: var(--mw-matcha); line-height: 1; margin: 0 0 10px; }
  .mw-step h3 { font-family: var(--mw-serif); font-size: 19px; font-weight: 700; margin: 0 0 8px; }
  .mw-step p { font-size: 15.5px; color: var(--mw-muted); margin: 0; }

  /* ---- Wholesale: FAQ accordion ---- */
  .mw-faq details { border-bottom: 1px solid var(--mw-rule); padding: 16px 0; }
  .mw-faq summary { cursor: pointer; font-family: var(--mw-serif); font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; color: var(--mw-ink); }
  .mw-faq summary::-webkit-details-marker { display: none; }
  .mw-faq summary::after { content: '+'; color: var(--mw-matcha); font-size: 22px; line-height: 1; flex: 0 0 auto; }
  .mw-faq details[open] summary::after { content: '\2212'; }
  .mw-faq details p { margin: 12px 0 0; font-size: 16px; color: var(--mw-muted); }

  /* ---- About: pull-quote + values grid ---- */
  .mw-pull { font-family: var(--mw-serif); font-style: italic; font-size: 24px; color: var(--mw-deep); border-left: 3px solid var(--mw-matcha); padding: 2px 0 2px 22px; margin: 30px 0; }
  .mw-values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; background: var(--mw-deep); color: var(--mw-paper); border-radius: 6px; padding: 40px 32px; }
  .mw-values-grid h3 { font-family: var(--mw-serif); font-size: 20px; font-weight: 700; color: var(--mw-tint); margin: 0 0 8px; }
  .mw-values-grid p { font-size: 15.5px; color: rgba(255,255,255,0.82); margin: 0; }

  /* Layout */
  .mw-layout { display: block; }
  @media (min-width: 1040px) {
    .mw-layout--toc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 72px; align-items: start; }
    .mw-layout--toc .mw-aside { align-self: stretch; }
  }
.mw-toc-desktop ul { list-style: none; margin: 0; padding: 0; }
.mw-toc-desktop li { margin: 0 0 2px; padding: 0; }
.mw-toc-desktop a {
  display: block; padding: 8px 14px; border-radius: 7px;
  color: var(--mw-muted); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.35;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mw-toc-desktop a:hover { color: var(--mw-ink); background: rgba(58, 101, 38, 0.06); }
.mw-toc-desktop a[aria-current="true"] {
  background: rgba(58, 101, 38, 0.1); color: var(--mw-matcha); font-weight: 600;
}
  @media (min-width: 1040px) { .mw-layout--toc .mw-toc-desktop { display: block; } .mw-layout--toc .mw-toc-mobile { display: none; } }
  .mw-layout:not(.mw-layout--toc) .mw-aside { display: none; }

  /* Article content (the body written in the Shopify editor) */
  .mw-prose { min-width: 0; }
  .mw-prose > * { max-width: var(--mw-measure); }
  .mw-prose > .mw-wide, .mw-prose > .mw-cta, .mw-prose > .mw-author-box, .mw-prose > .mw-publisher { max-width: 100%; }
  .mw-prose p { margin: 0 0 22px; font-size: 22px; line-height: 1.6; text-wrap: pretty; color: var(--mw-ink); }
  .mw-prose p.mw-lede { font-size: 25px; line-height: 1.5; }
  .mw-prose strong { font-weight: 700; }
  .mw-prose em { font-style: italic; }
  .mw-prose h2 {
    font-family: var(--mw-serif); font-weight: 700; letter-spacing: -0.01em; color: var(--mw-ink);
    font-size: clamp(34px, 4vw, 46px); line-height: 1.08; margin: 58px 0 18px; text-wrap: balance; text-transform: none;
    scroll-margin-top: 24px;
  }
  .mw-prose h3 {
    font-family: var(--mw-serif); font-weight: 600; font-style: italic; letter-spacing: 0; color: var(--mw-matcha);
    font-size: 28px; line-height: 1.2; margin: 36px 0 10px; text-transform: none; scroll-margin-top: 24px;
  }
  .mw-prose ul, .mw-prose ol { padding-left: 24px; margin: 0 0 24px; }
  .mw-prose li { margin: 0 0 10px; padding-left: 3px; font-size: 22px; line-height: 1.55; }
  .mw-prose li::marker { color: var(--mw-matcha); }
  .mw-prose img { border-radius: 6px; }
  .mw-prose figure { margin: 36px 0; }
  .mw-prose figcaption { font-family: var(--mw-sans); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--mw-muted); margin-top: 11px; }
  .mw-prose figcaption a { color: var(--mw-muted); }
  .mw-prose sup.mw-cite { font-family: var(--mw-sans); font-weight: 600; font-size: 0.55em; line-height: 0; margin-left: 2px; }
  .mw-prose sup.mw-cite a { text-decoration: none; padding: 0 2px; }
  .mw-prose sup.mw-cite a:hover { text-decoration: underline; }

  /* Component: In short box */
  .mw-prose .mw-takeaways {
    background: var(--mw-card); border: 1px solid var(--mw-rule); border-left: 5px solid var(--mw-matcha);
    border-radius: 4px; padding: 24px 28px 12px; margin: 0 0 40px;
  }
  .mw-prose .mw-takeaways-title {
    font-family: var(--mw-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mw-matcha); margin: 0 0 14px;
  }
  .mw-prose .mw-takeaways ul { margin-bottom: 14px; }
  .mw-prose .mw-takeaways li { font-size: 20.5px; line-height: 1.5; }

  /* Component: note */
  .mw-prose .mw-note { background: var(--mw-tint); border-radius: 4px; padding: 20px 26px 6px; margin: 30px 0; }
  .mw-prose .mw-note p { font-size: 20.5px; line-height: 1.5; }

  /* Component: ingredient effect ribbon */
  .mw-prose .mw-ribbon { margin: 36px 0 44px; padding: 0; list-style: none; border-radius: 6px; overflow: hidden; }
  .mw-prose .mw-ribbon li {
    display: grid; grid-template-columns: minmax(160px, 210px) 1fr; gap: 20px; align-items: center;
    margin: 0; padding: 19px 24px; font-family: var(--mw-sans); font-weight: 500; font-size: 16px; line-height: 1.45;
    background: var(--mw-c); color: var(--mw-t);
  }
  .mw-prose .mw-ribbon li:nth-child(1) { --mw-c: #1F3A14; --mw-t: #FAF8F2; }
  .mw-prose .mw-ribbon li:nth-child(2) { --mw-c: #3A6526; --mw-t: #FAF8F2; }
  .mw-prose .mw-ribbon li:nth-child(3) { --mw-c: #8AAE78; --mw-t: #1B2417; }
  .mw-prose .mw-ribbon li:nth-child(4) { --mw-c: #E5ECD9; --mw-t: #1B2417; }
  .mw-prose .mw-ribbon strong { font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
  .mw-prose figure .mw-ribbon { margin: 0; }
  @media (max-width: 560px) { .mw-prose .mw-ribbon li { grid-template-columns: 1fr; gap: 4px; } }

  /* Component: table */
  .mw-prose .mw-table-scroll { overflow-x: auto; margin: 30px 0 14px; border: 1px solid var(--mw-rule); border-radius: 6px; background: var(--mw-card); }
  .mw-prose table { border-collapse: collapse; width: 100%; min-width: 560px; font-family: var(--mw-sans); font-weight: 500; font-size: 16px; line-height: 1.45; margin: 0; }
  .mw-prose caption { text-align: left; padding: 15px 19px; font-family: var(--mw-serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--mw-matcha); }
  .mw-prose th, .mw-prose td { text-align: left; padding: 14px 19px; vertical-align: top; border: 0; border-top: 1px solid var(--mw-rule); }
  .mw-prose thead th { font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--mw-tint); }
  .mw-prose tbody th { font-weight: 600; width: 28%; }

  /* Component: numbered steps */
  .mw-prose ol.mw-steps { list-style: none; padding: 0; counter-reset: mwstep; }
  .mw-prose ol.mw-steps li { counter-increment: mwstep; position: relative; padding: 0 0 0 54px; margin-bottom: 22px; }
  .mw-prose ol.mw-steps li::before {
    content: counter(mwstep); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%;
    background: var(--mw-deep); color: var(--mw-paper); font-family: var(--mw-sans); font-weight: 600; font-size: 15px;
    display: grid; place-items: center;
  }

  /* Component: references */
  .mw-prose .mw-refs h3 { font-size: 24px; margin: 28px 0 10px; }
  .mw-prose .mw-refs ol { font-family: var(--mw-sans); font-weight: 500; font-size: 15px; line-height: 1.5; padding-left: 28px; }
  .mw-prose .mw-refs li { font-size: 15px; line-height: 1.5; margin-bottom: 10px; overflow-wrap: anywhere; }
  .mw-prose .mw-refs li:target { background: var(--mw-tint); }

  /* Newsletter box */
  .mw-prose .mw-cta { margin-top: 64px; padding: 40px 34px; background: var(--mw-deep); color: var(--mw-paper); border-radius: 8px; }
  .mw-prose .mw-cta h2 { color: var(--mw-paper); margin: 0 0 10px; font-size: 38px; }
  .mw-prose .mw-cta p { color: var(--mw-paper); margin: 0 0 24px; max-width: 640px; opacity: 0.95; }
  .mw-prose .mw-cta .mw-form { display: flex; flex-wrap: wrap; gap: 11px; max-width: 560px; margin: 0; }
  .mw-prose .mw-cta input[type="email"] {
    flex: 1 1 230px; padding: 14px 18px; border-radius: 999px; border: 2px solid transparent;
    font: 500 16px var(--mw-sans); background: var(--mw-card); color: var(--mw-ink); margin: 0; min-height: 0; height: auto; box-shadow: none;
  }
  .mw-prose .mw-cta .mw-form-ok, .mw-prose .mw-cta .mw-form-err { margin: 0; font-family: var(--mw-sans); font-weight: 500; font-size: 16px; }

  /* Author + publisher */
  .mw-prose .mw-author-box {
    display: grid; grid-template-columns: 96px 1fr; gap: 24px; margin: 54px 0 0; padding: 29px 0;
    border-top: 1px solid var(--mw-rule); border-bottom: 1px solid var(--mw-rule);
  }
  .mw-prose .mw-author-box:not(:has(img)) { grid-template-columns: 1fr; }
  .mw-prose .mw-author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
  .mw-prose .mw-author-box h2 { margin: 0 0 4px; font-size: 30px; scroll-margin-top: 24px; }
  .mw-prose .mw-author-box p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--mw-muted); }
  .mw-prose .mw-author-box .mw-author-role { font-family: var(--mw-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--mw-matcha); margin: 0 0 10px; }
  .mw-prose .mw-author-box .mw-author-handle { font-family: var(--mw-sans); font-weight: 500; font-size: 14.5px; line-height: 1.4; margin: 10px 0 0; }
  .mw-prose .mw-publisher { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; margin: 34px 0 0; }
  .mw-prose .mw-publisher img { width: 160px; height: auto; border-radius: 0; }
  .mw-prose .mw-publisher p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--mw-muted); }
  @media (max-width: 520px) {
    .mw-prose .mw-author-box, .mw-prose .mw-publisher { grid-template-columns: 1fr; }
  }

  /* Related */
  .mw-related { margin-top: 72px; }
  .mw-related h2 { font-family: var(--mw-serif); font-weight: 700; font-size: 40px; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 22px; color: var(--mw-ink); text-transform: none; }
  .mw-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
  .mw-related li { margin: 0; padding: 0; }
  .mw-related li a { display: block; color: inherit; text-decoration: none; }
  .mw-related img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; margin-bottom: 14px; }
  .mw-rel-title { display: block; font-family: var(--mw-serif); font-weight: 700; font-size: 26px; line-height: 1.12; margin-bottom: 6px; }
  .mw-related a:hover .mw-rel-title { color: var(--mw-matcha); text-decoration: underline; text-underline-offset: 3px; }
  .mw-rel-text { display: block; }
  .mw-rel-meta { font-family: var(--mw-sans); font-weight: 500; font-size: 13.5px; color: var(--mw-muted); }
  @media (max-width: 820px) {
    .mw-related ul { grid-template-columns: 1fr; }
    .mw-related li a { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
    .mw-related li a:not(:has(img)) { grid-template-columns: 1fr; }
    .mw-related img { margin: 0; aspect-ratio: 4 / 3; }
  }

  @media (max-width: 640px) {
    .mw-article { font-size: 21px; }
    .mw-prose p, .mw-prose li { font-size: 21px; }
  }
  @media (prefers-reduced-motion: reduce) { .mw-article { scroll-behavior: auto; } }
  @media print {
    .mw-progress, .mw-aside, .mw-cta, .mw-related, .mw-btn { display: none !important; }
    .mw-layout { display: block; }
  }