/* ===================================================================
   WHITEFLAG — base.css
   Single source of truth for shared styles across all pages.
   Page-specific overrides go in each page's inline <style> block.
   =================================================================== */

/* ---- RESET ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- LIGHT GREYSCALE PALETTE ---- */
:root {
    /* Backgrounds */
    --bg:            #ffffff;
    --bg-elevated:   #f7f7f8;
    --bg-surface:    #f0f0f2;
    --bg-hover:      rgba(0,0,0,0.03);  /* canonical (styleguide.html) */
    --bg-active:     rgba(0,0,0,0.06);  /* canonical (styleguide.html) */

    /* Cards — flat, no gradient */
    --card-bg:       #f7f7f8;
    --card-bg-solid: #f7f7f8;

    /* Accent — restrained, only used where color is needed.
       NOTE: --accent doubles as both default dark text color AND a "filled
       button / pill / active tab" background. This is a contrast trap:
       writing `background: var(--accent); color: var(--text-main)` looks
       like a contrasting pair but resolves to #1a1a1a on #1a1a1a (invisible).
       Whenever you set `background: var(--accent)`, set `color: var(--accent-on)`. */
    --accent:        #1a1a1a;
    --accent-on:     #ffffff;  /* paired foreground for any --accent background */
    --accent-hover:  #000000;
    --accent-muted:  rgba(0,0,0,0.06);
    --accent-subtle: rgba(0,0,0,0.04);  /* canonical (styleguide.html) */
    --accent-red:    #c4200a;

    /* Text */
    --text-primary:  #111111;
    --text-main:     #1a1a1a;
    --text-secondary:#4a4a4a;
    --text-tertiary: #757575;
    --text-muted:    #999999;
    --text-faint:    #c0c0c0;

    /* Borders */
    --border:        rgba(0,0,0,0.08);
    --border-strong: rgba(0,0,0,0.15);
    --border-accent: rgba(0,0,0,0.2);

    /* Semantic — muted, desaturated tones for light bg */
    --positive:      #1a7f5a;
    --negative:      #b91c1c;
    --warning:       #a16207;
    --info:          #2563eb;
    --purple:        #8b5cf6;
    --caution:       #c2410c;

    /* Entity-type palette — neutral distinguishing hues for categorical
       encoding (e.g. Network Constructor coalition members). Deliberately
       avoids reusing --positive / --negative / --warning so that the same
       view can layer SEMANTIC color (good/bad/score) on top of CATEGORICAL
       color (entity type) without visual collision. All five are AA-legible
       on white at 12px. Used as both text color and as background at low
       opacity (typically `${tc}20` for fill + `${tc}40` for border). */
    --type-city:                 #2563eb;  /* urban/blue */
    --type-state:                #475569;  /* slate/institutional */
    --type-territory:            #0e7490;  /* teal/geographic */
    --type-sovereign-city-state: #7c3aed;  /* purple/hybrid */
    --type-platform:             #be185d;  /* magenta/corporate */

    /* Type Scale (1.25 ratio, 14px base) */
    --text-2xs:  9px;
    --text-xs:   10px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-md:   16px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  32px;
    --text-3xl:  40px;
    --text-4xl:  48px;

    /* Spacing (8px base scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radii — sharp editorial: 0 everywhere */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* ---- BODY ---- */
html, body {
    /* Clip horizontal overflow at the document level so a single wide
       child element (a wide <table>, <pre>, image, etc.) cannot push
       the document wider than the viewport. This is critical on mobile:
       when the document is wider than the viewport, position:fixed
       elements anchor to the wider document (per the CSS spec's
       "initial containing block" rules), so a dropdown with right: 0
       lands offscreen instead of at the visible right edge. The fix
       belongs at the document root because individual pages have
       legitimate wide content (data tables, code blocks) that should
       scroll inside their own containers, not via the page itself. */
    overflow-x: hidden;
}
body {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---- CJK TYPOGRAPHY ----
   On Japanese / Chinese pages fall back to OS CJK fonts since IBM Plex
   Sans lacks coverage; slightly looser line-height reads better for CJK. */
html[lang="ja"] body {
    font-family: 'IBM Plex Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif;
    line-height: 1.75;
}
html[lang="zh"] body {
    font-family: 'IBM Plex Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    line-height: 1.75;
}
/* Russian benefits from Plex but bump line-height modestly for Cyrillic ascenders. */
html[lang="ru"] body { line-height: 1.65; }

/* ---- FOUT PREVENTION ---- */
.logo-group h1, header h1 { opacity: 0; transition: opacity 0.15s ease-in; }
.fonts-loaded .logo-group h1, .fonts-loaded header h1 { opacity: 1; }

/* ---- HEADER / NAV / LOGO ---- */
header {
    background: var(--bg);
    color: var(--text-main);
    padding: 15px 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-group { min-height: 45px; }
.logo-link {
    font-family: 'DynaPuff', cursive;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}
.logo-group h1 {
    font-family: 'DynaPuff', cursive;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--text-primary) !important;
    margin: 0;
    line-height: 1;
    font-weight: 700;
}
.logo-group h1 a,
.logo-group h1 a:hover,
.logo-group h1 a:visited { color: var(--text-primary) !important; text-decoration: none; }

.tagline {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3px;
    font-family: 'IBM Plex Mono', monospace;
    line-height: 1;
}

header nav {
    display: flex;
    align-items: center;
    gap: 0;
}
header nav a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 30px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    transition: color 0.2s;
    line-height: 1;
}
header nav a:hover,
header nav a.active {
    color: var(--text-primary);
}

/* ---- LANGUAGE SWITCHER ---- */
.lang-switcher-mount {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
}
select.lang-switcher {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 3px 22px 3px 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%234a4a4a' stroke-width='1.25' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    transition: color 0.2s, border-color 0.2s;
}
select.lang-switcher:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}
select.lang-switcher:focus {
    outline: none;
    color: var(--text-primary);
    border-color: var(--border-accent);
}
/* Fallback floating position when page has no nav-level mount point */
.lang-switcher-mount.lang-switcher-fallback {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9999;
    margin-left: 0;
}
.lang-switcher-mount.lang-switcher-fallback select.lang-switcher {
    background-color: var(--bg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ---- HAMBURGER (mobile) ---- */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
}
.hamburger span {
    width: 15px;
    height: 2px;
    background: var(--text-main);
    margin: 2px 0;
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(3.5px, -3.5px); }

/* ---- CONTAINER ---- */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
}

