/* ══════════════════════════════════════════════════════════
   Portfolio · Claymorphism skin
   Tokens: ./tokens.css (single source of truth, do not fork)
   ══════════════════════════════════════════════════════════ */

/* app-level type scale — derived from references/token.md 字号表.
   tokens.css does not ship font-size variables; these are the component
   layer for this site and map 1:1 to the documented scale. */
:root{
  --app-size-kpi: var(--comp-kpi-display-size);
  --app-size-page-title: 40px;
  --app-size-section-title: 30px;
  --app-size-card-title: 24px;
  --app-size-group: 18px;
  --app-size-body: 16px;
  --app-size-caption: 14px;
  --app-size-label: 12px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--sys-color-bg-page);
  color:var(--sys-color-text-default);
  font-family:var(--sys-font-body);
  font-size:var(--app-size-body);
  line-height:var(--sys-lineheight-base);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--sys-color-brand-soft-active)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sys-space-card)}
.display{font-family:var(--sys-font-display);font-weight:var(--sys-weight-display)}

/* ── ambient clay blobs ───────────────────────────────── */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.blob{position:absolute;border-radius:var(--ref-radius-2xl);filter:blur(60px);opacity:.85}
.blob--a{width:34vw;height:34vw;left:-9vw;top:-8vw;background:var(--ref-lilac-wash)}
.blob--b{width:28vw;height:28vw;right:-7vw;top:14vh;background:var(--ref-sky-wash)}
.blob--c{width:30vw;height:30vw;left:24vw;bottom:-12vw;background:var(--ref-peach-wash)}
.blob--d{width:22vw;height:22vw;right:12vw;bottom:6vh;background:var(--ref-mint-wash)}
main,header,footer{position:relative;z-index:1}

