/* ============================================================
   POTTER'S EARTHFUSION — CUSTOM CSS
   Bootstrap 5.3 is the base grid framework.
   This file: brand tokens + component overrides only.
   No layout grid here — Bootstrap handles that.
   Load order: Bootstrap → style.css
   ============================================================ */

/* ── 1. BRAND TOKENS ─────────────────────────────────────── */
:root {
    /* Core palette */
    --clay:        #7C3A1E;
    --clay-dark:   #5f2a14;
    --clay-l:      #C4856A;   /* was referenced as var(--clay-l, #C4856A) — now a real token */
    --rule:        rgba(28,18,9,.13);   /* hairline colour, previously inlined */
    --clay-pale:   rgba(124,58,30,.09);
    /* Surface ramp — single hue (38°). Saturation tapers as lightness drops,
       which is what makes a tonal ramp read as one material rather than
       three unrelated beiges. Each step is ~4 lightness points. */
    --bg:          #FDFBF8;   /* L 98.2% — the page */
    --bg-card:     #F6F2EB;   /* L 94.2% — nav, cards, raised surfaces */
    --bg-warm:     #EBE6DD;   /* L 89.5% — dividers, hover, inset blocks */
    --bg-dark:     #1C1209;
    --ink:         #1C1209;
    --ink-mid:     #3D2A1A;
    --stone:       #5E5047;   /* was #8A7A6E (3.7:1 — failed AA). Now 7.0:1 */
    --stone-light: #756558;   /* was #BDB0A6 (1.9:1 — failed badly). Now 5.1:1 */

    /* Evidence grades — semantic, shared by article, encyclopedia, verdicts */
    --grade-established: #2F5D45;
    --grade-emerging:    #3A6B8A;
    --grade-contested:   #8A6A1F;
    --grade-none:        #8A7A6E;
    --white:       #FFFFFF;   /* means white. Text on dark, and nothing else. */

    /* Legacy aliases — keeps existing Bootstrap overrides working */
    --charcoal:    var(--ink);
    --cream:       var(--bg);
    --warm:        var(--bg-card);
    --text-dark:   var(--ink-mid);

    /* Text colours — every value below passes WCAG AA on cream and on card.
       Prose sits at maximum contrast; only labels and meta step down. */
    --text-prose:  #1C1209;   /* 16.7:1 — article body. Crisp. */
    --text-body:   #2A1B0F;   /* 15.0:1 — homepage body copy */
    --text-meta:   #5E5047;   /*  7.0:1 — captions, secondary */
    --on-dark:     rgba(255,255,255,.88);   /* 14.4:1 on ink */
    --on-dark-mid: rgba(255,255,255,.72);   /*  9.8:1 on ink */
    --on-dark-low: rgba(255,255,255,.55);   /*  6.1:1 on ink */

    /* Type scale — three body sizes, root = browser default (16px).
       Nothing in body copy falls below 15px on any device. */
    --fs-prose: 1.125rem;   /* 18px — long-form article reading. The text-serif
                               stack renders optically small on Windows (Sitka/Cambria
                               have lower x-heights than Charter), so 17px under-read. */
    --fs-lead:  1.0625rem;  /* 17px — lead paragraphs */
    --fs-body:  1rem;       /* 16px — default body copy */
    --fs-small: .9375rem;   /* 15px — supporting copy, card text */
    --fs-micro: .8125rem;   /* 13px — captions, notes */

    /* Mono label tiers. Uppercase, letterspaced type reads smaller than its
       point size, so 9px and 10px were genuinely hard work. Two tiers only. */
    --fs-label:    .75rem;     /* 12px — card headings, eyebrows, breadcrumbs */
    --fs-label-sm: .6875rem;   /* 11px — meta, INCI names, dates, counters */

    --measure:     68ch;       /* reading line length for article prose */

    /* Type */
    --font-h: 'Cormorant Garamond', Georgia, serif;
    --font-b: 'DM Sans', system-ui, sans-serif;
    --font-m: 'DM Mono', monospace;
    --font-t: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;  /* text serif for long-form reading — system stack, zero load */

    /* System */
    --nav-h:  64px;
    --radius: 2px;
    --border: 1px solid rgba(124,90,60,.13);
    --ease:   cubic-bezier(.4,0,.2,1);
}

/* ── 2. BASE ─────────────────────────────────────────────── */
html  { scroll-behavior: smooth; font-size: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
body  { font-family: var(--font-b); background: var(--bg); color: var(--text-body); -webkit-font-smoothing: antialiased; line-height: 1.65; }
a     { text-decoration: none; color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-h); font-weight: 400; }
img   { max-width: 100%; display: block; }
strong { font-weight: 600; }

/* ── 3. NAV ──────────────────────────────────────────────── */
.custom-nav {
    position: fixed;                      /* Bootstrap .fixed-top, restated for ::after */
    background: var(--bg-card);           /* one step darker than the page */
    border-bottom: 1px solid transparent;
    transition: border-color .25s;
    min-height: var(--nav-h);
    padding-top: 0;                       /* Bootstrap adds .5rem; that made the rendered
    padding-bottom: 0;                       nav taller than --nav-h, so main's padding-top
                                             and any fixed offset were both wrong. */
}

/* Reading progress. Painted on the nav's own bottom edge, so it is always flush
   with the navbar no matter what --nav-h resolves to. pe.js sets --read.
   Zero-width by default, so it is invisible on pages with no .article-body. */
.custom-nav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 3px;
    width: var(--read, 0%);
    background: var(--clay-l);
    transition: width .1s linear;
    pointer-events: none;
}
/* Opaque background makes backdrop-filter a no-op — dropped, it costs paint time.
   On scroll the nav gains a hairline, not a shadow. Rule of the house. */
.custom-nav.scrolled { border-bottom-color: var(--bg-warm); }
/* flex-shrink:0 stops the flex nav from squeezing the wordmark.
   max-width:none defends against Bootstrap/img-fluid resets. */