/* ---- FOOTER ---- */
footer {
    background: var(--bg);
    color: var(--text-secondary);
    text-align: center;
    padding: 20px 40px;
    font-size: 12px;
    margin-top: 60px;
    border-top: 1px solid var(--border);
}
footer a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}
footer a:hover {
    text-decoration: underline;
}

/* ---- LINKS (global) ---- */
a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }

/* ---- LEGAL DISCLAIMER BANNER ---- */
.legal-banner {
    background: #fefce8;
    border-bottom: 1px solid rgba(161,98,7,0.15);
    padding: 15px 20px;
}
.legal-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.legal-banner-text {
    font-size: 13px;
    color: var(--text-secondary);
    flex: 1;
}
.legal-banner-text strong {
    color: var(--warning);
}
.legal-banner-text a {
    color: var(--warning);
    text-decoration: underline;
    font-weight: 600;
}
.legal-banner-dismiss {
    background: rgba(161,98,7,0.08);
    color: var(--warning);
    border: 1px solid rgba(161,98,7,0.2);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}
.legal-banner-dismiss:hover {
    background: rgba(161,98,7,0.15);
}

/* ========== CODEX DRAWER ========== */
.codex-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-muted);
    color: var(--text-secondary);
    border: none;
    font-size: 10px;
    font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin-left: 6px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.codex-trigger:hover {
    background: var(--border-strong);
    box-shadow: none;
}

.codex-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: var(--bg);
    border-left: 1px solid var(--border-strong);
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,0.06);
}
.codex-drawer.open { transform: translateX(0); }

.codex-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
    flex-shrink: 0;
}
.codex-drawer-header .codex-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'IBM Plex Mono', monospace;
}
.codex-drawer-header .codex-ref {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', monospace;
}
.codex-drawer-header .codex-ref a { color: var(--text-primary); text-decoration: none; }
.codex-drawer-header .codex-ref a:hover { text-decoration: underline; }

.codex-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 0;
    transition: all 0.2s;
    line-height: 1;
}
.codex-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.codex-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.codex-drawer-body::-webkit-scrollbar { width: 6px; }
.codex-drawer-body::-webkit-scrollbar-track { background: transparent; }
.codex-drawer-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.codex-drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

.codex-entry-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; line-height: 1.3; }
.codex-entry-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }

.codex-formula-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-x: auto;
}

.codex-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    margin-top: 16px;
}
.codex-section-text { font-size: 12px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }

