/*
Theme Name: 晨光誌 Chenguang
Theme URI: https://beauty.dappei.com/
Description: 晨光誌女性生活與保養媒體主題。
Version: 1.0.3
Author: 晨光誌編輯部
Text Domain: chenguang
*/
:root{
  --paper:#F7F2EA;
  --paper-2:#EFE7DA;
  --paper-3:#E7DCCC;
  --ink:#191512;
  --ink-2:#443E37;
  --muted:#8C8378;
  --brand:#7B3F52;
  --brand-ink:#5E2C3D;
  --line:rgba(25,21,18,.13);
  --line-soft:rgba(25,21,18,.07);
  --serif:"Noto Serif TC","Songti TC","PingFang TC",Georgia,serif;
  --sans:"Noto Sans TC","PingFang TC","Helvetica Neue",Arial,sans-serif;
  --latin:"Fraunces","Noto Serif TC",Georgia,serif;
  --w:1280px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{width:min(var(--w),calc(100% - 96px));margin:0 auto}

/* ============ 顶部细条 ============ */
.topbar{
  border-bottom:1px solid var(--line-soft);
  font-size:12px;letter-spacing:.14em;color:var(--muted);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar .date{font-feature-settings:"tnum"}
.topbar .r{display:flex;gap:22px}
.topbar a:hover{color:var(--ink)}

/* ============ 头部 ============ */
header.head{border-bottom:1px solid var(--line);background:rgba(247,242,234,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;height:82px;gap:40px}
.logo{display:flex;align-items:baseline;gap:11px}
.logo .cn{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:.16em}
.logo .en{font-size:10px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase;transform:translateY(-2px)}
nav.main{display:flex;gap:34px;font-size:14.5px;letter-spacing:.06em;color:var(--ink-2)}
nav.main a{position:relative;padding:6px 0}
nav.main a.on{color:var(--brand)}
nav.main a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brand)}
nav.main a:hover{color:var(--brand)}
.head-r{display:flex;align-items:center;gap:18px}
.header-search{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;color:var(--muted);font-size:13px;
  background:transparent;cursor:text;min-width:150px;transition:border-color .2s
}
.header-search:hover{border-color:rgba(25,21,18,.28)}
.header-search svg{flex:none}
.sub{font-size:13px;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:2px}

/* ============ 二级栏目条 ============ */
.subnav{border-bottom:1px solid var(--line-soft)}
.subnav .wrap{display:flex;gap:28px;height:46px;align-items:center;font-size:12.5px;letter-spacing:.1em;color:var(--muted);overflow:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a:hover{color:var(--ink)}

/* ============ 主视觉 ============ */
.hero{padding:44px 0 0}
.hero-grid{display:grid;grid-template-columns:1.62fr .92fr;gap:64px;align-items:start}
.feature{position:relative;display:block;overflow:hidden}
.feature .ph{aspect-ratio:16/10;background:var(--paper-3);overflow:hidden}
.feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.feature:hover img{transform:scale(1.03)}
.feature .overlay{
  position:absolute;inset:auto 0 0 0;padding:52px 46px 44px;
  background:linear-gradient(to top,rgba(18,14,12,.82) 0%,rgba(18,14,12,.42) 45%,rgba(18,14,12,0) 100%);
  color:#FBF7F0;
}
.eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(251,247,240,.72);
  display:flex;align-items:center;gap:10px;margin-bottom:18px
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.eyebrow.dark{color:var(--brand)}
.eyebrow.dark::before{background:var(--brand);opacity:1}
.feature h1{
  font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.34;
  letter-spacing:.02em;margin:0 0 16px;max-width:15.5em;text-wrap:balance
}
.feature .deck{font-size:14.5px;color:rgba(251,247,240,.78);line-height:1.85;max-width:32em;margin:0}
.feature .meta{margin-top:24px;font-size:12px;letter-spacing:.12em;color:rgba(251,247,240,.6)}

/* 右侧推荐 */
.side-list{display:flex;flex-direction:column}
.side-item{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line-soft)}
.side-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.side-item .k{font-size:11px;letter-spacing:.22em;color:var(--brand);margin-bottom:12px}
.side-item h3{
  font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.58;
  margin:0 0 10px;letter-spacing:.01em
}
.side-item:hover h3{color:var(--brand)}
.side-item p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.8}
.side-item .meta{margin-top:12px;font-size:11.5px;letter-spacing:.1em;color:var(--muted)}