.custom-nav .navbar-brand { flex-shrink: 0; display: flex; align-items: center; }
.custom-nav .navbar-brand img { height: 34px; width: auto; max-width: none; display: block; }
.custom-nav .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    padding: .5em 1em !important;
    transition: color .2s;
    position: relative;
}
.custom-nav .nav-link::after {
    content: '';
    position: absolute; bottom: 2px; left: 1em; right: 1em;
    height: 1px; background: var(--clay);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.custom-nav .nav-link:hover,
.custom-nav .nav-link.active { color: var(--ink); }
.custom-nav .nav-link:hover::after,
.custom-nav .nav-link.active::after { transform: scaleX(1); }

.nav-cta {
    background: var(--clay) !important;
    color: var(--white) !important;
    border-radius: var(--radius) !important;
    font-size: 0.765rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    padding: 10px 22px !important;
    transition: background .2s !important;
}
.nav-cta:hover { background: var(--clay-dark) !important; transform: none !important; }

/* ── 4. SECTION SPACING ──────────────────────────────────── */
section { padding: clamp(64px, 7vw, 96px) 0; }

/* Section rules belong to the homepage only. Reference pages (Lab Notes,
   article, encyclopedia) are one continuous document — a rule between every
   block reads as clutter, not structure. Add class="page-home" to <body>. */
.page-home section + section { border-top: var(--border); }
#hero   { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 96px; border-top: none; }
#ticker { padding: 0; border-top: var(--border); border-bottom: var(--border); }
.page-home #ticker + section { border-top: none; }   /* ticker draws its own rule — kills the 2px double hairline */

/* Lab notes page sections */
.ln-hero-section    { padding: 72px 0 52px; border-bottom: var(--border); }
.ln-controls-section { padding: 28px 0 0; }
.ln-list-section    { padding: 24px 0 80px; }

/* ── 5. SHARED TYPOGRAPHY ───────────────────────────────── */
.eyebrow {
    font-family: var(--font-m);
    font-size: 0.6975rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--clay);
    display: block;
    margin-bottom: 14px;
}
.section-title {
    font-family: var(--font-h);
    font-size: clamp(2.25rem, 4vw, 3.375rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 40px;
    letter-spacing: -.01em;
}
.section-title em { color: var(--clay); font-style: italic; }
.em-clay          { color: var(--clay); font-style: italic; }

.section-h3    { font-family: var(--font-h); font-size: 1.4625rem; font-weight: 500; margin: 32px 0 12px; color: var(--ink); line-height: 1.2; }
.section-h3.lg { font-size: 1.6312rem; margin-top: 0; margin-bottom: 16px; }
.body-stone    { color: var(--text-body); line-height: 1.8; margin-bottom: 16px; font-size: var(--fs-body); }
.section-subtext { font-size: var(--fs-body); color: var(--text-body); line-height: 1.8; margin-bottom: 16px; }

/* ── 6. HERO ─────────────────────────────────────────────── */
#hero { background: var(--bg); }

.hero-eyebrow { color: var(--clay); }
.hero-title {
    font-family: var(--font-h);
    font-size: clamp(2.7rem, 5.5vw, 4.275rem);
    font-weight: 300;
    line-height: 1.06;
    margin: 10px 0 18px;
    letter-spacing: -.01em;
}
.hero-title em { color: var(--clay); font-style: italic; }
.hero-sub {
    font-size: var(--fs-lead);
    color: var(--ink-mid);
    line-height: 1.7;
    margin-bottom: 14px;
    font-style: normal;
}
.hero-claim {
    font-size: var(--fs-small);
    line-height: 1.75;
    color: var(--text-body);
    border-left: 2px solid rgba(124,58,30,.25);
    padding-left: 16px;
    margin-bottom: 0;
}
.hero-claim strong { color: var(--ink-mid); font-weight: 600; }

.pot-wrap { position: relative; display: inline-block; }
.hero-product {
    width: 100%; max-width: 400px;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.12));
}

/* Hero spec strip */
.hero-spec { padding: 16px 0; border-top: var(--border); border-bottom: var(--border); margin: 24px 0; }
.hero-spec-item { display: flex; flex-direction: column; gap: 2px; font-size: 0.7875rem; color: var(--stone); }
.hero-spec-item strong { font-size: 1.0125rem; color: var(--ink); font-weight: 600; }

/* ── 7. EMAIL CAPTURE ────────────────────────────────────── */
.capture-box {
    background: var(--bg-card);
    border-top: 2px solid var(--clay);
    padding: 24px 26px 20px;
    margin-top: 32px;
}
.capture-label {
    font-family: var(--font-m);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 500;
    color: var(--clay);
    margin-bottom: 5px;
}
.capture-sub  { font-size: var(--fs-small); color: var(--stone); margin-bottom: 14px; }
.capture-note { font-size: var(--fs-micro); color: var(--stone-light); margin-top: 10px; margin-bottom: 0; }

.capture-input {
    height: 46px;
    border: 1px solid rgba(124,58,30,.2);
    border-radius: var(--radius);
    font-size: 0.9562rem;
    color: var(--ink);
    background: var(--bg-card);
    transition: border-color .2s;
}
.capture-input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(124,58,30,.1); outline: none; }
.capture-input::placeholder { color: var(--stone-light); }

.capture-btn {
    height: 46px;
    background: var(--clay);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-b);
    font-size: 0.81rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 0 22px;
    white-space: nowrap;
    transition: background .15s;
    cursor: pointer;
}
.capture-btn:hover { background: var(--clay-dark); }

/* ── 8. TICKER ───────────────────────────────────────────── */
.science-strip {
    background: var(--bg-dark);
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: stretch;
}
.strip-label {
    padding: 13px 24px;
    font-family: var(--font-m);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--white);
    flex-shrink: 0;
    background: var(--clay);
    display: flex;
    align-items: center;
    font-weight: 500;
}
.strip-divider { display: none; }
.strip-scroll  { overflow: hidden; flex: 1; display: flex; align-items: center; padding: 13px 0; }
.strip-text {
    display: inline-block;
    padding-left: 32px;
    font-family: var(--font-m);
    font-size: 0.765rem;
    color: var(--stone-light);
    letter-spacing: .03em;
    animation: ticker-scroll 40s linear infinite;
}
.strip-scroll:hover .strip-text { animation-play-state: paused; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── 9. CALLOUT ──────────────────────────────────────────── */
.callout {
    background: rgba(124,58,30,.05);
    border-left: 3px solid var(--clay);
    padding: 20px 24px;
    margin: 28px 0;
    line-height: 1.8;
    color: var(--ink-mid);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-h);
    font-size: 1.1813rem;
    font-style: italic;
}
.callout em { color: var(--clay); font-style: normal; font-weight: 600; }
.callout-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; font-family: var(--font-m); font-style: normal; }

/* ── 10. FACT ROWS ───────────────────────────────────────── */
.fact-row { padding: 18px 0; border-bottom: var(--border); }
.fact-row:first-child { border-top: var(--border); }
.fact-row:last-child { border-bottom: none; }
.fact-q { font-size: var(--fs-body); font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.35; }
.fact-a { font-size: var(--fs-small); line-height: 1.75; color: var(--text-body); }

