/*
Theme Name: MM Coffee Gear
Theme URI: https://mmcoffeegear.com/
Author: MM Coffee Gear
Author URI: https://mmcoffeegear.com/
Description: Editorial blog theme for MM Coffee Gear, matching the storefront's ivory, espresso and copper palette. Built for long-form posts published from the WordPress editor or over the REST API.
Version: 1.1.2
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mm-coffee-gear
Tags: blog, custom-colors, featured-images, translation-ready
*/

:root {
  --c-ivory: #f5f0e8;
  --c-ivory-deep: #efe7db;
  --c-sand: #e6dccc;
  --c-espresso: #26211e;
  --c-coffee: #6a4534;
  --c-copper: #b9855d;
  --c-copper-ink: #8a5c34;
  --c-muted: #5f554d;
  --c-line: #ded4c4;
  --c-line-strong: #c9bdaa;
  --c-white: #ffffff;
  --serif: Georgia, 'Times New Roman', serif;
  /* 主站标题用的是 Manrope/Segoe UI 这一套无衬线，不是衬线体。
     之前这里用 --serif 画 h1/h2，整站看起来像另一个品牌。 */
  --heading: 'Manrope', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --sans: 'Manrope', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans KR', 'Malgun Gothic', 'Noto Sans SC', sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-ivory);
  color: var(--c-espresso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--c-copper-ink); text-decoration: none; }
a:hover { color: var(--c-espresso); }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shell ---------- */

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }

.site-header { border-bottom: 1px solid var(--c-line); background: var(--c-ivory); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding-block: 1.1rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-espresso); }
.brand img { width: 34px; height: 34px; }
.brand span { font-family: var(--heading); font-size: 1rem; letter-spacing: .01em; }
.brand b { font-weight: 600; }

.site-nav { display: flex; gap: 1.6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.site-nav a { color: var(--c-muted); }
.site-nav a:hover { color: var(--c-espresso); }

.site-footer {
  margin-top: 5rem; border-top: 1px solid var(--c-line);
  background: var(--c-ivory-deep); padding-block: 2.4rem;
  font-size: .8rem; color: var(--c-muted);
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- masthead ---------- */

.masthead { position: relative; border-bottom: 1px solid var(--c-line); }
.masthead__inner {
  position: relative; min-height: clamp(18rem, 34vw, 26rem);
  display: flex; align-items: flex-end; padding-block: 2.6rem;
  background-size: cover; background-position: center;
}
.masthead__inner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c-ivory) 8%, rgba(245, 240, 232, .82) 46%, rgba(245, 240, 232, .25) 100%);
}
.masthead__copy { position: relative; max-width: 40ch; }
.eyebrow {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-copper-ink); margin: 0 0 .6rem;
}
.masthead h1 { font-family: var(--heading); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.1; }
.masthead p { margin: .9rem 0 0; color: var(--c-muted); font-size: .95rem; }

/* ---------- post list ---------- */

.post-list { display: grid; gap: 3rem; padding-block: 3.4rem; }
.post-list--grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.4rem; }

.card { display: flex; flex-direction: column; border-top: 1px solid var(--c-line-strong); padding-top: 1rem; }
.card__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-ivory-deep); }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__meta {
  margin: .9rem 0 0; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-copper-ink);
}
.card h2 { font-family: var(--heading); font-weight: 700; letter-spacing: -.015em; font-size: 1.3rem; line-height: 1.28; margin: .5rem 0 0; }
.card h2 a { color: var(--c-espresso); }
.card p { margin: .6rem 0 0; color: var(--c-muted); font-size: .88rem; }
.card__more { margin-top: .9rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- single ---------- */

.article-header { padding-block: 3rem 1.6rem; border-bottom: 1px solid var(--c-line); }
.article-header h1 { font-family: var(--heading); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem); line-height: 1.12; }
.article-header .lede { margin: 1rem 0 0; color: var(--c-muted); font-size: 1rem; max-width: 52ch; }
.article-date { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-top: 1rem; }

./* 用 auto 保持水平居中：.wrap 的 margin:0 auto 会被这里的简写覆盖，
   之前写成 margin:2.4rem 0 0，封面就贴到左边去了（右边空一大块）。 */
