/* ============================================================
   Station 1924 — 慢焙時光 · Slow-Baked Times
   城市咖啡館與文創探店 | 溫暖人文慢節奏 | 沉浸式全螢幕畫廊
   ============================================================ */

/* ----- 變量層 ----- */
:root {
  --color-primary: #C67B5C;
  --color-primary-hover: #A8654A;
  --color-primary-light: #FDF0EA;
  --color-bg: #FAF7F3;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FDF6F1;
  --color-text: #2C2416;
  --color-text-secondary: #6B5E53;
  --color-text-muted: #A6988A;
  --color-border: #E8DFD5;
  --color-border-light: #F2ECE5;
  --color-success: #7BA87F;
  --color-tag-bg: #FDF0EA;
  --color-tag-text: #C67B5C;
  --color-gold: #D4A853;

  --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;

  --max-width: 1200px;
  --header-height: 4rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3.25rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 7rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(44,36,22,0.06);
  --shadow-md: 0 4px 16px rgba(44,36,22,0.08);
  --shadow-lg: 0 8px 32px rgba(44,36,22,0.10);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --side-w: 300px;
}

/* ----- 重置層 ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
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;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input{font:inherit;color:inherit}

/* ----- 可存取跳轉 ----- */
.skip-link{position:absolute;top:-100%;left:var(--space-md);padding:var(--space-xs) var(--space-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);z-index:9999;font-size:var(--text-sm);transition:top var(--transition-fast)}
.skip-link:focus{top:var(--space-md)}

/* ----- 頂部導航 ----- */
.top-bar{position:sticky;top:0;z-index:100;background:var(--color-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow var(--transition-base)}
.top-bar.scrolled{box-shadow:var(--shadow-sm)}
.top-bar__inner{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);height:var(--header-height)}
.top-bar__brand{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;color:var(--color-primary);letter-spacing:-0.02em;white-space:nowrap}
.top-bar__nav{display:flex;gap:var(--space-xl);align-items:center}
.top-bar__nav-link{font-size:var(--text-sm);color:var(--color-text-secondary);padding:var(--space-xs) 0;position:relative;transition:color var(--transition-fast)}
.top-bar__nav-link:hover,.top-bar__nav-link--on{color:var(--color-primary)}
.top-bar__nav-link--on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--color-primary);border-radius:2px}

/* 漢堡選單(手機) */
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;z-index:110}
.menu-btn__bar{display:block;width:100%;height:2px;background:var(--color-text);border-radius:2px;transition:transform var(--transition-base),opacity var(--transition-base)}
.menu-btn.open .menu-btn__bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-btn.open .menu-btn__bar:nth-child(2){opacity:0}
.menu-btn.open .menu-btn__bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ----- 主人舞臺 ----- */
.stage{min-height:60vh}

/* ============================================================
   首頁 Masthead — 編輯式品牌宣言（無通欄大圖）
   ============================================================ */
.masthead{max-width:var(--max-width);margin:0 auto;padding:var(--space-4xl) var(--space-xl) var(--space-2xl)}
.masthead__kicker{display:inline-block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.2em;color:var(--color-primary);font-weight:600;margin-bottom:var(--space-sm)}
.masthead__title{font-family:var(--font-heading);font-size:var(--text-5xl);font-weight:800;color:var(--color-text);line-height:1.15;letter-spacing:-0.03em;max-width:800px;margin-bottom:var(--space-md)}
.masthead__desc{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:560px;line-height:1.6;margin-bottom:var(--space-xl)}
.masthead__stats{display:flex;gap:var(--space-2xl);padding-bottom:var(--space-2xl);border-bottom:1px solid var(--color-border-light)}
.masthead__stat-num{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:700;color:var(--color-primary);line-height:1}
.masthead__stat-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-xs);letter-spacing:0.05em}

