/**
 * Beyond Volatility — "Structured Swiss" Design System v6.0 (sitewide core)
 * ==========================================================================
 * Objective clarity in complex systems. Classic Swiss typography meets
 * architectural blueprints: pure white canvas, ink, graphite, 1px grid-line
 * rules everywhere, sparing accent blue, sharp corners, subtle card lift.
 * Institutional, curated, premium — an elite research firm's annual report.
 *
 * Replaces the v5.0 "Print & Terminal" brutalist system entirely.
 * Loaded globally, before the page sheets:
 *   swiss-core.css  → tokens + primitives (this file)
 *   swiss-home.css  → homepage sections
 *   swiss-pages.css → Tools case files, About, Contact, Toolkit, legal
 *   swiss-tools.css → calculator override layer (loads LAST on tool pages)
 *   swiss-blog.css  → journal treatment for posts + archives
 *
 * Class namespace: .bv-sw-*   Body scope: body.bv-swiss
 *
 * THEMING — light is default; dark is a warm, comfortable variant.
 * Every color in every swiss-* sheet goes through the tokens below, so the
 * whole site flips via:
 *   1. @media (prefers-color-scheme: dark)  — automatic
 *   2. html[data-bv-theme="dark" | "light"] — explicit override hook (wins)
 * A small JS bootstrap applies the stored choice early; the toggle itself
 * simply updates html[data-bv-theme] and color-scheme.
 *
 * TOC
 *   1. Tokens (light)
 *   2. Tokens (dark) — media query + attribute override
 *   3. Page scope, canvas, header tint, blueprint grid
 *   4. Type primitives (display, kicker, lede, meta)
 *   5. Surface primitives (rules, tags, buttons, structural cards)
 *   6. Masthead + page hero
 *   7. Index table (research-index rows)
 *   8. Data block (ink panel) + inline form
 *   9. Ticker strip
 *  10. Figures & images (grayscale reveal)
 *  11. Prose (longform / legal)
 *  12. Motion & accessibility
 */

/* ============================================================
   1. TOKENS — LIGHT (default)
   ============================================================ */
body.bv-swiss {
    --sw-canvas:      #FFFFFF;  /* primary canvas and cards */
    --sw-surface:     #F9FAFB;  /* secondary backgrounds */
    --sw-ink:         #0F0F0F;  /* primary text, high-contrast blocks */
    --sw-graphite:    #4A4A4A;  /* secondary text, metadata */
    --sw-line:        #E5E5E5;  /* decorative borders, dividers, background grid */
    --sw-line-strong: #949494;  /* form-control borders — 3:1 non-text contrast (WCAG 1.4.11) */
    --sw-line-soft:   #F0F0F0;  /* hero blueprint grid */
    --sw-accent:      #2563EB;  /* interactive elements — used sparingly */
    --sw-accent-deep: #1D4ED8;  /* accent hover */
    --sw-on-accent:   #FFFFFF;
    --sw-on-ink:      #F5F5F4;  /* text on ink blocks */
    --sw-on-ink-dim:  #A3A3A3;  /* secondary text on ink blocks */

    --sw-lift-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
    --sw-ease:        cubic-bezier(0.16, 1, 0.3, 1);

    --sw-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --sw-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sw-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --sw-max: 1400px;
    --sw-gutter: clamp(20px, 4vw, 56px);
}

/* ============================================================
   2. TOKENS — DARK (warm, comfortable)
   ============================================================ */
