/* ==========================================================
   TOKENS — fully monochrome. No accent anywhere on the site
   except inside the case-study report modal (its own palette).
========================================================== */
:root{
  --bg:#ffffff;
  --bg-elevated:#fafafa;
  --surface:#f4f4f4;
  --border: rgba(0,0,0,0.1);
  --border-strong: rgba(0,0,0,0.18);
  --fg:#0a0a0a;
  --fg-soft:#666666;
  --fg-faint:#8f8f8f;
  --accent:#0a0a0a;
  --accent-contrast:#ffffff;

  --font-sans:'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:'Geist Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.4,0.64,1);
  --radius: 8px;
}
[data-theme="dark"]{
  --bg:#000000;
  --bg-elevated:#111111;
  --surface:#161616;
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --fg:#ededed;
  --fg-soft:#a0a0a0;
  --fg-faint:#707070;
  --accent:#ededed;
  --accent-contrast:#000000;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-snap-type:y proximity; }
/* proximity, not mandatory — several sections (Case Files, Toolkit) hold
   more content than one viewport. Mandatory would trap or clip that;
   proximity snaps cleanly where a section fits and just scrolls normally
   through the ones that don't. */

/* ==========================================================
   NATIVE SCROLLBAR — themed to match the site instead of
   whatever the OS/browser default looks like. Firefox uses the
   scrollbar-color shorthand; everything else uses the WebKit
   pseudo-elements. Both read the live theme variables, so this
   updates automatically when the light/dark toggle flips.
========================================================== */
html{ scrollbar-color:var(--border-strong) var(--bg); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:var(--border-strong); border-radius:20px;
  border:3px solid var(--bg); background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--fg-soft); }
::-webkit-scrollbar-corner{ background:var(--bg); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; scroll-snap-type:none; }
  /* Kill decorative motion loops entirely (float, pulse, shimmer, scanline, cursor) */
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  /* Reduced motion means gentler, not zero: state-comprehension transitions
     (fades, crossfades, backdrop appearance) stay perceptible at a quick
     150ms; only movement-heavy transitions (card lifts, button transforms)
     get zeroed below. */
  *,*::before,*::after{ transition-duration:0.01ms !important; }
  .reveal, .swap-text, .case-summary, .case-stat, .case-stat-label, .case-tag,
  .spotlight-card::before, .toast, .cmdk-overlay, .modal-overlay, .modal-content{
    transition-duration:150ms !important;
  }
}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; cursor:default;
  transition:background .3s var(--ease), color .3s var(--ease);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
::selection{ background:var(--fg); color:var(--bg); }
.mono{ font-family:var(--font-mono); }
.inner{ max-width:1120px; margin:0 auto; padding:0 48px; }
@media(max-width:860px){ .inner{ padding:0 22px; } }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--fg); outline-offset:3px; border-radius:4px;
}
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:500; background:var(--fg); color:var(--bg);
  padding:10px 16px; border-radius:6px; font-size:13px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* Track is always visible (a thin themed rail) so the reading-progress
   affordance is obvious even at the very top of the page, not just once
   the fill starts growing. */
.scroll-progress-track{
  position:fixed; top:0; left:0; width:100%; height:3px; background:var(--border); z-index:400;
}
.scroll-progress{
  height:100%; background:var(--fg); width:0%; transition:width .1s linear;
  border-radius:0 2px 2px 0; box-shadow:0 0 6px color-mix(in srgb, var(--fg) 45%, transparent);
}

.grid-backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, black 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, black 0%, transparent 72%);
}
/* stars background canvas — see script.js for the drift/parallax logic;
   pointer-events:none so it never blocks the actual page underneath it */
.bg-interactive{ position:fixed; inset:0; z-index:1; pointer-events:none; width:100%; height:100%; }

