/* ============================================================
   station1940 · 觀察站 / 科學觀察日誌
   田野觀察記錄式（vertical observation rail + right research desk）
   植物學綠 × 芥末金 · 僅明亮高亮度 · 靜態優先 / 低動效
   Mobile-first: 320px -> 480px -> 768px -> 1024px -> 1100px
   ============================================================ */

/* ---------- Design Tokens (station1922 flat naming) ---------- */
:root {
    /* Color — bright / high-luminance only; saturated, identifiable */
    --color-primary: #047857;          /* emerald-700; on #FFFFFF ≈ 5.5:1 (AA) */
    --color-primary-hover: #065F46;    /* emerald-800; on #FFFFFF ≈ 7.2:1 (AAA) */
    --color-primary-light: #E7F2EC;    /* pale green SURFACE ONLY, not for small text/links */
    --color-accent: #A16207;           /* mustard gold yellow-700; on #FFFFFF ≈ 4.9:1 (AA) */
    --color-accent-hover: #854D0E;     /* yellow-800; on #FFFFFF ≈ 7.0:1 */
    --color-accent-light: #F7EFDC;     /* pale gold surface */
    --color-bg: #F7FAF8;               /* bright mint-tinted white */
    --color-surface: #FFFFFF;          /* bright card */
    --color-surface-hover: #EFF6F2;    /* card hover */
    --color-text: #14221B;             /* deep green-black; on bg ≈ 17:1 */
    --color-text-secondary: #3D4B43;   /* ≈ 10:1 */
    --color-text-muted: #5E6C64;       /* ≈ 6:1 (AA) */
    --color-border: #DCE6E0;
    --color-border-light: #EAF1EC;

    /* Fonts — system stack only; mono used sparingly for stamps/labels */
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Layout */
    --max-width: 1200px;
    --header-height: 50px;             /* 移動端硬上限 50px；桌面斷點可略增 */

    /* Type scale — 最小級換算後移動端/PC ≥ 16px (html 16px 基準) */
    --text-xs: 1rem;        /* 16 */
    --text-sm: 1rem;        /* 16 */
    --text-base: 1.0625rem; /* 17 */
    --text-lg: 1.1875rem;   /* 19 */
    --text-xl: 1.375rem;    /* 22 */
    --text-2xl: 1.625rem;   /* 26 */
    --text-3xl: 2rem;       /* 32 */
    --text-4xl: 2.375rem;   /* 38 */
    --text-5xl: 2.875rem;   /* 46 */

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Radius — 觀察記錄式：統一柔和圓角尺度 */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Shadow — 貼近底色（綠調），非純黑 */
    --shadow-sm: 0 1px 2px rgba(20, 34, 27, 0.05);
    --shadow-md: 0 4px 14px rgba(20, 34, 27, 0.08);
    --shadow-lg: 0 10px 32px rgba(20, 34, 27, 0.10);

    /* Transition */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    min-width: 0;
    overflow-wrap: anywhere;
}

img, video, svg, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font: inherit; color: inherit; border: none; background: none; }
input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

::selection { background: var(--color-primary-light); }

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}
@media (min-width: 480px) {
    .container { padding: 0 var(--space-lg); }
}
.stage { width: 100%; }

/* 主體 + 右側側欄：全斷點左右並排，側欄不得落到主體下方 */
.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 32%);
    gap: var(--space-lg);
    align-items: start;
    padding-top: var(--space-md);
    padding-bottom: var(--space-3xl);
}
@media (max-width: 768px) {
    .home-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (min-width: 1024px) {
    .home-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3xl); }
}
.home-main { min-width: 0; display: grid; gap: var(--space-3xl); }

