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

:root { --ink:#14251d; --paper:#f5f2e9; --cream:#e8e1cf; --lime:#dfff45; --orange:#ff6339; --white:#fffdf7; --muted:#68736c; --line:rgba(20,37,29,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans TC",sans-serif; line-height:1.7; }
a { color:inherit; }
img { display:block; max-width:100%; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font:700 20px/1 "Space Grotesk",sans-serif; letter-spacing:.08em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--lime); font-size:18px; }
.header-note { font-size:13px; letter-spacing:.12em; color:var(--muted); }
.home-hero { min-height:660px; display:grid; grid-template-columns:1.1fr .9fr; border-bottom:1px solid var(--line); }
.hero-copy { padding:clamp(72px,9vw,135px) clamp(28px,7vw,110px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eyebrow { margin:0 0 20px; color:#41604f; font:700 12px/1.3 "Space Grotesk",sans-serif; letter-spacing:.18em; }
.hero-copy h1 { margin:0; font-size:clamp(48px,6.4vw,96px); line-height:1.08; letter-spacing:-.055em; font-weight:900; }
.hero-copy h1 em { color:var(--orange); font-style:normal; }
.hero-copy>p:not(.eyebrow) { max-width:590px; margin:30px 0; font-size:18px; color:#4d5b53; }
.hero-action { display:flex; align-items:center; gap:28px; padding:14px 20px; border:1px solid var(--ink); text-decoration:none; font-weight:700; transition:.2s ease; }
.hero-action:hover { background:var(--ink); color:var(--lime); transform:translateY(-2px); }
.hero-action span { font-size:22px; }
.hero-art { position:relative; overflow:hidden; min-height:520px; background:var(--ink); color:var(--paper); display:grid; place-items:center; }
.hero-art:after { content:""; position:absolute; inset:7%; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.hero-art>p { z-index:2; margin:0; font:700 clamp(54px,7vw,110px)/.79 "Space Grotesk",sans-serif; letter-spacing:-.08em; color:var(--lime); transform:rotate(-8deg); }
.score { position:absolute; z-index:3; font:700 11px "Space Grotesk"; letter-spacing:.18em; }
.score-one { top:11%; left:11%; }.score-two { right:10%; bottom:11%; }
.ball-orbit { position:absolute; z-index:1; width:72%; aspect-ratio:1; border:1px dashed rgba(223,255,69,.4); border-radius:50%; animation:spin 24s linear infinite; }
.ball { width:38px; height:38px; margin:11%; border-radius:50%; background:var(--orange); box-shadow:0 0 0 10px rgba(255,99,57,.12); }
@keyframes spin { to { transform:rotate(360deg); } }
.ticker { overflow:hidden; background:var(--lime); border-bottom:1px solid var(--ink); }
.ticker>div { width:max-content; display:flex; gap:35px; align-items:center; padding:12px 0; font:700 13px "Space Grotesk",sans-serif; letter-spacing:.12em; animation:marquee 30s linear infinite; }
.ticker i { color:var(--orange); font-style:normal; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-25%)} }
.latest { padding:clamp(80px,10vw,140px) clamp(24px,6vw,92px); }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:46px; }
.section-heading h2 { margin:0; font-size:clamp(36px,4vw,62px); letter-spacing:-.05em; }
.section-heading>p { max-width:330px; color:var(--muted); }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,48px) 24px; }
.post-card { background:var(--white); border:1px solid var(--line); transition:transform .2s ease,box-shadow .2s ease; }
.post-card:hover { transform:translateY(-5px); box-shadow:10px 10px 0 var(--cream); }
.post-image-link { display:block; aspect-ratio:1.72; overflow:hidden; background:var(--ink); }
.post-image-link img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover img { transform:scale(1.025); }
.post-card-body { padding:26px; }
.post-meta { margin:0 0 13px!important; color:#5e7265!important; font:700 11px "Space Grotesk",sans-serif; letter-spacing:.1em; }
.post-card h3 { margin:0 0 14px; font-size:23px; line-height:1.4; letter-spacing:-.025em; }
.post-card h3 a { text-decoration:none; }
.post-card-body>p { color:var(--muted); font-size:14px; }
.read-more { display:inline-block; margin-top:12px; text-decoration:none; border-bottom:1px solid; font-weight:700; font-size:13px; }
.loading,.empty-state { grid-column:1/-1; min-height:220px; display:grid; place-items:center; border:1px dashed var(--line); color:var(--muted); }
.empty-state strong,.empty-state span { display:block; text-align:center; }.empty-state strong{font-size:24px;color:var(--ink);align-self:end}.empty-state span{align-self:start}
.manifesto { padding:120px 24px; text-align:center; background:var(--cream); border-block:1px solid var(--line); }
.manifesto blockquote { max-width:900px; margin:0 auto 28px; font-weight:900; font-size:clamp(34px,5vw,72px); line-height:1.35; letter-spacing:-.045em; }
.manifesto>p:last-child { max-width:620px; margin:auto; color:var(--muted); }
footer { padding:65px clamp(24px,6vw,92px); background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1fr 1fr auto; gap:24px; align-items:end; }
.footer-brand .brand-mark { background:var(--lime); color:var(--ink); } footer p,footer small{margin:0;color:#aeb9b2} footer small{text-align:right}
.preview-banner { padding:10px 20px; background:var(--orange); color:white; text-align:center; font-size:13px; font-weight:700; }
.article-shell { max-width:900px; margin:auto; padding:clamp(64px,9vw,120px) 24px; }
.article-shell h1 { margin:0; font-size:clamp(40px,6vw,72px); line-height:1.2; letter-spacing:-.05em; }
.article-lede { margin:25px 0; font-size:20px; color:#526158; }
.article-meta { display:flex; gap:18px; margin:25px 0 42px; font-size:13px; color:var(--muted); }
.article-meta span+span:before { content:"•"; margin-right:18px; }
.hero-image { width:100%; aspect-ratio:1.9; object-fit:cover; border:1px solid var(--line); }
.quick-read { margin:44px 0; padding:28px 32px; background:var(--lime); border-left:5px solid var(--ink); }
.quick-read span { font:700 12px "Space Grotesk"; letter-spacing:.15em; }.quick-read p{margin:8px 0 0;font-size:18px;font-weight:700}
.article-body { font-size:18px; line-height:2; }.article-body h2{margin:2.1em 0 .7em;font-size:32px;line-height:1.4}.article-body h3{margin-top:2em}.article-body blockquote{margin:2em 0;padding-left:24px;border-left:3px solid var(--orange);font-size:21px;font-weight:700}.article-body code{background:var(--cream);padding:2px 5px}
.video { position:relative; margin:52px 0; padding-bottom:56.25%; height:0; overflow:hidden; background:#000; }.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sources { margin-top:55px; padding-top:28px; border-top:1px solid var(--line); }.sources h2{font-size:20px}.sources a{word-break:break-all;color:#315e45}
@media (max-width:900px){.home-hero{grid-template-columns:1fr}.hero-art{min-height:460px}.post-grid{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start}.section-heading>p{display:none}footer{grid-template-columns:1fr 1fr}footer p{grid-column:1/-1;grid-row:2} }
@media (max-width:600px){.site-header{height:66px}.header-note{display:none}.home-hero{min-height:auto}.hero-copy{padding:70px 24px}.hero-copy h1{font-size:49px}.hero-copy>p:not(.eyebrow){font-size:16px}.hero-art{min-height:380px}.post-grid{grid-template-columns:1fr}.latest{padding-inline:18px}.post-card-body{padding:22px}.manifesto{padding:85px 20px}footer{grid-template-columns:1fr}footer small{text-align:left}.article-shell{padding-top:64px}.article-shell h1{font-size:41px}.article-lede{font-size:18px}.article-body{font-size:17px}.quick-read{padding:24px}.ticker>div{animation:none}.ball-orbit{width:90%}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}