/* ====================================================================================================== */
/*/* Version: 3.23.0
 * Date:    2026-04-07
 * Created: 2025-12-27 14h30 SAST
 * Issued:  2026-04-07
 * File: global.css
 * Path: /assets/css/global.css
 * Author: Buktika Webdesk (Binka)
 * Purpose: Canonical root token set per Colour Map v3.0.0, base typography and section structure per Design System v4.0.0
 * Type: CSS stylesheet
 * License: © Buktika, 2026. All rights reserved.
 * ISO Reference: ISO 27001, ISO 9241-110
 * Source Naming Standard: Buktika v7.1 (ISO Aligned)
 * ====================================================================================================== */

/*
ChangeLog:
- v3.23.0 (2026-04-07): VIRIDIANS HERO CARD TOKENS + BLACK PRIMITIVE.
          ADDED   - --sdx-color-black: #000000 — pure black primitive.
                    Required for token-safe box-shadow expressions.
                    Placed in PRIMITIVE STATIC COLOURS section alongside --sdx-color-white.
          ADDED   - --sdx-color-viridians-card-mid: #4b4261 — hero card atmospheric
                    mid surface. Dark desaturated purple-grey. Used in Page 3 hero
                    card gradient background stop 1.
          ADDED   - --sdx-color-viridians-card-deep: #1d1829 — hero card atmospheric
                    deep surface. Near-black with deep purple undertone. Used in
                    Page 3 hero card gradient background stop 2.
                    Both added to VIRIDIANS PAGE SURFACES section.
          ADDED   - --sdx-color-eco-muted: #495b4e — muted earthy green. Eco channel
                    bar colour on Page 3 hero card. Warmer and more earthen than
                    --sdx-color-green-deep.
          ADDED   - --sdx-color-eco-mint: #97d8a8 — light mint green. Eco badge
                    background on Page 3 hero card.
          ADDED   - --sdx-color-eco-sage: #cfddb0 — sage-white. Eco badge text colour
                    on Page 3 hero card.
          ADDED   - --sdx-color-eco-border: #accbb4 — medium mint. Eco badge border
                    base colour on Page 3 hero card.
          ADDED   - --sdx-color-eco-khaki: #d8d8bb — warm khaki. Eco badge border
                    warm tone on Page 3 hero card.
                    Four eco tokens added to ECO GUILDS PAGE SURFACES section.
          ADDED   - --sdx-color-restoration-glow: #83af37 — golden-green. Primary
                    downward invitation glow colour below Page 3 hero card.
          ADDED   - --sdx-color-restoration-lime: #bef264 — bright lime. Secondary
                    glow highlight on Page 3 hero card invitation glow.
                    Both added to new RESTORATION CHANNEL ACCENT section.
          AUTHORITY: Owner instruction per www-C Rule 8. All tokens tokenise
                    exact colour values from the working Page 3 hero card design.
- v3.22.0 (2026-03-30): MOBILE HEADLINE LINE-HEIGHT.
          ADDED   - @media (max-width: 480px): .headline line-height: 1.3 → 1.2.
                    At mobile viewport widths headlines wrap to 3+ lines.
                    1.3 produced cramped wrapped lines. 1.2 gives breathing room
                    without breaking the tight display rhythm at desktop scale.
                    DOC-02 §7.2.1 HARD RULE: page CSS MUST NOT override .headline
                    line-height. This fix is in global.css where it belongs.
- v3.21.0 (2026-03-28): PORTRAIT STRIP RING TUNING.
          AMENDED - .strip-rail .item img base border: var(--border) → transparent.
                     Preserves 2px geometry with no visible at-rest ring.
          REMOVED - .strip-rail .item.is-active img border-colour override and 3px
                    outer box-shadow ring in var(--page-primary).
                    Violet primary made the active ring overly prominent.
          ADDED   - Hover / focus-visible border-color: var(--page-primary).
                    Border now appears only on interaction and transitions smoothly.
          ADDED   - border-color 0.18s ease to portrait image transition list.
- v3.20.0 (2026-03-27): MAMADEX VIOLET TOKENS.
          ADDED   - --sdx-color-mama-violet: #8b5cf6 — MamaDEX Social channel signal.
                    Replaces --sdx-color-purple-deep in MamaDEX bar role.
                    Joyful, inclusive, no racial or earth coding. Used by global
                    social impact organisations. High contrast against stem-olive
                    on dual bar. Confirmed pair: stem-olive + mama-violet.
          ADDED   - --sdx-color-mama-violet-light: #ede9fe — MamaDEX tint surface.
                    Badge background and hover state use. Token-safe alternative
                    to rgba hack on purple-deep.
          REF     - BKT-PIL-01-VIR-CARD Amendment v2.0.0. Viridians trigger card
                    Direction C redesign. Dual bar: --sdx-color-stem-olive (left)
                    + --sdx-color-mama-violet (right).
- v3.19.0 (2026-03-25): CORAL CATCHALL — utility panel link exclusions.
          ADDED   - utility-auth-link and utility-contact-link to :not() exclusion chain
                    on the generic a:hover coral rule (line 922).
                    Both are <a> elements on the always-dark utility panel surface.
                    Neither contains "btn" so they were not caught by existing exclusions.
                    Root cause: coral text override was bleeding onto always-dark panel
                    links in light mode, overriding their fixed dark-surface colours.
- v3.18.0 (2026-03-24): UI POPUP SURFACE TOKEN.
          ADDED   - --sdx-color-ui-popup-surface: #123543 — theme-independent deep teal
                    surface for dropdown and popup panels (utility panel, future modals).
                    Lives in UI SURFACE TOKENS block. Always dark regardless of page theme.
                    Consumed by header.css utility panel background.
- v3.17.0 (2026-03-20): CORAL CATCHALL — reporter link exclusions.
          ADDED   - .reporter-lightbox-cta and .reporter-channel-link to the :not() exclusion
                    chain on the generic a:hover coral rule. Both are <a> elements that
                    manage their own hover colour (white on gradient / white on dark fill).
                    Neither contains "btn" so they were not caught by existing exclusions.
                    Root cause of recurring coral text on hover in the reporters roster lightbox.
- v3.16.0 (2026-03-18): SECTION HEADING UNDERLINE — pillar-colour wayfinding.
          AMENDED  - .section-title / .sdx-card-section > h2 border-bottom:
                     var(--page-accent) (amber) → var(--page-primary) (pillar colour).
          RATIONALE: Per-pillar underline provides subconscious wayfinding. The reader
                     maps the heading colour to the pillar they are in. Amber is already
                     the universal action/CTA signal (tagline, nav pip, CTA band) — using
                     it also as a heading underline created signal noise. --page-primary
                     is already the structural pillar colour (card border-left, links,
                     focus rings) — the heading underline in the same colour is the
                     natural extension of pillar identity.
          AMENDED  - Dark mode border-bottom-color: rgba(245,176,20,0.30) (amber) →
                     rgba(from var(--page-primary) r g b / 0.40) — pillar colour at
                     reduced opacity. Consistent with the light mode change.
          SPEC REF  - DOC-02 §4.1 amended in v2.1.0 to reflect this change.
          ALL PAGE CSS files that previously defined their own .sdx-card-section h2
          border-bottom overrides to correct the amber default are now redundant.
          Those rules MUST be removed on next touch of each page CSS file.
- v3.15.0 (2026-03-13): SPINE BREADCRUMB — migrated to global.css.
             Removed from about.css (v8.7.0) and living-tower.css (v3.28.0).
             Mobile fix: gap 0.5rem + separator margin-left 0.5rem below 600px
             (was 1rem — caused label wrapping on narrow screens).
- v3.14.0 (2026-03-13): TRILOGY STRIP — canonical shared component.
            ADDED   - .sdx-trilogy-strip and all child selectors moved from per-page
                      CSS (landing, about, living-tower, reporters) into global.css.
            FIXED   - UX: inactive panels now FULL opacity at rest. They are navigation
                      links — they must invite, not wait to be discovered. hover/focus
                      adds brightness(1.08) lift to confirm interactivity.
            FIXED   - Active panel distinguished by amber bottom border + deepened
                      caption overlay (rgba 0,0,0,0.88 vs 0.72). Not by fading.
            FIXED   - about.css used var(--page-secondary) for active border — wrong.
                      Canonical: var(--sdx-color-mama-amber). Hardcoded per DOC-02 §4.1
                      HARD RULE: amber is the universal active/accent signal on
                      photographic surfaces regardless of page token.
            FIXED   - reporters.css used opacity:0.72 at rest — now removed (full opacity).
            FIXED   - letter-spacing: 0.06em in about/living-tower/reporters → 0.06rem.
                      DOC-02 §15 HARD RULE: em forbidden, rem only.
            RULE    - Page CSS retains ONLY: .trilogy-thumb-[slug] background-image
                      and background-position. Everything else is owned here.
            FIXED   - Active chapter border: --sdx-color-mama-amber → --sdx-color-mama-cyan.
                      Amber reads as similar in hue to warm photography and fails to
                      register. Cyan (#34c6d0) cuts cleanly against warm image palette.
                      DOC-02 §4.1 exception documented in component comment block.
                      .trilogy-contact border-left updated to match (living-tower.css).
   v3.13.0 (2026-03-06): CANONICAL MOBILE RESPONSIVE — layout spacing.
            ADDED   - @media (max-width: 680px): .container, .sdx-card-section, .cards,
                      .card spacing reduced. Recovers 286px to 334px text width on 390px.
            ADDED   - @media (max-width: 480px): further tighten for 375px devices.
            RULE    - Global. No page CSS should override these rules.
   v3.12.0: SECTION HEADING SYSTEM (2026-03-06) — DOC-02 §4.1 / www-B §B.1 compliance
          PROBLEM - .section-title selector did not cover .sdx-card-section h2.
                    Pages using h2 inside .sdx-card-section received no global rule
                    and fell through to browser defaults. Root cause of h2 alignment
                    inconsistency across landing, iso, living-tower, about.
          PROBLEM - Amber accent underline (border-bottom: 2px solid var(--page-accent))
                    existed only in living-tower.css and about.css as duplicated
                    per-page rules. Not canonical. Not in global.css. ISO and landing
                    had no underline at all — visual inconsistency across all pages.
          PROBLEM - .eyebrow had no global rule. Defined per-page with drift in
                    font-size, letter-spacing, colour, and margin values.
          PROBLEM - .section-intro text-align: left conflicted with centred heading
                    system. Container was centred (margin: 0 auto) but text ran left,
                    producing ragged layout under centred h2. Corrected to center.
          FIXED   - .section-title selector expanded to include .sdx-card-section h2.
                    Both selectors now share the same canonical rule.
          FIXED   - Amber underline added to canonical .section-title rule:
                    padding-bottom: 0.75rem; border-bottom: 2px solid var(--page-accent).
                    Per-page border-bottom rules in living-tower.css and about.css
                    are now redundant and MUST be removed on next touch.
          FIXED   - Dark mode amber underline added at reduced opacity (0.30) per
                    about.css §10 pattern. Prevents flare on dark card surfaces.
          FIXED   - .section-intro text-align: left → center. max-width tightened
                    to 52rem (matches hero-content constraint) for consistent column width.
          ADDED   - .eyebrow canonical rule. font-size: var(--small), weight 700,
                    letter-spacing 0.12em, text-transform uppercase,
                    color: var(--page-primary), display: block, margin-bottom: 0.75rem.
                    Per-page eyebrow rules are now redundant and MUST be removed on
                    next touch of each page CSS file.
          Minor version bump per §14: canonical rules added/corrected in shared components.
- v3.11.0: HERO TYPOGRAPHY FIX (2026-03-06) — DOC-02 §7.2 compliance
          FIXED   - .headline line-height: 1.1 → 1.3. At large clamp sizes (96px),
                    1.1 produced 106px line height — too tight. 1.3 gives 125px,
                    matching comfortable reading rhythm for display type.
                    DOC-02 §7.2.1 HARD RULE: page CSS MUST NOT override line-height.
                    Root cause of recurring per-page hero drift.
          FIXED   - .tagline margin: 0 0 2.5rem → 1.25rem 0 2.5rem.
                    Zero top margin collapsed tagline against headline with no
                    breathing room between them. 1.25rem top margin is the
                    canonical gap between headline and tagline.
                    DOC-02 §7.2.2 HARD RULE: page CSS MUST NOT override margin-top.
                    Root cause of recurring per-page hero typography drift.
          Minor version bump per §14: canonical rule values corrected in existing rules.
- v3.10.0: KOREAN FONT STACK (2026-03-06) — BKT-DOC-www-D v1.0.0 amendment
          ADDED   - @font-face DECLARATIONS: Noto Sans KR (ko).
                    Three weights (400, 500, 700). font-display: swap.
                    unicode-range: Hangul Syllables U+AC00-D7AF, Hangul Jamo U+1100-11FF,
                    Hangul Compatibility Jamo U+3130-318F, Jamo Extended-A U+A960-A97F,
                    Jamo Extended-B U+D7B0-D7FF, Latin block U+0000-00FF.
                    Absolute /assets/fonts/noto-sans-kr/ paths. D.3.1 / D.3.3.
          ADDED   - :root[lang="ko"] override block. --text-font and --headline-font
                    set to Noto Sans KR with Apple SD Gothic Neo / Malgun Gothic
                    system fallback chain (macOS/iOS and Windows respectively). D.2.1.
          NOTE    - ko is font-stack-ready. NOT added to languages.json.
                    Locale files (core/ko.json etc.) do not yet exist.
                    D.7 status: font stack DEPLOYED, locale files PENDING.
                    Promote to languages.json only when core/ko.json is complete. D.7 HARD RULE.
          Minor version bump per §14: new @font-face block + new :root[lang] block added.
- v3.9.0: FONT & LANGUAGE HANDLING (2026-03-06) — BKT-DOC-www-D v1.0.0
          ADDED   - @font-face DECLARATIONS section: self-hosted Noto Sans SC/TC/JP/Thai.
                    Three weights (400, 500, 700) per family. font-display: swap.
                    unicode-range per D.3.2 table. Absolute /assets/fonts/ paths.
                    Canonical section header per D.8 HARD RULE.
          ADDED   - LOCALE FONT STACK OVERRIDES section: :root[lang] blocks for
                    zh-CN, zh-TW, ja, th. Overrides --text-font and --headline-font.
                    Canonical section header per D.8 HARD RULE.
                    Latin locales render correctly via system fonts — no @font-face.
          NOTE    - zh-CN: locale files already live in core/ and page namespaces (D.7 PARTIAL).
                    @font-face now declared. Font stack becomes FULL on WOFF2 file deployment.
          Minor version bump per §14: new sections added.
          FIXED   - .card border: 1px → 1.5px solid var(--border).
                    Root cause: PIL-14 §6 and all pillar docs specify 1.5px. global.css had 1px.
                    Discrepancy caught during landing page evaluation (HOWTO F2/I5).
                    1.5px is the canonical card border weight across all pages.
- v3.8.0: EDUTOWER COMPONENT TOKENS (2026-03-03)
          ADDED   - --sdx-color-edutower-cream (#f9f4e4) — MamaDEX feature card surface
          ADDED   - --sdx-color-edutower-sand (#eaceb1) — stat card warm apricot-tan surface
          ADDED   - --sdx-color-edutower-umber (#51531f) — stat number dark olive-green text
          Minor version bump per §14: token additions require minor version bump.
- v3.7.1: PORTRAIT STRIP ARROW BUTTON RESET (2026-03-02)
          FIXED   - .strip-shell .arrow: added browser reset (background:none, border:none,
                    padding:0, appearance:none). Browser default <button> styles were
                    overriding the arrow positioning rules, rendering arrows as grey
                    rectangular blocks instead of transparent containers for the .glyph circle.
- v3.7.0: PORTRAIT STRIP COMPONENT (2026-03-01)
          ADDED   - .mamas-strip shared component block. Geometry and interaction
                    tokens only. No colours hardcoded — all via var(--page-primary),
                    var(--border), var(--line), var(--fg), var(--muted), var(--card).
                    Per-pillar sizing overrides in assets/css/[pillar]/partials/[pillar]-slider.css.
                    JS reads --strip-item-w and --strip-gap from :root.
- v3.6.2: HERO INTRO BACKDROP SCRIM (2026-02-28)
          RULE    - Pages MUST NOT override background, padding, or border-radius
                    on .hero .intro. These are now canonical. font-size and max-width
                    remain the only permitted page-level overrides.
- v3.6.1: HERO INTRO TEXT FIX (2026-02-28)
          FIXED   - .intro color: rgba(32,34,32,0.92) is a static near-black primitive.
                    It does not respond to [data-theme] and is fatal over photography.
                    Violation: Section 4.6 (static primitive forbidden for themed surfaces).
          ADDED   - .hero .intro rule: color: #ffffff + text-shadow for legibility.
                    Same basis as .headline permanent exception (v3.3.0 changelog).
                    Hero text is always white over photography. Cannot be tokenised.
                    EXCEPTION: permanent — documented here per governance standard.
          FIXED   - .intro bare rule: color changed from rgba(32,34,32,0.92) to
                    var(--muted). Non-hero .intro text must respond to [data-theme].
          FIXED   - .hero .headline + .intro margin-top: clamp(12px,2.4vw,28px) →
                    clamp(0.75rem, 2.4vw, 1.75rem). Section 15.6 unit violation: px
                    forbidden in margin. Converted to rem (12px=0.75rem, 28px=1.75rem).
          EFFECT  - page-level .hero .intro overrides in about.css, living-tower.css
                    are now redundant. May be removed when those files are next touched.
- v3.6.0: UNIT STANDARD COMPLIANCE (2026-02-27)
          FIXED   - All px spacing and font-size values converted to rem per
                    Whitepaper Section 15 (Unit Standard). Typography tokens,
                    component rules, heading margins, list margins all converted.
                    Exceptions retained: border widths, hero min-heights,
                    fixed layout widths, grid breakpoints, icon/asset dimensions.
                    em units retired — all relative sizing now uses rem exclusively.
- v3.5.8: NAVLINK AND BRAND-LINK HOVER FIX (2026-02-25)
          FIXED   - a:hover coral catch-all now excludes [class*="navlink"] and
                    [class*="brand-link"]. navlink: dark mode var(--green) = warm
                    sand #c4b89a — coral override was wrong. brand-link: hover uses
                    amber glow treatment — coral text colour was wrong. Both fixed
                    here in global.css per spec ownership rules.
- v3.5.7: SLATE TOKEN PROHIBITION (2026-02-25)
          ADDED   - Hard rule comment on --sdx-color-slate and --sdx-color-slate-dark.
                    These are static primitives (#374151, #111827). They DO NOT respond
                    to [data-theme] and produce invisible text in dark mode when used
                    for body text on themed surfaces.
                    Page CSS MUST use var(--fg) and var(--muted) exclusively.
                    Recurring violation across contact.css, about.css, living-tower.css.
- v3.5.6: GLASS SECONDARY BUTTON (2026-02-25)
          FIXED   - .btn-hero-secondary: rgba(255,255,255,0.92) was near-solid white —
                    not glass. Replaced with Apple-style glass:
                    background rgba(255,255,255,0.18), backdrop-filter blur(12px).
                    Photography shows through the frosted surface.
                    Text colour corrected to #ffffff — was var(--fg) which goes dark
                    in light mode, illegible over photography.
                    Dark mode simplified — same glass treatment already works.
- v3.5.5: CTA BAND SEPARATOR FIX (2026-02-25)
          FIXED   - .sdx-cta-band background: var(--card) → var(--bg).
                    Band is a page-level element, not a card surface. Using var(--card)
                    (white) made it indistinct from the sdx-card-sections above it.
                    Using var(--bg) (page background tint) creates genuine surface contrast —
                    the section break is visible without relying on border weight alone.
                    border-top strengthened from 1px to 2px for additional definition.
- v3.5.4: DARK MODE TEXT FIX (2026-02-25)
          FIXED   - All text colour rules using static --sdx-color-slate-dark and
                    --sdx-color-slate replaced with theme-responsive --fg and --muted.
                    This was the root cause of invisible text in dark mode across all
                    pages: near-black static tokens on near-black dark backgrounds.
                    headings, body, card text, section intros, name/role/bio all affected.
                    Exception: .tippy-sentrale retains sdx-color-slate-dark (always on
                    white background — permanent exception).
- v3.5.3: BUTTON AND LINK FIXES (2026-02-25)
          FIXED   - .btn-hero-primary: shadow strengthened. Added inset white ring
                    (inset 0 0 0 1px rgba(255,255,255,0.25)) to lift button off any
                    photography. Outer shadow raised to rgba(0,0,0,0.50). Previously
                    0.30 — too weak against dark green/brown photography.
          FIXED   - a:hover coral rule: was a catch-all hitting button text on hover.
                    Now excludes all btn-*, sdx-btn-*, contact-cta-*, and pillar-*
                    classes. Buttons manage their own hover colour. Red text on button
                    hover is inaccessible for colour-blind users.
- v3.5.2: CANONICAL HERO BUTTONS (2026-02-25)
          ADDED   - .btn-hero-primary / .btn-hero-secondary: canonical hero button pair.
                    Previously defined per-page with drift (wrong borders, inconsistent shadows).
                    .btn-hero-secondary: border ALWAYS rgba(255,255,255,0.60) — white, not
                    page-colour. Page-colour borders are invisible or muddy over photography.
                    Page CSS overrides .btn-hero-primary background/shadow only.
                    .btn-hero-secondary: NO page overrides permitted.
          ADDED   - [data-theme="dark"] .btn-hero-secondary: canonical dark mode state.
- v3.5.1: CANONICAL HERO TYPOGRAPHY (2026-02-25)
          ADDED   - .tagline: canonical hero tagline rule. clamp(1.25rem, 3vw, 2rem),
                    weight 600, colour via --page-secondary. All pages inherit.
                    Page CSS must not override font-size or font-weight.
                    Previously defined per-page with inconsistent clamp values.
          ADDED   - Clarifying comment on .card: background is a default, page CSS
                    may override per card type. Hover rule governs, not background.
- v3.5.0: DESIGN SYSTEM v4.0.0 COMPLIANCE (2026-02-25)
          ADDED   - .sdx-card-section: canonical white card section container.
                    White var(--card) surface on page-bg canvas. max-width 1200px.
                    This is the ONLY approved section architecture for all pages.
                    Replaces both the About floating-card and EduTower edu-band patterns.
          ADDED   - .sdx-card: canonical content card. border-left accent always present
                    at rest. Hover = lift + shadow only. No border changes, no layout shift.
          ADDED   - .sdx-cta-band: canonical page-closing CTA component. Mandatory on all
                    pages as the final section before footer. Adapts via page tokens.
          FIXED   - .card hover: removed border-appearance-on-hover pattern. Lift only.
          FIXED   - .btn-primary inside card: hover = colour + glow, no translateY.
                    Standalone buttons retain translateY lift.
          ADDED   - .sdx-btn-primary, .sdx-btn-secondary: canonical button classes with
                    correct context-aware hover behaviour via CSS :where() scoping.
          RETIRED - .section / .sdx-section alternating tint pattern. These classes
                    remain for backward compat but no longer define backgrounds.
                    edu-band / edu-section pattern is retired.
- v3.4.0: V3.0.0 WHITEPAPER COMPLIANCE (2026-02-24)
          ADDED   - UI surface token block (--sdx-color-ui-*): 12 tokens covering
                    border, footer-tint, and social-* values for both light and dark
                    theme alias layer. These are consumed exclusively by themes.css.
                    No page CSS uses them directly.
          WIRED   - themes.css light and dark blocks now reference these tokens
                    via var() — zero hex literals remain in themes.css.
          RECORD  - Three permanent exceptions in themes.css dark block remain:
                    --green (#c4b89a), --header-bg (#1f1912), --header-fg (#f0ebe3).
                    No token maps to universal dark nav/header surface values.
- v3.3.0: DAY 1 COMPLIANCE (2026-02-24)
          FIXED   - body rule cascade break: replaced static --sdx-color-shell-bg / --sdx-color-slate-dark
                    with theme alias tokens --bg / --fg so body responds to [data-theme] switching
          ADDED   - --sdx-color-white: #ffffff — required by themes.css light block (--card)
          ADDED   - --sdx-color-warm-white: hsl(60 20% 98%) — required by themes.css light block (--surface-alt, --header-bg)
          REMOVED - Five deprecated tokens (golden-auburn, coral-soft, coral-brown, reporters-text, terracotta)
                    No page CSS written against them. Safe to remove per Colour Map v2.9.0 Section 14.
          REMOVED - --sdx-color-purple-vivid (#a855f7) — no pillar assignment, no consuming page
          EXCEPTION RECORD:
            - .headline color: #ffffff — hero text over photography. Must be white regardless of theme.
              Cannot be tokenised. Confirmed permanent exception per Hero Vignette Principle.
            - .tippy-sentrale background: #ffffff — tooltip always white regardless of theme.
              Confirmed permanent exception. Not a themed surface.
            - .tippy-sentrale border: #d1d5db — tooltip border. Confirmed permanent exception.
  - v3.2.0: COLOUR MAP v2.9.0 COMPLIANCE (2026-02-24)
            UPDATED - Header references to Colour Map/Design System v2.9.0
            UPDATED - Canonical root token banner to Colour Map v2.9.0 Section 3
            NORMALISED - Token commentary for audit-friendly governance
            NOTE    - Page CSS structural standard is defined in Colour Map v2.9.0 (page stylesheets must follow the scaffold)
  - v3.1.0: COLOUR MAP v2.7.0 COMPLIANCE (2026-02-23)
            ADDED   - Six MamaDEX locked palette tokens (v2.6.0 normative):
                      --sdx-color-mama-depth, --sdx-color-mama-earth, --sdx-color-mama-cyan,
                      --sdx-color-mama-bg, --sdx-color-mama-dark-base, --sdx-color-mama-dark-surface
            ADDED   - Fifteen page surface tokens (v2.6.x normative):
                      Living Tower, Viridians, Eco Guilds, EduTower, HEKTO
                      dark-base, dark-surface, and bg tokens
            ADDED   - Five Living Tower component tokens (v2.6.7 normative):
                      --tlt-mamadex-start, --tlt-mamadex-end, --tlt-reporters,
                      --tlt-reporters-text, --tlt-guild
            ADDED   - --sdx-color-leaf-green (#9ec93c) referenced across pillar specs
            MOVED   - --sdx-color-terracotta from new-tokens block to deprecated block
            REMOVED - --sdx-color-golden (#c89a3a) — unregistered token
            FIXED   - --sdx-color-moon-glow comment
            UPDATED - Header compliance reference: v2.5.0 → v2.7.0
  - v3.0.0: COLOUR MAP v2.5.0 COMPLIANCE (2026-02-23)
            ADDED   - Seven new v2.5.0 tokens
            MARKED  - Four deprecated tokens with DEPRECATED comments
            REMOVED - Glass pill from .intro class
  - v2.0.2: SECTION STYLING FIX (2026-01-14)
  - v2.0.1: V7 COMPLIANCE UPDATE
  - v2.0.0: MAJOR - Implements Colour Map v2.2.0 canonical token set
  - v1.3.0: Reduced .hero-wrap min-height from 620px to 450px
  - v1.2.0: Added global typography (h1–h6), section h2 defaults
  - v1.1.6: Generic hyperlinks turn accent-red on hover
*/

