/* ============================================================
   station1917 — Brutalist Monospace
   粗野主義等寬風 · 硬邊框 · 高對比 · 零圓角
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  --font-mono: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #f8f6f0;
  --color-surface: #fff;
  --color-fg: #1a1a1a;
  --color-accent: #e64500;
  --color-accent-hover: #c23a00;
  --color-muted: #8c8c80;
  --color-rule: #d4d0c8;
  --border-heavy: 3px solid #1a1a1a;
  --border-light: 1px solid #d4d0c8;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --max-w: 1240px;
  --header-h: 52px;
  --sidebar-w: 280px;
  --gap: clamp(16px, 3vw, 28px);
  --radius: 0px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-fg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.skip-link { position: absolute; top: -100px; left: 16px; background: var(--color-fg); color: var(--color-bg); padding: 8px 16px; z-index: 9999; font-family: var(--font-mono); font-size: 13px; }
.skip-link:focus { top: 8px; }

/* ---------- HEADER ---------- */
.site-hdr { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: var(--border-heavy); height: var(--header-h); }
.site-hdr__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); display: flex; align-items: center; justify-content: space-between; height: 100%; }
.site-hdr__logo { font-family: var(--font-mono); font-size: clamp(18px, 3vw, 24px); font-weight: 700; letter-spacing: -0.5px; color: var(--color-fg); text-transform: uppercase; }
.site-hdr__logo:hover { color: var(--color-accent); }
.site-hdr__nav { display: flex; gap: var(--space-lg); }
.site-hdr__nav-link { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color .15s; }
.site-hdr__nav-link:hover,
.site-hdr__nav-link:focus-visible { border-bottom-color: var(--color-accent); color: var(--color-accent); outline: none; }

.hamburger { display: none; flex-direction: column; gap: 6px; padding: 8px; }
.hamburger__bar { display: block; width: 24px; height: 3px; background: var(--color-fg); transition: transform .2s, opacity .2s; }
.hamburger.open .hamburger__bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open .hamburger__bar:nth-child(2) { transform: translateY(0) rotate(135deg); }

/* ---------- CONTAINER / LAYOUT ---------- */
.sec { padding: var(--space-2xl) 0; }
.sec--alt { background: var(--color-surface); border-top: var(--border-heavy); border-bottom: var(--border-heavy); }
.sec__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); }
.sec__hd { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-xl); padding-bottom: var(--space-sm); border-bottom: var(--border-heavy); display: inline-block; }

.page { max-width: var(--max-w); margin: 0 auto; padding: var(--space-xl) var(--gap); }
.page__title { font-family: var(--font-mono); font-size: clamp(24px, 4vw, 36px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-xl); padding-bottom: var(--space-sm); border-bottom: var(--border-heavy); }
.page__subtitle { font-family: var(--font-mono); font-size: 18px; font-weight: 700; text-transform: uppercase; margin: var(--space-xl) 0 var(--space-md); }
.page__cols { display: grid; grid-template-columns: 1fr var(--sidebar-w); gap: var(--space-xl); align-items: start; }
.page__main { min-width: 0; }
.page__side { position: sticky; top: calc(var(--header-h) + var(--space-lg)); }

/* ---------- FEATURED (asymmetric grid) ---------- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.feat__hero { grid-column: 1 / 3; grid-row: 1 / 3; border: var(--border-heavy); background: var(--color-surface); }
.feat__hero-media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.feat__hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.feat__hero-media:hover img { transform: scale(1.03); }
.feat__hero-body { padding: var(--space-lg); }
.feat__hero-title { font-family: var(--font-mono); font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; line-height: 1.3; margin: var(--space-sm) 0; }
.feat__hero-title a:hover { color: var(--color-accent); }
.feat__hero-excerpt { color: var(--color-muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-md); }
.feat__hero-meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); text-transform: uppercase; }
.feat__hero-sep { margin: 0 var(--space-sm); }

.feat__item { border: var(--border-heavy); background: var(--color-surface); }
.feat__item-media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.feat__item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.feat__item-media:hover img { transform: scale(1.03); }
.feat__item-body { padding: var(--space-md); }
.feat__item-title { font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1.4; margin: var(--space-sm) 0; }
.feat__item-title a:hover { color: var(--color-accent); }
.feat__item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); text-transform: uppercase; }
.feat__item-sep { margin: 0 var(--space-xs); }

/* ---------- LABEL / TAG ---------- */
.label { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border: 2px solid var(--color-fg); color: var(--color-fg); transition: background .15s, color .15s; }
.label:hover, .label:focus-visible { background: var(--color-fg); color: var(--color-bg); outline: none; }

