/* 她序之外 BEYONDÉ — 視覺定版：暖象牙白／深橄欖綠／深苔綠／霧金；玫瑰與裸粉僅作色點 */
:root{
  --ivory:#FAF6EF; --paper:#FFFDF8; --cream:#F3EEE3;
  --olive:#4C5B43; --olive-l:#5C6E50; --moss:#2F3D2C; --ink:#2B2B26; --soft:#55554C;
  --gold:#B3924C; --champ:#C9AE7E; --gold-d:#8A6D35; --line:#E0D6BC;
  --rose:#B98A8E; --lilac:#A79BB5;
  --serif:'Noto Serif TC','Songti TC',serif; --sans:'Noto Sans TC','PingFang TC',sans-serif;
  --en:'Cormorant Garamond','Noto Serif Display',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--olive);text-decoration:none}
a:hover{color:var(--gold-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);color:var(--moss);line-height:1.5;margin:0}
.en{font-family:var(--en);letter-spacing:.28em;text-transform:uppercase}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--moss)}
.brand-tx{display:flex;flex-direction:column;line-height:1.25}
.brand-cn{font-family:var(--serif);font-size:21px;letter-spacing:.32em;font-weight:600}
.brand-en{font-family:var(--en);font-size:13px;letter-spacing:.42em;color:var(--gold-d)}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{padding:8px 11px;font-size:14.5px;color:var(--ink);white-space:nowrap}
.main-nav a:hover{color:var(--gold-d)}
.status-pill{font-size:12px;color:var(--gold-d);border:1px solid var(--champ);border-radius:999px;padding:3px 12px;white-space:nowrap;background:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;font-size:19px;padding:4px 12px;color:var(--moss);cursor:pointer}

/* hero */
.hero{padding:74px 0 60px;text-align:center;background:linear-gradient(180deg,var(--paper),var(--ivory))}
.hero-emblem{width:118px;height:118px}
.hero-lock{margin-top:22px}
.hero-cn{font-size:clamp(40px,7.2vw,64px);letter-spacing:.3em;font-weight:600;text-indent:.3em}
.hero-en{font-family:var(--en);font-size:clamp(17px,3vw,25px);letter-spacing:.5em;color:var(--gold-d);margin-top:14px;text-indent:.5em}
.hero-claim{font-family:var(--serif);font-size:clamp(17px,2.6vw,21px);color:var(--soft);margin-top:16px}
.hero-rule{width:72px;border-top:1px solid var(--gold);margin:26px auto 0}
.hero-sub{max-width:640px;margin:20px auto 0;color:var(--soft);font-size:15.5px}
.hero-cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 28px;border-radius:999px;font-size:15px;border:1px solid var(--olive);background:var(--olive);color:#FBF8F0;min-height:48px}
.btn:hover{background:var(--moss);color:#fff}
.btn.ghost{background:transparent;color:var(--olive)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-d)}

