/* =========================================================================
   CANVAS OS - Figma-inspired portfolio design system
   Multi-page · sidebar shell · canvas + floating panels · light/dark
   --------------------------------------------------------------------------
   THEME TOKENS live in :root (light) and [data-theme="dark"].
   Change --accent to re-brand. Everything else cascades.
   ========================================================================= */

/* ----------------------------- tokens: light ----------------------------- */
:root {
  /* surfaces */
  --bg:        #F4F4F3;   /* canvas */
  --surface:   #FFFFFF;   /* panels / cards */
  --surface-2: #FAFAF9;   /* subtle raised */
  --sidebar:   #FFFFFF;

  /* text */
  --ink:   #1A1A1C;
  --ink-2: #54545A;
  --muted: #8A8A90;

  /* lines */
  --line:        #E6E6E3;
  --line-strong: #D7D7D3;

  /* Figma-inspired accents */
  --accent:      #0D99FF;  /* primary: active nav, links, focus */
  --accent-press:#0A7CD6;
  --accent-soft: #E7F4FF;
  --component:   #9747FF;  /* ◆ component dots / badges */
  --component-soft:#F1E9FF;
  --success:     #14AE5C;  /* available status */
  --danger:      #F24822;

  /* dot-grid */
  --dot: rgba(20,20,22,.07);

  /* fonts */
  --font-display: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-body:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* shape */
  --r:    14px;
  --r-sm: 10px;
  --r-xs: 7px;
  --shadow:    0 1px 2px rgba(20,20,22,.04), 0 8px 24px rgba(20,20,22,.06);
  --shadow-lg: 0 12px 28px rgba(20,20,22,.10), 0 40px 64px rgba(20,20,22,.10);
  --sidebar-w: 268px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* component glyph (Figma component icon) - colored via --component */
  --cmp-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2018%2018%27%3E%3Cpath%20d%3D%27M12.3636%204.72727L9.04547%208.04545L5.68183%204.72727L9.04547%201.36363L12.3636%204.72727ZM16.6364%209L13.3182%2012.3636L10%209L13.3182%205.68181L16.6364%209ZM8.09092%209L4.72728%2012.3636L1.36365%209L4.72728%205.68181L8.09092%209ZM12.3636%2013.3182L9.04547%2016.6364L5.68183%2013.3182L9.04547%209.95454L12.3636%2013.3182Z%27%2F%3E%3C%2Fsvg%3E");

  /* Figma-style cursors */
  --cur: url("cur-default.png") 4 3;
  --cur-link: url("cur-link.png") 9 4;
}

/* dark mode: invert the default arrow so it stays visible on dark surfaces */
[data-theme="dark"] {
  --cur: url("cur-default-dark.png") 4 3;
}

/* apply cursors */
html, body { cursor: var(--cur), auto !important; }
a, button, summary, label, .filter button, .toggle, .sb-link, .sb-tree a, .card, .shot,
[role="button"], [data-copy], .lightbox, input[type="range"], input[type="checkbox"], input[type="submit"] {
  cursor: var(--cur-link), pointer !important;
}
/* informational pills are not interactive */
.chip { cursor: var(--cur), default !important; }
/* keep a real text caret in text fields */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], textarea {
  cursor: url("cur-text.png") 12 12, text !important;
}
/* click / active state on clickable elements -> Figma ripple cursor */
a:active, button:active, summary:active, label:active, .filter button:active, .toggle:active,
.sb-link:active, .sb-tree a:active, .card:active, .shot:active, .chip:active,
[role="button"]:active, [data-copy]:active {
  cursor: url("cur-active.png") 9 8, pointer !important;
}


/* ----------------------------- tokens: dark ----------------------------- */
[data-theme="dark"] {
  --bg:        #1C1C1E;
  --surface:   #2A2A2D;
  --surface-2: #242427;
  --sidebar:   #232326;
  --ink:   #F2F2F3;
  --ink-2: #B6B6BC;
  --muted: #86868C;
  --line:        #3A3A3E;
  --line-strong: #48484D;
  --accent-soft: #11324A;
  --component-soft:#2A2140;
  --dot: rgba(255,255,255,.06);
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
}

/* ----------------------------- base ----------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background:none; border:0; color:inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.02em; margin:0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p { margin:0; }

/* mono "inspector" detail layer */
.mono { font-family: var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em; }
.kbd { font-family:var(--font-mono); font-size:.72rem; border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:6px; padding:1px 6px; color:var(--ink-2); background:var(--surface); }

/* =========================================================================
   APP SHELL
   ========================================================================= */
#app { display:flex; min-height:100dvh; }

/* ---- sidebar ---- */
.sidebar {
  position: sticky; top:0; align-self:flex-start;
  width: var(--sidebar-w); height:100dvh; flex:0 0 var(--sidebar-w);
  background: var(--sidebar); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px; gap:6px; z-index:40;
  transition: transform .4s var(--ease), flex-basis .4s var(--ease), width .4s var(--ease), opacity .3s var(--ease), background .3s, border-color .3s;
}

/* ---- collapsed state (desktop): sidebar slides away, content recenters ---- */
#app.collapsed .sidebar {
  flex-basis:0; width:0; opacity:0; transform:translateX(-18px);
  pointer-events:none; overflow:hidden; border-right-color:transparent; padding-left:0; padding-right:0;
}

/* floating pill shown when collapsed (your photo + name + expand button) */
.fig-pill {
  position:fixed; top:16px; left:16px; z-index:60; display:none;
  align-items:center; gap:10px; padding:6px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-lg);
}
#app.collapsed .fig-pill { display:flex; animation:pill-in .4s var(--ease); }
@keyframes pill-in { from{ opacity:0; transform:translateY(-10px) scale(.95); } to{ opacity:1; transform:none; } }
.fig-pill__btn { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--ink-2); transition:background .2s, color .2s; }
.fig-pill__btn:hover { background:var(--surface-2); color:var(--ink); }
.fig-pill__btn svg { width:18px; height:18px; }
.fig-pill__ava { position:relative; overflow:hidden; flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--component)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.78rem; }
.fig-pill__ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fig-pill__name { font-family:var(--font-display); font-weight:600; font-size:.92rem; padding:0 4px; white-space:nowrap; }
@media (max-width:1023px){ .fig-pill { display:none !important; } }

/* when collapsed, keep the floating pill from covering page chrome */
#app.collapsed .toolbar .crumb { margin-left:236px; transition:margin-left .4s var(--ease); }
#app.collapsed .hero { padding-top:54px; }
@media (max-width:1023px){
  #app.collapsed .toolbar .crumb { margin-left:0; }
  #app.collapsed .hero { padding-top:0; }
}
.sb-profile { display:flex; align-items:center; gap:9px; padding:4px 4px 14px 6px; border-bottom:1px solid var(--line); margin-bottom:8px; }
/* collapse toggle sits inline at the right of the profile row */
.sb-collapse { margin-left:auto; flex:0 0 26px; width:26px; height:26px; display:grid; place-items:center; border-radius:7px; color:var(--muted); transition:background .2s, color .2s; }
.sb-collapse:hover { background:var(--surface-2); color:var(--ink); }
.sb-collapse svg { width:17px; height:17px; }
@media (max-width:1023px){ .sb-collapse { display:none; } }
.sb-avatar { position:relative; overflow:hidden; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--component)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; flex:0 0 40px; }
.sb-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sb-id { flex:1 1 auto; min-width:0; }   /* full width now that the toggle is on its own row */
.sb-id .nm { font-family:var(--font-display); font-weight:600; font-size:.95rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* tagline: hidden by default, smoothly expands + fades in on hover/focus of the profile block */
.sb-id .rl-wrap { display:grid; grid-template-rows:0fr; min-width:0; transition:grid-template-rows .38s var(--ease); }
.sb-id .rl { display:block; min-width:0; max-width:100%; overflow:hidden; min-height:0; font-size:.72rem; font-style:italic; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; opacity:0; transform:translateY(2px); transition:opacity .3s var(--ease) .04s, transform .3s var(--ease) .04s; }
/* reveal only when hovering the name/text block, not the whole profile row */
.sb-id:hover .rl-wrap, .sb-id:focus-within .rl-wrap { grid-template-rows:1fr; }
.sb-id:hover .rl, .sb-id:focus-within .rl { opacity:1; transform:none; }
.sb-profile { cursor:default; }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,174,92,.45)}70%{box-shadow:0 0 0 7px rgba(20,174,92,0)}100%{box-shadow:0 0 0 0 rgba(20,174,92,0)}}