/* ---------- CATEGORY BLOCKS ---------- */
.cat-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); }
.cat-blocks__item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-md); border: var(--border-heavy); background: var(--color-bg); transition: background .15s; }
.cat-blocks__item:hover,
.cat-blocks__item:focus-visible { background: var(--color-fg); color: var(--color-bg); outline: none; }
.cat-blocks__item:hover .cat-blocks__idx,
.cat-blocks__item:focus-visible .cat-blocks__idx { color: var(--color-accent); }
.cat-blocks__idx { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--color-accent); line-height: 1; }
.cat-blocks__name { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- POST GRID ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.post-card { border: var(--border-heavy); background: var(--color-surface); display: flex; flex-direction: column; }
.post-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card__media:hover img { transform: scale(1.03); }
.post-card__body { padding: var(--space-md) var(--space-lg) var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-family: var(--font-mono); font-size: clamp(14px, 2vw, 16px); font-weight: 700; line-height: 1.4; margin: var(--space-sm) 0; flex: 1; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { color: var(--color-muted); font-size: 13px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-md); }
.post-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); text-transform: uppercase; margin-top: auto; }
.post-card__sep { margin: 0 var(--space-xs); }

/* ---------- LIST CARD (category / more) ---------- */
.list-card { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-lg); border: var(--border-heavy); background: var(--color-surface); margin-bottom: var(--space-lg); }
.list-card__thumb { display: block; aspect-ratio: 4/3; overflow: hidden; }
.list-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.list-card__thumb:hover img { transform: scale(1.03); }
.list-card__body { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; display: flex; flex-direction: column; }
.list-card__title { font-family: var(--font-mono); font-size: clamp(16px, 2.5vw, 20px); font-weight: 700; line-height: 1.3; margin: var(--space-sm) 0; }
.list-card__title a:hover { color: var(--color-accent); }
.list-card__excerpt { color: var(--color-muted); font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-md); }
.list-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); text-transform: uppercase; margin-top: auto; }
.list-card__sep { margin: 0 var(--space-xs); }

/* ---------- BREADCRUMB ---------- */
.crumb { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); text-transform: uppercase; margin-bottom: var(--space-lg); flex-wrap: wrap; }
.crumb__link { color: var(--color-muted); }
.crumb__link:hover { color: var(--color-accent); text-decoration: underline; }
.crumb__sep { color: var(--color-rule); }

/* ---------- ARTICLE DETAIL ---------- */
.entry__hd { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: var(--border-heavy); }
.entry__title { font-family: var(--font-mono); font-size: clamp(22px, 4vw, 32px); font-weight: 700; line-height: 1.25; }
.entry__byline { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); text-transform: uppercase; flex-wrap: wrap; }
.entry__byline-sep { color: var(--color-rule); }
.entry__author { font-weight: 700; color: var(--color-fg); }
.entry__author:hover { color: var(--color-accent); }
.entry__body { font-size: clamp(15px, 2vw, 17px); line-height: 1.85; margin-bottom: var(--space-2xl); }
.entry__body h2, .entry__body h3, .entry__body h4 { font-family: var(--font-mono); font-weight: 700; margin: var(--space-xl) 0 var(--space-md); text-transform: uppercase; }
.entry__body p { margin-bottom: var(--space-md); }
.entry__body img { max-width: 100%; height: auto; margin: var(--space-lg) auto; display: block; }
.entry__body ul, .entry__body ol { padding-left: var(--space-xl); margin-bottom: var(--space-md); list-style: revert; }
.entry__body blockquote { border-left: var(--border-heavy); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; background: var(--color-surface); font-style: italic; color: var(--color-muted); }

/* ---------- AUTHOR BLOCK ---------- */
.author-blk { display: flex; gap: var(--space-lg); align-items: flex-start; border: var(--border-heavy); padding: var(--space-lg); margin: var(--space-xl) 0; background: var(--color-surface); }
.author-blk__avatar { flex-shrink: 0; }
.author-blk__avatar img { width: 72px; height: 72px; object-fit: cover; }
.author-blk__name { font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
.author-blk__name:hover { color: var(--color-accent); }
.author-blk__desc { font-size: 14px; color: var(--color-muted); margin-top: var(--space-xs); }

/* ---------- POST NAV ---------- */
.post-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: var(--space-xl) 0; }
.post-prevnext__half { border: var(--border-heavy); padding: var(--space-md) var(--space-lg); }
.post-prevnext__half--right { text-align: right; }
.post-prevnext__lbl { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; margin-bottom: var(--space-xs); }
.post-prevnext__link { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-prevnext__link:hover { color: var(--color-accent); }

/* ---------- RELATED POSTS ---------- */
.related { margin-top: var(--space-2xl); }
.related__hd { font-family: var(--font-mono); font-size: 18px; font-weight: 700; text-transform: uppercase; margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: var(--border-heavy); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }

.post-mini { border: var(--border-heavy); background: var(--color-surface); }
.post-mini__media { display: block; aspect-ratio: 4/3; overflow: hidden; }
.post-mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-mini__media:hover img { transform: scale(1.03); }
.post-mini__body { padding: var(--space-md); }
.post-mini__title { font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1.3; margin: var(--space-sm) 0; }
.post-mini__title a:hover { color: var(--color-accent); }
.post-mini__excerpt { font-size: 12px; color: var(--color-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-sm); }
.post-mini__meta { font-family: var(--font-mono); font-size: 10px; color: var(--color-muted); text-transform: uppercase; }

/* ---------- AUTHOR PAGE ---------- */
.author-pg__profile { text-align: center; margin-bottom: var(--space-2xl); border: var(--border-heavy); padding: var(--space-2xl) var(--space-lg); background: var(--color-surface); }
.author-pg__avatar { border-radius: 50%; margin: 0 auto var(--space-md); border: var(--border-heavy); }
.author-pg__name { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 700; text-transform: uppercase; }
.author-pg__desc { color: var(--color-muted); max-width: 560px; margin: var(--space-md) auto 0; }
.author-pg__bio { text-align: left; margin-top: var(--space-lg); line-height: 1.8; }

/* ---------- ARCHIVE LIST ---------- */
.archive-list { border-top: var(--border-heavy); }
.archive-list__year { font-family: var(--font-mono); font-size: 20px; font-weight: 700; padding: var(--space-md) 0; border-bottom: var(--border-light); }
.archive-list__row { display: flex; gap: var(--space-lg); align-items: baseline; padding: var(--space-md) 0; border-bottom: var(--border-light); transition: background .1s; }
.archive-list__row:hover { background: var(--color-surface); }
.archive-list__row:hover .archive-list__title { color: var(--color-accent); }
.archive-list__date { font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); white-space: nowrap; flex-shrink: 0; }
.archive-list__title { font-size: 15px; transition: color .15s; }