/* ── 11. OUR STANDARDS ───────────────────────────────────── */
#our-standards { background: var(--bg-dark); }
.standard-eyebrow  { color: rgba(124,58,30,.9); }
.standards-title   { font-family: var(--font-h); font-size: clamp(2.25rem,4vw,3.375rem); font-weight: 300; line-height: 1.1; color: var(--white); margin-bottom: 36px; letter-spacing: -.01em; }
.standards-title em { color: #C4856A; font-style: italic; }
.standards-body    { color: var(--on-dark-mid); line-height: 1.8; margin-bottom: 18px; font-size: var(--fs-body); }
.standards-body:last-child { margin-bottom: 0; }
.standards-body strong { color: var(--white); font-weight: 600; }

.verdict-grid { display: flex; flex-direction: column; gap: 0; }
.verdict-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .15s;
}
.verdict-row:first-child { border-top: 1px solid rgba(255,255,255,.07); }
.verdict-row:hover { background: rgba(255,255,255,.04); }
.verdict-claim  {
    padding: 15px 16px;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--on-dark-low);
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex; align-items: center;
}
.verdict-result {
    padding: 15px 18px;
    font-size: var(--fs-small);
    color: var(--on-dark-mid);
    display: flex; align-items: center; gap: 12px;
    line-height: 1.5;
}
.verdict-icon {
    font-size: 0.7875rem; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.verdict-icon.yes { background: rgba(45,106,39,.25); color: #6DC267; }
.verdict-icon.no  { background: rgba(139,37,0,.3);   color: #E07070; }

/* ── 12. FOR INDIA ───────────────────────────────────────── */
#for-india { background: var(--bg-card); }

.india-row { margin-top: 40px; }   /* matches .section-title margin-bottom */
.india-row > [class*="col"] { padding: 0; }
.india-card {
    background: var(--bg-card);
    padding: 40px 32px;
    height: 100%;
    transition: background .2s;
    border-right: 2px solid var(--bg-warm);
    position: relative;
}
.india-row > [class*="col"]:last-child .india-card { border-right: none; }
.india-card:hover { background: var(--white); }
.india-card-num {
    font-family: var(--font-h);
    font-size: 3.9375rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--clay);
    opacity: .14;
}
.india-card h3  { font-family: var(--font-h); font-size: 1.35rem; font-weight: 500; margin-bottom: 14px; line-height: 1.25; color: var(--ink); }
.india-card p   { font-size: var(--fs-small); line-height: 1.75; color: var(--text-body); margin: 0; }
.india-card p strong { color: var(--ink-mid); font-weight: 600; }

@media (max-width: 767px) {
    .india-card { border-right: none; border-bottom: 2px solid var(--bg-warm); }
    .india-row > [class*="col"]:last-child .india-card { border-bottom: none; }
}

.honest-gap {
    margin-top: 2px;
    padding: 24px 28px;
    background: var(--bg-dark);
}
.honest-gap-label { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(124,58,30,.8); margin-bottom: 10px; }
.honest-gap p     { font-size: var(--fs-small); color: var(--on-dark-low); line-height: 1.75; margin: 0; }

/* ── 13. THE RITUAL ──────────────────────────────────────── */
.ritual-row { margin-top: 40px; }  /* matches .section-title margin-bottom */
.ritual-row > [class*="col"] { padding: 0; }
.ritual-card {
    background: var(--bg);
    padding: 36px 28px;
    height: 100%;
    transition: background .2s;
    border-right: 2px solid var(--bg-card);
}
.ritual-row > [class*="col"]:last-child .ritual-card { border-right: none; }
.ritual-card:hover { background: var(--white); }
.ritual-card-num {
    font-family: var(--font-h);
    font-size: 3.6rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--clay);
    opacity: .14;
}
.ritual-card h3  { font-family: var(--font-h); font-size: 1.2375rem; font-weight: 500; margin-bottom: 12px; line-height: 1.25; color: var(--ink); }
.ritual-card p   { font-size: var(--fs-small); line-height: 1.75; color: var(--text-body); margin: 0; }
.ritual-card p strong { color: var(--ink-mid); font-weight: 600; }

@media (max-width: 575px) {
    .ritual-card { border-right: none; border-bottom: 2px solid var(--bg-card); }
    .ritual-row > [class*="col"]:last-child .ritual-card { border-bottom: none; }
}
@media (min-width: 576px) and (max-width: 991px) {
    .ritual-row > [class*="col"]:nth-child(2n) .ritual-card { border-right: none; }
    .ritual-row > [class*="col"]:nth-child(n+3) .ritual-card { border-top: 2px solid var(--bg-card); }
}

/* ── 14. LAB NOTES TEASER ────────────────────────────────── */
#lab-teaser { background: var(--bg-dark); }
.lab-teaser-eyebrow { color: rgba(196,133,106,.8); }
.lab-teaser-title   { font-family: var(--font-h); font-size: clamp(2.025rem,3.5vw,3.15rem); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 12px; letter-spacing: -.01em; }
.lab-teaser-title em { color: #C4856A; font-style: italic; }
.lab-teaser-desc    { font-size: var(--fs-small); color: var(--on-dark-low); line-height: 1.75; max-width: 480px; margin: 0; }
.lab-teaser-cta {
    background: transparent !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius) !important;
    font-size: 0.7875rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    transition: background .2s, border-color .2s !important;
}
.lab-teaser-cta:hover { background: var(--clay) !important; border-color: var(--clay) !important; }

/* ── 15. LAB NOTES INDEX — reference register ────────────── */
/*  Density is authority. A table of contents, not a blog roll.
    Hairlines, no cards, no shadows, numbered entries.          */

.ln-hero-title    { font-family: var(--font-h); font-size: clamp(2.1rem,5.4vw,3.9375rem); font-weight: 300; line-height: 1.03; margin-bottom: 22px; letter-spacing: -.02em; }
.ln-hero-title em { color: var(--clay); font-style: italic; }
.ln-hero-desc     { font-size: var(--fs-body); line-height: 1.75; color: var(--text-body); max-width: 52ch; }

/* Controls */
.ln-hero-section     { padding: 56px 0 44px; }
.ln-controls-section { padding: 0; }
.ln-list-section     { padding: 0 0 90px; }

/* No borders here. The entry list draws its own rules; a border above and
   below the filter bar stacked against them into a four-line pile-up. */
.ln-controls-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 24px; }
.ln-search-wrap   { position: relative; flex: 0 1 300px; }
.ln-search-icon   { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--stone-light); font-size: 15px; pointer-events: none; }
.ln-search {
    width: 100%; padding: 11px 14px 11px 38px;
    border: 1px solid rgba(28,18,9,.28); border-radius: 0;
    background: transparent; font-family: var(--font-b);
    font-size: var(--fs-small); color: var(--ink); outline: none;
    transition: border-color .2s;
}
.ln-search::placeholder { color: var(--stone-light); }
.ln-search:focus  { border-color: var(--clay); }

.ln-filter-group  { display: flex; gap: 8px; flex-wrap: wrap; }
.ln-filter-btn {
    font-family: var(--font-m); font-size: var(--fs-label-sm); font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 9px 14px; border-radius: 0;
    border: 1px solid rgba(28,18,9,.28); background: transparent;
    color: var(--stone); cursor: pointer;
    transition: color .16s, border-color .16s, background .16s;
}
.ln-filter-btn:hover  { border-color: var(--ink); color: var(--ink); }
.ln-filter-btn.active { background: var(--clay); border-color: var(--clay); color: var(--white); }
.ln-count { margin-left: auto; font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--stone-light); }

/* The entry list */
.article-list { border-bottom: var(--border); }   /* the list draws every rule it needs */
.article-row {
    display: grid; grid-template-columns: 72px minmax(0,1fr) 130px;
    gap: 0 28px; align-items: start;
    padding: 30px 0; border-top: var(--border);
    color: var(--ink); transition: background .18s;
}
.article-row:hover { background: rgba(124,58,30,.03); }
.article-row-num   { font-family: var(--font-h); font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--stone-light); padding-top: 4px; transition: color .18s; }
.article-row:hover .article-row-num { color: var(--clay); }

.article-row-meta  { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.article-row-cat   { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--clay); }
.article-row-dot   { color: var(--stone-light); font-size: var(--fs-label); }
.article-row-date,
.article-row-read  { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--stone-light); }
.article-row-cites { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--stone-light); }

.article-row-title   { margin: 0 0 10px; font-family: var(--font-h); font-size: clamp(1.3rem,2.4vw,1.75rem); font-weight: 400; line-height: 1.2; color: var(--ink);  }
.article-row-excerpt { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--text-body); max-width: 74ch; margin: 0; }
.article-row-link    { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); text-align: right; padding-top: 8px; white-space: nowrap; }

.ln-no-results { padding: 72px 0; text-align: center; color: var(--stone); font-size: var(--fs-body); }