/* ==========================================================================
   CANONICAL ROOT TOKEN SET - Colour Map v2.9.0 Section 3
   These are the ONLY authorized color tokens for the Buktika system.
   Any deviation requires major whitepaper revision.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     FOUNDATION AND COORDINATION
     -------------------------------------------------------------------------- */
  --sdx-color-stone:     #78716c;  /* Foundation, ISO, earthen stability  */
  --sdx-color-moss:      #4a5a4f;  /* Eco Guild, coordination, regional   */
  --sdx-color-dark-card: #362c22;  /* Universal dark raised card surface */

  /* --------------------------------------------------------------------------
     LIVING TOWER PAGE SURFACES (LOCKED v2.6.7)
     -------------------------------------------------------------------------- */
  --sdx-color-livingtower-bg:           #f5f3ef;  /* Living Tower page background: warm stone dust  */
  --sdx-color-livingtower-dark-base:    #0c0a07;  /* Living Tower dark base: night on the savanna   */
  --sdx-color-livingtower-dark-surface: #29210f;  /* Living Tower dark surfaces: soil dark cards    */
  --sdx-color-livingtower-light-text:   #f0ebe3;  /* Dark theme text: warm off-white  14.6:1 on dark-base */
  --sdx-color-livingtower-warm-sand:    #c4b89a;  /* Dark theme muted: warm sand       9.2:1 on dark-base */

  /* --------------------------------------------------------------------------
     CORE PILLAR PRIMARIES
     -------------------------------------------------------------------------- */
  --sdx-color-green-deep:     #2e5d3a;  /* Deep forest, Eco Guilds, growth     */
  --sdx-color-green-soft:     #3a6f54;  /* Canopy, transition                  */
  --sdx-color-purple-deep:    #4b2a56;  /* Governance, Viridians               */
  --sdx-color-teal-deep:      #2f5c68;  /* Water, HEKTO, ocean, Contact        */
  

  /* --------------------------------------------------------------------------
     VIRIDIANS PAGE SURFACES (LOCKED v2.6.2)
     -------------------------------------------------------------------------- */
  --sdx-color-viridians-bg:           #f8f7fa;  /* Viridians page background: cool near-white with purple whisper */
  --sdx-color-viridians-dark-base:    #0f0d14;  /* Viridians dark base: near-black with purple undertone         */
  --sdx-color-viridians-dark-surface: #1a1625;  /* Viridians dark surface: card/surface                          */
  --sdx-color-viridians-card-mid:     #4b4261;  /* Viridians hero card mid surface: dark desaturated purple-grey  */
  --sdx-color-viridians-card-deep:    #1d1829;  /* Viridians hero card deep surface: near-black, purple undertone */

  /* --------------------------------------------------------------------------
     ECO GUILDS PAGE SURFACES (LOCKED v2.6.2)
     -------------------------------------------------------------------------- */
  --sdx-color-eco-bg:           #fbf8ef;  /* Eco Guilds page background: cool forest breath  */
  --sdx-color-eco-dark-base:    #0a0f0b;  /* Eco Guilds dark base: night forest               */
  --sdx-color-eco-dark-surface: #111a13;  /* Eco Guilds dark surface: forest floor cards      */
  --sdx-color-eco-muted:        #495b4e;  /* Eco channel hero bar: muted earthy green          */
  --sdx-color-eco-mint:         #97d8a8;  /* Eco badge light surface: mint green               */
  --sdx-color-eco-sage:         #cfddb0;  /* Eco badge text: sage-white                        */
  --sdx-color-eco-border:       #accbb4;  /* Eco badge border base: medium mint                */
  --sdx-color-eco-khaki:        #d8d8bb;  /* Eco badge border warm: khaki                      */


  /* --------------------------------------------------------------------------
     RESTORATION CHANNEL ACCENT (v3.23.0)
     Golden-green glow colours for Page 3 hero card invitation glow.
     -------------------------------------------------------------------------- */
  --sdx-color-restoration-glow: #83af37;  /* Hero card glow stop 1: golden-green        */
  --sdx-color-restoration-lime: #bef264;  /* Hero card glow stop 2: bright lime accent  */

  /* --------------------------------------------------------------------------
     EDUTOWER PAGE SURFACES (LOCKED)
     -------------------------------------------------------------------------- */
  --sdx-color-edutower-bg:           #f4f7f8;  /* EduTower page background: cool near-white with teal whisper */
  --sdx-color-edutower-dark-base:    #080e10;  /* EduTower dark base: night sky over the mountain             */
  --sdx-color-edutower-dark-surface: #0f1e23;  /* EduTower dark surface: deep teal-dark                       */
  --sdx-color-edutower-blue:         #56747b;  /* muted teal-blue, shirt register             */
  --sdx-color-edutower-community:    #d08e10;  /* warm amber-gold, community stream           */
  --sdx-color-edutower-cream:        #f9f4e4;  /* warm cream — MamaDEX feature card surface   */
  --sdx-color-edutower-sand:         #eaceb1;  /* warm apricot-tan — stat card surface        */
  --sdx-color-edutower-umber:        #51531f;  /* dark olive-green — stat number text         */

  /* --------------------------------------------------------------------------
     HEKTO PAGE SURFACES (LOCKED v2.6.4)
     -------------------------------------------------------------------------- */
  --sdx-color-hekto-bg:           #f5f6f4;  /* HEKTO page background: stone-cool near-white  */
  --sdx-color-hekto-dark-base:    #080b09;  /* HEKTO dark base: river at night                */
  --sdx-color-hekto-dark-surface: #0e1a14;  /* HEKTO dark surface: deep forest dark, cards    */

  /* --------------------------------------------------------------------------
     WARM PILLAR FAMILY
     -------------------------------------------------------------------------- */
  --sdx-color-coral:          #d64a35;  /* Structural borders, system warning (harsh)  */

  /* --------------------------------------------------------------------------
     MAMADEX LOCKED PALETTE (CANONICAL v2.6.0)
     -------------------------------------------------------------------------- */
  --sdx-color-mama-depth:        #220f27;  /* MamaDEX depth — grounding shadows, soul     */
  --sdx-color-mama-earth:        #8b3a1a;  /* MamaDEX earth — terracotta strength         */
  --sdx-color-mama-cyan:         #34c6d0;  /* MamaDEX cyan — unexpected joy, badge dots   */
  --sdx-color-mama-bg:           #fdf6ee;  /* MamaDEX background — warm parchment         */
  --sdx-color-mama-dark-base:    #150a18;  /* MamaDEX dark mode base — night ceremony     */
  --sdx-color-mama-dark-surface: #220f27;  /* MamaDEX dark mode surface — card face       */
  --sdx-color-mama-violet:       #8b5cf6;  /* MamaDEX Social — human, joyful, inclusive   */
  --sdx-color-mama-violet-light: #ede9fe;  /* MamaDEX Social tint — badge/hover surface   */

  /* --------------------------------------------------------------------------
     REPORTERS (v2.4.0 tokens — pillar assignment superseded v2.5.0.
     Tokens remain active for reuse in any appropriate context.
     NOT deprecated. See Colour Map v2.9.0 Appendix B.)
     -------------------------------------------------------------------------- */
  --sdx-color-golden-joy:   #f59e0b;  /* Sunny amber — available for reuse   */
  --sdx-color-peach-soft:   #fbbf24;  /* Peach-gold — available for reuse    */

  /* --------------------------------------------------------------------------
     NEW v2.5.0 TOKENS
     -------------------------------------------------------------------------- */
  --sdx-color-mama-amber:     #f5b014;  /* Universal savanna amber             */
                                        /*   Used: Landing, ISO, Reporters,      */
                                        /*   About, Teams, Living Tower        */
  --sdx-color-mama-gold:      #c8861a;  /* Warm brass / legal gold             */
                                        /*   Used: Legal family, Teams depth   */
  --sdx-color-reporters-orange: #d94328;  /* Red earth, birds of prey, vitality  */
                                        /*   Used: Reporters page only           */
  --sdx-color-stem-olive:     #464820;  /* Tree bark, dry grass shadow, earth  */
                                        /*   Used: Teams, Reporters, ISO, About, */
                                        /*   Contact, Landing depth            */
  --sdx-color-lunar-teal:     #0d4a4a;  /* Deep night sky — FAQ and 404 only   */
  --sdx-color-moon-glow:      #e8f5f0;  /* Lunar white — FAQ/404 accent/tagline*/
  --sdx-color-leaf-green:     #9ec93c;  /* Splash accent — Viridians, Eco,     */
                                        /*   EduTower, HEKTO dot accents       */

  /* --------------------------------------------------------------------------
     LIVING TOWER COMPONENT TOKENS (LOCKED v2.6.7)
     -------------------------------------------------------------------------- */
  --tlt-mamadex-start:  #f5b014;  /* Living Tower: MamaDEX card gradient start */
  --tlt-mamadex-end:    #8b3a1a;  /* Living Tower: MamaDEX card gradient end   */
  --tlt-reporters:        #f5b014;  /* Living Tower: Reporters card border         */
  --tlt-reporters-text:   #f5b014;  /* Living Tower: Reporters text accent         */
  --tlt-guild:          #4a5a4f;  /* Living Tower: Eco Guild (moss)            */

  /* --------------------------------------------------------------------------
     NEUTRALS AND TEXT
     HARD RULE: --sdx-color-slate and --sdx-color-slate-dark are STATIC primitives.
     They are near-black (#374151, #111827) and DO NOT respond to [data-theme].
     Page CSS MUST NOT use these for any text that appears on a themed surface.
     Use var(--fg) for primary text. Use var(--muted) for secondary text.
     The only permitted use of these tokens in page CSS is:
       - Tooltip text (always on #ffffff background — confirmed exception)
       - Button text where the button background is always a known light colour
     Every other use will produce invisible text in dark mode.
     -------------------------------------------------------------------------- */
  --sdx-color-slate:          #374151;        /* PRIMITIVE — use var(--muted) in page CSS */
  --sdx-color-slate-dark:     #111827;        /* PRIMITIVE — use var(--fg) in page CSS    */
  --sdx-color-shell-bg:       #f3f4f6;        /* Base page background (80% rule)     */
  --sdx-color-white:          #ffffff;        /* Card surface (light theme)          */
  --sdx-color-black:          #000000;        /* PRIMITIVE — pure black for shadows  */
  --sdx-color-warm-white:     hsl(60 20% 98%); /* Warm near-white — header-bg, surface-alt (light theme) */

  /* --------------------------------------------------------------------------
     UI SURFACE TOKENS — Theme alias layer primitives (v3.0.0)
     Consumed exclusively by themes.css. No page CSS uses these directly.
     -------------------------------------------------------------------------- */
  --sdx-color-ui-border-light:              rgba(211, 196, 170, 0.35);
  --sdx-color-ui-footer-tint-light:         hsla(214.7, 50%, 85.1%, 0.17);
  --sdx-color-ui-social-bg-light:           rgba(0, 0, 0, 0.03);
  --sdx-color-ui-social-border-light:       rgba(0, 0, 0, 0.06);
  --sdx-color-ui-social-bg-light-hover:     rgba(0, 0, 0, 0.06);
  --sdx-color-ui-social-border-light-hover: rgba(0, 0, 0, 0.12);

  --sdx-color-ui-border-dark:               rgba(245, 176, 20, 0.22);
  --sdx-color-ui-footer-tint-dark:          rgba(15, 12, 8, 0.60);
  --sdx-color-ui-social-bg-dark:            rgba(245, 176, 20, 0.08);
  --sdx-color-ui-social-border-dark:        rgba(245, 176, 20, 0.18);
  --sdx-color-ui-social-bg-dark-hover:      rgba(245, 176, 20, 0.16);
  --sdx-color-ui-social-border-dark-hover:  rgba(245, 176, 20, 0.40);

  --sdx-color-ui-popup-surface:             #123543;  /* Dropdown or popup panel surface — theme-independent deep teal */

  /* --------------------------------------------------------------------------
     LEGACY COMPATIBILITY ALIASES (Use --sdx-color-* instead)
     These exist only for backwards compatibility with older page CSS.
     New code MUST use canonical names above.
     -------------------------------------------------------------------------- */
  --accent-red: var(--sdx-color-coral);
  --olive-purple: var(--sdx-color-purple-deep);

  /*
   * SEMANTIC THEME TOKENS REMOVED FROM HERE — now live in themes.css.
   *
   * --bg, --fg, --muted, --card, --border, --green are defined per-theme
   * in /assets/css/themes.css under :root[data-theme="light"] and
   * :root[data-theme="dark"]. They cascade into all components from there.
   *
   * --green was previously an alias here; it is now theme-sensitive
   * because nav link colour must change between light and dark.
   */

  /* --------------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     -------------------------------------------------------------------------- */
  --headline-font: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --text-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Heading scales - Professional sizing (Design System v2.9.0 Section 8) */
  --h1: clamp(3.75rem, 8vw, 6rem);      /* Hero headlines: 60-96px */
  --h2: clamp(1.375rem, 3.5vw, 2rem);  /* Section headers: 22-32px */
  --h3: 1.25rem;                        /* Card/component titles: 20px */
  --h4: 1.125rem;                       /* Subsection headers: 18px */
  --h5: 1rem;                           /* Minor headings: 16px */
  --h6: 0.875rem;                       /* Small headings: 14px */

  /* Text scales */
  --lead: clamp(1.1875rem, 2.8vw, 1.5rem);  /* Intro paragraphs: 19-24px */
  --body: 1rem;                              /* Standard text: 16px */
  --small: 0.8125rem;                        /* Helper text, captions: 13px */

  /* --------------------------------------------------------------------------
     COMPONENT TOKENS
     -------------------------------------------------------------------------- */
  --radius: 0.75rem;                  /* Standard border-radius: 12px */
  --card-shadow: 0 14px 30px rgba(15, 23, 42, 0.08), 
                 0 1px 2px rgba(15, 23, 42, 0.06);
  --card-shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.12),
                       0 2px 4px rgba(15, 23, 42, 0.09);

  /* --------------------------------------------------------------------------
     HERO TOKENS
     -------------------------------------------------------------------------- */
  --hero-min: 1000px;                  /* Desktop default — KEEP px: fixed photographic frame */
  --hero-pad-top: 4.5rem;             /* 72px */
  --hero-pad-bot: 2.5rem;             /* 40px */
  --hero: none;                       /* Pages set background-image */
}