/* Shared dark values live in one custom-property set; applied twice —
   once via media query, once via the explicit attribute hook (which wins
   in both directions because attribute selectors below also handle the
   forced-light case). */
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss {
        --sw-canvas:      #161514;  /* warm near-black */
        --sw-surface:     #1D1C1A;
        --sw-ink:         #F0EEEB;  /* warm off-white text */
        --sw-graphite:    #A8A29E;  /* warm secondary gray */
        --sw-line:        #2E2C29;
        --sw-line-strong: #7A7570;
        --sw-line-soft:   #23221F;
        --sw-accent:      #6D9EFF;  /* lifted blue: readable on warm dark */
        --sw-accent-deep: #8FB4FF;
        --sw-on-accent:   #10233F;
        --sw-on-ink:      #F0EEEB;  /* ink blocks blend into dark canvas */
        --sw-on-ink-dim:  #A8A29E;
        --sw-lift-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5);
    }
}
html[data-bv-theme='dark'] body.bv-swiss {
    --sw-canvas:      #161514;
    --sw-surface:     #1D1C1A;
    --sw-ink:         #F0EEEB;
    --sw-graphite:    #A8A29E;
    --sw-line:        #2E2C29;
    --sw-line-strong: #7A7570;
    --sw-line-soft:   #23221F;
    --sw-accent:      #6D9EFF;
    --sw-accent-deep: #8FB4FF;
    --sw-on-accent:   #10233F;
    --sw-on-ink:      #F0EEEB;
    --sw-on-ink-dim:  #A8A29E;
    --sw-lift-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5);
}

/* The ink panel keeps its own fixed palette in light mode but joins the
   canvas in dark mode — tokens handle it (see section 8). */

/* ============================================================
   3. PAGE SCOPE, CANVAS, HEADER TINT, BLUEPRINT GRID
   ============================================================ */
/* !important defends the canvas against legacy body rules in style.css /
   design-system.css keyed on other body classes. */
body.bv-swiss {
    background-color: var(--sw-canvas) !important;
    color: var(--sw-ink) !important;
    -webkit-font-smoothing: antialiased;
}

/* Header joins the canvas. Colors only — layout untouched (golden rule). */
body.bv-swiss .hfg_header,
body.bv-swiss .hfg_header .header--row,
body.bv-swiss .hfg_header .header-main {
    background-color: var(--sw-canvas) !important;
}
body.bv-swiss .hfg_header .header--row a,
body.bv-swiss .hfg_header .header--row button,
body.bv-swiss .hfg_header .header--row .site-title a,
body.bv-swiss .hfg_header .header--row .nav-ul li a,
body.bv-swiss .hfg_header .header--row .menu-item-nav-search,
body.bv-swiss .hfg_header .header--row .menu-item-nav-search a,
body.bv-swiss .hfg_header .header--row .menu-item-nav-search button,
body.bv-swiss .hfg_header .header--row .nv-search-icon-component,
body.bv-swiss .hfg_header .header--row .nv-search-icon-component a,
body.bv-swiss .hfg_header .header--row .nv-search-icon-component button {
    color: var(--sw-ink) !important;
}
body.bv-swiss .hfg_header .header--row a,
body.bv-swiss .hfg_header .header--row .nav-ul li a,
body.bv-swiss .hfg_header .header--row svg {
    color: var(--sw-ink) !important;
    fill: var(--sw-ink) !important;
}
body.bv-swiss .hfg_header .header--row svg,
body.bv-swiss .hfg_header .header--row svg path,
body.bv-swiss .hfg_header .header--row svg circle,
body.bv-swiss .hfg_header .header--row svg line,
body.bv-swiss .hfg_header .header--row svg polyline {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
body.bv-swiss .hfg_header .header--row .primary-menu-ul li a:hover,
body.bv-swiss .hfg_header .header--row .nav-ul li a:hover {
    color: var(--sw-accent) !important;
}

/* Center header slot: Home link + theme toggle. Keep it compact. */
body.bv-swiss .builder-item--custom_html .nv-html-content p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}
body.bv-swiss .builder-item--custom_html .nv-html-content a {
    color: var(--sw-ink) !important;
}
body.bv-swiss .bv-theme-toggle-wrap {
    display: inline-flex;
    align-items: center;
}
body.bv-swiss .bv-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--sw-line);
    border-radius: 999px;
    background: var(--sw-canvas);
    color: var(--sw-ink);
    box-shadow: none;
    cursor: pointer;
    transition:
        color 0.15s var(--sw-ease),
        background-color 0.15s var(--sw-ease),
        border-color 0.15s var(--sw-ease),
        transform 0.15s var(--sw-ease);
}
body.bv-swiss .bv-theme-toggle:hover {
    border-color: var(--sw-accent);
    color: var(--sw-accent);
    transform: translateY(-1px);
}
body.bv-swiss .bv-theme-toggle:focus-visible {
    outline: 2px solid var(--sw-accent);
    outline-offset: 2px;
}
body.bv-swiss .bv-theme-toggle__icon {
    display: none;
    width: 1rem;
    height: 1rem;
}
body.bv-swiss .bv-theme-toggle__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
body.bv-swiss .bv-theme-toggle__icon--moon {
    display: inline-flex;
}
html[data-bv-theme='dark'] body.bv-swiss .bv-theme-toggle__icon--moon {
    display: none;
}
html[data-bv-theme='dark'] body.bv-swiss .bv-theme-toggle__icon--sun {
    display: inline-flex;
}
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss .bv-theme-toggle__icon--moon {
        display: none;
    }
    html:not([data-bv-theme='light']) body.bv-swiss .bv-theme-toggle__icon--sun {
        display: inline-flex;
    }
}
body.bv-swiss .bv-theme-toggle[aria-pressed='true'] {
    background: var(--sw-surface);
    border-color: var(--sw-line-strong);
}

