/* 枫燧堂（香港）PC 端官网 · 案例页 v1 */
:root{
  --paper:#f8f3eb;--paper-2:#f1e8db;--card:#fffcf7;
  --ink:#1f1f1f;--ink-2:#342f2c;--muted:#7a6e64;--line:#e4d7c4;--line-2:#efe5d6;
  --red:#8b3c39;--red-d:#6f2d2b;--red-l:#b9645f;
  --gold:#d1b68f;--gold-d:#a8865a;--gold-l:#eadbc2;
  --brown:#7e4c37;--blue:#3b546a;
  --shadow:0 30px 60px -34px rgba(90,40,25,.45);
  --shadow-s:0 14px 30px -20px rgba(90,40,25,.4);
  --serif:var(--font-display);
  --sans:var(--font-sans);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:106px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-body)/1.8 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-l);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;margin:0;text-align:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.3;text-wrap:balance}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg .fill{fill:currentColor;stroke:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:var(--radius)}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--radius)}
.skip-link:focus{top:12px}
.wrap{width:min(var(--detail-width),calc(100% - 96px));margin-inline:auto}

/* ---------- shared button system (page-scoped) ---------- */
.ui-button{display:inline-flex;align-items:center;cursor:pointer}
.ui-button--solid,.ui-button--outline,.ui-button--muted,.ui-button--ghost,.ui-button--outline-dark{gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-size:var(--fs-body);font-weight:500;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.ui-button--solid::after,.ui-button--outline::after,.ui-button--muted::after,.ui-button--ghost::after,.ui-button--outline-dark::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 2h2v2H4zM6 4h2v2H6zM8 6h2v2H8zM6 8h2v2H6zM4 10h2v2H4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 2h2v2H4zM6 4h2v2H6zM8 6h2v2H8zM6 8h2v2H6zM4 10h2v2H4z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--ease)}
.ui-button--back::after{order:-1;transform:scaleX(-1)}
.ui-button--solid:hover,.ui-button--outline:hover,.ui-button--muted:hover,.ui-button--ghost:hover,.ui-button--outline-dark:hover{transform:translateY(-2px)}
.ui-button--solid:hover::after,.ui-button--outline:hover::after,.ui-button--ghost:hover::after{transform:translateX(3px)}
.ui-button--back:hover::after{transform:scaleX(-1) translateX(3px)}
.ui-button--solid{background:var(--red);color:#fff;box-shadow:0 14px 26px -14px rgba(139,60,57,.9)}
.ui-button--solid:hover{background:var(--red-d)}
.ui-button--outline{background:var(--card);border-color:var(--line);color:var(--ink-2)}
.ui-button--outline:hover{border-color:var(--red);color:var(--red)}
.ui-button--outline-dark{background:var(--card);border-color:var(--red);color:var(--red)}
.ui-button--outline-dark:hover{background:var(--red);color:#fff}
.ui-button--muted{background:var(--paper-2);color:var(--muted)}
.ui-button--muted:hover{color:var(--ink)}
.ui-button--ghost{color:var(--red);border-color:rgba(139,60,57,.35)}
.ui-button--ghost:hover{background:rgba(139,60,57,.07)}
.ui-icon-button{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:var(--fs-card-title);transition:background .2s,color .2s,border-color .2s,transform .2s}
.ui-icon-button:hover{border-color:var(--red);color:var(--red)}
.ui-icon-button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ui-icon-button:disabled{opacity:.35;pointer-events:none}

.seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.ui-segmented__item{white-space:nowrap;padding:9px 20px;border-radius:999px;font-size:var(--fs-body);color:var(--muted);transition:background .25s,color .25s}
.ui-segmented__item:hover{color:var(--ink)}
.ui-segmented__item.active{background:var(--red);color:#fff}

/* ---------- nav ---------- */
.site-nav{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;padding:12px 4% 0;background:rgba(248,243,235,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-nav.is-scrolled{border-color:var(--line);box-shadow:0 10px 30px -24px rgba(90,40,25,.5)}
.site-nav .project-back{justify-self:start;min-height:38px;padding:0 16px;font-size:var(--fs-small)}
.nav-next{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--ink-2);transition:color .2s}
.nav-next:hover{color:var(--red)}
.wordmark{font-family:var(--serif);font-size:var(--fs-card-title);font-weight:700;display:flex;align-items:center;gap:10px}
.wordmark small{font:var(--fs-small) var(--sans);color:var(--muted)}
.seal{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius);background:var(--red);color:#f6e6cf;font-size:var(--fs-lead);font-weight:900;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.chapter-nav{grid-column:1/-1;display:flex;justify-content:center;gap:2px;overflow-x:auto;scrollbar-width:none;margin-top:6px}
.chapter-nav::-webkit-scrollbar{display:none}
.chapter-nav a{white-space:nowrap;font-size:var(--fs-small);color:var(--muted);padding:9px 13px 11px;position:relative;transition:color .2s}
.chapter-nav a:hover{color:var(--ink)}
.chapter-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;border-radius:var(--radius);background:var(--red);transform:scaleX(0);transition:transform .35s var(--ease)}
.chapter-nav a[aria-current]{color:var(--red);font-weight:500}
.chapter-nav a[aria-current]::after{transform:scaleX(1)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--gold))}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- cover ---------- */
.cover{position:relative;padding:72px 0 64px;overflow:hidden}
.cover-bg{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;width:520px;height:260px;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 130' fill='none' stroke='%23d1b68f' stroke-width='2'%3E%3Cpath d='M20 100c0-22 18-40 40-40 6-24 28-42 54-42 30 0 54 24 54 54h40c14 0 26 12 26 26'/%3E%3Cpath d='M114 72a20 20 0 1 1 20-20 10 10 0 1 1-10-10'/%3E%3Cpath d='M60 60a14 14 0 1 1 14 14'/%3E%3Cpath d='M168 72a12 12 0 1 1 12 12'/%3E%3Cpath d='M8 112h236'/%3E%3C/svg%3E") center/contain no-repeat}
.cloud-a{right:-80px;top:20px}
.cloud-b{left:-140px;bottom:30px;transform:scaleX(-1);opacity:.35}
.cover-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.eyebrow span{font-size:var(--fs-small);letter-spacing:.12em;color:var(--red);padding:4px 12px;border:1px solid rgba(139,60,57,.3);border-radius:999px}
.cover h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:.02em;line-height:1.18}
.cover h1 em{font-style:normal;color:var(--red)}
.lead{margin-top:22px;font-size:var(--fs-lead);color:var(--ink-2);max-width:30em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{font-size:var(--fs-small);color:var(--muted);background:var(--paper-2);padding:4px 12px;border-radius:var(--radius)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.project-detail-cover{position:relative;perspective:1200px}
.cover-zoom{display:block;width:100%;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .4s;cursor:zoom-in}
.cover-zoom img{width:100%;transition:transform 1.2s var(--ease)}
.cover-zoom:hover img{transform:scale(1.03)}
.project-detail-cover figcaption{margin-top:14px;font-size:var(--fs-small);color:var(--muted);text-align:right;letter-spacing:.06em}
.cover-meta{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cover-meta div{padding:20px 22px}
.cover-meta div+div{border-left:1px solid var(--line)}
.cover-meta dt{font-size:var(--fs-small);color:var(--muted);letter-spacing:.08em}
.cover-meta dd{margin-top:4px;font-family:var(--serif);font-size:var(--fs-card-title);font-weight:600}
.cover-meta b{color:var(--red);font-variant-numeric:tabular-nums}

/* ---------- chapters ---------- */
.chapter{padding:110px 0}
.chapter-alt{background:var(--paper-2)}
.chapter-head{margin-bottom:48px;max-width:760px}
.chapter-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;max-width:none}
.chapter-head-row>div:first-child{max-width:760px}
.kicker{font-size:var(--fs-small);letter-spacing:.2em;color:var(--gold-d);margin-bottom:12px}
.chapter-head h2{font-size:var(--fs-h2);position:relative;padding-bottom:18px}
.chapter-head h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;background:var(--red)}
.chapter-head h2 span{font-size:var(--fs-card-title);font-weight:500;margin-left:14px;color:inherit;opacity:.8}
.chapter-lead{margin-top:22px;color:var(--ink-2);font-size:var(--fs-lead)}

/* 项目背景 */
.chapter-red{position:relative;background:var(--red);color:#fff;overflow:hidden}
.chapter-red::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 500px at 85% -10%,rgba(255,220,180,.18),transparent 60%),radial-gradient(800px 400px at -10% 110%,rgba(0,0,0,.25),transparent 60%);pointer-events:none}
.chapter-red .wrap{position:relative}
.chapter-red .kicker{color:var(--gold)}
.chapter-red .chapter-head h2::after{background:#fff}
.bg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bg-card{padding:32px 28px;border-radius:var(--radius);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px);transition:background .3s,transform .4s var(--ease)}
.bg-card:hover{background:rgba(255,255,255,.16);transform:translateY(-4px)}
.bg-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(234,219,194,.6);color:var(--gold-l);font-size:var(--fs-title);margin-bottom:18px}
.bg-card h3{font-size:var(--fs-title);margin-bottom:10px}
.bg-card p{color:rgba(255,255,255,.86);font-size:var(--fs-body)}
.goals{margin-top:28px;padding:40px 48px;border-radius:var(--radius);background:var(--card);color:var(--ink)}
.goals h3{font-size:var(--fs-title);color:var(--red);margin-bottom:20px}
.goal-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;counter-reset:g}
.goal-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;counter-increment:g;padding:16px 0;border-top:1px solid var(--line-2)}
.goal-list li::before{content:counter(g,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);font-size:var(--fs-title);font-weight:700;line-height:1;color:var(--gold)}
.goal-list b{font-family:var(--serif);font-size:var(--fs-lead);color:var(--red)}
.goal-list span{color:var(--ink-2);font-size:var(--fs-body)}