article-hero, .article-hero { margin: 2.4rem auto 0; }
.article-hero img { width: 100%; }

.article-body { max-width: var(--measure); margin: 2.6rem auto 0; }
.article-body p, .article-body li { font-size: 1.02rem; line-height: 1.8; color: #3a332e; }
.article-body p { margin: 0 0 1.3rem; }
.article-body h2 { font-family: var(--heading); font-weight: 700; letter-spacing: -.015em; font-size: clamp(1.45rem, 1.15rem + .9vw, 1.9rem); line-height: 1.28; margin: 2.6rem 0 .9rem; }
.article-body h3 { font-size: 1.1rem; margin: 2rem 0 .7rem; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { margin: 0 0 1.3rem 1.2rem; }
.article-body li { margin-bottom: .45rem; }
.article-body blockquote {
  margin: 2rem 0; padding-left: 1.3rem; border-left: 2px solid var(--c-copper);
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; color: var(--c-espresso);
}
.article-body figure { margin: 2rem 0; }
.article-body figcaption { font-size: .76rem; color: var(--c-muted); margin-top: .5rem; }
.article-body img { border-radius: 2px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .9rem; }
.article-body th, .article-body td { border-bottom: 1px solid var(--c-line); padding: .6rem .4rem; text-align: left; }
.article-body pre {
  background: var(--c-espresso); color: var(--c-ivory); padding: 1rem;
  overflow-x: auto; font-size: .82rem; border-radius: 2px;
}
.article-body code { font-size: .88em; }

.article-tags { margin-top: 2.6rem; font-size: .74rem; color: var(--c-muted); }
.article-tags a { margin-right: .6rem; }

.post-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); font-size: .85rem; }
.post-nav span { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-copper-ink); margin-bottom: .3rem; }

/* ---------- pagination / comments / forms ---------- */

.pagination { margin: 3rem 0; font-size: .8rem; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  border: 1px solid var(--c-line-strong); padding: .45rem .8rem; color: var(--c-muted);
}
.pagination .page-numbers.current { background: var(--c-espresso); color: var(--c-ivory); border-color: var(--c-espresso); }

.comments { max-width: var(--measure); margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--c-line); }
.comments h2 { font-family: var(--heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -.015em; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { padding: 1.2rem 0; border-bottom: 1px solid var(--c-line); }
.comment-list .children { list-style: none; margin-left: 1.4rem; padding: 0; }
.comment-author { font-size: .85rem; font-weight: 600; }
.comment-metadata { font-size: .7rem; color: var(--c-muted); }

input[type='text'], input[type='email'], input[type='url'], input[type='search'], textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--c-line-strong);
  background: var(--c-white); font: inherit; font-size: .9rem; color: var(--c-espresso);
}
textarea { min-height: 7rem; }
input[type='submit'], button, .button {
  display: inline-block; background: var(--c-espresso); color: var(--c-ivory);
  border: 1px solid var(--c-espresso); padding: .7rem 1.3rem; font: inherit;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
input[type='submit']:hover, button:hover, .button:hover { background: var(--c-coffee); border-color: var(--c-coffee); color: var(--c-ivory); }

.search-form { display: flex; gap: .5rem; max-width: 30rem; }
.search-form input[type='search'] { flex: 1; }

.notice {
  border: 1px solid var(--c-line-strong); background: var(--c-ivory-deep);
  padding: 1.4rem; margin: 2rem 0; font-size: .9rem; color: var(--c-muted);
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; gap: 1rem; }
  .site-nav { gap: 1rem; font-size: .7rem; }
  .masthead__inner { min-height: 15rem; }
  .masthead__inner::before { background: linear-gradient(180deg, rgba(245, 240, 232, .9) 30%, rgba(245, 240, 232, .97) 100%); }
  .post-list { gap: 2.2rem; padding-block: 2.4rem; }
  .article-body p, .article-body li { font-size: .99rem; }
  .post-nav { flex-direction: column; gap: 1rem; }
}

/* ---------------------------------------------------------------------------
   Header and footer parity with the static storefront.

   The theme shipped with a two-link header ("Journal / Store") and a one-line
   footer, so /journal/ looked like a different website bolted on. These rules
   reproduce the store's structure: a sticky header with the full nav and the
   copper quote action, and a five-column footer with the same link groups.
   --------------------------------------------------------------------------- */