.bv-sw {
    font-family: var(--sw-body);
    font-weight: 400;
    overflow-x: hidden;
    position: relative;
}
.bv-sw ::selection {
    background: var(--sw-accent);
    color: var(--sw-on-accent);
}

.bv-sw-wrap {
    max-width: var(--sw-max);
    margin: 0 auto;
    padding-left: var(--sw-gutter);
    padding-right: var(--sw-gutter);
}

/* Architectural 40px blueprint grid — absolute layer behind hero content,
   fading to nothing. Drop <div class="bv-sw-gridbg" aria-hidden="true">
   as the first child of a hero section (which must be position:relative). */
.bv-sw-gridbg {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(80vh, 720px);
    pointer-events: none;
    z-index: 0;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, var(--sw-line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--sw-line-soft) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* Section rhythm: every section opens with a single 1px rule. */
.bv-sw-section {
    position: relative;
    padding: clamp(56px, 9vh, 112px) 0;
    border-top: 1px solid var(--sw-line);
}
.bv-sw-section.is-surface { background: var(--sw-surface); }
.bv-sw-section.is-flush   { border-top: 0; }

/* ============================================================
   4. TYPE PRIMITIVES
   ============================================================ */
/* Section kicker: index number + label + running rule. */
.bv-sw-kicker {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--sw-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    margin: 0 0 22px;
}
.bv-sw-kicker .idx { color: var(--sw-accent); }
.bv-sw-kicker::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--sw-line);
    transform: translateY(-4px);
}

.bv-sw-h1 {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 22px;
    color: var(--sw-ink);
}
.bv-sw-h1 .lt { font-weight: 300; }          /* light counterpoint line */
.bv-sw-h1 .ac { color: var(--sw-accent); }   /* single accent word, max */

.bv-sw-h2 {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: var(--sw-ink);
    max-width: 22ch;
}
.bv-sw-h3 {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: var(--sw-ink);
}
.bv-sw-lede {
    font-family: var(--sw-body);
    font-weight: 300;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    max-width: 58ch;
    margin: 0;
    color: var(--sw-graphite);
}
.bv-sw-meta {
    font-family: var(--sw-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sw-graphite);
}

/* ============================================================
   5. SURFACE PRIMITIVES
   ============================================================ */
/* Tag: quiet mono chip, 1px rule. Status = small dot, not a filled pill. */
.bv-sw-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sw-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--sw-line);
    background: var(--sw-canvas);
    color: var(--sw-graphite);
    white-space: nowrap;
}
.bv-sw-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;   /* the one permitted circle: a status point */
    background: var(--sw-line);
    flex-shrink: 0;
}
.bv-sw-tag.is-live { color: var(--sw-ink); border-color: var(--sw-ink); }
.bv-sw-tag.is-live .dot { background: var(--sw-accent); }

