@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    color-scheme: light;
    --bg-0: #2a1d58;
    --bg-1: #4f3d97;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: #fcfbff;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --border: rgba(109, 40, 217, 0.2);
    --teal-700: #5b21b6;
    --teal-600: #6d28d9;
    --teal-500: #8b5cf6;
    --amber-600: #7c3aed;
    --amber-500: #a855f7;
    --focus-ring: rgba(139, 92, 246, 0.5);
    --shadow-soft: 0 14px 32px rgba(16, 6, 40, 0.32);
    --shadow-hover: 0 22px 44px rgba(16, 6, 40, 0.4);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --z-base: 10;
    --z-floating: 20;
    --z-overlay: 50;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    overflow-wrap: anywhere;
}

.reading-actions, .topic-list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.reading-card { min-width: 0; align-content: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-strong); }
.reading-card .chip { justify-self: start; }
.reading-card h3 { font-size: 1.2rem; }
.month-archive { border-top: 1px solid var(--border); }
.month-list { display: grid; gap: 0.5rem; padding-bottom: 0.75rem; }
summary { min-height: 44px; padding: 0.65rem 0; cursor: pointer; font-weight: 700; }
summary:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 3px; }
.article-card { scroll-margin-top: 1rem; }
.article-card:target { outline: 3px solid var(--teal-500); outline-offset: 3px; }
.empty-state { padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
@media (max-width: 800px) { .featured-grid { grid-template-columns: 1fr; } }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Noto Sans TC', 'IBM Plex Sans', 'Segoe UI', sans-serif;
    line-height: 1.65;
    color: var(--ink-900);
    background:
        radial-gradient(circle at 14% 14%, rgba(167, 139, 250, 0.34), transparent 37%),
        radial-gradient(circle at 88% 8%, rgba(139, 92, 246, 0.28), transparent 40%),
        radial-gradient(circle at 65% 86%, rgba(109, 40, 217, 0.2), transparent 44%),
        linear-gradient(160deg, var(--bg-0), var(--bg-1));
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(221, 214, 254, 0.26) 0.65px, transparent 0.65px);
    background-size: 22px 22px;
    opacity: 0.14;
}

body::after {
    content: "";
    position: fixed;
    inset: auto auto -180px -120px;
    width: 440px;
    height: 440px;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.3), rgba(196, 181, 253, 0));
}

main,
header,
section,
footer {
    position: relative;
    z-index: var(--z-base);
}

a {
    color: var(--teal-700);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--teal-600);
}

a:focus-visible,
button:focus-visible,
.month-toggle:focus-visible,
.language-tab:focus-visible,
.list-link:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 1.5rem auto 2.5rem;
    display: grid;
    gap: 1.2rem;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(59, 30, 122, 0.97), rgba(91, 33, 182, 0.95) 58%, rgba(124, 58, 237, 0.93));
    box-shadow: var(--shadow-soft);
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 42%);
    pointer-events: none;
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 214, 254, 0.46), rgba(221, 214, 254, 0));
    pointer-events: none;
}

.eyebrow {
    margin: 0;
    font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.92;
}

h1,
h2,
h3 {
    font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
    line-height: 1.22;
    margin: 0;
    color: inherit;
}

.hero-panel h1 {
    margin-top: 0.45rem;
    font-size: clamp(1.95rem, 4.2vw, 3.1rem);
}

.hero-subtitle {
    margin-top: 0.8rem;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(248, 250, 252, 0.92);
    max-width: 70ch;
}

.surface-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 245, 255, 0.88));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.2vw, 1.65rem);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    transition: transform 210ms ease, box-shadow 210ms ease;
}

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

.section-title {
    margin: 0;
    color: var(--ink-900);
    font-size: clamp(1.2rem, 2.6vw, 1.65rem);
}

.subtle {
    margin: 0;
    color: var(--ink-600);
}

.flow {
    display: grid;
    gap: 1rem;
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    color: var(--ink-600);
    font-size: 0.93rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.25rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(127, 82, 255, 0.24);
    color: var(--teal-700);
    background: rgba(127, 82, 255, 0.12);
    font-size: 0.82rem;
    font-weight: 700;
}

.chip-solid {
    border-color: transparent;
    color: #f0fdfa;
    background: linear-gradient(135deg, var(--teal-700), var(--teal-600));
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.62rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--teal-700), var(--teal-600));
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.button:hover {
    color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(109, 40, 217, 0.34);
}

.button:active {
    transform: translateY(0);
}

.button-secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12));
    border-color: rgba(255, 255, 255, 0.4);
    color: #f8fafc;
    backdrop-filter: blur(4px);
}

.button-secondary:hover {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24);
}

.button-ghost {
    background: rgba(127, 82, 255, 0.08);
    border-color: rgba(127, 82, 255, 0.24);
    color: var(--teal-700);
}

.button-ghost:hover {
    color: var(--teal-700);
    box-shadow: 0 10px 20px rgba(109, 40, 217, 0.24);
}

.button-contrast {
    background: linear-gradient(135deg, #f8f5ff, #ede9fe);
    color: #4c1d95;
    border: 1px solid rgba(196, 181, 253, 0.9);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.24);
}