/* ==========================================================================
   @font-face DECLARATIONS — Self-hosted CJK and Thai typefaces
   BKT-DOC-www-D §D.3.3 — Canonical section header required per D.8 HARD RULE.
   All files: WOFF2 only. font-display: swap mandatory. Absolute /assets/fonts/ paths.
   Weights: 400, 500, 700 only. No other weights deployed (D.3.3 HARD RULE).
   unicode-range per D.3.2 table — MUST match actual glyph coverage of subset file.
   Latin locales: NO @font-face. System fonts are sufficient. Adding @font-face
   for Latin locales creates dead code and violates D.8 HARD RULE.
   ========================================================================== */

/* Noto Sans SC — Simplified Chinese (zh-CN)
   GB2312 core set + CJK extensions + common punctuation + Latin block.
   Subsetted: ~200–400 KB per weight. Full file: ~30 MB. */
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sc/NotoSansSC-Regular-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sc/NotoSansSC-Medium-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-sc/NotoSansSC-Bold-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

/* Noto Sans TC — Traditional Chinese (zh-TW)
   Same unicode block coverage as SC. Glyph shapes differ at font level. */
@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-tc/NotoSansTC-Regular-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-tc/NotoSansTC-Medium-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans TC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-tc/NotoSansTC-Bold-subset.woff2") format("woff2");
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+F900-FAFF, U+2E80-2EFF, U+3000-303F, U+0000-00FF;
}