/* Pagination */
.ln-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 34px 0 0; }
.ln-page-info  { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-light); }
.ln-page-btns  { display: flex; gap: 0; border: 1px solid rgba(28,18,9,.28); }
.ln-page-btn {
    min-width: 40px; height: 40px; padding: 0 13px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-right: 1px solid rgba(28,18,9,.28); border-radius: 0;
    background: transparent; font-family: var(--font-m);
    font-size: var(--fs-label-sm); color: var(--stone); cursor: pointer; transition: background .15s, color .15s;
}
.ln-page-btn:last-child { border-right: none; }
.ln-page-btn:hover  { background: var(--bg-card); color: var(--ink); }
.ln-page-btn.active { background: var(--clay); color: var(--white); }
.ln-page-btn:disabled { color: var(--stone-light); cursor: default; pointer-events: none; }

@media (max-width: 900px) {
    .article-row { grid-template-columns: 46px 1fr; gap: 0 18px; padding: 24px 0; }
    .article-row-num { font-size: 1.25rem; padding-top: 2px; }
    .article-row-link { grid-column: 2; text-align: left; padding-top: 14px; }
    .ln-count { margin-left: 0; width: 100%; }
}


/* ── 16. ARTICLE PAGE — reference register ───────────────── */
.breadcrumb-wrap { padding: 22px 0 0; }
.breadcrumb-nav  { display: flex; align-items: center; gap: 9px; font-family: var(--font-m); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-light); flex-wrap: wrap; }
.breadcrumb-nav a { color: var(--clay); }
.breadcrumb-nav a:hover { border-bottom: 1px solid var(--clay); }
.breadcrumb-sep  { color: var(--stone-light); }

/* Entry header */
.article-header  { padding-top: 32px; }
.entry-index     { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.article-eyebrow { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--stone); margin: 0; }
.article-eyebrow b { color: var(--clay); font-weight: 500; }
.article-reviewed  { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-light); }

.article-cat-pill {
    display: inline-block; font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--clay);
    border: 1px solid rgba(124,58,30,.3); background: transparent;
    padding: 5px 11px; border-radius: 0; margin-bottom: 18px; transition: background .15s;
}
.article-cat-pill:hover { background: var(--clay-pale); }

.article-title    { font-family: var(--font-h); font-size: clamp(2rem,4.4vw,3.15rem); font-weight: 300; line-height: 1.05; color: var(--ink); margin-bottom: 0; letter-spacing: -.02em; }
.article-title em { color: var(--clay); font-style: italic; font-weight: 400; }

/* Direct answer — the dictionary definition of the page */
.direct-answer {
    background: var(--bg-card);
    border: none; border-left: 2px solid var(--clay);
    padding: 22px 26px; margin: 30px 0 0; border-radius: 0;
}
.direct-answer-label { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; }
.direct-answer p {
    font-family: var(--font-h); font-size: 1.3rem; font-weight: 500;
    line-height: 1.45; color: var(--ink); margin: 0; max-width: 60ch;
}
.direct-answer strong { color: var(--clay); font-weight: 600; }

/* Byline */
.article-byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: var(--border); border-bottom: none; flex-wrap: wrap; }
.byline-avatar  { width: 38px; height: 38px; border-radius: 0; border: 1px solid var(--clay); background: transparent; color: var(--clay); font-size: var(--fs-label-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-m); letter-spacing: .06em; }
.byline-info    { flex: 1; min-width: 140px; }
.byline-name    { font-family: var(--font-h); font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.byline-date    { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-light); margin-top: 2px; }
.byline-pill    { font-family: var(--font-m); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); background: transparent; border: 1px solid rgba(28,18,9,.18); padding: 5px 11px; border-radius: 0; }

/* ── In-article table of contents ──────────────────────────
   Lives in the main content, not the sidebar. Three reasons:
   the sidebar rail was hidden below 992px so phones never saw it;
   jump links inside <main> are what Google reads for sitelinks;
   and the reading progress bar already reports scroll position.
   It is also the only unbounded card — one row per <h2> — so keeping
   it out of the sticky sidebar is what keeps that sidebar shorter
   than the viewport, which is the only real fix for clipping.
──────────────────────────────────────────────────────────── */
.article-toc {
    display: block;
    border: 1px solid var(--rule);
    background: var(--bg-card);
    padding: 20px 24px 14px;
    margin-top: 32px;
}
.article-toc[hidden] { display: none; }
.article-toc-label {
    font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--stone);
    margin: 0 0 12px;
}
.article-rail { display: grid; grid-template-columns: 1fr; column-gap: 32px; }
@media (min-width: 576px) { .article-rail { grid-template-columns: 1fr 1fr; } }

.article-rail a {
    display: flex; align-items: baseline; gap: 10px;
    font-family: var(--font-t); font-size: var(--fs-body); line-height: 1.45;
    color: var(--ink-mid); padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s;
}
.article-rail a:hover { color: var(--clay); }

/* The prose — text serif, capped measure, tighter leading */
.article-body {
    font-family: var(--font-t);
    font-size: var(--fs-prose);
    line-height: 1.65;   /* larger type needs proportionally less leading, not more */
    color: var(--text-prose);
    padding-top: 44px;
    counter-reset: figure;
}
/* The measure caps the prose, not the container — so a figure can be given
   .figure-wide and use the full column while every paragraph stays at 68ch. */
.article-body > * { max-width: var(--measure); }
.article-body > figure.figure-wide { max-width: 100%; }
.article-body > p:first-of-type { font-family: var(--font-h); font-size: 1.4rem; font-weight: 500; line-height: 1.5; color: var(--ink); }
.article-body h2 {
    font-family: var(--font-h); font-size: clamp(1.35rem,2.7vw,1.85rem); font-weight: 500;
    color: var(--ink); margin: 2.4em 0 .75em; padding-top: .8em;
    border-top: 1px solid rgba(28,18,9,.28); line-height: 1.2;
}
.article-body h3 { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--clay); margin: 2.2em 0 .7em; }
.article-body p  { margin-bottom: 1.15em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body em     { font-style: italic; }
.article-body ul, .article-body ol { margin: 0 0 1.15em 1.3em; padding: 0; }
.article-body li { margin-bottom: .5em; }
.article-body blockquote { border-left: 2px solid var(--clay); margin: 2em 0; padding: 18px 24px; background: var(--bg-card); font-style: italic; color: var(--ink-mid); line-height: 1.65; }
.article-body a  { color: var(--clay); border-bottom: 1px solid rgba(124,58,30,.26); transition: border-color .15s; }
.article-body a:hover { border-color: var(--clay); }

/* Superscript citations → numbered reference list */
.article-body sup { font-family: var(--font-m); font-size: .56em; line-height: 0; vertical-align: super; }
.article-body sup a { color: var(--clay); font-weight: 500; padding: 0 1px; border-bottom: none; }

.ref-list { list-style: none; margin: 16px 0 0 !important; padding: 0; counter-reset: ref; }
.ref-list li {
    counter-increment: ref; position: relative;
    padding: 13px 0 13px 36px; border-top: var(--border);
    font-size: var(--fs-small); line-height: 1.6; color: var(--stone); margin: 0 !important;
}
.ref-list li::before { content: counter(ref); position: absolute; left: 0; top: 13px; font-family: var(--font-m); font-size: var(--fs-label-sm); color: var(--clay); }
.ref-list li:target  { background: var(--clay-pale); }
.ref-list cite { font-style: italic; color: var(--ink-mid); }

/* Evidence grades + claim ledger — shared with Encyclopedia and Verdicts */
.grade {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 4px 10px 4px 9px; border: 1px solid currentColor; white-space: nowrap;
}
.grade::before { content: ''; width: 5px; height: 5px; background: currentColor; flex-shrink: 0; }
.grade--established { color: var(--grade-established); }
.grade--emerging    { color: var(--grade-emerging); }
.grade--contested   { color: var(--grade-contested); }
.grade--none        { color: var(--grade-none); }

.ledger { border-top: 1px solid rgba(28,18,9,.28); margin-top: 8px; }
.ledger-row { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 10px 24px; padding: 17px 0; border-bottom: var(--border); align-items: start; }
.ledger-claim { font-size: var(--fs-body); color: var(--ink); line-height: 1.45; }
.ledger-claim .why { display: block; font-size: var(--fs-small); color: var(--stone); margin-top: 6px; line-height: 1.6; }
.ledger-grade { justify-self: start; padding-top: 2px; }
@media (max-width: 620px) {
    .ledger-row { grid-template-columns: 1fr; }
    .ledger-grade { order: -1; margin-bottom: 4px; }
}

/* Honest limit */
.honest-limit { background: var(--bg-card); border-left: 2px solid var(--clay); padding: 22px 26px; margin-top: 28px; }
.honest-limit-label { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin-bottom: 9px; }
.honest-limit p { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mid); margin: 0; }

