.phero{padding-block:120px 36px;text-align:center}.phero h1{font-size:clamp(34px,5vw,64px);letter-spacing:.02em;line-height:1.05}
.phero p{max-width:640px;margin:22px auto 0;color:var(--muted);font-size:15.5px;line-height:1.8;text-transform:none;font-weight:400}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:34px 0 40px}
.filters button{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;transition:.2s;border-radius:0}
.filters button.on,.filters button:hover{background:var(--text);color:#fff;border-color:var(--text)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.citem{display:block;color:inherit;text-decoration:none}.citem.hide{display:none}
.citem .im{aspect-ratio:4/3;overflow:hidden;background:#e6e6e6}.citem .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.citem:hover .im img{transform:scale(1.04)}
.citem .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}.citem .tags span{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:#f0f0f0;color:#555;padding:4px 9px}
.citem h3{font-size:17px;letter-spacing:.01em;line-height:1.3;margin-top:10px}.citem .sub{margin-top:5px;font-size:12.5px;color:var(--muted);text-transform:none;font-weight:400}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.cgrid{grid-template-columns:1fr}}
/* detail v2 */
.chero{position:relative;height:86vh;min-height:560px;overflow:hidden;background:#0a1220;color:#fff}
.chero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,20,.85) 0%,rgba(5,10,20,.25) 50%,rgba(5,10,20,.35) 100%)}
.chero .wrap{position:absolute;left:0;right:0;bottom:64px;margin:auto}
.chero .crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:22px}.chero .crumb a{color:inherit;text-decoration:none}
.chero .eyebrow{color:#cfd6df}
.chero h1{font-size:clamp(34px,5vw,68px);letter-spacing:.01em;line-height:1.02;margin-top:12px;max-width:900px;color:#fff}
.cfacts{background:var(--dark,#0a1220);color:#fff;padding:26px 0}
.cfacts .row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.cfacts .k{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}.cfacts .v{font-size:15px;font-weight:600;margin-top:6px;text-transform:none}
.cbody .lede{font-size:clamp(19px,2vw,24px);line-height:1.55;max-width:820px;margin:0 auto 44px;text-align:center;color:var(--text);text-transform:none;font-weight:400}
.hl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 70px;border-top:2px solid var(--text);padding-top:22px}
.hl div{font-size:13.5px;line-height:1.5;text-transform:none;font-weight:600;padding-left:16px;position:relative}.hl div span{position:absolute;left:0;top:9px;width:8px;height:2px;background:var(--accent)}
.cs{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.cs.flip .cs-t{order:2}
.cs.solo{grid-template-columns:1fr}.cs.solo .cs-t{max-width:760px;margin:0 auto}
.cs .no{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--accent)}
.cs h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:.01em;line-height:1.12;margin-top:10px}
.cs p{margin-top:16px;color:var(--muted);font-size:15.5px;line-height:1.85;text-transform:none;font-weight:400}
.cs-i{margin:0}.cs-i img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.cs-i figcaption{font-size:12px;color:var(--muted);margin-top:10px;text-transform:none;font-weight:400}
.cnav{padding:0 0 70px;background:#fff}
.cnav .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:24px}
.cnav a{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;text-decoration:none;color:inherit;padding:8px;border:1px solid var(--line);transition:.25s}
.cnav a.r{grid-template-columns:1fr 150px;text-align:right}
.cnav a:hover{border-color:var(--text)}
.cnav img{width:150px;aspect-ratio:4/3;object-fit:cover;display:block}
.cnav .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cnav h3{font-size:17px;line-height:1.3;margin-top:6px;letter-spacing:.01em}.cnav a:hover h3{color:var(--accent)}
.cnav .s{font-size:12px;color:var(--muted);text-transform:none;font-weight:400;margin-top:4px}
@media(max-width:900px){.cnav .pair{grid-template-columns:1fr}.chero{height:64vh}.cfacts .row{grid-template-columns:repeat(2,1fr)}.hl{grid-template-columns:1fr 1fr}.cs,.cs.flip{grid-template-columns:1fr;gap:22px}.cs.flip .cs-t{order:0}}
/* text-only case layout + related */
.csgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:24px}
.csgrid .cs.card{display:block;border:1px solid var(--line);padding:34px 34px 38px;border-top:0}
.csgrid .cs.card:first-child{grid-column:1/-1;background:var(--dark,#0a1220);color:#fff;border-color:transparent}
.csgrid .cs.card:first-child h2,.csgrid .cs.card:first-child p{color:#fff}.csgrid .cs.card:first-child p{opacity:.85}
.csgrid .cs.card .cs-t{max-width:none;margin:0}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rel{display:block;text-decoration:none;color:inherit}.rel .im{aspect-ratio:4/3;overflow:hidden;background:#e6e6e6}.rel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.rel:hover img{transform:scale(1.04)}
.rel .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-top:14px}.rel h3{font-size:16px;line-height:1.3;margin-top:6px;letter-spacing:.01em}.rel:hover h3{color:var(--accent)}
@media(max-width:900px){.csgrid,.relgrid{grid-template-columns:1fr}}
/* detail */
.dhero{padding:110px 0 30px}.dhero .crumb{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.dhero .crumb a{color:inherit;text-decoration:none}.dhero .crumb a:hover{color:var(--accent)}
.dhero h1{font-size:clamp(30px,4vw,52px);letter-spacing:.01em;line-height:1.08;margin-top:16px;max-width:900px}
.dmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:2px solid var(--text);border-bottom:1px solid var(--line);padding:18px 0;margin:28px 0 34px}
.dmeta .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.dmeta .v{font-size:15px;font-weight:600;margin-top:5px}
.dcover{aspect-ratio:16/9;overflow:hidden;background:#e6e6e6}.dcover img{width:100%;height:100%;object-fit:cover;display:block}
.dwrap{display:grid;grid-template-columns:300px 1fr;gap:64px;margin:54px 0;align-items:start}
.dside{position:sticky;top:110px;border-top:2px solid var(--text);padding-top:18px}.dside h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.dside dl{margin:0 0 28px}.dside dl>div{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.dside dt{color:var(--muted);text-transform:none;font-weight:400}.dside dd{margin:0;font-weight:600;text-transform:none}
.dside ul{list-style:none;padding:0;margin:0}.dside li{font-size:13.5px;line-height:1.5;padding:7px 0 7px 18px;position:relative;text-transform:none;font-weight:400}.dside li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;background:var(--accent)}
.dsec+.dsec{margin-top:36px}.dsec h2{font-size:clamp(20px,2.1vw,26px);letter-spacing:.01em;line-height:1.15}.dsec p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.85;text-transform:none;font-weight:400}
@media(max-width:900px){.dwrap{grid-template-columns:1fr;gap:28px}.dside{position:static}}
.dspecs{margin:70px 0 40px;padding-top:60px;border-top:1px solid var(--line)}
.tables{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.tables h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.tables table{width:100%;border-collapse:collapse;font-size:13px;text-transform:none}
.tables th{text-align:left;font-weight:400;color:var(--muted);padding:9px 10px 9px 0;border-bottom:1px solid var(--line);width:38%;vertical-align:top}
.tables td{padding:9px 0;border-bottom:1px solid var(--line);font-weight:600;vertical-align:top}
@media(max-width:900px){.tables{grid-template-columns:1fr}}
.dbody{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;margin:54px 0}
.dbody h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:.01em;line-height:1.15}.dbody p{color:var(--muted);font-size:15.5px;line-height:1.85;text-transform:none;font-weight:400}.dbody p+p{margin-top:16px}
.dgal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:60px}.dgal figure{margin:0}.dgal .im{aspect-ratio:4/3;overflow:hidden;background:#e6e6e6}.dgal img{width:100%;height:100%;object-fit:cover;display:block}
.dgal figcaption{font-size:12px;color:var(--muted);margin-top:8px;text-transform:none;font-weight:400}
.dnext{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-bottom:0}
.dnext a{display:block;padding:34px 0;text-decoration:none;color:inherit}.dnext a+a{text-align:right}.dnext .k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.dnext .t{font-size:18px;margin-top:8px}.dnext a:hover .t{color:var(--accent)}
@media(max-width:900px){.dbody{grid-template-columns:1fr;gap:20px}.dmeta{grid-template-columns:1fr 1fr}.dgal{grid-template-columns:1fr 1fr}}

/* story layout */
.story{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start;margin-top:10px}
.story-side{position:sticky;top:110px;border-top:2px solid var(--text);padding-top:18px}.story-side h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.story-side dl{margin:0 0 22px}.story-side dl>div{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.story-side dt{color:var(--muted);text-transform:none;font-weight:400}.story-side dd{margin:0;font-weight:600;text-transform:none}
.story-body{max-width:760px}
.ss{margin:0 0 44px}.ss .no{font-size:12px;font-weight:700;letter-spacing:.3em;color:var(--accent)}.ss h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:.01em;line-height:1.12;margin-top:8px}
.ss p{margin-top:16px;color:#333;font-size:16.5px;line-height:1.85;text-transform:none;font-weight:400}
.sfig{margin:0 0 48px}.sfig img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.sfig figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;text-transform:none;font-weight:400}
.pull{margin:0 0 48px;padding:26px 30px;border-left:3px solid var(--accent);background:#fafafa;font-size:clamp(18px,1.8vw,22px);line-height:1.5;font-weight:600;text-transform:none}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:28px}.story-side{position:static}}
.pull::before,.pull::after{content:none!important}.pull{font-style:normal;quotes:none}

/* cases grid v2 */
.cgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px}
.citem{grid-column:span 4;display:block;color:inherit;text-decoration:none;position:relative}
.citem.lead{grid-column:span 12;display:grid;grid-template-columns:1.5fr 1fr;gap:0;background:var(--dark,#0a1220);color:#fff;margin-bottom:8px}
.citem .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e6e6e6;border-radius:4px}
.citem.lead .im{aspect-ratio:16/10;border-radius:0}
.citem .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s}
.citem:hover .im img{transform:scale(1.05)}
.citem .badge{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:var(--text);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px}
.citem.lead .badge{background:var(--accent);color:#fff}
/* CJK badge: 9.5px is too small for Chinese glyphs, and wide tracking is a Latin-caps device */
:lang(zh) .citem .badge{font-size:12.5px;letter-spacing:.02em;padding:7px 11px}
.citem .t{padding:18px 4px 0}
.citem.lead .t{padding:48px 48px;display:flex;flex-direction:column;justify-content:center}
.citem h3{font-size:17px;letter-spacing:.01em;line-height:1.3;transition:color .2s}
.citem.lead h3{font-size:clamp(24px,2.6vw,34px);color:#fff}
.citem:hover h3{color:var(--accent)}.citem.lead:hover h3{color:#fff}
.citem .sub{margin-top:6px;font-size:12.5px;color:var(--muted);text-transform:none;font-weight:400}.citem .sub i{opacity:.5;font-style:normal;margin:0 4px}
.citem.lead .sub{color:rgba(255,255,255,.7);font-size:14px;margin-top:10px}
.citem .more{display:inline-block;margin-top:12px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(4px);transition:.3s}
.citem:hover .more{opacity:1;transform:none}
.citem.lead .more{opacity:1;transform:none;color:#fff;border-bottom:1px solid var(--accent);padding-bottom:4px;margin-top:22px;align-self:flex-start}
.citem .tags{display:none}
.citem.hide{display:none}
.filters{gap:6px;margin:30px 0 44px}.filters button{border-radius:999px;padding:9px 16px;border-color:#ddd;font-size:10.5px}
/* CJK filter pills: same reason as the badge above — 10.5px is small for Chinese, and .16em tracking is a Latin-caps device */
:lang(zh) .filters button{font-size:12.5px;letter-spacing:.02em}
.phero{padding-block:120px 0}.phero h1{font-size:clamp(34px,4.6vw,58px)}
/* CJK hero: the browser may break Chinese at ANY character (unlike English, which breaks at
   spaces), so a narrow hero strands 2–3-glyph orphan lines — "图。" on its own line. Balancing
   the breaks fixes that. And CJK glyphs fill the em box, so the Latin display leading of 1.05
   reads as the two lines colliding; 1.16 is the CJK equivalent of that same look. */
:lang(zh) .phero h1{line-height:1.16;text-wrap:balance}
:lang(zh) .phero p{text-wrap:balance}
/* red guide rule above the kicker — .phero is only used by this template, so this stays page-local */
.phero .eyebrow{display:block}
.phero .eyebrow::before{content:"";display:block;width:34px;height:2px;background:var(--accent);margin:0 auto 6px}
.phero h1{margin-top:8px}
@media(max-width:900px){.citem{grid-column:span 6}.citem.lead{grid-template-columns:1fr}.citem.lead .t{padding:24px}}
@media(max-width:560px){.citem{grid-column:span 12}}

/* every case wrapped in a framed card (same chrome as the blog cards) — all widths */
.citem{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .25s,transform .25s}
.citem:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px)}
.citem .im{border-radius:0}
.citem .t{padding:18px 18px 22px}
.citem .more{opacity:1;transform:none}
/* the featured banner keeps its dark fill; a light hairline around it reads as a seam */
.citem.lead{border-color:transparent}