/* One Infinite — 簡單輕巧 */
:root{
  --paper:#fff; --soft:#F7F6F3; --ink:#16181C; --muted:#71767C;
  --line:#E7E5E0; --accent:#0F5B4E; --tint:#EDF3F1;
  --serif:"Songti TC","Noto Serif TC","Source Han Serif TC",Georgia,serif;
  --sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
/* bar */
.bar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.barin{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;letter-spacing:.02em}
.logomark{width:38px;height:38px;flex:none}
.brand .bs{font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.14em}
.nav{display:flex;gap:26px;font-size:14.5px;color:#4a4f55}
.nav a{padding:6px 0;border-bottom:1.5px solid transparent;transition:.18s}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--accent);border-color:var(--accent)}
/* hero */
.heroimg{position:relative;display:flex;align-items:center;overflow:hidden;min-height:min(74vh,660px)}
.heroimg-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,10,14,.95) 0%,rgba(6,10,14,.88) 34%,rgba(6,10,14,.5) 66%,rgba(6,10,14,.14) 100%)}
.heroin{position:relative;z-index:2;color:#fff;padding:92px 24px;width:100%;max-width:1080px;
  text-shadow:0 1px 22px rgba(0,0,0,.45)}
.heroin h1{font-family:var(--serif);font-size:clamp(29px,4.4vw,50px);line-height:1.26;
  letter-spacing:-.01em;margin:0 0 16px;font-weight:600;max-width:17em;text-wrap:balance}