/* Compare table */
.compare-table    { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: var(--fs-small); overflow-x: auto; display: block; }
.compare-table th { background: var(--ink); color: var(--white); padding: 12px 16px; text-align: left; font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; font-family: var(--font-m); }
.compare-table td { padding: 12px 16px; border-bottom: var(--border); vertical-align: top; }
.compare-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.compare-table .win  { color: var(--grade-established); font-weight: 600; }
.compare-table .lose { color: var(--stone-light); }

/* Post-article CTA — dark card. The one high-contrast block on the page. */
.article-cta { margin-top: 52px; padding: 30px 32px; background: var(--bg-dark); border: none; border-radius: 0; }
.article-cta-text h3 { font-family: var(--font-h); font-size: 1.4rem; font-weight: 300; color: #fff; margin-bottom: 8px; line-height: 1.25; }
.article-cta-text h3 em { color: #D89B72; font-style: italic; }
.article-cta-text p  { font-family: var(--font-m); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-low); line-height: 1.7; margin: 0; }
.article-cta-btn {
    background: var(--clay); color: #fff !important; border: 1px solid var(--clay);
    padding: 14px 24px; border-radius: 0; font-family: var(--font-m); font-size: .75rem;
    font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
    transition: background .15s, border-color .15s; display: inline-block;
}
.article-cta-btn:hover { background: #A04E28; border-color: #A04E28; }

/* See also */
.related-section { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(28,18,9,.28); }
.related-label   { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-bottom: 18px; }
/* Each card carries its own border. The old approach painted the grid
   container in the hairline colour and let cards cover their cells — which
   only works when the row is exactly full. With a variable number of related
   articles it leaves the container colour showing as a solid grey block. */
.related-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 10px; background: transparent; border: none; }
.related-card    { background: transparent; border: 1px solid var(--rule); padding: 17px 19px; transition: background .16s, border-color .16s; display: block; border-radius: 0; }
.related-card:hover { background: var(--bg-card); border-color: rgba(124,58,30,.4); }
.related-card-cat   { display: block; font-family: var(--font-m); font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 7px; }
.related-card-title { font-family: var(--font-h); font-size: 1.15rem; font-weight: 400; color: var(--ink); line-height: 1.25; }

/* Sidebar */
.article-sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-card    { background: var(--bg-card); border: var(--border); border-radius: 0; padding: 22px 24px; }
.sidebar-card h4 { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); margin-bottom: 16px; padding-bottom: 0; border-bottom: none; }
.sidebar-ingredient-link { display: block; padding: 14px 0; border-top: var(--border); border-bottom: none; font-family: var(--font-h); font-size: 1.15rem; color: var(--ink); line-height: 1.3; transition: color .15s; }
.sidebar-ingredient-link:first-of-type { border-top: none; padding-top: 0; }
.sidebar-ingredient-link:hover { color: var(--clay); }
.sidebar-ingredient-inci { display: block; font-family: var(--font-m); font-size: var(--fs-label-sm); color: var(--stone-light); margin-top: 4px; letter-spacing: .06em; }
.sidebar-related-link { display: block; padding: 14px 0; border-top: var(--border); border-bottom: none; font-family: var(--font-h); font-size: 1.15rem; color: var(--ink); line-height: 1.3; transition: color .15s; }
.sidebar-related-link:first-of-type { border-top: none; padding-top: 0; }
.sidebar-related-link:hover { color: var(--clay); }
.sidebar-related-cat  { display: block; font-family: var(--font-m); font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); margin-bottom: 4px; }
.sidebar-cat-tag {
    display: inline-block; font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--clay);
    border: 1px solid rgba(124,58,30,.3); padding: 5px 11px; border-radius: 0; margin: 3px 3px 3px 0;
    transition: background .15s;
}
.sidebar-cat-tag:hover { background: var(--clay-pale); }

@media (max-width: 991px) {
    .article-body { padding-top: 32px; }
}

/* ── 17. WHATSAPP FLOAT ──────────────────────────────────── */
.wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: var(--font-b); }
.wa-tooltip { background: var(--white); color: var(--ink); font-size: 0.855rem; font-weight: 500; padding: 9px 14px; border-radius: 20px 20px 4px 20px; box-shadow: 0 4px 18px rgba(0,0,0,.12); white-space: nowrap; opacity: 0; transform: translateX(10px); transition: opacity .25s, transform .25s; pointer-events: none; border-left: 3px solid var(--clay); }
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
.wa-btn { width: 56px; height: 56px; border-radius: 50%; background: #25D366; box-shadow: 0 4px 20px rgba(37,211,102,.4); display: flex; align-items: center; justify-content: center; transition: transform .2s, box-shadow .2s; position: relative; }
.wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 26px rgba(37,211,102,.55); }
.wa-btn svg { width: 30px; height: 30px; }
.wa-btn::before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(37,211,102,.3); animation: wa-pulse 2.2s ease-out infinite; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }

/* ── 18. FOOTER ──────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); color: var(--on-dark-mid); padding: 72px 0 36px; font-size: var(--fs-small); }
.site-footer h3 { font-family: var(--font-h); font-size: 1.35rem; font-weight: 400; color: var(--white); margin-bottom: 14px; }
.site-footer h4 { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 16px; }
.site-footer p  { line-height: 1.75; margin-bottom: 8px; color: var(--on-dark-mid); }
.footer-meta    { font-size: 0.765rem !important; color: var(--on-dark-low) !important; font-family: var(--font-m) !important; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a  { color: var(--on-dark-mid); font-size: 0.9225rem; transition: color .15s; }
.footer-links a:hover { color: var(--white); }
.footer-contact a { color: rgba(255,255,255,.8); transition: color .15s; }
.footer-contact a:hover { color: var(--white); }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); text-align: center; }
.footer-bottom p { font-family: var(--font-m); font-size: 0.6975rem; color: rgba(255,255,255,.2); margin: 0; }

/* ── 19. MOBILE-FIRST OVERRIDES ─────────────────────────── */
@media (max-width: 575px) {
    #hero   { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
    .ln-hero-section { padding: 48px 0 36px; }
    .wa-float { bottom: 16px; right: 16px; }
    .wa-btn   { width: 50px; height: 50px; }
    .verdict-row { grid-template-columns: 110px 1fr; }
    .verdict-claim, .verdict-result { padding: 10px 12px; font-size: 0.81rem; }
    .article-cta { text-align: center; }
    .india-card, .ritual-card { padding: 28px 20px; }
    .ln-card-inner { padding: 16px 18px; gap: 10px; }
    .compare-table th, .compare-table td { padding: 10px 12px; font-size: 0.8438rem; }
}