/* Noto Sans JP — Japanese (ja)
   Hiragana, Katakana, Fullwidth forms, CJK Ideographs used in Japanese. */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp/NotoSansJP-Regular-subset.woff2") format("woff2");
  unicode-range: U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FFF, U+3400-4DBF, U+3000-303F;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp/NotoSansJP-Medium-subset.woff2") format("woff2");
  unicode-range: U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FFF, U+3400-4DBF, U+3000-303F;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-jp/NotoSansJP-Bold-subset.woff2") format("woff2");
  unicode-range: U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FFF, U+3400-4DBF, U+3000-303F;
}

/* Noto Sans Thai — Thai script (th)
   Thai block only. Small range — ~40–80 KB per weight subsetted. */
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-thai/NotoSansThai-Regular-subset.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-thai/NotoSansThai-Medium-subset.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}

@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-thai/NotoSansThai-Bold-subset.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}

/* Noto Sans KR — Korean (ko)
   Hangul Syllables + Jamo + Compatibility Jamo + Jamo Extended A/B + Latin block.
   Subsetted: ~300–500 KB per weight. Full file: ~17 MB.
   D.7 status: font stack DEPLOYED — locale files pending. NOT in languages.json yet. */
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-kr/NotoSansKR-Regular-subset.woff2") format("woff2");
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-kr/NotoSansKR-Medium-subset.woff2") format("woff2");
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF, U+0000-00FF;
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-kr/NotoSansKR-Bold-subset.woff2") format("woff2");
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF, U+0000-00FF;
}