/* ── nav ──────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  padding:var(--sys-space-tight) 0;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--sys-color-bg-page) 78%, transparent);
  transition:box-shadow var(--sys-duration-base) var(--sys-ease-standard);
}
.nav.on{box-shadow:var(--sys-shadow-card)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sys-space-component)}
.brand{
  display:inline-flex;align-items:center;gap:var(--sys-space-inline);
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:var(--app-size-group);
  padding:var(--ref-space-2) var(--sys-space-tight);
  border-radius:var(--sys-radius-button);
  transition:transform var(--sys-duration-fast) var(--sys-ease-standard);
}
.brand:hover{transform:translateY(-1px)}
.brand .pip{
  width:22px;height:22px;border-radius:var(--sys-radius-avatar);
  background:var(--sys-color-accent-lilac);box-shadow:var(--sys-shadow-chip);flex:none;
}
.navlinks{display:flex;align-items:center;gap:var(--ref-space-1)}
.navlink{
  font-size:var(--app-size-caption);font-weight:var(--sys-weight-caption);
  color:var(--sys-color-text-secondary);
  padding:var(--ref-space-2) var(--sys-space-tight);
  border-radius:var(--sys-radius-chip);
  transition:color var(--sys-duration-fast) var(--sys-ease-standard),
             background var(--sys-duration-fast) var(--sys-ease-standard);
}
.navlink:hover{color:var(--sys-color-text-default);background:var(--sys-color-brand-soft)}
.navlink:active{background:var(--sys-color-brand-soft-active)}
.navlink:focus-visible{outline:none;box-shadow:var(--sys-shadow-focus)}
@media(max-width:820px){.navlinks .navlink{display:none}}

/* theme toggle — icon button, four states */
.iconbtn{
  width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;color:var(--sys-color-text-secondary);
  background:var(--sys-color-bg-surface);
  border-radius:var(--sys-radius-button);
  box-shadow:var(--sys-shadow-chip);
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),
             box-shadow var(--sys-duration-fast) var(--sys-ease-standard),
             color var(--sys-duration-fast) var(--sys-ease-standard);
}
.iconbtn:hover{transform:translateY(-2px);box-shadow:var(--sys-shadow-card);color:var(--sys-color-text-default)}
.iconbtn:active{transform:translateY(0);box-shadow:var(--sys-shadow-inset)}
.iconbtn:focus-visible{outline:none;box-shadow:var(--sys-shadow-card),var(--sys-shadow-focus)}
.iconbtn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sys-shadow-inset)}
.iconbtn .moon{display:none}
[data-theme="dark"] .iconbtn .sun{display:none}
[data-theme="dark"] .iconbtn .moon{display:block}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sys-space-inline);
  min-width:80px;height:var(--comp-button-height);padding:0 var(--sys-space-card);
  border:0;cursor:pointer;
  font-family:var(--sys-font-body);font-size:var(--app-size-caption);
  font-weight:var(--sys-weight-strong);
  border-radius:var(--sys-radius-button);
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),
             box-shadow var(--sys-duration-fast) var(--sys-ease-standard),
             background var(--sys-duration-fast) var(--sys-ease-standard);
}
.btn--primary{background:var(--sys-color-brand-default);color:var(--sys-color-text-inverse);box-shadow:var(--sys-shadow-card)}
.btn--primary:hover{background:var(--sys-color-brand-hover);box-shadow:var(--sys-shadow-card-hover);transform:translateY(-2px)}
.btn--primary:active{transform:translateY(0);box-shadow:var(--sys-shadow-inset)}
.btn--primary:focus-visible{outline:none;box-shadow:var(--sys-shadow-card),var(--sys-shadow-focus)}
.btn--primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--sys-shadow-inset)}
.btn--tone-coral{background:var(--sys-color-accent-coral);color:var(--sys-color-on-coral)}
.btn--tone-coral:hover{background:var(--ref-coral-deep)}
.btn--tone-sky{background:var(--sys-color-accent-sky);color:var(--sys-color-on-sky)}
.btn--tone-sky:hover{background:var(--ref-sky-deep)}
.btn--tone-mint{background:var(--sys-color-accent-mint);color:var(--sys-color-on-mint)}
.btn--tone-mint:hover{background:var(--ref-mint-deep)}
.btn--ghost{background:transparent;color:var(--sys-color-text-secondary);box-shadow:none}
.btn--ghost:hover{background:var(--sys-color-brand-soft);color:var(--sys-color-text-default)}
.btn--ghost:active{background:var(--sys-color-brand-soft-active)}
.btn--ghost:focus-visible{outline:none;box-shadow:var(--sys-shadow-focus)}
.btn--ghost:disabled{opacity:.45;cursor:not-allowed}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:var(--sys-space-hero) 0 var(--ref-space-8)}
.hero-card{
  position:relative;overflow:hidden;
  background:var(--sys-color-bg-surface);
  background-image:var(--sys-gradient-aurora);
  border-radius:var(--sys-radius-modal);
  box-shadow:var(--sys-shadow-hero);
  padding:var(--ref-space-8) var(--ref-space-7);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sys-space-inline);
  height:28px;padding:var(--ref-space-1) var(--sys-space-tight);
  border-radius:var(--sys-radius-chip);
  background:var(--sys-color-bg-surface);
  box-shadow:var(--sys-shadow-chip);
  font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);
  color:var(--sys-color-text-secondary);
  letter-spacing:var(--sys-tracking-eyebrow);
}
.eyebrow .dot{width:8px;height:8px;border-radius:var(--sys-radius-avatar);background:var(--sys-color-accent-mint);flex:none}

h1.big{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:clamp(32px,5vw,var(--app-size-page-title));
  line-height:var(--sys-lineheight-tight);
  margin:var(--sys-space-card) 0 0;max-width:16em;
}
h1.big .tone-sky{color:var(--ref-sky-deep)}
h1.big .tone-coral{color:var(--ref-coral-deep)}
h1.big .tone-lilac{color:var(--ref-lilac-deep)}

