/*
Theme Name: RiseWell
Author: Azemuldin Hussain
Author URI: https://risewell.men/about/
Description: Classic editorial theme for a UK men's self improvement publication, covering body, mind, relationships, family and work.
Version: 1.4.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: risewell
Domain Path: /languages
Update URI: false
Tags: blog, e-commerce, one-column, custom-menu, featured-images, translation-ready, wide-blocks
*/

/*
 * NOTES ON THE HEADER ABOVE, so it does not drift back.
 *
 * Update URI: false is load bearing. The slug "risewell" is short and generic,
 * and without this header a theme of the same name appearing on wordpress.org
 * could be offered to this site as an update and overwrite the whole thing.
 *
 * Theme URI is deliberately absent rather than pointing at the home page. The
 * guidelines want it to be a page about the theme, no such page exists, and a
 * URI that just repeats Author URI is worse than none.
 *
 * The tags are the ones the code can actually prove. Dropped from an earlier
 * list: "news" (nothing news specific here, and subject tags are capped at
 * three), "two-columns" (no template calls get_sidebar, see sidebar.php), and
 * "custom-colors" (the palette is a fixed token layer, with no customiser
 * control behind it). Do not add "accessibility-ready" without running the
 * formal audit, or "custom-logo" unless the uploaded logo is actually rendered.
 */

/* ==========================================================================
   CONTENTS
   0.  Token layer — mirrored from design/tokens.css v0.4 "First Light, lifted"
   1.  Compatibility aliases + scheme refinements
   2.  Reset & base
   3.  Accessibility furniture
   4.  Layout: .wrap, sections
   5.  Masthead, nav, strapline
   6.  Covers + sunrise
   7.  Lead feature, side items, folio, pill
   8.  Card grid
   9.  Pillar strip
   10. Promise band (dark + .band--light)
   11. Newsletter (+ .news--light), shop, buttons — THE ACCENT SPLIT
   12. Article template
   13. WordPress core classes
   14. Ad system — .rw-ad family (compliance styling)
   15. Commercial & compliance blocks — .rw-affiliate-notice / .rw-ownership-notice
       / .rw-aff / .rw-disclose / .rw-pro
   16. Responsive
   ========================================================================== */

/* ==========================================================================
   0. TOKEN LAYER — mirrored from design/tokens.css (v0.4)
   ========================================================================== */

/* ==========================================================================
   RiseWell design tokens — v0.4 "First Light, lifted"
   ==========================================================================
   The mark is unchanged: a woodcut rising sun — half-disc on a horizon line,
   thick round rays, no gradients. v0.4 keeps First Light and fixes what the
   9 Aug 2026 sector research measured (RESEARCH-FINDINGS.md §2):

     1. LIFT THE PAPER.  #FAF7F0 is now the primary reading surface — articles,
        indexes, shop. Calico #F2EDE3 keeps its hex but is demoted to bands and
        insets. The surface you read long-form on is now the lightest surface
        on the page, as it is at every comparable publisher.
     2. UN-INVERT THE CARDS.  The old #FBF9F4 card fill was LIGHTER than the
        page ground. Deleted. Editorial cards are paper on a calico ground,
        separated by a hairline.
     3. SPLIT THE ACCENT.  Verdigris means EDITORIAL. Dawn gold means COMMERCE.
        One accent doing both jobs bakes in an ASA failure — the ASA has ruled
        against commercial units that mimic editorial styling.
     4. FIX THE WCAG FAILURES.  Verdigris on pine was 2.37:1 — every masthead,
        footer, newsletter and promise-band link was non-compliant IN LIGHT
        MODE, and the whole of dark mode was broken. Sea glass #95D6BF is the
        fix. Four of the five pillar colours also failed AA and are darkened.
     5. HALVE THE DARK CHROME.  Masthead and footer stay pine; the newsletter
        and promise band re-render on calico (.news--light / .band--light).

   Every pair below was computed, not eyeballed (WCAG 2.x relative luminance).

   Production webfonts — TWO families, not three:
     display : "Besley"         — never below 20px (slabs clog)
     body    : "Source Serif 4" — article body 19px/1.6 desktop, 18px mobile
   Archivo is RETIRED in v0.4: three web fonts is an LCP liability on a
   text-first site, and LCP/CLS gate the traffic that clears the ad-network
   thresholds. Labels/folios/buttons/prices/nav are Source Serif 4 caps with
   letter-spacing. Email fallback (Outlook-safe): Georgia throughout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HARD PROHIBITIONS — compliance and accessibility rules, not taste.

   1. Dawn gold (--rw-dawn) is NEVER text, icon, border, rule or focus ring on
      a light ground. 2.09:1 on Paper, 1.91:1 on Calico. Use --rw-gold-ink
      (5.32:1 on Paper) for prices, "Ad" chips and any small gold type.
      On light grounds dawn gold is a FILL ONLY: commerce CTA fill, the mark's
      disc and rays, ::selection, illustration.
   2. NEVER white on dawn gold — 2.23:1. Gold CTAs always take --rw-ink.
   3. NEVER verdigris on any pine value — 2.37:1 on pine-deep, 2.14:1 on the
      dark ground, 1.79:1 on pine-raised. Every link and button on pine, and
      every link in dark mode, is --rw-sea-glass.
   4. NEVER full-strength calico as dark-mode body text. 14.25:1 causes
      halation for astigmatic readers (~27% of this audience). Dark-mode body
      text is --rw-dim-calico.
   5. Do NOT copy sector button practice — Tom's Guide's affiliate CTA is
      2.77:1 and fails.
   6. Verdigris is EDITORIAL interactive only: inline links (always
      underlined), text buttons, focus rings, active nav. Dawn gold is
      COMMERCE CTA fill only: buy, add-to-cart, affiliate buttons. A commerce
      unit must never be able to pass as editorial furniture, and an editorial
      link must never be able to pass as paid placement.
   7. Ad containers are NOT cards: no fill, no radius, full-bleed to the
      column edge, a hairline above and below, >=48px vertical margin, and an
      "Advertisement" label in --rw-ink-muted. A faint label is a statutory
      exposure under the DMCCA 2024 regime, not a style choice.
   8. Carried forward from v0.3: the sun never floats (always on its horizon);
      no gradients or glow on the mark; verdigris is never a page ground;
      Besley never below 20px; commerce semantics (sale, error, valid) never
      borrow either accent.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   PALETTE REPLACED 8 September 2026 (theme 1.4.0).

   The raw values below are generated by tools/make_theme_palette.py and applied by
   tools/apply_theme_palette.py. Do not hand edit them: run the generator, which measures every
   pairing and refuses to emit a palette with a failing one, then re-apply.

   The two-layer structure is unchanged. Rules reference the semantic layer (--rw-bg, --rw-text,
   --rw-accent, --rw-band), the semantic layer references these raw values, and nothing else moved.
   Reverting the rebrand is putting the old raw values back.

   The grounds are the logo's own inks, #092D30 and #FAF4E8, so a logo master never shows an edge
   against the surface behind it.

   READ THE COMMENTS BELOW FOR THE REASONS, NOT THE NUMBERS. Every rule they describe still holds:
   two accents that mean different things, no small gold type on a light ground, nothing white on
   the gold fill, the editorial accent never on the chrome, dark-mode body text never at full
   strength. The specific hex values and ratios some of them quote are from the pre-rebrand palette
   and are historical. The current measured figures are printed by the generator.
   -------------------------------------------------------------------------- */

:root {
  /* --- GROUNDS ---------------------------------------------------------- */
  --rw-paper:       #FAF4E8;  /* PRIMARY READING SURFACE: articles, indexes, shop  */
  --rw-calico:      #F7EDD9;  /* BANDS AND INSETS ONLY — never the paragraph      */
  --rw-inset-deep:  #F3E5C9;  /* table headers, pressed insets (ink 12.98:1)      */
  --rw-card-white:  #FFFFFF;  /* COMMERCE/PRODUCT CARDS ONLY                      */

  /* --- INKS ------------------------------------------------------------- */
  --rw-ink:         #092B2E;  /* body text, headings — 15.63:1 on Paper           */
  --rw-ink-muted:   #135E64;  /* bylines, captions, THE "ADVERTISEMENT" LABEL —
                                 7.88:1 on Paper. Stops the drift to grey #666.   */
  --rw-dim-calico:  #F7EEDC;  /* DARK-MODE BODY TEXT — 10.48:1 on the dark ground */

  /* --- EDITORIAL ACCENT (verdigris family) ------------------------------ */
  --rw-verdigris:      #17727A;  /* inline links, always underlined — 6.55:1 Paper */
  --rw-verdigris-deep: #104E54;  /* hover/visited, pressed, pillar h1s — 9.35:1    */
  --rw-sea-glass:      #9BC1D5;  /* EVERY link/button on pine + ALL dark-mode
                                    links. 10.01:1 on pine-deep. THE v0.4 FIX.     */
  --rw-sea-glass-brt:  #BFD7E4;  /* hover on pine / in dark — 11.95:1 on pine-deep */

  /* --- COMMERCE ACCENT (dawn gold family) ------------------------------- */
  --rw-dawn:        #EBA125;  /* COMMERCE CTA FILL (with --rw-ink, 7.49:1), the
                                 mark's disc and rays, ::selection. FILL ONLY.    */
  --rw-dawn-press:  #E39615;  /* CTA hover/pressed fill — ink 5.68:1              */
  --rw-dawn-brt:    #EEB14A;  /* the sun after dark; large display on pine        */
  --rw-gold-ink:    #8D5D0D;  /* prices, "Ad" chips, small gold TYPE on light —
                                 5.32:1 on Paper. Use this, never --rw-dawn.      */

  /* --- PILLARS — all five darkened in v0.4; four of five failed AA ------- */
  --rw-pillar-body:          #924A2B;  /* was #A65A3A (4.34:1 FAIL) — now 5.42:1  */
  --rw-pillar-mind:          #34637C;  /* was #4E6E86                — now 5.42:1  */
  --rw-pillar-relationships: #8B447E;  /* was #B07818 (3.25:1 FAIL) — now 5.27:1  */
  --rw-pillar-family:        #39674B;  /* was #4C7A63 (4.21:1 FAIL) — now 5.25:1  */
  --rw-pillar-work:          #4E6438;  /* was #6A705F (4.39:1 FAIL) — now 5.73:1  */

  /* --- LINES ------------------------------------------------------------ */
  --rw-hairline:      #628284;  /* borders, rules, AD-SLOT SEPARATORS — 3.26:1 on
                                   Paper, 3.49:1 on white                          */
  --rw-hairline-band: #628284;  /* the same line drawn ON calico — #948871 lands
                                   at 2.99:1 there, 0.01 under the non-text floor  */

  /* --- PINE ------------------------------------------------------------- */
  --rw-pine-deep:   #092D30;  /* CHROME: masthead and footer ONLY (two bands)     */
  --rw-pine-ground: #0B393D;  /* dark-mode page ground — lifted from #14211B      */
  --rw-pine:        #0E464B;  /* dark-mode raised surfaces; also the display type
                                 on the light calico bands (10.77:1 on calico)    */
  --rw-band-mute:   #869378;  /* muted type on any pine — 7.86:1 on pine-deep     */
  --rw-rule-dark:   #ABBCC5;  /* rules/borders on any pine — 3.18:1 on the
                                 raised surface, the tightest case                */

  /* ======================================================================
     SEMANTIC TOKENS — components use ONLY these, never the raw hexes above.
     ====================================================================== */
  --rw-bg:            var(--rw-paper);
  --rw-surface:       var(--rw-paper);        /* editorial cards — paper, NOT
                                                 the deleted #FBF9F4            */
  --rw-inset:         var(--rw-calico);       /* callouts, pull-quotes, tables  */
  --rw-inset-2:       var(--rw-inset-deep);
  --rw-surface-commerce: var(--rw-card-white);
  --rw-index-ground:  var(--rw-calico);       /* the ground behind index cards  */
  --rw-index-pad:     22px;
  --rw-text:          var(--rw-ink);
  --rw-text-mute:     var(--rw-ink-muted);
  --rw-rule:          var(--rw-hairline);
  --rw-rule-inset:    var(--rw-hairline-band);/* a hairline drawn ON calico     */
  --rw-band:          var(--rw-pine-deep);    /* masthead + footer chrome       */
  --rw-band-text:     var(--rw-calico);
  --rw-band-link:     var(--rw-sea-glass);    /* NEVER verdigris here           */
  --rw-band-rule:     var(--rw-rule-dark);
  --rw-band-light:    var(--rw-calico);       /* newsletter + promise band      */
  --rw-band-light-text:   var(--rw-pine);     /* pine display type — 10.77:1    */
  --rw-band-light-accent: var(--rw-gold-ink); /* the accent stop, NOT --rw-dawn */
  --rw-accent:        var(--rw-verdigris);      /* EDITORIAL interactive        */
  --rw-accent-deep:   var(--rw-verdigris-deep);
  --rw-accent-on-pine: var(--rw-sea-glass);
  --rw-accent-ink:    var(--rw-paper);          /* type on a verdigris fill     */
  --rw-cta:           var(--rw-dawn);           /* COMMERCE fill                */
  --rw-cta-press:     var(--rw-dawn-press);
  --rw-cta-ink:       var(--rw-ink);            /* never white                  */
  --rw-cta-type:      var(--rw-gold-ink);       /* commerce TYPE on light       */
  --rw-sun:           var(--rw-dawn);           /* illustrative fill only       */
  --rw-field:         var(--rw-paper);
  --rw-field-rule:    var(--rw-hairline);
  --rw-ad-ground:     transparent;              /* ads are never card-shaped    */
  --rw-notice-bg:     var(--rw-card-white);
  --rw-notice-ink:    var(--rw-ink);
  --rw-notice-rule:   var(--rw-ink-muted);

  /* --- TYPE ------------------------------------------------------------- */
  --rw-font-display: Besley, Rockwell, "Roboto Slab", Georgia, serif;
  --rw-font-body:    "Source Serif 4", Charter, Cambria, Georgia, serif;
  /* v0.4: the label face IS the body face, set in caps with tracking.
     Archivo is retired. The token is kept so nothing that names it breaks. */
  --rw-font-label:   "Source Serif 4", Charter, Cambria, Georgia, serif;
  --rw-font-label-alt: Besley, Rockwell, "Roboto Slab", Georgia, serif;
  --rw-label-track:  .1em;
  --rw-label-weight: 600;

  --rw-size-label: 0.8125rem;
  --rw-size-body:  1.1875rem;   /* 19px desktop */
  --rw-size-body-sm: 1.125rem;  /* 18px mobile  */
  --rw-leading:    1.6;
  --rw-size-stand: 1.3125rem;
  --rw-size-h3: 1.5rem; --rw-size-h2: 2rem; --rw-size-h1: 2.75rem; --rw-size-hero: 4.25rem;

  --rw-radius: 5px; --rw-space: 8px;
  --rw-measure: 68ch;       /* 66-72ch target */
  --rw-measure-cap: 80ch;   /* hard cap       */
  --rw-shadow: 0 1px 2px rgba(34, 29, 22, 0.06), 0 4px 14px rgba(34, 29, 22, 0.04);
}