/* Buttons: sharp, precise. Primary = ink block; quiet = 1px rule. */
.bv-sw-btn {
    display: inline-block;
    font-family: var(--sw-display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 28px;
    color: var(--sw-ink);
    background: var(--sw-canvas);
    border: 1px solid var(--sw-ink);
    cursor: pointer;
    transition: background-color 0.2s var(--sw-ease), color 0.2s var(--sw-ease), border-color 0.2s var(--sw-ease);
}
.bv-sw-btn:hover,
.bv-sw-btn:focus-visible {
    background: var(--sw-ink);
    color: var(--sw-canvas);
    text-decoration: none;
}
.bv-sw-btn.is-solid {
    background: var(--sw-ink);
    color: var(--sw-canvas);
}
.bv-sw-btn.is-solid:hover,
.bv-sw-btn.is-solid:focus-visible {
    background: var(--sw-accent);
    border-color: var(--sw-accent);
    color: var(--sw-on-accent);
}
.bv-sw-btn.is-quiet {
    border-color: var(--sw-line);
    color: var(--sw-graphite);
}
.bv-sw-btn.is-quiet:hover,
.bv-sw-btn.is-quiet:focus-visible {
    border-color: var(--sw-ink);
    background: var(--sw-canvas);
    color: var(--sw-ink);
}

/* Text link: the accent's main home. */
.bv-sw-link {
    color: var(--sw-accent);
    text-decoration: none;
    font-weight: 500;
}
.bv-sw-link:hover {
    color: var(--sw-accent-deep);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Structural card: white, 1px rule, sharp corners, subtle lift. */
.bv-sw-card {
    background: var(--sw-canvas);
    border: 1px solid var(--sw-line);
    padding: 26px 28px;
    transition: transform 0.3s var(--sw-ease), box-shadow 0.3s var(--sw-ease), border-color 0.3s var(--sw-ease);
}
.bv-sw-card.is-link {
    display: block;
    text-decoration: none;
    color: var(--sw-ink);
}
.bv-sw-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sw-lift-shadow);
    border-color: var(--sw-graphite);
}
.bv-sw-card.is-static:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--sw-line);
}

/* Spec list: thin-rule rows, mono values. */
.bv-sw-spec {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--sw-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--sw-graphite);
}
.bv-sw-spec li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--sw-line);
}
.bv-sw-spec li:last-child { border-bottom: 0; }
.bv-sw-spec .k { color: var(--sw-ink); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.bv-sw-spec .v { text-align: right; }
.bv-sw-spec .v.ac { color: var(--sw-accent); }

/* Stat: bare number over a hairline — no boxes. */
.bv-sw-stat { border-top: 1px solid var(--sw-ink); padding-top: 12px; }
.bv-sw-stat .n {
    display: block;
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--sw-ink);
}
.bv-sw-stat .l {
    display: block;
    margin-top: 6px;
    font-family: var(--sw-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sw-graphite);
}

/* ============================================================
   6. MASTHEAD + PAGE HERO
   ============================================================ */
.bv-sw-masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    font-family: var(--sw-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    border-top: 1px solid var(--sw-ink);
    border-bottom: 1px solid var(--sw-line);
    padding: 10px 0;
}
.bv-sw-masthead .ac { color: var(--sw-accent); }

.bv-sw-pagehero {
    position: relative;
    padding: clamp(40px, 6vh, 72px) 0 clamp(44px, 7vh, 80px);
    border-bottom: 1px solid var(--sw-line);
    overflow: hidden;
}
.bv-sw-pagehero > .bv-sw-wrap { position: relative; z-index: 1; }
.bv-sw-pagehero .bv-sw-masthead { margin-bottom: clamp(32px, 5vh, 64px); }

/* ============================================================
   7. INDEX TABLE — research-index rows
   ============================================================ */