/* ---------- STANDALONE ---------- */
.standalone__hd { margin-bottom: var(--space-xl); }
.standalone__body { font-size: 15px; line-height: 1.85; }

/* ---------- SIDEBAR ---------- */
.sidebar { display: flex; flex-direction: column; gap: var(--space-lg); }
.sidebar__block { border: var(--border-heavy); padding: var(--space-lg); background: var(--color-surface); }
.sidebar__label { font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--border-heavy); }
.sidebar__author { display: flex; gap: var(--space-md); align-items: flex-start; }
.sidebar__author-img { object-fit: cover; }
.sidebar__author-name { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.sidebar__author-name:hover { color: var(--color-accent); }
.sidebar__author-desc { font-size: 12px; color: var(--color-muted); margin-top: var(--space-xs); line-height: 1.5; }

.sidebar__cat-list li { margin-bottom: var(--space-xs); }
.sidebar__cat-link { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; padding: var(--space-xs) 0; transition: color .15s; }
.sidebar__cat-link:hover { color: var(--color-accent); }
.sidebar__cat-arrow { color: var(--color-accent); }

.sidebar__hot-list { counter-reset: hot; }
.sidebar__hot-item { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm); padding-bottom: var(--space-sm); border-bottom: var(--border-light); }
.sidebar__hot-item:last-child { border-bottom: none; }
.sidebar__hot-num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--color-accent); flex-shrink: 0; }
.sidebar__hot-link { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar__hot-link:hover { color: var(--color-accent); }

/* ---------- PAGINATION ---------- */
.pagination-nav { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--border-light); }
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.page-item { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); font-family: var(--font-mono); font-size: 12px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.page-link { color: var(--color-fg); background: var(--color-surface); border: var(--border-heavy); }
.page-link:hover, .page-link:focus-visible { background: var(--color-fg); color: var(--color-bg); outline: none; }
.page-item.current { background: var(--color-fg); color: var(--color-bg); border: var(--border-heavy); }
.page-item.disabled { color: var(--color-muted); background: var(--color-surface); border: var(--border-light); cursor: default; }
.page-item.ellipsis { color: var(--color-muted); cursor: default; border: none; min-width: auto; padding: 0 var(--space-xs); }

/* ---------- FOOTER ---------- */
.site-ftr { border-top: var(--border-heavy); padding: var(--space-2xl) var(--gap); text-align: center; margin-top: var(--space-3xl); }
.site-ftr__nav { display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; }
.site-ftr__link { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-muted); transition: color .15s; }
.site-ftr__link:hover { color: var(--color-accent); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .page__cols { grid-template-columns: 1fr; }
  .page__side { position: static; }
  .feat { grid-template-columns: 1fr 1fr; }
  .feat__hero { grid-column: 1/-1; grid-row: auto; }
  .list-card { grid-template-columns: 200px 1fr; }
}

@media (max-width: 768px) {
  .site-hdr__nav { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--color-bg); flex-direction: column; padding: var(--space-xl); gap: 0; overflow-y: auto; z-index: 99; }
  .site-hdr__nav.open { display: flex; }
  .site-hdr__nav-link { font-size: 18px; padding: var(--space-md) 0; border-bottom: var(--border-light); }
  .hamburger { display: flex; }
  .feat { grid-template-columns: 1fr; }
  .list-card { grid-template-columns: 1fr; }
  .list-card__thumb { aspect-ratio: 16/9; }
  .list-card__body { padding: var(--space-md); }
  .cat-blocks { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .page-item { min-width: 34px; height: 34px; font-size: 11px; }
  .post-prevnext { grid-template-columns: 1fr; }
  .post-prevnext__half--right { text-align: left; }
  .author-blk { flex-direction: column; align-items: center; text-align: center; }
  .archive-list__row { flex-direction: column; gap: var(--space-xs); }
  .site-ftr__nav { gap: var(--space-md); }
  .site-main { padding: 0; }
}