/* A · NAS 运营管理后台：只有这一页用的模块。公共版式在 ../../case-kit.css。
   方案见 docs/PLAN-A页全页落站-2026-10-19.md；封面骨架照 B 页 nas.css，三台手机换成三扇窗口。 */
:root{--cvw:clamp(560px,min(58vw,88vh),980px)}   /* 封面中间窗口宽度 */

/* ============================================================
   00 封面：三扇窗口 + 描边水印
   ============================================================ */
.cover{position:relative;padding-top:0;background:var(--cream)}
.cover-stage{position:relative;padding-bottom:clamp(24px,4vh,48px)}
.cover-head{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding-top:clamp(64px,9vh,104px);text-align:center}
.cover-title{font-size:var(--fs-hero);line-height:1.04;font-weight:700;letter-spacing:-.025em;margin:.3em 0 .35em}
.cover-concl{max-width:24em;margin-inline:auto;text-wrap:balance;font-size:24px;line-height:1.5;font-weight:500;color:#3b3a3a}
.cover-concl em{font-style:normal;color:var(--red);font-weight:700}


.cv{position:relative;z-index:2;width:var(--cvw);margin:clamp(28px,5vh,56px) auto 0}
.cv-item{transform:translate3d(0,var(--py,0px),0)}
.cv-c{position:relative;z-index:3}
/* 两侧窗口压在中间后面，往下错开一点 */
.cv-l,.cv-r{position:absolute;z-index:1;top:16%;width:64%}
.cv-l{left:-26%}
.cv-r{right:-26%}
.win{position:relative;border-radius:14px;overflow:hidden;background:#fff;animation:cvrise 1.5s var(--ease) var(--d,0s) both;
  box-shadow:0 0 0 1px rgba(17,18,20,.08),0 30px 60px rgba(40,20,16,.16),0 8px 20px rgba(40,20,16,.1)}
.win img{display:block;width:100%;height:auto}
.win-bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:#EEECE8;border-bottom:1px solid rgba(17,18,20,.06)}
.win-bar b{width:9px;height:9px;border-radius:50%;background:#D3CFC9}
.cv-l .win,.cv-r .win{filter:saturate(.7)}
.cv-l .win::after,.cv-r .win::after{content:"";position:absolute;inset:0;background:rgba(244,242,238,.32);pointer-events:none}
@keyframes cvrise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
/* 从首页转场进来：标题与中间窗口是共享元素，首帧就要完整可见，否则一镜到底会飞向透明目标 */
.vt-in .cover-title.rv{opacity:1;transform:none;transition:none}
.vt-in .cv-c .win{animation:none}

.cover-info{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding:clamp(40px,8vh,90px) 0 clamp(110px,18vh,200px)}
/* 本文件在 case-kit 之后加载，会盖掉它 ≥1240 时给左侧目录让出的 240px，这里补回，和下方正文对齐 */
@media (min-width:1240px){.cover-head,.cover-info{width:min(var(--w),100% - 480px)}}
.lede{max-width:30em;font-size:20px;line-height:1.8;color:#3b3a3a}

/* ============================================================
   01 背景：项目状态改成左竖线注记，角色卡换成泳道关系图
   ============================================================ */
.cx-sec .facts{padding:4px 0 4px 28px;border:0;border-left:1px solid var(--rule);border-radius:0;background:none}
.lanes{margin-top:72px}
/* 图示的字和正文同一套：中文普惠体，眉标 Geist Mono；容器统一加 .dg */
.dg{max-width:1080px}
.dg svg{display:block;width:100%;height:auto;overflow:visible}
.dg .t-name{font:600 16px var(--sans);fill:var(--c1)}
.dg .t-sub{font:400 12.5px var(--sans);fill:var(--c3)}
.dg .t-role{font:600 15px var(--sans);fill:var(--c1)}
.dg .t-ask{font:500 15px var(--sans);fill:#3b3a3a}
.dg .t-mono{font:500 10px var(--mono);letter-spacing:.14em;fill:var(--c3)}
.dg .t-note{font:500 12px var(--sans);fill:var(--c3)}
.cx-sec[data-tone="dark"] .dg .t-ask{fill:var(--c1)}

/* ============================================================
   02 主线：旧版流程图 + 重制版滚动跟随
   ============================================================ */
.flow-k{margin-top:64px}
.flow-k-new{margin-top:96px;color:var(--acc)}
.flow-old{margin-top:20px}
.flow-old .t-name{fill:var(--c2)}
.flow-old .t-sn{font:600 12px var(--sans);fill:var(--red)}

.walk{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:72px;margin-top:28px}
.walk-steps{position:relative;list-style:none;margin:0;padding:0}
/* 竖线：灰底线 + 红色进度，进度停在当前一步的节点上 */
.walk-steps::before,.walk-steps::after{content:"";position:absolute;left:7px;top:15px;width:1.5px;bottom:14px;background:var(--rule)}
.walk-steps::after{background:var(--red);bottom:auto;height:var(--h,0px);transition:height .6s var(--ease)}
.walk-steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:0 0 0 36px}
.walk-steps li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;box-sizing:border-box;
  border:1.5px solid var(--rule);background:var(--paper);transition:border-color .4s,background .4s}
.walk-steps .no{grid-row:1/3;padding-top:5px;font-size:13px;color:var(--c3)}
.walk-steps b{font-size:var(--fs-h3);font-weight:700;line-height:1.35;color:var(--c3);transition:color .4s}
.walk-steps li > span:last-child{font-size:15px;line-height:1.7;color:var(--c3);transition:color .4s}
.walk-shot .image-zoom{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--card-line),0 10px 20px rgba(40,16,18,.1)}
.walk-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}