/* masthead 下方文章預覽卡片 */
.masthead__feed{max-width:var(--max-width);margin:var(--space-xl) auto 0;padding:0 var(--space-xl);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.masthead__feed-card{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.masthead__feed-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.masthead__feed-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.masthead__feed-body{padding:var(--space-md)}
.masthead__feed-head{font-family:var(--font-heading);font-size:var(--text-base);font-weight:600;line-height:1.4;margin-bottom:var(--space-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.masthead__feed-head a:hover{color:var(--color-primary)}
.masthead__feed-meta{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ----- 分類標籤條 ----- */
.tag-strip{position:sticky;top:var(--header-height);z-index:50;background:var(--color-bg);border-bottom:1px solid var(--color-border-light);padding:var(--space-sm) 0}
.tag-strip__inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl);display:flex;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tag-strip__inner::-webkit-scrollbar{display:none}
.tag-strip__item{flex-shrink:0;font-size:var(--text-sm);color:var(--color-text-secondary);padding:var(--space-xs) var(--space-lg);border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border-light);transition:all var(--transition-fast);white-space:nowrap}
.tag-strip__item:hover,.tag-strip__item--active{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}

/* ----- 通用區塊包裝 ----- */
.band{padding:var(--space-3xl) 0}
.band--tint{background:var(--color-surface)}
.band__wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-xl)}
.band__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-xl);letter-spacing:-0.02em;display:flex;align-items:center;gap:var(--space-md)}
.band__title::after{content:'';flex:1;height:1px;background:var(--color-border);min-width:40px}

/* ============================================================
   精選推薦 — 瀑布流不對稱網格
   ============================================================ */
.flow-grid{columns:3;column-gap:var(--space-lg);break-inside:avoid}
.flow-grid__cell{break-inside:avoid;margin-bottom:var(--space-lg);background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.flow-grid__cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.flow-grid__cell--hero{column-span:all;margin-bottom:var(--space-xl);display:grid;grid-template-columns:1.5fr 1fr;border-radius:var(--radius-lg)}
.flow-grid__cell--hero .flow-grid__img{height:100%;min-height:380px}
.flow-grid__cell--hero .flow-grid__body{padding:var(--space-2xl);display:flex;flex-direction:column;justify-content:center}
.flow-grid__cell--hero .flow-grid__head{font-size:var(--text-3xl)}
.flow-grid__img{width:100%;display:block}
.flow-grid__cell:not(.flow-grid__cell--hero) .flow-grid__img{aspect-ratio:auto}
.flow-grid__cell:nth-child(3n+1):not(.flow-grid__cell--hero) .flow-grid__img{aspect-ratio:3/4}
.flow-grid__cell:nth-child(3n+2):not(.flow-grid__cell--hero) .flow-grid__img{aspect-ratio:4/3}
.flow-grid__cell:nth-child(3n+3):not(.flow-grid__cell--hero) .flow-grid__img{aspect-ratio:1/1}
.flow-grid__body{padding:var(--space-lg)}
.flow-grid__head{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;line-height:1.4;margin-bottom:var(--space-sm)}
.flow-grid__head a:hover{color:var(--color-primary)}
.flow-grid__text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.flow-grid__meta{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);color:var(--color-text-muted);flex-wrap:wrap}

/* ============================================================
   最新文章 — 三欄卡片網格
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.card-post{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.card-post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-post--hero{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr}
.card-post--hero .card-post__img{height:100%;min-height:320px}
.card-post--hero .card-post__img img{width:100%;height:100%;object-fit:cover}
.card-post--hero .card-post__body{padding:var(--space-2xl);display:flex;flex-direction:column;justify-content:center}
.card-post--hero .card-post__head{font-size:var(--text-2xl)}
.card-post__img{overflow:hidden}
.card-post__img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--transition-slow)}
.card-post:hover .card-post__img img{transform:scale(1.04)}
.card-post__body{padding:var(--space-lg)}
.card-post__head{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;line-height:1.4;margin-bottom:var(--space-sm)}
.card-post__head a:hover{color:var(--color-primary)}
.card-post__text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-post__meta{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-xs);color:var(--color-text-muted);flex-wrap:wrap}

/* ----- 廣告容器 ----- */
.ad-div{overflow:hidden;min-height:90px}