/* ==========================================================
   CURSOR — a visible circle that replaces the native pointer
   (hidden via html.custom-cursor below) and grows to fill small
   controls on hover. Position/size come from direct left/top/
   width/height set in script.js, lerped each frame but only
   re-measured against the DOM once per mouseenter.

   Solid var(--fg), no mix-blend-mode. difference-blending a dark
   fill against a mostly-light page makes it render near-white —
   i.e. invisible — almost everywhere on this theme. --fg is
   already the adaptive high-contrast ink color for whichever
   theme is active, so plain normal blending is what's actually
   reliable, not a "smarter" blend trick.
========================================================== */
html.custom-cursor, html.custom-cursor *{ cursor:none !important; }

.cursor-dot{
  position:fixed; top:0; left:0; width:18px; height:18px; border-radius:50%;
  background:var(--fg);
  pointer-events:none; z-index:999; opacity:0;
  transition:opacity .2s ease;
}
@media(max-width:900px){ .cursor-dot{ display:none; } }

/* CURSOR FOLLOW — a small label that trails the cursor with extra spring lag
   (a slower lerp than the dot itself) and shows whatever text the currently
   hovered element requests via [data-cursor-text]. Bottom-end offset from
   the cursor by default, matching the reference component's own default. */
.cursor-follow{
  position:fixed; top:0; left:0; z-index:998; pointer-events:none;
  background:var(--fg); color:var(--bg); font-family:var(--font-mono); font-size:11px; font-weight:600;
  padding:6px 11px; border-radius:20px; white-space:nowrap;
  opacity:0; transition:opacity .18s ease;
}
@media(max-width:900px){ .cursor-follow{ display:none; } }

h1,h2,h3{ font-family:var(--font-sans); margin:0; font-weight:600; letter-spacing:-0.02em; }

/* ==========================================================
   TOP BAR
========================================================== */
.topbar{
  position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  padding:14px 48px; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);
}
/* A soft fade where floating chrome meets content, instead of a hard 1px
   line — content reads as passing *under* translucent chrome, not stopping
   at a drawn boundary. */
.topbar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  background:linear-gradient(to bottom, var(--border) 0%, transparent 100%);
  opacity:.7; pointer-events:none;
}
@media(max-width:860px){ .topbar{ padding:14px 20px; } }
.topbar-brand{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.topbar-brand .dot{ width:6px; height:6px; border-radius:50%; background:var(--fg); }
.topbar-right{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  color:var(--fg-soft); border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform 120ms ease-out;
}
.icon-btn:hover{ background:var(--surface); color:var(--fg); border-color:var(--border); }
.icon-btn:active{ transform:scale(0.94); }
.icon-btn svg{ width:16px; height:16px; }

.kbd-chip{
  display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:7px;
  border:1px solid var(--border); color:var(--fg-soft); font-size:12px;
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform 120ms ease-out;
}
.kbd-chip:hover{ border-color:var(--border-strong); color:var(--fg); background:var(--surface); }
.kbd-chip:active{ transform:scale(0.96); }
.kbd-chip kbd{ font-family:var(--font-mono); font-size:10.5px; background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1px 5px; }

.persona-pill{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px; }
.p-opt{
  display:flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:999px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--fg-soft);
  transition:background .25s ease, color .25s ease, transform 120ms ease-out;
}
.p-opt.active{ background:var(--fg); color:var(--bg); }
.p-opt:active{ transform:scale(0.93); }
.p-full{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; display:inline-block; transition:max-width .35s var(--ease), opacity .2s ease, margin .35s var(--ease); }
.p-short{ transition:opacity .2s ease, max-width .3s ease; overflow:hidden; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){
  .persona-pill:hover .p-full{ max-width:130px; opacity:1; margin-left:5px; }
  .persona-pill:hover .p-short{ opacity:0; max-width:0; }
}