/* 没有脚本：四步和四张图各自排开 */
.walk-steps li + li{margin-top:40px}
.walk-pin{display:grid;gap:24px}
.walk-steps li b,.walk-steps li > span:last-child{color:var(--c1)}
.walk-steps li > span:last-child{color:var(--c2)}

/* 有脚本：每一步占一段滚动距离，右边截图钉住，跟着换 */
.walk.is-live .walk-steps::before{bottom:auto;height:var(--full,0px)}
.walk.is-live .walk-steps li{min-height:52vh;margin-top:0;align-content:start}
.walk.is-live .walk-steps li:last-child{min-height:0}
.walk.is-live .walk-steps li b,.walk.is-live .walk-steps li > span:last-child{color:var(--c3)}
.walk.is-live .walk-steps li.on b{color:var(--c1)}
.walk.is-live .walk-steps li.on > span:last-child{color:var(--c2)}
.walk.is-live .walk-steps li.on::before,.walk.is-live .walk-steps li.done::before{border-color:var(--red);background:var(--red)}
.walk.is-live .walk-steps li.on .no{color:var(--acc)}
.walk.is-live .walk-pin{position:sticky;top:calc(50vh - 220px);gap:0}
.walk.is-live .walk-shot{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.walk.is-live .walk-shot.on{opacity:1;transform:none;pointer-events:auto}
.reduce .walk.is-live .walk-shot{transform:none;transition:opacity .2s linear}

/* ============================================================
   03 锚点：三种组织方式排成一条图带（不加卡底，细竖线分隔），后接设备 ID 爆炸图
   ============================================================ */
.opts{margin-top:40px;gap:0}
.opts .dir{padding:0 32px;border-radius:0;background:none;border-left:1px solid var(--rule);overflow:visible}
.opts .dir:first-child{padding-left:0;border-left:0}
.opts .dir:last-child{padding-right:0}
.opts .dir-pick{background:none;box-shadow:none}
.opts .dir figcaption{margin-top:12px}
.opts .v-move{background:transparent;box-shadow:inset 0 0 0 1px var(--c3)}
.opt-fig{display:block;width:100%;height:auto;margin-top:22px;color:var(--c3);overflow:visible}
.dir-pick .opt-fig{color:var(--c1)}
.opt-fig text{font-family:var(--sans);font-size:15px;fill:currentColor;text-anchor:middle}
.o-box rect,.o-node circle{fill:var(--paper);stroke:currentColor;stroke-width:1.4}
.o-dev rect{fill:currentColor;opacity:.22}
.o-cut path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round}
.o-line path,.o-spoke path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.o-back{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:4 5}
.o-leaf circle{fill:currentColor}
.o-id{fill:var(--red)}
.opt-fig .o-idt{font-family:var(--mono);font-size:16px;font-weight:700;fill:#fff}

/* 爆炸图（03 浅色、05 深色）：标签一列在右，字和正文同一套 */
.xpl{margin:64px 0 0}
.xpl-dark{margin-top:72px}

/* ============================================================
   04 结构：信息架构对照、路径步数
   ============================================================ */
.tree,.dumb{margin-top:72px}
.dumb{margin-top:40px}

/* ============================================================
   05 分层：蓝图改版（动效小样 A）、状态轴、局部图
   ============================================================ */
.bp{--bp-blue:#2F6BFF;--bp-hi:#6E9BFF;--bp-wire:#8FB4FF;--bp-navy:#0E1626;
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;margin-top:56px}
.bp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bp-step{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;width:100%;padding:14px 16px 14px 14px;border:0;border-radius:14px;
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .4s}
.bp-step:hover{background:rgba(143,180,255,.06)}
.bp-step:focus-visible{outline:2px solid var(--bp-hi);outline-offset:2px}
.bp-n{grid-row:1/3;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--c3);padding-top:2px;transition:color .4s}
.bp-q{font-size:var(--fs-card);line-height:1.6;color:var(--c3);transition:color .4s}
.bp-a{font-size:15px;line-height:1.6;font-weight:600;color:var(--bp-wire);opacity:0;transform:translateY(4px);transition:opacity .5s,transform .6s var(--ease)}
.bp-steps li.now .bp-step{background:rgba(47,107,255,.14)}
.bp-steps li.now .bp-n,.bp-steps li.done .bp-n{color:var(--bp-hi)}
.bp-steps li.now .bp-q,.bp-steps li.done .bp-q{color:var(--c1)}
.bp-steps li.done .bp-a{opacity:1;transform:none}
.bp-ctrl{display:flex;gap:10px;margin-top:28px}
.bp-btn{font:inherit;font-size:14px;line-height:1.4;font-weight:600;padding:9px 18px;border-radius:99px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:var(--c1);transition:background-color .3s,border-color .3s}
.bp-btn:hover{border-color:var(--c2);background:rgba(255,255,255,.06)}
.bp-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.bp-btn[hidden]{display:none}
.bp-static{display:none;margin:28px 0 0}
.bp-stage-wrap{margin:0;min-width:0}
.bp-stage{position:relative;aspect-ratio:1000/956.5;border-radius:16px;overflow:hidden;background:var(--bp-navy);box-shadow:inset 0 0 0 1px rgba(143,180,255,.16)}
.bp-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bp-chip{position:absolute;z-index:2;left:14px;bottom:14px;padding:6px 12px;border-radius:99px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  background:rgba(10,17,32,.82);color:#cfe0ff;border:1px solid rgba(143,180,255,.3);pointer-events:none}
.bp-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px}
.bp-prog i{position:relative;height:3px;border-radius:2px;background:rgba(143,180,255,.16);overflow:hidden}
.bp-prog i::after{content:"";position:absolute;inset:0;background:var(--bp-hi);transform-origin:0 50%;transform:scaleX(var(--p,0))}
/* SVG 里的线框与标注（类名加 bp- 前缀，避开 case-kit 的 .big 等） */
.bp-w{fill:var(--bp-wire);stroke:var(--bp-wire);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-ann text{font-family:var(--mono);fill:#B9CEFF}
.bp-ann .an-big{font-size:44px;font-weight:700;letter-spacing:-.02em;fill:#DCE7FF}
.bp-ann .an-sm{font-size:15px;letter-spacing:.04em}
.bp-ann .an-tag{font-size:15px;font-weight:700;letter-spacing:.04em}
.bp-ann line,.bp-ann path{stroke:var(--bp-hi);stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}
.bp-ann .dash{stroke-dasharray:4 4}
.bp-ring{fill:none;stroke:var(--bp-hi);stroke-width:2;vector-effect:non-scaling-stroke}
/* 减少动效：不播动画，左栏给在职版静态图，舞台停在终态 */
.reduce .bp-ctrl,.reduce .bp-prog{display:none}
.reduce .bp-static{display:block}
.reduce .bp-static img{display:block;width:120px;height:auto;border-radius:8px;filter:grayscale(1)}
.reduce .bp-static figcaption{margin-top:8px;font-size:13px;color:var(--c3)}
.reduce .bp-a{opacity:1;transform:none;transition:none}

/* 生命周期状态图：状态名、分段与颜色取自 kit tianshu-device-ops/data.ts，流转按 store.ts，虚线为按顺序推断 */
.lc{margin-top:48px}

.crops{display:grid;gap:28px;margin-top:40px}
.crops figure{margin:0}
.crops .image-zoom{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--card-line)}
.crops figcaption{margin-top:10px;text-align:center;font-size:var(--fs-cap);line-height:1.7;color:var(--c2)}

/* ============================================================
   06 界面：点阵生成（动效小样 C）+ 两张大图
   ============================================================ */
/* 生成层挂在 body 上，变量写在 body：深色段里点阵用暖灰，界面揭示后才有颜色 */
body.cx{--gen-line:#7d7470;--gen-strong:#cfc5c0;--gen-ink:rgba(244,236,232,.24);--gen-surface:#1A1514;--gen-text:#f4ece8;--gen-muted:#9c918c;--gen-font:var(--mono)}
.gen{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:56px}
/* 播放前画框是透明的，先给一圈虚线占位；只占画框本身的范围，不影响运行时判断框旁和框下是否空着 */
.gen::before{content:'';position:absolute;top:0;left:50%;translate:-50% 0;width:min(100%,820px);aspect-ratio:2880/1800;border:1px dashed rgba(244,236,232,.16);border-radius:12px;pointer-events:none}
.gen-frame{position:relative;margin:0;width:min(100%,820px);aspect-ratio:2880/1800;border-radius:12px;overflow:hidden;background:#f6f8fb}
.gen-frame img{display:block;width:100%;height:100%}
.gen-struct{position:absolute;inset:0;container-type:size;pointer-events:none;user-select:none}
.gen-struct > *{position:absolute;box-sizing:border-box;color:transparent;line-height:1;white-space:nowrap}
.gen-struct .bx{position:absolute;border:1px solid transparent;border-radius:0;padding:0;overflow:visible}
/* 框下留 170px：运行时检查到这块空着，才在框下滚出生成日志（左侧目录占了侧面板的位置） */
.gen-foot{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:170px;text-align:center}
.gen-cap{max-width:40em;font-size:var(--fs-cap);line-height:1.8;color:var(--c2)}
.gen-cap b{color:var(--c1)}
.gen-foot .bp-ctrl{margin-top:16px}
.gen-measuring .case-capsule{pointer-events:none}

/* 两张大图错位：设备详情竖长在左，告警处置往下错开 */
.screens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:48px;margin-top:96px;align-items:start}
.screens figure:nth-child(2){margin-top:180px}
.screens figure{margin:0}
.screens .image-zoom{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--card-line)}
.screens figcaption{margin-top:12px;text-align:center;font-size:var(--fs-cap);line-height:1.7;color:var(--c2)}
.screens figcaption b{color:var(--c1)}

/* ============================================================
   07 当年与现在：左在职版（去色），右 2026 重制版
   ============================================================ */
.tn{display:grid;gap:20px;margin-top:56px}
.tn-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"h h" "o n";gap:14px 20px;padding:24px 28px 22px;border-radius:28px;background:var(--card)}
.tn-row h3{grid-area:h;font-size:var(--fs-h3);font-weight:700;line-height:1.35}
.tn-old{grid-area:o}
.tn-new{grid-area:n}
.tn figure{margin:0;min-width:0}
.tn .image-zoom{height:clamp(220px,21vw,320px);border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--card-line)}
.tn .image-zoom img{width:100%;height:100%;object-fit:contain}
.tn-old .image-zoom img{filter:grayscale(1);opacity:.85;transition:filter .5s,opacity .5s}
.tn-old .image-zoom:hover img{filter:grayscale(.3);opacity:1}
.tn figcaption{margin-top:10px;text-align:center;font-size:14px;line-height:1.6;color:var(--c2)}
.tn figcaption span{display:block;margin-bottom:2px;font-size:12.5px;font-weight:600;color:var(--c3)}
.tn-new figcaption span{color:var(--red)}