/* ---------- Header / Top Bar ---------- */
.top-bar {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    background: rgba(247, 250, 248, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-light);
    transition: box-shadow var(--transition-fast);
}
.top-bar--scrolled { box-shadow: var(--shadow-sm); }
.top-bar__inner {
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
@media (min-width: 480px) { .top-bar__inner { padding: 0 var(--space-lg); } }

.top-bar__brand {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.top-bar__brand:hover { color: var(--color-primary-hover); }

.top-bar__nav { display: none; margin-left: auto; }
.top-bar__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.top-bar__nav a:hover { color: var(--color-primary); }

/* 漢堡按鈕：50px 頂欄內垂直居中，熱區可點但不加高頂欄 */
.top-bar__menu-btn {
    margin-left: auto;
    flex: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--radius-sm);
}
.top-bar__menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.top-bar__menu-btn:hover span { background: var(--color-primary); }

/* ---------- Mobile Menu ---------- */
.mobile-menu {
    position: fixed; inset: 0; z-index: 200;
    max-width: 100%;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu__head {
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu__close {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    border-radius: var(--radius-sm);
}
.mobile-menu__close:hover { color: var(--color-primary); }
.mobile-menu__nav {
    overflow-y: auto;
    padding: var(--space-lg) var(--space-lg) var(--space-4xl);
    display: grid;
    gap: 2px;
}
.mobile-menu__nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-sm);
    font-size: var(--text-lg);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu__nav a:hover { color: var(--color-primary); }

/* ---------- 區塊標題（功能性短詞，無 slogan） ---------- */
.sec-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); }
.sec-head--row { justify-content: space-between; align-items: center; }
.sec-head__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.3;
    position: relative;
    padding-left: var(--space-md);
}
.sec-head__title::before {
    content: "";
    position: absolute;
    left: 0; top: 0.35em; bottom: 0.35em;
    width: 4px;
    border-radius: 2px;
    background: var(--color-primary);
}
.sec-head__more {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.sec-head__more:hover { color: var(--color-primary-hover); }

/* ---------- Chip ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.6;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    white-space: nowrap;
}
.chip:hover { background: var(--color-primary); color: #FFFFFF; }
.chip--accent { background: var(--color-accent-light); color: var(--color-accent-hover); }
.chip--accent:hover { background: var(--color-accent); color: #FFFFFF; }

/* ---------- 本期觀察（首屏，田野記錄式） ---------- */
.observe__grid {
    display: grid;
    gap: var(--space-lg);
}
@media (min-width: 768px) {
    .observe__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* 主觀察報告 */
.observe__main {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
}
.observe__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-primary-light); }
.observe__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 400ms ease; }
.observe__media:hover img { transform: scale(1.03); }
/* 日誌編號戳印 */
.observe__stamp {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    background: rgba(4, 120, 87, 0.88);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    pointer-events: none;
}
.observe__body { padding: var(--space-lg); border-left: 3px solid var(--color-primary); }
.observe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.observe__date { font-family: var(--font-mono); font-weight: 600; }
.observe__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
    overflow-wrap: anywhere;
}
.observe__title a:hover { color: var(--color-primary); }
.observe__excerpt {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* 觀察筆記（側卡） */
.observe__side {
    background: var(--color-accent-light);
    border: 1px solid var(--color-border-light);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.observe__side-tag {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-hover);
    padding: var(--space-sm) var(--space-lg) 0;
}
.observe__side-body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; flex: 1; }
.observe__side-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.observe__side-title a:hover { color: var(--color-accent-hover); }
.observe__side-foot { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: auto; padding-top: var(--space-sm); border-top: 1px dashed var(--color-border); }

/* ---------- 觀察記錄（row-card 縱向記錄軌） ---------- */
.logsec__rows { display: grid; gap: var(--space-lg); }

