@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;700;900&family=Noto+Sans+TC:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{background:#FAFAF7;color:#0D0D0D;font-family:'Noto Sans TC',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:#C9A84C}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-1{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .05s both}
.fade-2{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .2s both}
.fade-3{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .35s both}
.fade-4{animation:fadeUp .6s cubic-bezier(.16,1,.3,1) .5s both}

/* ── Masthead ── */
.masthead{border-top:4px solid #0D0D0D;border-bottom:1px solid #0D0D0D;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;min-height:44px}
.masthead-edition{display:flex;align-items:center;padding:0 24px;border-right:1px solid #B8B8B8;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#666;white-space:nowrap}
.masthead-brand{display:flex;align-items:center;padding:0 32px;font-family:'Noto Serif TC',serif;font-size:17px;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.masthead-nav{display:flex;align-items:stretch;justify-content:flex-end;border-left:1px solid #B8B8B8}
.masthead-nav a{display:flex;align-items:center;padding:0 20px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#666;border-left:1px solid #B8B8B8;transition:color .15s,background .15s}
.masthead-nav a:first-child{border-left:none}
.masthead-nav a:hover,.masthead-nav a.active{background:#0D0D0D;color:#C9A84C}

/* ── Concepts strip (top nav on concept pages) ── */
.concepts-strip{display:grid;grid-template-columns:repeat(13,1fr);background:#B8B8B8;gap:1px;border-bottom:1px solid #B8B8B8}
.concept-chip{background:#FAFAF7;padding:12px 8px;text-align:center;position:relative;overflow:hidden;transition:background .15s;display:block}
.concept-chip.current{background:#0D0D0D}
.concept-chip::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#C9A84C;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.concept-chip:hover:not(.current)::after{transform:scaleX(1)}
.chip-num{font-family:'JetBrains Mono',monospace;font-size:8px;color:#B8B8B8;margin-bottom:5px;letter-spacing:.12em}
.current .chip-num{color:#C9A84C}
.chip-cn{font-family:'Noto Serif TC',serif;font-size:11px;font-weight:700;color:#0D0D0D;line-height:1.2}
.current .chip-cn{color:#FAFAF7}

/* ── Breadcrumb ── */
.breadcrumb{padding:12px 64px;border-bottom:1px solid #B8B8B8;display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#B8B8B8}
.breadcrumb a:hover{color:#C9A84C}
.breadcrumb-sep{color:#D4D0CB}
.breadcrumb-current{color:#0D0D0D}

/* ── Concept article layout ── */
.article-wrap{display:grid;grid-template-columns:1fr 260px;border-bottom:1px solid #0D0D0D}
.article-main{padding:56px 64px 80px;border-right:1px solid #B8B8B8}
.article-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C;margin-bottom:20px}
.article-title{font-family:'Noto Serif TC',serif;font-weight:900;font-size:clamp(48px,5.5vw,76px);line-height:.93;letter-spacing:-.02em;color:#0D0D0D;margin-bottom:28px}
.article-standfirst{font-family:'Noto Serif TC',serif;font-size:18px;font-weight:400;line-height:1.75;color:#333;max-width:58ch;border-top:3px solid #0D0D0D;padding-top:20px;margin-bottom:48px}
.article-body{max-width:64ch}
.article-body p{font-size:16px;line-height:2;color:#1A1A1A;margin-bottom:28px}
.article-body p:last-child{margin-bottom:0}
.article-body h2{font-family:'Noto Serif TC',serif;font-weight:700;font-size:22px;color:#0D0D0D;margin:44px 0 18px;padding-top:28px;border-top:1px solid #B8B8B8}
.article-body h3{font-family:'Noto Serif TC',serif;font-weight:700;font-size:18px;color:#0D0D0D;margin:32px 0 14px}
.article-body ul,.article-body ol{margin:.7em 0 1.3em 1.4em}
.article-body li{font-size:16px;line-height:1.9;margin-bottom:.4em}
.article-body strong{font-weight:700;color:#0D0D0D}
.article-body hr{border:none;border-top:1px solid #B8B8B8;margin:2em 0}
.article-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:0.9rem;overflow-x:auto;display:block}
.article-body th{background:#F3F0EB;color:#0D0D0D;font-weight:700;padding:9px 12px;text-align:left;border:1px solid #E0D9CE}
.article-body td{padding:8px 12px;border:1px solid #E0D9CE}
.article-body tr:nth-child(even){background:#FAF8F5}
blockquote,.pull-quote{margin:40px 0;padding:28px 32px;background:#F3F0EB}
blockquote p,.pull-quote p{font-family:'Noto Serif TC',serif;font-size:18px;font-style:italic;line-height:1.75;color:#1A1A1A;margin-bottom:12px!important}
blockquote p:last-child,.pull-quote p:last-child{margin-bottom:0!important}
blockquote cite,.pull-quote cite{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#B8B8B8;font-style:normal;display:block;margin-top:8px}
/* Source attribution in blockquote (the — year line) */
blockquote p:last-of-type:not(:first-of-type){font-style:normal;font-size:10px;font-family:'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#B8B8B8;margin-bottom:0!important}

/* ── Sidebar ── */
.article-sidebar{padding:56px 28px 80px}
.sidebar-block{margin-bottom:36px}
.sidebar-rule{border-top:2px solid #0D0D0D;padding-top:12px;margin-bottom:16px}
.sidebar-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:#B8B8B8}
.meta-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid #EBEBEB}
.meta-key{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#B8B8B8}
.meta-val{font-family:'Noto Serif TC',serif;font-size:14px;font-weight:700;color:#0D0D0D}
.related-list{list-style:none}
.related-item{border-bottom:1px solid #EBEBEB}
.related-item a{display:flex;align-items:baseline;gap:10px;padding:11px 0;transition:padding-left .15s}
.related-item a:hover{padding-left:6px}
.related-num{font-family:'JetBrains Mono',monospace;font-size:9px;color:#B8B8B8;flex-shrink:0;letter-spacing:.1em}
.related-cn{font-family:'Noto Serif TC',serif;font-size:15px;font-weight:700;color:#0D0D0D;flex:1;transition:color .15s}
.related-item a:hover .related-cn{color:#C9A84C}

/* ── Section separator ── */
.section-sep{border-top:3px solid #0D0D0D;padding:14px 64px 0;display:flex;align-items:center;gap:20px}
.section-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C;white-space:nowrap}
.section-rule-line{flex:1;height:1px;background:#B8B8B8}

/* ── Letters strip ── */
.letters-strip{border-top:1px solid #B8B8B8;border-bottom:1px solid #0D0D0D;display:flex;overflow-x:auto;scrollbar-width:none}
.letters-strip::-webkit-scrollbar{display:none}
.letter-chip{display:flex;align-items:center;padding:13px 22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#666;border-right:1px solid #B8B8B8;flex-shrink:0;transition:background .15s,color .15s;white-space:nowrap}
.letter-chip:hover{background:#0D0D0D;color:#C9A84C}

/* ── Homepage hero ── */
.hero{display:grid;grid-template-columns:5fr 6fr;border-bottom:1px solid #0D0D0D;min-height:420px}
.hero-left{padding:56px 48px 56px 64px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #0D0D0D}
.hero-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C;margin-bottom:24px}
.hero-title{font-family:'Noto Serif TC',serif;font-weight:900;font-size:clamp(56px,7vw,88px);line-height:.94;letter-spacing:-.02em;color:#0D0D0D;margin-bottom:28px}
.hero-deck{font-size:15px;line-height:1.85;color:#666;max-width:52ch;margin-bottom:32px}
.hero-cta{display:flex;align-items:center;gap:28px}
.btn-primary{display:inline-block;background:#0D0D0D;color:#FAFAF7;padding:11px 24px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:background .15s,color .15s}
.btn-primary:hover{background:#C9A84C;color:#0D0D0D}
.btn-text{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#666;border-bottom:1px solid #B8B8B8;padding-bottom:2px;transition:color .15s}
.btn-text:hover{color:#0D0D0D;border-color:#0D0D0D}
.hero-right{padding:40px 48px 40px 40px;display:flex;flex-direction:column}
#compound-chart{flex:1}

/* ── Concept grid (homepage) ── */
.concepts-wrap{padding:0 64px}
.concepts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));background:#B8B8B8;gap:1px;border:1px solid #B8B8B8;margin-top:24px}
.concept-col{background:#FAFAF7;padding:20px 18px 24px;cursor:pointer;position:relative;overflow:hidden;transition:background .15s;display:block}
.concept-col:hover{background:#F3EFE6}
.concept-col::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#C9A84C;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.concept-col:hover::after{transform:scaleX(1)}
.concept-idx{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#B8B8B8;margin-bottom:14px}
.concept-cn{font-family:'Noto Serif TC',serif;font-size:19px;font-weight:700;color:#0D0D0D;line-height:1.2;margin-bottom:5px}
.concept-en{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#B8B8B8}

/* ── Letter list ── */
.letter-groups{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:32px 64px}
@media(max-width:640px){.letter-groups{grid-template-columns:1fr}}
.letter-list-sec h2{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid #0D0D0D}
.letter-list{list-style:none}
.letter-list li{border-bottom:1px solid #EBEBEB}
.letter-list a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:0.9rem;transition:color .15s}
.letter-list a:hover{color:#C9A84C}
.yr-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:#B8B8B8;min-width:48px;text-align:right}

/* ── Page nav (prev/next) ── */
.page-nav{display:flex;justify-content:space-between;margin:40px 64px;padding:18px 0;border-top:1px solid #B8B8B8;border-bottom:1px solid #B8B8B8;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.page-nav a{color:#666;transition:color .15s}
.page-nav a:hover{color:#0D0D0D}
.page-nav .spacer{flex:1}

/* ── Theme / insights ── */
.theme-list{list-style:none;border-top:1px solid #B8B8B8}
.theme-list li{border-bottom:1px solid #B8B8B8}
.theme-list a{display:flex;align-items:flex-start;gap:20px;padding:24px 64px;transition:background .15s}
.theme-list a:hover{background:#F3EFE6}
.tl-label{font-family:'Noto Serif TC',serif;font-size:20px;font-weight:700;color:#0D0D0D;margin-bottom:6px;transition:color .15s}
.theme-list a:hover .tl-label{color:#C9A84C}
.tl-desc{font-size:14px;color:#666;line-height:1.6}

/* ── About page ── */
.about-wrap{max-width:760px;margin:0 auto;padding:64px 64px 120px}
.about-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C;margin-bottom:20px}
.about-body p{font-size:17px;line-height:2.05;color:#1A1A1A;margin-bottom:32px;max-width:60ch}
.about-body hr{border:none;border-top:1px solid #E0DDD8;margin:48px 0}
.about-section-rule{border-top:3px solid #0D0D0D;padding-top:20px;margin-bottom:32px}
.about-section-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.44em;text-transform:uppercase;color:#C9A84C}
.about-pull-quote{margin:40px 0 32px;padding:28px 36px;background:#F3F0EB;border-left:3px solid #C9A84C}
.about-pull-quote .en{font-family:'Noto Serif TC',serif;font-size:15px;font-style:italic;color:#666;line-height:1.75;margin-bottom:14px;display:block}
.about-pull-quote .zh{font-family:'Noto Serif TC',serif;font-size:17px;font-style:italic;line-height:1.9;color:#1A1A1A;margin-bottom:10px;display:block}
.about-pull-quote cite{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#B8B8B8;font-style:normal;display:block}
.inside-grid{display:grid;grid-template-columns:1fr 1fr;background:#B8B8B8;gap:1px;border:1px solid #B8B8B8;margin:32px 0}
.inside-cell{background:#FAFAF7;padding:24px 28px}
.inside-num{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;color:#C9A84C;margin-bottom:10px}
.inside-title{font-family:'Noto Serif TC',serif;font-weight:700;font-size:17px;color:#0D0D0D;margin-bottom:6px}
.inside-desc{font-family:'Noto Sans TC',sans-serif;font-size:13px;line-height:1.85;color:#666}
.social-strip{border-top:3px solid #0D0D0D;padding-top:20px;margin-top:64px;display:flex;align-items:flex-start;gap:48px}
.social-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:#B8B8B8;margin-bottom:14px}
.social-links{display:flex;flex-direction:column;gap:8px}
.social-link{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;color:#0D0D0D;border-bottom:1px solid transparent;padding-bottom:1px;transition:color .15s,border-color .15s}
.social-link:hover{color:#C9A84C;border-color:#C9A84C}
.social-platform{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:#B8B8B8;display:inline-block;width:80px}
.about-side{flex:1;max-width:44ch}
.about-side p{font-size:14px;line-height:1.9;color:#666}
@media(max-width:640px){.about-wrap{padding:40px 20px 80px}.inside-grid{grid-template-columns:1fr}.social-strip{flex-direction:column;gap:28px}}

/* ── Site footer ── */
.site-footer{border-top:4px solid #0D0D0D;padding:20px 64px;display:flex;justify-content:space-between;align-items:center}
.footer-brand{font-family:'Noto Serif TC',serif;font-size:14px;font-weight:700;letter-spacing:.08em}
.footer-meta{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#B8B8B8}

@media(max-width:680px){
  html{font-size:15px}
  .concepts-strip{grid-template-columns:repeat(7,1fr)}
  .hero{grid-template-columns:1fr}
  .hero-right{display:none}
  .article-wrap{grid-template-columns:1fr}
  .article-sidebar{display:none}
  .breadcrumb,.article-main,.section-sep,.concepts-wrap,.page-nav,.letter-groups,.theme-list a,.site-footer{padding-left:20px;padding-right:20px}
  .letter-groups{padding:20px}
}