/* =============================================================================
   reading.css — Light "reading" theme (Medium-like)
   Scoped to body.theme-reading. Applied only to blog.html and
   research-submarine-cable-legal.html (and their /en/ mirrors).
   White background, near-black text, enlarged titles + body copy.
   ============================================================================= */

/* ── Variable remap: cascades through main.css ─────────────────────────────── */
body.theme-reading {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-card: #ffffff;
    --text-primary: #242424;
    --text-secondary: #4a4a4a;
    --accent-cyan: #17789c;          /* readable teal link/heading accent on white (oxxo v2) */
    --border-glow: rgba(0, 0, 0, 0.12);
}

/* ── Base / readability ────────────────────────────────────────────────────── */
body.theme-reading {
    background: #ffffff;
    color: #242424;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Reading column + Medium-like body copy */
body.theme-reading .intro-section {
    max-width: 700px;
    padding: 8px 24px 8px;
}
body.theme-reading .intro-section p {
    font-size: 20px;
    line-height: 1.7;
    color: #242424;
    margin-bottom: 1.2em;
}
body.theme-reading .intro-section h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #111;
    margin: 40px 0 16px;
    letter-spacing: -0.4px;
}
body.theme-reading .intro-section h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 28px 0 8px;
}

/* ── Enlarged article / page titles (Medium feel) ──────────────────────────── */
body.theme-reading .intro-hero {
    max-width: 700px;
    padding: 56px 24px 28px;
}
body.theme-reading .intro-hero h1 {
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: #111;
    margin-bottom: 14px;
}
body.theme-reading .intro-hero .subtitle {
    font-size: 19px;
    line-height: 1.5;
    color: #6a6a6a;
    letter-spacing: 0;
}

/* ── Header (full white) ───────────────────────────────────────────────────── */
body.theme-reading .header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
body.theme-reading .header h1 {
    color: #111;
    text-shadow: none;
}
body.theme-reading .header-info a {
    color: #444;
    border-color: rgba(0, 0, 0, 0.15);
}
body.theme-reading .header-info a:hover,
body.theme-reading .header-info a.active {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(11, 111, 164, 0.07);
}
body.theme-reading #langToggle {
    color: var(--accent-cyan) !important;
    background: #ffffff !important;
    border-color: var(--accent-cyan) !important;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
body.theme-reading .site-footer {
    background: #f5f7fa;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    color: #555;
}
body.theme-reading .site-footer a { color: var(--accent-cyan); }

/* =============================================================================
   research-submarine-cable-legal.html specifics
   ============================================================================= */
