/* Defy Journal — brand v2.0: warm white, black, red as punctuation, Playfair + DM Sans, square corners */
:root{--red:#cc0000;--red-dark:#990000;--black:#0a0a0a;--charcoal:#2d2d2d;--grey:#777;--border:#e8e6e1;--warm:#f9f9f7;--cream:#f3f1ec;--white:#fff;--maxw:1240px}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'DM Sans','Noto Sans SC',system-ui,sans-serif;color:var(--charcoal);background:var(--warm);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
html[lang^="zh"] body{font-family:'DM Sans','Noto Sans SC',system-ui,sans-serif;line-height:1.85}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.sq{display:inline-block;width:.27em;height:.27em;background:var(--red);margin-left:.08em;vertical-align:baseline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;z-index:300}.skip:focus{left:0}
.eyebrow{font-size:11px;color:var(--red);font-weight:700;letter-spacing:.4em;text-transform:uppercase}
html[lang^="zh"] .eyebrow{letter-spacing:.2em}
/* header */
.dh{position:sticky;top:0;z-index:100;background:rgba(249,249,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.dh-in{display:flex;align-items:center;gap:28px;height:68px}
.dh-logo img{width:86px;height:auto}
.dh-nav{display:flex;gap:26px;margin-left:12px}
.dh-nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--charcoal);letter-spacing:.02em}
.dh-nav a:hover,.dh-nav a.on{color:var(--black);box-shadow:inset 0 -2px 0 var(--red)}
.dh-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1px solid var(--black);transition:.2s;white-space:nowrap;cursor:pointer;font-family:inherit}
html[lang^="zh"] .btn{letter-spacing:.08em}
.btn-o{background:transparent;color:var(--black)}.btn-o:hover{background:var(--black);color:#fff}
.btn-r{background:var(--red);border-color:var(--red);color:#fff}.btn-r:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-w{background:#fff;border-color:#fff;color:var(--red)}.btn-w:hover{background:var(--cream)}
.btn-ow{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}.btn-ow:hover{border-color:#fff}
.menu{display:none;background:none;border:1px solid var(--border);width:42px;height:38px;font-size:18px;cursor:pointer}
.langs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--grey)}
.langs a,.langs span.cur{text-decoration:none;padding:4px 9px;border:1px solid var(--border);color:var(--charcoal);font-weight:600}
.langs span.cur{background:var(--black);border-color:var(--black);color:#fff}
.langs a:hover{border-color:var(--black)}
/* hub */
.hub-hero{padding:72px 0 40px;border-bottom:1px solid var(--border)}
.hub-hero h1{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:900;font-size:clamp(38px,5.4vw,68px);line-height:1.04;letter-spacing:-1.5px;color:var(--black);max-width:16ch;margin-top:16px}
html[lang^="zh"] .hub-hero h1{letter-spacing:0;line-height:1.2;max-width:20ch}
.hub-hero p{font-family:'Playfair Display','Noto Serif SC',serif;font-style:italic;font-size:clamp(17px,1.6vw,21px);color:var(--grey);max-width:60ch;margin-top:20px;line-height:1.6}
html[lang^="zh"] .hub-hero p{font-style:normal}
.hub-tools{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);background:#fff;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;color:var(--charcoal)}
.chip.on,.chip:hover{border-color:var(--black);color:var(--black)}.chip.on{background:var(--black);color:#fff}
.series{margin:48px 0 0;border:1px solid var(--black);background:#fff;display:grid;grid-template-columns:1fr 1.2fr}
.series .s-l{padding:34px;border-right:1px solid var(--border)}
.series h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:30px;line-height:1.15;color:var(--black);margin:12px 0}
.series p{color:#555;font-size:15px}
.series ol{list-style:none;padding:22px 30px;counter-reset:s}
.series li{counter-increment:s;border-bottom:1px solid var(--border);padding:10px 0;display:flex;gap:14px;font-size:15px}
.series li:last-child{border:none}
.series li::before{content:counter(s,decimal-leading-zero);font-family:'Playfair Display',serif;font-style:italic;color:var(--red)}
.series li a{text-decoration:none;color:var(--black);font-weight:500}.series li a:hover{color:var(--red)}
.feat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;margin:48px 0 0;background:#fff;border:1px solid var(--border);text-decoration:none}
.feat .im{aspect-ratio:3/2;overflow:hidden;background:var(--cream)}
.feat .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.feat:hover .im img{transform:scale(1.03)}
.feat .tx{padding:40px 40px 36px;display:flex;flex-direction:column}
.feat h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:900;font-size:clamp(26px,2.8vw,38px);line-height:1.12;color:var(--black);margin:14px 0 14px;letter-spacing:-.5px}
html[lang^="zh"] .feat h2{letter-spacing:0;line-height:1.3}
.feat p{color:#555;font-size:16px}
.meta{margin-top:auto;padding-top:18px;font-size:12px;color:var(--grey);letter-spacing:.06em;display:flex;gap:10px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:40px 0 90px}
.card{background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;text-decoration:none;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--black);transform:translateY(-3px)}
.card .im{aspect-ratio:3/2;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--border)}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:21px;line-height:1.25;color:var(--black);margin:10px 0 10px}
html[lang^="zh"] .card h3{line-height:1.45;font-size:19px}
.card p{color:#555;font-size:14.5px;line-height:1.65}
.card.hide{display:none}
/* article */
.crumbs{font-size:12.5px;color:var(--grey);padding:22px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--grey)}.crumbs a:hover{color:var(--black)}
.a-head{padding:34px 0 34px;max-width:900px}
.a-head h1{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:900;font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-1.2px;color:var(--black);margin-top:16px}
html[lang^="zh"] .a-head h1{letter-spacing:0;line-height:1.25}
.dek{font-family:'Playfair Display','Noto Serif SC',serif;font-style:italic;font-size:clamp(18px,1.8vw,22px);color:#555;margin-top:20px;line-height:1.55;max-width:62ch}
html[lang^="zh"] .dek{font-style:normal}
.a-meta{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;color:var(--grey)}
.a-meta b{color:var(--black);font-weight:700}
.hero-fig{margin:0 0 56px;border:1px solid var(--border);background:var(--cream)}
.hero-fig img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;padding-bottom:40px}
.layout>*,.grid>*,.feat>*,.series>*,.df-grid>*{min-width:0}
.side{position:relative}
.side-in{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.toc{border-top:2px solid var(--black);padding-top:14px}
.toc h4,.side-cta h4{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.toc a{display:block;text-decoration:none;font-size:13.5px;color:#555;padding:6px 0;border-bottom:1px solid var(--border);line-height:1.45}
.toc a:hover{color:var(--black)}
.side-cta{background:var(--black);color:#fff;padding:24px}
.side-cta p{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:20px;line-height:1.25;margin-bottom:16px}
.side-cta .btn{width:100%;margin-top:8px}
.qbox{background:var(--cream);border-left:3px solid var(--red);padding:28px 30px;margin-bottom:34px}
.qbox .q{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:22px;line-height:1.3;color:var(--black);margin:10px 0 14px}
.qbox .ans{font-size:16.5px;color:var(--charcoal)}
.qbox .ans b{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.kt{border:1px solid var(--border);background:#fff;padding:26px 30px;margin-bottom:46px}
.kt h2{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--red);margin-bottom:14px;font-weight:700}
.kt ul{list-style:none}
.kt li{position:relative;padding:8px 0 8px 24px;border-bottom:1px solid var(--border);font-size:16px;color:var(--black)}
.kt li:last-child{border:none}
.kt li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;background:var(--red)}
.prose h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:clamp(25px,2.6vw,32px);line-height:1.2;color:var(--black);margin:52px 0 16px;letter-spacing:-.4px;scroll-margin-top:90px}
html[lang^="zh"] .prose h2{letter-spacing:0;line-height:1.4}
.prose h3{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:21px;color:var(--black);margin:30px 0 10px}
.prose p{margin:0 0 18px;font-size:17.5px;line-height:1.85;color:var(--charcoal)}
.prose a{color:var(--black);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.prose a:hover{color:var(--red)}
.prose ul,.prose ol{margin:0 0 22px 0;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:22px;margin-bottom:10px;font-size:17px;line-height:1.75}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;background:var(--red)}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o;position:relative;padding-left:44px;margin-bottom:14px;font-size:17px;line-height:1.75}
.prose ol li::before{content:counter(o);position:absolute;left:0;top:0;width:30px;height:30px;border:1px solid var(--black);font-family:'Playfair Display',serif;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;line-height:1}
.prose strong{color:var(--black)}
.prose blockquote{border-left:3px solid var(--red);padding:6px 0 6px 22px;margin:26px 0;font-family:'Playfair Display','Noto Serif SC',serif;font-style:italic;font-size:20px;color:var(--black)}
.tw{overflow-x:auto;margin:26px 0 30px;border:1px solid var(--border);background:#fff}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.prose th{background:var(--black);color:#fff;text-align:left;font-weight:700;padding:12px 14px;font-size:13px;letter-spacing:.04em}
.prose td{padding:12px 14px;border-top:1px solid var(--border);vertical-align:top;line-height:1.6}
.prose tr:nth-child(even) td{background:var(--warm)}
.diagram{margin:34px 0 38px;border:1px solid var(--border);background:#fff}
.diagram img{width:100%;height:auto}
.diagram figcaption{padding:12px 16px;font-size:13px;color:var(--grey);border-top:1px solid var(--border)}
.insight{margin:56px 0;padding:44px 40px;background:var(--black);color:#fff;position:relative}
.insight .eyebrow{color:var(--red)}
.insight blockquote{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1.18;margin:14px 0 18px;letter-spacing:-.5px}
html[lang^="zh"] .insight blockquote{letter-spacing:0;line-height:1.4}
.insight p{color:#bbb;font-size:15.5px;max-width:60ch}
.prop{margin:56px 0;border:1px solid var(--black);background:#fff}
.prop .ph{padding:30px 34px 6px}
.prop h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:30px;color:var(--black);margin-top:10px}
.prop .pb{padding:12px 34px 6px}
.prop .pb p{margin-bottom:14px}
.prop .pa{display:flex;gap:12px;flex-wrap:wrap;padding:12px 34px 30px}
.faq{margin:56px 0}
.faq>h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:30px;color:var(--black);margin-bottom:12px}
.faq details{border-bottom:1px solid var(--border);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;color:var(--black);display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-family:'Playfair Display',serif;font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:#555;font-size:16px;line-height:1.75}
.srcs{margin:46px 0 20px;border-top:2px solid var(--black);padding-top:18px}
.srcs h2{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:14px}
.srcs ol{padding-left:20px;font-size:14.5px;color:#555}
.srcs li{margin-bottom:8px;line-height:1.6}
.srcs a{color:var(--black)}
.note{margin:26px 0 0;padding:20px 24px;background:var(--cream);font-size:14.5px;color:#555;line-height:1.7}
.note b{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--black);margin-bottom:6px}
.related{border-top:1px solid var(--border);padding:56px 0 20px}
.related h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:800;font-size:32px;color:var(--black)}
.related .grid{margin-top:26px;margin-bottom:70px}
/* cta + footer */
.cta{background:var(--red);padding:84px 32px;text-align:center}
.cta h2{font-family:'Playfair Display','Noto Serif SC',serif;font-weight:900;font-size:clamp(30px,4.4vw,46px);color:#fff;letter-spacing:-1px}
html[lang^="zh"] .cta h2{letter-spacing:0}
.cta p{font-size:18px;color:rgba(255,255,255,.85);margin:16px auto 30px;max-width:560px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.df{background:var(--black);color:#888;padding:56px 0 34px}
.df-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.df img{width:104px;margin-bottom:16px}
.df p{font-size:13.5px;line-height:1.7;max-width:34ch}
.df h4{color:#fff;font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:14px}
.df a{display:block;color:#aaa;text-decoration:none;font-size:14px;margin-bottom:9px}.df a:hover{color:#fff}
.df-bot{margin-top:40px;padding-top:20px;border-top:1px solid #222;font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:1020px){.layout{grid-template-columns:1fr;gap:0}.side{display:none}.grid{grid-template-columns:1fr 1fr}.feat,.series{grid-template-columns:1fr}.series .s-l{border-right:none;border-bottom:1px solid var(--border)}.df-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.dh-nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--warm);flex-direction:column;gap:0;padding:6px 24px 16px;border-bottom:1px solid var(--border);margin:0}.dh-nav.open{display:flex}.dh-nav a{padding:12px 0;border-bottom:1px solid var(--border)}.menu{display:block}.dh-r .btn-o{display:none}}
@media(max-width:640px){.wrap{padding:0 18px}.grid{grid-template-columns:1fr}.dh-r .btn-r{padding:10px 12px;letter-spacing:.08em}.feat .tx{padding:26px 22px}.insight{padding:32px 24px}.prop .ph,.prop .pb,.prop .pa{padding-left:22px;padding-right:22px}.qbox{padding:22px}.kt{padding:20px}.df-grid{grid-template-columns:1fr}.hub-hero{padding-top:44px}}