.site-header{position:sticky;top:0;z-index:50;background:rgba(246,241,231,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(36,26,20,.12)}
.header-inner{display:flex;align-items:center;gap:1.5rem;min-height:4.25rem}
.site-header .brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:#241a14;font-size:.92rem;letter-spacing:.14em;white-space:nowrap}
.site-header .brand b{font-weight:700}
.site-nav{display:flex;align-items:center;gap:1.15rem;margin-left:auto;flex-wrap:wrap}
.site-nav a{color:#241a14;text-decoration:none;font-size:.84rem;letter-spacing:.02em;padding-block:.35rem;border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:#b9855d;color:#8a5a34}
.site-nav .header-quote{background:#b9855d;color:#fff;padding:.55rem .9rem;border:0;border-radius:2px;font-weight:600;font-size:.8rem;letter-spacing:.03em}
.site-nav .header-quote:hover{background:#a5734e;color:#fff;border:0}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(36,26,20,.2);padding:.5rem .6rem;cursor:pointer}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:18px;height:2px;background:#241a14;content:"";position:relative}
.nav-toggle__bars::before{position:absolute;top:-6px}
.nav-toggle__bars::after{position:absolute;top:6px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;z-index:100}

@media (max-width:1100px){
  .site-nav{gap:.8rem}
  .site-nav a{font-size:.8rem}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#f6f1e7;border-bottom:1px solid rgba(36,26,20,.12);padding:1rem var(--pad,1.25rem);flex-direction:column;align-items:flex-start;gap:.65rem}
  .site-nav.is-open{display:flex}
  .site-nav .header-quote{margin-top:.4rem}
}

.site-footer{background:#efe8d9;border-top:1px solid rgba(36,26,20,.12);margin-top:3.5rem}
.footer-top{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:2rem;padding-block:3rem}
.footer-logo{display:flex;align-items:center;gap:.55rem;color:#241a14;text-decoration:none;font-size:.9rem;letter-spacing:.14em}
.footer-logo b{font-weight:700}
.footer-brand p{margin-top:.9rem;color:#5f554d;font-size:.86rem;line-height:1.6}
.footer-tagline{display:block;margin-top:1rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8a5a34}
.footer-brand .contact-link{display:block;margin-top:.6rem;font-size:.84rem;color:#241a14;text-decoration:none;border-bottom:1px solid rgba(36,26,20,.18);width:fit-content}
.footer-top nav h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#5f554d;font-weight:600}
.footer-top nav ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
.footer-top nav a{color:#241a14;text-decoration:none;font-size:.86rem}
.footer-top nav a:hover{color:#8a5a34}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.2rem;border-top:1px solid rgba(36,26,20,.12);font-size:.76rem;color:#5f554d}
.footer-bottom a{color:#5f554d;text-decoration:none;margin-left:1rem}
@media (max-width:1000px){.footer-top{grid-template-columns:1fr 1fr;gap:1.6rem}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}


/* Same 78rem grid the storefront uses, so the two headers line up. */
.page{width:100%;max-width:78rem;margin-inline:auto;padding-inline:clamp(1rem,3vw,2.5rem)}

/* ---------- header parity with the static storefront ---------- */
/* Appended last so it wins over the earlier single-row / uppercase rules. */

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 241, 231, .97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(36, 26, 20, .12); }
.site-header .header-main { display: flex; align-items: center; gap: 1.2rem; min-height: 4.4rem; }
.site-header .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-coffee); font-family: var(--heading); font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: normal; }
.site-header .brand b { font-weight: 700; }
.site-header .site-nav { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; font-size: .82rem; letter-spacing: .01em; text-transform: none; }
.site-header .site-nav a { color: var(--c-muted); text-decoration: none; padding-block: .35rem; border-bottom: 1px solid transparent; }
.site-header .site-nav a:hover, .site-header .site-nav a[aria-current="page"] { color: var(--c-espresso); border-bottom-color: currentColor; }
.site-header .header-actions { display: flex; align-items: center; gap: .5rem; }
.site-header .header-quote { margin: 0; background: #b9855d; color: #fff; padding: .58rem 1rem; border: 0; border-radius: 2px; font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.site-header .header-quote:hover { background: #a5734e; color: #fff; }
.site-header .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--c-espresso); text-decoration: none; }
.site-header .icon-link:hover { color: #b9855d; }
.site-header .preferences { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .45rem .55rem; border-top: 1px solid rgba(36, 26, 20, .08); font-size: .74rem; color: var(--c-muted); }
.site-header .brand-note { letter-spacing: .01em; }
.site-header .preferences select { font: inherit; color: var(--c-espresso); background: transparent; border: 0; padding: .1rem .2rem; cursor: pointer; }
.site-header .nav-toggle { display: none; }

@media (max-width: 1080px) {
  .site-header .site-nav { gap: 1rem; font-size: .78rem; }
  .site-header .brand span { font-family: var(--heading); font-size: 1rem; letter-spacing: .01em; }
}

@media (max-width: 900px) {
  .site-header .header-main { flex-wrap: wrap; min-height: 3.6rem; }
  .site-header .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: .1rem; margin: .4rem 0 .8rem; }
  .site-header .site-nav.is-open { display: flex; }
  .site-header .site-nav a { width: 100%; padding: .55rem 0; border-bottom: 1px solid rgba(36, 26, 20, .08); }
  .site-header .nav-toggle { display: block; margin-left: auto; }
  .site-header .icon-link { display: none; }
  .site-header .preferences { font-size: .72rem; }
}

/* ---------- 正文里的产品链接（原先把产品做成三列图墙堆在文末，改成文中链接） ---------- */
.article-body .journal-pick {
  margin: 1.6rem 0;
  padding: .55rem 0 .55rem 1rem;
  border-left: 2px solid var(--c-copper);
  font-size: .95rem;
  line-height: 1.5;
}
.article-body .journal-pick a {
  color: var(--c-espresso);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 133, 93, .55);
}
.article-body .journal-pick a:hover { color: var(--c-copper-ink); border-bottom-color: currentColor; }
/* 正文里那一张代表性产品图：居中、不超过正文宽度，别把 1024px 原图铺满 */
.article-body img { max-width: 100%; height: auto; }
.article-body .journal-figure {
  max-width: 26rem;
  margin: 2.4rem auto;
}
.article-body .journal-figure img { width: 100%; display: block; border-radius: 2px; }
.article-body .journal-figure figcaption {
  margin-top: .55rem;
  font-size: .86rem;
  line-height: 1.45;
  text-align: center;
  color: var(--c-muted);
}
.article-body .journal-figure figcaption a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(185, 133, 93, .5);
}

/* ---------- 与主站对齐的字体/字号（主站标题是无衬线 700，不是 Georgia） ---------- */
body { font-size: 1.02rem; line-height: 1.62; }
h1, h2, h3, h4, .article-header h1, .entry-title, .post-title {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
h1, .article-header h1 { font-family: var(--heading); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem); line-height: 1.12; }
h2 { font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.9rem); margin-top: 2.6rem; }
h3 { font-size: 1.16rem; }
.article-body .lead, .article-header .lead { color: var(--c-muted); font-size: 1.1rem; line-height: 1.55; }
.article-body p { text-wrap: pretty; }

/* ---------- 头部逐项对齐主站 ---------- */
.site-header .header-main { min-height: 5rem; gap: 1.6rem; }
.site-header .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-coffee); font-family: var(--heading); font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: normal; }
.site-header .brand b { display: block; font-size: 0.8rem; letter-spacing: 0.16em; margin-top: 0.42rem; font-weight: 700; }
.site-header .brand img { width: 34px; height: 34px; }
.site-header .site-nav { gap: 1.3rem; }
.site-header .site-nav a { font-size: 0.9rem; font-weight: 600; padding: 1.1rem 0; letter-spacing: 0; border-bottom: 0; }
.site-header .header-quote { padding: 0.5rem 0.85rem; background: var(--c-copper); color: var(--c-espresso); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.site-header .header-quote:hover { background: var(--c-copper-ink); color: var(--c-ivory); }
.site-header .brand-note { font-size: 0.8rem; letter-spacing: 0.04em; }
.site-header .preferences { padding-bottom: 0.55rem; }
.site-header .icon-link { width: 2.1rem; height: 2.1rem; }

@media (max-width: 1080px) {
  .site-header .site-nav { gap: 0.8rem; }
  .site-header .site-nav a { font-size: 0.83rem; }
}
@media (max-width: 900px) {
  .site-header .header-main { min-height: 4.25rem; gap: 0.5rem; }
  .site-header .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-coffee); font-family: var(--heading); font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: normal; }
  .site-header .brand img { width: 28px; height: 28px; }
}

/* ---------- 文章底部询价 CTA（替代原评论框） ---------- */
/* 和正文同宽（--measure），不撑满 .wrap；之前是通栏 1132px，正文只有 68ch，
   右边一大片空白，看着像糊了一个大色块。 */
.article-cta {
  max-width: var(--measure);
  margin: 2.8rem auto 1rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.55rem);
  background: var(--c-ivory-deep);
  border: 1px solid rgba(185, 133, 93, .32);
  border-radius: 3px;
}
.article-cta .eyebrow { margin: 0 0 .35rem; }
.article-cta h2 {
  font-size: clamp(1.2rem, 1.05rem + .35vw, 1.4rem);
  margin: 0 0 .45rem;
  letter-spacing: -.02em;
}
.article-cta__lead { margin: 0 0 .95rem; color: var(--c-muted); max-width: 46ch; font-size: .96rem; }
.article-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

