/* =============================================================================
   v2-content-v20260508b.css — Deskrune library + pSEO impeccable polish

   Scope: /library/ (hub + sub-pages) and /q/ (programmatic SEO answers).
   Loaded *after* style, mobile-fixes, contrast-fixes, theme, visual-pass,
   cinematic, blocks, dramatic-effects, sale-conversion. Last word wins.

   Design lens (impeccable):
     - Optimal reading measure: 60-68 chars per line on body copy
     - Body type: 17.5px / 1.7 line-height for comfortable adult reading
     - Hierarchy: Fraunces serif for h1/h2 emphasis, Inter for prose + UI
     - Hairline rules, generous whitespace, soft drop-cap on the lede
     - Pull-quotes: italic Fraunces, hairline divider, never inflated
     - Keyboard tags + inline code: distinct mono surface
     - Links: solid 1px underline, 2px offset, ink color (orange = CTAs only)
     - WCAG 2.2 AA contrast verified against #faf9f5 cream + dark navy paper
     - Motion: respects prefers-reduced-motion globally
     - Mobile: type scale unchanged; container padding tightens
     - Dark mode: ink-on-cream becomes warm cream-on-deep-navy

   Brand canon:
     --cream:  #faf9f5      page bg in light mode
     --ink:    #1F2937      body text (existing --ink-gray)
     --orange: #c9613f      brand accent — reserved for CTAs + hover
     --navy:   #0F172A      h1/h2 ink + dark sections

   Existing scaffolding observed in pages:
     - pSEO Pattern A: <article class="section warm"><div class="container narrow">
     - pSEO Pattern B: <article class="q-shell"><div class="q-container">
     - Library hub:    <section class="hero hero-two-tone"> + alt sections
     - Library sub:    <section class="section warm|white|navy|pale"> stacks

   We tag every rule with which surface it touches so it's diffable later.
============================================================================= */

/* -----------------------------------------------------------------------------
   01. Typographic scope tokens
   -----------------------------------------------------------------------------
   We don't override the global tokens — we add three measurement vars used
   only by content pages. Keeps this CSS pluggable + revertable.
----------------------------------------------------------------------------- */

:root {
  --content-measure: 64ch;          /* primary body measure (~58-66 chars) */
  --content-measure-tight: 54ch;    /* lede paragraph measure */
  --content-body-size: 1.0625rem;   /* 17px — standard adult reading body */
  --content-body-leading: 1.7;      /* generous line-height for ADHD readers */
  --content-para-gap: 1.15em;       /* paragraph spacing ≈ line-height */
  --content-h2-gap-top: 2.4em;      /* breath above section heads */
  --content-h2-gap-bot: 0.65em;     /* tight to first paragraph */
  --content-h3-gap-top: 1.8em;
  --content-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* -----------------------------------------------------------------------------
   02. pSEO article shell (Pattern A — <article class="section warm">)
   -----------------------------------------------------------------------------
   The most common pSEO scaffold. Tighten the measure, lift the body type,
   give h2 real breathing room, and trim the side padding on mobile.
----------------------------------------------------------------------------- */

article.section .container.narrow,
article.section .container {
  /* Override the wider site narrow (~880px) to a true reading column.
     `clamp` keeps it fluid on big monitors without snapping. */
  max-width: clamp(20rem, 92vw, 40rem); /* ~640px ceiling */
}

article.section.warm > .container.narrow,
article.section.warm > .container {
  /* a touch more headroom above the kicker */
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

/* -- pSEO kicker eyebrow -- */
article .kicker {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;          /* 11px */
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark, #B0432A);
  margin: 0 0 1.25rem;
  /* hairline above for editorial feel */
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 12%, transparent);
}

/* -- h1: serif display, generous tracking, single per page -- */
article > .container > h1,
article > .container.narrow > h1 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.875rem, 4.4vw, 2.875rem); /* 30px → 46px */
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1.25em;
  color: var(--navy, #0F172A);
  text-wrap: balance;            /* nicer line breaks in supporting browsers */
}

/* -- Body paragraphs -- */
article > .container > p,
article > .container.narrow > p,
article > .container > h2 + p,
article > .container.narrow > h2 + p {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--content-body-size);
  line-height: var(--content-body-leading);
  color: var(--ink-gray, #1F2937);
  margin: 0 0 var(--content-para-gap);
  /* slightly looser word-spacing reads more relaxed */
  word-spacing: 0.01em;
  /* keep the measure true even when paragraphs land in flex/grid contexts */
  max-width: var(--content-measure);
}