/* ==========================================================================
   LOCALE FONT STACK OVERRIDES — :root[lang] selectors
   BKT-DOC-www-D §D.2.1 — Canonical section header required per D.8 HARD RULE.
   Mechanism: language-switcher.js sets lang on document.documentElement.
   The cascade re-resolves --text-font and --headline-font immediately.
   All font-family: var(--text-font) and var(--headline-font) rules update
   on next paint. No JS font-loading API required.
   Fallback chains cover: macOS (PingFang, Hiragino), Windows (Microsoft YaHei,
   JhengHei, Yu Gothic, Leelawadee), iOS/Android (system CJK/Thai fonts).
   Fallbacks render correctly before WOFF2 loads and on load failure.
   HARD RULE: These blocks live in global.css ONLY. D.2 HARD RULE.
   HARD RULE: Selector is :root[lang] — matches document.documentElement.
   body[lang] selectors DO NOT match here. D.2 HARD RULE.
   ========================================================================== */

:root[lang="zh-CN"] {
  --text-font:     "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --headline-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:root[lang="zh-TW"] {
  --text-font:     "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --headline-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

:root[lang="ja"] {
  --text-font:     "Noto Sans JP", "Hiragino Kino Gothic ProN", "Yu Gothic", sans-serif;
  --headline-font: "Noto Sans JP", "Hiragino Kino Gothic ProN", "Yu Gothic", sans-serif;
}

:root[lang="th"] {
  --text-font:     "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
  --headline-font: "Noto Sans Thai", "Leelawadee UI", "Thonburi", sans-serif;
}

:root[lang="ko"] {
  --text-font:     "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --headline-font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}


/* ==========================================================================
   BASE RESET
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  padding-top: var(--header-height, 77px);  /* Add a body top offset so content doesn't hide under the fixed header */
  background-color: var(--bg);              /* Theme alias — defined in themes.css  */
  color: var(--fg);                         /* Theme alias — defined in themes.css  */
  font-family: var(--text-font);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY - Design System v2.9.0 Section 8
   ========================================================================== */

/* Headings - Shared baseline */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--headline-font);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1px;
  margin: 0 0 0.5rem 0;
  color: var(--fg);
}

/* Heading scales */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { 
  font-size: var(--h6); 
  color: var(--muted);
  font-weight: 600;
}

/* ==========================================================================
   SECTION STRUCTURE - Design System v4.0.0 / v3.12.0
   CANONICAL section heading, eyebrow, and intro patterns.
   Owned by global.css. Page CSS MUST NOT redefine these rules.
   Permitted page override: none on .section-title. See DOC-02 §4.1.
   ========================================================================== */

/* Eyebrow — uppercase descriptor above section h2.
   Colour via var(--page-primary) so it adapts to each pillar automatically.
   Per-page eyebrow rules are redundant after v3.12.0 and must be removed. */
.eyebrow {
  display: block;
  font-family: var(--text-font);
  font-size: var(--small);           /* 13px canonical minimum — DOC-02 §15.3 */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-primary);
  margin-bottom: 0.75rem;
}

/* Section title — centred, pillar-colour underline, headline font.
   Selector covers both .section-title class and h2 direct children of
   .sdx-card-section (the canonical section container) and .sdx-section (legacy).
   HARD RULE: page CSS MUST NOT override text-align, font-family, font-weight,
   or colour on this rule. DOC-02 §4.1 / www-B §B.1.
   v3.16.0 AMENDMENT: border-bottom now uses var(--page-primary) — pillar colour.
   Rationale: per-pillar underline provides subconscious wayfinding — the reader
   instantly maps the heading colour to the pillar they are in. Amber (--page-accent)
   is already the universal action/CTA signal (tagline, nav pip, CTA band). Using it
   also as a heading underline created signal noise. --page-primary is already the
   structural pillar colour (card border-left, links, focus rings) — the heading
   underline in the same colour is the natural extension of pillar identity.
   See DOC-02 §4.1 v2.1.0 for full rationale. */