.lede{
  margin:var(--sys-space-card) 0 0;max-width:44em;
  font-size:var(--app-size-body);color:var(--sys-color-text-secondary);
  line-height:var(--sys-lineheight-relaxed);
}
.lede strong{color:var(--sys-color-text-default);font-weight:var(--sys-weight-strong)}

.kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sys-space-component);
  margin-top:var(--sys-space-section);
}
.kpi{
  position:relative;overflow:hidden;
  background:var(--sys-color-bg-surface);
  border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);
  padding:var(--sys-space-card);
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),box-shadow var(--sys-duration-fast) var(--sys-ease-standard);
}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sys-shadow-card-hover)}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--sys-radius-card) var(--sys-radius-card) 0 0}
.kpi--coral::before{background:var(--sys-color-accent-coral)}
.kpi--butter::before{background:var(--sys-color-accent-butter)}
.kpi--mint::before{background:var(--sys-color-accent-mint)}
.kpi--sky::before{background:var(--sys-color-accent-sky)}
.kpi b{
  display:block;font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:var(--comp-kpi-display-size);line-height:var(--sys-lineheight-tight);
  font-variant-numeric:tabular-nums;
}
.kpi--coral b{color:var(--ref-coral-deep)}
.kpi--butter b{color:var(--ref-butter-deep)}
.kpi--mint b{color:var(--ref-mint-deep)}
.kpi--sky b{color:var(--ref-sky-deep)}
.kpi span{display:block;margin-top:var(--ref-space-2);font-size:var(--app-size-caption);color:var(--sys-color-text-muted)}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}}

/* ── sections ─────────────────────────────────────────── */
section{padding:var(--ref-space-8) 0}
.sec-head{margin-bottom:var(--sys-space-section)}
.sec-num{
  display:inline-block;font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);
  letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-accent-lilac);
}
.sec-head h2{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:clamp(24px,3.4vw,var(--app-size-section-title));
  line-height:var(--sys-lineheight-tight);
  margin:var(--sys-space-tight) 0 0;
}
.sec-head p{margin:var(--sys-space-tight) 0 0;max-width:44em;color:var(--sys-color-text-secondary)}