/* ----- 晶片標籤 ----- */
.chip{display:inline-block;font-size:var(--text-xs);color:var(--color-tag-text);background:var(--color-tag-bg);padding:2px var(--space-sm);border-radius:var(--radius-full);transition:background var(--transition-fast),color var(--transition-fast);vertical-align:middle;margin-bottom:var(--space-xs)}
.chip:hover{background:var(--color-primary);color:#fff}

/* ============================================================
   側邊欄
   ============================================================ */
.rail{display:flex;flex-direction:column;gap:var(--space-2xl)}
.rail__box{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-xl);border:1px solid var(--color-border-light)}
.rail__label{font-family:var(--font-heading);font-size:var(--text-base);font-weight:700;color:var(--color-text);margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-primary);display:inline-block}
.rail__cat-wrap{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.rail__cat-item{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-text-secondary);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);border:1px solid var(--color-border-light);transition:all var(--transition-fast)}
.rail__cat-item:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-light)}
.rail__cat-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);flex-shrink:0}
.rail__hot-wrap{display:flex;flex-direction:column;gap:var(--space-md)}
.rail__hot-row{display:flex;gap:var(--space-md);align-items:flex-start}
.rail__hot-num{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;color:var(--color-primary);line-height:1;flex-shrink:0;min-width:28px}
.rail__hot-date{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:2px}
.rail__hot-link{font-size:var(--text-sm);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rail__hot-link:hover{color:var(--color-primary)}

/* 頻道編輯 */
.rail__editor{display:flex;gap:var(--space-md);align-items:center}
.rail__editor-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.rail__editor-name{font-weight:600;font-size:var(--text-sm);display:block;margin-bottom:2px}
.rail__editor-name:hover{color:var(--color-primary)}
.rail__editor-desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4}

/* ============================================================
   頁面包裝器（子頁面用）
   ============================================================ */
.wrapper{max-width:var(--max-width);margin:0 auto;padding:calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-3xl)}
.wrapper__mast{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:700;color:var(--color-text);margin-bottom:var(--space-xl);letter-spacing:-0.02em}
.wrapper__sub{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;color:var(--color-text);margin-bottom:var(--space-lg)}
.wrapper__grid{display:grid;grid-template-columns:1fr var(--side-w);gap:var(--space-2xl);align-items:start}
.wrapper__main{min-width:0}
.wrapper__side{position:sticky;top:calc(var(--header-height) + var(--space-xl))}

/* ----- 麵包屑 ----- */
.crumbs{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-lg);flex-wrap:wrap}
.crumbs__link{color:var(--color-text-secondary);transition:color var(--transition-fast)}
.crumbs__link:hover{color:var(--color-primary)}
.crumbs__split{color:var(--color-border)}

/* ============================================================
   分類頁 — 時間線卡片
   ============================================================ */
.tl-list{display:flex;flex-direction:column;gap:var(--space-xl)}
.tl-card{display:flex;gap:var(--space-lg);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border-light)}
.tl-card:last-child{border-bottom:none;padding-bottom:0}
.tl-card__knot{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);flex-shrink:0;width:60px}
.tl-card__dot{width:10px;height:10px;border-radius:50%;background:var(--color-primary);flex-shrink:0;margin-top:6px}
.tl-card__stamp{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;line-height:1.3}
.tl-card__body{flex:1;min-width:0;display:flex;gap:var(--space-lg)}
.tl-card__pic{flex-shrink:0;width:180px;border-radius:var(--radius-sm);overflow:hidden}
.tl-card__pic img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform var(--transition-slow)}
.tl-card__pic:hover img{transform:scale(1.05)}
.tl-card__info{flex:1;min-width:0}
.tl-card__head{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-sm);line-height:1.4}
.tl-card__head a:hover{color:var(--color-primary)}
.tl-card__excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tl-card__footer{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ============================================================
   詳情頁
   ============================================================ */
.read-stage{max-width:var(--max-width);margin:0 auto;padding:calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-3xl)}
.read-stage__grid{display:grid;grid-template-columns:1fr var(--side-w);gap:var(--space-2xl);align-items:start}
.read-stage__main{min-width:0}
.read-stage__side{position:sticky;top:calc(var(--header-height) + var(--space-xl))}
.read{position:relative}
.read__head{margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border-light)}
.read__title{font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:800;line-height:1.2;letter-spacing:-0.03em;color:var(--color-text);margin-bottom:var(--space-lg)}
.read__byline{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--color-text-muted);flex-wrap:wrap}
.read__author{font-weight:600;color:var(--color-primary)}
.read__author:hover{text-decoration:underline}
.read__byline-sep{color:var(--color-border)}
.read__body{font-size:var(--text-lg);line-height:1.9;color:var(--color-text)}
.read__body h2{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:700;margin:var(--space-2xl) 0 var(--space-md);line-height:1.3}
.read__body h3{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;margin:var(--space-xl) 0 var(--space-sm);line-height:1.4}
.read__body p{margin-bottom:var(--space-lg)}
.read__body img{border-radius:var(--radius-md);margin:var(--space-xl) auto}
.read__body blockquote{border-left:3px solid var(--color-primary);padding:var(--space-md) var(--space-xl);margin:var(--space-xl) 0;background:var(--color-primary-light);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--color-text-secondary);font-style:italic}
.read__body a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.read__body a:hover{color:var(--color-primary-hover)}
.read__body ul,.read__body ol{padding-left:var(--space-xl);margin-bottom:var(--space-lg)}
.read__body li{margin-bottom:var(--space-xs)}
.read__body ul li{list-style:disc}
.read__body ol li{list-style:decimal}

