/* ==========================================================================
   手冲咖啡 (test.gafei.com) v2 — Feast Magazine 风格
   ========================================================================== */

:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-meta: #767676;
    --color-border: #e6e6e6;
    --color-accent: #8b2c2c;          /* 咖啡色 */
    --color-accent-2: #c69b6d;        /* 奶咖色 */
    --color-accent-3: #2c5d63;        /* 深青 */
    --color-accent-4: #4a6741;        /* 抹茶绿 */
    --color-accent-5: #6e4b8e;        /* 紫色 */
    --color-bar: #1a1a1a;             /* 顶部条 */
    --color-bar-text: #f5f5f5;
    --font-serif: "Source Han Serif SC", "Noto Serif SC", Georgia, "Times New Roman", "PingFang SC", "Microsoft YaHei", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --container: 1240px;
    --gap: 28px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- 容器 ---------- */
.ft-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 顶部条 ---------- */
.ft-topbar {
    background: var(--color-bar);
    color: var(--color-bar-text);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ft-topbar-inner {
    display: flex;
    align-items: center;
    height: 56px;
    gap: 20px;
}

.ft-menu-btn {
    background: none; border: 0; padding: 8px 10px; cursor: pointer;
    display: inline-flex; flex-direction: column; gap: 4px;
}
.ft-menu-btn span {
    display: block; width: 22px; height: 2px; background: var(--color-bar-text);
}

.ft-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.ft-nav-item {
    color: var(--color-bar-text);
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color .15s;
}
.ft-nav-item:hover { color: var(--color-accent-2); }
.ft-nav-item--brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 17px;
    margin-right: 6px;
}

.ft-topbar-meta {
    color: rgba(245,245,245,0.6);
    font-size: 13px;
    letter-spacing: 2px;
}

/* ---------- 通用 ---------- */
.ft-main { padding: 36px 0 60px; }

.ft-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-bottom: 10px;
}
.ft-tag--light { color: #fff; background: rgba(0,0,0,0.55); padding: 4px 10px; }
.ft-tag--alt { color: var(--color-accent-3); }
.ft-tag--alt2 { color: var(--color-accent); }
.ft-tag--alt3 { color: var(--color-accent-4); }
.ft-tag--alt4 { color: var(--color-accent-5); }

.ft-meta {
    color: var(--color-meta);
    font-size: 12px;
    letter-spacing: 1px;
}

.ft-more {
    color: var(--color-meta);
    font-size: 13px;
    letter-spacing: 1px;
    border-bottom: 1px solid transparent;
    transition: all .15s;
}
.ft-more:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- Hero ---------- */
.ft-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--gap);
    margin-bottom: 48px;
}

.ft-hero-main { min-height: 480px; }
.ft-hero-card {
    display: block;
    color: #fff;
    position: relative;
}
.ft-hero-img {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    padding-top: 62%;
    border-radius: 4px;
    overflow: hidden;
}
.ft-hero-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%);
}
.ft-hero-img .ft-tag {
    position: absolute;
    top: 24px; left: 24px;
    z-index: 2;
}
.ft-hero-title {
    position: absolute;
    left: 28px; right: 28px; bottom: 24px;
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.25;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
    /* 长标题（英文长词/中英混合）允许按词换行，绝不逐字断行（修复2026-08-30移动端一字一行）*/
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ft-hero-excerpt {
    color: var(--color-meta);
    font-size: 15px;
    line-height: 1.7;
    margin: 18px 4px 0;
    max-width: 720px;
}

.ft-hero-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ft-hero-mini {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    align-items: start;
}
.ft-hero-mini-img {
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    width: 100px; height: 72px;
    border-radius: 3px;
}
.ft-hero-mini-body { padding-top: 0; }
.ft-hero-mini-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 4px;
    color: var(--color-text);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ft-hero-mini-title:hover { color: var(--color-accent); }
.ft-hero-mini-body .ft-meta { font-size: 11px; }

/* ---------- 分区 ---------- */
.ft-section { margin-bottom: 56px; }

.ft-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-top: 2px solid var(--color-text);
    padding-top: 14px;
    margin-bottom: 24px;
}
.ft-section-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 22px;
    margin: 0;
    color: var(--color-text);
}
.ft-section-en {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--color-meta);
    margin-left: 10px;
    text-transform: uppercase;
}