/* ── about ────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sys-space-section);align-items:start}
.prose{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);padding:var(--ref-space-7);
}
.prose p{margin:0 0 var(--sys-space-component);color:var(--sys-color-text-secondary);line-height:var(--sys-lineheight-relaxed)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--sys-color-text-default);font-weight:var(--sys-weight-strong)}
.facts{
  background:var(--sys-color-bg-surface-sunk);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-inset);padding:var(--ref-space-7);
}
.facts dl{margin:0}
.facts dt{font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-text-muted)}
.facts dd{margin:var(--ref-space-2) 0 var(--sys-space-card);font-size:var(--app-size-caption);color:var(--sys-color-text-default)}
.facts dd:last-child{margin-bottom:0}
.facts dd small{display:block;color:var(--sys-color-text-muted);margin-top:var(--ref-space-1)}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* ── work cards ───────────────────────────────────────── */
.works{display:grid;gap:var(--sys-space-section)}
.wcard{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--sys-color-bg-surface);
  border-radius:var(--sys-radius-modal);
  box-shadow:var(--sys-shadow-card);
  overflow:hidden;
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),box-shadow var(--sys-duration-base) var(--sys-ease-standard);
}
.wcard:hover{transform:translateY(-4px);box-shadow:var(--sys-shadow-card-hover)}
.wcard:focus-within{box-shadow:var(--sys-shadow-card-hover),var(--sys-shadow-focus)}
.wcard-body{padding:var(--ref-space-7);display:flex;flex-direction:column}
.wcard h3{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:var(--app-size-card-title);line-height:var(--sys-lineheight-tight);
  margin:var(--sys-space-tight) 0 var(--ref-space-1);
}
.wcard .sub{margin:0;font-size:var(--app-size-caption);color:var(--sys-color-text-muted)}
.wcard .desc{margin:var(--sys-space-component) 0 0;color:var(--sys-color-text-secondary)}
.chips{display:flex;flex-wrap:wrap;gap:var(--ref-space-2);margin-top:var(--sys-space-card)}
.chip{
  display:inline-flex;align-items:center;height:28px;padding:var(--ref-space-1) var(--sys-space-tight);
  border-radius:var(--sys-radius-chip);box-shadow:var(--sys-shadow-chip);
  font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);
  background:var(--sys-color-bg-surface-sunk);color:var(--sys-color-text-secondary);
  transition:transform var(--sys-duration-fast) var(--sys-ease-standard);
}
.chip:hover{transform:translateY(-1px)}
.chip--coral{background:color-mix(in srgb,var(--ref-coral) 22%,#fff);color:var(--ref-coral-deep)}
.chip--peach{background:color-mix(in srgb,var(--ref-peach) 22%,#fff);color:var(--ref-peach-deep)}
.chip--butter{background:color-mix(in srgb,var(--ref-butter) 26%,#fff);color:var(--ref-butter-deep)}
.chip--mint{background:color-mix(in srgb,var(--ref-mint) 22%,#fff);color:var(--ref-mint-deep)}
.chip--sky{background:color-mix(in srgb,var(--ref-sky) 22%,#fff);color:var(--ref-sky-deep)}
.chip--lilac{background:color-mix(in srgb,var(--ref-lilac) 22%,#fff);color:var(--ref-lilac-deep)}
.chip--rose{background:color-mix(in srgb,var(--ref-rose) 22%,#fff);color:var(--ref-rose-deep)}
.wcard .go{
  margin-top:auto;padding-top:var(--sys-space-card);
  display:inline-flex;align-items:center;gap:var(--sys-space-inline);
  font-size:var(--app-size-caption);font-weight:var(--sys-weight-strong);
  color:var(--sys-color-text-default);
}
.wcard .go svg{transition:transform var(--sys-duration-base) var(--sys-ease-bounce)}
.wcard:hover .go svg{transform:translateX(5px)}
.wcard-shot{
  position:relative;display:block;overflow:hidden;
  padding:var(--sys-space-card) 0 0 var(--sys-space-card);
}
.wcard-shot::before{content:"";position:absolute;inset:0}
.wcard--sky .wcard-shot::before{background:var(--ref-sky-wash)}
.wcard--lilac .wcard-shot::before{background:var(--ref-lilac-wash)}
.wcard--coral .wcard-shot::before{background:var(--ref-coral-wash)}
.wcard-shot img{
  position:relative;width:100%;height:100%;min-height:320px;object-fit:cover;object-position:left top;
  border-radius:var(--sys-radius-card) 0 0 0;
  box-shadow:var(--sys-shadow-card);
  transition:transform var(--sys-duration-slow) var(--sys-ease-bounce);
}
.wcard:hover .wcard-shot img{transform:translate(-4px,-4px)}
@media(max-width:900px){
  .wcard{grid-template-columns:1fr}
  .wcard-body{padding:var(--sys-space-card)}
  .wcard-shot{order:2;padding:0 var(--sys-space-card) var(--sys-space-card)}
  .wcard-shot img{min-height:0;height:auto;object-fit:contain;border-radius:var(--sys-radius-card)}
}

/* ── method ───────────────────────────────────────────── */
.method{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sys-space-component)}
.m-item{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);padding:var(--sys-space-card);
  display:flex;gap:var(--sys-space-component);align-items:flex-start;
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),box-shadow var(--sys-duration-fast) var(--sys-ease-standard);
}
.m-item:hover{transform:translateY(-3px);box-shadow:var(--sys-shadow-card-hover)}
.m-badge{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--sys-radius-button);box-shadow:var(--sys-shadow-chip);
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-caption);
}
.m-badge--butter{background:color-mix(in srgb,var(--ref-butter) 30%,#fff);color:var(--ref-butter-deep)}
.m-badge--mint{background:color-mix(in srgb,var(--ref-mint) 26%,#fff);color:var(--ref-mint-deep)}
.m-badge--peach{background:color-mix(in srgb,var(--ref-peach) 26%,#fff);color:var(--ref-peach-deep)}
.m-badge--rose{background:color-mix(in srgb,var(--ref-rose) 26%,#fff);color:var(--ref-rose-deep)}
.m-item h4{font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-group);margin:0 0 var(--ref-space-2)}
.m-item p{margin:0;color:var(--sys-color-text-secondary);font-size:var(--app-size-caption)}
@media(max-width:760px){.method{grid-template-columns:1fr}}

/* ── quote ────────────────────────────────────────────── */
.quote{
  margin:var(--sys-space-section) 0 0;
  background:var(--sys-color-bg-surface-sunk);
  border-radius:var(--sys-radius-card);box-shadow:var(--sys-shadow-inset);
  padding:var(--ref-space-7);max-width:52em;
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:var(--app-size-group);line-height:var(--sys-lineheight-relaxed);
  color:var(--sys-color-text-default);
}
.quote strong{color:var(--ref-lilac-deep)}

/* ── footer ───────────────────────────────────────────── */
footer{padding:var(--ref-space-8) 0}
.foot-card{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-modal);
  box-shadow:var(--sys-shadow-hero);padding:var(--ref-space-7);
  display:flex;justify-content:space-between;gap:var(--sys-space-section);flex-wrap:wrap;align-items:flex-end;
}
.foot-card h3{font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-card-title);margin:0 0 var(--sys-space-tight)}
.foot-card p{margin:0;color:var(--sys-color-text-secondary);font-size:var(--app-size-caption);max-width:34em}
.foot-meta{text-align:right;color:var(--sys-color-text-muted);font-size:var(--app-size-label)}
@media(max-width:760px){.foot-card{flex-direction:column;align-items:flex-start}.foot-meta{text-align:left}}

/* ── case page ────────────────────────────────────────── */
.case-hero{padding:var(--sys-space-section) 0 0}
.back{
  display:inline-flex;align-items:center;gap:var(--sys-space-inline);
  height:36px;padding:0 var(--sys-space-tight);
  border-radius:var(--sys-radius-chip);
  font-size:var(--app-size-caption);color:var(--sys-color-text-secondary);
  background:var(--sys-color-bg-surface);box-shadow:var(--sys-shadow-chip);
  transition:transform var(--sys-duration-fast) var(--sys-ease-standard),color var(--sys-duration-fast) var(--sys-ease-standard);
}
.back:hover{transform:translateY(-1px);color:var(--sys-color-text-default)}
.back:active{box-shadow:var(--sys-shadow-inset)}
.back:focus-visible{outline:none;box-shadow:var(--sys-shadow-focus)}
.case-hero h1{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:clamp(30px,4.6vw,var(--app-size-page-title));line-height:var(--sys-lineheight-tight);
  margin:var(--sys-space-card) 0 0;
}
.case-hero .sub{margin:var(--ref-space-2) 0 0;color:var(--sys-color-text-muted);font-size:var(--app-size-caption)}
.metabar{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sys-space-component);
  margin-top:var(--sys-space-section);
}
.meta{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);padding:var(--sys-space-component) var(--sys-space-card);
}
.meta span{display:block;font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-text-muted);margin-bottom:var(--ref-space-1)}
.meta b{font-size:var(--app-size-caption);font-weight:var(--sys-weight-strong)}
@media(max-width:820px){.metabar{grid-template-columns:1fr 1fr}}

.block{padding:var(--ref-space-7) 0}
.kicker{font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-accent-lilac)}
.block h2{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:clamp(22px,2.9vw,var(--app-size-section-title));line-height:var(--sys-lineheight-tight);
  margin:var(--sys-space-tight) 0 var(--sys-space-component);
}
.block h3{
  font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);
  font-size:var(--app-size-group);margin:var(--sys-space-section) 0 var(--sys-space-tight);
}
.block p{color:var(--sys-color-text-secondary);max-width:48em;line-height:var(--sys-lineheight-relaxed)}
.block p strong,.block li strong{color:var(--sys-color-text-default);font-weight:var(--sys-weight-strong)}
.block ul{list-style:none;padding:0;margin:var(--sys-space-component) 0 0;max-width:52em}
.block ul li{position:relative;padding-left:var(--sys-space-card);margin:var(--sys-space-tight) 0;color:var(--sys-color-text-secondary);line-height:var(--sys-lineheight-relaxed)}
.block ul li::before{
  content:"";position:absolute;left:0;top:.7em;width:9px;height:9px;
  border-radius:var(--sys-radius-avatar);background:var(--sys-color-accent-lilac);box-shadow:var(--sys-shadow-chip);
}

/* figure */
.shot{
  margin:var(--sys-space-section) 0 0;
  background:var(--sys-color-bg-surface);
  border-radius:var(--sys-radius-modal);box-shadow:var(--sys-shadow-card);
  padding:var(--sys-space-tight);overflow:hidden;
}
.shot img{width:100%;border-radius:var(--sys-radius-card);box-shadow:var(--sys-shadow-chip)}
.shot figcaption{padding:var(--sys-space-tight) var(--sys-space-tight) var(--ref-space-2);font-size:var(--app-size-label);color:var(--sys-color-text-muted)}

/* module grid */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sys-space-component);margin-top:var(--sys-space-section)}
.mods--2{grid-template-columns:repeat(2,1fr)}
.mod{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);padding:var(--sys-space-card);
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),box-shadow var(--sys-duration-fast) var(--sys-ease-standard);
}
.mod:hover{transform:translateY(-3px);box-shadow:var(--sys-shadow-card-hover)}
.mod .ic{
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:var(--sys-space-tight);
  border-radius:var(--sys-radius-button);box-shadow:var(--sys-shadow-chip);
}
.ic--coral{background:color-mix(in srgb,var(--ref-coral) 24%,#fff);color:var(--ref-coral-deep)}
.ic--peach{background:color-mix(in srgb,var(--ref-peach) 24%,#fff);color:var(--ref-peach-deep)}
.ic--butter{background:color-mix(in srgb,var(--ref-butter) 28%,#fff);color:var(--ref-butter-deep)}
.ic--mint{background:color-mix(in srgb,var(--ref-mint) 24%,#fff);color:var(--ref-mint-deep)}
.ic--sky{background:color-mix(in srgb,var(--ref-sky) 24%,#fff);color:var(--ref-sky-deep)}
.ic--lilac{background:color-mix(in srgb,var(--ref-lilac) 24%,#fff);color:var(--ref-lilac-deep)}
.ic--rose{background:color-mix(in srgb,var(--ref-rose) 24%,#fff);color:var(--ref-rose-deep)}
.mod h5{font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-caption);margin:0 0 var(--ref-space-2)}
.mod p{margin:0;font-size:var(--app-size-caption);color:var(--sys-color-text-muted);line-height:var(--sys-lineheight-base)}
@media(max-width:900px){.mods{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mods{grid-template-columns:1fr}}

/* flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sys-space-component);margin-top:var(--sys-space-section)}
.fl{
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-card);
  box-shadow:var(--sys-shadow-card);padding:var(--sys-space-card);
}
.fl--hi{background:color-mix(in srgb,var(--ref-lilac) 12%,#fff)}
.fl .step{font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-text-muted)}
.fl h5{font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-caption);margin:var(--ref-space-2) 0}
.fl p{margin:0;font-size:var(--app-size-caption);color:var(--sys-color-text-muted);line-height:var(--sys-lineheight-base)}
.fl code{font-family:var(--sys-font-mono);font-size:var(--app-size-label);background:var(--sys-color-bg-surface-sunk);padding:2px var(--ref-space-2);border-radius:var(--sys-radius-chip)}
.arrow{display:grid;place-items:center;color:var(--sys-color-accent-lilac)}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}.arrow{display:none}}

/* table — outer shell floats only */
.tblwrap{
  margin-top:var(--sys-space-section);
  background:var(--sys-color-bg-surface);
  border-radius:var(--sys-radius-card);box-shadow:var(--sys-shadow-card);overflow:hidden;
}
.tbl{width:100%;border-collapse:collapse;font-size:var(--app-size-caption)}
.tbl th{
  text-align:left;background:var(--sys-color-bg-surface-sunk);
  padding:var(--sys-space-tight) var(--sys-space-card);
  font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);color:var(--sys-color-text-muted);
}
.tbl td{
  padding:var(--sys-space-component) var(--sys-space-card);
  border-bottom:1px solid var(--sys-color-line-default);
  color:var(--sys-color-text-secondary);vertical-align:top;line-height:var(--sys-lineheight-base);
}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--sys-duration-fast) var(--sys-ease-standard)}
.tbl tbody tr:hover{background:var(--sys-color-brand-soft)}
.tbl td:first-child{color:var(--sys-color-text-default);font-weight:var(--sys-weight-strong);white-space:nowrap}

/* alert / notice */
.notice{
  margin-top:var(--sys-space-section);max-width:52em;
  background:var(--sys-color-warning-bg);
  border-radius:var(--sys-radius-card);box-shadow:var(--sys-shadow-chip);
  padding:var(--sys-space-card);
  font-size:var(--app-size-caption);color:var(--sys-color-text-secondary);line-height:var(--sys-lineheight-base);
}
.notice b{color:var(--sys-color-warning-fg);font-weight:var(--sys-weight-strong)}
.notice strong{color:var(--sys-color-text-default)}

/* next case */
.nextcase{padding:var(--ref-space-7) 0}
.nextcard{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sys-space-card);flex-wrap:wrap;
  background:var(--sys-color-bg-surface);border-radius:var(--sys-radius-modal);
  box-shadow:var(--sys-shadow-card);padding:var(--ref-space-7);
  transition:transform var(--sys-duration-base) var(--sys-ease-bounce),box-shadow var(--sys-duration-base) var(--sys-ease-standard);
}
.nextcard:hover{transform:translateY(-4px);box-shadow:var(--sys-shadow-card-hover)}
.nextcard:active{transform:translateY(0);box-shadow:var(--sys-shadow-inset)}
.nextcard:focus-visible{outline:none;box-shadow:var(--sys-shadow-card-hover),var(--sys-shadow-focus)}
.nextcard span{font-size:var(--app-size-label);font-weight:var(--sys-weight-strong);letter-spacing:var(--sys-tracking-eyebrow);color:var(--sys-color-text-muted)}
.nextcard b{display:block;margin-top:var(--ref-space-2);font-family:var(--sys-font-display);font-weight:var(--sys-weight-display);font-size:var(--app-size-card-title)}
.nextcard:hover b{color:var(--ref-lilac-deep)}

/* reveal */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--sys-duration-slow) var(--sys-ease-standard),transform var(--sys-duration-slow) var(--sys-ease-bounce)}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .hero{padding:var(--sys-space-section) 0 var(--sys-space-section)}
  .hero-card{padding:var(--sys-space-card)}
  section{padding:var(--sys-space-section) 0}
  .block{padding:var(--sys-space-card) 0}
  .prose,.facts,.foot-card,.nextcard{padding:var(--sys-space-card)}
}