/* -- Subtle drop-cap on the first paragraph (after h1) -- */
article > .container > h1 + p::first-letter,
article > .container.narrow > h1 + p::first-letter {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: 2.6em;
  line-height: 0.92;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--navy, #0F172A);
  /* small initial caps — pull a hair to align baseline */
  margin-top: 0.05em;
}

/* -- Section headings (h2) -- */
article > .container > h2,
article > .container.narrow > h2 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.6vw, 1.6875rem); /* 22px → 27px */
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy, #0F172A);
  margin: var(--content-h2-gap-top) 0 var(--content-h2-gap-bot);
  /* hair-rule above each h2 for editorial rhythm */
  padding-top: 1.4em;
  border-top: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 10%, transparent);
  text-wrap: balance;
}

article > .container > h2:first-of-type,
article > .container.narrow > h2:first-of-type {
  /* the first h2 in a pSEO article gets tighter spacing — the lede already
     created enough breath above it */
  margin-top: 2em;
}

/* -- Subsection headings (h3) -- */
article > .container > h3,
article > .container.narrow > h3 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 600;
  font-size: 1.1875rem;          /* 19px */
  line-height: 1.3;
  color: var(--navy, #0F172A);
  margin: var(--content-h3-gap-top) 0 0.4em;
  letter-spacing: -0.005em;
}