/* --------------------------------------------------------------------------
   DARK MODE — the pre-dawn world, lifted.
   Ground #1A2A23 (not #14211B), chrome stays #14211B, raised #21382F,
   body text dim calico, every link sea glass.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --rw-bg:               var(--rw-pine-ground);
    --rw-surface:          var(--rw-pine);
    --rw-inset:            var(--rw-pine);
    --rw-inset-2:          var(--rw-pine-deep);
    --rw-surface-commerce: var(--rw-pine);   /* no white cards after dark */
    --rw-index-ground:     transparent;
    --rw-index-pad:        0px;
    --rw-text:             var(--rw-dim-calico);
    --rw-text-mute:        var(--rw-band-mute);
    --rw-rule:             var(--rw-rule-dark);
    --rw-rule-inset:       var(--rw-rule-dark);
    --rw-accent:           var(--rw-sea-glass);
    --rw-accent-deep:      var(--rw-sea-glass-brt);
    --rw-accent-ink:       var(--rw-pine-ground);
    --rw-band-light:       var(--rw-pine);
    --rw-band-light-text:  var(--rw-dim-calico);
    --rw-band-light-accent: var(--rw-dawn-brt);
    --rw-cta-type:         var(--rw-dawn-brt);
    --rw-sun:              var(--rw-dawn-brt);
    --rw-field:            var(--rw-pine-deep);
    --rw-field-rule:       var(--rw-rule-dark);
    --rw-notice-bg:        var(--rw-pine-deep);
    --rw-notice-ink:       var(--rw-dim-calico);
    --rw-notice-rule:      var(--rw-rule-dark);
    --rw-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.30);

    /* Pillar inks are darkened for a light ground; on pine they need lifting.
       Real values, not a brightness() filter. */
    --rw-pillar-body:          #D8987C;  /* 5.78:1 on the dark ground */
    --rw-pillar-mind:          #9BC1D5;  /* 6.72:1 */
    --rw-pillar-relationships: #CB96C2;  /* 6.59:1 */
    --rw-pillar-family:        #75B48E;  /* 7.21:1 */
    --rw-pillar-work:          #92B073;  /* 6.74:1 */
  }
}

:root[data-theme="dark"], .theme-dark {
  --rw-bg:               var(--rw-pine-ground);
  --rw-surface:          var(--rw-pine);
  --rw-inset:            var(--rw-pine);
  --rw-inset-2:          var(--rw-pine-deep);
  --rw-surface-commerce: var(--rw-pine);
  --rw-index-ground:     transparent;
  --rw-index-pad:        0px;
  --rw-text:             var(--rw-dim-calico);
  --rw-text-mute:        var(--rw-band-mute);
  --rw-rule:             var(--rw-rule-dark);
  --rw-rule-inset:       var(--rw-rule-dark);
  --rw-accent:           var(--rw-sea-glass);
  --rw-accent-deep:      var(--rw-sea-glass-brt);
  --rw-accent-ink:       var(--rw-pine-ground);
  --rw-band-light:       var(--rw-pine);
  --rw-band-light-text:  var(--rw-dim-calico);
  --rw-band-light-accent: var(--rw-dawn-brt);
  --rw-cta-type:         var(--rw-dawn-brt);
  --rw-sun:              var(--rw-dawn-brt);
  --rw-field:            var(--rw-pine-deep);
  --rw-field-rule:       var(--rw-rule-dark);
  --rw-notice-bg:        var(--rw-pine-deep);
  --rw-notice-ink:       var(--rw-dim-calico);
  --rw-notice-rule:      var(--rw-rule-dark);
  --rw-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.30);
  --rw-pillar-body:          #D8987C;
  --rw-pillar-mind:          #9BC1D5;
  --rw-pillar-relationships: #CB96C2;
  --rw-pillar-family:        #75B48E;
  --rw-pillar-work:          #92B073;
}

:root[data-theme="light"], .theme-light {
  --rw-bg:               var(--rw-paper);
  --rw-surface:          var(--rw-paper);
  --rw-inset:            var(--rw-calico);
  --rw-inset-2:          var(--rw-inset-deep);
  --rw-surface-commerce: var(--rw-card-white);
  --rw-index-ground:     var(--rw-calico);
  --rw-index-pad:        22px;
  --rw-text:             var(--rw-ink);
  --rw-text-mute:        var(--rw-ink-muted);
  --rw-rule:             var(--rw-hairline);
  --rw-rule-inset:       var(--rw-hairline-band);
  --rw-accent:           var(--rw-verdigris);
  --rw-accent-deep:      var(--rw-verdigris-deep);
  --rw-accent-ink:       var(--rw-paper);
  --rw-band-light:       var(--rw-calico);
  --rw-band-light-text:  var(--rw-pine);
  --rw-band-light-accent: var(--rw-gold-ink);
  --rw-cta-type:         var(--rw-gold-ink);
  --rw-sun:              var(--rw-dawn);
  --rw-field:            var(--rw-paper);
  --rw-field-rule:       var(--rw-hairline);
  --rw-notice-bg:        var(--rw-card-white);
  --rw-notice-ink:       var(--rw-ink);
  --rw-notice-rule:      var(--rw-ink-muted);
  --rw-shadow: 0 1px 2px rgba(34, 29, 22, 0.06), 0 4px 14px rgba(34, 29, 22, 0.04);
  --rw-pillar-body:          #924A2B;
  --rw-pillar-mind:          #34637C;
  --rw-pillar-relationships: #8B447E;
  --rw-pillar-family:        #39674B;
  --rw-pillar-work:          #4E6438;
}

/* --------------------------------------------------------------------------
   RETIRED IN v0.4 — kept as aliases so nothing that still names them breaks.
   Do not use these in new work.
     --rw-chalk     #FBF9F4  the inverted card fill. Deleted; now Paper.
     --rw-harness   #6A5744  captions. Superseded by --rw-ink-muted.
     --rw-patina    #8AC8B8  dark accent. Superseded by --rw-sea-glass.
     --rw-bootblack #221D16  same colour, renamed --rw-ink.
   Retired in v0.3: Gansey navy #2B3945.
   -------------------------------------------------------------------------- */
:root {
  --rw-chalk:     var(--rw-paper);
  --rw-harness:   var(--rw-ink-muted);
  --rw-patina:    var(--rw-sea-glass);
  --rw-bootblack: var(--rw-ink);
}

/* ==========================================================================
   1. COMPATIBILITY ALIASES + SCHEME REFINEMENTS
   The approved mockup (and therefore any inline `style="--pc:var(--p-body)"`
   attribute ported into the templates) uses short token names. These alias
   onto the canonical --rw-* tokens above. Because var() resolves lazily, the
   scheme-dependent aliases follow whichever scheme is in force; they are
   repeated inside the [data-theme] blocks so a theme class applied below the
   root element still resolves correctly.

   inc/template-tags.php emits `var(--p-<slug>, var(--rw-pillar-<slug>, #hex))`,
   so re-pointing --rw-pillar-* per scheme (above) reaches the inline styles
   too — no filter hacks needed in v0.4.
   ========================================================================== */

:root {
  /* Static brand colours — never re-point per scheme */
  --calico: var(--rw-calico);
  --paper: var(--rw-paper);
  --chalk: var(--rw-chalk);
  --bootblack: var(--rw-ink);
  --ink: var(--rw-ink);
  --ink-muted: var(--rw-ink-muted);
  --harness: var(--rw-harness);
  --pine: var(--rw-pine);
  --pine-deep: var(--rw-pine-deep);
  --verdigris: var(--rw-verdigris);
  --verdigris-deep: var(--rw-verdigris-deep);
  --sea-glass: var(--rw-sea-glass);
  --patina: var(--rw-patina);
  --dawn: var(--rw-dawn);
  --dawn-brt: var(--rw-dawn-brt);
  --gold-ink: var(--rw-gold-ink);
  --hairline: var(--rw-hairline);
  --band-mute: var(--rw-band-mute);

  /* Pillar shorthands, as used by the mockup's inline styles */
  --p-body: var(--rw-pillar-body);
  --p-mind: var(--rw-pillar-mind);
  --p-rel: var(--rw-pillar-relationships);
  --p-fam: var(--rw-pillar-family);
  --p-work: var(--rw-pillar-work);

  /* Type shorthands */
  --f-display: var(--rw-font-display);
  --f-body: var(--rw-font-body);
  --f-label: var(--rw-font-label);

  /* Scheme-dependent shorthands */
  --bg: var(--rw-bg);
  --surface: var(--rw-surface);
  --inset: var(--rw-inset);
  --text: var(--rw-text);
  --mute: var(--rw-text-mute);
  --rule: var(--rw-rule);
  --accent: var(--rw-accent);
  --cta: var(--rw-cta);
  --sun: var(--rw-sun);
  --shadow: var(--rw-shadow);

  /* Theme-local additions the tokens file does not carry */
  --rw-band-field: var(--rw-pine-deep);   /* form field ground inside bands    */
  --rw-band-field-rule: var(--rw-rule-dark);
  /* Contained, not full bleed, and this is a deliberate choice.
     Text led publications cap their width: full bleed on a 27 inch monitor
     turns the card grid into five or six across and makes the page read like
     a dashboard rather than a paper. 1120px was simply too tight on modern
     screens, so this is widened rather than removed. The footer and every
     other band uses this same token, so they all line up. */
  --rw-wrap: 1320px;
  --rw-gutter: clamp(24px, 3vw, 48px);
  --rw-inner: 680px;                      /* article measure container ~72ch   */
}