/* 作者徽章 */
.author-badge{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-xl);margin-top:var(--space-3xl);background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md)}
.author-badge__face{flex-shrink:0}
.author-badge__face img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.author-badge__about{flex:1;min-width:0}
.author-badge__name{font-weight:700;font-size:var(--text-lg);display:block;margin-bottom:var(--space-xs)}
.author-badge__name:hover{color:var(--color-primary)}
.author-badge__desc{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.5}

/* 前後篇導航 */
.prevnext{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-xl);align-items:start;margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border-light)}
.prevnext__half{min-width:0}
.prevnext__half--end{text-align:right}
.prevnext__cue{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-xs);text-transform:uppercase;letter-spacing:0.1em}
.prevnext__link{font-size:var(--text-sm);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prevnext__link:hover{color:var(--color-primary)}
.prevnext__rule{width:1px;background:var(--color-border-light);align-self:stretch}

/* 相關推薦 */
.related{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border-light)}
.related__title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-xl)}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}

/* 迷你卡片（相關推薦用） */
.mini-card{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.mini-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mini-card__frame{display:block;overflow:hidden}
.mini-card__frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform var(--transition-slow)}
.mini-card:hover .mini-card__frame img{transform:scale(1.04)}
.mini-card__copy{padding:var(--space-md)}
.mini-card__head{font-family:var(--font-heading);font-size:var(--text-sm);font-weight:600;line-height:1.4;margin-bottom:var(--space-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-card__head a:hover{color:var(--color-primary)}
.mini-card__snippet{font-size:var(--text-xs);color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--space-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-card__foot{font-size:var(--text-xs);color:var(--color-text-muted)}

/* 分享容器 */
.share-container{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border-light)}

/* ============================================================
   作者頁
   ============================================================ */
.scribe{max-width:780px;margin:0 auto}
.scribe__hero{text-align:center;padding:var(--space-3xl) 0 var(--space-2xl)}
.scribe__avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto var(--space-lg);box-shadow:var(--shadow-md)}
.scribe__name{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:700;margin-bottom:var(--space-sm)}
.scribe__motto{font-size:var(--text-base);color:var(--color-text-secondary);max-width:480px;margin:0 auto var(--space-lg);line-height:1.6}
.scribe__bio{font-size:var(--text-base);color:var(--color-text-secondary);line-height:1.8;max-width:640px;margin:0 auto;text-align:left}
.scribe__bio p{margin-bottom:var(--space-md)}

/* ============================================================
   全部文章 (log)
   ============================================================ */
.catalog{max-width:780px;margin:0 auto}
.log{display:flex;flex-direction:column}
.log__era{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);padding:var(--space-lg) 0 var(--space-md);border-bottom:2px solid var(--color-primary-light);margin-bottom:var(--space-md)}
.log__era:first-child{padding-top:0}
.log__row{display:flex;align-items:baseline;gap:var(--space-lg);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-border-light);transition:background var(--transition-fast)}
.log__row:hover{background:var(--color-surface-hover)}
.log__row:last-child{border-bottom:none}
.log__stamp{font-family:var(--font-heading);font-size:var(--text-sm);color:var(--color-text-muted);flex-shrink:0;min-width:48px}
.log__entry{font-size:var(--text-base);line-height:1.5;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log__entry:hover{color:var(--color-primary)}

/* ============================================================
   更多文章 (row-card)
   ============================================================ */
.row-card{display:flex;gap:var(--space-xl);padding:var(--space-xl) 0;border-bottom:1px solid var(--color-border-light);transition:background var(--transition-fast)}
.row-card:last-child{border-bottom:none}
.row-card:hover{background:var(--color-surface-hover)}
.row-card__pic{flex-shrink:0;width:280px;border-radius:var(--radius-sm);overflow:hidden}
.row-card__pic img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform var(--transition-slow)}
.row-card:hover .row-card__pic img{transform:scale(1.04)}
.row-card__info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.row-card__head{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;line-height:1.4;margin-bottom:var(--space-sm)}
.row-card__head a:hover{color:var(--color-primary)}
.row-card__excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-card__meta{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-xs)}