@media (min-width: 768px) {
    .ln-hero-section { padding: 80px 0 56px; }
}

/* ── 20. CATEGORY PAGE ───────────────────────────────────── */
.category-hero-section { padding: 48px 0 40px; border-bottom: var(--border); }
.category-description  { font-size: 0.99rem; color: var(--stone); line-height: 1.82; max-width: 640px; margin: 12px 0 0; }
.category-count-label  { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-light); padding: 28px 0 16px; }

.category-article-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 80px; }
.cat-article-card {
    display: flex; align-items: stretch;
    background: var(--white); border-radius: var(--radius);
    border: 1px solid rgba(0,0,0,.07);
    overflow: hidden; transition: box-shadow .2s, transform .18s; color: var(--ink);
}
.cat-article-card:hover { background: var(--bg-warm); color: var(--ink); }
.cat-card-inner { display: flex; gap: 16px; padding: 20px 24px; flex: 1; min-width: 0; border-left: 3px solid var(--clay); }
.cat-card-left  { flex-shrink: 0; padding-top: 3px; min-width: 22px; }
.cat-card-num   { font-family: var(--font-h); font-size: 0.8775rem; color: var(--clay); opacity: .3; user-select: none; }
.cat-card-body  { flex: 1; min-width: 0; }
.cat-card-meta  { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cat-card-category-tag { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); background: var(--clay-pale); padding: 3px 10px; border-radius: 2px; }
.cat-meta-sep   { color: rgba(0,0,0,.2); font-size: var(--fs-label); }
.cat-card-date, .cat-card-read-time { font-size: 0.7875rem; color: var(--stone); }
.cat-card-title { font-family: var(--font-h); font-size: clamp(1.1813rem,2.4vw,1.5188rem); font-weight: 400; line-height: 1.22; color: var(--ink); margin-bottom: 8px; transition: color .15s; }
.cat-article-card:hover .cat-card-title { color: var(--clay); }
.cat-card-excerpt { font-size: 0.9rem; line-height: 1.75; color: var(--stone); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-read-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7875rem; font-weight: 600; letter-spacing: .06em; color: var(--clay); transition: gap .2s; }
.cat-article-card:hover .cat-card-read-link { gap: 10px; }

@media (max-width: 575px) {
    .category-hero-section, .ingredient-hero-section { padding: 36px 0 28px; }
    .cat-card-inner { padding: 16px 18px; gap: 10px; }
}

/* ── 21. INGREDIENT PAGE ─────────────────────────────────── */
.ingredient-hero-section { padding: 48px 0 40px; border-bottom: var(--border); }
.ingredient-inci-label { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.ingredient-divider { border: none; border-top: var(--border); margin: 36px 0; }
.fact-row:first-child { border-top: var(--border); }

/* ── 22. INGREDIENT INDEX ────────────────────────────────── */
.ing-search-wrap { position: relative; width: 100%; max-width: 420px; }
.ing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px;
    background: rgba(124,90,60,.12);
    margin-top: 8px;
}
.ing-card {
    background: var(--bg);
    overflow: hidden;
    transition: background .2s;
    display: block;
    color: var(--ink);
    position: relative;
}
.ing-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--clay);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .3s var(--ease);
}
.ing-card:hover { background: var(--white); color: var(--ink); }
.ing-card:hover::before { transform: scaleY(1); }
.ing-card-inner { padding: 24px 22px; }
.ing-card-inci  { font-family: var(--font-m); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-light); margin-bottom: 8px; }
.ing-card-name  { font-family: var(--font-h); font-size: 1.4625rem; font-weight: 400; color: var(--ink); margin-bottom: 8px; transition: color .15s; }
.ing-card:hover .ing-card-name { color: var(--clay); }
.ing-card-desc  { font-size: 0.855rem; line-height: 1.65; color: var(--stone); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ing-card-link  { font-size: 0.7313rem; font-weight: 600; letter-spacing: .08em; color: var(--clay); text-transform: uppercase; transition: letter-spacing .2s; }
.ing-card:hover .ing-card-link { letter-spacing: .12em; }

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .strip-text, .wa-btn::before { animation: none; }
    *, *::before, *::after { transition: none !important; }
}

/* ── 23. LAB NOTES INDEX — ROW LAYOUT ───────────────────── */
/* Controls row — search + filters on same line */
.ln-controls-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 28px 0 0;
}
.ln-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Article list border top */
.article-list {
    border-top: var(--border);
    margin-top: 28px;
}

/* Each row = full-width clickable link */
.article-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 24px;
    padding: 36px 0;
    border-bottom: var(--border);
    color: var(--ink);
    position: relative;
    transition: padding-left .2s var(--ease);
}
.article-row::before {
    content: '';
    position: absolute;
    left: -2px; top: 0; bottom: 0;
    width: 2px;
    background: var(--clay);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s var(--ease);
}
.article-row:hover { color: var(--ink); padding-left: 6px; }
.article-row:hover::before { transform: scaleY(1); }

/* Large ghost number */
.article-row-num {
    font-family: var(--font-h);
    font-size: 2.025rem;
    font-weight: 300;
    color: var(--clay);
    opacity: .22;
    line-height: 1;
    padding-top: 4px;
    user-select: none;
    transition: opacity .2s;
    text-align: right;
}
.article-row:hover .article-row-num { opacity: .5; }

.article-row-body {}

/* Meta line */
.article-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.article-row-cat {
    font-family: var(--font-m);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clay);
}
.article-row-dot { color: var(--stone-light); font-size: var(--fs-label); }
.article-row-date, .article-row-read {
    font-size: 0.7875rem;
    color: var(--stone);
}

/* Title */
.article-row-title {
    font-family: var(--font-h);
    font-size: clamp(1.2375rem, 2.2vw, 1.6312rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);

    transition: color .15s;
}
.article-row:hover .article-row-title { color: var(--clay); }

/* Excerpt */
.article-row-excerpt {
    font-size: 0.9225rem;
    line-height: 1.78;
    color: var(--stone);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read link */
.article-row-link {
    font-family: var(--font-m);
    font-size: 0.6975rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clay);
    display: inline-block;
    transition: letter-spacing .2s;
}
.article-row:hover .article-row-link { letter-spacing: .16em; }