.light{color:rgba(255,255,255,.92)}
.heroin .heroa{color:#fff;font-weight:450;max-width:34em}
.heroin .herometa i{background:rgba(255,255,255,.35)}
.btn.ghost.light{border-color:rgba(255,255,255,.42);color:#fff}
.btn.ghost.light:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.eyebrow{font-size:11.5px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin:0 0 18px}
.heroq{font-family:var(--serif);font-size:clamp(27px,3.5vw,42px);line-height:1.35;
  letter-spacing:-.01em;margin:0 0 18px;font-weight:600;text-wrap:balance}
.heroa{font-size:clamp(16px,2.2vw,19px);color:#3d4247;margin:0 0 26px;max-width:620px}
.herometa{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13.5px;margin-bottom:34px}
.herometa i{width:1px;height:12px;background:var(--line);display:block}
.heroact{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--accent);
  color:#fff;font-size:14.5px;transition:.2s}
.btn:hover{background:#0b463c}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:#c9cdd2;background:var(--soft)}
/* sections */
.sec{padding:26px 24px 56px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;
  border-top:1px solid var(--line);padding-top:22px}
.sechead h2{font-family:var(--serif);font-size:20px;margin:0;font-weight:600}
.more{font-size:13.5px;color:var(--accent)}
/* q cards */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
.qcard{background:var(--soft);border-radius:var(--r);padding:22px 22px 24px}
.qcpic{width:100%;max-width:none;margin:0;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r) var(--r) 0 0;display:block;background:var(--soft)}
.qcpic.nopic{height:0;margin:0}
.qnum{font-size:11px;color:#a8adb3;letter-spacing:.1em;margin:0 0 6px;font-variant-numeric:tabular-nums}
.qcard h3.q{font-family:var(--serif);font-size:16.5px;line-height:1.5;margin:0 0 10px;font-weight:600}
.qcard .a{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  margin:0;color:#4a4f55;font-size:14.5px;line-height:1.72}
.qgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.qcard{display:flex;flex-direction:column;background:var(--soft);border-radius:var(--r);overflow:hidden;padding:0;
  transition:box-shadow .18s ease}
.qcard:hover{box-shadow:0 8px 22px rgba(20,24,28,.07)}
.qcbtn{display:grid;grid-template-columns:1fr 14px;
  grid-template-areas:"num num" "qt plus";gap:2px 14px;align-items:start;width:100%;
  background:none;border:0;padding:18px 22px 20px;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.qcqt{grid-area:qt;font-family:var(--serif);font-size:16.5px;line-height:1.5;font-weight:600;transition:.18s;word-break:break-word}
.qcbtn:hover .qcqt{color:var(--accent)}
.qcnum{grid-area:num;font-size:11px;color:#a8adb3;letter-spacing:.1em;margin:0 0 6px}
.qcpanel{height:0;overflow:hidden;transition:height .26s ease}
.qcin{padding:0 22px 22px}
.qcin .a{margin:0;color:#3d4247;font-size:14.8px;line-height:1.8;white-space:pre-wrap}
.qcard.open .qcpanel{height:auto}
.qcard .a{margin-top:auto}
@media (max-width:900px){.qgrid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.qgrid3{grid-template-columns:1fr}}
.qcard .q{font-family:var(--serif);font-size:17px;line-height:1.55;margin:0 0 10px;font-weight:600}
.qcard .a{margin:0;color:#4a4f55;font-size:15px}
/* article cards */
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px 22px}
.acard .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.acard .thumb span{font-family:var(--serif);font-size:28px;color:#c6c2b8}
.acard h3{font-family:var(--serif);font-size:17.5px;line-height:1.5;margin:0 0 6px;font-weight:600}
.acard .muted{font-size:14px;color:var(--muted);margin:0 0 4px}
.acard .meta{font-size:12.5px;color:#9aa0a6;margin:0}
.acard:hover h3{color:var(--accent)}
/* page head */
.pagehead{padding:64px 0 30px;max-width:720px}
.pagehead h1{font-family:var(--serif);font-size:clamp(26px,4vw,40px);margin:0 0 12px;font-weight:600}
.lead{color:#4a4f55;margin:0;font-size:16.5px}
/* search */
.searchbar{position:sticky;top:66px;z-index:10;background:rgba(255,255,255,.94);
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.searchbar input{flex:1;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:11px 18px;font-size:15px;font-family:inherit;color:var(--ink);outline:none;transition:.2s}
.searchbar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--tint)}
.count{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
/* qa list */
.qlist{padding:8px 0 70px}
.qitem{border-bottom:1px solid var(--line)}
.qbtn{display:grid;grid-template-columns:22px 1fr 14px;align-items:start;gap:16px;width:100%;
  background:none;border:0;padding:22px 0;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.qbtn.hasimg{grid-template-columns:158px 1fr 14px;align-items:center}
.qlist.home .qbtn.hasimg{grid-template-columns:128px 1fr 14px}
.qlist.home .qthumb{width:128px;height:72px}
.qlist.home .qbtn{padding:16px 0}
.qlist.home .qbtn.hasimg + .apanel .ain{padding-left:144px}
.searchbar.home{position:static;background:none;border:0;padding:0 0 8px}
.qthumb{width:158px;height:89px;object-fit:cover;border-radius:8px;background:var(--soft);display:block}
.qmain{display:flex;gap:14px;align-items:baseline;min-width:0}
.num{font-size:12px;color:#a8adb3;font-variant-numeric:tabular-nums;padding-top:5px;min-width:22px}
.qt{font-family:var(--serif);font-size:17.5px;line-height:1.55;flex:1;font-weight:600;transition:.18s}
.qbtn:hover .qt{color:var(--accent)}
.plus{width:14px;height:14px;position:relative;margin-top:7px;flex:none;grid-area:plus}
.plus::before,.plus::after{content:"";position:absolute;background:#b3b8be;transition:.2s}
.plus::before{left:0;top:6px;width:14px;height:1.5px}
.plus::after{left:6px;top:0;width:1.5px;height:14px}
.qitem.open .plus::after{transform:rotate(90deg);opacity:0}
.apanel{overflow:hidden;height:0;transition:height .26s ease}
.ain{padding:0 0 26px 38px}
.qbtn.hasimg + .apanel .ain{padding-left:174px}
.ain .a{margin:0;color:#3d4247;font-size:16px;line-height:1.85;white-space:pre-wrap}
.shot{margin:18px 0 0;max-width:260px}
.shot img{border-radius:10px;border:1px solid var(--line)}
.shot figcaption{font-size:11.5px;color:#a8adb3;margin-top:6px}
.qitem.open .apanel{height:auto}
.empty{color:var(--muted);padding:40px 0 80px}
/* article page */
.article{max-width:720px;padding-bottom:90px}
.back{display:inline-block;font-size:13.5px;color:var(--muted);margin:34px 0 26px}
.back:hover{color:var(--accent)}
.article h1{font-family:var(--serif);font-size:clamp(26px,4vw,38px);line-height:1.35;margin:0 0 26px;font-weight:600}
.ahero{border-radius:12px;margin:0 0 30px}
.body p{font-size:17px;line-height:1.95;color:#2e3338;margin:0 0 1.25em}
/* prose */
.prose{padding-bottom:80px}
.prose h2{font-family:var(--serif);font-size:19px;margin:38px 0 8px;font-weight:600}
.prose p{margin:0;color:#3d4247}
/* foot */
.foot{border-top:1px solid var(--line);padding:38px 0 54px;background:var(--soft)}
.fbrand{font-family:var(--serif);font-size:15px;margin:0 0 6px}
.fmuted{font-size:13px;color:var(--muted);margin:0}
.fmuted a{border-bottom:1px solid #d6d3cc}
/* mobile */
@media (max-width:820px){
  .heroimg{min-height:auto}
  .heroin{padding:64px 24px 56px}
  .scrim{background:linear-gradient(180deg,rgba(10,14,18,.55) 0%,rgba(10,14,18,.74) 55%,rgba(10,14,18,.9) 100%)}
}
@media (max-width:640px){
  .qbtn.hasimg{grid-template-columns:96px 1fr 14px;gap:12px}
  .qthumb{width:96px;height:56px}
  .qbtn.hasimg + .apanel .ain{padding-left:0}
  .hero{padding:56px 24px 40px}
  .nav{gap:16px;font-size:13.5px}
  .brand span{display:none}
  .ain{padding-left:0}
  .sechead{flex-direction:column;gap:6px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}