/* ==========================================================
   DOCK NAV
========================================================== */
.dock{
  position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:90; padding:9px 7px;
  background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(16px);
  border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,0.06);
}
.dock-inner{ display:flex; flex-direction:column; align-items:center; gap:3px; animation: dockFloat 4.5s ease-in-out infinite; }
@keyframes dockFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.dock-item{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:var(--fg-soft); position:relative;
  transition:background .2s ease, color .2s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.dock-item svg{ width:17px; height:17px; }
.dock-item:hover{ background:var(--surface); color:var(--fg); }
/* current section, kept in sync on scroll via IntersectionObserver in script.js */
.dock-item.active{ background:var(--fg); color:var(--bg); }
@media (hover:hover) and (pointer:fine){ .dock-item.active:hover{ background:var(--fg); color:var(--bg); } }
.dock-divider{ width:20px; height:1px; background:var(--border); margin:5px 0; }
.dock-label{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-4px);
  background:var(--fg); color:var(--bg); padding:5px 11px; border-radius:6px; font-size:11px;
  font-family:var(--font-mono); white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
/* Hover-motion is gated behind (hover:hover) and (pointer:fine) throughout this
   file — on touch devices, :hover fires on tap and then sticks until the next
   tap elsewhere, which reads as broken (a permanently "lifted" card, a tooltip
   that never closes). Touch users get feedback from :active instead. */
@media (hover:hover) and (pointer:fine){
  .dock-item:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.1); }
  .dock-item:hover .dock-label{ opacity:1; transform:translateY(-50%) translateX(0); }
}
.dock-item:active{ transform:scale(0.94); }
@media(max-width:900px){
  .dock{ left:50%; top:auto; bottom:14px; transform:translateX(-50%); padding:7px 9px; border-radius:18px; max-width:calc(100vw - 24px); overflow-x:auto; }
  .dock-inner{ flex-direction:row; gap:2px; animation:none; }
  .dock-item{ width:38px; height:38px; flex-shrink:0; }
  .dock-item:active{ transform:scale(0.92); }
  .dock-divider{ width:1px; height:20px; margin:0 4px; flex-shrink:0; }
  .dock-label{ display:none; }
}
@media(max-width:420px){ .dock-item{ width:34px; height:34px; } .dock-item svg{ width:15px; height:15px; } }

/* ==========================================================
   HERO
========================================================== */
.hero{ min-height:96vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:100px 24px 90px; position:relative; overflow:hidden; scroll-snap-align:start; }
.hero-inner{ position:relative; z-index:2; max-width:720px; margin:0 auto; }
.hero-scanline{
  position:absolute; left:0; right:0; top:8%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--fg) 40%, var(--fg) 60%, transparent);
  opacity:0; animation:scanSweep 2.4s var(--ease) 200ms forwards;
}
@keyframes scanSweep{ 0%{top:6%;opacity:0;} 10%{opacity:.5;} 90%{opacity:.2;} 100%{top:97%;opacity:0;} }

/* floating persona icons — monochrome rounded badges, like a scattered app-icon field. Draggable. */
.hero-float-icons{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-float-icon{ position:absolute; pointer-events:auto; cursor:grab; touch-action:none; }
.hero-float-icon.is-dragging{ cursor:grabbing; z-index:5; }
.hfi-inner{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border);
  color:var(--fg-soft); box-shadow:0 12px 26px rgba(0,0,0,0.1);
  animation:hfiFloat 5s ease-in-out infinite;
}
.hero-float-icon.is-dragging .hfi-inner{ animation-play-state:paused; box-shadow:0 18px 36px rgba(0,0,0,0.2); border-color:var(--border-strong); }
.hfi-inner svg{ width:20px; height:20px; }
@keyframes hfiFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media(max-width:900px){ .hero-float-icons{ display:none; } }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.05em;
  color:var(--fg-soft); background:var(--surface); border:1px solid var(--border);
  padding:6px 13px; border-radius:20px; opacity:0; transform:translateY(10px);
  animation:fadeUp .8s var(--ease) .1s forwards;
}
.pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--fg); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.hero-name{
  margin-top:26px; font-weight:700; letter-spacing:-0.03em; font-size:clamp(2.6rem,7vw,5rem); line-height:1.02;
  opacity:0; filter:blur(14px); transform:translateY(26px); animation:heroReveal 1.1s var(--ease) .28s forwards;
}
.shimmer-text{
  background: linear-gradient(100deg, var(--fg) 35%, var(--fg-faint) 50%, var(--fg) 65%);
  background-size: 220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: shimmerMove 4.5s linear infinite; display:inline-block;
}
@keyframes shimmerMove{ 0%{ background-position:180% center; } 100%{ background-position:-60% center; } }
@keyframes heroReveal{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }

.hero-role{
  margin-top:18px; font-size:15px; color:var(--fg-soft); opacity:0; transform:translateY(14px);
  animation:fadeUp .9s var(--ease) .5s forwards; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.role-swap{ color:var(--fg); font-weight:600; transition:opacity .25s ease; }
.role-sep{ opacity:.4; }
.hero-sub{
  margin:22px auto 0; font-size:18px; line-height:1.65; color:var(--fg-soft); max-width:540px;
  opacity:0; transform:translateY(14px); animation:fadeUp .9s var(--ease) .62s forwards; transition:opacity .3s ease;
}
.hero-actions{ margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; opacity:0; transform:translateY(14px); animation:fadeUp .9s var(--ease) .74s forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.01em; border-radius:7px; padding:12px 20px;
  display:inline-flex; align-items:center; gap:9px; font-weight:500;
  transition:transform .25s var(--ease), box-shadow .25s ease, background .2s ease, opacity .2s ease;
}
.btn svg{ width:14px; height:14px; }
.btn-primary{ background:var(--accent); color:var(--accent-contrast); }
.btn-ghost{ border:1px solid var(--border-strong); color:var(--fg); }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ transform:translateY(-2px); opacity:.88; }
  .btn-ghost:hover{ transform:translateY(-2px); background:var(--surface); }
}
.btn-primary:active{ transform:scale(0.97); opacity:.88; }
.btn-ghost:active{ transform:scale(0.97); background:var(--surface); }

.terminal{
  margin:44px auto 0; max-width:400px; text-align:left; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; font-size:12.5px; opacity:0; transform:translateY(16px);
  animation:fadeUp .9s var(--ease) .88s forwards; box-shadow:0 20px 44px -30px rgba(0,0,0,0.25);
}
.terminal-bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.tb-dot{ width:9px; height:9px; border-radius:50%; }
.tb-dot.r{ background:#ec6a5e; } .tb-dot.y{ background:#f4bf4f; } .tb-dot.g{ background:#61c454; }
.terminal-label{ margin-left:auto; font-size:10px; color:var(--fg-faint); }
.terminal-body{ padding:14px 16px; min-height:96px; color:var(--fg-soft); line-height:1.85; text-align:left; }
.terminal-body .tp{ color:var(--fg); }

.back-to-top{
  position:fixed; right:26px; bottom:34px; z-index:85; width:42px; height:42px; border-radius:50%;
  background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,0.18); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.back-to-top.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media (hover:hover) and (pointer:fine){ .back-to-top:hover{ transform:translateY(-3px) scale(1.04); } }
.back-to-top:active{ transform:scale(0.93); }
.back-to-top svg{ width:16px; height:16px; }
@media(max-width:900px){ .back-to-top{ right:14px; bottom:88px; width:38px; height:38px; } }

/* ==========================================================
   SECTIONS
========================================================== */
.section{
  min-height:100vh; padding:110px 0; position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  scroll-snap-align:start;
}
@media(max-width:860px){ .section{ padding:76px 0; } }
.section-label{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.tag-num{ font-size:12px; color:var(--bg); background:var(--fg); padding:5px 10px; border-radius:4px; }
.label-rule{ flex:1; height:1px; background:var(--border); }
.label-text{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft); }
.section-lede{ font-size:17px; color:var(--fg-soft); max-width:56ch; margin-bottom:52px; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
/* Stagger grouped entrances (30-80ms/item) so grids don't pop in all at once */
.skills-grid .skill-card:nth-child(1){ transition-delay:0ms; }
.skills-grid .skill-card:nth-child(2){ transition-delay:60ms; }
.skills-grid .skill-card:nth-child(3){ transition-delay:120ms; }
.cred-list .cred-card:nth-child(1){ transition-delay:0ms; }
.cred-list .cred-card:nth-child(2){ transition-delay:60ms; }
.cred-list .cred-card:nth-child(3){ transition-delay:120ms; }
.roadmap .roadmap-item:nth-child(1){ transition-delay:0ms; }
.roadmap .roadmap-item:nth-child(2){ transition-delay:60ms; }
.roadmap .roadmap-item:nth-child(3){ transition-delay:120ms; }
.swap-text{ transition:opacity .28s ease; }

/* spotlight card — monochrome glow now, not accent-colored */
.spotlight-card{ position:relative; overflow:hidden; }
.spotlight-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--fg) 10%, transparent), transparent 70%);
}
@media (hover:hover) and (pointer:fine){ .spotlight-card:hover::before{ opacity:1; } }
.spotlight-card > *{ position:relative; z-index:1; }