.row-card {
    display: grid;
    gap: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-width: 0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.row-card:hover { border-color: var(--color-border); box-shadow: var(--shadow-md); }
.row-card__pic {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
}
.row-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.row-card__info { min-width: 0; display: grid; gap: var(--space-sm); align-content: center; }
.row-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.row-card__head {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.row-card__head a:hover { color: var(--color-primary); }
.row-card__excerpt {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.75;
}
/* 無圖態：只收合媒體槽，仍佔原網格格位 */
.row-card--no-media .row-card__info { align-content: start; }

@media (min-width: 768px) {
    .row-card { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
    .row-card.index-row--text {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 議題線索（$category 嵌套模組） ---------- */
.issue__grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 768px) { .issue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); } }
.issue__col { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.issue__cat {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-primary);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}
.issue__cat:hover { color: var(--color-primary-hover); }
.issue__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-width: 0;
    display: grid;
    gap: var(--space-sm);
    align-content: start;
}
.issue__title { font-size: var(--text-base); font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.issue__title a:hover { color: var(--color-primary); }
.issue__excerpt { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.75; }
.issue__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); }
.issue__card--media { gap: var(--space-sm); }
.issue__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-light); margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) 0; }
.issue__pic img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 側欄（研究台） ---------- */
.sidebar {
    display: grid;
    gap: var(--space-lg);
    align-content: start;
    min-width: 0;
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    max-height: calc(100dvh - var(--header-height) - var(--space-lg));
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 768px) {
    .sidebar {
        max-height: fit-content;
        position: static;
        overflow-y: initial;
    }
}

.sidebar__block {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    min-width: 0;
}
.sidebar__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 800;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}
.sidebar__cats { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sidebar__recs { display: grid; gap: var(--space-md); }
.sidebar__recs li { min-width: 0; }
.sidebar__rec { display: grid; gap: 2px; min-width: 0; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); }
.sidebar__recs li:last-child .sidebar__rec { border-bottom: none; }
.sidebar__rec:hover .sidebar__rec-title { color: var(--color-primary); }
.sidebar__rec-date { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.sidebar__rec-title { font-size: var(--text-sm); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.sidebar__reading { display: grid; gap: var(--space-sm); min-width: 0; padding: var(--space-sm) 0; }
.sidebar__reading:hover .sidebar__reading-title { color: var(--color-primary); }
.sidebar__reading-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.sidebar__reading-title { font-size: var(--text-sm); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.sidebar__reading-bar { display: block; height: 4px; border-radius: 2px; background: var(--color-primary); max-width: 100%; }
.sidebar__reading-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-md);
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
}
.sidebar__reading-clear:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ---------- Footer（僅 logo_text + 選單；無 copyright、無 slogan） ---------- */
.foot-bar {
    border-top: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, #F1F7F3 0%, #E9F2EC 100%);
    margin-top: var(--space-2xl);
}
.foot-bar__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
@media (min-width: 768px) {
    .foot-bar__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.foot-bar__brand { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; color: var(--color-primary); }
.foot-bar__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.foot-bar__links a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.foot-bar__links a:hover { color: var(--color-primary); }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-lg);
    transform: translate(-50%, 16px);
    z-index: 300;
    max-width: calc(100% - 2 * var(--space-lg));
    background: var(--color-text);
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    text-align: center;
}
.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- 狀態修飾 ---------- */
.is-hidden { display: none !important; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal--visible { opacity: 1; transform: none; }

/* ---------- 分頁器 ---------- */
.pager { margin-top: var(--space-2xl); }
.pager__track { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.pager__btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.pager__btn--link:hover { color: var(--color-primary); border-color: var(--color-primary); }
.pager__btn--curr { background: var(--color-primary); color: #FFFFFF; border-color: var(--color-primary); }
.pager__btn--off { color: var(--color-text-muted); opacity: 0.6; }
.pager__btn--dots { border: none; background: none; color: var(--color-text-muted); }

/* ---------- 廣告位：僅佈局屬性，無任何裝飾 ---------- */
.ad-div { width: 100%; max-width: 100%; min-width: 0; }

/* ---------- 獨立頁（about / alone） ---------- */
.wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-3xl);
}
@media (min-width: 480px) { .wrapper { padding-left: var(--space-lg); padding-right: var(--space-lg); } }
.wrapper__head { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--space-xl); }
.wrapper__head--sub { font-size: var(--text-lg); margin-bottom: var(--space-md); }