.section-title,
.sdx-card-section > h2,
.sdx-section > h2 {
  font-family: var(--headline-font);
  font-size: clamp(1.75rem, 3vw, 2.25rem);  /* 28px → 36px fluid */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--fg);
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--page-primary);  /* pillar-colour underline — wayfinding */
}

/* Dark mode: reduce pillar underline opacity to prevent flare on dark surfaces. */
[data-theme="dark"] .section-title,
[data-theme="dark"] .sdx-card-section > h2,
[data-theme="dark"] .sdx-section > h2 {
  border-bottom-color: rgba(from var(--page-primary) r g b / 0.40);
}

/* Section intro — centred to match heading system.
   max-width: 52rem matches .hero-content constraint (DOC-02 §7.2.4).
   HARD RULE: page CSS MUST NOT override text-align or max-width. */
.section-intro {
  font-family: var(--text-font);
  font-size: 1.125rem;               /* 18px */
  line-height: 1.7;
  text-align: center;
  max-width: 52rem;
  margin: 1.25rem auto 2.5rem;       /* 1.25rem gap from underline; 2.5rem before content */
  color: var(--muted);
}

/* Mobile responsive section structure */
@media (max-width: 768px) {
  .section-title,
  .sdx-card-section > h2,
  .sdx-section > h2 {
    font-size: 1.75rem;              /* 28px floor on mobile */
  }

  .section-intro {
    font-size: 1rem;
    margin: 1rem auto 2rem;
  }
}

/* Legacy section heading defaults (backward compatibility) */
.section > h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Lead paragraph (prominent intros) */
.lead {
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--fg);
}

/* Small text helper */
.small {
  font-size: var(--small);
  color: var(--muted);
}

/* Body text */
p {
  margin: 0 0 1em 0;
  line-height: 1.6;
  color: var(--muted);
}

/* Lists - Comfortable spacing */
ul, ol {
  padding-left: 1.5rem;
  margin: 0.5em 0 1em;
}

li {
  margin: 0.25rem 0;
  line-height: 1.6;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a, a:visited {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Generic link hover uses coral (--sdx-color-coral)
   RULE: Exclude btn-*, sdx-btn-*, *cta* (all call-to-action classes), pillar-*,
   navlink, brand-link, breadcrumb-link, reporter-channel-link, utility-auth-link,
   and utility-contact-link classes.
   Buttons and header nav/brand links manage their own hover colour.
   navlink excluded: dark mode uses var(--green) (warm sand #c4b89a) — coral would be wrong.
   brand-link excluded: brand hover uses amber glow treatment, not coral text colour.
   breadcrumb-link excluded: breadcrumb hover uses var(--page-accent).
   cta excluded (generic [class*="cta"]): all CTA buttons — contact-cta, reporter-lightbox-cta,
   vtsb-lightbox-cta, vcc-lightbox-cta, veaw-popup__cta, etc. — own their hover colour and
   must not turn red. Subsumes the former contact-cta and reporter-lightbox-cta exclusions.
   reporter-channel-link excluded: Reporters roster channel pill links — white text on hover fill.
   utility-auth-link excluded: utility panel auth pill — always-dark surface, amber/light text.
   utility-contact-link excluded: utility panel contact link — always-dark surface, light text.
   Any <a> with a btn-* class must not turn red on hover. */
a:not([class*="btn"]):not([class*="sdx-btn"]):not([class*="cta"]):not([class*="pillar"]):not([class*="navlink"]):not([class*="brand-link"]):not([class*="direct-link"]):not([class*="breadcrumb-link"]):not([class*="reporter-channel-link"]):not([class*="utility-auth-link"]):not([class*="utility-contact-link"]):not(footer a):hover {
    color: var(--sdx-color-coral);
}

/* ==========================================================================
   HERO SYSTEM - Design System v2.9.0 Section 8
   Pages MUST override with pillar-specific heights and overlays
   ========================================================================== */

.hero-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  
  /* Default background - pages override with pillar-specific images/overlays */
  background-image: var(--hero);
  background-size: cover;
  background-position: 50% 40%;
  
  /* Safe fallback height - pages MUST override with responsive heights */
  min-height: 450px;
  
  display: flex;
  align-items: center;
}

.hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem 2rem;
  text-align: center;
  width: 100%;
  min-height: 1000px;
}

/* Single-column layout by default */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  justify-items: center;
}

/* Two-column when orb exists */
.hero-grid:has(.hero-orb),
.hero-grid.has-hero-orb {
  grid-template-columns: minmax(220px, 420px) 1fr;
}

/* Orb column */
.hero-orb {
  width: 100%;
  max-width: 420px;
  justify-self: start;
}

/* Text column */
.hero-body {
  grid-column: 1 / -1;
  max-width: 100%;
  justify-self: center;
  text-align: inherit;
}

.hero-grid:has(.hero-orb) .hero-body,
.hero-grid.has-hero-orb .hero-body {
  grid-column: 2;
  justify-self: center;
}

/* Hero headline - Pages override with pillar-specific sizes
   EXCEPTION: color: #ffffff is a permanent confirmed exception.
   Hero text is always white over photography regardless of theme.
   Cannot be tokenised. See v3.3.0 changelog. */
.headline {
  margin: 0;
  line-height: 1.3;  /* DOC-02 §7.2.1: 1.1 was too tight at large clamp sizes — corrected v3.11.0 */
  letter-spacing: 0.1px;
  font-family: var(--headline-font);
  font-weight: 700;
  font-size: var(--h1);
  color: #ffffff;  /* EXCEPTION: permanent — see v3.3.0 changelog */
  
  /* Default text shadow for readability over images */
  text-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.8),
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero .headline + .intro {
  margin-top: clamp(0.75rem, 2.4vw, 1.75rem);  /* FIXED v3.6.1: was clamp(12px,2.4vw,28px) — Section 15.6 unit violation */
}

/* Tagline — sits between headline and intro. Canonical scale for all pages.
   Colour is set via --page-secondary in each page CSS (always amber or pillar accent).
   Pages MUST NOT override font-size or font-weight. */
.tagline {
  font-family: var(--text-font);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--page-secondary, var(--sdx-color-mama-amber));
  margin: 1.25rem 0 2.5rem;  /* DOC-02 §7.2.2: top 1.25rem = breathing space after headline. HARD RULE: page CSS MUST NOT override. */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.90), 0 2px 6px rgba(0, 0, 0, 0.70);
}

/* Hero buttons — canonical. Standalone, lift on hover always permitted.
   
   .btn-hero-primary   = solid fill, page-primary colour. Page CSS overrides background only.
   .btn-hero-secondary = frosted white surface over photography.
                         Border is ALWAYS rgba(255,255,255,0.60) — white, not page-colour.
                         Page-colour borders are invisible or muddy over photography.
                         Page CSS must NOT override border-color on this class.
   
   RULE: Both buttons are identical in size, padding, font, and transition.
         The only thing that differs page-to-page is .btn-hero-primary background.
         .btn-hero-secondary is fully canonical — no page overrides permitted. */

.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  font-family: var(--text-font);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.375rem;
  min-height: 3rem;
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Primary — colour set per page. Page CSS overrides background and box-shadow only.
   Inner white ring (inset shadow) lifts button off any photography background.
   Outer dark shadow provides depth. Both required — photography varies wildly. */
.btn-hero-primary {
  background: var(--page-primary, var(--sdx-color-green-deep));
  color: #ffffff;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.50),
    0 2px 8px  rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.60),
    0 3px 10px rgba(0, 0, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.30);
}

/* Secondary — canonical glass button. Apple-style: low fill, backdrop blur, white border.
   Photography shows through the frosted surface. NO page overrides permitted.
   border: white semi-transparent — visible against any hero image. */
.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.60);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.80);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.20);
}

/* Dark mode — same glass, already works */
[data-theme="dark"] .btn-hero-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.30);
}
/* NOTE: Glass pill was removed from .intro per Colour Map v2.5.0 Section 16.
   Pages requiring a glass pill treatment must add it explicitly in their own CSS. */
.intro {
  width: min(100%, 45rem);  /* 720px */
  margin: 1.5rem auto 0;
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--muted);  /* FIXED v3.6.1: was rgba(32,34,32,0.92) — static primitive, Section 4.6 violation */
}

/* Hero intro text — always white over photography.
   EXCEPTION: color #ffffff is permanent — same basis as .headline (v3.3.0 changelog).
   text-shadow only — same pattern as .tagline. No background, no padding, no border-radius.
   Section 7 (Hero Vignette Principle): photography must not be covered.
   Pages MUST NOT override color or text-shadow. */
.hero .intro {
  color: #ffffff;
  text-shadow:
    0 5px 20px rgba(0, 0, 0, 0.90),
    0 3px 12px rgba(0, 0, 0, 0.70);
}

/* Responsive hero grid stack */
@media (max-width: 960px) {
  .hero-grid:has(.hero-orb),
  .hero-grid.has-hero-orb {
    grid-template-columns: 1fr;
  }
  
  .hero-orb {
    justify-self: center;
    max-width: 320px;
  }
  
  .hero-body {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 4rem 1.5rem;
  }
}

/* ==========================================================================
   CANONICAL SECTION ARCHITECTURE - Design System v4.0.0
   
   .sdx-card-section  = white card section container floating on page-bg canvas.
                        This is the ONLY approved section pattern. The card edge
                        IS the section boundary — no alternating tints needed.
   .sdx-section-inner = inner content column (legacy .section / .sdx-section alias)
   ========================================================================== */

.sdx-card-section {
  background: var(--card);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 3.5rem 2.5rem;
}

/* Dark mode surfaces — use dark theme surface token. No alternation needed. */
[data-theme="dark"] .sdx-card-section {
  background: var(--surface-alt);
}