.sb-nav { display:flex; flex-direction:column; gap:2px; }
.sb-link { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-xs); color:var(--ink-2); font-size:.9rem; font-weight:500; transition:background .2s, color .2s; }
.sb-link svg { width:17px; height:17px; flex:0 0 17px; opacity:.85; }
.sb-link:hover { background:var(--surface-2); color:var(--ink); }
.sb-link.active { background:var(--accent-soft); color:var(--accent); }
[data-theme="dark"] .sb-link.active { color:#7CCBFF; }

.sb-section { margin-top:12px; padding:0 10px; }
.sb-section .lbl { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:6px 0; }
.sb-chev { display:inline-flex; color:var(--muted); transition:transform .25s var(--ease); }
.sb-chev svg { width:14px; height:14px; }
.sb-section .lbl.collapsed .sb-chev { transform:rotate(-90deg); }
.sb-tree { display:flex; flex-direction:column; gap:1px; overflow:hidden; transition:max-height .35s var(--ease); }
.sb-tree a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--r-xs); font-size:.86rem; color:var(--ink-2); transition:background .2s,color .2s; }
.sb-tree a:hover { background:var(--surface-2); color:var(--ink); }
.sb-tree a.active { color:var(--ink); background:var(--surface-2); }
.cmp { width:14px; height:14px; flex:0 0 14px; background-color:var(--component);
  -webkit-mask:var(--cmp-mask) center/contain no-repeat; mask:var(--cmp-mask) center/contain no-repeat; }

.sb-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.sb-resume { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:var(--r-xs); background:var(--ink); color:var(--bg); font-size:.85rem; font-weight:600; transition:transform .2s var(--ease); }
.sb-resume:hover { transform:translateY(-1px); }
.sb-socials { display:flex; gap:6px; }
.sb-socials a { flex:1; display:flex; align-items:center; justify-content:center; padding:9px; border:1px solid var(--line); border-radius:var(--r-xs); font-size:.74rem; color:var(--ink-2); transition:.2s; }
.sb-socials a:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.sb-li { height:15px; width:auto; display:block; }
[data-theme="dark"] .sb-li { filter:brightness(0) invert(1); }
.sb-theme { display:flex; align-items:center; justify-content:space-between; padding:6px 4px; }
.sb-theme span { font-size:.78rem; color:var(--muted); }
.toggle { width:42px; height:24px; border-radius:999px; background:var(--line-strong); position:relative; transition:background .25s; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.25); }
[data-theme="dark"] .toggle { background:var(--accent); }
[data-theme="dark"] .toggle::after { transform:translateX(18px); }

/* ---- mobile top bar ---- */
.topbar-m { display:none; position:sticky; top:0; z-index:45; height:56px; align-items:center; justify-content:space-between;
  padding:0 16px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar-m .brand { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; }
.topbar-m .sb-avatar { width:30px; height:30px; flex-basis:30px; font-size:.85rem; }
.burger { width:40px; height:40px; display:grid; place-items:center; border-radius:8px; }
.burger span { display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; transition:.3s var(--ease); }
.scrim { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:39; opacity:0; transition:opacity .3s; }
.scrim.show { display:block; opacity:1; }

/* ---- canvas / main ---- */
.canvas {
  flex:1 1 auto; min-width:0; position:relative;
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.wrap { max-width: 1080px; margin-inline:auto; padding: clamp(28px,5vw,64px) clamp(20px,4vw,56px); }

/* ---- in-page toolbar ---- */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px clamp(20px,4vw,56px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px); }
.crumb { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
.crumb a:hover { color:var(--accent); }
.crumb .sep { opacity:.5; }
.crumb .cur { color:var(--ink); }

/* =========================================================================
   COMPONENTS
   ========================================================================= */
.eyebrow { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; margin-bottom:16px; }
.lead { color:var(--ink-2); font-size:clamp(1.02rem,1.5vw,1.18rem); max-width:62ch; }
.section { padding-block: clamp(40px,6vw,80px); }
.section--lead { padding-top: clamp(72px,10vw,132px); }
.section-head { margin-bottom:34px; }

/* panel */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.panel-pad { padding: clamp(22px,3vw,34px); }

/* badges / tags */
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.03em; padding:4px 9px; border-radius:6px; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface); white-space:nowrap; }
.badge--role { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.badge--ind { color:var(--ink-2); }
.badge--status { color:var(--success); border-color:color-mix(in srgb,var(--success) 40%,var(--line)); }
.badge .cmp { width:10px; height:10px; flex-basis:10px; }
.tags { display:flex; flex-wrap:wrap; gap:7px; }

/* segmented tabs / filter pills - with sliding indicator + icons */
.filter { position:relative; display:inline-flex; gap:2px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:999px; max-width:100%; flex-wrap:wrap; }
.filter__pill { position:absolute; top:0; left:0; width:0; height:0; border-radius:999px; background:var(--ink); z-index:0;
  transition:left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease); }
.filter button { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:500; color:var(--ink-2); background:transparent; transition:color .28s var(--ease); }
.filter button svg { width:15px; height:15px; opacity:.85; transition:transform .3s var(--ease); }
.filter button:hover { color:var(--ink); }
.filter button:hover svg { transform:scale(1.12) rotate(-4deg); }
.filter button.active { color:var(--bg); }
.filter button.active svg { opacity:1; }
@media (prefers-reduced-motion: reduce){ .filter__pill { transition:none; } }
/* animated card filtering */
#workGrid [data-cat] { transition:opacity .3s var(--ease), transform .3s var(--ease); }
#workGrid [data-cat].card-hide { opacity:0; transform:scale(.96); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:10px; font-weight:600; font-size:.92rem; transition:transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; border:1px solid transparent; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-press); box-shadow:var(--shadow); }
.btn-ink { background:var(--ink); color:var(--bg); }
.btn-ghost { border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink); }
.btn .arrow { transition:transform .2s var(--ease); }
.btn:hover .arrow { transform:translateX(3px); }

/* key/value inspector rows */
.kv { display:grid; grid-template-columns: 120px 1fr; gap:10px 16px; }
.kv dt { font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding-top:2px; }
.kv dd { margin:0; color:var(--ink); font-size:.92rem; }
@media (max-width:520px){ .kv{ grid-template-columns:1fr; gap:2px 0; } .kv dd{ margin-bottom:10px; } }