/* Mobile: collapse to single column */
@media (max-width: 575px) {
    .article-row { grid-template-columns: 1fr; gap: 0; padding: 28px 0; }
    .article-row-num { font-size: 1.35rem; margin-bottom: 8px; text-align: left; opacity: .18; }
    .ln-controls-row { flex-direction: column; align-items: flex-start; }
    .ln-search-wrap  { max-width: 100% !important; width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════
   LAB NOTES — Homepage Featured Articles Section
   Add this block to Public/Assets/css/style.css
   (paste after the existing #lab-teaser styles)
════════════════════════════════════════════════════════════════ */

/* Article card grid */
.lab-article-grid {
    margin-top: 0;
}

.lab-article-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px;
    background: var(--bg-dark);
    border: 1px solid rgba(245, 240, 232, 0.08);
    text-decoration: none;
    color: var(--white);
    height: 100%;
    transition: border-color 0.18s, background 0.18s;
}

.lab-article-card:hover {
    border-color: rgba(196, 64, 26, 0.45);
    background: #221810;
    text-decoration: none;
    color: var(--white);
}

/* Featured card — slightly larger title, terra left border */
.lab-article-card--featured {
    border-left: 3px solid #C4401A;
}

.lab-article-card--featured .lab-article-card__title {
    font-size: 1.1813rem;
}

/* Category pill */
.lab-article-card__cat {
    font-family: var(--font-m);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clay-l);
}

/* Title */
.lab-article-card__title {
    font-family: var(--font-h);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.3;
    color: #F5F0E8;
}

/* Excerpt */
.lab-article-card__excerpt {
    font-size: var(--fs-small);
    color: #7A6555;
    line-height: 1.65;
    flex: 1;
}

/* Meta row: read time + arrow */
.lab-article-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-m);
    font-size: var(--fs-label-sm);
    color: #7A6555;
    margin-top: 4px;
}

.lab-article-card__arrow {
    color: #C4401A;
    font-size: 0.9rem;
    transition: transform 0.15s;
}

.lab-article-card:hover .lab-article-card__arrow {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   READING PROGRESS BAR
   The bar itself is injected in show.php via inline <style>.
   No additional CSS needed here — it self-contains.
   This comment is just a reminder that the bar lives in show.php.
════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   DOT NAV — Homepage section indicator
   Desktop: vertical, right side, clear of WhatsApp button
   Mobile:  horizontal, bottom center, above WhatsApp button zone
════════════════════════════════════════════════════════════════ */

#dot-nav {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 800;
}

.dot-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
}

.dot-nav__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--clay-l, #C4856A);
    background: transparent;
    flex-shrink: 0;
    transition: background .22s, transform .22s, border-color .22s;
}

/* Active state */
.dot-nav__item.active .dot-nav__dot {
    background: var(--clay, #7C3A1E);
    border-color: var(--clay, #7C3A1E);
    transform: scale(1.4);
}

/* Label — slides in on hover and when active */
.dot-nav__label {
    font-family: var(--font-m);
    font-size: var(--fs-label-sm);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clay, #7C3A1E);
    background: var(--white, #FDFAF6);
    border: 1px solid rgba(124,58,30,.18);
    padding: 3px 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .2s, transform .2s;
}

.dot-nav__item:hover .dot-nav__label,
.dot-nav__item.active .dot-nav__label {
    opacity: 1;
    transform: translateX(0);
}

/* ── Mobile: horizontal dots, bottom center ──────────────── */
@media (max-width: 991.98px) {
    #dot-nav {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 90px;               /* above WhatsApp button */
        transform: translateX(-50%);
        margin-top: 0;
        flex-direction: row;
        gap: 12px;
        background: rgba(253,250,246,.88);
        backdrop-filter: blur(6px);
        padding: 8px 14px;
        border-radius: 20px;
        border: 1px solid rgba(124,58,30,.12);
    }

    .dot-nav__item {
        flex-direction: column;
        gap: 0;
    }

    /* Labels hidden on mobile — too cramped */
    .dot-nav__label {
        display: none;
    }

    /* Slightly larger dots on mobile for tap target */
    .dot-nav__dot {
        width: 8px;
        height: 8px;
    }

    .dot-nav__item.active .dot-nav__dot {
        transform: scale(1.5);
    }
}

/* ── 24. ARTICLE SIDEBAR STICKY ──────────────────────────────
   ONE sticky element, never two. A sticky child inside a sticky
   parent pins independently and paints over its own siblings —
   that was the overlap.

   A sticky item also keeps its slot in normal flow, so pinning
   just the Contents card would let the cards below it scroll
   underneath. So we pin the whole stack, cap it to the viewport,
   and let it scroll internally on the rare tall sidebar.

   Requires the aside column to stretch to the article's height:
   the row must NOT carry .align-items-start.
──────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    /* Two short cards only. The sidebar is now well under one viewport,
       so sticky works with no max-height, no overflow, nothing to clip.
       If a future card pushes it past the viewport, shorten the card —
       do not reach for overflow. */
    .article-sidebar { position: sticky; top: calc(var(--nav-h) + 24px); }
}


/* ── 25. ACCESSIBILITY ───────────────────────────────────── */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--ink); color: #fff; padding: 12px 20px;
    font-family: var(--font-m); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Contents rail is generated by JS; hide the shell until it has links */

/* ── 26. AUTO TABLE OF CONTENTS ──────────────────────────── */
.toc-num { font-family: var(--font-m); font-size: var(--fs-label-sm); color: var(--clay); flex-shrink: 0; }

/* ── 27. LAB NOTES H1 KICKER ─────────────────────────────── */
/*  Keeps the keyword "Lab Notes" inside the single H1 for Google
    while rendering as the eyebrow the design already had.       */
.ln-hero-kicker {
    display: block;
    font-family: var(--font-m);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 18px;
}


/* ── 28. FIGURES ─────────────────────────────────────────────
   Figures are numbered automatically by a CSS counter, so the
   caption reads "Figure 1", "Figure 2" without anyone tracking it.
   Every image needs width and height attributes: without them the
   browser cannot reserve space and the page shifts as images load,
   which Google measures as Cumulative Layout Shift.
──────────────────────────────────────────────────────────────── */
.article-body figure {
    counter-increment: figure;
    margin: 44px 0;
}
.article-body figure img,
.article-body figure svg,
.article-body p > img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    background: var(--bg-card);
}
.article-body figure.figure-diagram img,
.article-body figure.figure-diagram svg {
    padding: 24px 20px;
}

.article-body figcaption {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-b);
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--stone);
    max-width: var(--measure);
}
.article-body figcaption .fig-label {
    display: block;
    font-family: var(--font-m);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 7px;
}
.article-body figcaption .fig-label::before { content: 'Figure ' counter(figure) ' \00B7\00A0'; }
.article-body figcaption cite {
    display: block;
    margin-top: 8px;
    font-family: var(--font-m);
    font-size: var(--fs-label-sm);
    font-style: normal;
    letter-spacing: .05em;
    color: var(--stone-light);
}
.article-body figcaption cite a { border-bottom: 1px solid var(--rule); }


/* ── 29. GLOSSARY LINKS — jargon as doors into the encyclopedia ──
   Dotted underline distinguishes a "learn this term" link from a
   normal navigational link (solid underline). Same clay colour so
   it still reads as interactive. */
.glossary-link {
    color: var(--ink);
    border-bottom: 1px dotted var(--clay);
    text-decoration: none;
    cursor: help;
    transition: background .15s, border-color .15s;
}
.glossary-link:hover { background: var(--clay-pale); border-bottom-style: solid; }


/* ── 30. EDITORIAL DISCLOSURE ────────────────────────────────
   The brand admits it sells the product it writes about. This box
   is the trust signal, so it is quiet and confident, not alarmed. */