/* re-declared so a theme class below :root still resolves the shorthands */
:root[data-theme="dark"], .theme-dark,
:root[data-theme="light"], .theme-light {
  --bg: var(--rw-bg); --surface: var(--rw-surface); --inset: var(--rw-inset);
  --text: var(--rw-text); --mute: var(--rw-text-mute); --rule: var(--rw-rule);
  --accent: var(--rw-accent); --cta: var(--rw-cta); --sun: var(--rw-sun);
  --shadow: var(--rw-shadow);
  --p-body: var(--rw-pillar-body);
  --p-mind: var(--rw-pillar-mind);
  --p-rel: var(--rw-pillar-relationships);
  --p-fam: var(--rw-pillar-family);
  --p-work: var(--rw-pillar-work);
}

/* Tell the UA which schemes we actually support, so form controls and
   scrollbars are painted to match rather than guessed. */
:root { color-scheme: light; }  /* was 'light dark'; the site is pinned to
   light via data-theme on <html>, and a mismatched color-scheme would still
   render form controls and scrollbars dark. */
:root[data-theme="light"], .theme-light { color-scheme: light; }
:root[data-theme="dark"], .theme-dark { color-scheme: dark; }

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--rw-bg);
  color: var(--rw-text);
  font-family: var(--rw-font-body);
  /* v0.4: 19px desktop. The sector median is 18px and this audience crosses
     the presbyopia threshold, so 18px is the floor, not the target. */
  font-size: var(--rw-size-body);
  line-height: var(--rw-leading);
  margin: 0;
  /* Belt and braces against a horizontally scrolling page. `clip` (not
     `hidden`) so position:sticky / the mobile adhesion unit keep working. */
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rw-font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h4, h5, h6 { line-height: 1.25; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover .t, a:hover.t { text-decoration: underline; text-underline-offset: 3px; }

/* Long words / URLs must never push the page sideways */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, figcaption, blockquote, td, th {
  overflow-wrap: anywhere;
  word-break: normal;
}

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
img { display: block; }
iframe, embed, object, video { border: 0; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--rw-rule);
  margin: 28px 0;
}

/* Dawn gold as a FILL with ink type — 7.49:1. Permitted; gold as type is not. */
::selection {
  background: var(--rw-dawn);
  color: var(--rw-ink);
}

/* --------------------------------------------------------------------------
   THE LABEL VOICE (v0.4)
   Archivo is gone. Labels, folios, buttons, prices, nav items and kickers are
   Source Serif 4 in caps with tracking. Serif caps at small sizes need the
   extra weight and the extra letter-spacing to stay countable, so both are
   raised relative to the old sans setting.
   -------------------------------------------------------------------------- */
.label,
.rw-label {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

/* ==========================================================================
   3. ACCESSIBILITY FURNITURE
   ========================================================================== */

/* Verdigris is the editorial focus ring: 6.55:1 on Paper, 6.00:1 on Calico,
   7.01:1 on a white commerce card — all well over the 3:1 non-text floor. */
:focus-visible {
  outline: 2px solid var(--rw-accent);
  outline-offset: 2px;
}
/* On pine, verdigris is 2.37:1 — a hard failure. Sea glass takes over
   (10.01:1). Gold is NOT used as a focus ring anywhere in v0.4. */
.mast :focus-visible,
.strap :focus-visible,
.band :focus-visible,
.news :focus-visible,
.site-footer :focus-visible,
footer.site-footer :focus-visible,
body > footer :focus-visible {
  outline-color: var(--rw-sea-glass);
}
/* ...but the calico bands are a light ground again, so they take verdigris. */
.band--light :focus-visible,
.news--light :focus-visible {
  outline-color: var(--rw-accent);
}

.screen-reader-text,
.sr-only {
  border: 0;
  clip-path: inset(50%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  white-space: nowrap;
  word-wrap: normal;
}
.screen-reader-text:focus,
.sr-only:focus {
  background: var(--rw-bg);
  border: 1px solid var(--rw-rule);
  border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow);
  clip-path: none;
  clip: auto;
  color: var(--rw-accent);
  display: block;
  font-family: var(--rw-font-label);
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 1000;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--rw-bg);
  color: var(--rw-accent);
  font-family: var(--rw-font-label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 12px 20px;
  border: 1px solid var(--rw-rule);
  border-radius: 0 0 var(--rw-radius) 0;
  box-shadow: var(--rw-shadow);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* header.php ships the skip link as `.skip-link .screen-reader-text`, so the
   focused presentation is declared for the combination explicitly rather than
   left to whichever of the two rules happens to be last. */
.skip-link:focus,
.skip-link:focus-visible,
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  clip-path: none;
  clip: auto;
  display: block;
  height: auto;
  width: auto;
  overflow: visible;
  margin: 0;
  white-space: nowrap;
  background: var(--rw-bg);
  color: var(--rw-accent);
  border: 1px solid var(--rw-rule);
  border-radius: 0 0 var(--rw-radius) 0;
  box-shadow: var(--rw-shadow);
  font-family: var(--rw-font-label);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  top: 0;
  left: 0;
  outline: 2px solid var(--rw-accent);
  outline-offset: -2px;
  z-index: 1000;
}

/* The skip link's destination is <main tabindex="-1">; moving focus there
   programmatically must not paint a ring around the whole page. */
[tabindex="-1"]:focus { outline: none; }

/* Anything scrolled to via a skip link or in-page anchor clears the
   masthead rather than hiding under it. */
[id] { scroll-margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.wrap {
  max-width: var(--rw-wrap);
  margin-inline: auto;
  padding-inline: var(--rw-gutter);
  width: 100%;
}

/* The main landmark. Templates give it .wrap where the content is measured;
   full-bleed sections (band, footer) live outside it. */
.rw-main { display: block; }
.rw-main:focus { outline: none; }

.sect { padding: 44px 0 8px; }

.sect-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rw-rule);
  padding-bottom: 8px;
  margin-bottom: 22px;
}
.sect-head .label { color: var(--rw-text-mute); }
.sect-head h2 {
  font-size: var(--rw-size-h3);
}
.sect-head a {
  color: var(--rw-accent);
  font-family: var(--rw-font-label);
  font-size: 13px;
  font-weight: var(--rw-label-weight);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sect-head a:hover { color: var(--rw-accent-deep); }

/* The empty state — every archive/search view needs one that doesn't look
   like a bug. Calico inset, per the v0.4 demotion. */
.rw-empty {
  --rw-rule: var(--rw-rule-inset);
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  padding: 28px 26px;
  margin: 28px 0;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-empty h2 { font-size: var(--rw-size-h3); }
.rw-empty p { color: var(--rw-text-mute); margin-top: 10px; }

/* ==========================================================================
   5. MASTHEAD, NAV, STRAPLINE
   One of the two surviving dark bands. Every interactive thing in here is
   sea glass — verdigris on pine is 2.37:1 and was failing in LIGHT mode.
   ========================================================================== */

.mast {
  background: var(--rw-pine-deep);
  color: var(--rw-calico);
}
.mast .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 14px;
  min-width: 0;
}
.logo svg { display: block; flex: none; }
.logo img { display: block; height: 37px; width: auto; }
/* risewell_logo() renders the mark inline; these are the three variants. */
.rw-logo { display: block; flex: none; }
.rw-logo-mark { width: 48px; height: 48px; }
.rw-logo-lockup { width: 44px; height: 37px; }
.rw-logo-stacked { display: inline-flex; }
.logo .word {
  font-family: var(--rw-font-display);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: .04em;
  color: var(--rw-calico);
  line-height: 1;
}
/* WordPress custom-logo, if the owner sets one, sits in the same slot. */
.custom-logo-link { display: inline-flex; align-items: flex-end; }
.custom-logo { max-height: 40px; width: auto; }

.nav {
  display: flex;
  gap: 24px;
  font-family: var(--rw-font-label);
  font-size: 13px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  flex-wrap: wrap;
  align-items: flex-end;
}
/* wp_nav_menu() emits a <ul>; the mockup used bare <a>s. Both are supported. */
.nav ul {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: flex-end;
}
.nav li { position: relative; }
.nav a {
  color: var(--rw-band-mute);   /* 7.86:1 on pine-deep */
  padding-bottom: 16px;
  position: relative;
  display: inline-block;
}
.nav a:hover {
  color: var(--rw-sea-glass);   /* 10.01:1 — the interactive tone on pine */
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Active item — the cresting sun. Half-disc breaking the horizon rule.
   The label goes calico (14.25:1); the disc is a gold FILL, never gold type. */
.nav .on,
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav .current-post-ancestor > a,
.nav .current-menu-parent > a,
.nav [aria-current="page"],
.nav [aria-current="true"] {
  color: var(--rw-calico);
}
.nav .on::after,
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after,
.nav .current-menu-ancestor > a::after,
.nav .current-post-ancestor > a::after,
.nav .current-menu-parent > a::after,
.nav [aria-current="page"]::after,
.nav [aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 12px;
  height: 6px;
  transform: translateX(-50%);
  background: var(--rw-dawn-brt);
  border-radius: 6px 6px 0 0;
}

/* v0.4: was a hardcoded #2C3E34 — a retired v0.3 value that survived the
   palette pass. It is 1.46:1 on pine #14211B (all but invisible) and is the
   last non-token hex in this file. --rw-band-rule is the token for a rule
   drawn on any pine ground: #748478, 4.21:1 on pine chrome, and dimmer than
   the .stack .line rule (--rw-band-mute, 7.86:1) already used in the footer. */
.mast-rule {
  border: 0;
  border-top: 1px solid var(--rw-band-rule);
  margin: 0;
}

.strap {
  background: var(--rw-pine-deep);
  color: var(--rw-band-mute);
}
.strap .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
}
.strap .tag { color: var(--rw-calico); }
/* Gold as type is permitted here and only here on a light-mode page: this is
   a pine ground, where dawn gold is 7.44:1. */
.strap .tag .s { color: var(--rw-dawn-brt); }
.strap a { color: var(--rw-sea-glass); }

/* ==========================================================================
   6. COVERS + SUNRISE
   The gradient cover stands in for a featured image. The sun always sits on
   its horizon — it never floats, per the token contract.
   ========================================================================== */

.cov {
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--rw-pine) 55%, var(--cov2, var(--rw-pillar-family)));
}
.cov::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 16px;
  width: var(--sunw, 34px);
  height: calc(var(--sunw, 34px) / 2);
  border-radius: var(--sunw, 34px) var(--sunw, 34px) 0 0;
  background: var(--rw-dawn);
  animation: rw-sunrise 900ms cubic-bezier(.22, .72, .28, 1) both;
}

/* The sunrise: the disc crests its horizon once, on arrival. */
@keyframes rw-sunrise {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cov::after { animation: none; transform: none; opacity: 1; }
}

/* A real featured image replaces the gradient; the sun stands down. */
.cov.has-image { background: var(--rw-pine); }
.cov.has-image::after { content: none; }
.cov img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   7. LEAD FEATURE, SIDE ITEMS, FOLIO, PILL
   ========================================================================== */