/* manifesto */
.manifesto{background:var(--moss);color:#EFE9DA;text-align:center;padding:70px 0}
.manifesto .m-en{font-family:var(--en);letter-spacing:.4em;font-size:13px;color:var(--champ)}
.manifesto p{font-family:var(--serif);font-size:clamp(20px,3.4vw,27px);line-height:2.1;margin:22px auto 0;max-width:760px}
.manifesto .m-sign{margin-top:20px;font-size:13px;color:#C9C2AE;letter-spacing:.2em}

/* sections */
section.block{padding:64px 0}
section.block.alt{background:var(--paper)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 38px}
.sec-no{font-family:var(--en);color:var(--gold);font-size:15px;letter-spacing:.3em}
.sec-en{font-family:var(--en);letter-spacing:.34em;font-size:12.5px;color:var(--gold-d);margin-top:2px}
.sec-head h2{font-size:clamp(25px,4vw,33px);margin-top:10px;letter-spacing:.08em}
.sec-lead{color:var(--soft);margin-top:12px;font-size:15.5px}

/* facets */
.facets{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.facet{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px 26px}
.alt .facet{background:var(--ivory)}
.facet .f-no{font-family:var(--en);color:var(--gold);letter-spacing:.25em;font-size:13px}
.facet h3{font-size:20px;margin:8px 0 10px}
.facet p{color:var(--soft);font-size:14.5px;margin:0 0 10px}
.facet .f-way{color:var(--olive);font-size:14px;border-top:1px dashed var(--line);padding-top:10px}

/* lines */
.lines-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.line-card{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--paper)}
.line-card .l-en{font-family:var(--en);letter-spacing:.3em;color:var(--gold-d);font-size:14px}
.line-card h3{font-size:19px;margin:6px 0 8px}
.line-card p{color:var(--soft);font-size:14.5px;margin:0 0 14px}
.badge{display:inline-block;font-size:12px;padding:3px 12px;border-radius:999px;border:1px solid var(--champ);color:var(--gold-d);background:#FFF9EC}
.badge.live{border-color:var(--olive-l);color:var(--olive);background:#F0F3EA}

/* articles */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.art-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column}
.art-card .a-cat{font-size:12.5px;color:var(--gold-d);letter-spacing:.18em}
.art-card h3{font-size:19.5px;margin:8px 0 10px;line-height:1.6}
.art-card h3 a{color:var(--moss)}
.art-card p{color:var(--soft);font-size:14.5px;flex:1}
.art-card .a-more{font-size:14px;margin-top:12px}
.article-body{max-width:760px;margin:0 auto;padding:52px 22px 10px}
.article-body h1{font-size:clamp(27px,4.6vw,38px);line-height:1.55}
.article-meta{color:var(--soft);font-size:13.5px;margin:14px 0 6px}
.article-body .a-text{font-size:16.5px;line-height:2.05;font-family:var(--serif)}
.article-body .a-text p{margin:0 0 1.4em}
.source-box,.practice-box{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--paper);border-radius:10px;padding:18px 22px;margin:26px 0;font-size:14.5px}
.practice-box{border-left-color:var(--olive)}
.source-box h4,.practice-box h4{margin:0 0 6px;font-family:var(--serif);color:var(--moss);font-size:16px}
.care-note{border:1px solid #D9C4C6;background:#FBF3F3;border-radius:10px;padding:16px 22px;font-size:14px;margin:26px 0}

/* podcast */
.units{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.unit{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px}
.unit .u-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.dot-rose{background:var(--rose)} .dot-lilac{background:var(--lilac)}
.unit h3{font-size:19px;display:inline}
.unit .u-en{font-family:var(--en);letter-spacing:.14em;color:var(--soft);font-size:14px;display:block;margin-top:2px}
.unit p{color:var(--soft);font-size:14.5px;margin:10px 0 0}
.seg-table,.ep-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg-table th,.seg-table td,.ep-table th,.ep-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px;vertical-align:top}
.seg-table th,.ep-table th{font-family:var(--serif);color:var(--moss);background:var(--cream);white-space:nowrap}
.ep-table tr:last-child td,.seg-table tr:last-child td{border-bottom:none}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(90deg,var(--paper) 30%,rgba(255,253,248,0)) 0 0/40px 100% no-repeat,linear-gradient(-90deg,var(--paper) 30%,rgba(255,253,248,0)) 100% 0/40px 100% no-repeat,radial-gradient(farthest-side at 0 50%,rgba(76,91,67,.18),rgba(76,91,67,0)) 0 0/14px 100% no-repeat,radial-gradient(farthest-side at 100% 50%,rgba(76,91,67,.18),rgba(76,91,67,0)) 100% 0/14px 100% no-repeat;background-attachment:local,local,scroll,scroll}
.tbl-scroll>table{width:max-content;min-width:100%}
.seg-table td:nth-child(2){min-width:230px}
.ep-table td:nth-child(2){min-width:104px}
.ep-table td:nth-child(3){min-width:168px}
.ep-table td:nth-child(4){min-width:230px}
.ep-table td:nth-child(5){min-width:76px}

/* daily */
.months{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.month-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 26px}
.month-card .m-q{font-size:12px;color:var(--gold-d);letter-spacing:.14em}
.month-card h3{font-size:19px;margin:6px 0 6px}
.month-card .m-days{font-family:var(--en);letter-spacing:.14em;color:var(--soft);font-size:13px}
.month-card p{color:var(--soft);font-size:14.5px;margin:8px 0 0}
.day-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.day-grid a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--olive);background:var(--ivory)}
.day-grid a:hover{border-color:var(--gold);color:var(--gold-d)}
.day-grid a.pub{background:var(--olive);color:#fff;border-color:var(--olive)}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pillar{border:1px solid var(--line);border-radius:12px;padding:20px 24px;background:var(--paper)}
.pillar h3{font-size:17px}
.pillar .p-en{font-size:12.5px;color:var(--gold-d);letter-spacing:.12em}
.pillar p{color:var(--soft);font-size:14px;margin:6px 0 0}
.day-hero{text-align:center;padding:56px 0 8px}
.day-hero .d-no{font-family:var(--en);font-size:15px;letter-spacing:.34em;color:var(--gold-d)}
.day-hero h1{font-size:clamp(26px,4.4vw,36px);margin-top:10px}
.day-steps{max-width:760px;margin:34px auto 0}
.day-step{border-top:1px solid var(--line);padding:22px 4px}
.day-step h3{font-size:18px}
.day-step h3 .s-en{font-family:var(--en);font-size:12px;letter-spacing:.22em;color:var(--gold-d);margin-left:10px}
.day-step p{color:var(--soft);margin:8px 0 0}
.day-step .empty{color:#9A9A8E;font-size:14px}
.day-nav{display:flex;justify-content:space-between;max-width:760px;margin:30px auto 0;padding:0 4px}

/* subscribe */
.subscribe{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.sub-in{max-width:640px;text-align:center}
.sub-in h3{font-size:24px}
.sub-in p{color:var(--soft);font-size:15px}
.sub-form{display:flex;gap:10px;margin-top:20px}
.sub-form input{flex:1;padding:13px 18px;border:1px solid var(--champ);border-radius:999px;font-size:16px;background:#fff;min-height:50px}
.sub-form button{padding:13px 26px;border-radius:999px;border:1px solid var(--olive);background:var(--olive);color:#fff;font-size:15px;cursor:pointer;min-height:50px;white-space:nowrap}
.sub-fine{font-size:12.5px;color:#8B8B7E;margin-top:14px}
.flash{max-width:760px;margin:26px auto 0;padding:14px 20px;border-radius:10px;background:#EFF3E8;border:1px solid var(--olive-l);color:var(--moss);text-align:center;font-size:15px}
.flash.err{background:#FBF0F0;border-color:#D9A5A5;color:#7C3A3A}

/* generic pages */
.page-head{text-align:center;padding:56px 0 6px}
.page-head .ph-en{font-family:var(--en);letter-spacing:.34em;color:var(--gold-d);font-size:13px}
.page-head h1{font-size:clamp(28px,4.6vw,38px);margin-top:10px}
.page-head p{color:var(--soft);max-width:680px;margin:14px auto 0}
.prose{max-width:760px;margin:0 auto;padding:26px 22px 10px;font-size:16px;line-height:2}
.prose h2{font-size:23px;margin:34px 0 10px}
.prose p{margin:0 0 1.2em;color:#3A3A33}
.form-card{max-width:620px;margin:30px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px}
.form-card label{display:block;font-size:14px;color:var(--moss);margin:16px 0 6px;font-weight:500}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:12px 14px;border:1px solid var(--champ);border-radius:10px;font-size:16px;background:#fff;font-family:var(--sans)}
.form-card textarea{min-height:150px}
.form-card button{margin-top:22px;width:100%;padding:14px;border-radius:999px;border:1px solid var(--olive);background:var(--olive);color:#fff;font-size:16px;cursor:pointer;min-height:52px}

/* footer */
.site-footer{background:var(--moss);color:#DAD4C2;margin-top:0;padding:56px 0 40px;text-align:center}
.foot-brand img{filter:none}
.foot-slogan{font-family:var(--en);letter-spacing:.42em;color:var(--champ);font-size:13px;margin:18px 0 4px}
.foot-claim{font-family:var(--serif);color:#EFE9DA;font-size:16px;margin:0}
.foot-nav{margin:24px 0 6px;display:flex;gap:6px 20px;justify-content:center;flex-wrap:wrap}
.foot-nav a{color:#DAD4C2;font-size:14px}
.foot-nav a:hover{color:var(--champ)}
.foot-note{font-size:12.5px;color:#A9A48F;max-width:720px;margin:12px auto 0;line-height:1.8}
.foot-copy{font-size:12.5px;color:#8E8971;margin-top:20px;letter-spacing:.14em}

/* admin */
.admin-wrap{max-width:960px;margin:0 auto;padding:34px 22px 70px}
.admin-wrap h1{font-size:26px;margin-bottom:6px}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}
.admin-nav a{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 16px;font-size:14px}
table.adm{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
table.adm th,table.adm td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;text-align:left;vertical-align:top}
table.adm th{background:var(--cream);font-family:var(--serif);color:var(--moss);white-space:nowrap}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin:8px 0}
.chk-grid label{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink);margin:0;font-weight:400}
.chk-grid input{width:auto;margin-top:5px}
.gate-note{font-size:13.5px;color:#7C5A1E;background:#FFF7E0;border:1px solid #E4CE8F;border-radius:8px;padding:10px 14px;margin:12px 0}

/* responsive */
@media (max-width:1020px){
  .main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;padding:12px 22px 18px;border-bottom:1px solid var(--line)}
  body.nav-open .main-nav{display:flex}
  .main-nav a{padding:11px 4px;border-bottom:1px dashed var(--line);font-size:16px}
  .nav-toggle{display:block}
  .status-pill{display:none}
}
@media (max-width:820px){
  .hero-en{letter-spacing:.3em;text-indent:.3em;font-size:15.5px}
  .hero-cn{letter-spacing:.22em;text-indent:.22em}
  .facets,.lines-grid,.art-grid,.months{grid-template-columns:1fr}
  .units,.pillars{grid-template-columns:1fr}
  .sub-form{flex-direction:column}
  .hero{padding:52px 0 44px}
  section.block{padding:46px 0}
  .chk-grid{grid-template-columns:1fr}
  .brand-cn{font-size:19px}
}