/* Legacy aliases — backward compat only. No backgrounds, no alternation. */
.section,
.sdx-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* ==========================================================================
   CANONICAL CARD - Design System v4.0.0
   
   .card           = canonical content card. Left border accent always present.
                     Hover = lift + shadow only. Nothing else changes.
   .cards          = canonical card grid.
   
   RULE: Border-left uses --page-accent (the pillar accent colour — leaf-green,
   mama-amber, etc.). It is structural information, always visible at rest.
   It must NOT appear on hover — it must already be there.
   
   RULE: Hover = translateY(-3px) + shadow only. No border change. No padding
   compensation. No layout shift of any kind.
   ========================================================================== */

/* Generic card grid */
.cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Canonical card
   RULE: border-left accent always present at rest. Hover = lift + shadow only.
   RULE: This sets the DEFAULT card surface. Page CSS MAY override background
         on specific card types (e.g. warm tint for stat cards, cream for feature
         cards) to create visual variation between content types. The hover
         rule is what is canonical — not the background colour. */
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);  /* PIL-14 §6 / HOWTO F2: 1.5px canonical. Was 1px — corrected v3.8.1. */
  border-left: 4px solid var(--page-accent, var(--sdx-color-leaf-green));
  padding: 2rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--headline-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--fg);
}

.card p {
  margin: 0;
  color: var(--muted);
}

/* ==========================================================================
   CANONICAL BUTTONS - Design System v4.0.0
   
   .sdx-btn-primary    = primary action button. Standalone = lifts on hover.
                         Inside .card = colour + glow only, no lift.
   .sdx-btn-secondary  = ghost/outline button. Same context rules.
   
   RULE: A button inside a card does NOT lift on hover. The card already lifted.
   Stacking motion (card lifts → button also lifts) is a spec violation.
   A button outside a card (hero, CTA band, standalone) MAY lift.
   ========================================================================== */

.sdx-btn-primary,
.sdx-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-family: var(--text-font);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* Primary button colours — pages override via page tokens.
   :link/:visited included so that `a, a:visited { color: inherit }` (specificity
   0,1,1) cannot override button text on visited CTA anchors. These selectors are
   (0,2,0) and hold the spec colour in every link state. DOC-03 §8.3.1: #ffffff. */
.sdx-btn-primary,
.sdx-btn-primary:link,
.sdx-btn-primary:visited {
  background: var(--page-primary, var(--sdx-color-green-deep));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Secondary button — :link/:visited included for the same reason as above. */
.sdx-btn-secondary,
.sdx-btn-secondary:link,
.sdx-btn-secondary:visited {
  background: var(--card);
  color: var(--page-primary, var(--sdx-color-green-deep));
  border: 2px solid var(--page-primary, var(--sdx-color-green-deep));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Standalone hover — lift + glow (default, outside card) */
.sdx-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.sdx-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Inside a card — colour shift + glow only. No lift. */
.card .sdx-btn-primary:hover {
  transform: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  filter: brightness(1.08);
}

.card .sdx-btn-secondary:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   CANONICAL CLOSING CTA BAND - Design System v4.0.0
   
   .sdx-cta-band       = mandatory final section on every page before footer.
                         Full-width band, page-primary tinted background.
                         Colour adapts via --page-primary automatically.
   .sdx-cta-band-inner = centred content column, max-width 680px.
   
   RULE: Every page MUST end with .sdx-cta-band before #site-footer.
   RULE: The primary button inside .sdx-cta-band is standalone — it MAY lift.
   ========================================================================== */

.sdx-cta-band {
  width: 100%;
  background: var(--bg);
  border-top: 2px solid var(--border);
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle tinted wash from page-primary — adapts per pillar */
.sdx-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--page-primary, var(--sdx-color-green-deep));
  opacity: 0.05;
  pointer-events: none;
}

.sdx-cta-band-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.sdx-cta-band-inner h2 {
  font-family: var(--headline-font);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 1rem;
  text-align: center;
}

.sdx-cta-band-inner p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 2rem;
}

/* CTA band button is standalone — lift is permitted */
.sdx-cta-band .sdx-btn-primary {
  min-height: 3.25rem;
  padding: 0.875rem 2.5rem;
  font-size: 1.0625rem;
}

[data-theme="dark"] .sdx-cta-band {
  background: var(--card);
}

@media (max-width: 600px) {
  .sdx-cta-band { padding: 3.5rem 1.5rem; }
  .sdx-cta-band .sdx-btn-primary { width: 100%; }
}

/* Muted text helper */
.muted {
  color: var(--muted);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Layout helpers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ==========================================================================
   COMPONENT PLACEHOLDERS
   ========================================================================== */

/* Header and footer minimum heights */
#site-header, 
#site-footer {
  min-height: 3.5rem;
}

/* Hero z-index safety */
.page-hero, 
.hero-wrap {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   PROFILE CARDS (Legacy - Consider refactoring to pillar card pattern)
   ========================================================================== */

.profiles-grid .profile .avatar {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.profiles-grid .profile .p-body {
  margin-top: 0.625rem;
}

.profiles-grid .profile .role {
  margin-top: 2px;
  color: var(--muted);
}

.profiles-grid .profile .profile-link {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease;
}

.profiles-grid .profile .profile-link:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--sdx-color-teal-deep);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Reference for pillar page implementations
   ========================================================================== */

/*
Mobile:          max-width: 480px
Tablet Portrait: 481px - 767px
Tablet Landscape: 768px - 1023px
Laptop:          1024px - 1279px
Desktop:         1280px - 1439px
Desktop Large:   1440px - 1679px
Desktop XL:      1680px - 1919px
Desktop 2K:      1920px - 2559px
Desktop 4K:      2560px+
*/

/* ==========================================================================
   PORTRAIT STRIP — Shared component. Geometry only.
   Colours via var(--page-primary), var(--border), var(--line).
   Each pillar's page CSS drives the palette. No colour hardcoded here.
   Per-pillar sizing overrides live in assets/css/[pillar]/partials/[pillar]-slider.css
   Added: global.css v3.7.0
   ========================================================================== */

/* Strip custom properties — JS reads --strip-item-w and --strip-gap from :root */
:root {
  --strip-item-w:   12.5rem;   /* 200px default — pillar CSS overrides */
  --strip-gap:       1.375rem; /* 22px  */
  --strip-arrow-w:   4rem;     /* 64px  */
  --strip-lane-gap:  0.875rem; /* 14px  */
  --strip-pad-v:     1rem;     /* 16px  */
  --strip-anim:      700ms;
  --strip-eio:       cubic-bezier(.2,.7,.2,1);
  --strip-thumb:     9.6875rem; /* 155px default — pillar CSS overrides */
  --strip-label-sz:  0.875rem;
}

/* Outer shell — full viewport width, overflow hidden to clip rail */
.mamas-strip {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
  overflow: hidden;
  outline: none;
}

/* Arrow + clip wrapper */
.strip-shell {
  position: relative;
  height: calc(var(--strip-thumb) + var(--strip-pad-v) * 2 + 2.5rem);
}

/* Arrows */
.strip-shell .arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--strip-arrow-w);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  color: var(--fg);
  user-select: none;
  transition: opacity 0.15s ease;
  /* Browser reset — <button> default styles override positioning */
  background: none;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.strip-shell .arrow.is-disabled { opacity: 0.25; pointer-events: none; }
.strip-shell .arrow.is-hidden   { display: none; }
.strip-shell .arrow.left        { left: 0; }
.strip-shell .arrow.right       { right: 0; }

.strip-shell .arrow .glyph {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
}

/* Clip — visible window between the two arrows */
.strip-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  left:  calc(var(--strip-arrow-w) + var(--strip-lane-gap));
  right: calc(var(--strip-arrow-w) + var(--strip-lane-gap));
  overflow: hidden;
}

/* Rail — scrolling flex row, JS translates via transform */
.strip-rail {
  display: flex;
  gap: var(--strip-gap);
  align-items: flex-start;
  height: 100%;
  padding: var(--strip-pad-v) 0;
  will-change: transform;
  transition: transform var(--strip-anim) var(--strip-eio);
}