.lead {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  padding-top: 36px;
}
.feat { display: block; min-width: 0; }
.feat .cov { height: 320px; --sunw: 52px; }
.feat .folio { margin-top: 14px; }
.feat h1 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 8px; }
.feat .dek {
  font-family: var(--rw-font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--rw-text-mute);
  margin-top: 10px;
  max-width: 60ch;
}

.folio {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
}
.folio b { font-weight: var(--rw-label-weight); }
.folio time { color: inherit; font-variant-numeric: tabular-nums; }

.side { display: flex; flex-direction: column; min-width: 0; }
.side .item {
  padding: 14px 0;
  border-bottom: 1px solid var(--rw-rule);
  display: block;
}
.side .item:first-child { padding-top: 0; }
.side .item::after { content: ""; display: block; clear: both; }
.side h3 { font-size: 19px; margin-top: 6px; }
.side .cov {
  height: 74px;
  float: right;
  width: 104px;
  margin-left: 14px;
  --sunw: 22px;
}

.pill { color: var(--pc, var(--rw-text-mute)); }
.pill::before { content: "■ "; font-size: 9px; vertical-align: 2px; }

/* Pillar colour hooks by slug, so templates can use a class instead of an
   inline custom property if they prefer. Both the element-level form and the
   `rw-pillar-<slug>` body class that single.php/archive.php add are honoured,
   which is what lets .rw-pro and .pillar-head tint themselves with no inline
   style at all. All five hexes were darkened in v0.4 — four failed AA. */
.pillar-body,          .rw-pillar-body          { --pc: var(--rw-pillar-body); }
.pillar-mind,          .rw-pillar-mind          { --pc: var(--rw-pillar-mind); }
.pillar-relationships, .rw-pillar-relationships { --pc: var(--rw-pillar-relationships); }
.pillar-family,        .rw-pillar-family        { --pc: var(--rw-pillar-family); }
.pillar-work,          .rw-pillar-work          { --pc: var(--rw-pillar-work); }

/* Byline / date furniture from risewell_posted_on(). */
.posted-on,
.rw-posted-on {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
}
.posted-on a,
.rw-posted-on a { color: inherit; }
.posted-on time,
.rw-posted-on time { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   8. CARD GRID
   v0.4: editorial cards are PAPER on a CALICO ground, separated by a
   hairline. The old #FBF9F4 fill was lighter than the page ground and
   inverted what every comparable publisher does — it is gone.
   In dark mode the index ground collapses to the page ground and the cards
   are the raised surface, so the relationship survives the inversion.
   ========================================================================== */

.grid {
  --rw-rule: var(--rw-rule-inset);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 22px;
  background: var(--rw-index-ground);
  padding: var(--rw-index-pad);
  border-radius: 8px;
}
.card {
  background: var(--rw-surface);
  border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card .cov { height: 130px; border-radius: 0; }
.card .pad {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card h3 { font-size: 19px; line-height: 1.25; }
.card .dek { font-size: 15px; color: var(--rw-text-mute); line-height: 1.5; }

/* ==========================================================================
   9. PILLAR STRIP
   ========================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
.pillar {
  border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  background: var(--rw-inset);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--pc, var(--rw-rule-inset));
  min-width: 0;
}
.pillar .nm {
  font-family: var(--rw-font-label);
  font-size: 13px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
}
.pillar .ct { font-size: 14px; color: var(--rw-text-mute); }

/* Archive header — the pillar page's own furniture, same system. */
.pillar-head {
  border-bottom: 1px solid var(--rw-rule);
  border-top: 3px solid var(--pc, var(--rw-accent));
  padding: 22px 0 18px;
  margin-bottom: 26px;
}
.pillar-head h1 { font-size: clamp(26px, 3.4vw, 38px); }
.pillar-head .dek {
  font-family: var(--rw-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--rw-text-mute);
  margin-top: 10px;
  max-width: 60ch;
}

/* ==========================================================================
   10. PROMISE BAND
   The dark form (.band) is kept intact for any view that still wants it.
   .band--light is the v0.4 default the templates emit: calico ground, pine
   display type, a 2px pine rule and a verdigris button. It must still read
   as a deliberate feature, not a flattened box — hence the rule, the inset
   ground and the generous vertical rhythm.
   ========================================================================== */

.band {
  background: var(--rw-pine-deep);
  color: var(--rw-calico);
  margin-top: 44px;
}
.band .wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
}
.band svg { display: block; }
.band .promise {
  font-family: var(--rw-font-display);
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  text-wrap: balance;
}
.band .promise .s { color: var(--rw-dawn-brt); }
.band p.sub {
  color: var(--rw-band-mute);
  font-size: 16px;
  margin-top: 10px;
  max-width: 56ch;
}
.band a.more {
  color: var(--rw-sea-glass);       /* NOT verdigris — 2.37:1 on pine */
  font-family: var(--rw-font-label);
  font-size: 13px;
  font-weight: var(--rw-label-weight);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  margin-top: 12px;
}
.band a.more:hover { color: var(--rw-sea-glass-brt); }

/* --- .band--light — the calico promise band ------------------------------ */
.band--light {
  --rw-rule: var(--rw-rule-inset);
  background: var(--rw-band-light);
  color: var(--rw-text);
  border-top: 2px solid var(--rw-band-light-text);
  border-bottom: 2px solid var(--rw-band-light-text);
}
.band--light .promise {
  color: var(--rw-band-light-text);   /* pine on calico — 10.77:1 */
}
/* Gold on calico is 1.91:1 and BANNED as type. Gold ink is 4.88:1. */
.band--light .promise .s { color: var(--rw-band-light-accent); }
.band--light p.sub { color: var(--rw-text-mute); }
.band--light a.more { color: var(--rw-accent); }
.band--light a.more:hover { color: var(--rw-accent-deep); }
/* The mark keeps its gold disc: a fill, not type. */
.band--light svg { color: var(--rw-band-light-text); }

/* ==========================================================================
   11. NEWSLETTER + SHOP, BUTTONS
   ==========================================================================
   THE ACCENT SPLIT. This is a compliance requirement, not styling.

     verdigris  = EDITORIAL interactive — inline links (always underlined),
                  text buttons, focus rings, active nav, the newsletter
                  subscribe button.
     dawn gold  = COMMERCE CTA FILL with #221D16 ink — buy, add-to-cart,
                  affiliate buttons, "view in shop".

   The ASA has ruled against commercial units that mimic editorial styling.
   One accent doing both jobs bakes in a failure, so the two families never
   trade places and gold never appears as type on a light ground.
   ========================================================================== */

.duo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  padding: 44px 0 0;
}

/* --- the dark newsletter block, kept for any view that still wants it ---- */
.news {
  background: var(--rw-pine-deep);
  color: var(--rw-calico);
  border-radius: 6px;
  padding: 28px;
  min-width: 0;
}
.news h3 { font-size: 23px; }
.news p { color: var(--rw-band-mute); font-size: 16px; margin-top: 8px; }
.news .row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.news input {
  flex: 1 1 180px;
  min-width: 0;
  border-radius: 4px;
  border: 1px solid var(--rw-band-field-rule);
  background: var(--rw-band-field);
  color: var(--rw-dim-calico);
  padding: 11px 14px;
  font-family: var(--rw-font-body);
  font-size: 16px;
}
.news input::placeholder { color: var(--rw-band-mute); opacity: 1; }
.news .fine { color: var(--rw-band-mute); }
.news a { color: var(--rw-sea-glass); text-decoration: underline; text-underline-offset: 3px; }

/* --- .news--light — the calico newsletter block -------------------------- */
/* Still a deliberate feature: an inset ground, a 2px pine rule across the
   top, pine display type, and a verdigris (EDITORIAL) button. */
.news--light {
  --rw-rule: var(--rw-rule-inset);
  background: var(--rw-band-light);
  color: var(--rw-text);
  border: 1px solid var(--rw-rule-inset);
  border-top: 2px solid var(--rw-band-light-text);
  border-radius: 0 0 6px 6px;
}
.news--light h3 { color: var(--rw-band-light-text); }
.news--light p { color: var(--rw-text-mute); }
.news--light .fine { color: var(--rw-text-mute); }
.news--light input {
  background: var(--rw-field);
  border-color: var(--rw-field-rule);
  color: var(--rw-text);
}
.news--light input::placeholder { color: var(--rw-text-mute); opacity: 1; }
.news--light a { color: var(--rw-accent); }
.news--light a:hover { color: var(--rw-accent-deep); }
/* The subscribe button is EDITORIAL, so it is verdigris even if the template
   still carries the old .btn-sun class. Gold here would read as paid. */
.news--light .btn,
.news--light .btn-sun,
.news--light button[type="submit"] {
  background: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-accent-ink);
}
.news--light .btn:hover,
.news--light .btn-sun:hover,
.news--light button[type="submit"]:hover {
  background: var(--rw-accent-deep);
  border-color: var(--rw-accent-deep);
  color: var(--rw-accent-ink);
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  font-family: var(--rw-font-label);
  font-size: 15px;
  font-weight: var(--rw-label-weight);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
  border: 1.5px solid transparent;
  display: inline-block;
  text-align: center;
  line-height: 1.3;
}

/* COMMERCE fill — dawn gold with ink. NEVER white on gold (2.23:1). */
.btn-sun,
.btn-cta,
.btn-commerce,
.rw-btn-buy {
  background: var(--rw-cta);
  border-color: var(--rw-cta);
  color: var(--rw-cta-ink);
}
.btn-sun:hover,
.btn-cta:hover,
.btn-commerce:hover,
.rw-btn-buy:hover {
  background: var(--rw-cta-press);
  border-color: var(--rw-cta-press);
  color: var(--rw-cta-ink);
}

/* EDITORIAL fill — verdigris on light, sea glass in dark. */
.btn-edit,
.btn-accent {
  background: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-accent-ink);
}
.btn-edit:hover,
.btn-accent:hover {
  background: var(--rw-accent-deep);
  border-color: var(--rw-accent-deep);
}

/* EDITORIAL outline. */
.btn-line {
  background: transparent;
  color: var(--rw-accent);
  border-color: var(--rw-accent);
}
.btn-line:hover {
  background: var(--rw-accent);
  color: var(--rw-accent-ink);
  border-color: var(--rw-accent);
}
/* On any pine band the outline goes sea glass — verdigris is 2.37:1 there. */
.mast .btn-line,
.band:not(.band--light) .btn-line,
.news:not(.news--light) .btn-line,
.site-footer .btn-line,
body > footer .btn-line {
  color: var(--rw-sea-glass);
  border-color: var(--rw-sea-glass);
}
.mast .btn-line:hover,
.band:not(.band--light) .btn-line:hover,
.news:not(.news--light) .btn-line:hover,
.site-footer .btn-line:hover,
body > footer .btn-line:hover {
  background: var(--rw-sea-glass);
  color: var(--rw-pine-deep);
}

.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --- the shop card — COMMERCE, so white ground and gold CTA -------------- */
.shop {
  border: 1px solid var(--rw-rule);
  border-radius: 6px;
  background: var(--rw-surface-commerce);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--rw-shadow);
  min-width: 0;
}
.shop h3 { font-size: 22px; }
.shop .dek { font-size: 16px; color: var(--rw-text-mute); }
.shop .label { color: var(--rw-text-mute); }
/* Every button inside a commerce card is a commerce CTA, whichever class the
   template happens to carry. */
.shop .btn,
.shop .btn-line,
.rw-commerce .btn,
.rw-commerce .btn-line {
  background: var(--rw-cta);
  border-color: var(--rw-cta);
  color: var(--rw-cta-ink);
}
.shop .btn:hover,
.shop .btn-line:hover,
.rw-commerce .btn:hover,
.rw-commerce .btn-line:hover {
  background: var(--rw-cta-press);
  border-color: var(--rw-cta-press);
  color: var(--rw-cta-ink);
}