/* placeholder media slot */
.media { position:relative; overflow:hidden; border-radius:var(--r); background:
  repeating-linear-gradient(45deg, color-mix(in srgb,var(--bg) 70%,var(--surface)), color-mix(in srgb,var(--bg) 70%,var(--surface)) 13px,
  color-mix(in srgb,var(--bg) 55%,var(--surface)) 13px, color-mix(in srgb,var(--bg) 55%,var(--surface)) 26px);
  border:1px solid var(--line); }
.media img { width:100%; height:100%; object-fit:cover; }
.ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; padding:22px; color:var(--muted); }
.ph svg { width:26px; height:26px; opacity:.5; }
.ph b { font-family:var(--font-display); font-weight:600; color:var(--ink-2); font-size:.92rem; }
.ph small { font-family:var(--font-mono); font-size:.72rem; }

/* =========================================================================
   HOME
   ========================================================================= */
.hero { display:grid; grid-template-columns: 1.55fr .95fr; gap:clamp(24px,4vw,48px); align-items:start; padding-top:clamp(20px,4vw,48px); }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; } }
.hero .status { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.76rem; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:6px 12px; border-radius:999px; margin-bottom:24px; }
.hero .status .dot{ width:7px;height:7px;border-radius:50%;background:var(--success); }
.hero h1 { max-width:15ch; }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .lead { margin-top:22px; }
.hero .cta { margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
/* hero photo - Polaroid frame; tilts in on load via .tilted */
.hero-photo { position:relative; align-self:center; background:#fff; padding:14px 14px 46px; border-radius:4px; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,20,22,.05), 0 22px 48px rgba(20,20,22,.18);
  transform:rotate(0deg); transition:transform .85s var(--ease); }
.hero-photo.tilted { transform:rotate(-8deg); }
.hero-photo__img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; }
/* Figma cursor-chat: starts off to the right, slides in on load */
.hero-cursor { position:absolute; right:-58px; bottom:24px; width:158px; height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(13,153,255,.28));
  transform:translateX(80px) rotate(8deg); opacity:0; transition:transform .85s var(--ease), opacity .6s var(--ease); }
.hero-cursor.in { transform:translateX(0) rotate(8deg); opacity:1; }
@media (max-width:900px){
  .hero-photo { max-width:320px; margin:26px auto 6px; }
  .hero-cursor { width:132px; right:-30px; }
}
@media (max-width:520px){ .hero-cursor { width:114px; right:-14px; bottom:6px; } }
@media (prefers-reduced-motion: reduce){
  .hero-photo { transform:rotate(-8deg); }
  .hero-cursor { transform:rotate(8deg); opacity:1; }
}

/* headline 'just click' - starts black, magically turns blue when the cursor clicks */
.hero h1 em#hlJustClick { display:inline-block; font-style:normal; color:inherit; transition:color .45s var(--ease); }
.hero h1 em#hlJustClick.is-blue { color:var(--accent); }
.hero h1 em#hlJustClick.hl-pop { animation:hlpop .6s var(--ease); }
@keyframes hlpop {
  0%   { transform:scale(1);    text-shadow:0 0 0 rgba(13,153,255,0); }
  35%  { transform:scale(1.09); text-shadow:0 8px 26px rgba(13,153,255,.5); }
  100% { transform:scale(1);    text-shadow:0 0 0 rgba(13,153,255,0); }
}
#hlDot { display:inline-block; }
#hlDot.swap { transform:scale(0) rotate(-35deg); opacity:0; transition:transform .18s var(--ease), opacity .18s; }
#hlDot.smiley { color:var(--accent); font-family:var(--font-mono); font-weight:700; letter-spacing:-.04em; padding-left:3px; }
#hlDot.swap-in { animation:dotin .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes dotin { 0%{transform:scale(0) rotate(18deg); opacity:0} 60%{transform:scale(1.25) rotate(-6deg); opacity:1} 100%{transform:scale(1) rotate(0)} }

/* flying intro cursor - slips out from behind the sidebar (z below the panel) */
.intro-cursor { position:absolute; z-index:35; width:30px; height:32px; pointer-events:none; transform:translate(-2px,-1px); will-change:left,top; }
.intro-cursor svg { width:100%; height:100%; display:block; filter:drop-shadow(0 4px 9px rgba(0,0,0,.28)); }
.intro-cursor.clicking { animation:introclick .34s var(--ease); }
@keyframes introclick { 0%{transform:translate(-2px,-1px) scale(1)} 42%{transform:translate(-2px,-1px) scale(.88)} 100%{transform:translate(-2px,-1px) scale(1)} }
.intro-cursor.leave { opacity:0; transform:translate(-2px,-1px) scale(.6); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.intro-click { position:absolute; z-index:34; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid var(--accent); pointer-events:none; animation:introripple .6s var(--ease) forwards; }
@keyframes introripple { 0%{transform:scale(.2); opacity:.7} 100%{transform:scale(3.6); opacity:0} }
.spark { position:absolute; z-index:34; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--accent); pointer-events:none; animation:sparkfly .65s var(--ease) forwards; }
@keyframes sparkfly { 0%{transform:translate(0,0) scale(1); opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0} }

/* Figma-style sticky note (hero stats) */
.sticky {
  align-self:center;            /* vertically centered against the hero text, no scroll-follow */
  background:#FFE299; color:#1A1A1C;
  border-radius:4px; padding:26px 24px;
  aspect-ratio:1/1; display:flex; flex-direction:column;
  transform:rotate(-8deg);
  box-shadow:0 2.5px 1px rgba(0,0,0,.02), 0 3px 5px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.10);
}
.sticky__label { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(26,26,28,.5); }
.sticky__stats { display:flex; flex-direction:column; justify-content:center; gap:0; margin-top:auto; }
.sticky__stats > div { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid rgba(26,26,28,.13); }
.sticky__stats > div:last-child { border-bottom:0; padding-bottom:0; }
.sticky__stats .k { font-family:var(--font-display); font-weight:600; font-size:1.6rem; line-height:1; color:#1A1A1C; }
.sticky__stats .k--sm { font-family:var(--font-mono); font-size:.92rem; font-weight:500; }
.sticky__stats .v { font-family:var(--font-mono); font-size:.68rem; color:rgba(26,26,28,.6); text-transform:uppercase; letter-spacing:.04em; text-align:right; max-width:11ch; line-height:1.3; }
@media (max-width:900px){
  .sticky { aspect-ratio:auto; max-width:340px; transform:rotate(-1.5deg); }
  .sticky__label { margin-bottom:18px; }
  .sticky__stats { margin-top:0; }
}

/* work grid (component cards) */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:22px; }
.cell-12{grid-column:span 12} .cell-6{grid-column:span 6} .cell-4{grid-column:span 4}
@media (max-width:820px){ .cell-6,.cell-4{ grid-column:span 12; } }