/* ============================================================
   獨立頁面 (standalone)
   ============================================================ */
.standalone{max-width:780px;margin:0 auto}
.standalone__top{margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border-light)}
.standalone__body{font-size:var(--text-base);line-height:1.9;color:var(--color-text)}
.standalone__body h2{font-size:var(--text-2xl);font-weight:700;margin:var(--space-2xl) 0 var(--space-md)}
.standalone__body h3{font-size:var(--text-xl);font-weight:600;margin:var(--space-xl) 0 var(--space-sm)}
.standalone__body p{margin-bottom:var(--space-lg)}
.standalone__body a{color:var(--color-primary);text-decoration:underline}
.standalone__body img{border-radius:var(--radius-md);max-width:100%}

/* ============================================================
   分頁器
   ============================================================ */
.pager{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border-light)}
.pager__track{display:flex;justify-content:center;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.pager__btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-sm);font-size:var(--text-sm);border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.pager__btn--link{color:var(--color-text-secondary);background:var(--color-surface);border:1px solid var(--color-border-light)}
.pager__btn--link:hover{color:var(--color-primary);border-color:var(--color-primary)}
.pager__btn--curr{color:#fff;background:var(--color-primary);font-weight:600}
.pager__btn--off{color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border-light);opacity:0.5;cursor:not-allowed}
.pager__btn--dots{color:var(--color-text-muted);border:none;background:none;min-width:24px}

/* ============================================================
   交互
   ============================================================ */
/* 滾動揭示動畫 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal--visible{opacity:1;transform:translateY(0)}

/* Toast */
.toast-bar{position:fixed;bottom:var(--space-xl);left:50%;transform:translateX(-50%);z-index:9999;background:var(--color-text);color:#fff;padding:var(--space-sm) var(--space-xl);border-radius:var(--radius-full);font-size:var(--text-sm);box-shadow:var(--shadow-lg);opacity:0;transition:opacity var(--transition-base);pointer-events:none}
.toast-bar--show{opacity:1}

/* ============================================================
   搜尋框
   ============================================================ */
.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(44,36,22,0.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding-top:20vh;overflow:hidden}
.search-overlay--open{display:flex}
.search-overlay__box{width:90%;max-width:560px;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-lg)}
.search-overlay__input{width:100%;padding:var(--space-md) var(--space-lg);font-size:var(--text-lg);border:2px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--transition-fast)}
.search-overlay__input:focus{border-color:var(--color-primary)}

/* 搜尋按鈕 */
.search-trigger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:background var(--transition-fast)}
.search-trigger:hover{background:var(--color-surface-hover)}
.search-trigger svg{width:18px;height:18px;color:var(--color-text-secondary)}

/* ============================================================
   頁尾
   ============================================================ */
.foot-bar{padding:var(--space-2xl) var(--space-xl);background:var(--color-surface);border-top:1px solid var(--color-border-light);text-align:center}
.foot-bar__links{display:flex;justify-content:center;gap:var(--space-xl);flex-wrap:wrap}
.foot-bar__link{font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--transition-fast)}
.foot-bar__link:hover{color:var(--color-primary)}

/* ============================================================
   追蹤按鈕（作者頁）
   ============================================================ */
.follow-btn{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-xl);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-primary);border-radius:var(--radius-full);transition:background var(--transition-fast)}
.follow-btn:hover{background:var(--color-primary-hover)}
.follow-btn--followed{background:var(--color-success)}

/* ============================================================
   留言表單（詳情頁）
   ============================================================ */