/* ============================================================
   08 同类项目、09 复盘
   ============================================================ */
/* 同类项目：编辑式列表，大号序号 + 名称和一句话 + 缩略图，缩略图左右交替 */
.shelf.proj{grid-template-columns:minmax(0,1fr);gap:0;margin-top:48px;counter-reset:proj}
.proj figure{counter-increment:proj;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,440px);grid-template-areas:"n c i";
  align-items:center;gap:40px;padding:36px 0;border-top:1px solid var(--rule)}
.proj figure:last-child{border-bottom:1px solid var(--rule)}
.proj figure:nth-child(even){grid-template-columns:96px minmax(0,440px) minmax(0,1fr);grid-template-areas:"n i c"}
.proj figure::before{content:counter(proj,decimal-leading-zero);grid-area:n;align-self:start;font-family:var(--mono);font-weight:400;font-size:52px;line-height:1;letter-spacing:-.04em;color:var(--c3)}
.proj .image-zoom{grid-area:i}
.proj figcaption{grid-area:c;margin:0;text-align:left;font-size:var(--fs-body);line-height:1.8}
.proj figcaption b{display:block;margin-bottom:8px;font-size:var(--fs-h3)}
.c-out{margin-top:120px}

/* ---------- 减少动效 ---------- */
@media (max-width:820px){
  :root{--cvw:calc(100vw - var(--g) * 2)}
  .cv-l,.cv-r{display:none}   /* 手机上只留中间主窗口，两侧压边窗口没有位置 */
  .win{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 10px 18px rgba(40,20,16,.14),0 4px 10px rgba(40,20,16,.08)}   /* 投影收进 20px 边距，不被屏幕边裁掉 */
  .opts{gap:36px}
  .opts .dir,.opts .dir:first-child,.opts .dir:last-child{padding:28px 0 0;border-left:0;border-top:1px solid var(--rule)}
  .opts .dir:first-child{padding-top:0;border-top:0}
  .proj figure,.proj figure:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "i" "c";gap:16px;padding:28px 0}
  .proj figure::before{font-size:40px}
}