/* 栅格 */
.grid-lab{padding:32px;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line-2)}
.grid-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.range{display:flex;align-items:center;gap:16px;font-size:var(--fs-body);color:var(--ink-2)}
.range output{font-variant-numeric:tabular-nums;color:var(--red);font-weight:700;display:inline-block;min-width:3.2em;text-align:right}
.range input{width:240px;accent-color:var(--red)}
.grid-stage{position:relative}
.grid-ruler{display:flex;align-items:center;gap:16px;color:#e86a4a;font-size:var(--fs-lead);letter-spacing:.04em;margin-bottom:14px}
.grid-ruler::before,.grid-ruler::after{content:"";flex:1;height:1px;background:#f0a088}
.grid-screen{border-radius:var(--radius);overflow:hidden;border:8px solid #fff;box-shadow:0 20px 50px -30px rgba(90,40,25,.5);background:#fff}
.gs-nav{display:flex;align-items:center;gap:14px;height:34px;padding:0 18px;background:#3d3936}
.gs-nav i{width:40px;height:6px;border-radius:var(--radius);background:rgba(255,255,255,.25)}
.gs-nav i:first-child{width:64px;background:var(--gold)}
.gs-body{position:relative;height:300px;background:#faf8f5;padding:24px var(--pad,9.17%);transition:padding .3s var(--ease)}
.gs-cols,.gs-blocks{position:absolute;inset:24px var(--pad,9.17%);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap,1.39%);transition:inset .3s var(--ease),column-gap .3s}
.gs-cols i{background:#fde9e4;border-radius:var(--radius)}
.gs-blocks{align-content:start;row-gap:14px;padding-top:28px}
.gs-blocks span{height:76px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(139,60,57,.92),rgba(126,76,55,.92));color:#f6e6cf;display:grid;place-items:center;font-size:var(--fs-small);letter-spacing:.06em;animation:pop .45s var(--ease) both}
.gs-blocks span:nth-child(even){background:linear-gradient(135deg,rgba(59,84,106,.9),rgba(52,47,44,.9))}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.gs-measure{position:absolute;left:var(--pad,9.17%);right:var(--pad,9.17%);bottom:34px;display:flex;align-items:center;gap:12px;color:#e2553a;font-size:var(--fs-card-title);transition:left .3s var(--ease),right .3s var(--ease)}
.gs-measure::before,.gs-measure::after{content:"";flex:1;height:2px;background:#e86a4a}
.gs-measure span{background:#faf8f5;padding:0 6px;font-variant-numeric:tabular-nums}
.grid-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.grid-readout div{padding:14px 18px;border-radius:var(--radius);background:var(--paper)}
.grid-readout dt{font-size:var(--fs-small);color:var(--muted)}
.grid-readout dd{font-family:var(--serif);font-size:var(--fs-card-title);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 视觉规范 */
.spec-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}
.spec-side{display:grid;gap:24px}
.spec-block{padding:28px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-2)}
.spec-block h3{font-size:var(--fs-card-title);margin-bottom:18px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swatch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px;border-radius:var(--radius);border:1px solid transparent;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.swatch i{display:block;width:100%;aspect-ratio:1/.82;border-radius:var(--radius);background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);margin-bottom:8px;position:relative}
.swatch:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:var(--shadow-s)}
.swatch b{font-size:var(--fs-body);font-weight:500}
.swatch code,.chips code,.text-colors code,.type-scale code{font:var(--fs-small) ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.swatch.copied i::after{content:"已复制";position:absolute;inset:auto 8px 8px auto;font-size:var(--fs-caption);padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 18px;border-radius:var(--radius);background:var(--c);color:#fff;font-size:var(--fs-body);font-weight:500;transition:transform .25s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.text-colors{display:grid;gap:10px}
.text-colors li{display:flex;align-items:center;gap:12px;font-size:var(--fs-body)}
.text-colors li::before{content:"";width:22px;height:22px;border-radius:var(--radius);background:var(--c)}
.text-colors span{flex:1;color:var(--c)}
.type-scale{display:grid;gap:8px}
.type-scale li{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.t-h1{font-size:20pt;font-family:var(--serif);font-weight:700;line-height:1.4}
.t-h2{font-size:18pt;font-family:var(--serif);font-weight:600;line-height:1.4}
.spec-note{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}

/* 页面拆解 */
.explorer{position:relative}
.ex-tabs{margin-bottom:28px}
.ex-intro{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.ex-intro h3{font-size:var(--fs-title);color:var(--red)}
.ex-intro p{color:var(--muted)}
.ex-body{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:48px;align-items:start}
.browser{position:relative;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);border:1px solid var(--line-2);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#f2ede6;border-bottom:1px solid var(--line-2)}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#e0d4c4}
.browser-bar i:first-child{background:#e88e7c}
.browser-bar span{margin-left:14px;flex:1;max-width:260px;font-size:var(--fs-caption);color:var(--muted);background:#fff;border-radius:var(--radius);padding:2px 10px}
.ex-viewport{height:min(640px,70vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.ex-canvas{position:relative}
.ex-canvas img{width:100%}
.hotspot{position:absolute;left:0;right:0;top:calc(var(--t) / var(--h) * 100%);height:calc((var(--b) - var(--t)) / var(--h) * 100%);border:2px solid transparent;border-radius:var(--radius);transition:border-color .3s,background .3s,box-shadow .3s;cursor:pointer}
#panel-home .ex-canvas{--h:1205}
#panel-fahui .ex-canvas{--h:852}
#panel-about .ex-canvas{--h:1116}
.hotspot:hover{border-color:rgba(209,182,143,.9)}
.hotspot.is-active{border-color:var(--red);background:rgba(139,60,57,.06);box-shadow:0 0 0 9999px rgba(31,31,31,.28)}
.hotspot.is-active::before{content:attr(data-n);position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font:600 var(--fs-small)/26px var(--sans);text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.ex-viewport{position:relative;isolation:isolate}
.ex-canvas{overflow:hidden}
.scroll-hint{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;font-size:var(--fs-small);color:#fff;background:rgba(31,31,31,.6);padding:4px 12px;border-radius:99px;pointer-events:none;transition:opacity .4s}
.scroll-hint svg,.scroll-hint .iconfont{animation:bob 1.6s ease-in-out infinite}
.browser.scrolled .scroll-hint{opacity:0}
@keyframes bob{50%{transform:translateY(3px)}}
.notes{display:grid;gap:4px;counter-reset:n}
.notes li{counter-increment:n}
.note{position:relative;display:grid;grid-template-columns:36px 1fr;gap:2px 14px;width:100%;padding:16px 18px;border-radius:var(--radius);border:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.note::before{content:counter(n);grid-row:span 2;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:var(--fs-small);color:var(--muted);transition:all .3s}
.note b{font-family:var(--serif);font-size:var(--fs-card-title);font-weight:600;color:var(--ink);transition:color .3s}
.note span{font-size:var(--fs-body);color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}
.note:hover{background:rgba(255,255,255,.6)}
.note.is-active{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-s)}
.note.is-active::before{background:var(--red);border-color:var(--red);color:#fff}
.note.is-active b{color:var(--red)}
.note.is-active span{-webkit-line-clamp:unset;color:var(--ink-2)}
.note.is-active::after{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:var(--radius);background:var(--red)}
.ex-side{min-width:0}
.ex-media{margin-top:20px;padding:20px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-2);animation:pop .45s var(--ease) both}
.ex-media-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
.media-btn{display:block;border-radius:var(--radius);overflow:hidden;cursor:zoom-in}
.media-btn img{width:100%;transition:transform .8s var(--ease)}
.media-btn:hover img{transform:scale(1.03)}
.ex-media figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--muted)}

/* 页面展示 */
.show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:24px}
.show-tall{grid-row:span 2}
.show-card{display:flex;flex-direction:column;align-items:stretch;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow-s);cursor:zoom-in;transition:transform .4s var(--ease),box-shadow .4s}
.show-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.show-frame{display:block;border-radius:var(--radius);overflow:hidden;background:#fff;flex:1}
.show-frame img{width:100%}
.show-tall .show-frame{position:relative;height:620px}
.show-tall .show-frame img{position:absolute;inset:0 0 auto;transition:transform 4s ease-in-out}
.show-tall:hover .show-frame img,.show-tall:focus-visible .show-frame img{transform:translateY(calc(-100% + 620px))}
.show-cap{display:flex;align-items:baseline;gap:12px;padding:16px 8px 4px;flex-wrap:wrap}
.show-cap b{font-family:var(--serif);font-size:var(--fs-card-title)}
.show-cap span{font-size:var(--fs-small);color:var(--muted)}

/* 组件 */
.rail-ctrl{display:flex;gap:10px}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(48px,calc((100vw - 1200px) / 2)) 28px;scroll-padding-inline:max(48px,calc((100vw - 1200px) / 2));scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.comp{flex:0 0 auto;width:min(380px,78vw);display:flex;flex-direction:column;align-items:stretch;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-s);cursor:zoom-in;transition:transform .4s var(--ease),box-shadow .4s}
.comp:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.comp img{width:100%;aspect-ratio:435/600;object-fit:cover;object-position:top}
.comp span{display:flex;align-items:center;gap:10px;padding:16px 20px;font-family:var(--serif);font-size:var(--fs-lead);font-weight:600}
.comp span b{color:#f08a1c;font-family:var(--sans);font-size:var(--fs-small)}

/* 完整长图 */
.full-tabs{margin-bottom:24px}
.full-wrap{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.full-wrap .project-detail-gallery{max-height:900px;overflow:hidden;transition:max-height .8s var(--ease)}
.full-wrap.is-open .project-detail-gallery{max-height:none}
.project-detail-gallery img{width:100%}
.full-fade{position:absolute;left:0;right:0;bottom:0;display:grid;place-items:center;padding:140px 0 36px;background:linear-gradient(transparent,rgba(248,243,235,.96) 70%)}
.full-wrap.is-open .full-fade{position:static;padding:28px 0;background:var(--paper-2)}

/* 结尾 */
.end{padding:120px 0;background:var(--ink-2);color:#f3e7d6;position:relative;overflow:hidden}
.end::before{content:"";position:absolute;right:-60px;top:-40px;width:480px;height:240px;opacity:.18;background:inherit}
.end-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.end-quote{font-family:var(--serif);font-size:var(--fs-h2);font-weight:600;line-height:1.4}
.end-actions{display:flex;gap:12px;flex-wrap:wrap}
.end .ui-button--muted{background:rgba(255,255,255,.08);color:#e4d7c4}
.end .ui-button--muted:hover{color:#fff}
.end .ui-button--outline{background:transparent;border-color:rgba(234,219,194,.4);color:#f3e7d6}
.end .ui-button--outline:hover{border-color:var(--gold);color:var(--gold)}
.foot{display:flex;justify-content:space-between;padding:20px 4%;font:var(--fs-small) var(--serif);color:var(--muted);background:var(--paper)}

/* misc */
.to-top{position:fixed;right:24px;bottom:24px;z-index:40;box-shadow:var(--shadow-s)}
.toast{position:fixed;left:50%;bottom:32px;z-index:200;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;font-size:var(--fs-body);transition:opacity .3s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* lightbox */
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(24,20,18,.94);color:#fff}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
.lightbox[open]{display:grid;grid-template-rows:auto 1fr;animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.lb-bar{display:flex;align-items:center;gap:12px;padding:14px 20px}
.lb-cap{flex:1;font-family:var(--serif);font-size:var(--fs-lead)}
.lb-count{font-size:var(--fs-small);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.lightbox .ui-icon-button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.lightbox .ui-icon-button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
.lb-stage{overflow:auto;display:grid;place-items:center;padding:0 72px 32px;overscroll-behavior:contain}
.lb-stage img{max-width:100%;max-height:calc(100dvh - 110px);object-fit:contain;border-radius:var(--radius);cursor:zoom-in}
.lb-stage.is-zoomed{place-items:start center}
.lb-stage.is-zoomed img{max-width:none;max-height:none;cursor:zoom-out}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%)}
.lb-prev{left:16px}.lb-next{right:16px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cover-grid{grid-template-columns:1fr}
  .ex-body{grid-template-columns:1fr}
  .browser{max-width:560px}
  .spec-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--nav-h:96px}
  .wrap{width:calc(100% - 32px)}
  .site-nav{grid-template-columns:auto 1fr;padding:10px 16px 0}
  .wordmark{justify-self:end;font-size:var(--fs-lead)}.wordmark small,.nav-next{display:none}
  .chapter-nav{justify-content:flex-start}
  .cover{padding:44px 0}
  .cloud{display:none}
  .cover-meta{grid-template-columns:1fr 1fr}
  .cover-meta div:nth-child(3){border-left:0}
  .cover-meta div:nth-child(n+3){border-top:1px solid var(--line)}
  .chapter{padding:72px 0}
  .bg-cards,.goal-list,.show-grid{grid-template-columns:1fr}
  .show-tall{grid-row:auto}
  .show-tall .show-frame{height:440px}
  .show-tall:hover .show-frame img{transform:translateY(calc(-100% + 440px))}
  .goals{padding:28px 22px}
  .grid-lab{padding:18px}
  .range{width:100%}.range input{flex:1;width:auto}
  .gs-body{height:220px}
  .grid-readout{grid-template-columns:1fr 1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .ex-media-track{grid-auto-flow:row}
  .chapter-head-row{flex-direction:column;align-items:flex-start}
  .rail{padding-inline:16px;scroll-padding-inline:16px}
  .lb-stage{padding:0 12px 24px}
  .lb-nav{top:auto;bottom:16px;transform:none}
  .end-inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* ============ v5 · 修改意见（2026-10-08） ============ */
/* 项目背景：三个栏目直接使用设计稿原图（含标题字体） */
.chapter-red{background:#8d3e3a}
.bg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bg-tile{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 40px -30px rgba(0,0,0,.6);transition:transform .4s var(--ease),box-shadow .4s}
.bg-tile:hover{transform:translateY(-4px);box-shadow:0 28px 48px -30px rgba(0,0,0,.7)}
.bg-tile img{width:100%}

/* 页面拆解：缩略图卡片式 Tab */
.ex-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:36px}
.ex-tab.ui-segmented__item{position:relative;display:flex;align-items:center;gap:16px;padding:12px 16px 12px 12px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-2);color:var(--ink);text-align:left;white-space:normal;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s var(--ease)}
.ex-tab.ui-segmented__item:hover{border-color:var(--gold);transform:translateY(-2px)}
.ex-tab-thumb{flex:none;width:68px;height:84px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.ex-tab-thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.ex-tab:hover .ex-tab-thumb img{transform:scale(1.06)}
.ex-tab-text{display:grid;gap:2px;min-width:0}
.ex-tab-text small{font-size:var(--fs-caption);letter-spacing:.14em;color:var(--gold-d)}
.ex-tab-text b{font-family:var(--serif);font-size:var(--fs-lead);font-weight:600}
.ex-tab-text em{font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ex-tab.ui-segmented__item.active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 18px 30px -20px rgba(139,60,57,.9)}
.ex-tab.active .ex-tab-text small{color:var(--gold-l)}
.ex-tab.active .ex-tab-text em{color:rgba(255,255,255,.78)}
.ex-tab.active .ex-tab-thumb{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.ex-tab.active::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;background:var(--red);transform:translateX(-50%) rotate(45deg);border-radius:3px}
#panel-fahui .ex-canvas{--h:861}
#panel-about .ex-canvas{--h:1115}

/* 视觉规范：设计组件并入 */
.spec-comp{margin-top:24px;padding:28px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line-2)}
.spec-comp-head{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px}
.spec-comp-head h3{font-size:var(--fs-card-title)}
.spec-comp-head p{color:var(--muted);font-size:var(--fs-small)}
.comp-hd{position:relative;display:block;width:100%;border-radius:var(--radius-sm);overflow:hidden;cursor:zoom-in;box-shadow:0 0 0 1px var(--line-2)}
.comp-hd img{width:100%;transition:transform .8s var(--ease)}
.comp-hd:hover img{transform:scale(1.015)}
.comp-hint{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:6px;font-size:12px;color:#fff;background:rgba(31,31,31,.66);padding:5px 12px;border-radius:999px;pointer-events:none}

/* 底部：与其他作品详情页一致（下一个项目 + 站点页脚） */
.fst-end{width:min(1180px,calc(100% - 64px));margin:0 auto;padding-bottom:112px}
.fst-end .project-detail-end{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:60px}
.fst-end .ui-button--outline{min-height:52px;padding:0 26px;gap:16px;border-radius:999px;border:1px solid #d8dae4;background:#fff;color:#263850;font-family:var(--font-sans);font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1;box-shadow:none;transition:transform .18s ease-out,background-color .18s ease,border-color .18s ease}
.fst-end .ui-button--outline:hover{border-color:#c2c5d1;background:#f8f8fb;color:#263850;transform:translateY(-1px)}
.fst-end .ui-button--outline::after{font-size:1em}
.fst-page .content-footer{display:flex;justify-content:center;gap:22px;padding:34px 32px 42px;border-top:1px solid #e3e2e5;color:#4d5564;font-family:var(--font-sans);font-size:var(--fs-body)}
.fst-page .content-footer a:hover{color:#262ef2}

@media (max-width:760px){
  .bg-tiles{grid-template-columns:1fr}
  .ex-tabs{grid-template-columns:1fr;gap:10px}
  .ex-tab.active::after{display:none}
  .spec-comp{padding:18px}
  .fst-end{width:100%;padding:0 20px 72px}
  .fst-end .project-detail-end{margin-top:42px}
  .fst-page .content-footer{justify-content:flex-start;padding:28px 20px 34px}
}

/* 非 CTA 的可点击区域不显示全站按钮箭头 */
.fst-page .cover-zoom.ui-button::after,.fst-page .swatch.ui-button::after,.fst-page .chip.ui-button::after,
.fst-page .show-card.ui-button::after,.fst-page .media-btn.ui-button::after,.fst-page .comp-hd.ui-button::after,
.fst-page .note.ui-button::after{content:none}
.fst-page .note.ui-button.is-active::after{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;height:auto;border-radius:3px;background:var(--red)}

/* ============ v6 · 设计系统直接使用设计稿截图 ============ */
.ds-fig{margin-top:28px;padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-s)}
.ds-fig:first-of-type{margin-top:0}
.ds-fig figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:16px}
.ds-fig figcaption b{font-family:var(--serif);font-size:var(--fs-card-title);font-weight:600;color:var(--ink)}
.ds-fig figcaption span{font-size:var(--fs-small);color:var(--muted)}
.ds-shot{display:block;width:100%;border-radius:var(--radius-sm);overflow:hidden;cursor:zoom-in}
.ds-shot img{width:100%;transition:transform .8s var(--ease)}
.ds-shot:hover img{transform:scale(1.01)}
.fst-page .ds-shot.ui-button::after{content:none}
@media (max-width:760px){.ds-fig{padding:14px}}