.comment-section{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--color-border-light)}
.comment-section__title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-xl)}
.comment-form{display:flex;flex-direction:column;gap:var(--space-md)}
.comment-form__input,.comment-form__textarea{width:100%;padding:var(--space-md);font-size:var(--text-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);transition:border-color var(--transition-fast);resize:vertical;outline:none}
.comment-form__input:focus,.comment-form__textarea:focus{border-color:var(--color-primary)}
.comment-form__textarea{min-height:120px}
.comment-form__submit{align-self:flex-end;padding:var(--space-sm) var(--space-xl);font-size:var(--text-sm);font-weight:600;color:#fff;background:var(--color-primary);border-radius:var(--radius-full);transition:background var(--transition-fast)}
.comment-form__submit:hover{background:var(--color-primary-hover)}

/* ============================================================
   響應式
   ============================================================ */
@media (max-width:1100px){
  .wrapper__grid{grid-template-columns:1fr 260px;gap:var(--space-xl)}
  :root{--side-w:260px}
  .flow-grid{columns:2}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .masthead__feed{grid-template-columns:repeat(2,1fr)}
  .masthead__feed-card:nth-child(3){display:none}
}

@media (max-width:1024px){
  .wrapper__grid{grid-template-columns:1fr}
  .wrapper__side{position:static}
  .flow-grid__cell--hero{grid-template-columns:1fr;column-span:all}
  .flow-grid__cell--hero .flow-grid__img{min-height:240px;max-height:320px}
  .read-stage{padding-left:var(--space-lg);padding-right:var(--space-lg)}
  .read-stage__grid{grid-template-columns:1fr}
  .read-stage__side{position:static}
  .related__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:768px){
  :root{--header-height:3.5rem}
  .top-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
  .top-bar__nav{position:fixed;top:0;right:0;width:280px;height:100vh;flex-direction:column;background:var(--color-surface);padding:calc(var(--header-height) + var(--space-xl)) var(--space-xl) var(--space-xl);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform var(--transition-base);z-index:105;gap:var(--space-lg);align-items:flex-start}
  .top-bar__nav.open{transform:translateX(0)}
  .menu-btn{display:flex}
  .masthead{padding:var(--space-2xl) var(--space-lg)}
  .masthead__title{font-size:var(--text-3xl)}
  .masthead__feed{display:none}
  .tag-strip{top:var(--header-height)}
  .flow-grid{columns:1}
  .flow-grid__cell--hero{grid-template-columns:1fr;column-span:all}
  .flow-grid__cell--hero .flow-grid__body{padding:var(--space-lg)}
  .flow-grid__cell--hero .flow-grid__head{font-size:var(--text-xl)}
  .card-grid{grid-template-columns:1fr}
  .card-post--hero{grid-template-columns:1fr}
  .card-post--hero .card-post__img{min-height:200px;max-height:280px}
  .band{padding:var(--space-2xl) 0}
  .tl-card__body{flex-direction:column}
  .tl-card__pic{width:100%}
  .row-card{flex-direction:column}
  .row-card__pic{width:100%}
  .read__title{font-size:var(--text-2xl)}
  .prevnext{grid-template-columns:1fr}
  .prevnext__rule{display:none}
  .prevnext__half--end{text-align:left}
  .related__grid{grid-template-columns:1fr}
  .wrapper{padding-left:var(--space-md);padding-right:var(--space-md)}
  .read-stage{padding-left:var(--space-md);padding-right:var(--space-md)}
  .masthead__stats{gap:var(--space-xl)}
}

@media (max-width:480px){
  :root{--header-height:3rem}
  .top-bar__inner{padding:0 var(--space-md)}
  .masthead{padding:var(--space-xl) var(--space-md)}
  .masthead__title{font-size:var(--text-2xl)}
  .masthead__desc{font-size:var(--text-sm)}
  .band__wrap{padding:0 var(--space-md)}
  .band__title{font-size:var(--text-xl)}
  .card-post--hero .card-post__body{padding:var(--space-lg)}
  .card-post--hero .card-post__head{font-size:var(--text-xl)}
  .tl-card__knot{width:48px}
  .read__title{font-size:var(--text-xl)}
  .read__body{font-size:var(--text-base)}
  .author-badge{flex-direction:column;text-align:center}
  .scribe__avatar{width:96px;height:96px}
  .scribe__name{font-size:var(--text-2xl)}
  .foot-bar__links{gap:var(--space-md)}
  .masthead__stats{gap:var(--space-lg)}
  .masthead__stat-num{font-size:var(--text-xl)}
}