body.theme-reading .article-meta {
    background: #f7f9fb;
    border: 1px solid rgba(0, 0, 0, 0.10);
    color: #555;
}
body.theme-reading .article-meta .meta-label { color: var(--accent-cyan); }
body.theme-reading .keyword-badge {
    background: rgba(11, 111, 164, 0.08);
    border: 1px solid rgba(11, 111, 164, 0.30);
    color: var(--accent-cyan);
}
body.theme-reading .legal-highlight {
    border-left: 3px solid var(--accent-cyan);
    background: #eef6fb;                 /* subtle blue tint callout on white */
    color: #2a2a2a;
    font-size: 16px;
    line-height: 1.7;
}
body.theme-reading .legal-highlight strong { color: var(--accent-cyan); }
body.theme-reading .gray-zone-table { font-size: 15px; }
body.theme-reading .gray-zone-table th {
    background: #eef1f5;
    color: #0b6fa4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
body.theme-reading .gray-zone-table td {
    color: #2a2a2a;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-reading .ref-list { font-size: 15px; }
body.theme-reading .ref-list li {
    color: #444;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-reading .ref-list li em { color: #111; font-style: italic; }

body.theme-reading .intro-cta a {
    background: var(--accent-cyan);
    color: #ffffff;
}
body.theme-reading .intro-cta a:hover {
    box-shadow: 0 4px 18px rgba(11, 111, 164, 0.30);
}

/* =============================================================================
   blog.html specifics — the page's bespoke <style> uses literal cyan, so
   override explicitly.
   ============================================================================= */
body.theme-reading .blog-hero {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-reading .blog-hero::after { opacity: 0.4; }     /* tone the sweep line */
body.theme-reading .hero-canvas { opacity: 0.15; }         /* faint cyan grid → barely there */

body.theme-reading .hero-eyebrow { color: #8a8a8a; }
body.theme-reading .hero-title {
    -webkit-text-fill-color: initial;
    background: none;
    color: #111;
    font-size: clamp(34px, 6vw, 52px);
    font-weight: 800;
    letter-spacing: -1px;
}
body.theme-reading .hero-sub { color: #5a5a5a; }
body.theme-reading .h-stat-num {
    color: var(--accent-cyan);
    text-shadow: none;
}
body.theme-reading .h-stat-label { color: #6a6a6a; }

/* Series track + filter bar (were dark islands) */
body.theme-reading .series-track {
    background: #f7f9fb;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-reading .series-dot {
    background: #ffffff;
    border-color: rgba(11, 111, 164, 0.30);
    color: #5a5a5a;
}
body.theme-reading .series-dot:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(11, 111, 164, 0.08);
    box-shadow: 0 0 10px rgba(11, 111, 164, 0.15);
}
body.theme-reading .series-dot-label { color: #9aa0a6; }
body.theme-reading .series-dot:hover .series-dot-label { color: var(--accent-cyan); }
body.theme-reading .series-line {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.06));
}

body.theme-reading .filter-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.theme-reading .filter-bar-label { color: #9aa0a6; }
body.theme-reading .filter-btn {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #5a5a5a;
}
body.theme-reading .filter-btn:hover,
body.theme-reading .filter-btn.active {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(11, 111, 164, 0.07);
}

/* Cards → clean white cards with soft shadow */
body.theme-reading .blog-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.theme-reading .blog-card:hover {
    border-color: rgba(11, 111, 164, 0.40);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}
body.theme-reading .blog-card::before {
    background: linear-gradient(90deg, var(--accent-cyan) 0%, transparent 80%);
}
body.theme-reading .card-num { color: var(--accent-cyan); }
body.theme-reading .card-title-zh { color: #1a1a1a; }
body.theme-reading .blog-card:hover .card-title-zh { color: var(--accent-cyan); }
body.theme-reading .card-title-en { color: #8a8a8a; }
body.theme-reading .card-desc { color: #4a4a4a; font-size: 14px; }
body.theme-reading .card-bg-num { color: rgba(0, 0, 0, 0.04); }
body.theme-reading .blog-card:hover .card-bg-num { color: rgba(0, 0, 0, 0.06); }
body.theme-reading .card-tag {
    background: rgba(11, 111, 164, 0.07);
    border: 1px solid rgba(11, 111, 164, 0.20);
    color: var(--accent-cyan);
}
body.theme-reading .card-reading { color: #9aa0a6; }
body.theme-reading .card-arrow { color: var(--accent-cyan); }

/* Research card — darken the gold treatment for contrast on white */
body.theme-reading .card-research {
    border-color: rgba(184, 120, 0, 0.30);
    background: #fffdf7;
}
body.theme-reading .card-research::before {
    background: linear-gradient(90deg, #c8860a 0%, transparent 80%);
}
body.theme-reading .card-research:hover {
    border-color: rgba(184, 120, 0, 0.55);
    background: #fffdf7;
    box-shadow: 0 10px 30px rgba(184, 120, 0, 0.12);
}
body.theme-reading .card-research .card-num { color: #b8780a; }
body.theme-reading .card-research:hover .card-title-zh { color: #a86a00; }
body.theme-reading .card-research .card-tag {
    border-color: rgba(184, 120, 0, 0.35);
    color: #a86a00;
    background: rgba(184, 120, 0, 0.07);
}
body.theme-reading .card-research .card-arrow { color: #b8780a; }
body.theme-reading .card-research .card-title-en { color: #b8860b !important; }

/* Section labels + CTA */
body.theme-reading .section-label {
    color: #8a8a8a;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-reading .section-label.gold { color: #b8780a; border-color: rgba(184, 120, 0, 0.18); }

body.theme-reading .cta-primary {
    background: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    color: #ffffff;
}
body.theme-reading .cta-primary:hover {
    background: #095a85;
    box-shadow: 0 6px 18px rgba(11, 111, 164, 0.25);
}
body.theme-reading .cta-secondary {
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #5a5a5a;
}
body.theme-reading .cta-secondary:hover {
    border-color: rgba(0, 0, 0, 0.35);
    color: #1a1a1a;
}

/* =============================================================================
   Evergreen article pages (blog-*.html) — shared components.
   These pages lean on the CSS variables above, so most styling cascades for
   free; below are the few hard-coded cyan spots that need fixing on white.
   ============================================================================= */
/* Decorative "SERIES →" eyebrow label (inline style → needs !important) */
body.theme-reading .series-nav > span { color: #8a8a8a !important; }

/* Series chips */
body.theme-reading .series-chip { background: #fff; color: #5a5a5a; }
body.theme-reading .series-chip:hover,
body.theme-reading .series-chip.active {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    background: rgba(11, 111, 164, 0.07);
}

/* Story hook + fact callouts → clean tinted callouts on white */
body.theme-reading .story-hook {
    background: #eef6fb;
    border-left-color: var(--accent-cyan);
    color: #2a2a2a;
    font-size: 16px;
}
body.theme-reading .fact-box { background: #f7f9fb; color: #444; }
body.theme-reading .fact-box strong,
body.theme-reading .fact-title { color: var(--accent-cyan); }

/* Stat callouts */
body.theme-reading .stat-callout { background: #f7f9fb; }
body.theme-reading .stat-number { color: var(--accent-cyan); }
body.theme-reading .stat-label { color: #5a5a5a; }

/* Timeline list */
body.theme-reading .tl-list li { color: #444; }
body.theme-reading .tl-year { color: var(--accent-cyan); }

/* Cable-layer breakdown */
body.theme-reading .layer-name { color: #1a1a1a; }
body.theme-reading .layer-desc { color: #4a4a4a; }
body.theme-reading .layer-num { color: var(--accent-cyan); }

/* FAQ accordion */
body.theme-reading .faq-item { background: #fff; }
body.theme-reading .faq-item summary { color: #1a1a1a; }
body.theme-reading .faq-item summary:hover { color: var(--accent-cyan); }
body.theme-reading .faq-item summary::after { color: var(--accent-cyan); }
body.theme-reading .faq-answer { color: #4a4a4a; }

/* Inline code badge (methodology) */
body.theme-reading .step-code { color: #095a85; }

/* Topic-cluster footer + sources list */
body.theme-reading .topic-cluster { background: #f7f9fb; }
body.theme-reading .topic-cluster h2 { color: var(--accent-cyan); }
body.theme-reading .topic-cluster a { background: #fff; color: #5a5a5a; }
body.theme-reading .topic-cluster a:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    background: rgba(11, 111, 164, 0.07);
}
body.theme-reading .src-list { color: #444; }
body.theme-reading .src-list a { color: var(--accent-cyan); }
body.theme-reading .ai-summary { background: #f7f9fb; color: #2a2a2a; }

/* =============================================================================
   Enlarged type scale (user request) — bigger fonts on the blog index cards
   and inside every article. Placed last + uses `body.theme-reading .X`
   (2-class) so it beats the pages' single-class inline <style> rules.
   ============================================================================= */
/* blog.html article cards */
body.theme-reading .card-num { font-size: 11px; }
body.theme-reading .card-title-zh { font-size: 20px; line-height: 1.45; }
body.theme-reading .card-title-en { font-size: 12px; }
body.theme-reading .card-desc { font-size: 16px; line-height: 1.75; }
body.theme-reading .card-tag { font-size: 11px; }
body.theme-reading .card-reading { font-size: 11px; }

/* article reading content + components (blog-*.html) */
body.theme-reading .intro-section ul[style] li { font-size: 16px; line-height: 1.9; }
body.theme-reading .story-hook { font-size: 17px; line-height: 1.95; }
body.theme-reading .fact-box { font-size: 15px; line-height: 1.9; }
body.theme-reading .fact-title { font-size: 11px; }
body.theme-reading .stat-number { font-size: 30px; }
body.theme-reading .stat-label { font-size: 13px; }
body.theme-reading .tl-list li { font-size: 15px; line-height: 1.85; }
body.theme-reading .tl-year { font-size: 11px; }
body.theme-reading .cable-layer { font-size: 15px; }
body.theme-reading .layer-num { font-size: 11px; }
body.theme-reading .faq-item summary { font-size: 16px; }
body.theme-reading .faq-answer { font-size: 15px; line-height: 1.9; }
body.theme-reading .series-chip { font-size: 12px; }

/* research page components */
body.theme-reading .keyword-badge { font-size: 11px; }
body.theme-reading .legal-highlight { font-size: 16px; }
body.theme-reading .gray-zone-table { font-size: 16px; }
body.theme-reading .ref-list { font-size: 16px; }
body.theme-reading .src-list { font-size: 16px; }
body.theme-reading .topic-cluster a { font-size: 13px; }

/* intro.html (About page) */
body.theme-reading .intro-tool-card p { font-size: 15px; }
/* article-series mini-card index numbers (inline cyan → readable gray) */
body.theme-reading .intro-section a > span { color: #8a8a8a !important; }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body.theme-reading .intro-section p { font-size: 18px; }
    body.theme-reading .intro-section h2 { font-size: 25px; }
    body.theme-reading .intro-section h3 { font-size: 20px; }
    body.theme-reading .intro-hero { padding: 40px 20px 24px; }
}

/* =============================================================================
   Reading theme v2 — oxxostudio-inspired restyle
   Extracted with the style-extractor workflow from www.oxxostudio.tw evidence
   (see design/oxxostudio-reading-style-guide.md for tokens + evidence manifest).
   DNA: pale-gray canvas + white rounded cards with soft shadows, per-category
   color system (--cat), ribbon flags, dots-on-a-line nav, dashed separators,
   letter-spaced identity type. Placed last so it wins the cascade over the
   Medium-like v1 rules above (same 2-class specificity, later position).
   ============================================================================= */

body.theme-reading {
    --ox-canvas: #eef0f1;
    --ox-paper: #ffffff;
    --ox-ink: #333333;
    --ox-ink-2: #5f5f5f;
    --ox-ink-3: #9a9a9a;
    --ox-dash: #d8d8d8;
    --ox-radius: 8px;
    --ox-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    --ox-shadow-hover: 0 10px 26px rgba(0, 0, 0, .14);
    /* category palette (oxxostudio nav rainbow) */
    --cat-monitor: #3aa4c5;   /* 監測概念 teal (default) */
    --cat-cable:   #35b558;   /* 海底電纜 green */
    --cat-ref:     #f2a154;   /* 參考/詞彙 peach */
    --cat-threat:  #e85d5d;   /* 威脅 coral */
    --cat-law:     #9760b3;   /* 執法法律 purple */
    --cat-ocean:   #5b7ec9;   /* 海洋法 indigo */
    --cat-method:  #f5a623;   /* 方法論 orange */
    --cat-gold:    #c8860a;   /* 學術研究 gold */
}

/* ── Header: white paper + soft shadow ─────────────────────────────────────── */
body.theme-reading .header {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

/* ── Blog index: gray canvas so white cards pop (oxxo homepage) ────────────── */
body.theme-reading:has(.blog-grid) {
    background: var(--ox-canvas);
}
body.theme-reading:has(.blog-grid) .site-footer {
    background: #e6e8ea;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* ── Hero → letter-spaced identity block (logo + tagline feel) ─────────────── */
body.theme-reading .blog-hero {
    background: var(--ox-paper);
    border-bottom: none;
    padding-bottom: 40px;
}
body.theme-reading .blog-hero::after { display: none; }   /* neon sweep line off */
body.theme-reading .hero-canvas { display: none; }        /* radar grid off */
body.theme-reading .hero-eyebrow {
    color: #b9b9b9;
    letter-spacing: 5px;
}
body.theme-reading .hero-title {
    color: var(--ox-ink);
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 5vw, 44px);
    letter-spacing: 10px;
    text-indent: 10px;      /* optically recenters letter-spaced CJK */
}
body.theme-reading .hero-sub {
    color: var(--ox-ink-3);
    letter-spacing: 1px;
}
/* stat numerals pick up the rainbow */
body.theme-reading .h-stat-num { font-weight: 600; }
body.theme-reading .hero-stat:nth-child(1) .h-stat-num { color: var(--cat-cable); }
body.theme-reading .hero-stat:nth-child(2) .h-stat-num { color: var(--cat-monitor); }
body.theme-reading .hero-stat:nth-child(3) .h-stat-num { color: var(--cat-method); }

/* ── Series track → colored dots sitting on a thin line ────────────────────── */
body.theme-reading .series-track {
    background: var(--ox-paper);
    border-bottom: none;
    padding: 20px 24px 30px;
}
body.theme-reading .series-line {
    background: #e2e2e2;
    height: 1px;
}
body.theme-reading .series-dot {
    --cat: var(--cat-monitor);
    width: 32px; height: 32px;
    background: var(--cat);
    border: none;
    color: #fff;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
body.theme-reading .series-dot:hover {
    background: var(--cat);
    color: #fff;
    border: none;
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}
body.theme-reading .series-dot-label { color: #a8a8a8; font-size: 10px; }
body.theme-reading .series-dot:hover .series-dot-label { color: var(--cat); }
body.theme-reading .series-dot[href*="submarine-cable"]  { --cat: var(--cat-cable); }
body.theme-reading .series-dot[href*="what-is-ais"]      { --cat: var(--cat-monitor); }
body.theme-reading .series-dot[href*="cable-status"]     { --cat: var(--cat-ref); }
body.theme-reading .series-dot[href*="cable-threats"]    { --cat: var(--cat-threat); }
body.theme-reading .series-dot[href*="enforcement"]      { --cat: var(--cat-law); }
body.theme-reading .series-dot[href*="methodology"]      { --cat: var(--cat-method); }

/* ── Filter bar → borderless labels with colored dots (oxxo category nav) ──── */
body.theme-reading .filter-bar {
    background: var(--ox-paper);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    padding: 12px 24px 14px;
    justify-content: safe center;
}
body.theme-reading .filter-btn {
    --cat: #666666;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: transparent;
    color: #777;
    font-size: 12.5px;
    padding: 4px 10px;
    transition: color .2s;
}
body.theme-reading .filter-btn::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cat);
    flex-shrink: 0;
}
body.theme-reading .filter-btn:hover,
body.theme-reading .filter-btn.active {
    background: transparent;
    border: none;
    color: var(--cat);
    font-weight: 700;
}
body.theme-reading .filter-btn[data-filter="all"]    { --cat: #4a4a4a; }
body.theme-reading .filter-btn[data-filter="基礎"]   { --cat: var(--cat-monitor); }
body.theme-reading .filter-btn[data-filter="AIS"]    { --cat: var(--cat-cable); }
body.theme-reading .filter-btn[data-filter="威脅"]   { --cat: var(--cat-threat); }
body.theme-reading .filter-btn[data-filter="執法"]   { --cat: var(--cat-law); }
body.theme-reading .filter-btn[data-filter="海洋法"] { --cat: var(--cat-ocean); }
body.theme-reading .filter-btn[data-filter="方法"]   { --cat: var(--cat-method); }
body.theme-reading .filter-btn[data-filter="學術"]   { --cat: var(--cat-gold); }

/* ── Section labels ────────────────────────────────────────────────────────── */
body.theme-reading .section-label {
    color: #a0a0a0;
    border-top: none;
    letter-spacing: 4px;
}
body.theme-reading .section-label.gold { color: var(--cat-gold); }

/* ── Cards → white rounded paper with ribbon flags ─────────────────────────── */
body.theme-reading .blog-card {
    --cat: var(--cat-monitor);
    background: var(--ox-paper);
    border: none;
    border-radius: var(--ox-radius);
    box-shadow: var(--ox-shadow);
    overflow: visible;               /* let the ribbon poke past the edge */
    padding: 46px 24px 20px;
}
body.theme-reading .blog-card:hover {
    background: var(--ox-paper);
    border: none;
    box-shadow: var(--ox-shadow-hover);
}
body.theme-reading .blog-card::before { display: none; }   /* neon top line off */
body.theme-reading .card-bg-num { display: none; }         /* watermark off */

/* category colors via data-tags (later rules override the teal default) */
body.theme-reading .blog-card[data-tags*="海底電纜"],
body.theme-reading .blog-card[data-tags*="台灣海纜"] { --cat: var(--cat-cable); }
body.theme-reading .blog-card[data-tags*="詞彙"],
body.theme-reading .blog-card[data-tags*="海域分區"] { --cat: var(--cat-ref); }
body.theme-reading .blog-card[data-tags*="威脅"]     { --cat: var(--cat-threat); }
body.theme-reading .blog-card[data-tags*="執法"],
body.theme-reading .blog-card[data-tags*="法律"]     { --cat: var(--cat-law); }
body.theme-reading .blog-card[data-tags*="海洋法"]   { --cat: var(--cat-ocean); }
body.theme-reading .blog-card[data-tags*="方法"]     { --cat: var(--cat-method); }
body.theme-reading .blog-card[data-tags*="學術"]     { --cat: var(--cat-gold); }

/* ribbon flag: colored band, arrow tip on the right, fold under the overhang */
body.theme-reading .card-num {
    position: absolute;
    top: 16px;
    left: -8px;
    background: var(--cat);
    color: #fff;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 4px 16px 4px 12px;
    border-radius: 2px 0 0 0;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
body.theme-reading .card-num::after {      /* arrow tip */
    content: '';
    position: absolute;
    left: 100%; top: 0;
    height: 100%;
    border-left: 8px solid var(--cat);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    box-sizing: border-box;
    width: 8px;
    border-top-width: 11px;
    border-bottom-width: 11px;
}
body.theme-reading .card-num::before {     /* fold triangle under the overhang */
    content: '';
    position: absolute;
    left: 0; top: 100%;
    border-top: 6px solid rgba(0, 0, 0, .30);
    border-left: 8px solid transparent;
}
@supports (color: color-mix(in srgb, red 50%, black)) {
    body.theme-reading .card-num::before {
        border-top-color: color-mix(in srgb, var(--cat) 55%, black);
    }
}

body.theme-reading .card-title-zh { color: var(--ox-ink); }
body.theme-reading .blog-card:hover .card-title-zh { color: var(--cat); }
body.theme-reading .card-title-en { color: #a8a8a8; }
body.theme-reading .card-desc {
    color: var(--ox-ink-2);
    border-top: 1px dashed var(--ox-dash);   /* oxxo dashed divider */
    padding-top: 12px;
    margin-top: 2px;
}
body.theme-reading .card-tag {
    background: #f4f4f4;
    border: none;
    color: #8a8a8a;
    border-radius: 12px;
}
body.theme-reading .card-reading { color: #b5b5b5; }
body.theme-reading .card-arrow { color: var(--cat); }

/* research card: gold ribbon on plain white paper (drop the tinted panel) */
body.theme-reading .card-research,
body.theme-reading .card-research:hover {
    background: var(--ox-paper);
    border: none;
}
body.theme-reading .card-research { box-shadow: var(--ox-shadow); }
body.theme-reading .card-research:hover { box-shadow: var(--ox-shadow-hover); }
body.theme-reading .card-research::before { display: none; }
body.theme-reading .card-research .card-num { color: #fff; }
body.theme-reading .card-research:hover .card-title-zh { color: var(--cat-gold); }

/* CTA pills */
body.theme-reading .cta-primary {
    border-radius: 24px;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 1px;
}
body.theme-reading .cta-secondary { border-radius: 24px; }

/* =============================================================================
   Article pages (blog-*.html) — oxxo reading column
   ============================================================================= */

/* h2: short rounded accent bar + dashed rule (dashed-separator DNA) */
body.theme-reading .intro-section h2 {
    position: relative;
    padding-left: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ox-dash);
}
body.theme-reading .intro-section h2::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 18px;
    width: 5px;
    border-radius: 3px;
    background: var(--accent-cyan);
}
body.theme-reading .intro-hero .subtitle { letter-spacing: 1.5px; }

/* callouts: tinted paper + dashed borders + radius */
body.theme-reading .story-hook {
    background: #f9f9f7;
    border: 1px dashed #d9d9d3;
    border-left: 4px solid var(--accent-cyan);
    border-radius: 0 var(--ox-radius) var(--ox-radius) 0;
}
body.theme-reading .fact-box {
    background: #fafafa;
    border: 1px dashed var(--ox-dash);
    border-radius: var(--ox-radius);
}
body.theme-reading .alert-box {
    border-radius: var(--ox-radius);
    border-style: dashed;
}

/* stat callouts: white cards, numerals rotate through the palette */
body.theme-reading .stat-callout {
    background: var(--ox-paper);
    border: none !important;
    border-radius: var(--ox-radius);
    box-shadow: var(--ox-shadow);
}
body.theme-reading .stat-callout:nth-child(4n+1) .stat-number { color: var(--cat-monitor); }
body.theme-reading .stat-callout:nth-child(4n+2) .stat-number { color: var(--cat-cable); }
body.theme-reading .stat-callout:nth-child(4n+3) .stat-number { color: var(--cat-method); }
body.theme-reading .stat-callout:nth-child(4n+4) .stat-number { color: var(--cat-threat); }

/* tables: light header + dashed row rules */
body.theme-reading .intro-section table th,
body.theme-reading .ais-data-table th,
body.theme-reading .gray-zone-table th {
    background: #f3f4f5;
    color: #555;
    border-bottom: 1px solid #e3e3e3;
}
body.theme-reading .intro-section table td,
body.theme-reading .ais-data-table td,
body.theme-reading .gray-zone-table td {
    border-bottom: 1px dashed #e6e6e6;
    color: var(--ox-ink-2);
}

/* list-row components (dark-reason etc.) */
body.theme-reading .dark-reason {
    background: var(--ox-paper);
    border: 1px solid #ececec;
    border-radius: var(--ox-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
body.theme-reading .dark-reason-text { color: var(--ox-ink-2); }
body.theme-reading .dark-reason-text strong { color: var(--ox-ink); }

/* FAQ: white rounded cards */
body.theme-reading .faq-item {
    border: 1px solid #ececec;
    border-radius: var(--ox-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* series chips: rounded pills, active = filled */
body.theme-reading .series-chip {
    border-radius: 14px;
    border: 1px solid #e0e0e0;
}
body.theme-reading .series-chip.active {
    background: var(--accent-cyan);
    color: #fff;
    border-color: var(--accent-cyan);
}

/* topic cluster + footer: quiet paper */
body.theme-reading .topic-cluster {
    background: #f7f8f8;
    border: none;
    border-radius: var(--ox-radius);
}
body.theme-reading .topic-cluster a {
    background: var(--ox-paper);
    border: 1px solid #e5e5e5;
    border-radius: 14px;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body.theme-reading .hero-title { letter-spacing: 5px; text-indent: 5px; }
    body.theme-reading .card-num { left: -6px; }
    body.theme-reading .blog-card { padding: 44px 20px 18px; }
}