.editorial-note {
    border: 1px solid var(--rule);
    border-left: 2px solid var(--clay);
    background: var(--bg-card);
    padding: 22px 26px;
    margin: 40px 0 0;
    max-width: var(--measure);
}
.editorial-note-label {
    font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin: 0 0 10px;
}
.editorial-note p:last-child { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-mid); margin: 0; }
.editorial-note-ref {
    font-family: var(--font-m); font-size: .85em; letter-spacing: .04em;
    text-transform: uppercase; color: var(--clay);
}


/* ── 31. REVIEWER SLOT ───────────────────────────────────────
   Present but empty until a credentialed reviewer exists. Naming the
   absence is more honest than hiding it. When a reviewer is added,
   swap the mark, role and name; data-reviewer flips to "signed". */
.reviewer-slot {
    display: flex; gap: 16px; align-items: flex-start;
    border: 1px dashed var(--stone-light);
    padding: 20px 24px; margin: 20px 0 0; max-width: var(--measure);
}
.reviewer-slot[data-reviewer="signed"] { border-style: solid; border-color: var(--rule); }
.reviewer-mark {
    flex-shrink: 0; width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--stone-light); color: var(--stone);
    font-family: var(--font-h); font-size: 1.3rem;
}
.reviewer-role { font-family: var(--font-m); font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin: 0 0 5px; }
.reviewer-name { font-family: var(--font-t); font-size: var(--fs-small); color: var(--ink-mid); line-height: 1.5; margin: 0 0 6px; }
.reviewer-note { font-size: var(--fs-label-sm); line-height: 1.55; color: var(--stone); margin: 0; }


/* ── 32. EDITORIAL CHANGELOG ─────────────────────────────────
   A <details> so it stays collapsed by default — present for the
   curious reader and for crawlers, invisible clutter for everyone else. */
.changelog {
    border-top: 1px solid var(--rule);
    margin-top: 40px; padding-top: 4px; max-width: var(--measure);
}
.changelog summary {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 14px 0; cursor: pointer; list-style: none;
}
.changelog summary::-webkit-details-marker { display: none; }
.changelog-label { font-family: var(--font-m); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.changelog-hint  { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--stone-light); }
.changelog[open] .changelog-hint::after { content: ' \2014 open'; }
.changelog-list { list-style: none; margin: 0 0 14px; padding: 0; }
.changelog-list li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 12px 0; border-top: 1px solid var(--rule); }
.changelog-list time { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .06em; color: var(--clay); }
.changelog-list li > span { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-mid); }
@media (max-width: 500px) { .changelog-list li { grid-template-columns: 1fr; gap: 4px; } }


/* ── 33. GLOSSARY HOVER CARD (built by pe.js) ────────────────── */
.glossary-card {
    position: absolute; z-index: 1200; width: 300px;
    background: var(--bg-card); border: 1px solid var(--rule);
    border-top: 2px solid var(--clay);
    padding: 16px 18px; opacity: 0; transform: translateY(-4px);
    pointer-events: none; transition: opacity .14s, transform .14s;
}
.glossary-card.on { opacity: 1; transform: none; pointer-events: auto; }
.glossary-card-term { display: block; font-family: var(--font-h); font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }
.glossary-card-def  { display: block; font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-mid); }
.glossary-card-more { display: block; margin-top: 10px; font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--clay); }


/* ── 34. ABOUT THE LAB — editorial trust page ────────────────
   Same register as a Lab Note by design: the visual consistency is
   itself the message that this is one editorial system. Reuses
   .grade, .editorial-note, .changelog. Adds only layout.
──────────────────────────────────────────────────────────────── */
.lab-hero { padding: calc(var(--nav-h) + 8px) 0 8px; }
.lab-hero .headword { max-width: 16ch; }
.lab-lede {
    font-family: var(--font-h); font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 500; line-height: 1.4; color: var(--ink);
    max-width: 46ch; margin: 22px 0 0;
}
.lab-lede em { color: var(--clay); font-style: italic; }

.lab-section { padding: 52px 0; border-top: 1px solid var(--rule); }
.lab-section:first-of-type { border-top: none; }
.lab-section > .sec-head { margin-bottom: 26px; }

.lab-body { font-family: var(--font-t); font-size: var(--fs-prose); line-height: 1.65; color: var(--text-prose); max-width: var(--measure); }
.lab-body p { margin: 0 0 1.1em; }
.lab-body p:last-child { margin-bottom: 0; }
.lab-body strong { font-weight: 600; color: var(--ink); }

/* Principle cards — 2×2 hairline grid */
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 8px; }
.principle { background: var(--bg); padding: 22px 24px; }
.principle h3 { font-family: var(--font-h); font-size: 1.3rem; font-weight: 500; color: var(--ink); margin: 0 0 8px; }
.principle p  { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-mid); margin: 0; }
@media (max-width: 600px) { .principle-grid { grid-template-columns: 1fr; } }

/* Evidence-grade key — reuses the same chips as every article */
.grade-key { border-top: 1px solid var(--rule); margin-top: 8px; }
.grade-key-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.grade-key-row p { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.55; color: var(--ink-mid); margin: 0; }
@media (max-width: 500px) { .grade-key-row { grid-template-columns: 1fr; gap: 8px; } }

/* Research process — numbered vertical steps */
.process { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: step; }
.process li { counter-increment: step; position: relative; padding: 0 0 26px 52px; }
.process li::before {
    content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -2px;
    font-family: var(--font-m); font-size: var(--fs-label); color: var(--clay); letter-spacing: .06em;
}
.process li::after {
    content: ''; position: absolute; left: 11px; top: 18px; bottom: 0; width: 1px; background: var(--rule);
}
.process li:last-child { padding-bottom: 0; }
.process li:last-child::after { display: none; }
.process h3 { font-family: var(--font-h); font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 0 0 5px; }
.process p  { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-mid); margin: 0; max-width: 60ch; }

/* Team */
.team-member { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--rule); padding: 22px 24px; }
.team-member + .team-member { margin-top: 12px; }
.team-mark { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--clay); color: var(--clay); font-family: var(--font-m); font-size: var(--fs-label); letter-spacing: .06em; }
.team-member[data-status="pending"] .team-mark { border-color: var(--stone-light); color: var(--stone); border-style: dashed; }
.team-name { font-family: var(--font-h); font-size: 1.35rem; color: var(--ink); margin: 0 0 3px; }
.team-role { font-family: var(--font-m); font-size: var(--fs-label-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--clay); margin: 0 0 10px; }
.team-focus { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.6; color: var(--ink-mid); margin: 0; }

/* Correction CTA — confidence, not a sell */
.correction-cta { background: var(--bg-dark); padding: 40px 44px; margin-top: 8px; }
.correction-cta h2 { color: #fff; font-family: var(--font-h); font-size: clamp(1.6rem,3.5vw,2.3rem); font-weight: 400; margin: 0 0 12px; }
.correction-cta h2 em { color: var(--clay-l); font-style: italic; }
.correction-cta p { font-family: var(--font-t); font-size: var(--fs-small); line-height: 1.7; color: var(--on-dark-mid); max-width: 52ch; margin: 0 0 20px; }
.correction-cta a { font-family: var(--font-m); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid var(--white); padding: 13px 22px; display: inline-block; transition: background .15s, color .15s; }
.correction-cta a:hover { background: #fff; color: var(--ink); }