.article-body .btn,
.article-cta .btn {
  display: inline-block;
  font-family: var(--heading);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: .68rem 1.15rem;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.article-cta .btn--primary {
  background: var(--c-copper);
  color: var(--c-espresso);
}
.article-cta .btn--primary:hover { background: var(--c-copper-ink); color: var(--c-ivory); }
.article-cta .btn--ghost {
  background: transparent;
  color: var(--c-espresso);
  border-color: rgba(36, 26, 20, .28);
}
.article-cta .btn--ghost:hover { border-color: var(--c-espresso); }

@media (max-width: 560px) {
  .article-cta__actions .btn { width: 100%; text-align: center; }
}


/* ---------- 日志分类筛选条 / 标签 chips ---------- */
.topic-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2rem 0 0;padding-bottom:1.6rem;border-bottom:1px solid var(--c-line)}
.topic-nav a{display:inline-flex;align-items:baseline;gap:.45rem;flex:0 0 auto;padding:.42rem .95rem;border:1px solid var(--c-line-strong);border-radius:999px;font-size:.86rem;line-height:1.2;text-decoration:none;color:var(--c-espresso);transition:background .18s ease,color .18s ease,border-color .18s ease}
.topic-nav a:hover,.topic-nav .is-current{background:var(--c-espresso);color:var(--c-ivory);border-color:var(--c-espresso)}
.topic-nav .count{font-size:.78rem;color:var(--c-muted);flex:0 0 auto}
.topic-nav a:hover .count,.topic-nav .is-current .count{color:rgba(245,240,232,.72)}
.card__meta a{color:inherit;text-decoration:none}
.card__meta a:hover{color:var(--c-copper-ink);text-decoration:underline}
.article-topics{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--c-line)}
.article-topics__row{display:flex;flex-wrap:wrap;gap:.45rem;margin:0}
.topic{display:inline-flex;align-items:center;padding:.34rem .75rem;border:1px solid var(--c-line-strong);border-radius:999px;font-size:.82rem;line-height:1.2;text-decoration:none;color:var(--c-espresso);transition:background .18s ease,color .18s ease,border-color .18s ease}
.topic:hover{background:var(--c-espresso);color:var(--c-ivory);border-color:var(--c-espresso)}
.topic--category{border-color:rgba(185,133,93,.55);color:var(--c-copper-ink)}
.topic--category:hover{background:var(--c-copper);color:var(--c-espresso);border-color:var(--c-copper)}
@media(max-width:600px){.topic-nav{gap:.4rem}.topic-nav a,.topic{font-size:.8rem;padding:.36rem .7rem}}

