/* 林江锋 作品集 — shared styles. Home = "black cinema" (A); case = "console HUD" (B). No external fonts. */
:root{
  --black:#000;--white:#f2f2f0;--dim:#8c8c88;--line:#242424;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --latin:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Consolas,Menlo,monospace;
  --pad:clamp(16px,4vw,48px);
  --amber:#ffb84a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--white);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:15px;line-height:1.6;background:var(--black);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- media tile (poster + lazy loop) ---------- */
.m{position:relative;overflow:hidden;background:#111}
.m>img,.m>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m>video{opacity:0;transition:opacity .4s}
.m.playing>video{opacity:1}
.m.missing{background:#0d0d0d}
.m.missing>img{display:none}
.m.missing::after{content:"素材整理中";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#555;font-size:12px;letter-spacing:.1em}
.m .dur{position:absolute;right:6px;bottom:6px;z-index:2;font-family:var(--mono);font-size:10.5px;padding:1px 6px;background:rgba(0,0,0,.6);color:#ddd}

/* ================= HOME (A) ================= */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 14px) var(--pad) 14px;font-size:13px;letter-spacing:.08em;mix-blend-mode:difference;color:#fff}
.bar nav{display:flex;gap:clamp(12px,3vw,24px)}
.bar nav a{opacity:.85}

.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero .m{position:absolute;inset:0;background:#000}
.hero .m>video{opacity:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.85) 100%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 28px)}
.name{font-weight:700;font-size:clamp(84px,29vw,300px);line-height:.86;letter-spacing:-.04em;margin-left:-.04em;
  opacity:0;transform:translateY(24px);animation:rise 1.2s .25s cubic-bezier(.2,.7,.1,1) forwards}
.role{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;opacity:0;animation:fade 1s 1s forwards}
.role p{font-size:clamp(15px,4.2vw,22px);letter-spacing:.06em}
.reel-btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.08em;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.5)}
.reel-btn i,.play-i{display:inline-block;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

.home section{padding:clamp(72px,14vw,160px) 0 0}
.sec-head{padding:0 var(--pad) clamp(24px,5vw,48px);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sec-head h2{font-size:clamp(34px,10vw,96px);font-weight:700;letter-spacing:-.02em;line-height:1}
.sec-head span{color:var(--dim);font-size:13px;white-space:nowrap}
.intro{padding:0 var(--pad);max-width:46em;color:#cfcfcb;font-size:15px}

/* featured */
.case{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;border-top:1px solid var(--line)}
.case .frame{position:absolute;inset:0;display:block;width:100%;cursor:pointer}
.case .frame .m{position:absolute;inset:0}
.case::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%)}
.case-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 36px);pointer-events:none}
.case-copy>*{pointer-events:auto}
.case-copy small{display:block;color:#cfcfcb;font-size:13px;letter-spacing:.06em;margin-bottom:10px}
.case-copy h3{font-family:var(--latin);font-weight:700;font-size:clamp(46px,14vw,140px);line-height:.92;letter-spacing:-.03em}
.case-copy h3 em{font-style:normal;font-family:var(--sans);font-size:.42em;letter-spacing:0;margin-left:.3em;font-weight:600;vertical-align:.25em}
.case-copy p{margin-top:14px;max-width:34em;color:#d6d6d2;font-size:15px}
.case-copy .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.case-copy .tags span,.chip{font-size:11.5px;border:1px solid rgba(255,255,255,.3);padding:2px 8px;color:#ddd}
.case-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.case-actions a,.case-actions button{font-size:14px;letter-spacing:.08em;padding-bottom:4px;border-bottom:1px solid #fff;display:inline-flex;align-items:center;gap:8px}
.case-actions button{border-bottom-color:rgba(255,255,255,.4)}
@media (min-width:900px){
  .case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);height:auto;min-height:0;padding:clamp(48px,6vw,96px) var(--pad);gap:6vw;align-items:end}
  .case::after{display:none}
  .case .frame{position:relative;inset:auto;height:86vh;width:calc(86vh * 9 / 16);max-width:100%;justify-self:start}
  .case-copy{position:static;padding:0 0 12px}
  .case.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .case.flip .frame{order:2;justify-self:end}
}

/* walls */
.wall{columns:2;column-gap:8px;padding:0 8px}
@media (min-width:720px){.wall{columns:3}}
@media (min-width:1200px){.wall{columns:4}}
.tile{break-inside:avoid;display:block;width:100%;text-align:left;cursor:pointer;padding:0}
.tile .m{width:100%}
.tile figcaption{padding:8px 4px 18px;font-size:12px;line-height:1.45}
.tile figcaption b{display:block;font-weight:600;font-size:13.5px}
.tile figcaption em{font-style:normal;color:var(--dim);display:block}
@media (hover:hover){.tile:hover figcaption b{text-decoration:underline;text-underline-offset:3px}}

/* kujiale */
.kjl{margin-top:clamp(72px,14vw,160px);padding-top:clamp(56px,10vw,120px)!important;background:#0a0a0a;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-bottom:clamp(56px,10vw,120px)}
.kjl-head{padding:0 var(--pad)}
.kjl-head .eyebrow{color:var(--dim);font-size:13px;letter-spacing:.1em}
.kjl-head h2{margin-top:10px;font-size:clamp(38px,11vw,110px);font-weight:700;letter-spacing:-.02em;line-height:1}
.kjl-head h2 span{display:block;font-family:var(--latin);color:var(--dim);font-size:.5em;letter-spacing:-.01em;margin-top:.2em}
.kjl-head .who{margin-top:18px;font-size:clamp(16px,4.4vw,22px)}
.kjl-head .lead{margin-top:10px;color:#cfcfcb;max-width:40em}
.kjl-points{margin-top:24px;counter-reset:k;display:grid;gap:0;max-width:56em}
.kjl-points li{counter-increment:k;display:grid;grid-template-columns:2.4em 1fr;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.kjl-points li:last-child{border-bottom:1px solid var(--line)}
.kjl-points li::before{content:counter(k,decimal-leading-zero);color:var(--dim);font-family:var(--latin);font-size:13px;padding-top:2px}
.kjl-reel{margin:clamp(32px,6vw,64px) var(--pad) 0;display:block;width:calc(100% - 2*var(--pad));cursor:pointer;text-align:left}
.kjl-reel .m{aspect-ratio:16/9}
.kjl-reel figcaption{padding:10px 0 0;font-size:13px;color:var(--dim);display:flex;gap:10px;align-items:center}
.kjl-reel figcaption b{color:var(--white);font-weight:600}
.kjl-works{margin-top:28px;padding:0 var(--pad);display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:900px){.kjl-works{grid-template-columns:repeat(3,1fr)}.kjl-points{grid-template-columns:1fr 1fr;column-gap:40px}.kjl-points li:nth-last-child(2){border-bottom:1px solid var(--line)}}
.kjl-works .tile figcaption{padding-bottom:10px}
.kjl-gal{margin-top:clamp(40px,7vw,72px);padding:0 var(--pad)}
.kjl-gal h3{font-size:clamp(20px,5vw,28px);font-weight:700}
.kjl-gal>p{color:var(--dim);font-size:13px;margin:4px 0 18px}
.pairs{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){.pairs{grid-template-columns:1fr 1fr}}
.pairs figcaption,.gimgs figcaption{font-size:12px;color:var(--dim);padding:6px 0 0}
.gimgs{margin-top:16px;columns:2;column-gap:8px}
@media (min-width:900px){.gimgs{columns:4}}
.gimgs figure{break-inside:avoid;margin-bottom:8px;cursor:zoom-in}
.gimgs img{background:#111}
.more-btn{margin-top:16px;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.4);font-size:14px}

/* compare slider (shared) */
.cmp{position:relative;overflow:hidden;background:#111;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--x:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp .h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .h::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:#000;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:2px}
.cmp .lb{position:absolute;bottom:8px;z-index:2;font-size:11px;padding:2px 7px;background:rgba(0,0,0,.65);color:#fff;pointer-events:none}
.cmp .lb.l{left:8px}.cmp .lb.r{right:8px}

/* experience */
.exp{padding:0 var(--pad)}
.exp>li{display:grid;grid-template-columns:1fr;gap:2px 16px;padding:18px 0;border-top:1px solid var(--line)}
.exp>li:last-child{border-bottom:1px solid var(--line)}
.exp time{color:var(--dim);font-family:var(--latin);font-size:13px;padding-top:2px;font-variant-numeric:tabular-nums}
.exp .co b{font-weight:600;font-size:17px}
.exp .co .rl{display:inline;margin-left:10px}
.exp .co small{display:block;color:var(--dim);font-size:12px}
.exp .rl{display:block;font-size:14px;color:#cfcfcb}
.exp ul{margin-top:8px}
.exp ul li{position:relative;padding-left:14px;color:#a9a9a5;font-size:13.5px;line-height:1.6;margin-top:4px}
.exp ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:#666}
.exp .sub{margin-top:10px}
.exp .sub>b{font-size:13px;font-weight:600;color:#ddd}
.exp .sub>b span{color:var(--dim);font-weight:400;margin-left:8px;font-family:var(--latin)}
.exp .hl{background:#0c0c0c;margin:0 calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad);border-left:3px solid var(--white)}
.exp .jump{margin-top:12px;font-size:13px;border-bottom:1px solid #fff;justify-self:start}
@media (min-width:900px){.exp>li{grid-template-columns:11em 15em 1fr;gap:4px 24px}.exp time{grid-row:1 / span 3}.exp .co{grid-column:2;grid-row:1 / span 3}.exp .co .rl{display:block;margin:0}.exp ul,.exp .sub,.exp .jump{grid-column:3}.exp>li>ul:first-of-type,.exp>li>.sub:first-of-type{margin-top:0}}
.edu{padding:22px var(--pad) 0;color:var(--dim);font-size:14px;max-width:52em}
.skills{padding:24px var(--pad) 0;display:grid;gap:14px}
.skills div{display:grid;grid-template-columns:5.5em 1fr;gap:12px;align-items:baseline}
.skills dt{color:var(--dim);font-size:13px}
.skills dd{display:flex;flex-wrap:wrap;gap:6px}

/* contact */
.contact{padding:clamp(96px,18vw,200px) var(--pad) calc(env(safe-area-inset-bottom) + 40px)}
.contact p{color:var(--dim);font-size:15px;margin-bottom:18px}
.mail{display:block;font-family:var(--latin);font-weight:700;font-size:clamp(30px,9.4vw,120px);letter-spacing:-.03em;line-height:1;word-break:break-all}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid var(--white);font-size:15px;letter-spacing:.04em}
.btn.fill{background:var(--white);color:#000}
.foot{margin-top:72px;color:#5e5e5a;font-size:12px;display:flex;justify-content:space-between;gap:12px}

/* ================= PLAYER OVERLAY ================= */
.player{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;color:#f2f2f0}
.player .stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top)}
.player video,.player .pimg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#000}
.player video{width:100%;height:100%}
.player .err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:14px}
.player .pinfo{padding:12px var(--pad) calc(env(safe-area-inset-bottom) + 14px);border-top:1px solid #1c1c1c;display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:end}
.player .pinfo h3{font-size:17px;font-weight:700;line-height:1.35}
.player .pinfo p{color:#9a9a96;font-size:13px;grid-column:1}
.player .pinfo a{grid-row:1 / span 2;grid-column:2;font-size:13px;border-bottom:1px solid #fff;white-space:nowrap;align-self:center}
.player .pinfo .cnt{font-family:var(--mono);font-size:11px;color:#666;grid-column:1}
.player .x{position:absolute;z-index:5;top:calc(env(safe-area-inset-top) + 8px);right:8px;width:44px;height:44px;font-size:26px;line-height:44px;text-align:center;background:rgba(0,0,0,.5);border-radius:50%}
.player .nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:64px;font-size:28px;background:rgba(0,0,0,.35)}
.player .prev{left:0}.player .next{right:0}
@media (hover:none){.player .nav{display:none}}
body.lock{overflow:hidden}

@media (prefers-reduced-motion:reduce){.name,.role{animation:none;opacity:1;transform:none}html{scroll-behavior:auto}}

/* ================= CASE PAGE (B) ================= */
.cp{--bg:#12161b;--panel:#171c22;--ln:#28313a;--ln2:#1d242b;--ink:#dfe4e8;--dm:#7f8b96;
  background:var(--bg);color:var(--ink);
  background-image:linear-gradient(var(--ln2) 1px,transparent 1px),linear-gradient(90deg,var(--ln2) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px}
html.cpage{background:#12161b}
.cp :focus-visible{outline-color:var(--amber)}
.cp .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--dm)}
.cp .wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.status{position:sticky;top:0;z-index:30;background:rgba(18,22,27,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln);padding-top:env(safe-area-inset-top)}
.status .wrap{display:flex;justify-content:space-between;align-items:center;height:44px;gap:12px}
.status a.back{font-size:14px;font-weight:600;white-space:nowrap}
.status a.back::before{content:"← ";color:var(--amber)}
.status .cur{font-family:var(--mono);font-size:11.5px;color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:1px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

.ch{display:grid;gap:28px;padding:28px 0 8px}
.ch .no{font-family:var(--mono);color:var(--amber);font-size:13px;letter-spacing:.06em}
.ch h1{margin-top:6px;font-size:clamp(34px,9vw,76px);font-weight:700;line-height:1.08;letter-spacing:-.01em}
.ch .sum{margin-top:14px;font-size:15.5px;color:var(--ink);max-width:40em}
.ch dl.meta{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;border-top:1px solid var(--ln);padding-top:14px}
.ch dl.meta dt{font-family:var(--mono);font-size:11.5px;color:var(--dm);padding-top:2px}
.ch dl.meta dd{font-size:14px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));margin:18px 0 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.spec div{padding:8px 10px 8px 0}
.spec dt{font-family:var(--mono);font-size:10.5px;color:var(--dm)}
.spec dd{font-family:var(--mono);font-size:14px;color:var(--ink)}
.viewer{position:relative;border:1px solid var(--ln);background:#0c0f12}
.viewer-bar,.viewer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px}
.viewer-bar{border-bottom:1px solid var(--ln)}
.viewer-foot{border-top:1px solid var(--ln)}
.viewer-bar .tc{color:var(--amber);font-variant-numeric:tabular-nums}
.viewer-foot button{color:var(--amber);font-family:var(--mono);font-size:12px;min-height:32px}
.screen{position:relative;margin:0 auto;overflow:hidden;cursor:pointer}
.screen.portrait{aspect-ratio:9/16;max-height:72vh;max-height:72svh}
.screen.landscape{aspect-ratio:16/9}
.screen .m{position:absolute;inset:0}
.screen::before{content:"";position:absolute;inset:6% 7%;border:1px dashed rgba(255,184,74,.35);z-index:2;pointer-events:none}
.corner{position:absolute;width:14px;height:14px;border-color:var(--amber);border-style:solid;z-index:3;pointer-events:none}
.c1{top:8px;left:8px;border-width:1px 0 0 1px}.c2{top:8px;right:8px;border-width:1px 1px 0 0}
.c3{bottom:8px;left:8px;border-width:0 0 1px 1px}.c4{bottom:8px;right:8px;border-width:0 1px 1px 0}
@media (min-width:900px){.ch{grid-template-columns:1.2fr .8fr;align-items:end;padding:56px 0 8px;gap:56px}}

.idx{margin-top:clamp(40px,7vw,72px);border:1px solid var(--ln);background:var(--panel)}
.idx .hd{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--ln)}
.idx ol{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.idx ol{grid-template-columns:repeat(4,1fr)}}
.idx li a{display:flex;gap:10px;align-items:baseline;padding:10px 12px;border-top:1px solid var(--ln2);font-size:14px;min-height:44px}
.idx li a span{font-family:var(--mono);font-size:11.5px;color:var(--amber)}
.idx li a em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--dm);border:1px dashed var(--ln);padding:0 5px}
.idx li a:hover{background:#1c232b}

.seg{padding-top:clamp(56px,9vw,104px);scroll-margin-top:52px}
.sh{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:14px;border-bottom:1px solid var(--ln);padding-bottom:12px;margin-bottom:18px}
.sh .no{font-family:var(--mono);color:var(--amber);font-size:13px}
.sh h2{font-size:clamp(22px,6vw,34px);font-weight:700;line-height:1.2}
.sh .mono{text-align:right;text-transform:uppercase}
.seg .txt{max-width:44em;display:grid;gap:10px;font-size:15.5px;color:var(--ink)}
.seg.todo .txt{color:var(--dm)}
.seg .blk{margin-top:22px}
.blk .cap{display:block;margin-top:6px}
.igrid{display:grid;grid-template-columns:repeat(var(--cm,3),minmax(0,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln)}
@media (min-width:900px){.igrid{grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}}
.igrid figure{background:var(--panel);position:relative}
.igrid figure .ph{position:relative;overflow:hidden;background:#0c0f12}
.igrid figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.igrid figure .n{position:absolute;left:5px;top:5px;z-index:2;font-family:var(--mono);font-size:10px;color:var(--amber);background:rgba(12,15,18,.8);padding:0 5px}
.igrid figcaption{padding:5px 7px 7px;font-family:var(--mono);font-size:10.5px;color:var(--dm);line-height:1.4}
.todo-box{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:140px;border:1px dashed #3a4652;color:var(--dm);font-size:13px;letter-spacing:.08em;
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,184,74,.035) 10px 20px)}
.todo-box b{font-weight:400;color:#aab4bd}
.todo-box small{font-family:var(--mono);font-size:10.5px;color:#5b6772;letter-spacing:.04em}
.igrid .todo-box{border:0;min-height:0;height:100%}
.vblk{max-width:560px}
.vblk.landscape{max-width:none}
.vblk .screen{border:1px solid var(--ln)}
.vblk .act,.sbs .act{display:inline-flex;gap:8px;align-items:center;margin-top:8px;color:var(--amber);font-family:var(--mono);font-size:12px;min-height:36px}
.sbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.sbs .it{border:1px solid var(--ln);background:#0c0f12}
.sbs .it .screen{aspect-ratio:var(--r,9/16)}
.sbs .it .lab{display:flex;justify-content:space-between;padding:6px 8px;border-top:1px solid var(--ln)}
.sbs .it .lab b{font-size:13px;font-weight:600}
@media (min-width:900px){.sbs{max-width:820px}}
.cblk .cmp{border:1px solid var(--ln)}
.cmps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:900px){.cmps{max-width:820px}}
.cmps.one{grid-template-columns:1fr;max-width:420px}
.code{border:1px solid var(--ln);background:#0c0f12}
.code .hd{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--ln)}
.code .hd b{font-family:var(--mono);font-size:11.5px;color:var(--amber);font-weight:400}
.code pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.codes{display:grid;gap:10px}
@media (min-width:900px){.codes{grid-template-columns:1fr 1fr}}
.wf{border:1px solid var(--ln)}
.wf img{cursor:zoom-in}
.case-foot{margin-top:clamp(72px,12vw,140px);border-top:1px solid var(--ln);padding:24px 0 calc(env(safe-area-inset-bottom) + 40px);display:grid;gap:14px}
.case-foot a.nx{display:flex;justify-content:space-between;align-items:center;min-height:56px;padding:0 16px;border:1px solid var(--amber);color:var(--amber);font-size:15px}
.case-foot a.nx:hover{background:var(--amber);color:#12161b}
.case-foot .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.case-foot .row a{font-size:14px;border-bottom:1px solid var(--dm)}
.loading{padding:40vh 0;text-align:center;color:var(--dm);font-family:var(--mono);font-size:12px}
.seg.todo .igrid,.seg.todo .wf,.seg.todo .code{max-width:640px}
.seg.todo .igrid .ph{max-height:220px;aspect-ratio:auto!important;height:160px}

/* ================= tailored pages (for/<slug>/) ================= */
.hero.for::after{background:linear-gradient(to bottom,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.9) 100%)}
.for-eyebrow{color:var(--amber);font-size:13px;letter-spacing:.12em;margin-bottom:12px;opacity:0;animation:fade 1s .2s forwards}
.for-head{font-weight:700;font-size:clamp(32px,9vw,92px);line-height:1.1;letter-spacing:-.02em;max-width:13em;
  opacity:0;transform:translateY(20px);animation:rise 1.2s .3s cubic-bezier(.2,.7,.1,1) forwards}
.fit-in{padding:0 var(--pad);max-width:60em}
.fit .lead{font-size:clamp(16px,4.3vw,20px);line-height:1.7;color:#deded9}
.fit .kjl-points{margin-top:28px}
.closing .lead{color:var(--dim);font-size:15px}
.sec-note{padding:0 var(--pad);margin:-8px 0 28px;max-width:46em;color:#bdbdb8;font-size:15px}
.case-notes{padding:20px var(--pad) 8px}
.ai-notes{display:grid;gap:0;max-width:52em}
.ai-notes div{display:grid;grid-template-columns:6.5em 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ai-notes div:last-child{border-bottom:1px solid var(--line)}
.ai-notes dt{color:var(--amber);font-size:12.5px;letter-spacing:.06em;padding-top:2px}
.ai-notes dd{color:#cfcfcb;font-size:14px;line-height:1.65}
.duo{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px;padding:0 8px;align-items:start}
.duo figcaption i{display:block;font-style:normal;color:var(--amber);font-size:11.5px;letter-spacing:.08em;margin-bottom:2px}
.duo-foot{padding:12px var(--pad) 0}
.duo-foot .case-actions{margin-top:16px}
.chip.em{border-color:var(--amber);color:var(--amber)}
@media (min-width:900px){
  .duo{padding:0 var(--pad);gap:20px;max-width:calc(var(--n,2) * 340px + 2 * var(--pad))}
  .case-notes{padding:0 var(--pad) 24px;margin-top:-8px}
  .case-notes .ai-notes{margin-left:auto;max-width:56%}
}