/* ==========================================================
   ROADMAP — monochrome
========================================================== */
.roadmap{ position:relative; padding-left:44px; margin-top:12px; }
.roadmap::before{ content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:var(--border-strong); }
.roadmap-item{ position:relative; padding-bottom:26px; }
.roadmap-item:last-child{ padding-bottom:0; }
.roadmap-node{
  position:absolute; left:-44px; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--bg); border:2px solid var(--fg); display:flex; align-items:center; justify-content:center; color:var(--fg);
}
.roadmap-node svg{ width:14px; height:14px; }
.roadmap-node-next{ border-style:dashed; color:var(--fg-faint); border-color:var(--border-strong); }
.roadmap-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:24px 26px; transition:transform .3s var(--ease), border-color .3s ease; }
@media (hover:hover) and (pointer:fine){ .roadmap-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); } }
.roadmap-card:active{ transform:scale(0.99); }
.roadmap-card-next{ background:transparent; border-style:dashed; }
.roadmap-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.roadmap-status{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--fg); background:var(--surface); padding:4px 10px; border-radius:20px; }
.roadmap-status-next{ color:var(--fg-soft); }

/* ==========================================================
   CASE CARDS
========================================================== */
.case-list{ display:flex; flex-direction:column; gap:20px; }
.case-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:32px; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
@media (hover:hover) and (pointer:fine){ .case-card:hover{ transform:translateY(-4px); box-shadow:0 20px 46px -30px rgba(0,0,0,0.3); border-color:var(--border-strong); } }
.case-card:active{ transform:scale(0.99); }
.case-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.case-id{ font-size:12px; color:var(--fg-soft); }
.case-title{ font-weight:600; font-size:22px; margin-top:4px; letter-spacing:-0.01em; }
.case-status{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-soft); border:1px solid var(--border-strong); padding:4px 10px; border-radius:20px; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.case-status .dt{ width:6px; height:6px; border-radius:50%; background:#61c454; }
.case-body{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center; }
@media(max-width:880px){ .case-body{ grid-template-columns:1fr; } }
.case-text p{ font-size:15px; line-height:1.7; color:var(--fg-soft); margin:0 0 12px; }
.case-summary{ transition:opacity .25s ease; }
.case-tags{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.case-tag{ font-size:11px; color:var(--fg-soft); border:1px solid var(--border); padding:4px 10px; border-radius:20px; transition:opacity .25s ease; }
.case-visual{ background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:16px; }
.case-stat{ font-weight:700; font-size:32px; color:var(--fg); line-height:1; transition:opacity .25s ease; letter-spacing:-0.02em; }
.case-stat-label{ font-size:11px; color:var(--fg-soft); margin-top:6px; transition:opacity .25s ease; }
.case-view-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--fg); margin-top:16px; }
.case-view-link svg{ width:14px; height:14px; transition:transform .2s ease; }
@media (hover:hover) and (pointer:fine){ .case-card:hover .case-view-link svg{ transform:translateX(4px); } }
.case-bars{ display:flex; align-items:flex-end; gap:5px; height:70px; }
.case-bars span{ flex:1; background:var(--border-strong); border-radius:3px 3px 0 0; }
.case-bars span.hi{ background:var(--fg); }
.case-line{ width:100%; height:70px; }