.card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; height:100%; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--line-strong); }
.card__media { aspect-ratio:16/9; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.card--lg .card__media{ aspect-ratio:21/9; }
.card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.card:hover .card__media img{ transform:scale(1.04); }
.card__bar { position:absolute; top:12px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; }
.card__body { padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card--lg .card__body{ padding:30px 34px; }
.card__title { display:flex; align-items:center; gap:9px; }
.card h3 { margin:0; }
.card__role { font-family:var(--font-mono); font-size:.76rem; color:var(--muted); }
.card__desc { color:var(--ink-2); font-size:.94rem; }
.card__link { margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.88rem; color:var(--accent); }

/* featured horizontal work cards (home) - banner left, content right, no fill/stroke */
.feature-work { display:flex; flex-direction:column; gap:clamp(22px,3vw,34px); margin-bottom:clamp(24px,3vw,34px); overflow-x:clip; }
.card--feature { flex-direction:row; align-items:center; gap:clamp(24px,4vw,52px); background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible; }
.card--feature .card__media { flex:0 0 54%; aspect-ratio:16/9; border-bottom:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.card--feature .card__body { flex:1; padding:0; gap:14px; }
.card--feature .eyebrow { margin-bottom:0; }
.card--feature h3 { font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.12; }
.card--feature .card__desc { font-size:1rem; max-width:46ch; }
.card--feature .card__link { margin-top:6px; font-size:.95rem; }
/* no hover state on the card itself - interaction lives on the button only */
.card.card--feature:hover { transform:none; box-shadow:none; border-color:transparent; }
.card.card--feature:hover .card__media img { transform:none; }
.card.card--feature:hover .card__link .arrow { transform:none; }
.card.card--feature .sel { display:none; }
.card.card--feature .card__link:hover .arrow { transform:translateX(4px); }
@media (max-width:760px){
  .card--feature { flex-direction:column; align-items:stretch; gap:16px; }
  .card--feature .card__media { flex:none; width:100%; }
  .card--feature .card__desc { max-width:none; }
}
.card:hover .card__link .arrow{ transform:translateX(4px); }

/* industries strip */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-family:var(--font-mono); font-size:.8rem; color:var(--ink-2); border:1px solid var(--line); background:var(--surface); padding:9px 15px; border-radius:8px; }
.chip b { color:var(--accent); }

/* capabilities */
.caps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .caps{ grid-template-columns:1fr; } }
.cap { padding:24px; }
.cap h4 { font-size:1.02rem; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.cap ul { list-style:none; margin:0; padding:0; }
.cap li { color:var(--ink-2); font-size:.9rem; padding:6px 0; border-bottom:1px solid var(--line); }
.cap li:last-child{ border:0; }

/* =========================================================================
   PROJECT PAGE
   ========================================================================= */
.proj-hero { padding-top:clamp(20px,3vw,40px); }
.proj-hero h1 { max-width:20ch; margin-top:14px; }
.proj-hero .lead { margin-top:18px; }
.proj-cta { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

.inspector { margin-top:30px; }
.inspector .kv { grid-template-columns:repeat(4,1fr); }
.inspector dt{ display:block; margin-bottom:5px; }
.inspector > dl { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.inspector .item dt { font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.inspector .item dd { margin:0; font-size:.9rem; color:var(--ink); }
@media (max-width:760px){ .inspector > dl{ grid-template-columns:repeat(2,1fr); } }

.proj-cover { margin-block:clamp(26px,4vw,48px); aspect-ratio:16/8; }

/* sticky section layout */
.cs-layout { display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media (max-width:960px){ .cs-layout{ grid-template-columns:1fr; } .cs-nav{ display:none; } }
.cs-nav { position:sticky; top:84px; }
.cs-nav ul { list-style:none; margin:0; padding:0; }
.cs-nav a { display:flex; gap:10px; padding:7px 0; font-size:.86rem; color:var(--muted); transition:color .2s; }
.cs-nav a .n { font-family:var(--font-mono); font-size:.72rem; opacity:.7; }
.cs-nav a:hover{ color:var(--ink); }
.cs-nav a.active{ color:var(--accent); font-weight:600; }
.cs-nav a.active .n{ opacity:1; color:var(--accent); }

.cs-block { padding-block:clamp(26px,4vw,46px); border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.cs-block:last-child{ border-bottom:0; }
.cs-block h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:16px; display:flex; align-items:baseline; gap:12px; }
.cs-block h2 .n { font-family:var(--font-mono); font-size:.85rem; color:var(--muted); font-weight:400; }
.cs-block p { color:var(--ink-2); } .cs-block p + p{ margin-top:14px; }
.cs-list { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px; }
.cs-list li { padding-left:26px; position:relative; color:var(--ink-2); }
.cs-list li::before{ content:""; position:absolute; left:2px; top:8px; width:8px; height:8px; border-radius:2px;
  background:var(--accent); transform:rotate(45deg); }

/* goals / process / decision cards */
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
@media (max-width:600px){ .cards-2{ grid-template-columns:1fr; } }
.minicard { border:1px solid var(--line); border-radius:var(--r-sm); padding:20px; background:var(--surface-2); }
.minicard .n { font-family:var(--font-mono); font-size:.72rem; color:var(--accent); margin-bottom:8px; }
.minicard h4 { font-size:1rem; margin-bottom:6px; }
.minicard p { font-size:.88rem; color:var(--muted); }

/* before / after comparison */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:600px){ .compare{ grid-template-columns:1fr; } }
.compare__col { border:1px solid var(--line); border-radius:var(--r-sm); padding:20px 22px; background:var(--surface-2); }
.compare__col--after { border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); background:var(--accent-soft); }
.compare__tag { display:inline-block; font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; padding:4px 10px; border-radius:6px; margin-bottom:14px; }
.compare__col--before .compare__tag { background:color-mix(in srgb,var(--danger) 15%,transparent); color:var(--danger); }
.compare__col--after .compare__tag { background:var(--accent); color:#fff; }
.compare__col ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.compare__col li { font-size:.9rem; color:var(--ink-2); padding-left:22px; position:relative; line-height:1.5; }
.compare__col--before li::before { content:"×"; position:absolute; left:2px; top:-1px; color:var(--danger); font-weight:700; }
.compare__col--after li::before { content:"✓"; position:absolute; left:2px; color:var(--accent); font-weight:700; }

/* process / steps - connected numbered flow */
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; counter-reset:s; margin-top:20px; }
.step { position:relative; counter-increment:s; }
.step::before {
  content:counter(s,decimal-leading-zero); display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; background:var(--accent-soft);
  border:1.5px solid color-mix(in srgb,var(--accent) 38%,var(--line)); color:var(--accent);
  font-family:var(--font-mono); font-weight:600; font-size:.78rem; margin-bottom:16px;
}
.step::after { content:""; position:absolute; top:18px; left:48px; right:-18px; height:2px; background:var(--line); }
.step:last-child::after { display:none; }
.step h4 { font-size:.96rem; margin:0 0 6px; }
.step p { font-size:.86rem; color:var(--ink-2); line-height:1.5; margin:0; }
@media (max-width:820px){
  .steps { grid-template-columns:1fr; gap:0; }
  .step { padding:0 0 26px 54px; }
  .step::before { position:absolute; left:0; top:0; margin:0; }
  .step::after { top:42px; bottom:-4px; left:18px; width:2px; height:auto; right:auto; }
  .step:last-child { padding-bottom:0; }
}

/* decision: problem -> decision -> result */
.decision { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-top:14px; }
@media (max-width:700px){ .decision{ grid-template-columns:1fr; } }
.decision > div { padding:18px; border-right:1px solid var(--line); }
.decision > div:last-child{ border-right:0; }
[data-theme="dark"] .decision>div{ border-color:var(--line); }
.decision .lab { font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
.decision .res { background:var(--accent-soft); }

/* gallery + lightbox */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
@media (max-width:700px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
.shot { aspect-ratio:4/3; cursor:zoom-in; transition:transform .3s var(--ease); }
.shot:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(10,10,12,.88); display:flex; align-items:center; justify-content:center; padding:5vw; opacity:0; pointer-events:none; transition:opacity .3s; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:10px; box-shadow:var(--shadow-lg); }
.lightbox__close{ position:absolute; top:20px; right:26px; color:#fff; font-size:2rem; line-height:1; }

/* metrics */
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
@media (max-width:760px){ .metrics{ grid-template-columns:repeat(2,1fr); } }
.metric { padding:22px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.metric .num { font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.5rem); letter-spacing:-.02em; }
.metric .num .u{ font-size:.55em; color:var(--accent); }
.metric .lbl { color:var(--muted); font-size:.85rem; margin-top:5px; }
.metric .note { font-family:var(--font-mono); font-size:.66rem; color:var(--danger); opacity:.75; margin-top:7px; }

/* before/after */
.ba { position:relative; margin-top:8px; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; user-select:none; box-shadow:var(--shadow); touch-action:none; border:1px solid var(--line); }
.ba__img{ position:absolute; inset:0; } .ba__img img,.ba__pl{ width:100%; height:100%; object-fit:cover; }
.ba__pl{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--muted); }
.ba__before .ba__pl{ background:repeating-linear-gradient(45deg,#ededea,#ededea 12px,#e6e6e2 12px,#e6e6e2 24px); }
.ba__after{ clip-path:inset(0 0 0 50%); } .ba__after .ba__pl{ background:repeating-linear-gradient(45deg,#e3e3df,#e3e3df 12px,#dadad5 12px,#dadad5 24px); }
[data-theme="dark"] .ba__before .ba__pl{ background:repeating-linear-gradient(45deg,#333,#333 12px,#2c2c2c 12px,#2c2c2c 24px); }
[data-theme="dark"] .ba__after .ba__pl{ background:repeating-linear-gradient(45deg,#3a3a3a,#3a3a3a 12px,#323232 12px,#323232 24px); }
.ba__lab{ position:absolute; top:12px; padding:4px 11px; border-radius:999px; font-family:var(--font-mono); font-size:.68rem; background:rgba(10,10,12,.72); color:#fff; }
.ba__lab--b{ left:12px; } .ba__lab--a{ right:12px; }
.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-1px); }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:grid; place-items:center; cursor:ew-resize; }
.ba input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }

/* accordion */
.acc { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-top:8px; }
.acc + .acc{ margin-top:10px; }
.acc summary { list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; font-family:var(--font-display); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .ico{ transition:transform .25s var(--ease); color:var(--muted); }
.acc[open] summary .ico{ transform:rotate(45deg); color:var(--accent); }
.acc .body { padding:0 20px 18px; color:var(--ink-2); font-size:.92rem; }

/* prev/next */
.proj-foot { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:40px; border-top:1px solid var(--line); margin-top:12px; }
.proj-foot a { font-family:var(--font-display); font-weight:600; display:inline-flex; align-items:center; gap:9px; transition:color .2s var(--ease); }
.proj-foot .nx{ color:var(--accent); }
.proj-foot .nx .arrow{ transition:transform .25s var(--ease); }
.proj-foot .nx:hover .arrow{ transform:translateX(4px); }
.proj-foot a:not(.nx):hover{ color:var(--ink); }

/* =========================================================================
   EXPERIENCE
   ========================================================================= */
.timeline { position:relative; margin-top:20px; }
.exp { padding-bottom:26px; position:relative; }
.exp__card { padding:24px 26px; }
.exp__top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.exp__role { font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }
.exp__sub { margin:20px 0 6px; padding-top:20px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
/* experience card header with logo plate */
.exp__head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line); }
.exp__logo-wrap { display:inline-flex; align-items:center; padding:8px 13px; background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 1px 2px rgba(20,20,22,.05); }
.exp__logo { height:26px; width:auto; max-width:170px; object-fit:contain; display:block; }
.exp__wordmark { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:#1A1A1C; letter-spacing:-.01em; }
.exp__meta { font-family:var(--font-mono); font-size:.74rem; color:var(--muted); margin-top:13px; }

/* roles within a company card */
.exp__role-block { padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }
.exp__role-block:first-of-type { border-top:0; padding-top:16px; }
.exp__role-head { display:flex; align-items:center; justify-content:space-between; gap:8px 14px; flex-wrap:wrap; }
.exp__role-head h4 { font-size:1.08rem; }
.exp__pill { font-family:var(--font-mono); font-size:.68rem; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); padding:4px 11px; border-radius:999px; white-space:nowrap; }
.exp__type { display:inline-block; font-family:var(--font-mono); font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin:5px 0 10px; }
.exp__intro { color:var(--ink-2); font-size:.93rem; margin:6px 0 4px; }
/* small pill button (related case studies) with reveal-on-hover arrow */
.pill-link { display:inline-flex; align-items:center; gap:0; padding:7px 14px; border:1px solid var(--line-strong);
  border-radius:999px; font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--ink);
  background:var(--surface); transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease); }
.pill-link .arrow { display:inline-block; max-width:0; opacity:0; transform:translateX(-3px);
  overflow:hidden; transition:max-width .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease), margin .25s var(--ease); }
.pill-link:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pill-link:hover .arrow { max-width:16px; opacity:1; transform:translateX(0); margin-left:7px; }
.exp__links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
@media (max-width:640px){ .exp{ grid-template-columns:1fr; } .exp::before,.exp__year::after{ display:none; } .exp__year{ text-align:left; padding-top:0; } }

/* about */
.about { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,56px); align-items:start; }
.about > * { min-width:0; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }
.about__portrait { aspect-ratio:4/5; }
.principles { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.principles li { display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:.95rem; }
.principles .cmp{ margin-top:7px; }

/* contact */
.contact { text-align:center; max-width:640px; margin-inline:auto; }
.contact h1 { max-width:22ch; margin-inline:auto; }
.contact .email { font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,4vw,2.2rem); border-bottom:2px solid var(--line-strong); padding-bottom:5px; display:inline-block; transition:border-color .25s; }
.contact .email:hover{ border-color:var(--accent); color:var(--accent); }
.form { text-align:left; margin-top:36px; display:grid; gap:14px; }
.form label { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); display:block; margin-bottom:6px; }
.form input,.form textarea { width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:.95rem; transition:border-color .2s; }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--accent); }
.form .err{ color:var(--danger); font-size:.78rem; margin-top:5px; display:none; }
.form .err.show{ display:block; }
.socials-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.socials-row a { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line-strong); border-radius:999px; font-size:.88rem; color:var(--ink-2); transition:.25s var(--ease); }
.socials-row a:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-2px); }