/* Item — circle avatar portrait */
.strip-rail .item {
  flex: 0 0 var(--strip-item-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  user-select: none;
  outline: none;
}

.strip-rail .item img {
  width: var(--strip-thumb);
  height: var(--strip-thumb);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.strip-rail .item .label {
  margin-top: 0.5rem;
  font-size: var(--strip-label-sz);
  line-height: 1.25;
  color: var(--muted);
  text-align: center;
  max-width: var(--strip-item-w);
}

/* Hover / focus */
.strip-rail .item:hover img,
.strip-rail .item:focus-visible img {
  border-color: var(--page-primary);
  transform: translateY(-0.125rem);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.strip-rail .item:focus-visible {
  outline: 2px solid var(--page-primary);
  outline-offset: 4px;
  border-radius: 50%;
}

.strip-rail .item:hover .label,
.strip-rail .item:focus-visible .label {
  color: var(--fg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .strip-rail           { transition: none; }
  .strip-rail .item img { transition: none; }
}

/* Mobile */
@media (max-width: 30rem) {
  :root {
    --strip-item-w:  10rem;
    --strip-thumb:   7.75rem;
    --strip-arrow-w: 3.375rem;
    --strip-gap:     1rem;
  }
}

/* ==========================================================================
   CANONICAL MOBILE RESPONSIVE — Layout spacing
   Applies globally to all pages. No page CSS should override these.

   Problem: .sdx-card-section (2.5rem sides) + .container (2rem sides) + .card (2rem sides)
   stack three independent padding layers. On a 390px screen this consumes 104px (27%)
   leaving only 286px (73%) of viewport for text.

   Fix applied at two breakpoints:
     680px: reduce to 1.25rem / 1.25rem / 1rem  → 334px text (86%)
     480px: reduce to 1rem / 1rem               → 350px text (90%) at 375px devices
   ========================================================================== */

@media (max-width: 680px) {
  .container        { padding: 1.5rem 1.25rem; }
  .sdx-card-section { padding: 2rem 1.25rem; margin-bottom: 1.25rem; }
  .sdx-card-section .section-intro { max-width: 100%; }
  .cards            { gap: 0.75rem; }
  .card             { padding: 1rem; }
}

@media (max-width: 480px) {
  .container        { padding: 1.25rem 1rem; }
  .sdx-card-section { padding: 1.75rem 1rem; }

  /* Headline line-height relief at mobile wrap.
     1.3 is correct at desktop scale. On small viewports where the headline
     wraps to 3+ lines the same value crushes the lines together.
     DOC-02 §7.2.1 HARD RULE: this fix belongs in global.css only.
     Page CSS MUST NOT override line-height on .headline. */
  .headline { line-height: 1.2; }
}

/* ==========================================================================
   INLINE FIGURE CAPTION -- BKT-DOC-03 §8.15
   Page-surface caption. Distinct from .lightbox-caption (§8.8.6).
   Page CSS MUST NOT override font-size, color, or font-family.
   ========================================================================== */

.sdx-figure {
  margin: 0;
  display: block;
}

.sdx-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.sdx-figure-caption {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--text-font);
  font-size: var(--small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

/* Floated variants -- prose context */
.sdx-figure--right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 45%;
}

.sdx-figure--left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 45%;
}

.sdx-figure--right .sdx-figure-caption,
.sdx-figure--left  .sdx-figure-caption {
  text-align: left;
}

/* Clearfix for prose containers holding floated figures */
.sdx-prose::after {
  content: "";
  display: table;
  clear: both;
}

/* Mobile: collapse floats to full-width at <=600px */
@media (max-width: 600px) {
  .sdx-figure--right,
  .sdx-figure--left {
    float: none;
    margin: 0 0 1rem 0;
    max-width: 100%;
  }

  .sdx-figure--right .sdx-figure-caption,
  .sdx-figure--left  .sdx-figure-caption {
    text-align: center;
  }
}

/* ==========================================================================
   SPINE BREADCRUMB — BKT-DOC-www-F §6.3/§6.4
   Shared by About and Living Tower. Landing has no breadcrumb (Ch1).
   Geometry, typography, behaviour all owned here. Page CSS owns nothing.
   ========================================================================== */

.sdx-spine-breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.625rem 1.5rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.sdx-spine-breadcrumb ol {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.sdx-spine-breadcrumb li a {
  font-size: var(--small);
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sdx-spine-breadcrumb li a.breadcrumb-link:hover,
.sdx-spine-breadcrumb li a.breadcrumb-link:focus-visible {
  color: var(--page-accent);
}

.sdx-spine-breadcrumb li.active a {
  font-weight: 700;
  color: var(--fg);
  cursor: default;
  pointer-events: none;
}

/* Separator — §6.4: forward slash, text content only. No SVG, no border. */
.sdx-spine-breadcrumb li::after {
  content: '/';
  margin-left: 2rem;
  color: var(--muted);
  font-size: var(--small);
  pointer-events: none;
}

.sdx-spine-breadcrumb li:last-child::after {
  content: none;
}

/* Mobile — tighter spacing prevents label wrapping on narrow screens */
@media (max-width: 600px) {
  .sdx-spine-breadcrumb ol { gap: 0.5rem; }
  .sdx-spine-breadcrumb li::after { margin-left: 0.5rem; }
}

/* Desktop — larger font. Mobile stays at --small (13px). */
@media (min-width: 601px) {
  .sdx-spine-breadcrumb li a,
  .sdx-spine-breadcrumb li::after { font-size: var(--body); }
}

/* ==========================================================================
   TRILOGY STRIP — BKT-DOC-www-E §12–§13
   Shared component. Geometry, behaviour, and typography owned here.
   Page CSS owns ONLY: .trilogy-thumb-[slug] background-image / background-position.
   .trilogy-contact (Living Tower only) stays in living-tower.css.

   UX PRINCIPLE: Inactive panels are navigation links. They must invite at full
   opacity. Hover adds a brightness lift to confirm interactivity. The active
   panel (current page, pointer-events:none) is distinguished by a cyan bottom
   border and a deeper caption overlay — not by fading.

   DOC-02 §4.1 specifies amber as the universal active signal on photographic
   surfaces. Exception granted here: amber reads as similar in hue to the warm
   photography and fails to register as a distinct indicator. --sdx-color-mama-cyan
   (#34c6d0) is used instead — cool, high contrast against the warm image palette,
   and still within the MamaDEX token family.
   ========================================================================== */

.sdx-trilogy-strip {
  display: flex;
  align-items: stretch;
  width: 100vw;
  gap: 0;
  margin-bottom: 0.75rem;
}

.trilogy-chapter {
  flex: 1;
  position: relative;
  display: block;
  min-height: 200px;
  overflow: hidden;
  text-decoration: none;
  opacity: 1;                                        /* FULL opacity at rest — links must invite */
  border-bottom: 4px solid transparent;
  transition: filter 0.2s ease;
}

.trilogy-chapter:hover,
.trilogy-chapter:focus-visible {
  filter: brightness(1.08);                          /* Subtle lift confirms clickability */
}

.trilogy-chapter.active {
  border-bottom-color: var(--sdx-color-mama-cyan);   /* Cyan over amber: cool contrast cuts warm photography */
  cursor: default;
  pointer-events: none;
  filter: none;
}

/* Deeper caption overlay on active panel — "you are here" signal */
.trilogy-chapter.active .trilogy-caption {
  background: rgba(0, 0, 0, 0.88);
}

.trilogy-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center 40%;
}

.trilogy-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* DOC-02 permanent exception: #ffffff on dark photographic overlay */
.trilogy-num {
  font-size: var(--small);
  font-weight: 600;
  color: #ffffff;
  opacity: 0.72;
  letter-spacing: 0.06rem;                           /* rem only — DOC-02 §15 */
  text-transform: uppercase;
}

.trilogy-label {
  font-size: var(--body);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
}

/* Mobile: stack vertically below 768px. Min-height 120px per §13.
   gap: 0 on desktop — horizontal photo edges read as natural boundaries.
   gap: 0.5rem on mobile — plain whitespace separates stacked panels.
   No colour, no decoration — whitespace is enough. */
@media (max-width: 768px) {
  .sdx-trilogy-strip {
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.5rem;                          /* balances gap below last panel */
  }

  .trilogy-chapter {
    min-height: 120px;
    flex: 0 0 auto;
  }

  .trilogy-caption {
    padding: 0.5rem 0.625rem;
  }

  .trilogy-label {
    font-size: var(--small);
  }
}

/* ==========================================================================
   AUTH STATE — Visitor / Member hero action visibility
   Controlled by data-auth attribute on <html> element.
   Set by /assets/js/partials/auth-state.js.
   Two explicit states: data-auth="signed-out" | "signed-in".
   www-ONLY — DEPRECATED ON REACT MIGRATION.
   HARD RULE: No page CSS may override these rules.
   HARD RULE: No JS may set display/visibility per element.
   Spec ref: BKT-DOC-www-G §3.3
   ========================================================================== */

[data-auth="signed-out"] .hero-actions-member { display: none; }

[data-auth="signed-out"] .hero-actions-visitor {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

[data-auth="signed-in"] .hero-actions-visitor { display: none; }

[data-auth="signed-in"] .hero-actions-member {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* Skeleton guard — sub-frame window before auth-state.js runs,
   and browsers with JS disabled. */
html:not([data-auth]) .hero-actions { visibility: hidden; }
html[data-auth]        .hero-actions { visibility: visible; }

/* ==========================================================================
   AUTH STATE — Viridians hero auth-aware copy spans
   Used in viridians.html hero only.
   Controls .vir-auth-copy--signed-out / .vir-auth-copy--signed-in visibility.
   Spec ref: BKT 56080:2026 v2.3.0 §2.3 / BKT-DOC-www-G v1.2.0
   www-ONLY — DEPRECATED ON REACT MIGRATION.
   HARD RULE: No page CSS may override these rules.
   HARD RULE: No JS may set display/visibility on these elements directly.
   ========================================================================== */

[data-auth="signed-out"] .vir-auth-copy--signed-out { display: inline; }
[data-auth="signed-out"] .vir-auth-copy--signed-in  { display: none; }

[data-auth="signed-in"]  .vir-auth-copy--signed-out { display: none; }
[data-auth="signed-in"]  .vir-auth-copy--signed-in  { display: inline; }

/* Skeleton guard */
html:not([data-auth]) .vir-auth-copy--signed-out,
html:not([data-auth]) .vir-auth-copy--signed-in { visibility: hidden; }

/* ==========================================================================
   AUTH STATE — Pillar nav label swap: Proof Buyers (visitor) / Viridians (member)
   Controls .nav-viridians-visitor / .nav-viridians-member visibility.
   NOTE: Full implementation requires navigation.json + header.js amendment.
   These rules are present and ready. The HTML elements are generated by
   header.js once navigation.json supports the two-entry pattern.
   Spec ref: BKT-DOC-www-G v1.2.0 §4.4
   www-ONLY — DEPRECATED ON REACT MIGRATION.
   HARD RULE: No page CSS may override these rules.
   HARD RULE: No JS may set display/visibility on these elements directly.
   ========================================================================== */

[data-auth="signed-out"] .nav-viridians-visitor { display: flex; }
[data-auth="signed-out"] .nav-viridians-member  { display: none; }

[data-auth="signed-in"]  .nav-viridians-visitor { display: none; }
[data-auth="signed-in"]  .nav-viridians-member  { display: flex; }

/* Skeleton guard */
html:not([data-auth]) .nav-viridians-visitor,
html:not([data-auth]) .nav-viridians-member { visibility: hidden; }

/* ==========================================================================
   END OF GLOBAL STYLES
   Pillar-specific styles MUST be in separate pillar CSS files
   Per Umbrella Whitepaper v1.1.0 CSS ownership model
   ========================================================================== */