.tl-role{ font-family:var(--font-sans); font-weight:600; font-size:19px; letter-spacing:-0.01em; }
.tl-date{ font-size:11.5px; color:var(--bg); background:var(--fg); padding:3px 9px; border-radius:4px; }
.tl-org{ font-size:12.5px; color:var(--fg-soft); margin-bottom:14px; }
.tl-points{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.tl-points li{ font-size:15px; line-height:1.65; color:var(--fg-soft); padding-left:18px; position:relative; }
.tl-points li::before{ content:"—"; position:absolute; left:0; color:var(--fg-faint); }

/* ==========================================================
   ABOUT / SKILLS / CREDENTIALS
========================================================== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; margin-top:12px; }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.about-text p{ font-size:17px; line-height:1.75; color:var(--fg-soft); margin:0 0 18px; transition:opacity .25s ease; }
.fact-list{ display:flex; flex-direction:column; border-top:1px solid var(--border); }
.fact{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 0; border-bottom:1px solid var(--border); }
.fact-k{ font-size:12px; color:var(--fg-soft); letter-spacing:.04em; text-transform:uppercase; }
.fact-v-wrap{ display:flex; align-items:center; gap:8px; }
.fact-v{ font-family:var(--font-sans); font-size:14px; font-weight:600; text-align:right; }
.copy-btn{ width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--fg-faint); flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform 120ms ease-out; }
.copy-btn:hover{ background:var(--surface); color:var(--fg); }
.copy-btn:active{ transform:scale(0.9); }
.copy-btn svg{ width:13px; height:13px; }

.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px; }
@media(max-width:860px){ .skills-grid{ grid-template-columns:1fr; } }
.skill-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:24px; transition:transform .3s var(--ease); }
@media (hover:hover) and (pointer:fine){ .skill-card:hover{ transform:translateY(-4px); } }
.skill-card:active{ transform:scale(0.99); }
.skill-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.skill-idx{ font-size:11px; color:var(--bg); background:var(--fg); padding:3px 8px; border-radius:4px; }
.skill-title{ font-family:var(--font-sans); font-weight:600; font-size:14.5px; }
.skill-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.skill-chip{ font-size:12.5px; color:var(--fg-soft); background:var(--bg); border:1px solid var(--border); padding:5px 11px; border-radius:20px; }

.cred-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media(max-width:860px){ .cred-list{ grid-template-columns:1fr; } }
.cred-card{ border-top:2px solid var(--fg); padding-top:14px; transition:transform .3s var(--ease); }
@media (hover:hover) and (pointer:fine){ .cred-card:hover{ transform:translateY(-3px); } }
.cred-label{ font-family:var(--font-sans); font-weight:600; font-size:14.5px; margin-bottom:5px; }
.cred-detail{ font-size:13px; color:var(--fg-soft); line-height:1.55; }

/* ==========================================================
   CONTACT
========================================================== */
.contact-h2{ font-size:clamp(2.1rem,4.6vw,3.2rem); font-weight:700; margin:22px 0 16px; letter-spacing:-.02em; }
.contact-p{ color:var(--fg-soft); font-size:17px; max-width:480px; margin:0 auto 40px; transition:opacity .25s ease; }
.contact-links{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.clink{ display:flex; align-items:center; gap:8px; font-size:13px; border:1px solid var(--border); padding:12px 18px; border-radius:8px;
  transition:border-color .25s ease, background .25s ease, transform .25s var(--ease); }
.clink svg{ width:15px; height:15px; }
@media (hover:hover) and (pointer:fine){ .clink:hover{ border-color:var(--border-strong); background:var(--surface); transform:translateY(-3px); } }
.clink:active{ transform:scale(0.97); transition-duration:120ms; }

/* ==========================================================
   FOOTER — just links + a quiet credit line
========================================================== */
.site-footer{ position:relative; z-index:2; border-top:1px solid var(--border); background:var(--bg-elevated); overflow:hidden; }
.footer-top{ padding:48px 48px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.footer-icons{ display:flex; gap:10px; }
.footer-icon{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--fg-soft);
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s var(--ease); }
.footer-icon svg{ width:16px; height:16px; }
@media (hover:hover) and (pointer:fine){ .footer-icon:hover{ border-color:var(--border-strong); color:var(--fg); background:var(--surface); transform:translateY(-2px); } }
.footer-icon:active{ transform:scale(0.94); transition-duration:120ms; }
.footer-nav{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.footer-nav a{ font-size:13px; color:var(--fg-soft); transition:color .2s ease; }
.footer-nav a:hover{ color:var(--fg); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:22px 48px; border-top:1px solid var(--border); font-size:11.5px; color:var(--fg-soft); }
@media(max-width:640px){ .footer-bottom{ justify-content:center; text-align:center; padding:18px 22px; } .footer-top{ padding:36px 22px 26px; } }

/* ==========================================================
   MODAL — its own dark, colorful "report" theme, independent
   of the site's light/dark setting and the site's monochrome
   rule. This is the one deliberate place color lives.
========================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal-content{
  background:var(--bg); color:var(--fg); border:1px solid var(--border-strong); border-radius:16px;
  max-width:660px; width:100%; max-height:86vh; overflow-y:auto; transform:translateY(24px) scale(.97);
  transition:transform .4s var(--ease); position:relative; box-shadow:0 40px 90px rgba(0,0,0,0.35);
}
.modal-overlay.is-open .modal-content{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--fg);
  display:flex; align-items:center; justify-content:center; z-index:5;
  transition:background .2s ease, transform 120ms ease-out;
}
.modal-close:hover{ background:var(--fg); color:var(--bg); }
.modal-close:active{ transform:scale(0.9); }
.modal-close svg{ width:15px; height:15px; }
.modal-body{ padding:40px 36px 36px; }
.modal-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.modal-id{ font-size:11.5px; color:var(--fg-soft); }
.modal-status{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--fg); background:var(--surface); border:1px solid var(--border); padding:4px 10px; border-radius:20px; }
.modal-title{ font-size:1.65rem; margin-bottom:14px; font-weight:700; letter-spacing:-0.02em; color:var(--fg); }
.modal-desc{ color:var(--fg-soft); font-size:14.5px; line-height:1.7; margin-bottom:26px; }

.report-chart-card{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:20px 20px 8px; margin-bottom:22px; }
.report-legend{ display:flex; gap:16px; margin-bottom:10px; }
.report-legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--fg-soft); }
.report-legend-swatch{ width:9px; height:9px; border-radius:2px; }
.report-chart{ width:100%; height:150px; display:block; }

.report-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
@media(max-width:520px){ .report-stats{ grid-template-columns:1fr; } }
.report-stat{ background:var(--bg-elevated); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.report-stat-label{ font-size:12px; color:var(--fg-soft); margin-bottom:8px; }
.report-stat-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.report-stat-value{ font-size:1.9rem; font-weight:700; color:var(--fg); letter-spacing:-0.02em; }
/* Monochrome — meaning is carried by an arrow glyph (▲/▼/•) in the pill
   text itself rather than by color, so nothing here relies on red/green */
.report-pill{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:3px; background:var(--surface); color:var(--fg-soft); border:1px solid var(--border); }
.report-stat-caption{ font-size:11.5px; color:var(--fg-soft); margin-top:8px; }

.report-rows{ display:flex; flex-direction:column; margin-bottom:20px; }
.report-row{ display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--border); }
.report-row:last-child{ border-bottom:none; }
.report-row-label{ font-size:13px; color:var(--fg-soft); flex:1; }
.report-row-value{ font-family:var(--font-mono); font-size:13px; color:var(--fg); font-weight:600; }

.report-note{ font-size:12px; color:var(--fg-soft); font-style:italic; line-height:1.6; margin:0 0 22px; padding:12px 14px; background:var(--bg-elevated); border-radius:8px; border:1px solid var(--border); }

.modal-highlight{ background:var(--bg-elevated); border-left:3px solid var(--fg); border-radius:6px; padding:16px 20px; font-size:14px; line-height:1.6; color:var(--fg); margin-bottom:22px; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.modal-tag{ font-size:12px; font-weight:600; padding:6px 13px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:999px; color:var(--fg-soft); }

/* ==========================================================
   COMMAND PALETTE
========================================================== */
/* No entrance transition on the command palette — it's the highest-frequency
   surface on the site (⌘K, used many times per session) and per the
   Raycast precedent, that tier of UI should open instantly, not animate. */
.cmdk-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); z-index:400; display:flex; align-items:flex-start; justify-content:center; padding:14vh 20px 20px; opacity:0; pointer-events:none; }
.cmdk-overlay.is-open{ opacity:1; pointer-events:auto; }
.cmdk-box{ width:100%; max-width:560px; background:var(--bg); border:1px solid var(--border-strong); border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,0.35); overflow:hidden; }
.cmdk-input-wrap{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.cmdk-input-wrap svg{ width:16px; height:16px; color:var(--fg-faint); flex-shrink:0; }
.cmdk-input{ flex:1; border:none; outline:none; background:none; font-size:14.5px; color:var(--fg); font-family:var(--font-sans); }
.cmdk-input::placeholder{ color:var(--fg-faint); }
.cmdk-esc{ font-family:var(--font-mono); font-size:10.5px; color:var(--fg-faint); border:1px solid var(--border); border-radius:4px; padding:2px 6px; }
.cmdk-list{ max-height:340px; overflow-y:auto; padding:8px; }
.cmdk-group-label{ font-size:11px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.06em; padding:10px 10px 6px; }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--fg); transition:background .12s ease, transform 100ms ease-out; }
.cmdk-item:active{ transform:scale(0.98); background:var(--surface); }
.cmdk-item svg{ width:15px; height:15px; color:var(--fg-soft); flex-shrink:0; }
.cmdk-item.active{ background:var(--surface); }
.cmdk-item-hint{ margin-left:auto; font-size:11px; color:var(--fg-faint); font-family:var(--font-mono); }
.cmdk-empty{ padding:28px; text-align:center; font-size:13px; color:var(--fg-faint); }