/* ---------- 卡片网格 ---------- */
.ft-grid { display: grid; gap: var(--gap); }
.ft-grid-3 { grid-template-columns: repeat(3, 1fr); }

.ft-card {
    display: flex;
    flex-direction: column;
    background: transparent;
}
.ft-card-img {
    display: block;
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    width: 100%;
    padding-top: 66.6667%;
    border-radius: 3px;
    position: relative;
}
.ft-card-body { padding: 14px 2px 0; }

.ft-card-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.32;
    margin: 0 0 10px;
    color: var(--color-text);
    /* 长标题（英文长词/中英混合）允许按词换行，绝不逐字断行 */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ft-card-title a:hover { color: var(--color-accent); }

.ft-card-excerpt {
    color: var(--color-meta);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 页脚 ---------- */
.ft-footer {
    background: #f7f5f2;
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
    padding: 40px 0 20px;
}
.ft-footer-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.ft-footer-col h4 {
    font-family: var(--font-serif);
    font-size: 15px;
    margin: 0 0 12px;
    color: var(--color-text);
}
.ft-footer-col a, .ft-footer-col p {
    display: block;
    color: var(--color-meta);
    font-size: 13px;
    line-height: 2;
}
.ft-footer-col a:hover { color: var(--color-accent); }

.ft-footer-bottom {
    text-align: center;
    color: var(--color-meta);
    font-size: 12px;
    border-top: 1px solid var(--color-border);
    margin-top: 30px;
    padding-top: 20px;
}

/* ---------- 响应式（媒体查询必须位于所有基础规则之后，否则会被同名规则覆盖） ---------- */
/* 2026-08-30 修复：.ft-layout 基础定义写在媒体查询后导致移动端两列不塌陷、正文宽 0 → 一字一行 */

/* ---------- 渐变占位（本地预览） ---------- */
.img-grad { background-image: linear-gradient(135deg, #c8b8a8, #8b2c2c); }
.grad-1 { background-image: linear-gradient(135deg, #d4c5b0, #8b2c2c); }
.grad-2 { background-image: linear-gradient(135deg, #c9a87c, #6f4e37); }
.grad-3 { background-image: linear-gradient(135deg, #b9c4b1, #4e7a4e); }
.grad-4 { background-image: linear-gradient(135deg, #d9c2b2, #a0522d); }
.grad-5 { background-image: linear-gradient(135deg, #c4b0c9, #6a4a7a); }
.grad-6 { background-image: linear-gradient(135deg, #cfc3ae, #7a5c3e); }
.grad-7 { background-image: linear-gradient(135deg, #bfc9cf, #3e5a6e); }
.grad-8 { background-image: linear-gradient(135deg, #d6c6b5, #8b6f47); }

/* ---------- 通用布局（栏目页/内页/搜索页） ---------- */
.ft-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 0 0;
    font-size: 13px;
    color: var(--color-meta);
    letter-spacing: 1px;
}
.ft-breadcrumb a { color: var(--color-meta); }
.ft-breadcrumb a:hover { color: var(--color-accent); }
.ft-breadcrumb-sep { color: var(--color-border); }

/* 栏目头 */
.ft-cat-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-top: 2px solid var(--color-text);
    margin-top: 16px;
    padding-top: 16px;
    margin-bottom: 8px;
}
.ft-cat-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 34px;
    margin: 0;
    color: var(--color-text);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ft-cat-en {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--color-meta);
}
.ft-cat-desc {
    color: var(--color-meta);
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 28px;
    max-width: 860px;
}

/* 双栏布局 */
.ft-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    margin-top: 24px;
}
.ft-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

/* 侧栏 */
.ft-layout-side { min-width: 0; }
.ft-side-block {
    border-top: 2px solid var(--color-text);
    padding-top: 14px;
    margin-bottom: 36px;
}
.ft-side-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 19px;
    margin: 0 0 16px;
    color: var(--color-text);
}
.ft-side-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.ft-side-item:last-child { border-bottom: none; }
.ft-side-item-img {
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    width: 96px; height: 66px;
    border-radius: 3px;
}
.ft-side-item-body h3 {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 5px;
    color: var(--color-text);
    font-weight: 700;
}
.ft-side-item:hover .ft-side-item-body h3 { color: var(--color-accent); }
.ft-side-list { display: flex; flex-direction: column; gap: 10px; }
.ft-side-list a {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 9px;
}
.ft-side-list a:hover { color: var(--color-accent); }
.ft-side-num { color: var(--color-accent); margin-right: 6px; }

/* 分页 */
.ft-pagination { margin: 36px 0; }
.ft-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
}
.ft-pagination li {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-size: 14px;
    color: var(--color-text);
    padding: 0 10px;
}
.ft-pagination li a { color: var(--color-text); display: block; }
.ft-pagination li a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.ft-pagination li.active,
.ft-pagination li.thisclass,
.ft-pagination li:hover {
    background: var(--color-bar);
    border-color: var(--color-bar);
}
.ft-pagination li.active,
.ft-pagination li.thisclass,
.ft-pagination li:hover,
.ft-pagination li.thisclass a,
.ft-pagination li:hover a { color: #fff; }
.ft-pagination li.active a { color: #fff; }

/* ---------- 文章内页 ---------- */
.ft-article-wrap { min-width: 0; }
.ft-article-head { border-top: 2px solid var(--color-text); padding-top: 22px; }
.ft-article-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.35;
    margin: 12px 0 16px;
    color: var(--color-text);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.ft-article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-meta);
    font-size: 13px;
    letter-spacing: 1px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 28px;
}
.ft-article-meta-sep { color: var(--color-border); }

/* 正文排版 */
.ft-article-content {
    color: #2c2c2c;
    font-size: 16px;
    line-height: 1.9;
    word-break: break-word;
}
.ft-article-content p { margin: 0 0 1.2em; }
.ft-article-content h2,
.ft-article-content h3,
.ft-article-content h4 {
    font-family: var(--font-serif);
    color: var(--color-text);
    margin: 1.6em 0 0.8em;
    line-height: 1.4;
}
.ft-article-content h2 { font-size: 24px; }
.ft-article-content h3 { font-size: 20px; }
.ft-article-content h4 { font-size: 17px; }
.ft-article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2em auto;
    border-radius: 4px;
}
.ft-article-content a { color: var(--color-accent); text-decoration: underline; }
.ft-article-content ul,
.ft-article-content ol { padding-left: 1.6em; margin: 0 0 1.2em; }
.ft-article-content li { margin-bottom: 0.4em; }
.ft-article-content blockquote {
    border-left: 3px solid var(--color-accent);
    background: #faf8f5;
    margin: 1.2em 0;
    padding: 12px 18px;
    color: #555;
    font-size: 15px;
}
.ft-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 14px;
}
.ft-article-content th,
.ft-article-content td {
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
}
.ft-article-content th { background: #faf8f5; }

/* 相关推荐 */
.ft-related { margin-top: 48px; }

/* ---------- 搜索页 ---------- */
.ft-search-head { margin-bottom: 20px; }
.ft-search-box { margin: 8px 0 24px; }
.ft-search-box form {
    display: flex;
    max-width: 640px;
}
.ft-search-box input {
    flex: 1;
    height: 48px;
    border: 2px solid var(--color-text);
    border-right: none;
    border-radius: 4px 0 0 4px;
    padding: 0 18px;
    font-size: 15px;
    outline: none;
    background: #fff;
    color: var(--color-text);
}
.ft-search-box input:focus { border-color: var(--color-accent); }
.ft-search-box button {
    height: 48px;
    padding: 0 32px;
    border: none;
    border-radius: 0 4px 4px 0;
    background: var(--color-bar);
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    cursor: pointer;
}
.ft-search-box button:hover { background: var(--color-accent); }

.ft-search-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}
.ft-search-filter-label { color: var(--color-meta); letter-spacing: 1px; }
.ft-chip {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-meta);
    font-size: 13px;
}
.ft-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ft-chip--on {
    background: var(--color-bar);
    border-color: var(--color-bar);
    color: #fff;
}
.ft-search-result-info {
    color: var(--color-meta);
    font-size: 14px;
    margin: 20px 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.ft-search-result-info strong { color: var(--color-accent); }

.ft-search-list { display: flex; flex-direction: column; }
.ft-search-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid var(--color-border);
}
.ft-search-item-img {
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
    height: 146px;
    border-radius: 4px;
}
.ft-search-item-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.45;
    margin: 6px 0 8px;
}
.ft-search-item-title a { color: var(--color-text); }
.ft-search-item-title a:hover { color: var(--color-accent); }
.ft-search-item-desc {
    color: var(--color-meta);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ft-search-item-meta { display: flex; gap: 16px; }

.ft-search-null {
    text-align: center;
    padding: 60px 0 80px;
    color: var(--color-meta);
    font-size: 15px;
}
/* ---------- 2026-08-30 修复：老文章正文兼容 + 版式补充 ---------- */
/* 老站文章正文是 dedecms 时代富文本：裸 <div> 段落 + <br> 换行 + 内联固定尺寸图片，
   无 <p> 标签，必须给顶层 div 补段落间距，否则正文挤成一团 */
.ft-layout-main { min-width: 0; }
.ft-card-meta { margin-top: 6px; }
.ft-card-meta .ft-meta { font-size: 12px; }
.ft-article-content { text-align: justify; }
.ft-article-content > div { margin: 0 0 1.2em; }
.ft-article-content > div:last-child { margin-bottom: 0; }
.ft-article-content > p:last-child { margin-bottom: 0; }
/* 内联 style="width:448px;height:300px" 会压过普通规则，必须 !important 覆盖 */
.ft-article-content img,
.ft-article-content video,
.ft-article-content iframe {
    max-width: 100% !important;
    height: auto !important;
}
.ft-article-content iframe { aspect-ratio: 16 / 9; }
/* 老正文超宽表格允许横向滚动，不撑破版面 */
.ft-article-content table { max-width: 100%; }
.ft-article-content strong, .ft-article-content b { color: var(--color-text); }

/* ---------- 响应式（置于文件末尾，保证覆盖前面的基础规则） ---------- */
@media (max-width: 960px) {
    .ft-hero { grid-template-columns: 1fr; }
    .ft-hero-main { min-height: 0; }
    .ft-hero-side { flex-direction: column; }
    .ft-hero-mini { grid-template-columns: 110px 1fr; }
    .ft-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .ft-footer-inner { grid-template-columns: repeat(2, 1fr); }
    .ft-layout { grid-template-columns: 1fr; }
    .ft-grid-2 { grid-template-columns: 1fr; }
    .ft-search-item { grid-template-columns: 1fr; }
    .ft-search-item-img { height: 200px; }
}
@media (max-width: 640px) {
    .ft-nav { overflow-x: auto; white-space: nowrap; }
    .ft-nav-item { padding: 8px 10px; font-size: 14px; }
    .ft-topbar-meta { display: none; }
    .ft-hero-title { font-size: 18px; line-height: 1.3; left: 14px; right: 14px; bottom: 12px; }
    .ft-grid-3 { grid-template-columns: 1fr; }
    .ft-card-title { font-size: 18px; }
    .ft-footer-inner { grid-template-columns: 1fr; }
    .ft-article-title { font-size: 22px; }
    .ft-cat-title { font-size: 24px; }
    /* 侧栏5个mini卡：移动端竖排，图片在上、标题在下 */
    .ft-hero-side { flex-direction: column; }
    .ft-hero-mini { grid-template-columns: 96px 1fr; gap: 10px; }
    .ft-hero-mini-img { width: 96px; height: 64px; }
    .ft-hero-mini-title { font-size: 13px; }
    .ft-topbar-inner { flex-wrap: nowrap; }
}