/* ============ 滚动字幕式分隔 ============ */
.rule-row{
  display:flex;align-items:center;gap:26px;margin:74px 0 0;
  font-size:11.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase
}
.rule-row .line{flex:1;height:1px;background:var(--line-soft)}

/* ============ 最常讀 ============ */
section.block{padding-top:38px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:34px}
.block-head h2{
  font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.1em;margin:0;
  display:flex;align-items:baseline;gap:16px
}
.block-head h2 .num{font-size:12px;letter-spacing:.2em;color:var(--brand);font-family:var(--sans)}
.more{font-size:12.5px;letter-spacing:.14em;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.more:hover{color:var(--brand)}
.more::after{content:"→";transition:transform .25s}
.more:hover::after{transform:translateX(3px)}

.rank{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.rank ol{list-style:none;margin:0;padding:0}
.rank li{border-top:1px solid var(--line-soft);padding:16px 0 15px;display:flex;gap:16px;align-items:baseline}
.rank li:first-child{border-top:0}
.rank .n{
  font-family:var(--latin);font-size:13px;letter-spacing:.06em;color:var(--brand);
  flex:none;width:24px;font-feature-settings:"tnum"
}
.rank a{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.rank a:hover{color:var(--brand)}

/* ============ 深色引语带 ============ */
.quote-band{margin-top:74px;background:#1B1614;color:#F3EBE0;padding:82px 0}
.quote-band .wrap{display:grid;grid-template-columns:200px 1fr;gap:60px;align-items:start}
.quote-band .lab{font-size:11px;letter-spacing:.24em;color:rgba(243,235,224,.45);text-transform:uppercase;padding-top:14px}
.quote-band blockquote{margin:0}
.quote-band .q{
  font-family:var(--serif);font-weight:300;font-size:38px;line-height:1.62;
  letter-spacing:.02em;margin:0 0 30px;text-wrap:balance
}
.quote-band .q em{font-style:normal;color:#C98A9E}
.quote-band .by{font-size:12.5px;letter-spacing:.16em;color:rgba(243,235,224,.5)}

/* ============ 片單式列表 ============ */
.feed{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.feed-item{display:flex;gap:22px;padding:26px 0;border-top:1px solid var(--line-soft);align-items:flex-start}
.feed-item:nth-child(-n+2){border-top:1px solid var(--line)}
.feed-item .thumb{flex:none;width:132px;aspect-ratio:1;overflow:hidden;background:var(--paper-2)}
.feed-item .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.feed-item:hover .thumb img{transform:scale(1.05)}
.feed-item .tag{font-size:11px;letter-spacing:.18em;color:var(--brand);margin-bottom:8px}
.feed-item h3{
  font-family:var(--serif);font-weight:500;font-size:18.5px;line-height:1.6;
  margin:0 0 8px;letter-spacing:.01em
}
.feed-item:hover h3{color:var(--brand)}
.feed-item .ex{font-size:13px;color:var(--muted);line-height:1.8;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-item .meta{margin-top:10px;font-size:11.5px;letter-spacing:.1em;color:var(--muted)}

/* ============ 專題卡（大圖壓字） ============ */
.features{display:grid;grid-template-columns:1.15fr 1fr;gap:26px}
.fcard{position:relative;display:block;overflow:hidden;background:var(--paper-2)}
.fcard .ph{aspect-ratio:4/3;overflow:hidden}
.fcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.fcard:hover img{transform:scale(1.04)}
.fcard .overlay{position:absolute;inset:auto 0 0 0;padding:44px 38px 34px;background:linear-gradient(to top,rgba(18,14,12,.8),rgba(18,14,12,0));color:#FBF7F0}
.fcard h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.5;margin:0 0 8px;max-width:13em}
.fcard .meta{font-size:11.5px;letter-spacing:.14em;color:rgba(251,247,240,.62)}

/* ============ 欄目雙欄 ============ */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:78px}
.col h2{
  font-family:var(--serif);font-weight:500;font-size:23px;letter-spacing:.1em;margin:0 0 6px;
  padding-bottom:16px;border-bottom:1px solid var(--ink)
}
.col .top{padding:26px 0 24px;border-bottom:1px solid var(--line-soft)}
.col .top .tag{font-size:11px;letter-spacing:.18em;color:var(--brand);margin-bottom:9px}
.col .top h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.6;margin:0 0 8px}
.col .top p{margin:0;font-size:13px;color:var(--muted);line-height:1.8}
.col ul{list-style:none;margin:0;padding:0}
.col li{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.6}
.col li a{display:flex;justify-content:space-between;gap:20px;color:var(--ink-2)}
.col li a:hover{color:var(--brand)}
.col li .d{flex:none;font-size:11.5px;letter-spacing:.08em;color:var(--muted);font-feature-settings:"tnum"}

/* ============ 訂閱 ============ */
.subscribe{margin-top:86px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0}
.subscribe .wrap{display:flex;align-items:center;justify-content:space-between;gap:60px}
.subscribe h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.06em;margin:0 0 6px}
.subscribe p{margin:0;font-size:13px;color:var(--muted)}
.subform{display:flex;gap:0;flex:none}
.subform input{
  width:280px;padding:14px 18px;border:1px solid var(--line);border-right:0;
  background:transparent;font-family:var(--sans);font-size:13.5px;color:var(--ink);outline:none
}
.subform input::placeholder{color:var(--muted)}
.subform input:focus{border-color:var(--brand)}
.subform button{
  padding:14px 26px;border:1px solid var(--brand);background:var(--brand);color:#FBF7F0;
  font-family:var(--sans);font-size:13px;letter-spacing:.12em;cursor:pointer;transition:background .2s
}
.subform button:hover{background:var(--brand-ink);border-color:var(--brand-ink)}

/* ============ 頁腳 ============ */
footer{margin-top:0;background:#1B1614;color:rgba(243,235,224,.72);padding:64px 0 34px}
.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px}
.foot .brand .cn{font-family:var(--serif);font-size:24px;letter-spacing:.16em;color:#F3EBE0}
.foot .brand p{font-size:12.5px;line-height:1.9;margin:14px 0 0;max-width:24em;color:rgba(243,235,224,.5)}
.foot h4{font-size:11px;letter-spacing:.22em;color:rgba(243,235,224,.42);margin:0 0 16px;text-transform:uppercase;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:2.2}
.foot a:hover{color:#F3EBE0}
.copy{margin-top:56px;padding-top:22px;border-top:1px solid rgba(243,235,224,.12);display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.1em;color:rgba(243,235,224,.38)}

/* ============ 捲動淡入 ============ */

@media (max-width:1080px){
  .wrap{width:calc(100% - 48px)}
  .head-in{flex-wrap:wrap;height:auto;padding:14px 0 0;row-gap:10px}
  nav.main{order:3;width:100%;overflow:auto;scrollbar-width:none;padding-bottom:10px;gap:26px;font-size:13.5px;border-top:1px solid var(--line-soft);padding-top:12px}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{white-space:nowrap}
  .head-r{order:2}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .feature h1{font-size:34px}
  .rank,.feed,.cols,.features{grid-template-columns:1fr}
  .quote-band .wrap{grid-template-columns:1fr;gap:22px}
  .quote-band .q{font-size:28px}
  .foot{grid-template-columns:1fr 1fr}
  .head-in{gap:20px}
  .subscribe .wrap{flex-direction:column;align-items:flex-start}
}
/* 提案完善：响应式、键盘操作和演示控件 */
:root{--muted:#71685f}
.logo{flex-shrink:0}.logo .cn{white-space:nowrap}
nav.main{gap:22px;white-space:nowrap}.head-in{gap:24px}
.header-search{min-width:0;width:164px;cursor:auto}.header-search input{width:100%;min-width:0;background:none;border:0;color:var(--ink);font:inherit;outline:none}.header-search input::placeholder{color:var(--muted)}
.subnav a{white-space:nowrap;flex-shrink:0}
.feature .ph{aspect-ratio:4/3}.feature h1{font-size:clamp(28px,2.65vw,40px)}
.col .top{display:block}.cols{row-gap:40px}
.subscribe .wrap{flex-wrap:wrap;gap:24px}#form-status{flex-basis:100%;margin:0;color:var(--brand)}#form-status:empty{display:none}
.feed-item[hidden]{display:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:5px}
@media(max-width:1280px){.logo .en{display:none}.head-r{gap:12px}.header-search{width:140px}nav.main{gap:20px}}
@media(max-width:760px){
 .wrap{width:calc(100% - 36px)}
 .topbar .wrap{height:auto;min-height:34px;font-size:10px;letter-spacing:0}.topbar .r{display:none}
 .head-in{height:70px;gap:16px}.logo .cn{font-size:26px}.head-r .header-search{width:136px}.head-r .sub{display:none}
 .subnav .wrap{gap:22px}.hero{padding-top:20px}.hero-grid{gap:28px}
 .feature .ph{aspect-ratio:4/5}.feature img{object-position:40% center}
 .feature .overlay{padding:70px 22px 25px}.feature h1{font-size:29px;line-height:1.45}.feature .deck{font-size:13px}.feature .meta{font-size:10px;letter-spacing:0}
 .side-item h3{font-size:20px}.rule-row{margin-top:32px;font-size:10px;letter-spacing:.06em}.block-head h2{font-size:25px;letter-spacing:.02em}.block-head{margin-bottom:20px}
 .rank{gap:0}.rank ol+ol{border-top:1px solid var(--line-soft)}
 .quote-band{margin-top:40px;padding:38px 0}.quote-band .q{font-size:25px}.quote-band .lab{padding:0}.quote-band .wrap{gap:12px}
 .feed-item{gap:16px;padding:22px 0}.feed-item .thumb{width:98px}.feed-item>div:last-child{min-width:0}.feed-item h3{font-size:17px}.feed-item .ex{font-size:12px}.feed-item .meta{font-size:10px;letter-spacing:0}
 .features{gap:18px}.fcard .overlay{padding:35px 24px 24px}.fcard h3{font-size:24px}
 .cols{margin-top:40px}.col li a{gap:12px}.subscribe{margin-top:44px;padding:32px 0}.subscribe h3{font-size:23px}
 .subform{width:100%}.subform input{width:0;flex:1;min-width:0}.subform button{padding-inline:20px}
 footer{padding:40px 0 24px}.foot{gap:28px}.foot .brand{grid-column:1/-1}.copy{gap:12px;flex-direction:column;margin-top:32px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ===== 参考站手法落地：variant 的模糊照片 + 手写体 ===== */
.quote-band{
  position:relative;overflow:hidden;
  background:#1B1614;
}
.quote-band::before{
  content:"";position:absolute;inset:0;
  background-image:var(--band,url(assets/band.webp));
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(.7) brightness(.5);
  transform:scale(1.12);
}
.quote-band>.wrap{position:relative;z-index:1}
.quote-band .q{color:#F3EBE0}
.quote-band .q em{font-style:normal;color:#D9A0B2}
.scrawl{
  font-family:"LXGW WenKai TC","Caveat","Noto Serif TC",cursive;
  font-size:34px;line-height:1.2;color:#EBD9B8;
  margin:0 0 26px;letter-spacing:.02em;
  transform:rotate(-1.4deg);transform-origin:left center;
}
@media(max-width:760px){.scrawl{font-size:26px}}

/* ===== bestx 的纸本档案：往期目录 ===== */
.archive{padding-top:86px}
.arc-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:16px;margin-bottom:0}
.arc-head h2{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.1em;margin:0}
.arc-head p{margin:0;font-size:12.5px;color:var(--muted)}
.arc-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.arc{
  display:flex;flex-direction:column;gap:6px;
  padding:26px 24px 30px;border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  transition:background .2s;
}
.arc:nth-child(4n){border-right:0}
.arc:hover{background:rgba(123,63,82,.05)}
.arc-no{font-size:11px;letter-spacing:.16em;color:var(--brand);font-feature-settings:"tnum"}
.arc-t{font-family:var(--serif);font-size:30px;letter-spacing:.14em;line-height:1.3;margin-top:6px}
.arc-d{font-size:12px;color:var(--muted);letter-spacing:.14em;font-feature-settings:"tnum"}
.arc-n{margin-top:14px;font-size:11.5px;color:var(--muted);letter-spacing:.1em;border-top:1px solid var(--line-soft);padding-top:10px}
@media(max-width:900px){.arc-grid{grid-template-columns:repeat(2,1fr)}.arc:nth-child(4n){border-right:1px solid var(--line-soft)}.arc:nth-child(2n){border-right:0}.arc-head{flex-direction:column;align-items:flex-start;gap:6px}.archive{padding-top:52px}.arc-t{font-size:24px}}

/* ===== 手机端头部修正：sticky 头不能折行，导航单独滚动 ===== */
@media(max-width:1080px){
  header.head{position:static}
  .head-in{flex-wrap:wrap;height:auto;min-height:68px;padding:14px 0 0;row-gap:10px}
  nav.main{position:static;order:3;width:100%;margin:0;padding:10px 0;overflow:auto;flex-shrink:0}
  .subnav .wrap{height:42px;font-size:11.5px;gap:20px}
  .hero{padding-top:24px}
}
@media(max-width:760px){
  header.head{position:sticky;top:0}
  nav.main{display:none}
  .head-in{height:64px;min-height:64px;flex-wrap:nowrap;padding:0;gap:12px}
  .logo .cn{font-size:24px}
  .head-r .header-search{width:150px}
  .header-search{padding:7px 12px;font-size:12.5px}
}

/* ===== WordPress 主題：全站共用補充 ===== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:999;width:auto;height:auto;clip:auto;background:var(--ink);color:#fff;padding:10px 16px}
.feed-item .thumb img,.side-item img{aspect-ratio:1}
.hero .feature .ph img{aspect-ratio:auto}
.side-item .side-thumb{display:none}
nav.main .current-menu-item>a,nav.main .current-cat>a,nav.main a[aria-current]{color:var(--brand)}
nav.main ul,.subnav ul,.foot ul.menu{list-style:none;margin:0;padding:0}
nav.main ul{display:flex;gap:inherit}
.subnav ul{display:flex;gap:28px}
.empty-note{padding:40px 0;color:var(--muted)}

/* 麵包屑 */
.crumbs{font-size:12px;letter-spacing:.08em;color:var(--muted);padding:26px 0 0}
.crumbs a:hover{color:var(--brand)}
.crumbs span.sep{margin:0 8px;opacity:.5}

/* ===== 分類／標籤／搜尋 列表頁 ===== */
.list-head{padding:30px 0 34px;border-bottom:1px solid var(--ink);margin-bottom:6px;display:grid;grid-template-columns:1fr auto;gap:12px 40px;align-items:end}
.list-head h1{font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:.08em;margin:0;line-height:1.3}
.list-head .desc{grid-column:1;margin:0;max-width:36em;color:var(--ink-2);font-size:14.5px;line-height:1.85}
.list-head .count{grid-column:2;grid-row:1/3;font-size:12.5px;color:var(--muted);letter-spacing:.1em;white-space:nowrap}
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
.cat-tabs a{font-size:13px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.cat-tabs a:hover,.cat-tabs a.on{border-color:var(--brand);color:var(--brand)}
.list-lead{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;padding:34px 0 40px;border-bottom:1px solid var(--line-soft)}
.list-lead .ph{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.list-lead img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.list-lead:hover img{transform:scale(1.03)}
.list-lead .tag{font-size:11px;letter-spacing:.18em;color:var(--brand);margin-bottom:12px}
.list-lead h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.45;margin:0 0 14px}
.list-lead:hover h2{color:var(--brand)}
.list-lead p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.9}
.list-lead .meta{margin-top:18px;font-size:12px;color:var(--muted);letter-spacing:.1em}
.list-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;margin-top:10px}
.list-layout .feed{grid-template-columns:1fr}
.list-layout .feed-item:nth-child(-n+2){border-top:1px solid var(--line-soft)}
.list-layout .feed-item:first-child{border-top:0}
aside.side{padding-top:26px}
.side-box{margin-bottom:40px}
.side-box h3{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.1em;margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.side-box ol{list-style:none;margin:0;padding:0;counter-reset:r}
.side-box ol li{counter-increment:r;display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:14px;line-height:1.6}
.side-box ol li::before{content:counter(r,decimal-leading-zero);font-family:var(--latin);color:var(--brand);font-size:12.5px;flex:none;width:22px;padding-top:2px}
.side-box ol a:hover{color:var(--brand)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.tag-cloud a{font-size:12.5px!important;padding:5px 12px;background:var(--paper-2);color:var(--ink-2)}
.tag-cloud a:hover{background:var(--brand);color:#FBF7F0}
.pager{display:flex;justify-content:center;gap:6px;padding:46px 0 10px;flex-wrap:wrap}
.pager .page-numbers{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pager .page-numbers.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager a.page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.search-big{display:flex;margin:22px 0 0;max-width:560px}
.list-head{grid-template-columns:minmax(0,1fr) auto}
.list-head .search-big{grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box}
.list-head .desc{min-width:0;overflow-wrap:anywhere}
.search-big input{flex:1;min-width:0;padding:14px 18px;border:1px solid var(--line);border-right:0;background:#fff8;font:inherit;font-size:15px;color:var(--ink);outline:none}
.search-big input:focus{border-color:var(--brand)}
.search-big button{padding:0 26px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-size:13.5px;letter-spacing:.12em;cursor:pointer}
mark{background:rgba(123,63,82,.14);color:inherit;padding:0 2px}

/* ===== 文章頁 ===== */
.progress{position:fixed;left:0;top:0;height:2px;background:var(--brand);width:0;z-index:60;transition:width .1s linear}
.post-head{max-width:760px;margin:0 auto;padding:34px 0 30px;text-align:left}
.post-head .tag{display:inline-block;font-size:12px;letter-spacing:.18em;color:var(--brand);margin-bottom:16px}
.post-head h1{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.45;letter-spacing:.02em;margin:0 0 18px;text-wrap:balance}
.post-head .dek{font-size:16px;color:var(--ink-2);line-height:1.9;margin:0 0 22px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--muted);letter-spacing:.06em;padding-top:18px;border-top:1px solid var(--line-soft)}
.post-meta .by{color:var(--ink-2)}
.post-cover{max-width:1080px;margin:0 auto}
.post-cover img{width:100%;aspect-ratio:3/2;object-fit:cover}
.post-cover figcaption{font-size:12px;color:var(--muted);padding-top:10px;letter-spacing:.04em}
.post-wrap{display:grid;grid-template-columns:200px minmax(0,680px) 1fr;gap:56px;max-width:1180px;margin:46px auto 0}
.toc{position:sticky;top:110px;align-self:start;font-size:13px;line-height:1.6}
.toc h2{font-size:11.5px;letter-spacing:.2em;color:var(--muted);font-weight:400;margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc li a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--muted)}
.toc li a:hover{color:var(--ink)}
.toc li a.on{color:var(--brand);border-left-color:var(--brand)}
.toc-mobile{display:none}
.entry{font-family:var(--serif);font-size:17.5px;line-height:2.05;color:#2A2420;letter-spacing:.02em}
.entry>*:first-child{margin-top:0}
.entry p{margin:0 0 1.35em}
.entry h2{font-size:25px;font-weight:600;line-height:1.5;margin:2.2em 0 .8em;letter-spacing:.03em;scroll-margin-top:110px}
.entry h3{font-size:20px;font-weight:600;line-height:1.55;margin:1.8em 0 .6em;scroll-margin-top:110px}
.entry ul,.entry ol{padding-left:1.4em;margin:0 0 1.35em}
.entry li{margin:.35em 0}
.entry li::marker{color:var(--brand)}
.entry strong{font-weight:600;background:linear-gradient(transparent 62%,rgba(201,138,158,.28) 62%)}
.entry blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid var(--brand);color:var(--ink-2)}
.entry table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14.5px;line-height:1.7;margin:0 0 1.6em}
.entry th,.entry td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.entry th{font-weight:500;background:var(--paper-2)}
.entry a{color:var(--brand);border-bottom:1px solid rgba(123,63,82,.35)}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.post-aside{align-self:start;position:sticky;top:110px}
.share{display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.share b{font-weight:400;font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:4px}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.share a:hover,.share button:hover{color:var(--brand)}
.share .ok{color:var(--brand)}
.note-box{margin:2.4em 0 0;padding:20px 22px;background:var(--paper-2);font-family:var(--sans);font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0}
.post-tags a{font-family:var(--sans);font-size:12.5px;padding:5px 12px;border:1px solid var(--line);color:var(--ink-2)}
.post-tags a:hover{border-color:var(--brand);color:var(--brand)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:46px 0 0;padding-top:26px;border-top:1px solid var(--ink)}
.post-nav a{display:block}
.post-nav small{display:block;font-size:11.5px;letter-spacing:.18em;color:var(--muted);margin-bottom:8px}
.post-nav span{font-family:var(--serif);font-size:17px;line-height:1.6}
.post-nav a:hover span{color:var(--brand)}
.post-nav .next{text-align:right}
.related{margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.rel-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);margin-bottom:14px}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.rel-card:hover img{transform:scale(1.05)}
.rel-card .tag{font-size:11px;letter-spacing:.18em;color:var(--brand);margin-bottom:6px}
.rel-card h3{font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:1.6;margin:0}
.rel-card:hover h3{color:var(--brand)}
.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(247,242,234,.94);color:var(--ink);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;cursor:pointer;z-index:40}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{border-color:var(--brand);color:var(--brand)}

/* ===== 一般頁面（關於我們等） ===== */
.page-head{max-width:760px;margin:0 auto;padding:46px 0 26px;border-bottom:1px solid var(--ink)}
.page-head h1{font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:.1em;margin:0}
.page-head p{margin:12px 0 0;color:var(--muted);font-size:14px}
.page-body{max-width:760px;margin:38px auto 0}
.page-body .entry{font-size:17px}
.contact-form{display:grid;gap:16px;margin:24px 0 0;font-family:var(--sans)}
.contact-form label{display:grid;gap:6px;font-size:13px;color:var(--ink-2);letter-spacing:.06em}
.contact-form input,.contact-form select,.contact-form textarea{padding:12px 14px;border:1px solid var(--line);background:#fffa;font:inherit;font-size:15px;color:var(--ink);outline:none;border-radius:0}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--brand)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form button{justify-self:start;padding:13px 30px;border:1px solid var(--brand);background:var(--brand);color:#FBF7F0;font:inherit;font-size:13.5px;letter-spacing:.14em;cursor:pointer}
.contact-form button:hover{background:var(--brand-ink)}
.form-msg{padding:14px 16px;font-size:14px;font-family:var(--sans)}
.form-msg.ok{background:rgba(74,122,90,.1);color:#33583F}
.form-msg.err{background:rgba(160,50,50,.08);color:#8A2E2E}
.hp{position:absolute;left:-9999px}
.page-404{text-align:center;padding:90px 0 40px}
.page-404 .big{font-family:var(--latin);font-size:120px;font-weight:300;line-height:1;color:var(--brand)}
.page-404 h1{font-family:var(--serif);font-weight:500;font-size:28px;margin:16px 0 10px}
.page-404 p{color:var(--muted)}
.page-404 .search-big{margin:26px auto 0}

/* 手機選單 */
.menu-btn{display:none;width:40px;height:40px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.drawer .mask{position:absolute;inset:0;background:rgba(25,21,18,.4)}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);padding:22px 26px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.drawer .close{align-self:flex-end;width:40px;height:40px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--ink)}
.drawer h4{font-size:11px;letter-spacing:.22em;color:var(--muted);font-weight:400;margin:18px 0 6px}
.drawer a{display:block;padding:10px 0;font-family:var(--serif);font-size:18px;border-bottom:1px solid var(--line-soft)}
.drawer form{display:flex;margin-top:8px}
.drawer input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);background:#fff8;font:inherit}
.drawer button[type=submit]{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:0 16px;font:inherit}

@media(max-width:1080px){
  .post-wrap{grid-template-columns:minmax(0,1fr);max-width:720px;gap:0}
  .toc,.post-aside{display:none}
  .toc-mobile{display:block;margin:0 0 28px;border:1px solid var(--line);font-family:var(--sans)}
  .toc-mobile summary{padding:12px 16px;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
  .toc-mobile ol{margin:0;padding:0 16px 12px 34px;font-size:14px;line-height:1.9}
  .list-layout{grid-template-columns:1fr;gap:20px}
  .rel-grid{grid-template-columns:repeat(2,1fr)}
  .share-inline{display:flex!important}
}
.share-inline{display:none;gap:18px;flex-wrap:wrap;margin:30px 0 0;font-family:var(--sans);font-size:13px}
.share-inline a,.share-inline button{color:var(--ink-2);background:none;border:1px solid var(--line);padding:7px 14px;font:inherit;cursor:pointer}
.menu-open{overflow:hidden}
.drawer ul{list-style:none;padding:0;margin:0}
.head-r{flex-shrink:0}
.head-r .header-search{width:184px;box-sizing:border-box;flex-shrink:0;padding:9px 12px}
.head-r .header-search .search-big{margin:0;flex:1;min-width:0;display:flex}
.head-r .header-search .search-big button{flex-shrink:0;white-space:nowrap}
.head-r .header-search .search-big input{width:100%;padding:0;border:0;background:none;font-size:12px}
.head-r .header-search .search-big button{padding:0 3px;margin-left:5px;border:0;background:none;color:var(--brand);font-size:11px;letter-spacing:0}
.tag-cloud li{list-style:none}
.toc-sub{padding-left:8px;font-size:12px}
.toc-mobile .toc-sub{font-size:13px}
.post-cover{margin-bottom:0}
.skip-link{position:absolute;left:-10000px}
.skip-link:focus{left:12px}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:760px){.head-r .header-search{display:none}.head-r{margin-left:auto}.logo{margin-right:auto}.sub-area{width:100%}.subform{max-width:100%}.toc-mobile{grid-row:1}}
@media(max-width:760px){
  .menu-btn{display:inline-flex}
  .list-head{grid-template-columns:1fr;padding:22px 0 24px}.list-head h1{font-size:30px}.list-head .count{grid-column:1;grid-row:auto}
  .list-lead{grid-template-columns:1fr;gap:18px;padding:22px 0 28px}.list-lead h2{font-size:23px}
  .post-head{padding:22px 0 22px}.post-head h1{font-size:28px}.post-head .dek{font-size:15px}
  .post-cover{margin:0 -18px}.post-cover figcaption{padding:8px 18px 0}
  .post-wrap{margin-top:30px}.entry{font-size:16.5px;line-height:1.98}.entry h2{font-size:22px}.entry h3{font-size:18.5px}
  .entry table{display:block;overflow-x:auto;white-space:nowrap}
  .post-nav{grid-template-columns:1fr}.post-nav .next{text-align:left}
  .rel-grid{gap:18px}.rel-card h3{font-size:15px}
  .page-head h1{font-size:30px}
  .page-404 .big{font-size:84px}
}