/* ==========================================================
   TOAST
========================================================== */
.toast-wrap{ position:fixed; bottom:34px; right:26px; z-index:450; display:flex; flex-direction:column; gap:8px; }
@media(max-width:900px){ .toast-wrap{ right:14px; bottom:88px; } }
@media(max-width:480px){ .cmdk-trigger-text{ display:none; } .topbar-right{ gap:7px; } }
.toast{ display:flex; align-items:center; gap:8px; background:var(--fg); color:var(--bg); padding:11px 16px; border-radius:8px; font-size:13px; box-shadow:0 14px 30px rgba(0,0,0,0.25); transform:translateY(10px); opacity:0;
  transition:transform .3s var(--ease), opacity .3s ease; }
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:14px; height:14px; }

/* ==========================================================
   WASH TRANSITION (persona switch)
========================================================== */
.wash-overlay{ position:fixed; inset:0; z-index:250; background:var(--fg); pointer-events:none; transform:scaleY(0); transform-origin:top; opacity:0; }
.wash-overlay.animate{ animation:washSweep .7s var(--ease) forwards; }
@keyframes washSweep{
  0%{ transform:scaleY(0); transform-origin:top; opacity:1; }
  48%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  52%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:1; }
}

/* ==========================================================
   THEME TOGGLE — circular reveal via View Transitions API
========================================================== */
::view-transition-old(root){ animation:none; }
::view-transition-new(root){ animation: themeCircleReveal .6s var(--ease) forwards; clip-path: circle(0px at var(--tx, 50%) var(--ty, 50%)); }
@keyframes themeCircleReveal{ to{ clip-path: circle(150vmax at var(--tx, 50%) var(--ty, 50%)); } }