.codex-data-sources {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.codex-related {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.codex-related-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.codex-related a { display: block; font-size: 12px; color: var(--text-primary); text-decoration: none; padding: 4px 0; cursor: pointer; transition: color 0.2s; }
.codex-related a:hover { color: var(--text-tertiary); }

.codex-full-link { display: block; margin-top: 16px; font-size: 12px; color: var(--text-primary); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.codex-full-link:hover { color: var(--text-tertiary); }

.codex-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; }
.codex-overlay.active { display: block; }

/* --- LAYOUT UTILITIES --- */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

/* --- CARD / CONTAINER --- */
.wf-card { padding: var(--space-4); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* --- CALLOUT (border-left accent) --- */
.wf-callout { border-left: 4px solid var(--accent); padding: var(--space-4); background: var(--bg-elevated); border-radius: var(--radius-md); }
.wf-callout--positive { border-left-color: var(--positive); }
.wf-callout--negative { border-left-color: var(--negative); }
.wf-callout--warning  { border-left-color: var(--warning); }
.wf-callout--info     { border-left-color: var(--info); }

/* --- TYPOGRAPHY --- */
.font-mono { font-family: 'IBM Plex Mono', monospace; }
.text-data { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-xs); }
.text-label { font-family: 'IBM Plex Mono', monospace; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* --- SEMANTIC COLOR CLASSES (for JS templates) --- */
.color-positive { color: var(--positive); }
.color-negative { color: var(--negative); }
.color-warning  { color: var(--warning); }
.color-info     { color: var(--info); }

/* --- BUTTON (legacy, kept for backwards compat — prefer .btn-primary etc.) --- */
.wf-btn { padding: 8px 15px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-family: 'IBM Plex Sans', sans-serif; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }

/* --- MAP --- */
.map-container { --map-no-data: #e0e0e0; --map-stroke: rgba(0,0,0,0.1); }

/* ===================================================================
   COMPONENT LIBRARY (canonical, ported from styleguide.html Feb 2026)
   Use these classes in markup; pages should not redefine them inline.
   =================================================================== */

/* --- TYPE SCALE --- */
.type-display-4xl { font-size: var(--text-4xl); font-weight: 800; line-height: 1.1;  letter-spacing: -0.02em; }
.type-display-3xl { font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.type-display-2xl { font-size: var(--text-2xl); font-weight: 800; line-height: 1.2;  letter-spacing: -0.01em; }
.type-heading-xl  { font-size: var(--text-xl);  font-weight: 700; line-height: 1.25; }
.type-heading-lg  { font-size: var(--text-lg);  font-weight: 700; line-height: 1.3;  }
.type-body-md     { font-size: var(--text-md);   font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.type-body-base   { font-size: var(--text-base); font-weight: 400; line-height: 1.6; color: var(--text-secondary); }
.type-body-sm     { font-size: var(--text-sm);   font-weight: 400; line-height: 1.5; color: var(--text-tertiary); }
.type-caption     { font-size: var(--text-xs);  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.type-micro       { font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* --- BUTTONS ---
   .btn / .btn-primary / .btn-outline / .btn-ghost / .btn-sm intentionally
   omitted from base.css for now: 12 pages already define their own .btn
   inline. Will be added in Phase 3 alongside the per-page port to avoid
   silently inheriting text-transform/font-weight into existing buttons.
   See styleguide.html lines 400-445 for the canonical spec. */

/* --- HEADLINE CARD — single source of truth, no per-phase color --- */
.headline-card {
    background: transparent;
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    padding: var(--space-4);
}
.headline-card .fit-badge {
    background: rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 5px;
    font-size: var(--text-2xs);
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
}
.headline-card .tag {
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
}
.headline-card .tag.phase-tag {
    background: rgba(0,0,0,0.04);
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    font-weight: 700;
}
.headline-card .rationale {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(0,0,0,0.04);
    padding-top: 10px;
}

/* --- CARDS --- */
.card-flat {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-gradient {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-accented {
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.card-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: var(--space-2);
}
.card-title {
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: var(--space-2);
}
/* .card-body intentionally omitted: index.html already uses .card-body
   as a panel layout class (padding/flex/scroll). Add in Phase 3 after
   index.html's panel is renamed. Canonical spec: styleguide.html:486. */

/* --- DATA TABLE --- */
.sample-table {
    width: 100%;
    border-collapse: collapse;
}
.sample-table thead { background: rgba(0,0,0,0.04); }
.sample-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 700;
}
.sample-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--border);
}
.sample-table tr:nth-child(even) { background: rgba(0,0,0,0.015); }
.sample-table tr:hover            { background: rgba(0,0,0,0.03); }
.sample-table .mono     { font-family: 'IBM Plex Mono', monospace; }
.sample-table .positive { color: var(--positive); }
.sample-table .negative { color: var(--negative); }

/* --- BADGES ---
   .badge intentionally omitted: faq.html and valuation-framework.html
   already define their own .badge inline. Add in Phase 3.
   Canonical spec: styleguide.html lines 541-556. */

/* --- TABS ---
   .tab-bar / .tab-item intentionally omitted: terminal.html already
   defines its own .tab-bar inline. Add in Phase 3.
   Canonical spec: styleguide.html lines 559-590. */

/* --- INPUTS --- */
.input-field {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: 'IBM Plex Sans', sans-serif;
    transition: border-color 0.15s;
}
.input-field::placeholder { color: var(--text-faint); }
.input-field:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}
.input-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

/* --- STAT DISPLAYS ---
   .stat-number / .stat-number-light / .stat-label intentionally omitted:
   detachable-assets.html nests these heavily inside .network-stat-card,
   .fa-stat-card, .detachments-stat-card, etc. (see lines 600, 755, 990).
   Add in Phase 3 alongside the detachable-assets port.
   Canonical spec: styleguide.html lines 768-800. */

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    header { padding: 10px 15px; }
    .logo-group h1 { font-size: 18px; }

    header nav {
        position: fixed;
        top: 50px;
        left: auto;
        right: 0;
        width: 33.33%;
        min-width: 160px;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        border-left: 1px solid var(--border);
        flex-direction: column;
        padding: 0;
        display: none;
        z-index: 999;
    }
    header nav.active { display: flex; }
    header nav a {
        margin: 0;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border);
        font-size: 11px;
        width: 100%;
        text-align: right;
    }
    header nav a:last-child { border-bottom: none; }

    .hamburger { display: flex; }

    .container { padding: 30px 15px; }

    .codex-drawer {
        width: 100%;
        height: 60vh;
        top: auto;
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        transform: translateY(100%);
    }
    .codex-drawer.open { transform: translateY(0); }
    .codex-drawer::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(0,0,0,0.1);
        border-radius: 2px;
        margin: 8px auto 0;
    }
    .codex-trigger { width: 14px; height: 14px; font-size: 9px; }
}

@media (max-width: 480px) {
    .logo-group h1 { font-size: 16px; }
    .container { padding: 20px 15px; }
}

/* ===================================================================
   CASE STUDY PAGES (.case-study on <body>)
   Shared styles for long-form case study articles.
   Page-specific accent colors and unique components stay inline.
   =================================================================== */

.case-study {
    background: var(--bg-elevated);
    line-height: 1.7;
}

/* Override base header for case study simplified header */
.case-study header {
    padding: 20px 40px;
}
.case-study header h1 {
    font-size: 20px;
    font-weight: 700;
}
.case-study nav a {
    margin-left: 30px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
}
.case-study nav a:hover {
    text-decoration: underline;
}

/* Narrower container for readability */
.case-study .container {
    max-width: 900px;
    padding: 60px 40px;
}

/* Back link */
.case-study .back-link {
    margin-bottom: 40px;
    font-size: 14px;
}
.case-study .back-link a {
    color: var(--text-main);
    text-decoration: none;
}

/* Hero / intro section */
.case-study .hero-section {
    background: var(--card-bg);
    border-left: 5px solid var(--accent);
    padding: 40px;
    border-radius: var(--radius-md);
    margin-bottom: 40px;
}
.case-study .hero-section h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-main);
}
.case-study .hero-meta {
    display: flex;
    gap: 30px;
    font-size: 14px;
    color: var(--text-tertiary);
}
.case-study .hero-meta strong {
    color: var(--text-main);
}

/* Article body */
.case-study article {
    background: var(--bg);
    padding: 40px;
    border-radius: var(--radius-md);
}

/* Section headings */
.case-study h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px 0;
    color: var(--text-main);
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 10px;
}

/* Body text */
.case-study p {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

/* Highlight / callout boxes */
.case-study .highlight {
    border-left: 4px solid var(--accent);
    padding: 20px;
    margin: 20px 0;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}
.case-study .highlight strong {
    color: var(--text-main);
}

/* Lists inside articles */
.case-study article ul {
    margin: 20px 0;
    margin-left: 40px;
}
.case-study article li {
    margin-bottom: 10px;
}

/* Footer override for case study pages */
.case-study footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .case-study .container {
        padding: 30px 20px;
    }
    .case-study .hero-section {
        padding: 20px;
    }
    .case-study .hero-section h2 {
        font-size: 24px;
    }
    .case-study .hero-meta {
        flex-direction: column;
        gap: 10px;
    }
    .case-study article {
        padding: 20px;
    }
}