.standalone { max-width: 760px; }
.standalone__top { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-xl); }
.standalone__body { font-size: var(--text-base); line-height: 1.9; color: var(--color-text); overflow-wrap: anywhere; }
.standalone__body p { margin-bottom: var(--space-lg); }
.standalone__body h2, .standalone__body h3 { margin: var(--space-2xl) 0 var(--space-sm); font-weight: 800; line-height: 1.35; }
.standalone__body h2 { font-size: var(--text-xl); }
.standalone__body h3 { font-size: var(--text-lg); }
.standalone__body ul, .standalone__body ol { padding-left: var(--space-xl); margin-bottom: var(--space-lg); }
.standalone__body ul { list-style: disc; }
.standalone__body ol { list-style: decimal; }
.standalone__body blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-sm) var(--space-lg); margin: var(--space-lg) 0; background: var(--color-primary-light); }
.standalone__body pre, .standalone__body table { max-width: 100%; overflow-x: auto; display: block; }
.standalone__body img { margin: var(--space-lg) 0; }

/* ---------- 全部文章歸檔（.log） ---------- */
.catalog { padding-bottom: var(--space-3xl); }
.log { display: grid; gap: var(--space-2xl); }
.log__era { display: grid; gap: var(--space-md); min-width: 0; }
.log__era-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; color: var(--color-primary); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-primary); }
.log__row { display: grid; gap: var(--space-md); }
.log__entry { display: grid; gap: 2px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); min-width: 0; }
.log__entry:last-child { border-bottom: none; }
.log__stamp { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-muted); }
.log__entry-title { font-size: var(--text-base); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.log__entry-title a:hover { color: var(--color-primary); }
.log__entry-meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- 分類頁 ---------- */
.cat-head { margin-bottom: var(--space-xl); }
.breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); overflow-wrap: anywhere; }
.breadcrumb a:hover { color: var(--color-primary); }
.cat-head__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; }
.cat-list { display: grid; gap: var(--space-lg); min-width: 0; }

/* ---------- 文章詳情頁 ---------- */
.detail-layout { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr) minmax(0, 32%); align-items: start; padding-top: var(--space-md); padding-bottom: var(--space-3xl); }
@media (min-width: 1024px) { .detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3xl); } }
@media (max-width: 768px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }
.article-detail { min-width: 0; }
.detail__kicker { font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); letter-spacing: 0.04em; margin-bottom: var(--space-sm); display: inline-block; }
.detail__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; line-height: 1.25; margin-bottom: var(--space-md); overflow-wrap: anywhere; }
.detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.detail__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: var(--space-xl); background: var(--color-primary-light); }
.detail__media img { width: 100%; height: 100%; object-fit: cover; }
.read__body { font-size: var(--text-base); line-height: 1.9; color: var(--color-text); overflow-wrap: anywhere; }
.read__body p { margin-bottom: var(--space-lg); }
.read__body h2, .read__body h3, .read__body h4 { margin: var(--space-2xl) 0 var(--space-sm); font-weight: 800; line-height: 1.35; }
.read__body h2 { font-size: var(--text-2xl); }
.read__body h3 { font-size: var(--text-xl); }
.read__body ul, .read__body ol { padding-left: var(--space-xl); margin-bottom: var(--space-lg); }
.read__body ul { list-style: disc; }
.read__body ol { list-style: decimal; }
.read__body li { margin-bottom: var(--space-xs); }
.read__body blockquote { border-left: 4px solid var(--color-primary); padding: var(--space-sm) var(--space-lg); margin: var(--space-lg) 0; background: var(--color-primary-light); }
.read__body pre, .read__body table { max-width: 100%; overflow-x: auto; display: block; }
.read__body img { margin: var(--space-lg) 0; }

.share-container { margin: var(--space-2xl) 0; }