/* ---------- header 与主站逐项对齐（含平板/手机断点） ----------
   之前只改了主结构，gap / 边框 / 字号还是旧值，所以在 Shop 和 Journal
   之间来回点时，导航会横向跳一下。下面这些数值直接抄自主站 Header.astro。 */
.site-header .header-main{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;min-height:5rem}
.site-header .brand{display:flex;align-items:center;gap:.65rem;flex:none;color:var(--c-coffee);text-decoration:none}
.site-header .brand span{font-family:var(--heading);font-size:1.22rem;font-weight:700;letter-spacing:-.03em;line-height:1;text-transform:none}
.site-header .brand b{display:block;font-size:.8rem;letter-spacing:.16em;margin-top:.42rem;font-weight:700}
.site-header .brand img{width:34px;height:34px;flex:none;object-fit:contain}
.site-header .site-nav{display:flex;align-items:center;gap:1.3rem;margin-left:0;font-size:inherit;letter-spacing:normal;text-transform:none;flex-wrap:nowrap}
.site-header .site-nav a{color:inherit;font-size:.9rem;font-weight:600;white-space:nowrap;padding:1.1rem 0;border-bottom:0;letter-spacing:normal;text-decoration:none}
.site-header .site-nav a:hover,.site-header .site-nav a[aria-current="page"]{color:var(--c-copper-ink);border-bottom-color:transparent}
.site-header .header-actions{display:flex;align-items:center;gap:1rem}
.site-header .header-quote{padding:.5rem .85rem;background:var(--c-copper);color:var(--c-espresso);font-size:.82rem;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.site-header .header-quote:hover{filter:brightness(1.06);background:var(--c-copper);color:var(--c-espresso)}
.site-header .preferences{display:flex;align-items:center;justify-content:space-between;padding:0 0 .55rem;border-top:0;font-size:inherit;color:var(--c-muted)}
.site-header .brand-note{font-size:.8rem;letter-spacing:.04em;color:var(--c-muted)}
.site-header .preferences select{font-size:.83rem;color:var(--c-muted);padding:.1rem 1.2rem .1rem .2rem;border:0;background:transparent}
/* 手机端主站把报价按钮收进抽屉，这里补一个同名入口，避免手机上丢 CTA */
.site-header .site-nav__quote{display:none}
@media(max-width:1120px){.site-header .site-nav{gap:.8rem}.site-header .site-nav a{font-size:.83rem}.site-header .header-main{gap:1rem}.site-header .header-actions{gap:.65rem}}
@media(max-width:940px){.site-header .site-nav{display:none}.site-header .header-main{min-height:4.25rem}.site-header .brand-note{display:none}.site-header .preferences{justify-content:end}.site-header .nav-toggle{display:flex}}
@media(max-width:900px){.site-header .header-quote{padding:.45rem .6rem;font-size:.76rem}}
@media(max-width:620px){
  .site-header .header-main{gap:.5rem}
  .site-header .header-actions{gap:.25rem}
  .site-header .header-quote{display:none}
  .site-header .site-nav.is-open{display:flex}
  .site-header .site-nav__quote{display:flex;align-items:center;justify-content:center;margin-top:.5rem;padding:.7rem;background:var(--c-copper);color:var(--c-espresso);font-weight:700;text-align:center}
}
@media(max-width:430px){.site-header .brand span{font-size:1.05rem}.site-header .brand img{width:28px;height:28px}.site-header .header-actions{gap:.35rem}}

/* ---------- 日志首页 header：改成和 /wholesale 一样的深色带子 ----------
   原来是象牙白底 + 右侧照片从右边淡入，标题是黑色无衬线；
   主站那条带子是深棕底、左边文案、衬线标题、铜色小标。这里对齐。 */
.masthead { background: var(--c-espresso); border-bottom: 0; }
.masthead__inner {
  min-height: clamp(20rem, 34vw, 26rem);
  align-items: center;
  background-color: var(--c-espresso);
}
.masthead__inner::before {
  background: linear-gradient(90deg,
    rgb(38 33 30 / 0.96) 0%,
    rgb(38 33 30 / 0.92) 44%,
    rgb(38 33 30 / 0.38) 80%,
    rgb(38 33 30 / 0.12) 100%);
}
.masthead h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-ivory);
  max-width: 24ch;
}
.masthead p { color: rgb(246 241 231 / 0.82); }
.masthead .eyebrow { color: var(--c-copper); }
@media (max-width: 700px) {
  .masthead__inner { min-height: 16rem; }
  .masthead__inner::before {
    background: linear-gradient(180deg, rgb(38 33 30 / 0.95) 38%, rgb(38 33 30 / 0.72) 100%);
  }
}