.bv-sw-table {
    border: 1px solid var(--sw-line);
    background: var(--sw-canvas);
    font-family: var(--sw-mono);
}
.bv-sw-table-head,
.bv-sw-row {
    display: grid;
    grid-template-columns: 56px minmax(150px, 1.2fr) 120px minmax(200px, 2fr) 90px;
    gap: 0 18px;
    align-items: center;
    padding: 13px 20px;
}
.bv-sw-table-head {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    border-bottom: 1px solid var(--sw-ink);
}
.bv-sw-row {
    font-size: 0.8rem;
    color: var(--sw-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sw-line);
    transition: background-color 0.15s var(--sw-ease);
}
.bv-sw-row:last-of-type { border-bottom: 0; }
.bv-sw-row .idx  { color: var(--sw-graphite); font-size: 0.72rem; }
.bv-sw-row .name {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-sw-row .dom {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    white-space: nowrap;
}
.bv-sw-row .desc {
    font-family: var(--sw-body);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--sw-graphite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-sw-row .run {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
    color: var(--sw-accent);
}
.bv-sw-row:hover,
.bv-sw-row:focus-visible {
    background: var(--sw-surface);
    text-decoration: none;
    color: var(--sw-ink);
}
.bv-sw-row:hover .name { color: var(--sw-accent); }

.bv-sw-table-foot {
    border-top: 1px solid var(--sw-line);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bv-sw-table-foot .meta {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sw-graphite);
}

@media (max-width: 760px) {
    .bv-sw-table-head { display: none; }
    .bv-sw-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            'name run'
            'dom  dom'
            'desc desc';
        gap: 4px 12px;
        padding: 15px 18px;
    }
    .bv-sw-row .idx  { display: none; }
    .bv-sw-row .name { grid-area: name; white-space: normal; }
    .bv-sw-row .dom  { grid-area: dom; }
    .bv-sw-row .desc { grid-area: desc; white-space: normal; }
    .bv-sw-row .run  { grid-area: run; }
}

/* ============================================================
   8. DATA BLOCK — high-contrast ink panel + inline form
   ============================================================ */
/* In light mode this is the stark ink block from the palette spec; in
   dark mode the tokens invert it into a bordered panel on the canvas. */
.bv-sw-inkblock {
    background: #0F0F0F;
    color: var(--sw-on-ink);
    border: 1px solid #0F0F0F;
    padding: clamp(32px, 5vw, 56px);
}
html[data-bv-theme='dark'] body.bv-swiss .bv-sw-inkblock {
    background: var(--sw-surface);
    border-color: var(--sw-line);
}
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss .bv-sw-inkblock {
        background: var(--sw-surface);
        border-color: var(--sw-line);
    }
}
.bv-sw-inkblock h3 {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--sw-on-ink);
    margin: 0 0 10px;
}
.bv-sw-inkblock p {
    font-family: var(--sw-body);
    font-weight: 300;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--sw-on-ink-dim);
    margin: 0 0 8px;
}
.bv-sw-inkblock .bv-sw-meta { color: var(--sw-on-ink-dim); }

/* Inline form row (newsletter). Keeps the .bv-newsletter-* hooks that
   js/newsletter.js binds to. */
.bv-sw-form-row {
    display: flex;
    margin-top: 26px;
    border: 1px solid #4A4A4A;
    max-width: 520px;
}
html[data-bv-theme='dark'] body.bv-swiss .bv-sw-form-row { border-color: var(--sw-line); }
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss .bv-sw-form-row { border-color: var(--sw-line); }
}
.bv-sw-form-row input[type='email'] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    padding: 14px 16px;
    font-family: var(--sw-mono);
    font-size: 0.85rem;
    color: var(--sw-on-ink);
    caret-color: var(--sw-accent);
    border-radius: 0;
    box-shadow: none;
}
.bv-sw-form-row input[type='email']::placeholder { color: #737373; opacity: 1; }
.bv-sw-form-row .bv-newsletter-btn {
    flex-shrink: 0;
    font-family: var(--sw-display);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--sw-accent);
    color: var(--sw-on-accent);
    border: 0;
    padding: 14px 24px;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.2s var(--sw-ease);
}
.bv-sw-form-row .bv-newsletter-btn:hover,
.bv-sw-form-row .bv-newsletter-btn:focus-visible { background: var(--sw-accent-deep); }
.bv-sw-form-row .bv-newsletter-btn:disabled { opacity: 0.55; cursor: wait; }