/* Prices are commerce TYPE, so gold ink (5.32:1) — never dawn gold. */
.price,
.rw-price,
.woocommerce-Price-amount {
  font-family: var(--rw-font-label);
  font-weight: var(--rw-label-weight);
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--rw-cta-type);
  font-variant-numeric: tabular-nums;
}
.fine { font-size: 13.5px; color: var(--rw-text-mute); line-height: 1.5; }

/* Generic form fields elsewhere on the site (search, comments-off contact) */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"],
input[type="password"], textarea, select {
  background: var(--rw-field);
  color: var(--rw-text);
  border: 1px solid var(--rw-field-rule);
  border-radius: 4px;
  padding: 10px 13px;
  font-family: var(--rw-font-body);
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  max-width: 100%;
}
textarea { width: 100%; }
.search-form, .rw-search, .rw-searchform {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  max-width: 34rem;
}
.search-form input[type="search"],
.rw-search input[type="search"],
.rw-search-field,
.rw-searchform input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}
.search-form button, .rw-search button, .rw-searchform button {
  font-family: var(--rw-font-label);
  font-size: 15px;
  font-weight: var(--rw-label-weight);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 11px 18px;
  cursor: pointer;
  border: 1.5px solid var(--rw-accent);
  background: var(--rw-accent);
  color: var(--rw-accent-ink);
}
.search-form button:hover, .rw-search button:hover, .rw-searchform button:hover {
  background: var(--rw-accent-deep);
  border-color: var(--rw-accent-deep);
}

/* ==========================================================================
   12. ARTICLE TEMPLATE
   Body 19px/1.6 desktop, 18px mobile. Measure 66-72ch with a hard 80ch cap.
   The reading column sits DIRECTLY ON PAPER — no card fill behind it.
   ========================================================================== */

.art-divider {
  background: var(--rw-inset);
  border-top: 1px solid var(--rw-rule-inset);
  border-bottom: 1px solid var(--rw-rule-inset);
  margin-top: 56px;
}
.art-divider .wrap { padding: 12px var(--rw-gutter); }