/* toast */
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,80px); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:10px; font-size:.88rem; box-shadow:var(--shadow-lg); opacity:0; transition:transform .35s var(--ease),opacity .35s; z-index:120; }
.toast.show{ transform:translate(-50%,0); opacity:1; }

/* footer */
.foot { padding:26px clamp(20px,4vw,56px); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; color:var(--muted); font-family:var(--font-mono); font-size:.76rem; }

/* reveal - smooth, soft-focus rise (with directional + scale variants) */
.reveal{ opacity:0; transform:translateY(30px) scale(.985); filter:blur(6px);
  transition:opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); will-change:opacity, transform, filter; }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s } .reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal--left{ transform:translateX(-48px) scale(.99); } .reveal--right{ transform:translateX(48px) scale(.99); }
.reveal--scale{ transform:scale(.9); } .reveal--rise{ transform:translateY(54px) scale(.97); }
.reveal--left.in, .reveal--right.in, .reveal--scale.in, .reveal--rise.in{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--rise { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.muted{ color:var(--muted); } .center{ text-align:center; }

/* ----------------------------- responsive shell ----------------------------- */
@media (max-width:1023px){
  .sidebar { position:fixed; top:0; left:0; transform:translateX(-100%); box-shadow:var(--shadow-lg); width:min(86vw,300px); flex-basis:auto; z-index:50; height:100dvh; overflow-y:auto; }
  .sidebar.open { transform:translateX(0); }
  .topbar-m { display:flex; }
  .canvas { width:100%; overflow-x:clip; }
}

/* =========================================================================
   v3 REFINEMENTS
   ========================================================================= */

/* ---- page transition (smooth fade between pages) ---- */
html.pt-ready .canvas { animation: ptfade .42s var(--ease); }
@keyframes ptfade { from { opacity:0; } to { opacity:1; } }
html.pt-leaving .canvas { opacity:0; transition: opacity .23s var(--ease); }
@media (prefers-reduced-motion: reduce){
  html.pt-ready .canvas, html.pt-leaving .canvas { animation:none; transition:none; opacity:1; }
}

/* ---- sidebar: nav active transition + custom-toggle slot ---- */
.sb-link { transition: background .25s var(--ease), color .25s var(--ease); }
.sb-link.active { position:relative; }
.sb-link.active::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.sb-toggle-slot { min-height:2px; }   /* placeholder area for the user's custom toggle */

/* ---- hero: slightly larger, more dominant image + cursor further right ---- */
.hero { grid-template-columns: 1.18fr 1fr; }
@media (max-width:900px){ .hero { grid-template-columns: 1fr; } }
.hero-cursor { right:-80px; }
@media (max-width:900px){ .hero-cursor { right:-30px; } }
@media (max-width:520px){ .hero-cursor { right:-14px; } }

/* ---- project cards: no hover effect, consistent hierarchy (no flagship card) ---- */
.card:hover { transform:none; box-shadow:var(--shadow); border-color:var(--line); }
.card:hover .card__media img { transform:none; }
.card:hover .card__link .arrow { transform:none; }
.card__title { gap:0; }                 /* no component glyph before the title */
.card__body { gap:10px; }

/* ---- industry pills: icon + default (non-clickable) feel ---- */
.chip { display:inline-flex; align-items:center; gap:8px; }
.chip svg { width:15px; height:15px; flex:0 0 15px; color:var(--accent); }

/* ---- capabilities as sticky notes ---- */
.caps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .caps { grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.cap.note {
  background:#FFE299; color:#1A1A1C; border:0; border-radius:6px;
  padding:24px 22px 26px;
  box-shadow:0 2.5px 1px rgba(0,0,0,.02), 0 4px 8px rgba(0,0,0,.05), 0 14px 26px rgba(0,0,0,.09);
}
.cap.note:nth-child(1){ transform:rotate(-2deg); }
.cap.note:nth-child(2){ transform:rotate(1.5deg); background:#CFE8FF; }
.cap.note:nth-child(3){ transform:rotate(-1deg); background:#FFD7E6; }
.cap.note h4 { color:#1A1A1C; font-size:1.05rem; margin-bottom:12px; }
.cap.note h4 .cmp { background-color:rgba(26,26,28,.55); }
.cap.note ul { list-style:none; margin:0; padding:0; }
.cap.note li { color:rgba(26,26,28,.78); font-size:.92rem; padding:6px 0; border-bottom:1px solid rgba(26,26,28,.12); }
.cap.note li:last-child { border-bottom:0; }
@media (max-width:860px){
  .cap.note:nth-child(1){ transform:rotate(-2deg) !important; }
  .cap.note:nth-child(2){ transform:rotate(1.5deg) !important; }
  .cap.note:nth-child(3){ transform:rotate(-1deg) !important; }
}

/* ---- home experience glance (timeline rows) ---- */
.xp-glance { display:flex; flex-direction:column; }
.xp-row { display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.xp-row:last-child { border-bottom:0; }
.xp-row__logo { width:46px; height:46px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; overflow:hidden; flex:0 0 46px; }
.xp-row__logo img { width:74%; height:74%; object-fit:contain; }
.xp-row__logo span { font-family:var(--font-display); font-weight:700; color:var(--muted); }
.xp-row__main .co { font-family:var(--font-display); font-weight:600; font-size:1.02rem; }
.xp-row__main .ro { color:var(--ink-2); font-size:.92rem; }
.xp-row__meta { font-family:var(--font-mono); font-size:.74rem; color:var(--muted); text-align:right; white-space:nowrap; }
/* dark mode: PF + Shufti swap to coloured dark variants; Technologistics keeps its colours */
.xp-row__logo .xp-logo--dark { display:none; }
[data-theme="dark"] .xp-row__logo .xp-logo--light { display:none; }
[data-theme="dark"] .xp-row__logo .xp-logo--dark { display:inline; }
@media (max-width:620px){
  .xp-row { grid-template-columns:40px 1fr; }
  .xp-row__logo { width:40px; height:40px; flex-basis:40px; }
  .xp-row__meta { display:none; }
}

/* ---- CTA section ---- */
.cta-band { background:var(--ink); color:#fff; border-radius:var(--r); padding:clamp(38px,6vw,72px); text-align:center; }
.cta-band h2 { color:#fff; max-width:20ch; margin-inline:auto; }
.cta-band p { color:#c9c9cf; max-width:52ch; margin:16px auto 30px; }
.cta-band .btn-primary { background:#fff; color:var(--ink); }
.cta-band .btn-primary:hover { background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); }

/* ---- experience page: clean logos on dark (no white plate) ---- */
/* All experience logos keep a dark (non-white) plate in dark mode */
[data-theme="dark"] .exp__logo-wrap { background:var(--surface); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.4); }
[data-theme="dark"] .exp__wordmark { color:#fff; }
/* Programmers Force: coloured logo - keep its original colours (no invert) on the dark plate.
   Light mode shows the original; dark mode swaps to a variant with white text + green brackets. */
[data-theme="dark"] .exp__logo-wrap--keep .exp__logo { filter:none; }
.exp__logo--dark { display:none; }
[data-theme="dark"] .exp__logo--light { display:none; }
[data-theme="dark"] .exp__logo--dark { display:block; }

/* ---- About: tools I use (logo stack) ---- */
.tools-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px,1fr)); gap:14px; margin-top:6px; }
.tool { display:flex; align-items:center; gap:11px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.tool img { width:26px; height:26px; object-fit:contain; flex:0 0 26px; }
.tool span { font-size:.92rem; color:var(--ink-2); font-weight:500; }
[data-theme="dark"] .tool.tool--invert img { filter:brightness(0) invert(1); }

/* =========================================================================
   CUSTOM LIGHT / DARK SWITCH (sidebar)  - self-contained, scoped to .switch
   The site theme is driven by JS (data-theme + localStorage); this switch
   only provides the visual control + animation.
   ========================================================================= */
.sb-themerow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 4px 2px; }
.sb-themerow__label { font-size:.78rem; color:var(--muted); }

.switch, .switch__input { position:relative; -webkit-tap-highlight-color:transparent; }
.switch { display:inline-flex; vertical-align:middle; font-size:16px; line-height:0; --hue:223; --trans-dur:.4s; --trans-timing:cubic-bezier(.65,0,.35,1); flex:0 0 auto; }
.switch__input, .switch__input:before { background-color:hsl(var(--hue),10%,12%); }
.switch__input {
  border-radius:.75em; cursor:pointer; display:block; width:3em; height:1.5em;
  transition:background-color var(--trans-dur) var(--trans-timing);
  -webkit-appearance:none; appearance:none;
}
.switch__input:before {
  border-radius:50%; content:""; display:block; position:absolute; top:.1875em; left:.125em;
  width:1.25em; height:1.25em;
  transition:background-color var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing);
}
.switch__icon, .switch__icon-part { display:block; position:absolute; top:0; left:0; }
.switch__icon {
  background-color:hsl(var(--hue),10%,92%); border-radius:50%; overflow:hidden; pointer-events:none;
  top:.1875em; left:.125em; width:1.25em; height:1.25em;
  transition:transform var(--trans-dur) var(--trans-timing);
}
.switch__icon-part { transition:box-shadow var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing); }
.switch__icon-part--1, .switch__icon-part--2, .switch__icon-part--3 { border-radius:50%; }
.switch__icon-part--1 { background-color:hsl(var(--hue),10%,92%); top:calc(50% - .375em); left:calc(50% - .375em); width:.75em; height:.75em; }
.switch__icon-part--2 { background-color:hsl(var(--hue),10%,12%); top:calc(50% - .4375em); left:calc(50% - .0625em); width:.5em; height:.5em; transform:translate(-.1875em,.1875em) scale(.2); }
.switch__icon-part--3 { box-shadow:0 0 0 .625em hsl(var(--hue),10%,12%) inset; width:1.25em; height:1.25em; transform:scale(.25); }
.switch__icon-part--3 ~ .switch__icon-part { background-color:hsl(var(--hue),10%,12%); border-radius:.0625em; top:50%; left:50%; width:.125em; height:.1875em; transform-origin:50% 0; }
.switch__icon-part--4  { transform:translateX(-50%) rotate(0)      translateY(.25em); }
.switch__icon-part--5  { transform:translateX(-50%) rotate(45deg)  translateY(.25em); }
.switch__icon-part--6  { transform:translateX(-50%) rotate(90deg)  translateY(.25em); }
.switch__icon-part--7  { transform:translateX(-50%) rotate(135deg) translateY(.25em); }
.switch__icon-part--8  { transform:translateX(-50%) rotate(180deg) translateY(.25em); }
.switch__icon-part--9  { transform:translateX(-50%) rotate(225deg) translateY(.25em); }
.switch__icon-part--10 { transform:translateX(-50%) rotate(270deg) translateY(.25em); }
.switch__icon-part--11 { transform:translateX(-50%) rotate(315deg) translateY(.25em); }
.switch__sr { overflow:hidden; position:absolute; width:1px; height:1px; }
/* checked = dark mode */
.switch__input:checked { background-color:hsl(var(--hue),10%,92%); }
.switch__input:checked:before, .switch__input:checked ~ .switch__icon { transform:translateX(1.5em); }
.switch__input:checked ~ .switch__icon .switch__icon-part--2 { transform:translate(0,0) scale(1); }
.switch__input:checked ~ .switch__icon .switch__icon-part--3 { box-shadow:0 0 0 .25em hsl(var(--hue),10%,12%) inset; transform:scale(1); }
.switch__input:checked ~ .switch__icon .switch__icon-part--4  { transform:translateX(-50%) rotate(0)      translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--5  { transform:translateX(-50%) rotate(45deg)  translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--6  { transform:translateX(-50%) rotate(90deg)  translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--7  { transform:translateX(-50%) rotate(135deg) translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--8  { transform:translateX(-50%) rotate(180deg) translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--9  { transform:translateX(-50%) rotate(225deg) translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--10 { transform:translateX(-50%) rotate(270deg) translateY(.625em) scale(0); }
.switch__input:checked ~ .switch__icon .switch__icon-part--11 { transform:translateX(-50%) rotate(315deg) translateY(.625em) scale(0); }

/* ---- Tools I use: scrolling logo strip ---- */
.logo-strip { overflow:hidden; margin-top:14px; width:100%; min-width:0; max-width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logo-strip__track { display:flex; align-items:center; gap:52px; width:max-content; animation:logoscroll 28s linear infinite; }
.logo-strip:hover .logo-strip__track { animation-play-state:paused; }
.logo-strip img { height:30px; width:auto; object-fit:contain; opacity:.92; flex:0 0 auto; }
.logo-strip img[src*="mobbin"] { height:21px; }   /* Mobbin reduced ~30% */
.logo-strip img[src*="maze"] { height:24px; }     /* Maze reduced ~20% */
@keyframes logoscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* only the mono/dark logos flip to white in dark mode; HubSpot & VS Code never change */
[data-theme="dark"] .logo-strip img.ts-inv { filter:brightness(0) invert(1); }
/* Figma / Claude / Gemini: keep coloured icon, swap to the white-text variant in dark mode */
.logo-strip img.t-dark { display:none; }
[data-theme="dark"] .logo-strip img.t-light { display:none; }
[data-theme="dark"] .logo-strip img.t-dark { display:inline-block; }
@media (prefers-reduced-motion: reduce){ .logo-strip__track { animation:none; } }

/* =========================================================================
   LIVELINESS LAYER  -  motion + interactions (all reduced-motion safe)
   ========================================================================= */

/* ---- project cards: keep the JS 3D tilt only; no hover colour or stroke change ---- */
.card { position:relative; transition:transform .3s var(--ease), box-shadow .35s var(--ease); transform-style:preserve-3d; }
.card:hover { box-shadow:var(--shadow-lg); }
.card:hover .card__media img { transform:scale(1.05); }
.card:hover .card__link .arrow { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .card:hover { transform:none; }
  .card:hover .card__media img { transform:none; }
}

/* numbered / year row on cards */
.card__row { display:flex; align-items:center; justify-content:space-between; }
.card__num { font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:var(--muted); letter-spacing:.04em; }
.card__yr  { font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }

/* ---- Figma-style selection frame on card hover (injected by JS) ---- */
.sel { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5; border-radius:inherit;
  transition:opacity .14s var(--ease); }
.card:hover .sel { opacity:1; }
.sel::before { content:""; position:absolute; inset:1px; border:1.5px solid var(--accent); border-radius:calc(var(--r) - 1px); }
.sel__name, .sel__dim { position:absolute; background:var(--accent); color:#fff; font-family:var(--font-mono);
  line-height:1; white-space:nowrap; border-radius:5px; box-shadow:0 2px 6px rgba(13,153,255,.35); }
.sel__name { top:7px; left:7px; font-size:.64rem; letter-spacing:.02em; padding:4px 7px; }
.sel__dim { right:7px; bottom:7px; font-size:.62rem; padding:3px 6px; }

/* ---- About: tilted Polaroid frame with stickers ---- */
.about-photo { position:relative; align-self:start; background:#fff; padding:14px 14px 44px;
  border-radius:4px; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,20,22,.05), 0 22px 48px rgba(20,20,22,.18);
  transform:rotate(-4deg); transition:transform .5s var(--ease); }
.about-photo:hover { transform:rotate(0deg); }
.about-photo__img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.about-sticker { position:absolute; pointer-events:none; filter:drop-shadow(0 6px 12px rgba(0,0,0,.22)); }
.about-sticker--star { width:56px; height:56px; left:-20px; top:-18px; transform:rotate(8deg); }
.about-sticker--smile { width:92px; height:92px; right:-22px; bottom:42px; transform:rotate(-10deg); }
@media (prefers-reduced-motion: reduce){
  .about-photo, .about-photo:hover { transform:rotate(-4deg); }
}
@media (max-width:560px){
  .about-photo { max-width:300px; margin-inline:auto; }
  .about-sticker--smile { width:78px; height:78px; right:-10px; bottom:34px; }
  .about-sticker--star { width:48px; height:48px; left:-8px; }
}

/* ---- Quick facts: Figma-style inspector panel (one grounded element) ---- */
.ins { max-width:540px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.ins__head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.ins__title { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-weight:600; font-size:.98rem; }
.ins__title .cmp { width:14px; height:14px; flex:0 0 14px; }
.ins__tag { font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); border:1px solid var(--line-strong); border-radius:5px; padding:3px 8px; }
.ins__row { display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:center; padding:15px 18px; }
.ins__row + .ins__row { border-top:1px solid var(--line); }
.ins__k { font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.ins__v { font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--ink); }

/* Quick facts: inspector panel + second photo side by side */
.qf-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(30px,5vw,60px); align-items:center; }
.qf-layout .about-photo { align-self:center; justify-self:center; max-width:320px; }
@media (max-width:760px){
  .qf-layout { grid-template-columns:1fr; gap:clamp(30px,7vw,44px); }
  .qf-layout .about-photo { margin-top:6px; }
}

/* ---- two-button CTA row ---- */
.cta-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---- CTA outro (clean panel) ---- */
.cta-outro { text-align:center; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow); padding:clamp(40px,6vw,72px) clamp(22px,4vw,40px); }
.cta-outro h2 { font-size:clamp(1.9rem,4.6vw,3.1rem); letter-spacing:-.02em; max-width:18ch; margin-inline:auto; line-height:1.05; }
.cta-outro .lead { margin:18px auto 28px; }
.cta-outro .em { color:var(--accent); }

/* ---- FigJam-style board embed (e.g. Facia architecture) ---- */
.fig-board { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); background:#F4F5F7; }
.fig-board img, .fig-board svg { display:block; width:100%; height:auto; }

/* ---- custom hover cursors on the About photos (Chrome needs PNG, not SVG) ---- */
.about .about-photo, .about .about-photo * { cursor: url("cur-travel.png") 4 5, auto !important; }
.qf-layout .about-photo, .qf-layout .about-photo * { cursor: url("cur-foodie.png") 93 5, auto !important; }

/* =========================================================================
   MOBILE REFINEMENTS (batch)
   ========================================================================= */
/* homepage selected work -> horizontal scroll on phones */
@media (max-width:680px){
  .home-work { display:flex; overflow-x:auto; gap:16px; padding:4px 0 14px;
    scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
  .home-work > .cell-6 { grid-column:auto; flex:0 0 82%; scroll-snap-align:start; }
}
/* experience: hide location + location-type pills, keep job type */
@media (max-width:640px){
  .exp__head .tags .badge:nth-child(-n+2){ display:none; }
}
/* work filter -> simple wrapping pill selection (no container, no sliding indicator) */
@media (max-width:600px){
  .filter { flex-wrap:wrap; gap:8px; background:transparent; border:0; padding:0; }
  .filter__pill { display:none; }
  .filter button { border:1px solid var(--line); }
  .filter button.active { background:var(--ink); border-color:var(--ink); }
}
/* touch devices: project pills always show their arrow (no hover) */
@media (hover:none){
  .pill-link .arrow { max-width:16px; opacity:1; transform:none; margin-left:7px; }
}
/* read-more (experience, mobile) */
.read-more { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:transparent; border:0; padding:0;
  font-family:var(--font-body); font-size:.82rem; font-weight:600; color:var(--accent); }
.read-more .arrow { transition:transform .2s var(--ease); }
/* clamping only applies on mobile; desktop always shows the full list */
@media (max-width:720px){
  .cs-clamp li:nth-child(n+4){ display:none; }
  .cs-clamp.open li{ display:list-item; }
}
@media (min-width:721px){
  .read-more { display:none !important; }
  .cs-clamp li { display:list-item !important; }
}

/* =========================================================================
   IMAGE CAROUSEL - side nav, thumbnail strip, fullscreen, optional mode toggle
   ========================================================================= */
.carousel { margin-top:20px; }
.carousel__bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.carousel__toggle { display:inline-flex; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; gap:2px; }
.carousel__toggle button { padding:6px 16px; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--ink-2); transition:background .2s var(--ease), color .2s var(--ease); }
.carousel__toggle button.active { background:var(--ink); color:var(--bg); }
.carousel__cap { font-size:.74rem; color:var(--muted); }

.carousel__stage { position:relative; }
.carousel__viewport { position:relative; aspect-ratio:16/9; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.carousel__img { width:100%; height:100%; object-fit:cover; display:block; }
/* each carousel's viewport + thumbs match the source image ratio exactly,
   so nothing is letterboxed or cropped */
.carousel--r169 .carousel__viewport,  .carousel--r169 .carousel__thumb  { aspect-ratio:16/9; }
.carousel--r2518 .carousel__viewport, .carousel--r2518 .carousel__thumb { aspect-ratio:25/18; }

.carousel__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:50%; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--ink); box-shadow:var(--shadow); transition:transform .2s var(--ease), background .2s var(--ease); }
.carousel__nav:hover { background:var(--surface); transform:translateY(-50%) scale(1.08); }
.carousel__nav:active { transform:translateY(-50%) scale(.96); }
.carousel__nav--prev { left:14px; } .carousel__nav--next { right:14px; }
.carousel__nav svg { width:20px; height:20px; }

.carousel__fs { position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:10px; background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:grid; place-items:center; color:var(--ink); transition:background .2s var(--ease); }
.carousel__fs:hover { background:var(--surface); }
.carousel__fs svg { width:17px; height:17px; }

.carousel__counter { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.02em; color:#fff; background:rgba(18,18,22,.62); padding:4px 11px; border-radius:999px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

.carousel__thumbs { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:14px; padding:3px 2px; }
.carousel__thumb { flex:0 0 auto; width:104px; aspect-ratio:16/9; border-radius:var(--r-xs); overflow:hidden; border:2px solid transparent; background:var(--surface-2); opacity:.55; transition:opacity .2s var(--ease), border-color .2s var(--ease); }
.carousel__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.carousel__thumb:hover { opacity:.85; }
.carousel__thumb.active { opacity:1; border-color:var(--accent); }
.carousel--mobile .carousel__thumb { width:88px; }

/* shared fullscreen overlay */
.cfs { position:fixed; inset:0; z-index:200; background:rgba(10,10,12,.94); display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,52px); opacity:0; transition:opacity .22s var(--ease); }
.cfs.open { display:flex; opacity:1; }
.cfs__img { max-width:100%; max-height:86vh; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); }
.cfs__nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff; display:grid; place-items:center; transition:background .2s var(--ease); }
.cfs__nav:hover { background:rgba(255,255,255,.22); }
.cfs__prev { left:clamp(12px,3vw,36px); } .cfs__next { right:clamp(12px,3vw,36px); }
.cfs__nav svg { width:24px; height:24px; }
.cfs__close { position:absolute; top:20px; right:24px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#fff; display:grid; place-items:center; font-size:1.5rem; line-height:1; transition:background .2s var(--ease); }
.cfs__close:hover { background:rgba(255,255,255,.22); }
.cfs__counter { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.78rem; color:rgba(255,255,255,.78); }
.cfs__toggle { position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:3; display:none; padding:3px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.cfs__toggle.show { display:inline-flex; }
.cfs__toggle button { color:rgba(255,255,255,.72); }
.cfs__toggle button.active { background:#fff; color:#141416; }

@media (max-width:600px){
  .carousel__nav { width:38px; height:38px; }
  .carousel__nav svg { width:18px; height:18px; }
  .carousel__thumb { width:84px; }
  .cfs__nav { width:44px; height:44px; }
}