/* 作者卡 */
.author-card { display: flex; gap: var(--space-md); padding: var(--space-lg); background: var(--color-primary-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); margin: var(--space-2xl) 0; min-width: 0; }
.author-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.author-card__body { min-width: 0; }
.author-card__name { font-size: var(--text-base); font-weight: 800; margin-bottom: 4px; display: inline-block; }
.author-card__name:hover { color: var(--color-primary); }
.author-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7; }
.author-card__bio { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.7; margin-top: var(--space-sm); }
.author-card__follow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-md);
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #FFFFFF;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}
.author-card__follow:hover { background: var(--color-primary-hover); }
.author-card__follow.is-followed { background: var(--color-text-muted); }

/* 前後篇 */
.prevnext { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: var(--space-2xl) 0; }
@media (min-width: 768px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext__item { display: block; padding: var(--space-md); border: 1px solid var(--color-border-light); background: var(--color-surface); border-radius: var(--radius-md); min-width: 0; }
.prevnext__item:hover { border-color: var(--color-primary); }
.prevnext__label { font-size: var(--text-sm); color: var(--color-text-muted); display: block; margin-bottom: 4px; }
.prevnext__title { font-size: var(--text-base); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }

/* 相關文章 */
.related-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.related-card { border: 1px solid var(--color-border-light); background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-md); min-width: 0; }
.related-card__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md); background: var(--color-primary-light); }
.related-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.related-card__title { font-size: var(--text-base); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.related-card__title a:hover { color: var(--color-primary); }
.related-card__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-xs); }

/* 留言（僅靜態 UI 外殼，無提交邏輯） */
.comments-box { border-top: 1px solid var(--color-border-light); margin: var(--space-3xl) 0; padding-top: var(--space-xl); }
.comments-box__title { font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-lg); }
.comments-box textarea {
    width: 100%; min-height: 110px; padding: var(--space-md);
    border: 1px solid var(--color-border); background: var(--color-surface);
    font-size: var(--text-sm); line-height: 1.6; resize: vertical; border-radius: var(--radius-md);
}
.comments-box textarea:disabled { color: var(--color-text-muted); background: var(--color-surface-hover); }
.comments-box__submit {
    margin-top: var(--space-md);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #FFFFFF;
    background: var(--color-primary);
    border-radius: var(--radius-full);
}
.comments-box__submit:hover { background: var(--color-primary-hover); }

/* ---------- 更多文章（row-card 雙欄，不獨佔整行） ---------- */
.more-grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.more-grid > .ad-div { grid-column: 1 / -1; }
@media (min-width: 768px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 作者頁 ---------- */
.author-hero { display: grid; gap: var(--space-md); background: var(--color-primary-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-2xl); }
@media (min-width: 768px) { .author-hero { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.author-hero__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-hero__body { min-width: 0; }
.author-hero__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-sm); }
.author-hero__desc { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.8; }

/* ---------- 響應式：480px ---------- */
@media (min-width: 480px) {
    .observe__body { padding: var(--space-xl); }
    .observe__side-tag { padding: var(--space-md) var(--space-xl) 0; }
    .observe__side-body { padding: var(--space-md) var(--space-xl) var(--space-xl); }
}

/* ---------- 響應式：768px ---------- */
@media (min-width: 768px) {
    :root { --header-height: 56px; }
    .top-bar__nav { display: flex; }
    .top-bar__menu-btn { display: none; }
    .observe__title { font-size: var(--text-2xl); }
    .wrapper { padding-top: var(--space-xl); }
    .log__row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--space-lg); }
}

/* ---------- 響應式：1024px ---------- */
@media (min-width: 1024px) {
    .top-bar__nav a { padding: 0 var(--space-md); }
    .observe__excerpt { font-size: var(--text-lg); }
    .home-main { gap: var(--space-4xl); }
    .row-card { padding: var(--space-xl); }
}

/* ---------- 響應式：1100px ---------- */
@media (min-width: 1100px) {
    .container { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
    .wrapper { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
}

/* ---------- 動效降級 ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; transition: none; }
}