.article { padding: 44px 0 12px; }
.article .inner {
  max-width: var(--rw-inner);
  margin: 0 auto;
  min-width: 0;
}
.article h1 { font-size: clamp(28px, 4vw, 40px); margin-top: 10px; }
.article .dek {
  font-family: var(--rw-font-display);
  font-style: italic;
  font-size: 21px;
  color: var(--rw-text-mute);
  margin-top: 12px;
}
.article .cov { height: 280px; margin-top: 24px; --sunw: 52px; }
.article .body {
  margin-top: 26px;
  font-size: var(--rw-size-body);
  line-height: var(--rw-leading);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.article .body p { max-width: min(var(--rw-measure), var(--rw-measure-cap)); }

/* Body headings inside the article flow */
.article .body h2 { font-size: 28px; margin-top: 14px; }
.article .body h3 { font-size: 22px; margin-top: 8px; }
.article .body h4 {
  font-family: var(--rw-font-label);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
}
.article .body ul,
.article .body ol {
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
  margin: 0;
  padding-left: 1.35em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article .body li::marker { color: var(--rw-accent); }
/* Inline editorial links are ALWAYS underlined verdigris. */
.article .body a:not(.btn):not(.rw-aff) {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article .body a:not(.btn):not(.rw-aff):hover,
.article .body a:not(.btn):not(.rw-aff):visited {
  color: var(--rw-accent-deep);
}

/* Mockup's inline article furniture (kept 1:1; .rw-* aliases in section 15) */
.disclose {
  border-top: 1px solid var(--rw-rule);
  border-bottom: 1px solid var(--rw-rule);
  padding: 12px 2px;
  font-family: var(--rw-font-body);
  font-size: 15px;
  color: var(--rw-text-mute);
  line-height: 1.6;
  margin: 8px 0;
}
.disclose b {
  font-family: var(--rw-font-label);
  color: var(--rw-text);
  text-transform: uppercase;
  letter-spacing: var(--rw-label-track);
  font-size: 12.5px;
  font-weight: var(--rw-label-weight);
}

.aff {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pull-quotes are a CALICO INSET in v0.4 — one of the places calico still
   belongs. The rule is gold INK (4.88:1 on calico), never dawn gold: gold as
   a rule on a light ground is prohibited. */
.pull {
  background: var(--rw-inset);
  border-left: 3px solid var(--rw-cta-type);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  font-family: var(--rw-font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.4;
  max-width: 56ch;
}

.pro {
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-left: 3px solid var(--pc, var(--rw-pillar-body));
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
}
.pro b {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
}

.related {
  border-top: 1px solid var(--rw-rule);
  margin-top: 26px;
  padding-top: 14px;
}
.related .label { color: var(--rw-text-mute); }
.related ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16.5px;
}
.related a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.related a:hover { color: var(--rw-accent-deep); }

/* Sources list — evidence-led means the references are part of the design. */
.rw-sources {
  border-top: 1px solid var(--rw-rule);
  margin-top: 26px;
  padding-top: 14px;
  font-size: 15.5px;
  color: var(--rw-text-mute);
  line-height: 1.6;
}
.rw-sources > .label,
.rw-sources h2,
.rw-sources h3 {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
}
.rw-sources ol,
.rw-sources ul {
  margin: 10px 0 0;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-sources li::marker { color: var(--rw-text-mute); font-variant-numeric: tabular-nums; }
.rw-sources a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Article footer — comments are closed sitewide, so this is byline, review
   date and the standing legal line, nothing else. */
.rw-article-foot {
  border-top: 1px solid var(--rw-rule);
  margin-top: 30px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--rw-text-mute);
  line-height: 1.6;
}
.rw-article-foot .rw-byline {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
}
.rw-article-foot .rw-byline b { color: var(--rw-text); font-weight: var(--rw-label-weight); }
.rw-article-foot .rw-legal { font-size: 14px; }
.rw-article-foot a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Belt and braces: comments stay closed sitewide. */
.comments-area, #comments, .comment-respond { display: none; }

/* ==========================================================================
   13. WORDPRESS CORE CLASSES
   Everything the mockup never had to cover.
   ========================================================================== */

/* --- Alignments ---------------------------------------------------------- */
/* position/left/translate centres relative to the parent in both block and
   flex-column contexts, which is what the article body is. */
.alignwide {
  max-width: none;
  width: min(1080px, calc(100vw - 32px));
  margin-inline: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.alignfull {
  max-width: none;
  width: 100vw;
  margin-inline: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
}
.alignfull img { width: 100%; }

.aligncenter {
  display: block;
  margin-inline: auto;
  text-align: center;
}
figure.aligncenter, .wp-caption.aligncenter { margin-inline: auto; }

.alignleft {
  float: left;
  margin: 6px 24px 16px 0;
  max-width: 50%;
}
.alignright {
  float: right;
  margin: 6px 0 16px 24px;
  max-width: 50%;
}
.alignnone { max-width: 100%; }
.clear, .rw-clear { clear: both; }

/* --- Figures & captions -------------------------------------------------- */
figure,
.wp-caption {
  margin: 0;
  max-width: 100%;
}
figure img,
.wp-caption img {
  border-radius: var(--rw-radius);
  width: 100%;
  height: auto;
}
figcaption,
.wp-caption-text,
.wp-block-image figcaption {
  font-family: var(--rw-font-label);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--rw-text-mute);
  margin-top: 8px;
  text-align: left;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.alignleft figcaption, .alignright figcaption { max-width: 100%; }
.wp-caption { padding: 0; }

/* In-article working figures. The images are paper-grounded, so a hairline
   keeps them from dissolving into the page; radius matches every other image. */
.rw-figure { margin: 30px 0; }
.rw-figure img {
  border: 1px solid var(--rw-rule);
  background: var(--rw-paper);
}
.rw-figure figcaption { max-width: 100%; }

/* --- Blockquote — a calico inset, gold-INK rule -------------------------- */
blockquote,
.wp-block-quote {
  margin: 6px 0;
  background: var(--rw-inset);
  border-left: 3px solid var(--rw-cta-type);
  padding: 16px 20px;
  border-radius: 0 4px 4px 0;
  font-family: var(--rw-font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  max-width: 56ch;
  color: var(--rw-text);
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: 12px; }
blockquote cite,
.wp-block-quote cite,
blockquote footer {
  display: block;
  margin-top: 10px;
  font-family: var(--rw-font-label);
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
}
.wp-block-pullquote {
  border-top: 1px solid var(--rw-rule);
  border-bottom: 1px solid var(--rw-rule);
  padding: 22px 0;
  text-align: left;
  background: none;
}
.wp-block-pullquote blockquote {
  border-left: 0;
  padding-left: 0;
  background: none;
}

/* --- Tables — wrapped, and scrollable inside their own container --------- */
.rw-scroll,
.rw-table-scroll,
figure.wp-block-table,
.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overscroll-behavior-x: contain;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: var(--rw-radius);
}
caption {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-text-mute);
  text-align: left;
  padding: 0 0 8px;
}
th, td {
  border: 1px solid var(--rw-rule-inset);
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
}
th {
  font-family: var(--rw-font-label);
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  background: var(--rw-inset-2);
}
/* A bare table straight from the editor with no wrapper still must not push
   the page sideways. */
.article .body > table,
.entry-content > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
/* On narrow screens a real data table is more use scrolling inside its own
   container than crushed to three characters a column. */
@media (max-width: 640px) {
  .rw-table-scroll table,
  .rw-scroll table,
  figure.wp-block-table table,
  .wp-block-table table,
  .article .body > table,
  .entry-content > table {
    min-width: 30rem;
  }
  .rw-table-scroll,
  .rw-scroll,
  figure.wp-block-table,
  .wp-block-table {
    /* a hairline edge so the scroll affordance is visible before you drag */
    border-right: 1px solid var(--rw-rule);
    border-radius: var(--rw-radius);
  }
}

/* --- Code & preformatted ------------------------------------------------- */
pre, .wp-block-code, .wp-block-preformatted {
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: var(--rw-radius);
  padding: 14px 16px;
  overflow-x: auto;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.55;
}
code, kbd, samp {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: 3px;
  padding: .08em .34em;
}
pre code { background: none; border: 0; padding: 0; }

/* --- Embeds, separators, misc core blocks -------------------------------- */
.wp-block-embed__wrapper { max-width: 100%; }
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--rw-rule);
  max-width: 120px;
  margin: 12px 0;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
/* Core buttons are EDITORIAL by default — a block button in an article is not
   a commerce CTA. Add .btn-cta / .btn-commerce for that. */
.wp-block-button__link {
  font-family: var(--rw-font-label);
  font-size: 15px;
  font-weight: var(--rw-label-weight);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 12px 20px;
  background: var(--rw-accent);
  color: var(--rw-accent-ink);
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link:hover { background: var(--rw-accent-deep); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--rw-accent);
  border: 1.5px solid var(--rw-accent);
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.gallery-item { margin: 0; }
/* Gold as a BORDER on a light ground is prohibited — gold ink instead. */
.sticky .card, .sticky.card { border-color: var(--rw-cta-type); }
.bypostauthor { display: block; }

/* --- Pagination / post navigation ---------------------------------------- */
.nav-links,
.pagination .nav-links,
.rw-page-links,
.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 34px 0 8px;
  font-family: var(--rw-font-label);
  font-size: 15px;
  font-weight: var(--rw-label-weight);
  font-variant-numeric: tabular-nums;
}
.page-numbers,
.wp-block-query-pagination-numbers .page-numbers,
.nav-links a,
.rw-page-links a,
.rw-page-links > span,
.wp-block-query-pagination > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rw-rule);
  border-radius: 4px;
  background: var(--rw-inset);
  color: var(--rw-accent);
  text-decoration: none;
}
.page-numbers:hover { border-color: var(--rw-accent); color: var(--rw-accent-deep); }
.page-numbers.current {
  background: var(--rw-accent);
  border-color: var(--rw-accent);
  color: var(--rw-accent-ink);
}
.page-numbers.dots {
  border-color: transparent;
  background: none;
  color: var(--rw-text-mute);
  min-width: 0;
  padding: 0 4px;
}
.post-navigation .nav-links,
.posts-navigation .nav-links {
  justify-content: space-between;
}
.nav-previous, .nav-next { max-width: 48%; min-width: 0; }
.nav-next { margin-left: auto; text-align: right; }
.post-navigation a, .posts-navigation a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Footer (site) — the second and last dark band ----------------------- */
.site-footer,
body > footer {
  background: var(--rw-pine-deep);
  color: var(--rw-band-mute);
  margin-top: 56px;
}
.site-footer .wrap,
body > footer .wrap {
  padding: 44px var(--rw-gutter) 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
.stack {
  text-align: center;
  font-family: var(--rw-font-display);
  font-size: 20px;
  color: var(--rw-calico);
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
}
.stack .line { border-top: 1px solid var(--rw-band-mute); }
.stack .s { color: var(--rw-dawn-brt); }   /* gold on pine — 7.44:1, allowed */
.site-footer .cols,
body > footer .cols {
  font-size: 14.5px;
  line-height: 1.8;
  /* Was max-width: 64ch, which stopped the footer text well short of the
     right edge and left a conspicuous empty gap beside it. The footer is
     scannable small print rather than prose, so it takes the full column and
     the long legal lines are split into their own measured block below. */
  max-width: none;
}
.site-footer .cols b,
body > footer .cols b {
  color: var(--rw-calico);
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
}
/* THE v0.4 FIX: footer links were verdigris-adjacent muted text on pine.
   Sea glass, 10.01:1, underlined on hover. */
.site-footer a,
body > footer a {
  color: var(--rw-sea-glass);
  text-decoration: none;
}
.site-footer a:hover,
body > footer a:hover {
  color: var(--rw-sea-glass-brt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer ul,
body > footer ul { list-style: none; margin: 0; padding: 0; }
/* The footer menu is a flat run of links inside the small-print paragraph,
   so it flows inline and the separators are drawn, not typed. */
.rw-foot-nav { display: inline; }
.rw-foot-nav a + a::before {
  content: " · ";
  color: var(--rw-band-mute);
  text-decoration: none;
  display: inline-block;
  padding: 0 .18em;
}

/* ==========================================================================
   14. AD SYSTEM — .rw-ad family
   ==========================================================================
   COMPLIANCE, NOT DECORATION.

   Under the DMCCA 2024 regime (in force 6 April 2025) the CMA can fine up to
   10% of global turnover for hidden advertising. A faint or card-shaped ad
   unit is a statutory exposure, not a style choice. So:

     - NO card fill, NO radius, NO shadow. An ad must never be mistakable for
       an editorial card.
     - Full-bleed to the column edge: the unit spans the whole measure
       container while the paragraphs beside it are capped at ~68ch, so the
       unit visibly sits outside the reading column.
     - A 1px #948871 hairline above and below, and nothing else.
     - >=48px vertical margin, so it is never read as part of the paragraph
       it follows.
     - The "Advertisement" label is Source Serif 4 caps, letter-spaced, in
       --rw-ink-muted (7.88:1 on Paper) — legible, not faint.

   Slot classes are matched in three shapes (BEM modifier, flat class and
   data attribute) so this stylesheet holds whichever convention inc/ads.php
   settles on.
   ========================================================================== */

/* SPECIFICITY NOTE — inc/ads.php (Agent A) prints a reservation stylesheet as
   `risewell-style-inline-css`, which WordPress attaches AFTER this file. Its
   rules are `.rw-ad` (0,1,0) and `.rw-ad .tag` (0,2,0), and it sets the label
   at 10px — the faint label that is a statutory exposure under the DMCCA
   regime. Equal specificity plus later source order means it would win, so
   the rules below are deliberately doubled (`.rw-ad.rw-ad`) to outrank it
   without editing a file this agent does not own and without !important.
   If that inline block is ever removed, these still behave identically. */
.rw-ad.rw-ad,
.ad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  background: var(--rw-ad-ground);   /* transparent */
  border: 0;
  border-top: 1px solid var(--rw-rule);
  border-bottom: 1px solid var(--rw-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0;
  margin: 48px 0;
  width: 100%;
  max-width: 100%;
  color: var(--rw-text-mute);
  text-align: left;
  overflow: hidden;
  contain: layout paint;
}

/* The label. Legible is a legal requirement here, not a preference:
   12.5px Source Serif 4 caps, tracked, in --rw-ink-muted at 7.88:1 on Paper. */
.rw-ad.rw-ad .rw-ad__label,
.rw-ad.rw-ad .rw-ad-label,
.rw-ad.rw-ad .tag,
.rw-ad.rw-ad > .tag,
.ad .tag {
  align-self: flex-start;
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-ink-muted);
}
/* In dark mode --rw-text-mute is the pine-safe muted tone (7.10:1 on the
   dark ground). Ink-muted would be unreadable there. */
@media (prefers-color-scheme: dark) {
  .rw-ad.rw-ad .rw-ad__label,
  .rw-ad.rw-ad .rw-ad-label,
  .rw-ad.rw-ad .tag,
  .rw-ad.rw-ad > .tag,
  .ad .tag { color: var(--rw-text-mute); }
}
:root[data-theme="dark"] .rw-ad.rw-ad .tag,
:root[data-theme="dark"] .rw-ad.rw-ad > .tag,
:root[data-theme="dark"] .rw-ad.rw-ad .rw-ad__label,
:root[data-theme="dark"] .ad .tag,
.theme-dark .rw-ad.rw-ad .tag,
.theme-dark .ad .tag { color: var(--rw-text-mute); }
:root[data-theme="light"] .rw-ad.rw-ad .tag,
:root[data-theme="light"] .rw-ad.rw-ad > .tag,
:root[data-theme="light"] .ad .tag,
.theme-light .rw-ad.rw-ad .tag,
.theme-light .ad .tag { color: var(--rw-ink-muted); }

.rw-ad.rw-ad .rw-ad__hint,
.rw-ad.rw-ad .hint,
.ad .hint {
  font-family: var(--rw-font-label);
  font-size: 14px;
  text-align: center;
  padding: 0 14px;
  line-height: 1.45;
  margin: auto;
  max-width: 44ch;
  color: var(--rw-text-mute);
}
.rw-ad__inner { width: 100%; margin: auto; }

/* A widget dropped into a slot's widget area fills the container without
   adding chrome of its own. */
.rw-ad-unit {
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- home-billboard: 250px desktop / 100px mobile ------------------------ */
.rw-ad-billboard,
.rw-ad--home-billboard,
.rw-ad[data-rw-ad-slot="home-billboard"],
.ad-billboard {
  min-height: 250px;
}
@media (max-width: 640px) {
  .rw-ad-billboard,
  .rw-ad--home-billboard,
  .rw-ad[data-rw-ad-slot="home-billboard"],
  .ad-billboard {
    min-height: 100px;
  }
}

/* --- home-infeed: one unit inside the Latest grid ------------------------
   It sits in the card grid, so it must work HARDER not to look like a card:
   no fill, no border box, no radius — just the two hairlines. */
.rw-ad.rw-ad-infeed,
.rw-ad--home-infeed,
.rw-ad[data-rw-ad-slot="home-infeed"],
.card.ad-card,
.card.rw-ad {
  min-height: 260px;
  margin: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rw-rule-inset);
  border-bottom: 1px solid var(--rw-rule-inset);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  color: var(--rw-text-mute);
}

/* --- article-incontent: 280px ------------------------------------------- */
.rw-ad-incontent,
.rw-ad--article-incontent,
.rw-ad[data-rw-ad-slot="article-incontent"],
.ad-incontent {
  min-height: 280px;
}

/* --- article-end: 250px -------------------------------------------------- */
.rw-ad-end,
.rw-ad--article-end,
.rw-ad[data-rw-ad-slot="article-end"],
.ad-end {
  min-height: 250px;
}

/* In the article flow the body is a flex column with a 20px gap, so the 48px
   margin above and below is additive — the unit clears the paragraph on
   either side by well over the 48px floor, and spans the full measure
   container while the paragraphs are capped at ~68ch. */
.article .body > .rw-ad,
.article .body > .ad,
.entry-content > .rw-ad,
.entry-content > .ad {
  width: 100%;
  max-width: none;
  align-self: stretch;
}

/* --- mobile-adhesion: 50px, sticky bottom, mobile only -------------------
   Breakpoint kept at 640px to agree with the inline reservation CSS that
   inc/ads.php prints; the two must not disagree about when this appears. */
.rw-ad.rw-ad-adhesion,
.rw-ad--mobile-adhesion,
.rw-ad[data-rw-ad-slot="mobile-adhesion"] {
  display: none;
}
@media (max-width: 640px) {
  .rw-ad.rw-ad-adhesion,
  .rw-ad--mobile-adhesion,
  .rw-ad[data-rw-ad-slot="mobile-adhesion"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    min-height: 50px;
    margin: 0;
    /* It floats over content, so it needs a ground — but still no radius and
       still the compliance hairline. */
    border: 0;
    border-top: 1px solid var(--rw-hairline);
    border-radius: 0;
    background: var(--rw-bg);
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .12);
    padding: 4px 12px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  .rw-ad-adhesion .rw-ad__hint,
  .rw-ad-adhesion .hint { display: none; }
  .rw-ad-adhesion .tag { align-self: center; margin: 0; }
  /* Keep the last of the page clear of the adhesion unit. */
  body:has(.rw-ad-adhesion),
  body:has(.rw-ad--mobile-adhesion),
  body:has(.rw-ad[data-rw-ad-slot="mobile-adhesion"]),
  body.has-adhesion {
    padding-bottom: 58px;
  }
}

/* Once a unit is filled the placeholder hint stands down — but the hairlines
   and the "Advertisement" label STAY. Removing them on fill would be exactly
   the hidden-advertising failure the DMCCA regime fines. The reserved
   min-heights are also deliberately NOT reset, so nothing shifts. */
.rw-ad.is-filled .rw-ad__hint,
.rw-ad:has(iframe) .rw-ad__hint,
.rw-ad:has(ins) .rw-ad__hint,
.rw-ad.is-filled .hint,
.rw-ad:has(iframe) .hint,
.rw-ad:has(ins) .hint { display: none; }

/* The explanatory note used on the mockup / style guide page. */
.ad-note,
.rw-ad-note {
  font-size: 15px;
  color: var(--rw-text-mute);
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  padding: 18px 22px;
  line-height: 1.7;
  margin-top: 44px;
}
.ad-note b,
.rw-ad-note b {
  color: var(--rw-text);
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
}

/* Ad widget areas render inside the slot without adding chrome of their own */
.rw-ad .widget { width: 100%; }
.rw-ad .widget-title { display: none; }

/* ==========================================================================
   15. COMMERCIAL & COMPLIANCE BLOCKS
   ========================================================================== */

/* --- .rw-affiliate-notice / .rw-ownership-notice -------------------------
   The bordered strip that sits IMMEDIATELY ABOVE THE H1, above breadcrumb
   and byline. CAP states verbatim that a "may receive a commission"
   disclaimer is "unlikely to be acceptable" and that footer placement is
   "unlikely to be sufficient" — so this has to be a real, readable notice.

   Deliberately NOT italic grey: >=0.875rem, ink on white, a real border.
   1rem ink-on-white is 16.73:1; the border is ink-muted at 8.43:1.
   -------------------------------------------------------------------------- */
.rw-affiliate-notice,
.rw-ownership-notice {
  display: block;
  font-family: var(--rw-font-body);
  font-size: 1rem;          /* 16px — comfortably over the 0.875rem floor */
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rw-notice-ink);
  background: var(--rw-notice-bg);
  border: 1.5px solid var(--rw-notice-rule);
  border-radius: 3px;
  padding: 12px 16px;
  margin: 0 0 20px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-affiliate-notice + .rw-ownership-notice,
.rw-ownership-notice + .rw-affiliate-notice { margin-top: -8px; }
/* inc/compliance.php emits the heading as `.rw-<kind>-notice__head`; the
   mockup markup used a bare <b>. Both are the same object. */
.rw-affiliate-notice b,
.rw-affiliate-notice strong,
.rw-affiliate-notice .rw-affiliate-notice__head,
.rw-ownership-notice b,
.rw-ownership-notice strong,
.rw-ownership-notice .rw-ownership-notice__head,
.rw-affiliate-notice__head,
.rw-ownership-notice__head {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--rw-notice-ink);
  display: block;
  margin-bottom: 4px;
}
.rw-affiliate-notice p,
.rw-ownership-notice p { margin: 0; max-width: none; }
.rw-affiliate-notice p + p,
.rw-ownership-notice p + p { margin-top: 8px; }
.rw-affiliate-notice a,
.rw-ownership-notice a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rw-affiliate-notice a:hover,
.rw-ownership-notice a:hover { color: var(--rw-accent-deep); }
/* The two notices read as a family, with a 4px left marker distinguishing
   them. The ownership notice is the stronger claim ("we have a direct
   financial interest"), so it carries the commerce-side marker — gold INK
   (5.69:1 on white), never dawn gold, on a light ground. */
.rw-affiliate-notice { border-left-width: 4px; border-left-color: var(--rw-notice-rule); }
.rw-ownership-notice { border-left-width: 4px; border-left-color: var(--rw-cta-type); }

/* The standing legal lines (Amazon Associates + NHS OGL v3.0 attribution).
   These are the light-ground defaults, kept in case the block is ever placed
   inside an article; inc/compliance.php currently emits it into the PINE site
   footer, which is handled by the override immediately below. */
.rw-foot-legal {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rw-text-mute);
}
.rw-foot-legal .rw-foot-legal__line { display: block; margin: 0 0 4px; }
.rw-foot-legal a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* THE v0.4 FIX, APPLIED HERE TOO.  inc/compliance.php prints .rw-foot-legal
   inside <footer>, which is pine #14211B — not an article footer on Paper.
   On pine the light-ground defaults above are hard AA failures:
       --rw-text-mute  #554C3F on #14211B = 1.97:1
       --rw-accent     #256356 on #14211B = 2.37:1   <- the banned pair
   and these two lines are the Amazon Associates disclosure and the Open
   Government Licence attribution, both of which have to be READABLE. The
   footer is pine in BOTH schemes, so this uses the raw band tokens rather
   than the scheme-switched semantic ones.
       --rw-band-mute  #A8B6A9 on #14211B = 7.86:1
       --rw-band-link  #95D6BF on #14211B = 10.01:1  (sea glass)
   Specificity: (0,2,1)/(0,1,3) both beat the (0,1,1) defaults above. */
.site-footer .rw-foot-legal,
body > footer .rw-foot-legal {
  color: var(--rw-band-mute);
}
.site-footer .rw-foot-legal a,
body > footer .rw-foot-legal a {
  color: var(--rw-band-link);
}
.site-footer .rw-foot-legal a:hover,
body > footer .rw-foot-legal a:hover {
  color: var(--rw-sea-glass-brt);
}

/* --- .rw-aff — affiliate slot ------------------------------------------
   inc/affiliates.php removes inert placeholders from the output, so a reader
   never sees one. This rule is the backstop: if a span ever slips through, it
   is invisible rather than a gold-washed "[affiliate slot]" mid-sentence,
   which is what every article showed before the module existed. */
span.rw-aff { display: none; }
/* When the placeholder becomes a real, disclosed link it styles as one.
   An affiliate link is COMMERCE, so it takes the commerce type colour and
   keeps its underline — it must never pass as an editorial link. */
a.rw-aff {
  color: var(--rw-cta-type);
  background: none;
  border-bottom: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
a.rw-aff::after { content: none; }
/* An affiliate BUTTON is the gold commerce fill. */
a.rw-aff.btn,
.rw-aff-btn {
  background: var(--rw-cta);
  border-color: var(--rw-cta);
  color: var(--rw-cta-ink);
  text-decoration: none;
}

/* --- .rw-disclose — the funded-by box, beside the links it funds --------- */
.rw-disclose {
  border-top: 1px solid var(--rw-rule);
  border-bottom: 1px solid var(--rw-rule);
  padding: 12px 2px;
  font-family: var(--rw-font-body);
  font-size: 15px;
  color: var(--rw-text-mute);
  line-height: 1.6;
  margin: 8px 0;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-disclose b,
.rw-disclose strong,
.rw-disclose .rw-disclose__head {
  font-family: var(--rw-font-label);
  color: var(--rw-text);
  text-transform: uppercase;
  letter-spacing: var(--rw-label-track);
  font-size: 12.5px;
  font-weight: var(--rw-label-weight);
}
.rw-disclose a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- .rw-pro — professional signposting, tinted by pillar ---------------- */
.rw-pro {
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-left: 3px solid var(--pc, var(--rw-pillar-body));
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-pro b,
.rw-pro strong,
.rw-pro .rw-pro__head {
  display: inline-block;
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--pc, var(--rw-pillar-body));
  margin-bottom: 4px;
}
.rw-pro p + p { margin-top: 10px; }
.rw-pro a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Pillar tint by slug — same hooks as .pillar-* above. */
.rw-pro.pillar-body          { --pc: var(--rw-pillar-body); }
.rw-pro.pillar-mind          { --pc: var(--rw-pillar-mind); }
.rw-pro.pillar-relationships { --pc: var(--rw-pillar-relationships); }
.rw-pro.pillar-family        { --pc: var(--rw-pillar-family); }
.rw-pro.pillar-work          { --pc: var(--rw-pillar-work); }

/* v0.4 removes the old `filter: brightness(1.35)` dark-mode hack: the pillar
   tokens now carry real, measured dark-mode values (5.78-7.21:1 on the dark
   ground), so the tint is correct by construction in both schemes. */

/* --- .rw-faq — Common questions (the People-also-ask block) --------------- */
.rw-faq {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rw-rule-inset);
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-faq > h2 { margin-top: 0; }
.rw-faq__item + .rw-faq__item {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rw-rule-inset);
}
.rw-faq__item h3 {
  font-size: 1.15em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.rw-faq__item p { margin: 0; }
.rw-faq__item p + p { margin-top: 10px; }

/* --- .rw-hub — pillar hub: written intro + start-here sections ----------- */
.rw-hub { margin: 8px 0 40px; }
.rw-hub__intro {
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
  font-size: 18px;
  line-height: 1.6;
}
.rw-hub__intro p + p { margin-top: 12px; }
.rw-hub__sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.rw-hub__section {
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-top: 3px solid var(--pc, var(--rw-pillar-work));
  border-radius: 6px;
  padding: 18px 20px;
}
.rw-hub__title {
  font-family: var(--rw-font-label);
  font-size: 12.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  font-weight: var(--rw-label-weight);
  color: var(--pc, var(--rw-pillar-work));
  margin: 0 0 8px;
}
.rw-hub__blurb { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.rw-hub__list { list-style: none; margin: 0; padding: 0; }
.rw-hub__list li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rw-rule-inset); }
.rw-hub__list a { text-decoration: none; font-weight: 600; }
.rw-hub__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rw-hub.pillar-body          { --pc: var(--rw-pillar-body); }
.rw-hub.pillar-mind          { --pc: var(--rw-pillar-mind); }
.rw-hub.pillar-relationships { --pc: var(--rw-pillar-relationships); }
.rw-hub.pillar-family        { --pc: var(--rw-pillar-family); }
.rw-hub.pillar-work          { --pc: var(--rw-pillar-work); }

/* ==========================================================================
   16. RESPONSIVE — mobile-first behaviour down to 320px
   ========================================================================== */

@media (max-width: 820px) {
  .lead { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .mast .wrap {
    align-items: flex-start;
    gap: 12px;
  }
  .nav { gap: 18px; font-size: 12.5px; }
  .nav ul { gap: 18px; }
  .nav a { padding-bottom: 12px; }
  .strap .wrap { flex-direction: column; gap: 4px; }
  .article .cov { height: 220px; }
  .feat .cov { height: 240px; }
}

@media (max-width: 640px) {
  /* v0.4: 18px is the mobile body size — the floor, not the target. */
  body { font-size: var(--rw-size-body-sm); }
  .article .body { font-size: var(--rw-size-body-sm); }
  .band .wrap { grid-template-columns: 1fr; }
  .site-footer .wrap,
  body > footer .wrap { grid-template-columns: 1fr; gap: 26px; }
  .band svg { width: 84px; height: 70px; }
  .alignleft, .alignright {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }
  .sect { padding: 32px 0 8px; }
  .article { padding: 32px 0 12px; }
  .pull, blockquote, .wp-block-quote { font-size: 20px; padding: 14px 16px; }
  .rw-ad, .ad { margin: 48px 0; }
}

@media (max-width: 480px) {
  /* --rw-index-pad is deliberately NOT overridden here: it is scheme-dependent
     (22px on the light calico ground, 0 in dark where the ground collapses),
     and a plain :root override in a later media block would beat the
     prefers-color-scheme declaration and re-indent the dark grid. */
  :root { --rw-gutter: 16px; }
  .news, .shop { padding: 22px 20px; }
  .band .wrap { padding-top: 32px; padding-bottom: 32px; }
  .grid { gap: 18px; }
  .side .cov { width: 88px; height: 64px; }
  .btn { width: 100%; }
  .news .row .btn { flex: 1 1 100%; }
}

@media (max-width: 360px) {
  .logo .word { font-size: 23px; }
  .logo svg { width: 36px; height: 30px; }
  .nav { gap: 14px; }
  .nav ul { gap: 14px; }
  .side .cov { width: 76px; height: 56px; }
}

/* ==========================================================================
   PRINT — the reader keeps the article, not the furniture.
   ========================================================================== */

@media print {
  .mast, .strap, .nav, .band, .duo, .rw-ad, .ad, .ad-note,
  .site-footer, body > footer, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .article .inner { max-width: none; }
  .cov { display: none; }
  a { text-decoration: underline; }
  /* The disclosures print — they are the part a reader may need to keep. */
  .rw-affiliate-notice, .rw-ownership-notice, .rw-disclose {
    display: block !important;
    border: 1px solid #000;
    color: #000;
    background: #fff;
  }
  .rw-sources a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ==========================================================================
   AUTHORSHIP & E-E-A-T  (v0.2 — added 10 Aug 2026)
   --------------------------------------------------------------------------
   YMYL health content needs a visible named human. These components carry
   that: the byline, the honest clinical-review status, and the author box.
   The author box is only ever rendered when a real biography exists — see
   inc/author.php. Nothing here invents authority.
   ========================================================================== */

.rw-byline__author { color: var(--rw-text); }
.rw-byline__link {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rw-byline__link:hover { color: var(--rw-accent-deep); }
.rw-byline__read { white-space: nowrap; }

/* Review status — deliberately plain. It is a statement of fact, not a badge. */
.rw-review-status {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--rw-rule);
  font-family: var(--rw-font-label);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--rw-text-mute);
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}

/* Author box — sits after the article body, before the related links. */
.rw-author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 36px 0 0;
  padding: 20px;
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-author-box__avatar { flex: 0 0 auto; line-height: 0; }
.rw-author-box__avatar img {
  border-radius: 50%;
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.rw-author-box__body { min-width: 0; }
.rw-author-box__name {
  margin: 0 0 6px;
  font-family: var(--rw-font-display);
  font-size: 19px;
  line-height: 1.25;
}
.rw-author-box__name .label {
  display: block;
  font-family: var(--rw-font-label);
  font-size: 12px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  color: var(--rw-text-mute);
  margin-bottom: 2px;
}
.rw-author-box__name a {
  color: var(--rw-text);
  text-decoration: none;
}
.rw-author-box__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rw-author-box__bio {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rw-text);
}
.rw-author-box__links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.rw-author-box__links a {
  font-family: var(--rw-font-label);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 520px) {
  .rw-author-box { flex-direction: column; gap: 14px; }
}

/* Author archive page */
.rw-author-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rw-rule);
}
.rw-author-header__avatar img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }
.rw-author-header__bio {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-author-header__links { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.rw-author-header__links a {
  font-family: var(--rw-font-label);
  font-size: 13px;
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 520px) {
  .rw-author-header { flex-direction: column; gap: 14px; }
}

/* ==========================================================================
   NEWSLETTER CAPTURE  (v0.2 — added 10 Aug 2026)
   The consent checkbox and legal line are required furniture, not decoration:
   consent has to be freely given and recorded. Styled to be legible, not
   buried — a hidden consent control is a compliance problem.
   ========================================================================== */

.rw-newsletter__form { margin: 0; }
.rw-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.rw-newsletter__consent { margin: 12px 0 0; }
.rw-newsletter__consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.rw-newsletter__consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 17px; height: 17px;
  accent-color: var(--rw-accent);
}
.rw-newsletter__legal {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rw-text-mute);
}
.rw-newsletter__legal a {
  color: var(--rw-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rw-newsletter__msg {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
}
.rw-newsletter__msg.is-ok    { color: var(--rw-accent-deep, var(--rw-accent)); }
.rw-newsletter__msg.is-error { color: var(--rw-pillar-body); }
.rw-newsletter__form button[disabled] { opacity: 0.65; cursor: progress; }

/* Inside the calico band the muted ink still needs to clear 4.5:1 */
.news--light .rw-newsletter__legal { color: var(--rw-ink-muted); }

/* ==========================================================================
   SHORT ANSWER BLOCK  (v0.2 — added 10 Aug 2026)
   Sits high on the article, above the cover. Styled as editorial furniture,
   NOT as a card or callout — it must never read as a commercial unit, and the
   ad containers are the only full-bleed hairline component (see the token
   file's prohibition 7).
   ========================================================================== */

.rw-answer {
  margin: 18px 0 4px;
  padding: 16px 20px;
  background: var(--rw-inset);
  border-left: 4px solid var(--rw-accent);
  border-radius: 0 6px 6px 0;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-answer__label {
  margin: 0 0 6px;
  font-family: var(--rw-font-label);
  font-size: 12px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  color: var(--rw-text-mute);
}
.rw-answer__text {
  margin: 0;
  font-family: var(--rw-font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--rw-text);
}
@media (max-width: 520px) {
  .rw-answer { padding: 14px 16px; }
  .rw-answer__text { font-size: 18px; }
}

/* ==========================================================================
   MOBILE NAVIGATION  (added 11 Aug 2026)
   --------------------------------------------------------------------------
   There was none. The nav rendered as a row of links at every width, which
   wraps and overflows on a phone. The toggle is hidden above the breakpoint,
   so desktop is untouched.
   ========================================================================== */

.rw-nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1.5px solid rgba(242, 237, 227, 0.35);
  border-radius: 5px;
  padding: 8px 13px;
  color: var(--rw-band-text, #F7EDD9);
  font-family: var(--rw-font-label);
  font-size: 13px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  cursor: pointer;
}
.rw-nav-toggle:hover { border-color: rgba(242, 237, 227, 0.65); }
.rw-nav-toggle__bars { display: block; width: 17px; }
.rw-nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.rw-nav-toggle__bars span + span { margin-top: 4px; }

/* Open state: the bars become a cross. */
.rw-nav-toggle[aria-expanded="true"] .rw-nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rw-nav-toggle[aria-expanded="true"] .rw-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.rw-nav-toggle[aria-expanded="true"] .rw-nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .rw-nav-toggle__bars span { transition: none; }
}

@media (max-width: 860px) {
  .mast .wrap { flex-wrap: wrap; row-gap: 10px; }
  .rw-nav-toggle { display: inline-flex; margin-left: auto; }

  /* Collapsed by default; the toggle opens it. */
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 6px;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 13px 2px;
    border-top: 1px solid rgba(242, 237, 227, 0.14);
    font-size: 15px;
  }
  .nav a:first-child { border-top: 0; }
  /* The cresting-sun indicator is a bottom marker; on a stacked list it reads
     better as a leading one. */
  .nav .on::after,
  .nav .current-menu-item > a::after { display: none; }
  .nav .on,
  .nav .current-menu-item > a { border-left: 3px solid var(--rw-dawn-brt); padding-left: 11px; }
}

/* ==========================================================================
   SHOP LAYOUT  (added 11 Aug 2026)
   --------------------------------------------------------------------------
   The shop rendered inside .article .inner, which is capped at --rw-inner
   (680px, an article reading measure). A product grid squeezed into a reading
   column is the "looks terrible" problem: correct for prose, wrong for a grid.
   Index views now use the full wrap; the single product keeps a readable
   description column.
   ========================================================================== */

.rw-woo--index .inner,
.rw-woo--index .rw-woo__inner {
  max-width: none;
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  background: var(--rw-card-white, #fff);
  border: 1px solid var(--rw-hairline);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.woocommerce ul.products li.product img { border-radius: 4px; margin: 0 0 4px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--rw-font-display);
  font-size: 19px;
  line-height: 1.25;
  padding: 0;
  color: var(--rw-ink);
}
.woocommerce ul.products li.product .price {
  font-family: var(--rw-font-label);
  font-size: 17px;
  color: var(--rw-gold-ink);
  font-variant-numeric: tabular-nums;
}
/* Commerce CTA: gold fill with ink, never the editorial accent. */
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button {
  background: var(--rw-dawn);
  color: var(--rw-ink);
  border-radius: 5px;
  font-family: var(--rw-font-label);
  letter-spacing: 0.03em;
  margin-top: auto;
  align-self: flex-start;
}
.woocommerce ul.products li.product .button:hover { background: var(--rw-dawn-press); color: var(--rw-ink); }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { color: var(--rw-ink-muted); font-size: 14.5px; }
.woocommerce .woocommerce-ordering select {
  font-family: var(--rw-font-body);
  padding: 7px 10px;
  border: 1px solid var(--rw-hairline);
  border-radius: 5px;
  background: var(--rw-paper);
  color: var(--rw-ink);
}

@media (max-width: 520px) {
  .woocommerce ul.products { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   SERVICES DIRECTORY  (added 11 Aug 2026)
   Reference material, not editorial. Deliberately plainer than an article:
   someone arriving here wants a phone number, not atmosphere. Crisis listings
   are visually distinct and never carry commercial styling.
   ========================================================================== */

.rw-directory { padding-bottom: 20px; }
.rw-directory__head { padding: 8px 0 4px; }
.rw-directory__head h1 { font-size: clamp(28px, 4vw, 40px); margin-top: 6px; }
.rw-directory__head .dek {
  font-family: var(--rw-font-display);
  font-size: 19px;
  color: var(--rw-text-mute);
  margin-top: 10px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-directory__policy {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--rw-inset);
  border: 1px solid var(--rw-rule-inset);
  border-left: 3px solid var(--rw-accent);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-directory__policy p { margin: 0 0 8px; }
.rw-directory__policy p:last-child { margin-bottom: 0; }

.rw-directory__filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 4px; padding-bottom: 18px;
  border-bottom: 1px solid var(--rw-rule);
}
.rw-directory__chip {
  font-family: var(--rw-font-label);
  font-size: 13px; letter-spacing: .04em;
  padding: 6px 13px;
  border: 1px solid var(--rw-rule);
  border-radius: 999px;
  color: var(--rw-text);
  text-decoration: none;
}
.rw-directory__chip:hover { border-color: var(--rw-accent); color: var(--rw-accent); }
.rw-directory__chip.is-on {
  background: var(--rw-accent); border-color: var(--rw-accent);
  color: var(--rw-paper);
}

.rw-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: 24px;
}

.rw-svc {
  background: var(--rw-surface);
  border: 1px solid var(--rw-rule);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.rw-svc--crisis { border-left: 4px solid var(--rw-pillar-body); }
.rw-svc__flag {
  margin: 0;
  font-family: var(--rw-font-label);
  font-size: 12px; letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  color: var(--rw-pillar-body);
}
.rw-svc__flag--single {
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--rw-rule-inset);
  border-left: 4px solid var(--rw-pillar-body);
  border-radius: 6px; background: var(--rw-inset);
  font-family: var(--rw-font-body); font-size: 15.5px;
  text-transform: none; letter-spacing: 0;
}
.rw-svc__name { margin: 0; font-size: 21px; line-height: 1.25; }
.rw-svc__name a { color: var(--rw-text); text-decoration: none; }
.rw-svc__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rw-svc__for { margin: 0; font-size: 15px; color: var(--rw-text-mute); line-height: 1.55; }

.rw-svc__facts {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 14px; margin: 0; font-size: 14.5px;
}
.rw-svc__facts dt {
  font-family: var(--rw-font-label); font-size: 12px;
  letter-spacing: var(--rw-label-track); text-transform: uppercase;
  color: var(--rw-text-mute);
}
.rw-svc__facts dd { margin: 0; }
.rw-svc__facts a { color: var(--rw-accent); }

.rw-svc__types { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rw-svc__type {
  font-family: var(--rw-font-label); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: var(--rw-inset); color: var(--rw-text-mute);
  text-decoration: none; border: 1px solid var(--rw-rule-inset);
}
.rw-svc__meta {
  margin: auto 0 0; padding-top: 8px;
  border-top: 1px solid var(--rw-rule-inset);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  font-size: 13px;
}
.rw-svc__site { color: var(--rw-accent); text-decoration: underline; text-underline-offset: 3px; }
.rw-svc__checked { color: var(--rw-text-mute); font-size: 12.5px; }

.rw-service-single__contact {
  margin: 20px 0 0; padding: 18px 20px;
  background: var(--rw-inset); border: 1px solid var(--rw-rule-inset);
  border-radius: 6px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-service-single__phone { margin: 0 0 12px; font-size: 24px; font-family: var(--rw-font-display); }
.rw-service-single__phone .label { display: block; font-size: 12px; color: var(--rw-text-mute); }
.rw-service-single__phone a { color: var(--rw-accent); text-decoration: none; }
.rw-directory__foot {
  margin-top: 34px; padding-top: 16px;
  border-top: 1px solid var(--rw-rule);
  font-size: 15px; color: var(--rw-text-mute);
}

/* ==========================================================================
   RECOMMENDED DIRECTORY (commercial)  (added 11 Aug 2026)
   Visually distinct from the support directory on purpose. A reader should be
   able to tell at a glance that this page is commercial and that one is not.
   ========================================================================== */

.rw-directory__policy--commercial { border-left-color: var(--rw-dawn); }

.rw-rec {
  background: var(--rw-card-white, #fff);
  border: 1px solid var(--rw-hairline);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.rw-rec__badge {
  margin: 0;
  align-self: flex-start;
  font-family: var(--rw-font-label);
  font-size: 11.5px;
  letter-spacing: var(--rw-label-track);
  text-transform: uppercase;
  color: var(--rw-ink);
  background: var(--rw-dawn);
  border-radius: 4px;
  padding: 3px 9px;
}
.rw-rec__name { margin: 0; font-size: 21px; line-height: 1.25; }
.rw-rec__name a { color: var(--rw-ink); text-decoration: none; }
.rw-rec__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rw-rec__why { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rw-ink-muted); }
.rw-rec__cta { margin: 4px 0 0; }
.rw-rec__disclosure {
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rw-hairline);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rw-ink-muted);
}
.rw-directory__empty {
  margin-top: 26px; padding: 22px 24px;
  border: 1px dashed var(--rw-rule);
  border-radius: 6px;
  max-width: min(var(--rw-measure), var(--rw-measure-cap));
}
.rw-directory__empty p { margin: 0 0 10px; }
.rw-directory__empty p:last-child { margin-bottom: 0; }