@media (prefers-reduced-motion:reduce){
  .win{animation:none}
  .tn-old .image-zoom img{transition:none}
}

/* ── 08 组件库：沿用 D 页 §08 的版式（Owner 10-22） ── */
.ds-num{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1080px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(17,18,20,.1)}
.ds-num strong{display:block;font-size:clamp(36px,3.6vw,52px);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ds-num span{display:block;margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.ds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin-top:56px}
.ds-grid figure,.ds-pair figure{margin:0;min-width:0}
.ds-grid .ds-w{grid-column:1 / -1}
.ds-t{display:flex;align-items:center;justify-content:center;min-height:200px;padding:clamp(24px,4vw,56px);border-radius:16px;background:#F1EFEC}
.ds-t img{display:block;max-width:100%;height:auto;width:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(17,18,20,.06),0 12px 24px rgba(40,20,16,.08)}
.ds-grid figure:not(.ds-w) .ds-t{aspect-ratio:16/10}
.ds-grid figure:not(.ds-w) .ds-t img{width:min(100%,376px)}
.ds-w .ds-t img{width:100%}
.ds-grid figcaption,.ds-pair figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.6;color:var(--c2)}
.ds-grid figcaption b,.ds-pair figcaption b{font:600 12.5px/1.4 var(--mono);color:var(--c1);margin-right:8px}
.ds-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;max-width:1080px;margin-top:20px}
.ds-scr{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(17,18,20,.08)}
.ds-scr img{display:block;width:100%;height:auto}
@media (max-width:760px){
  .ds-num{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .ds-grid,.ds-pair{grid-template-columns:minmax(0,1fr)}
}

/* ── 09 同类项目：图和文字都能打开真实网页（Owner 10-22） ── */
.proj .proj-open{grid-area:i;position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 var(--card-line),0 18px 40px rgba(40,16,18,.12)}
.proj .proj-open img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.proj .proj-open::after{content:"打开网页 ↗";position:absolute;right:14px;bottom:14px;padding:8px 14px;border-radius:999px;background:rgba(17,18,20,.86);color:#fff;font-size:13px;line-height:1;letter-spacing:.02em;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease-hand),transform .25s var(--ease-hand)}
.proj .proj-open:hover img{transform:scale(1.02)}
.proj .proj-open:hover::after,.proj .proj-open:focus-visible::after{opacity:1;transform:none}
.proj .proj-open:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.proj .proj-link{display:table;margin-top:14px;font-size:var(--fs-cap);font-weight:600;color:var(--c1);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .2s var(--ease-hand)}
.proj .proj-link:hover{border-color:var(--c1)}
@media (prefers-reduced-motion:reduce){.proj .proj-open img,.proj .proj-open::after{transition:none}}