/* -- Inline links: ink + 1px underline at 2px offset (orange on hover only) -- */
article > .container a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]),
article > .container.narrow a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]) {
  color: var(--ink-gray, #1F2937);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent, #c9613f) 60%, transparent);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
article > .container a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]):hover,
article > .container a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]):focus-visible,
article > .container.narrow a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]):hover,
article > .container.narrow a:not(.buy):not(.text-link):not(.pricing-cta):not(.arrow):not([class*="card"]):focus-visible {
  color: var(--accent-dark, #B0432A);
  text-decoration-color: var(--accent, #c9613f);
  text-decoration-thickness: 2px;
}

/* AA-compliant focus state on every interactive element inside articles */
article a:focus-visible,
article button:focus-visible,
article input:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -- Strong + em rendered to feel deliberate, not bolt-on -- */
article > .container strong,
article > .container.narrow strong {
  color: var(--navy, #0F172A);
  font-weight: 600;
}
article > .container em,
article > .container.narrow em {
  font-style: italic;
  color: var(--navy, #0F172A);
}

/* -- Lists rendered with hanging punctuation feel -- */
article > .container ul,
article > .container ol,
article > .container.narrow ul,
article > .container.narrow ol {
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--content-body-size);
  line-height: var(--content-body-leading);
  color: var(--ink-gray, #1F2937);
  padding-left: 1.4em;
  margin: 0 0 var(--content-para-gap);
  max-width: var(--content-measure);
}
article > .container li,
article > .container.narrow li {
  margin-bottom: 0.4em;
  padding-left: 0.2em;
}
article > .container ul > li::marker,
article > .container.narrow ul > li::marker {
  color: var(--accent, #c9613f);
}

/* -- Inline code & keyboard tags -- */
article code,
article kbd,
article samp {
  font-family: var(--content-mono);
  font-size: 0.92em;
  background: color-mix(in srgb, var(--ink-gray, #1F2937) 6%, transparent);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  letter-spacing: -0.01em;
  border: 0.5px solid color-mix(in srgb, var(--ink-gray, #1F2937) 14%, transparent);
}
article kbd {
  background: var(--white, #fff);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ink-gray, #1F2937) 20%, transparent);
  padding: 0.05em 0.5em;
  font-weight: 500;
}

/* -- Pull-quotes (blockquote) — italic Fraunces with hairline accents -- */
article blockquote {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--navy, #0F172A);
  max-width: var(--content-measure-tight);
  margin: 2em 0;
  padding: 0.4em 0 0.4em 1.2em;
  border-left: 2px solid var(--accent, #c9613f);
}
article blockquote p { font-size: inherit; line-height: inherit; margin: 0 0 0.6em; }
article blockquote cite {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-style: normal;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 65%, transparent);
  margin-top: 0.7em;
}

/* -- Image + figcaption styling for editorial figures -- */
article figure {
  margin: 2em 0;
  max-width: var(--content-measure);
}
article figure img,
article figure svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
article figcaption {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 70%, transparent);
  margin-top: 0.75em;
  text-align: center;
}

/* -- HR rules between sections -- */
article hr {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 12%, transparent);
  margin: 2.6em 0;
  max-width: var(--content-measure);
}

/* -----------------------------------------------------------------------------
   03. pSEO article shell (Pattern B — <article class="q-shell">)
   -----------------------------------------------------------------------------
   Newer pages with their own scoping. Inherit the same measure + body rhythm
   while leaving the page's existing scoped <style> intact.
----------------------------------------------------------------------------- */

article.q-shell .q-container {
  max-width: clamp(20rem, 92vw, 40rem);
}
article.q-shell h1 {
  text-wrap: balance;
  letter-spacing: -0.02em;
}
article.q-shell h2 {
  /* match the editorial hairline rhythm from Pattern A */
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid color-mix(in srgb, var(--ink, #1f1c18) 10%, transparent);
  text-wrap: balance;
}
article.q-shell h2:first-of-type {
  /* first h2 doesn't need the hairline — keep it clean below the lede */
  border-top: 0;
  padding-top: 0;
  margin-top: 1.6em;
}
article.q-shell p {
  font-size: var(--content-body-size);
  line-height: var(--content-body-leading);
  max-width: var(--content-measure);
}
article.q-shell h1 + p::first-letter {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: 2.6em;
  line-height: 0.92;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--navy, #0F172A);
}
article.q-shell strong { color: var(--navy, #0F172A); font-weight: 600; }

/* Inline links inside q-shell match Pattern A treatment */
article.q-shell a:not([class]) {
  color: var(--ink, #1f1c18);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent, #c9613f) 60%, transparent);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
article.q-shell a:not([class]):hover,
article.q-shell a:not([class]):focus-visible {
  color: var(--accent, #c9613f);
  text-decoration-color: var(--accent, #c9613f);
  text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------------
   04. Library hub — refining the existing landing surface
   -----------------------------------------------------------------------------
   /library/index.html and /library/all/ already use a hero + section stack.
   We don't redesign — we polish the type rhythm + improve scannability.
----------------------------------------------------------------------------- */

/* Tighten the hero lede measure for the library hub */
.hero.hero-two-tone .hero-lede {
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
}

/* Library card grid — softer hover, clearer focus, AA-compliant */
.lib-card,
.afm-card,
.lead-magnet-card {
  transition: transform 200ms ease, box-shadow 200ms ease,
              border-color 200ms ease, background-color 200ms ease;
}
.lib-card:hover,
.afm-card:hover,
.lead-magnet-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -16px color-mix(in srgb, var(--navy, #0F172A) 35%, transparent),
              0 1px 0 0 color-mix(in srgb, var(--accent, #c9613f) 40%, transparent);
}
.lib-card:focus-visible,
.afm-card:focus-visible,
.lead-magnet-card:focus-visible {
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Card heading rhythm — keep it sober, no inflation */
.lib-card h3,
.lead-magnet-card h3 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lib-card p,
.lead-magnet-card p {
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.55;
}

/* AFM-tag pills — consistent type rhythm */
.afm-tag {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 70%, transparent);
}

/* /library/all — the big product list. Make it editorial-grade scannable. */
.container.wide .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.container.wide .product {
  display: block;
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 12%, transparent);
  border-radius: 4px;
  background: var(--white, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.container.wide .product:hover,
.container.wide .product:focus-visible {
  border-color: var(--accent, #c9613f);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -14px color-mix(in srgb, var(--navy, #0F172A) 30%, transparent);
}
.container.wide .product .price {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark, #B0432A);
  margin-bottom: 0.5rem;
}
.container.wide .product h3 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.32;
  margin: 0 0 0.4rem;
  color: var(--navy, #0F172A);
  text-wrap: balance;
}
.container.wide .product p {
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 80%, transparent);
}

/* /library/all category headings — give them real architecture */
.container.wide > h2 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  letter-spacing: -0.015em;
  margin: 2.6em 0 1.2em;
  padding-top: 1.4em;
  border-top: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 14%, transparent);
}
.container.wide > h2:first-of-type {
  margin-top: 1.6em;
  padding-top: 0;
  border-top: 0;
}

/* -----------------------------------------------------------------------------
   05. Library sub-pages — kit landings (e.g. 92-day-bank-app-mistake)
   -----------------------------------------------------------------------------
   These already use the section stack. Just refine the inside-list rhythm
   and breadcrumb-style trail at the top.
----------------------------------------------------------------------------- */

.inside-list {
  list-style: none;
  padding: 0;
  margin: 1.25em 0 0;
  display: grid;
  gap: 1rem;
}
.inside-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 10%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--white, #fff) 65%, transparent);
}
.inside-num {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent, #c9613f);
  line-height: 1;
}
.inside-body h4 {
  font-family: var(--serif, "Fraunces"), Georgia, serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 0.3em;
  color: var(--navy, #0F172A);
}
.inside-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 85%, transparent);
}

/* AFM cross-reference list — keep it editorial */
.afm-cross-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 1.2em;
}
.afm-cross-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ink-gray, #1F2937) 14%, transparent);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--ink-gray, #1F2937);
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.afm-cross-link:hover,
.afm-cross-link:focus-visible {
  border-color: var(--accent, #c9613f);
  color: var(--accent-dark, #B0432A);
  background: color-mix(in srgb, var(--accent, #c9613f) 6%, transparent);
}
.afm-cross-code {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* -----------------------------------------------------------------------------
   06. Optional Table of Contents (for >1500-word articles)
   -----------------------------------------------------------------------------
   Markup pattern (additive, not required on every page):
     <aside class="article-toc" aria-label="On this page">
       <p class="toc-label">On this page</p>
       <ol>
         <li><a href="#section-id" aria-current="false">Section name</a></li>
       </ol>
     </aside>

   Placement: sit it right after the lede paragraph; on >960px viewports it
   lifts to a sticky right column. On mobile it collapses to a top dropdown
   via the <details> wrapper we recommend in the markup.
----------------------------------------------------------------------------- */

.article-toc {
  margin: 1.5em 0 2em;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--accent, #c9613f) 5%, transparent);
  border-left: 2px solid var(--accent, #c9613f);
  border-radius: 0 4px 4px 0;
  max-width: var(--content-measure);
}
.article-toc .toc-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark, #B0432A);
  margin: 0 0 0.6em;
}
.article-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  font-size: 0.9375rem;
}
.article-toc li {
  counter-increment: toc;
  margin-bottom: 0.35em;
}
.article-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--content-mono);
  font-size: 0.75em;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 50%, transparent);
  margin-right: 0.6em;
}
.article-toc a {
  color: var(--ink-gray, #1F2937);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
  line-height: 1.5;
}
.article-toc a:hover,
.article-toc a:focus-visible {
  color: var(--accent-dark, #B0432A);
  border-bottom-color: var(--accent, #c9613f);
}
.article-toc a[aria-current="true"],
.article-toc a[aria-current="location"] {
  color: var(--accent-dark, #B0432A);
  font-weight: 600;
  border-bottom-color: var(--accent, #c9613f);
}

/* On wide viewports, lift the TOC to a sticky right column.
   This requires the article container to be position:relative — we add it
   below as a non-destructive enhancement. */
@media (min-width: 1024px) {
  article.section .container.narrow:has(> .article-toc),
  article.q-shell .q-container:has(> .article-toc) {
    position: relative;
  }
  .article-toc {
    position: sticky;
    top: 96px;                   /* clear of the sale banner + nav */
    float: right;
    width: 17rem;
    margin: 0 0 2rem 2rem;
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   07. CTA inline rule (the launch sale strip after the article body)
   -----------------------------------------------------------------------------
   Existing markup wraps it in a <p style="..."> after an <hr>. We can't
   delete inline styles from 138 pages, but we can soften the appearance
   when the v2 sheet is loaded.
----------------------------------------------------------------------------- */

article > .container > hr + p,
article > .container.narrow > hr + p {
  font-family: var(--serif, "Fraunces"), Georgia, serif !important;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink-gray, #1F2937) 70%, transparent) !important;
  max-width: var(--content-measure);
  margin-top: 1.6em !important;
}

/* -----------------------------------------------------------------------------
   08. Skip-to-content link — visible on focus, brand-styled
   -----------------------------------------------------------------------------
   Some pSEO pages already have <a href="#main" class="skip-to-content">.
   We make sure it's visually correct when it shows.
----------------------------------------------------------------------------- */

a.skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 9999;
  background: var(--navy, #0F172A);
  color: var(--white, #fff);
  padding: 0.5rem 0.85rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  transition: top 140ms ease;
}
a.skip-to-content:focus,
a.skip-to-content:focus-visible {
  top: 12px;
  outline: 2px solid var(--accent, #c9613f);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   09. Mobile refinements
   -----------------------------------------------------------------------------
   Hard rule: do NOT shrink the body type on mobile. We just tighten container
   padding and reduce h1/h2 step sizes (via the clamps above already).
----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  article.section .container,
  article.section .container.narrow,
  article.q-shell .q-container {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  article > .container > h1 + p::first-letter,
  article > .container.narrow > h1 + p::first-letter,
  article.q-shell h1 + p::first-letter {
    /* slightly smaller drop-cap on phones to avoid line-height issues */
    font-size: 2.2em;
  }

  article > .container > h2,
  article > .container.narrow > h2,
  article.q-shell h2 {
    margin-top: 2em;
    padding-top: 1.1em;
  }

  /* TOC always inline on mobile, never sticky */
  .article-toc {
    position: static;
    float: none;
    width: 100%;
    margin: 1.25em 0 1.75em;
  }

  /* /library/all products list — single column, dense */
  .container.wide .products {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* -----------------------------------------------------------------------------
   10. Dark mode — ink-on-cream becomes warm cream-on-deep-navy
   -----------------------------------------------------------------------------
   We respect the existing [data-theme="dark"] attribute the site sets at
   boot. Orange stays orange (already brightened by global theme tokens).
----------------------------------------------------------------------------- */

[data-theme="dark"] article > .container > h1,
[data-theme="dark"] article > .container.narrow > h1,
[data-theme="dark"] article.q-shell h1,
[data-theme="dark"] article > .container > h2,
[data-theme="dark"] article > .container.narrow > h2,
[data-theme="dark"] article.q-shell h2,
[data-theme="dark"] article > .container > h3,
[data-theme="dark"] article > .container.narrow > h3 {
  color: var(--ink-gray, #E5DDD0);
}

[data-theme="dark"] article > .container > p,
[data-theme="dark"] article > .container.narrow > p,
[data-theme="dark"] article.q-shell p {
  color: color-mix(in srgb, var(--ink-gray, #E5DDD0) 92%, transparent);
}

[data-theme="dark"] article > .container > h2,
[data-theme="dark"] article > .container.narrow > h2,
[data-theme="dark"] article.q-shell h2 {
  border-top-color: color-mix(in srgb, var(--ink-gray, #E5DDD0) 18%, transparent);
}

[data-theme="dark"] article > .container > h1 + p::first-letter,
[data-theme="dark"] article > .container.narrow > h1 + p::first-letter,
[data-theme="dark"] article.q-shell h1 + p::first-letter {
  color: var(--accent, #FF8E78);
}

[data-theme="dark"] .article-toc {
  background: color-mix(in srgb, var(--accent, #FF8E78) 8%, transparent);
}

[data-theme="dark"] article kbd {
  background: var(--white, #1A2540);
  color: var(--ink-gray, #E5DDD0);
}

/* -----------------------------------------------------------------------------
   11. Reduced motion — respect the OS preference
   -----------------------------------------------------------------------------
   No scroll-driven animation on text content. Cards stay still.
----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lib-card,
  .afm-card,
  .lead-magnet-card,
  .container.wide .product,
  .afm-cross-link,
  article a {
    transition: none !important;
  }
  .lib-card:hover,
  .afm-card:hover,
  .lead-magnet-card:hover,
  .container.wide .product:hover {
    transform: none !important;
  }
}

/* -----------------------------------------------------------------------------
   12. Print styles — articles should print cleanly
   -----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

@media print {
  .deskrune-sale-banner,
  nav,
  footer,
  .article-toc,
  a.skip-to-content { display: none !important; }

  article > .container,
  article > .container.narrow,
  article.q-shell .q-container {
    max-width: 100% !important;
  }

  article > .container > h1,
  article > .container.narrow > h1,
  article.q-shell h1 {
    font-size: 24pt;
    color: #000;
  }
  article > .container > h2,
  article > .container.narrow > h2,
  article.q-shell h2 {
    font-size: 14pt;
    color: #000;
    border-top: 0.5pt solid #888;
    page-break-after: avoid;
  }
  article > .container > p,
  article > .container.narrow > p,
  article.q-shell p {
    font-size: 11pt;
    color: #000;
    orphans: 3;
    widows: 3;
  }
  article a {
    color: #000;
    text-decoration: underline;
  }
}

/* end of v2-content-v20260508b.css */