.button-contrast:hover {
    color: #3b0764;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.3);
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-link {
    display: block;
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: linear-gradient(180deg, #ffffff, #faf7ff);
    text-decoration: none;
    color: var(--ink-900);
    font-weight: 500;
    transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
    cursor: pointer;
}

.list-link:hover {
    transform: translateY(-1px);
    border-color: rgba(127, 82, 255, 0.35);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
    color: var(--ink-900);
}

.footer-note {
    text-align: center;
    color: rgba(241, 245, 249, 0.88);
    font-size: 0.92rem;
    padding: 0.6rem 0;
}

.reveal {
    animation: fade-up 360ms ease both;
}

.reveal:nth-child(2) {
    animation-delay: 65ms;
}

.reveal:nth-child(3) {
    animation-delay: 110ms;
}

.reveal:nth-child(4) {
    animation-delay: 150ms;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .shell {
        width: min(1120px, calc(100% - 1.25rem));
        margin-top: 1rem;
    }

    .hero-panel {
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 640px) {
    .shell {
        width: calc(100% - 1rem);
        gap: 0.9rem;
    }

    .hero-panel,
    .surface-card {
        border-radius: var(--radius-md);
    }

    .button {
        width: 100%;
    }
}

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

.home-languages { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1rem; }
.home-languages button { min-height: 44px; padding: 0.4rem 0.8rem; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; background: transparent; color: white; cursor: pointer; font: inherit; }
.home-languages button[aria-pressed="true"] { background: white; color: var(--teal-700); font-weight: 700; }
.featured-grid { grid-auto-rows: 1fr; }
.reading-card { display: flex; flex-direction: column; align-items: stretch; }
.reading-card > .chip { align-self: flex-start; }
.reading-card .preview-arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-top: auto;
    padding: 0;
    align-self: flex-end;
    border: 0;
    background: transparent;
    color: var(--teal-700);
    box-shadow: none;
}
.reading-card .preview-arrow:hover {
    background: rgba(109, 40, 217, 0.06);
    color: var(--teal-700);
    box-shadow: none;
    transform: none;
}
[hidden] { display: none !important; }

/* Applies to previously generated daily pages as well as new ones. */
a[data-reading-event="original_article_click"] {
    min-height: 44px;
    width: auto;
    padding: 0.5rem 0;
    border: 0;
    background: transparent;
    color: var(--teal-700);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    box-shadow: none;
}
a[data-reading-event="original_article_click"]:hover {
    background: transparent;
    color: var(--teal-700);
    box-shadow: none;
    transform: none;
}

/* Shared reading palette. Specificity also covers immutable published HTML. */
:root {
    --bg-0: #f3effa;
    --bg-1: #f3effa;
    --surface: #fff;
    --surface-strong: #fff;
    --muted-surface: #f3f3f5;
    --ink-900: #27272a;
    --ink-700: #414145;
    --ink-600: #58585f;
    --ink-500: #63636c;
    --border: #d9d9df;
    --teal-700: #6331ae;
    --teal-600: #713fc0;
    --teal-500: #8554d3;
    --shadow-soft: none;
    --shadow-hover: none;
    --radius-xl: 8px;
    --radius-lg: 6px;
    --radius-md: 4px;
    --radius-sm: 4px;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-0: #24212b;
    --bg-1: #24212b;
    --surface: #27272b;
    --surface-strong: #27272b;
    --muted-surface: #303035;
    --ink-900: #eeeeef;
    --ink-700: #d3d3d7;
    --ink-600: #b6b6be;
    --ink-500: #aaaab4;
    --border: #48484f;
    --teal-700: #c3a4f5;
    --teal-600: #d5bfff;
    --teal-500: #a77bdf;
}
html body { background: var(--bg-0); }
html body::before, html body::after,
html .hero-panel::before, html .hero-panel::after,
html .article-card::after { display: none; }
html .hero-panel, html .surface-card, html .article-card, html .stats-card {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-900);
    box-shadow: none;
    backdrop-filter: none;
}
html .surface-card:hover { transform: none; box-shadow: none; }
html .hero-subtitle, html .footer-note { color: var(--ink-600); }
html .eyebrow { color: var(--teal-700); }
html .preview-title { color: var(--ink-900); text-decoration: none; }
html .preview-title:hover { text-decoration: underline; }
html .button { background: var(--muted-surface); border-color: var(--border); color: var(--ink-900); box-shadow: none; }
html .button:hover { background: var(--surface); color: var(--ink-900); box-shadow: none; transform: none; }
html .home-languages button, html .language-tab {
    background: transparent; color: var(--ink-600); border-color: var(--border); box-shadow: none;
}
html .home-languages button[aria-pressed="true"], html .language-tab.active,
html .home-languages button[aria-pressed="true"]:hover, html .language-tab.active:hover {
    background: #713fc0; color: #fff; border-color: #713fc0; box-shadow: none;
}
html .language-tab:hover { background: var(--muted-surface); transform: none; box-shadow: none; }
html .chip, html .chip-solid, html .article-order {
    background: var(--muted-surface); color: var(--ink-600); border-color: var(--border);
}
html .stats-value, html .summary-highlights h4 { color: var(--ink-900); }
html .summary-content { background: var(--surface); border-left: 2px solid var(--border); }
html .highlight-item { background: var(--muted-surface); border: 0; }
html .list-link { background: var(--surface); border-color: var(--border); }
html .list-link:hover { background: var(--muted-surface); transform: none; box-shadow: none; }
html .reading-card .preview-arrow,
html a[data-reading-event="original_article_click"] {
    background: transparent; border: 0; color: var(--teal-700); box-shadow: none;
}
html .reading-card .preview-arrow:hover { background: var(--muted-surface); }
.theme-controls { display: flex; justify-content: flex-end; }
.theme-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; color: var(--ink-600); font-size: 0.875rem; }
.theme-controls select { min-height: 44px; max-width: 100%; padding: 0.4rem 0.65rem; font: inherit; border: 1px solid var(--border); border-radius: 4px; color: var(--ink-900); background: var(--surface); }
.theme-controls select:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Hide the unfinished subscription promotion in previously published pages. */
section[aria-labelledby="subscribe-heading"],
section[aria-labelledby="weekly-heading"] { display: none; }