.bv-sw .bv-newsletter-msg {
    font-family: var(--sw-mono);
    font-size: 0.76rem;
    margin-top: 12px;
    min-height: 1.4em;
}
.bv-sw .bv-newsletter-msg.success { color: #34D399; }
.bv-sw .bv-newsletter-msg.error   { color: #F87171; }
.bv-sw-fineprint {
    font-size: 0.7rem;
    font-weight: 300;
    color: var(--sw-on-ink-dim);
    margin-top: 14px;
}
.bv-sw-fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bv-sw-fineprint a:hover { color: var(--sw-on-ink); }

/* ============================================================
   9. TICKER STRIP — quiet mono index band
   ============================================================ */
.bv-sw-ticker {
    border-top: 1px solid var(--sw-line);
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-surface);
    overflow: hidden;
    padding: 9px 0;
}
.bv-sw-ticker-track {
    display: flex;
    width: max-content;
    animation: bv-sw-ticker 48s linear infinite;
}
.bv-sw-ticker-item {
    font-family: var(--sw-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    white-space: nowrap;
    padding: 0 28px;
    border-right: 1px solid var(--sw-line);
    display: flex;
    align-items: center;
    gap: 8px;
}
.bv-sw-ticker-item .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sw-accent);
}
.bv-sw-ticker-item .dim { color: var(--sw-graphite); opacity: 0.7; }
@keyframes bv-sw-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* WCAG 2.2.2: moving content must be pausable — hover/focus pauses the
   strip (it is aria-hidden decorative; the same facts sit in the masthead). */
.bv-sw-ticker:hover .bv-sw-ticker-track,
.bv-sw-ticker:focus-within .bv-sw-ticker-track { animation-play-state: paused; }

/* ============================================================
   10. FIGURES & IMAGES — grayscale reveal
   ============================================================ */
.bv-sw-figure {
    border: 1px solid var(--sw-line);
    background: var(--sw-surface);
    overflow: hidden;
    position: relative;
    margin: 0;
}
.bv-sw-figure img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(1);
    transition: filter 0.45s var(--sw-ease);
}
.bv-sw-figure:hover img,
a:hover .bv-sw-figure img,
a:focus-visible .bv-sw-figure img { filter: grayscale(0); }
.bv-sw-figure figcaption {
    font-family: var(--sw-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sw-graphite);
    padding: 10px 14px;
    border-top: 1px solid var(--sw-line);
}
/* Dark mode: never show pure-white photo boxes at full blast */
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss .bv-sw-figure img { opacity: 0.92; }
}
html[data-bv-theme='dark'] body.bv-swiss .bv-sw-figure img { opacity: 0.92; }

/* Mock data preview inside app figures — flat rows, hairline dividers.
   Decorative (aria-hidden); a real <img> replaces the rows. */
.bv-sw-shot-body {
    padding: 18px 20px;
    font-family: var(--sw-mono);
    font-size: 0.68rem;
    line-height: 2.1;
    color: var(--sw-graphite);
    min-height: 120px;
}
.bv-sw-shot-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--sw-line);
    white-space: nowrap;
    overflow: hidden;
}
.bv-sw-shot-row .pos { color: var(--sw-accent); font-weight: 500; }
.bv-sw-shot-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 40px;
    margin-top: 12px;
}
.bv-sw-shot-bars i { flex: 1; background: var(--sw-line); }
.bv-sw-shot-bars i.a { background: var(--sw-accent); }

/* ============================================================
   11. PROSE — longform / legal
   ============================================================ */
