/* ============================================================
   Premium layer: interaction craft on top of the ZenDocs skin.
   Additive only; removing this file + premium.js reverts cleanly.
   ============================================================ */

/* ---------- hero blur-up reveal ---------- */
.hero .rv{transform:translateY(26px);filter:blur(7px)}
.hero .rv.in{filter:blur(0)}
@media(prefers-reduced-motion:reduce){.hero .rv{filter:none;transform:none}}

/* ---------- scroll progress (case pages) ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:var(--accent);transition:width .08s linear}

/* ---------- card tilt ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}

/* ---------- command palette ---------- */
.kbd-hint{display:none;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--bg-elev);color:var(--ink-3);font-size:13px;font-weight:600;
  transition:border-color .2s,color .2s;flex:0 0 auto}
.kbd-hint:hover{color:var(--ink);border-color:rgba(17,17,19,.2)}
html[data-theme="dark"] .kbd-hint:hover{border-color:rgba(255,255,255,.22)}
.kbd-hint kbd{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:6px;background:var(--bg-sunk);border:1px solid var(--line-2);color:var(--ink-3)}
@media(min-width:761px){.kbd-hint{display:inline-flex}}

.pal-backdrop{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;
  padding:min(14vh,120px) 20px 20px;
  background:var(--glass);-webkit-backdrop-filter:blur(25px) saturate(160%);backdrop-filter:blur(25px) saturate(160%)}
body.pal-open .pal-backdrop{display:flex;animation:pal-in .2s cubic-bezier(0,0,.2,1)}
body.pal-open{overflow:hidden}
@keyframes pal-in{from{opacity:0}to{opacity:1}}
.pal{width:min(640px,100%);background:var(--bg-elev);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 8px 0 rgba(0,0,0,.06), 0 24px 70px 0 rgba(0,0,0,.14);overflow:hidden;
  animation:pal-pop .2s cubic-bezier(0,0,.2,1)}
@keyframes pal-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pal-input{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.pal-input svg{width:17px;height:17px;color:var(--ink-4);flex:0 0 auto}
.pal-input input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.pal-input input::placeholder{color:var(--ink-4)}
.pal-input .esc{font-family:var(--mono);font-size:10.5px;padding:3px 7px;border-radius:6px;background:var(--bg-sunk);border:1px solid var(--line-2);color:var(--ink-4)}
.pal-list{max-height:min(46vh,420px);overflow-y:auto;padding:8px}
.pal-group{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:12px 12px 6px}
.pal-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer}
.pal-item .ic{width:30px;height:30px;border-radius:9px;background:var(--bg-sunk);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink-3);flex:0 0 auto}
.pal-item .ic svg{width:15px;height:15px}
.pal-item .tx{min-width:0}
.pal-item .t{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item .d{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item .go{margin-left:auto;color:var(--ink-4);opacity:0;flex:0 0 auto}
.pal-item .go svg{width:14px;height:14px}
.pal-item[data-act="true"]{background:rgba(91,99,211,.09)}
.pal-item[data-act="true"] .t{color:var(--accent-ink)}
.pal-item[data-act="true"] .ic{border-color:transparent;background:rgba(91,99,211,.12);color:var(--accent-ink)}
.pal-item[data-act="true"] .go{opacity:1}
html[data-theme="dark"] .pal-item[data-act="true"]{background:rgba(124,133,242,.14)}
html[data-theme="dark"] .pal-item[data-act="true"] .ic{background:rgba(124,133,242,.16)}
.pal-empty{padding:26px 16px 30px;text-align:center;font-size:14px;color:var(--ink-3)}
.pal-foot{display:flex;gap:16px;padding:10px 20px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-4)}
.pal-foot b{font-family:var(--mono);font-weight:500;font-size:10.5px;padding:1px 5px;border-radius:5px;background:var(--bg-sunk);border:1px solid var(--line-2)}

/* ---------- footer time + colophon ---------- */
.clock{font-variant-numeric:tabular-nums}
.colophon{margin:34px auto 0;max-width:52ch;font-size:12.5px;line-height:1.6;color:var(--ink-4);text-align:center;letter-spacing:-.004em}

@media(prefers-reduced-motion:reduce){
  .pal,.pal-backdrop{animation:none}
  .progress{transition:none}
}

/* ============================================================
   Unified illustration + chart system
   Chart palette validated (dataviz six checks, light & dark):
   light #1f75db + #d97706 on #fcfcfc · dark #4a8fe8 + #c9831f on #08080a
   ============================================================ */
:root{--c1:#5b63d3;--c2:#d97706}
html[data-theme="dark"]{--c1:#7c85f2;--c2:#c9831f}
.illo{width:100%;height:auto;font-family:var(--font)}
.illo .nd{fill:var(--bg-sunk);stroke:var(--line)}
.illo .nda{fill:var(--accent-soft);stroke:var(--accent);stroke-opacity:.4}
.illo .ndw{fill:rgba(224,138,46,.10);stroke:#e08a2e;stroke-opacity:.5}
.illo .t{fill:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.illo .s{fill:var(--ink-3);font-size:11.5px}
.illo .m{fill:var(--ink-4);font-size:10.5px;font-family:var(--mono)}
.illo .ta{fill:var(--accent-ink);font-size:11.5px;font-weight:600}
.illo .tw{fill:#c9831f;font-size:11.5px;font-weight:600}
.illo .ln{stroke:var(--ink-4);stroke-width:1.5;fill:none}
.illo .lna{stroke:var(--accent);stroke-width:1.5;fill:none}
.illo .lnd{stroke:var(--ink-4);stroke-width:1.5;fill:none;stroke-dasharray:5 5}
.illo .bar1{fill:var(--c1)}
.illo .bar2{fill:var(--c2)}
.illo .track{fill:var(--line-2)}
.illo .ah{fill:var(--ink-4)}
.illo .aha{fill:var(--accent)}
.fig .frame.illo-frame{padding:clamp(18px,3vw,34px);background:var(--bg-elev)}

/* code excerpt block (case studies) */
.codeblock{margin-top:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-sunk);overflow-x:auto}
.codeblock pre{margin:0;padding:20px 24px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-2);white-space:pre}
/* about block (experience head) */
.about{display:flex;gap:clamp(20px,3vw,34px);align-items:flex-start;margin-bottom:clamp(36px,4.5vw,56px);padding:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-elev)}
.about img{width:clamp(84px,10vw,116px);height:clamp(84px,10vw,116px);border-radius:16px;object-fit:cover;object-position:center 30%;flex:0 0 auto;border:1px solid var(--line)}
.about h3{font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:-.015em;margin:2px 0 8px}
.about p{font-size:14.5px;line-height:1.65;color:var(--ink-2);letter-spacing:-.008em;max-width:66ch;margin:0}
.about p + p{margin-top:8px}
@media(max-width:600px){.about{flex-direction:column}}
/* role type pill */
.rtype{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;border:1px solid var(--line);background:var(--bg-elev);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}