/* Handle with Clare · 牌義頁 */
*{margin:0;padding:0;box-sizing:border-box;}
:root{--ink:#0a0814;--gold:#c9a45c;--goldb:#e8c987;--text:#efe9dc;--dim:#b9b0c8;--violet:#8d7ed1;
--notch:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
--notch-sm:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);}
body{font-family:'Noto Serif TC',serif;color:var(--text);line-height:2.05;font-size:14px;
  background:#0d1428 radial-gradient(120% 90% at 50% 0%,#1a2747 0%,#101a36 45%,#0a0f22 100%) fixed;}
a{color:var(--gold);text-decoration:none;}a:hover{text-decoration:underline;}
/* ===== Art Deco 線框(同 landing 一致) ===== */
.decoframe{position:fixed;inset:18px;z-index:50;pointer-events:none;border:1px solid rgba(201,164,92,.16);}
.decoframe .dc{position:absolute;width:42px;height:42px;}
.decoframe .dc.tl{top:-1px;left:-1px}.decoframe .dc.tr{top:-1px;right:-1px;transform:scaleX(-1)}
.decoframe .dc.bl{bottom:-1px;left:-1px;transform:scaleY(-1)}.decoframe .dc.br{bottom:-1px;right:-1px;transform:scale(-1,-1)}
.decoframe .dmid{display:none;}
/* 收起每個 L corner 中間嗰粒金鑽石小點（只 hide 有實色填色嗰條 path） */
.decoframe .dc svg path[fill="#c9a45c"]{display:none;}
@media(max-width:540px){.decoframe{inset:10px}.decoframe .dc{width:30px;height:30px}}
.wrap{max-width:720px;margin:0 auto;padding:28px 20px 60px;}
header.top{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;}
header.top .brand{font-family:'GFS Didot',serif;letter-spacing:.3em;font-size:15px;color:var(--text);}
header.top a.back{font-size:13px;letter-spacing:.1em;}
.crumb{font-size:12.5px;color:var(--dim);letter-spacing:.08em;margin-bottom:26px;}
.cardhead{display:flex;gap:26px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap;}
.cardimg{flex:0 0 168px;}
.cardimg img{width:168px;border-radius:6px;border:1px solid rgba(201,164,92,.65);
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 4px rgba(201,164,92,.12);display:block;}
.headtxt{flex:1;min-width:240px;}
.num{font-family:'GFS Didot',serif;color:var(--gold);letter-spacing:.35em;font-size:13px;}
h1{font-family:'GFS Didot','Noto Serif TC',serif;font-size:clamp(28px,6vw,40px);line-height:1.3;
  letter-spacing:.06em;margin:6px 0 4px;}
h1 .en{display:block;font-size:.55em;color:var(--dim);font-style:italic;letter-spacing:.12em;font-weight:400;}
.kws{margin:14px 0 10px;}
.kws span{display:inline-block;border:1px solid rgba(201,164,92,.5);color:var(--goldb);
  font-size:12.5px;letter-spacing:.12em;padding:4px 12px;border-radius:3px;margin:0 6px 8px 0;}
.note{font-size:14px;color:var(--dim);border-left:2px solid rgba(201,164,92,.45);padding-left:14px;margin-top:6px;}
section{margin-top:34px;}
h2{font-family:'Noto Serif TC',serif;font-size:19px;letter-spacing:.18em;color:var(--goldb);
  padding-bottom:8px;border-bottom:1px solid rgba(201,164,92,.3);margin-bottom:14px;font-weight:600;}
h2 .tag{font-size:12px;letter-spacing:.2em;color:var(--violet);margin-left:10px;}
p{margin-bottom:12px;}
.flav{color:var(--dim);font-size:14.5px;font-style:normal;border:1px dashed rgba(201,164,92,.35);
  padding:12px 16px;border-radius:4px;margin-top:4px;}
.cta{margin-top:44px;text-align:center;border:1.5px dashed rgba(232,201,135,.7);border-radius:4px;
  background:linear-gradient(180deg,#0e1631,#070c1d);padding:26px 20px;
  box-shadow:0 0 0 1px rgba(201,164,92,.2),0 14px 40px rgba(0,0,0,.45);}
.cta h3{font-size:17px;letter-spacing:.12em;color:var(--goldb);margin-bottom:8px;font-weight:600;}
.cta p{font-size:13.5px;color:var(--dim);margin-bottom:14px;}
.cta .ctabtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta a.btn{position:relative;isolation:isolate;display:inline-block;
  color:var(--goldb);font-weight:600;letter-spacing:.24em;text-indent:.24em;
  padding:15px 40px;font-size:14px;
  background:linear-gradient(180deg,rgba(232,201,135,.14),rgba(201,164,92,.05));
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(232,201,135,.55);
  border-radius:0;clip-path:var(--notch);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  transition:letter-spacing .3s, background .3s, border-color .3s;}
.cta a.btn:hover{text-decoration:none;letter-spacing:.3em;
  background:linear-gradient(180deg,rgba(232,201,135,.22),rgba(201,164,92,.1));
  border-color:rgba(232,201,135,.85);}
.cta a.btn:active{transform:translateY(1px);filter:brightness(.95);}
@media (prefers-reduced-transparency: reduce){
  .cta a.btn{background:linear-gradient(180deg,rgba(232,201,135,.42),rgba(201,164,92,.28));
    backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@media (max-width:540px){
  .cta .ctabtns{flex-direction:column;align-items:stretch;gap:10px;}
  .cta a.btn{width:100%;padding:14px 20px;}
}
nav.pn{display:flex;justify-content:space-between;gap:12px;margin-top:40px;font-size:14px;}
nav.pn a{flex:1;border:1px solid rgba(201,164,92,.3);border-radius:0;clip-path:var(--notch-sm);padding:13px 16px;color:var(--text);}
nav.pn a:hover{border-color:rgba(201,164,92,.6);text-decoration:none;}
nav.pn .next{text-align:right;}
nav.pn small{display:block;color:var(--dim);font-size:11.5px;letter-spacing:.15em;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px;}
.grid a{font-size:13px;border:1px solid rgba(255,255,255,.12);border-radius:4px;padding:8px 10px;color:var(--dim);}
.grid a:hover{color:var(--goldb);border-color:rgba(201,164,92,.5);text-decoration:none;}
.grid a.cur{color:var(--goldb);border-color:rgba(201,164,92,.7);}
footer{margin-top:60px;text-align:center;color:rgba(185,176,200,.45);font-size:12px;letter-spacing:.15em;line-height:2;}
footer .ftag{font-size:15px;}
footer .brandline{font-family:'GFS Didot',serif;font-style:italic;font-size:12px;letter-spacing:.1em;color:rgba(239,233,220,.5);}
footer .flinks{margin-top:30px;font-size:12px;}
footer .flinks a{font-size:12px;}
/* 目錄頁 */
.dirgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:26px;}
.dirgrid a{border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:12px;text-align:center;color:var(--text);}
.dirgrid a:hover{border-color:rgba(201,164,92,.6);text-decoration:none;}
.dirgrid img{width:100%;border-radius:4px;border:1px solid rgba(201,164,92,.4);display:block;margin-bottom:8px;}
.dirgrid .n{font-size:14.5px;}.dirgrid .e{font-size:11px;color:var(--dim);letter-spacing:.08em;}
.lede{color:var(--dim);font-size:15px;max-width:560px;}
/* ===== Mobile enhancements ===== */
a,.btn,nav.pn a,.backlink,.cta a.btn,.grid a,.dirgrid a{-webkit-tap-highlight-color:transparent;}
.cta a.btn:active,.backlink:active{filter:brightness(.92);transform:scale(.98);}
@media(max-width:540px){
  .wrap{padding:24px 18px calc(60px + env(safe-area-inset-bottom));}
  .decoframe{top:calc(10px + env(safe-area-inset-top));right:10px;bottom:10px;left:10px;inset:auto;}
  .cardhead{gap:18px;}
  .cardimg{flex-basis:128px;}
  .cardimg img{width:128px;}
  body{font-size:15px;}
  p{margin-bottom:14px;}
  nav.pn{flex-direction:column;gap:10px;}
  nav.pn a{padding:14px 18px;min-height:44px;}
  nav.pn .next{text-align:left;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  .dirgrid{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media(max-width:360px){
  .cardimg{flex-basis:104px;}
  .cardimg img{width:104px;}
}