.bv-sw-prose {
    max-width: 74ch;
    font-family: var(--sw-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sw-graphite);
}
.bv-sw-prose h2,
.bv-sw-prose h3 {
    font-family: var(--sw-display);
    font-weight: 500;
    color: var(--sw-ink);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 2.4em 0 0.6em;
}
.bv-sw-prose h2 { font-size: 1.55rem; border-top: 1px solid var(--sw-line); padding-top: 1.2em; }
.bv-sw-prose h3 { font-size: 1.2rem; }
.bv-sw-prose a { color: var(--sw-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bv-sw-prose a:hover { color: var(--sw-accent-deep); }
.bv-sw-prose strong { color: var(--sw-ink); font-weight: 500; }
.bv-sw-prose ul, .bv-sw-prose ol { padding-left: 1.4em; }
.bv-sw-prose li { margin-bottom: 0.45em; }
.bv-sw-prose blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 24px;
    border-left: 2px solid var(--sw-accent);
    font-family: var(--sw-display);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--sw-ink);
}
.bv-sw-prose code {
    font-family: var(--sw-mono);
    font-size: 0.86em;
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    padding: 1px 6px;
}

/* ============================================================
   12. SITE FOOTER — ink block (markup in footer.php)
   ============================================================ */
body.bv-swiss .bv-footer {
    background: #0F0F0F;
    color: #A3A3A3;
    border-top: 1px solid #0F0F0F;
    padding: clamp(56px, 8vh, 88px) 0 40px;
    font-family: var(--sw-body);
    font-weight: 300;
}
html[data-bv-theme='dark'] body.bv-swiss .bv-footer {
    background: var(--sw-surface);
    border-top-color: var(--sw-line);
    color: var(--sw-graphite);
}
@media (prefers-color-scheme: dark) {
    html:not([data-bv-theme='light']) body.bv-swiss .bv-footer {
        background: var(--sw-surface);
        border-top-color: var(--sw-line);
        color: var(--sw-graphite);
    }
}
body.bv-swiss .bv-footer .bv-container {
    max-width: var(--sw-max);
    margin: 0 auto;
    padding-left: var(--sw-gutter);
    padding-right: var(--sw-gutter);
}
body.bv-swiss .bv-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 56px;
}
@media (min-width: 1024px) {
    body.bv-swiss .bv-footer-grid { grid-template-columns: 1fr 2fr; }
}
body.bv-swiss .bv-footer-wordmark {
    font-family: var(--sw-display);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    color: var(--sw-on-ink);
}
body.bv-swiss .bv-footer-logo { margin-bottom: 18px; }
body.bv-swiss .bv-footer-tagline {
    max-width: 320px;
    line-height: 1.65;
    font-size: 0.92rem;
}
body.bv-swiss .bv-footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 40px;
}
body.bv-swiss .bv-footer-col-title {
    color: var(--sw-on-ink);
    font-family: var(--sw-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 20px;
}
body.bv-swiss .bv-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.bv-swiss .bv-footer-col li { margin-bottom: 12px; }
body.bv-swiss .bv-footer-col a,
body.bv-swiss .bv-footer-bottom a {
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s var(--sw-ease);
}
body.bv-swiss .bv-footer-col a:hover,
body.bv-swiss .bv-footer-bottom a:hover { color: var(--sw-accent-deep); }
body.bv-swiss .bv-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    border-top: 1px solid #2E2C29;
    padding-top: 28px;
    font-family: var(--sw-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
body.bv-swiss .bv-footer-bottom a { text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
body.bv-swiss .bv-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
body.bv-swiss .bv-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sw-accent);
}

/* ============================================================
   13. MOTION & ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .bv-sw-ticker-track { animation: none; }
    .bv-sw-card,
    .bv-sw-btn,
    .bv-sw-row,
    .bv-sw-figure img,
    .bv-sw-form-row .bv-newsletter-btn { transition: none; }
    .bv-sw-card:hover { transform: none; box-shadow: none; }
}

.bv-sw a:focus-visible,
.bv-sw button:focus-visible,
.bv-sw input:focus-visible,
.bv-sw select:focus-visible,
.bv-sw textarea:focus-visible {
    outline: 2px solid var(--sw-accent);
    outline-offset: 2px;
}
