/* AK Portfolio — page + component styles.
   Part 1 ports ui_kits/portfolio/portfolio.css from the handoff verbatim
   (class names preserved). Part 2 translates the prototype's React inline
   styles (Landing, ProjectsList, components/*) into classes, value-for-value. */

:root, [data-ak-theme="dark"] {
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --section-bg: var(--surface);
}

/* ==================== Part 1 — case studies, grids, stubs ==================== */

.cs-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--pad-page) 0; animation: cs-in 650ms var(--ease) 60ms both; }
@keyframes cs-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs-topnav { position: sticky; top: 0; z-index: 30; max-width: 640px; margin: 34px auto 0; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--pad-page); }
.cs-wrap { padding-top: 42px !important; }
.cs-logo { font-family: var(--font-body); font-size: 22px; font-weight: 500; line-height: 1; color: var(--text); cursor: pointer; letter-spacing: 0.01em; }
.cs-back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-text); cursor: pointer; transition: color 160ms; }
.cs-back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cs-nav-right { display: inline-flex; align-items: center; gap: 20px; }
.cs-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--micro); margin-bottom: 1rem; }
.cs-h1 { font-family: var(--font-body); font-weight: 500; font-size: clamp(28px, 4vw, 32px); line-height: 1.12; letter-spacing: var(--ls-tight); color: var(--text); margin-bottom: 2.5rem; }
.cs-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.5rem 0; margin-bottom: 4rem; }
.cs-ml { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--micro); display: block; margin-bottom: 0.5rem; }
.cs-mv { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.65; color: var(--text); }
.cs-intro { font-size: 16px; line-height: 1.8; color: var(--text-2); margin-bottom: 4rem; }
.cs-intro p + p { margin-top: 1.25rem; }
.cs-hr { border: none; border-top: 1px solid var(--border); margin: 4rem 0; }
.cs-section { margin-bottom: 5rem; }
.cs-problem { margin: 2.5rem 0 0; }
.cs-problem-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--micro); display: block; margin-bottom: 1rem; }
.cs-problem-st { font-family: var(--font-body); font-weight: 300; font-size: 21px; line-height: 1.5; letter-spacing: var(--ls-tight); color: var(--text); margin: 0 0 0.75rem; text-wrap: pretty; }
.cs-problem-q { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--text-2); margin: 0; text-wrap: pretty; }
.cs-h2 { font-family: var(--font-body); font-weight: 500; font-size: 25px; line-height: 1.3; color: var(--text); margin-bottom: 1.75rem; }
.cs-prose { font-size: 16px; line-height: 1.8; color: var(--text-2); margin-bottom: 2rem; }
.cs-prose p + p { margin-top: 1.1rem; }
.cs-art, .cs-art-r { font-family: var(--font-mono); font-size: 0.82em; font-weight: 400; color: var(--accent-text); text-decoration: none; transition: color 160ms ease; }
.cs-art:hover, .cs-art-r:hover, .cs-art:focus-visible, .cs-art-r:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cs-vis { position: relative; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.cs-vis-t { min-height: 520px; }
.cs-vis-m { min-height: 460px; }
.cs-vis-inner { text-align: center; padding: 2rem 1.5rem; }
.cs-vis-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--micro); opacity: 0.6; display: block; margin-bottom: 0.5rem; }
.cs-vis-lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 300; color: var(--text-3); line-height: 1.55; }
.cs-cap { font-family: var(--font-mono); font-size: 12px; font-weight: 300; color: var(--micro); letter-spacing: 0.03em; line-height: 1.65; margin-bottom: 2.5rem; }
.cs-closing { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--text-2); margin-bottom: 4rem; }
.cs-closing p + p { margin-top: 1.1rem; }
.cs-quote { margin: 0 0 3rem; }
.cs-quote p { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 19px; line-height: 1.7; color: var(--text); margin: 0 0 0.6rem; }
.cs-quote span { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.05em; color: var(--micro); }
.cs-collab-intro { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--text-3); margin-bottom: 2rem; }
.cs-testimonials { display: flex; flex-direction: column; gap: 2.5rem; margin-bottom: 5rem; }
.cs-testimonial { padding-left: 1.5rem; border-left: 1.5px solid var(--border); }
.cs-tq { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 0.75rem; }
.cs-ta { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.05em; color: var(--micro); }
.cs-other-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--micro); margin-bottom: 1.5rem; }
.cs-proj { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: opacity 180ms ease; }
.cs-proj:hover, .cs-proj:focus-visible { opacity: 0.4; text-decoration: none; }
.cs-proj-left { display: flex; align-items: baseline; gap: 0.6rem; }
.cs-proj-name { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--text); }
.cs-proj-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.06em; color: var(--text-3); }
.cs-proj-arr { font-family: var(--font-mono); font-size: 13px; color: var(--text-3); }
.cs-r { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
.cs-r.on { opacity: 1; transform: none; }

/* ---- grid pages (minis + experiments) ---- */
.gr-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--pad-page) 0; }
.gr-logo-strip { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; margin: 34px 0 0; }
.gr-logo { font-family: var(--font-body); font-size: 22px; font-weight: 500; line-height: 1; color: var(--text); cursor: pointer; letter-spacing: 0.01em; }
.gr-nav-right { display: inline-flex; align-items: center; gap: 20px; }
.gr-logo-strip + .gr-headline, .gr-logo-strip + * { margin-top: 42px; }
.gr-headline { font-family: var(--font-body); font-weight: 500; font-size: 25px; color: var(--text); margin-bottom: 16px; letter-spacing: var(--ls-tight); }
.gr-sub { font-family: var(--font-body); font-weight: 300; font-size: 17px; color: var(--text-2); max-width: 440px; margin-bottom: 48px; line-height: 1.7; }
.gr-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.gr-card-lone { grid-column: auto; }
.gr-card { display: flex; flex-direction: column; gap: 16px; }
.gr-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--surface); transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.gr-thumb { width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 14px; transition: transform 400ms var(--ease-out); }
.gr-thumb-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); opacity: 0.75; }
/* .gr-card-meta is intentionally unstyled — the prototype's fragments render it
   in the body voice (Fraunces, default margins), not the GridCard mono label */
.gr-card-copy { font-family: var(--font-body); font-size: 16px; font-weight: 300; color: var(--text-2); line-height: 1.75; margin-bottom: 10px; }
.gr-card-try { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; }
.gr-card-try.live { color: var(--accent-text); }
.gr-card-try.pending { color: var(--micro); }
a.gr-card-try { display: inline-block; text-decoration: none; font-size: 11px; }
a.gr-card-try:hover, a.gr-card-try:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gr-card-try.px-review { font-family: var(--font-display); font-size: 13px; font-weight: 400; letter-spacing: 0.05em; text-transform: lowercase; color: var(--micro); }
.gr-back-top { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-text); cursor: pointer; transition: color 160ms; }
.gr-back-top:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gr-back { display: inline-block; margin-top: 60px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent-text); cursor: pointer; transition: color 160ms; }
.gr-back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ak-bio-link { font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; }
.ak-bio-link:hover, .ak-bio-link:focus-visible { text-decoration: underline dotted; text-decoration-color: var(--micro); text-decoration-thickness: 1px; text-underline-offset: 4px; color: inherit; }
.ak-tap { padding: 12px; margin: -12px; }
.t1{background:var(--surface-hover)}.t2{background:var(--pill-bg)}.t3{background:var(--surface-hover)}.t4{background:var(--pill-bg)}.t5{background:var(--surface-hover)}
.te1{background:var(--surface-hover)}.te2{background:var(--surface-hover)}.te3{background:var(--pill-bg)}

/* ---- replay control — sits on every video/screens placeholder ---- */
.ak-replay { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--divider); background: var(--bg-card); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; transition: color var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out); }
.ak-replay:hover, .ak-replay:focus-visible { color: var(--text); border-color: var(--text-3); }
.ak-replay svg { transition: transform .55s var(--ease-out); }
.ak-replay:hover svg, .ak-replay:focus-visible svg { transform: rotate(-360deg); }
.gr-thumb-wrap .ak-replay { background: var(--bg-card); }

/* ---- stubs ---- */
.stub-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--pad-page) 0; }
.stub-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--micro); margin-bottom: 16px; }
.stub-h1 { font-family: var(--font-body); font-weight: 500; font-size: 25px; margin-bottom: 24px; color: var(--text); letter-spacing: var(--ls-tight); }
.stub-note { font-size: 16px; line-height: 1.8; color: var(--text-2); max-width: 500px; }

@media (max-width: 600px) {
  .cs-wrap, .cs-topnav { padding-left: var(--pad-page-mobile); padding-right: var(--pad-page-mobile); }
  .cs-meta { grid-template-columns: 1fr; gap: 1.25rem; }
  .cs-vis-t { min-height: 420px; }
  .cs-vis-m { min-height: 380px; }
  .cs-section { margin-bottom: 3.5rem; }
  .cs-hr { margin: 2.5rem 0; }
  .cs-back, .gr-back-top { padding: 12px 0 12px 12px; margin: -12px 0 -12px -12px; }
  .gr-back { padding: 12px 0 12px 12px; margin: -12px 0 -12px -12px; }
  .cs-logo, .gr-logo { padding: 12px 12px 12px 0; margin: -12px -12px -12px 0; }
  .gr-wrap { padding-left: var(--pad-page-mobile); padding-right: var(--pad-page-mobile); }
  .gr-grid { grid-template-columns: 1fr; }
  .gr-card-lone { grid-column: auto; }
  .ak-jump-nav { gap: 20px !important; justify-content: space-between; }
  .ak-project-row-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-wrap { animation: none; }
  .cs-r { opacity: 1; transform: none; transition: none; }
  .gr-thumb { transition: none; }
}

/* shared quiet page-enter */
.ak-enter { animation: ak-enter 480ms var(--ease) both; }
@keyframes ak-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ak-enter { animation: none; } }

/* shared sticky top bars: full-viewport backdrop, shadow only after you scroll */
.ak-topbar { position: sticky; top: 0; z-index: 30; }
.ak-topbar, .cs-topnav, .gr-logo-strip { background: none; }
.ak-topbar::before, .cs-topnav::before, .gr-logo-strip::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 100vw; margin-left: -50vw; background: var(--bg);
  box-shadow: 0 10px 20px -16px rgba(28, 26, 23, 0); z-index: -1;
  transition: box-shadow 300ms var(--ease-in-out);
}
body[data-scrolled] .ak-topbar::before,
body[data-scrolled] .cs-topnav::before,
body[data-scrolled] .gr-logo-strip::before { box-shadow: 0 10px 20px -16px rgba(28, 26, 23, 0.14); }
[data-ak-theme="dark"] body[data-scrolled] .ak-topbar::before,
[data-ak-theme="dark"] body[data-scrolled] .cs-topnav::before,
[data-ak-theme="dark"] body[data-scrolled] .gr-logo-strip::before { box-shadow: 0 10px 20px -16px rgba(0, 0, 0, 0.5); }

/* margin index rail — floaty tick marks, right edge, desktop only */
.ak-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 25; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ak-rail-tick { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; background: none; border: none; padding: 5px 2px; cursor: pointer; }
.ak-rail-line { width: 10px; height: 1.5px; background: var(--divider); transition: width 300ms var(--ease), background 200ms var(--ease-in-out); display: block; }
.ak-rail-tick:hover .ak-rail-line { background: var(--text-3); }
.ak-rail-tick.on .ak-rail-line { width: 18px; background: var(--accent); }
.ak-rail-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-3); opacity: 0; transform: translateX(4px); transition: opacity 200ms var(--ease-in-out), transform 300ms var(--ease); pointer-events: none; white-space: nowrap; }
.ak-rail:hover .ak-rail-label { opacity: 1; transform: none; }
.ak-rail-tick.on .ak-rail-label { color: var(--text); }
@media (max-width: 900px) { .ak-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .ak-rail-line, .ak-rail-label { transition: none; } }

/* replay control in media frames (prototype videos) */
.cs-vis-replay { position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--divider); background: var(--bg-card); color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color var(--dur-fast) var(--ease-in-out); }
.cs-vis-replay:hover { color: var(--text); border-color: var(--text-3); }
.cs-vis-replay svg { transition: transform 550ms var(--ease-out); }
.cs-vis-replay:hover svg { transform: rotate(-360deg); }

/* theme flip: atomic whole-page cross-fade via View Transitions */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* clean typographic thumbnail: project name at rest, video takes over on hover */
.gr-thumb-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 500; font-size: 22px; letter-spacing: var(--ls-tight); color: var(--text-2); padding: 16px; text-align: center; }
.gr-card:hover .gr-thumb-wrap { transform: scale(1.02); box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: reduce) { .gr-card:hover .gr-thumb-wrap { transform: none; } }

/* ---- minis final thumbnails: shared ground ---- */
.gr-thumb-wrap.ak-static { cursor: default; background: #F5EEE4; }
.ak-halo::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 72% 58% at 50% -8%, rgba(176, 96, 63, 0.21), rgba(176, 96, 63, 0) 100%);
  animation: ak-halo-breathe 9s var(--ease-in-out) infinite alternate; }
@keyframes ak-halo-breathe {
  from { opacity: 0.55; transform: translateY(0); }
  to   { opacity: 1;    transform: translateY(7px); }
}
/* ---- Mavic trio (fixed 576x360 stage, JS-scaled to card) ---- */
.mv-stage { position: absolute; left: 50%; top: 50%; width: 576px; height: 360px;
  transform: translate(-50%, -50%); }
.mv-dev { position: absolute; background: #26221E;
  box-shadow: 0 22px 46px rgba(96, 50, 25, 0.24), 0 2px 6px rgba(96, 50, 25, 0.12); }
.mv-scr { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mv-scr img { display: block; width: 100%; height: auto; flex: none; margin-top: -6px; }
.mv-sbar { flex: none; position: relative; color: #fff; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; font-weight: 600; }
.mv-pill { position: absolute; left: 50%; transform: translateX(-50%); background: #1A1714; }
.mv-sbar svg { display: block; }
.mv-c { width: 196px; border-radius: 30px; padding: 8px; left: 50%; top: 54px;
  transform: translateX(-50%); z-index: 2; }
.mv-c .mv-scr { width: 180px; height: 358px; border-radius: 24px; }
.mv-c .mv-sbar { height: 24px; padding: 0 12px; font-size: 10px; }
.mv-c .mv-pill { width: 40px; height: 11px; border-radius: 6.5px; top: 6.5px; }
.mv-c .mv-sbar svg { width: 36px; height: 9px; }
.mv-s { width: 156px; border-radius: 25px; padding: 7px; top: 116px; z-index: 1;
  box-shadow: 0 16px 36px rgba(96, 50, 25, 0.18), 0 2px 5px rgba(96, 50, 25, 0.1); }
.mv-s .mv-scr { width: 142px; border-radius: 19px; height: 290px; }
.mv-s .mv-sbar { height: 20px; padding: 0 10px; font-size: 8.5px; }
.mv-s .mv-pill { width: 30px; height: 9px; border-radius: 5px; top: 5.5px; }
.mv-s .mv-sbar svg { width: 28px; height: 7px; }
.mv-sl { left: 88px; }
.mv-sr { right: 88px; }
.mv-c .mv-sbar, .mv-c .mv-scr { background: #EA6D32; }
.mv-sr .mv-sbar, .mv-sr .mv-scr { background: #EA6D32; }
.mv-sl .mv-sbar, .mv-sl .mv-scr { background: #A34E28; }
/* ---- nested frame (Bistro / Myntra / Bigstay) ---- */
.nf-shell { position: absolute; inset: 12px; z-index: 1; border-radius: 22px; padding: 8px; background: #DCD3C2;
  box-shadow: 0 1px 3px rgba(96, 50, 25, 0.08), 0 22px 44px rgba(96, 50, 25, 0.18);
  display: flex; flex-direction: column; }
.nf-surface { border-radius: 15px; background: #FBF8F2; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nf-pane { margin: 8px; border-radius: 9px; overflow: hidden; background: #EDE2D0; border: 1px solid rgba(96, 62, 30, 0.10); flex: 1; min-height: 0; }
.nf-pane video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (prefers-reduced-motion: reduce) { .ak-halo::before { animation: none; } }

/* ---- pixel robot hover choreography (landing 'experiments' tile) ---- */
.rb-eye { transition: opacity 240ms ease; }
.rb-heart { fill: var(--accent); opacity: 0; transition: opacity 240ms ease; }
.rb-tip path, .rb-spark path { fill: currentColor; transition: fill 260ms ease; }
.ak-jump-nav .ak-jump:hover .rb-eye,
.ak-jump-nav .ak-jump:focus-visible .rb-eye { opacity: 0; }
.ak-jump-nav .ak-jump:hover .rb-heart,
.ak-jump-nav .ak-jump:focus-visible .rb-heart { opacity: 1; }
.ak-jump-nav .ak-jump:hover .rb-tip path,
.ak-jump-nav .ak-jump:focus-visible .rb-tip path { animation: rb-wave-tip 1600ms ease infinite; }
.ak-jump-nav .ak-jump:hover .rb-spark--inner path,
.ak-jump-nav .ak-jump:focus-visible .rb-spark--inner path { animation: rb-wave-inner 1600ms ease infinite; }
.ak-jump-nav .ak-jump:hover .rb-spark--outer path,
.ak-jump-nav .ak-jump:focus-visible .rb-spark--outer path { animation: rb-wave-outer 1600ms ease infinite; }
/* wave washes in tip->outer, holds, recedes outer->tip, rests, repeats */
@keyframes rb-wave-tip   { 0% { fill: currentColor; } 16.3% { fill: var(--accent); } 67.5% { fill: var(--accent); } 83.8% { fill: currentColor; } 100% { fill: currentColor; } }
@keyframes rb-wave-inner { 0% { fill: currentColor; } 8.8% { fill: currentColor; } 25% { fill: var(--accent); } 58.8% { fill: var(--accent); } 75% { fill: currentColor; } 100% { fill: currentColor; } }
@keyframes rb-wave-outer { 0% { fill: currentColor; } 17.5% { fill: currentColor; } 33.8% { fill: var(--accent); } 50% { fill: var(--accent); } 66.3% { fill: currentColor; } 100% { fill: currentColor; } }
.ak-jump-nav .ak-jump:not(:hover):not(:focus-visible) .rb-spark--outer path { transition-delay: 0ms; }
.ak-jump-nav .ak-jump:not(:hover):not(:focus-visible) .rb-spark--inner path { transition-delay: 140ms; }
.ak-jump-nav .ak-jump:not(:hover):not(:focus-visible) .rb-tip path { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .rb-eye, .rb-heart, .rb-tip path, .rb-spark path { transition: opacity 220ms ease, fill 220ms ease; transition-delay: 0ms !important; }
  .ak-jump-nav .ak-jump:hover .rb-tip path, .ak-jump-nav .ak-jump:focus-visible .rb-tip path,
  .ak-jump-nav .ak-jump:hover .rb-spark path, .ak-jump-nav .ak-jump:focus-visible .rb-spark path { animation: none; fill: var(--accent); }
}
/* ---- pixel typewriter hover (landing 'articles' tile) ---- */
.tw-key { fill: var(--accent); opacity: 0; transition: opacity 180ms ease; }
.tw-letter { fill: var(--accent); opacity: 0; transition: opacity 220ms ease; }
.ak-jump-nav .ak-jump:hover .tw-key--1,
.ak-jump-nav .ak-jump:focus-visible .tw-key--1 { animation: tw-keystrike 520ms ease 100ms 1 both; }
.ak-jump-nav .ak-jump:hover .tw-key--2,
.ak-jump-nav .ak-jump:focus-visible .tw-key--2 { animation: tw-keystrike 520ms ease 650ms 1 both; }
@keyframes tw-keystrike { 0% { opacity: 0; } 20%, 55% { opacity: 1; } 100% { opacity: 0; } }
.ak-jump-nav .ak-jump:hover .tw-letter--h,
.ak-jump-nav .ak-jump:focus-visible .tw-letter--h { animation: tw-type-in 240ms ease 260ms 1 forwards; }
.ak-jump-nav .ak-jump:hover .tw-letter--i,
.ak-jump-nav .ak-jump:focus-visible .tw-letter--i { animation: tw-type-in 240ms ease 810ms 1 forwards; }
@keyframes tw-type-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ak-jump-nav .ak-jump:hover .tw-key, .ak-jump-nav .ak-jump:focus-visible .tw-key { animation: none; }
  .ak-jump-nav .ak-jump:hover .tw-letter, .ak-jump-nav .ak-jump:focus-visible .tw-letter { animation: none; opacity: 1; transition: opacity 220ms ease; }
}
/* ---- pixel dino runner (landing 'work' tile) ---- */
.ak-jump-nav { --dino-cycle: 2s; }
.dn-clouds path, .dn-ground path { fill: var(--text-2); }
.dn-fill rect { fill: var(--surface); transition: fill 280ms var(--ease-in-out); }
.ak-jump-nav .ak-jump:hover .dn-fill rect,
.ak-jump-nav .ak-jump:focus-visible .dn-fill rect { fill: var(--surface-hover); }
.dn-dino { transition: transform 300ms ease; }
.dn-ground, .dn-clouds { transition: transform 400ms ease; }
.dn-cactus { transition: opacity 300ms ease; }
.dn-dino path { fill: currentColor; transition: fill 450ms ease; }
.ak-jump-nav .ak-jump:hover .dn-dino path,
.ak-jump-nav .ak-jump:focus-visible .dn-dino path { fill: var(--accent); }
.ak-jump-nav .ak-jump:hover .dn-dino,
.ak-jump-nav .ak-jump:focus-visible .dn-dino { animation: dn-jump var(--dino-cycle) infinite; }
.ak-jump-nav .ak-jump:hover .dn-ground,
.ak-jump-nav .ak-jump:focus-visible .dn-ground { animation: dn-scroll var(--dino-cycle) linear infinite; }
.ak-jump-nav .ak-jump:hover .dn-clouds,
.ak-jump-nav .ak-jump:focus-visible .dn-clouds { animation: dn-scroll calc(var(--dino-cycle) * 2.5) linear infinite; }
.ak-jump-nav .ak-jump:hover .dn-cactus-a,
.ak-jump-nav .ak-jump:focus-visible .dn-cactus-a { animation: dn-cactus-fade-a var(--dino-cycle) linear infinite; }
.ak-jump-nav .ak-jump:hover .dn-cactus-b,
.ak-jump-nav .ak-jump:focus-visible .dn-cactus-b { animation: dn-cactus-fade-b var(--dino-cycle) linear infinite; }
@keyframes dn-scroll { from { transform: translateX(0); } to { transform: translateX(-32px); } }
@keyframes dn-cactus-fade-a { 0% { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes dn-cactus-fade-b { 0%, 66% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes dn-jump {
  0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(0.2, 0.7, 0.45, 1); }
  32%  { transform: translateY(-7px); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.3); }
  68%  { transform: translateY(0);    animation-timing-function: ease-out; }
  74%  { transform: translateY(-0.5px); animation-timing-function: ease-in; }
  80%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ak-jump-nav .ak-jump:hover .dn-dino, .ak-jump-nav .ak-jump:focus-visible .dn-dino,
  .ak-jump-nav .ak-jump:hover .dn-ground, .ak-jump-nav .ak-jump:focus-visible .dn-ground,
  .ak-jump-nav .ak-jump:hover .dn-clouds, .ak-jump-nav .ak-jump:focus-visible .dn-clouds,
  .ak-jump-nav .ak-jump:hover .dn-cactus-a, .ak-jump-nav .ak-jump:focus-visible .dn-cactus-a,
  .ak-jump-nav .ak-jump:hover .dn-cactus-b, .ak-jump-nav .ak-jump:focus-visible .dn-cactus-b { animation: none; }
}

/* ---- experiments: media is 16:9, so the frame is 16:9 (no crop) + enlarge ---- */
.gr-thumb-wrap.gr-169 { aspect-ratio: 16 / 9; cursor: zoom-in; }
.gr-thumb-wrap.gr-169:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ak-lightbox .nf-pane-nat { position: relative; aspect-ratio: 16 / 9; }
.ak-lightbox .nf-shell:has(.nf-pane-nat) { width: min(1100px, 94vw, calc((92vh - 90px) * 16 / 9)); }
/* ---- minis video cards: full-card shell + click-to-enlarge lightbox ---- */
.gr-thumb-wrap.ak-static.nf { cursor: zoom-in; }
.gr-thumb-wrap.ak-static.nf:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ak-lightbox { position: fixed; inset: 0; z-index: 120; background: var(--overlay-scrim);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 4vmin;
  cursor: zoom-out; animation: ak-lb-in 220ms var(--ease-out); }
@keyframes ak-lb-in { from { opacity: 0; } to { opacity: 1; } }
.ak-lightbox .nf-shell { position: static; inset: auto; width: min(1100px, 94vw); max-height: 92vh; cursor: default; }
.ak-lightbox .nf-pane video { height: auto; max-height: calc(92vh - 90px); object-fit: contain; background: #EDE2D0; }
@media (prefers-reduced-motion: reduce) { .ak-lightbox { animation: none; } }

/* case-study prototype videos: phone bezel on the media frame, lazy + 2x */
.cs-vis-live { background: var(--surface); border: none; padding: 0; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; }
.cs-dev { line-height: 0; }
.cs-dev video { display: block; width: auto; height: auto; max-width: 100%; max-height: 500px; }
.cs-duo { display: flex; gap: 22px; justify-content: center; align-items: center; padding: 40px 0; }
.cs-ph { width: 216px; flex: none; border-radius: 30px; border: 7px solid #1c1a17; background: #1c1a17; overflow: hidden; box-shadow: 0 14px 34px rgba(28,26,23,.16); line-height: 0; }
.cs-ph img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .cs-duo { gap: 14px; padding: 28px 0; } .cs-ph { width: 40%; border-width: 5px; border-radius: 22px; } }
@media (max-width: 720px) { .cs-dev video { max-height: 420px; } }

/* split media frames: two recordings side by side, one caption */
.cs-vis-split { background: transparent; gap: 14px; align-items: stretch; }
.cs-vis-split .cs-dev { flex: 1 1 0; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; }
.cs-vis-split .cs-dev video { width: 100%; height: auto; max-width: none; max-height: none; }
@media (max-width: 720px) { .cs-vis-split { flex-direction: column; gap: 12px; } }

/* ---- case-study image exhibits + end-of-study screens rail ---- */
.cs-vis-shot { margin: 0 0 12px; }
.cs-img { display: block; width: 100%; border: 1px solid var(--divider); border-radius: var(--radius-md); background: #fff; padding: 12px; box-sizing: border-box; }
.cs-vis-shot .cs-img { cursor: zoom-in; }
.cs-shots { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.cs-shots:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.cs-shot { flex: 0 0 auto; width: min(420px, 82%); scroll-snap-align: start; margin: 0; }
.cs-shot figcaption { margin: 0 0 10px; min-height: 3.1em; display: flex; align-items: flex-end; }
.cs-shots-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }
.cs-shots-nav button { font-family: var(--font-mono); font-size: 12px; width: 32px; height: 32px; background: none; border: 1px solid var(--divider); border-radius: 8px; color: var(--text-2); cursor: pointer; transition: border-color 160ms var(--ease-in-out), color 160ms var(--ease-in-out); }
.cs-shots-nav button:hover, .cs-shots-nav button:focus-visible { border-color: var(--text-3); color: var(--text); }
.ak-lightbox img.ak-lb-img { max-width: min(1200px, 94vw); max-height: 92vh; display: block; border-radius: 10px; cursor: default; background: #fff; }

/* ---- iMocha: three-tenet framework, native ---- */
.cs-lens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 12px; }
.cs-lens-card { border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--bg-card); padding: 18px 16px 16px; }
.cs-lens-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--micro); display: block; margin-bottom: 8px; }
.cs-lens-card h3 { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--text); margin: 0 0 10px; }
.cs-lens-card ol { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 7px; }
.cs-lens-card li { font-family: var(--font-body); font-weight: 300; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.cs-lens-card li::marker { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
@media (max-width: 680px) { .cs-lens { grid-template-columns: 1fr; } }
/* ---- screens rail: equal-height plates ---- */
.cs-shot-frame { height: 440px; border: 1px solid var(--divider); border-radius: var(--radius-md); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; box-sizing: border-box; cursor: zoom-in; }
.cs-shot-frame img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; }
@media (max-width: 640px) { .cs-shot-frame { height: 64vw; } }

/* quiz correctness: sage green = right, accent = your wrong pick */
:root { --quiz-ok: #57754A; --quiz-ok-wash: rgba(87, 117, 74, 0.10); }
[data-ak-theme="dark"] { --quiz-ok: #9DBB8E; --quiz-ok-wash: rgba(157, 187, 142, 0.13); }

/* ==================== Part 2 — component styles from the prototype JSX ==================== */

/* ---- page shells (Landing / ProjectsList) ---- */
.ak-page { max-width: 640px; margin: 0 auto; padding: 34px var(--pad-page) 0; }
.ak-page--full { min-height: 100vh; }

/* ---- top bar ---- */
.ak-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; margin-bottom: 42px; }
.ak-logo { font-family: var(--font-body); font-weight: 500; font-size: 22px; line-height: 1; color: var(--text); cursor: pointer; letter-spacing: 0.01em; }
.ak-logo:hover, .ak-logo:focus-visible,
.cs-logo:hover, .cs-logo:focus-visible,
.gr-logo:hover, .gr-logo:focus-visible { color: var(--text); text-decoration: none; }
.ak-logo:active, .cs-logo:active, .gr-logo:active { top: auto; }
.ak-topbar-right { display: inline-flex; align-items: center; gap: 20px; }
.ak-nav-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* ---- theme toggle (Rams-esque physical pill) ---- */
.ak-toggle { background: none; border: none; cursor: pointer; padding: 10px; margin: -10px; display: inline-flex; align-items: center; }
.ak-toggle-track { position: relative; display: block; width: 44px; height: 24px; border-radius: 12px;
  background: var(--surface-hover); box-shadow: inset 0 1.5px 3px rgba(28,26,23,0.22);
  transition: background 550ms cubic-bezier(0.32, 0.72, 0, 1);
  outline: 1px solid transparent; outline-offset: 2px; }
.ak-toggle:hover .ak-toggle-track { outline-color: var(--divider); }
[data-ak-theme="dark"] .ak-toggle-track { background: var(--accent); }
.ak-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 20%, #e6e2da 100%);
  box-shadow: 0 1px 2.5px rgba(28,26,23,0.35);
  transform: none; transition: transform 550ms cubic-bezier(0.32, 0.72, 0, 1); will-change: transform;
  display: flex; align-items: center; justify-content: center; }
[data-ak-theme="dark"] .ak-toggle-thumb { transform: translateX(20px); }
.ak-toggle-thumb svg { position: absolute; transition: opacity 350ms ease; }
.ak-tt-sun { opacity: 1; }
.ak-tt-moon { opacity: 0; }
[data-ak-theme="dark"] .ak-tt-sun { opacity: 0; }
[data-ak-theme="dark"] .ak-tt-moon { opacity: 1; }

/* ---- landing ---- */
.ak-sect { margin-bottom: 64px; }
.ak-hero { font-size: 25px; line-height: 1.45; color: var(--text); margin: 0; letter-spacing: var(--ls-tight); text-wrap: pretty; font-weight: 300; }
.ak-bio { font-size: 16px; line-height: 1.8; color: var(--text-2); margin: 20px 0 0; }

/* jump-off tiles */
.ak-jump-nav { display: flex; gap: 56px; margin-bottom: 64px; }
.ak-jump { display: flex; flex-direction: column; align-items: center; gap: 18px; flex: 0 1 128px; min-width: 0; cursor: pointer; color: inherit; text-decoration: none; }
.ak-jump:hover, .ak-jump:focus-visible { text-decoration: none; color: inherit; }
.ak-jump:active { top: auto; }
.ak-jump--soon { cursor: default; }
.ak-jump-tile { width: 100%; max-width: 128px; aspect-ratio: 1 / 1; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: center;
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), background 280ms var(--ease-in-out);
  transform: none; box-shadow: none; color: var(--text-2); }
.ak-jump:not(.ak-jump--soon):hover .ak-jump-tile,
.ak-jump:not(.ak-jump--soon):focus-visible .ak-jump-tile { background: var(--surface-hover); transform: translateY(-5px); box-shadow: var(--shadow-lift); color: var(--accent); }
.ak-jump:not(.ak-jump--soon):active .ak-jump-tile { transform: translateY(0); box-shadow: inset 0 1.5px 3px rgba(28,26,23,0.18); }
.ak-jump-label { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--text); text-align: center; white-space: nowrap; }
.ak-jump-soon { font-family: var(--font-mono); font-size: 11px; color: var(--micro); letter-spacing: 0.04em; }
.ak-picon { display: block; width: 57px; height: 57px; color: var(--text-2); }
.ak-picon svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* section labels */
.ak-sec-label { font-family: var(--font-mono); font-size: 11px; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; color: var(--micro); margin: 0 0 16px; }
.ak-think { font-size: 16px; line-height: 1.8; color: var(--text-2); margin: 0; }

/* interests list — hairline rows that indent + warm on hover */
.ak-interests-btn { cursor: pointer; border: none; background: none; text-align: left; width: 100%; padding: 0; font-family: var(--font-body); }
.ak-interests-btn ul { list-style: none; margin: 0; padding: 0; }
.ak-interests-btn li { font-size: 16px; font-weight: 300; color: var(--text-2); padding: 12px 0; padding-left: 0; border-bottom: 1px solid var(--divider);
  transition: color 200ms var(--ease-in-out), padding-left 200ms var(--ease-out); }
.ak-interests:hover .ak-interests-btn li { color: var(--text); }
.ak-interests .ak-interests-btn li:hover { color: var(--accent-text); padding-left: 8px; }
.ak-int-hint { font-family: var(--font-mono); font-size: 11px; color: var(--micro); margin: 14px 0 0; opacity: 0.6; transition: opacity 250ms var(--ease-in-out); }
.ak-interests:hover .ak-int-hint { opacity: 1; }
/* the whole block is one tap target; the quiz panel is its own surface */
.ak-interests { cursor: pointer; }
.ak-interests .ak-quiz-panel { cursor: default; }

/* quiz */
.ak-quiz-panel { margin-top: 24px; padding: 24px; border: 1px solid var(--divider); border-radius: var(--radius-lg); background: var(--surface); }
.ak-quiz-prog { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--micro); margin: 0 0 16px; }
.ak-quiz-q { font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 18px; max-width: 500px; font-weight: 300; }
.ak-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.ak-quiz-opt { font-family: var(--font-body); font-weight: 300; font-size: 16px; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--divider); background: var(--bg-card); color: var(--text); opacity: 1; transform: none;
  transition: border-color 180ms var(--ease-in-out), background-color 180ms var(--ease-in-out), opacity 180ms var(--ease-in-out), transform 300ms var(--ease); }
.ak-quiz:not(.answered) .ak-quiz-opt:hover,
.ak-quiz:not(.answered) .ak-quiz-opt:focus-visible { border-color: var(--border); transform: translateX(3px); }
.ak-quiz.answered .ak-quiz-opt { cursor: default; }
.ak-quiz-opt.correct { border-color: var(--quiz-ok); background: var(--quiz-ok-wash); }
.ak-quiz-opt.wrong { border-color: var(--accent); background: var(--accent-wash); }
.ak-quiz-opt.dim { opacity: 0.4; }
.ak-quiz-opt svg { flex-shrink: 0; }
/* invisible 12px tap padding (same .ak-tap convention as other small mono links);
   margins compensate so the text sits exactly where the prototype puts it */
.ak-quiz-next { margin: 6px -12px -12px; padding: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); background: none; border: none; cursor: pointer; }
.ak-quiz-done { font-size: 16px; line-height: 1.8; color: var(--text-2); max-width: 480px; margin: 0; }

/* contact rows */
.ak-contact-line { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; }
.ak-contact-line--first { flex-wrap: wrap; gap: 8px; }
.ak-contact-line + .ak-contact-line { border-top: 1px solid var(--divider); }
.ak-contact-name { font-family: var(--font-body); font-weight: 300; font-size: 16px; color: var(--text-2); }
.ak-contact-actions { display: flex; gap: 14px; }
.ak-contact-line a { font-family: var(--font-mono); font-size: 11px; }
.ak-copy-link { display: inline-block; min-width: 6ch; text-align: left; }
.ak-copy-link.copied { color: var(--text-3); }

/* footer */
.ak-footer-wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--pad-page); }
.ak-footer { display: flex; justify-content: space-between; align-items: baseline; padding: 48px 0 56px; margin-top: 24px; }
.ak-footer-c { font-family: var(--font-mono); font-size: 11px; color: var(--micro); letter-spacing: 0.06em; }
.ak-footer a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }

/* ---- projects list ---- */
.ak-projects-intro { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--text-2); margin: 0 0 48px; max-width: 440px; }
.ak-projects-ul { list-style: none; margin: 0; padding: 0; }
.ak-project-li { list-style: none; padding: 48px 0; }
.ak-row-link { display: block; color: inherit; font-family: inherit; font-size: inherit; text-decoration: none; cursor: pointer; }
.ak-row-link:hover, .ak-row-link:focus-visible { color: inherit; text-decoration: none; }
.ak-row-link:active { top: auto; }
.ak-row-stack { display: flex; flex-direction: column; gap: 24px; }
.ak-project-row-grid { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start; }
.ak-project-row-grid--soon { opacity: 0.7; }
.ak-row-lede { font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.ak-project-row-grid .ak-row-lede { margin-bottom: 12px; }
.ak-row-name { font-family: var(--font-body); font-weight: 500; color: var(--text); }
.ak-row-dash { color: var(--text-3); margin: 0 5px; font-weight: 300; }
.ak-row-desc { font-weight: 300; color: var(--text-2); }
.ak-row-pills { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ak-row-stack .ak-row-pills { margin-bottom: 18px; }
.ak-pill { font-family: var(--font-mono); font-weight: 400; font-size: 11px; background: var(--pill-bg); color: var(--pill-text); border-radius: var(--radius-pill); padding: 4px 12px; white-space: nowrap; }
.ak-meta-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.ak-meta-row .ak-mi { flex: none; opacity: 0.55; display: inline-flex; }

/* thumbnail frame (chromeless hairline card) */
.ak-thumb-frame { border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  transition: transform 400ms var(--ease), box-shadow 200ms var(--ease-in-out);
  transform: none; box-shadow: 0 1px 2px rgba(28,26,23,0.05); }
.ak-thumb-inner { display: flex; align-items: center; justify-content: center; text-align: center; position: relative; }
.ak-thumb-inner--fixed { padding: 10px; }
.ak-row-link:hover .ak-thumb-frame { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(28,26,23,0.10); }
.ak-row-link:active .ak-thumb-frame { transform: none; box-shadow: inset 0 1.5px 3px rgba(28,26,23,0.18); }
.ak-minis-block { padding: 48px 0 0; border-top: 1px solid var(--divider); cursor: pointer; }

/* ---- case-study thumbnail art (CaseThumbs) ---- */
@keyframes akTvbr { from { transform: scale(.87); } to { transform: scale(1.13); } }
@keyframes akWin { from { opacity: 1; } to { opacity: .15; } }
@keyframes akWout { from { opacity: .15; } to { opacity: 1; } }
@keyframes akBlink { 50% { opacity: 0; } }
@keyframes akLoad { 0% { transform: scaleX(0); } 82% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes akReel { to { transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .ak-anim { animation: none !important; transition: none !important; } }

.tc-card { position: relative; width: 100%; aspect-ratio: 576 / 360; background: #F5EEE4; overflow: hidden; }
.tc-stage { position: absolute; left: 0; top: 0; width: 576px; height: 360px; transform-origin: 0 0; }
.tc-halo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 58% at 50% -8%, rgba(176,96,63,.21), rgba(176,96,63,0) 100%); }
.tc-halo--sage { background: radial-gradient(ellipse 72% 58% at 50% -8%, rgba(76,122,80,.18), rgba(76,122,80,0) 100%); }

.tc-etch { position: absolute; font: 300 52px/1 var(--font-body); letter-spacing: -0.02em; color: rgba(96,50,25,.12); z-index: 0; text-align: left; }
.tc-etch i { display: block; font: 300 10px/1 var(--font-mono); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(96,50,25,.34); margin-bottom: 10px; }
.tc-etch--r { text-align: right; }

.tc-phone { width: 150px; flex: none; border-radius: 18px; overflow: hidden; border: 1px solid rgba(96,62,30,.14); box-shadow: 0 18px 36px rgba(96,50,25,.16); transition: transform 650ms var(--ease-out); background: #fff; }
.tc-phone img { display: block; width: 100%; aspect-ratio: 375/812; object-fit: cover; object-position: top center; }
.tc-phone--dark img { background: #0E1F1D; }

/* Bonify — phones straighten on row hover */
.bp-pair { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 28px; z-index: 1; }
.bp-l { transform: rotate(-2.5deg) translateY(10px); }
.bp-r { transform: rotate(2.5deg) translateY(10px); }
.ak-row-link:hover:not(:active) .bp-l, .ak-row-link:hover:not(:active) .bp-r { transform: rotate(0deg) translateY(0); }

/* Tattva — rings breathe on row hover */
.tv-ring { position: absolute; left: 50%; top: calc(50% + 4px); translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(76,122,80,.45);
  animation: akTvbr 4.6s ease-in-out infinite alternate; animation-play-state: paused; }
.tv-r1 { width: 250px; height: 250px; opacity: 0.55; }
.tv-r2 { width: 330px; height: 330px; opacity: 0.34; }
.tv-r3 { width: 410px; height: 410px; opacity: 0.18; }
.tv-io { position: absolute; left: 34px; top: 34px; display: flex; flex-direction: column; gap: 6px; font: 300 12px var(--font-mono); letter-spacing: 0.12em; color: rgba(76,122,80,.85); }
.tv-in { animation: akWin 4.6s ease-in-out infinite alternate; animation-play-state: paused; }
.tv-out { animation: akWout 4.6s ease-in-out infinite alternate; animation-play-state: paused; }
.tv-phone { position: absolute; left: 50%; top: 22px; z-index: 1; transform: translateX(-50%); }
.ak-row-link:hover:not(:active) .tv-ring, .ak-row-link:hover:not(:active) .tv-in, .ak-row-link:hover:not(:active) .tv-out { animation-play-state: running; }
.ak-row-link:hover:not(:active) .tv-phone { transform: translateX(-50%) translateY(-3px); }

/* iMocha — bars fill on row hover, card straightens */
.im-bars { position: absolute; left: 40px; top: 56px; width: 216px; display: flex; flex-direction: column; gap: 27px; z-index: 2; }
.im-bar-label { display: block; font: 300 11px var(--font-mono); letter-spacing: 0.1em; color: rgba(96,50,25,.55); margin-bottom: 8px; text-align: left; }
.im-track { display: block; height: 6px; border-radius: 3px; background: rgba(96,50,25,.09); position: relative; }
.im-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #4c7a50; opacity: 0.78; width: 26%; transition: width 900ms var(--ease-out); }
.im-f1 { transition-delay: 0ms; } .im-f2 { transition-delay: 100ms; } .im-f3 { transition-delay: 200ms; } .im-f4 { transition-delay: 300ms; }
.ak-row-link:hover:not(:active) .im-f1 { width: 72%; }
.ak-row-link:hover:not(:active) .im-f2 { width: 58%; }
.ak-row-link:hover:not(:active) .im-f3 { width: 84%; }
.ak-row-link:hover:not(:active) .im-f4 { width: 40%; }
.im-card { position: absolute; right: -36px; top: 86px; width: 290px; border-radius: 12px; background: #FBF8F2;
  box-shadow: 0 18px 40px rgba(96,50,25,.2); overflow: hidden; border: 1px solid rgba(96,62,30,.12);
  transform: rotate(2deg); transition: transform 650ms var(--ease-out); z-index: 1; }
.im-card img { display: block; width: 100%; }
.ak-row-link:hover:not(:active) .im-card { transform: rotate(0.6deg) translateY(-4px); }

/* Minis — looping reel */
.mn-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(96,50,25,.10) 1px, transparent 1.3px); background-size: 26px 26px; pointer-events: none; }
.mn-title { position: absolute; left: 36px; top: 36px; z-index: 2; text-align: left; }
.mn-title h3 { font: 500 34px/1 var(--font-body); letter-spacing: -0.02em; color: #1c1a17; margin: 0 0 9px; }
.mn-title span { display: block; font: 300 11px var(--font-mono); letter-spacing: 0.1em; color: rgba(96,50,25,.55); }
.mn-reel { position: absolute; left: -28px; top: 63%; display: flex; width: max-content; transform: translate(0, -50%);
  animation: akReel 46s linear infinite; animation-play-state: paused; z-index: 1; }
.ak-row-link:hover:not(:active) .mn-reel { animation-play-state: running; }
.mn-set { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex: none; }
.mn-web { position: relative; border-radius: 12px; background: #DCD3C2; padding: 4px; box-shadow: 0 10px 24px rgba(96,50,25,.14); width: 250px; flex: none; }
.mn-web > div { border-radius: 8px; overflow: hidden; background: #EDE2D0; aspect-ratio: 16/10; }
.mn-web img, .mn-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mn-ph { position: relative; border-radius: 16px; background: #DCD3C2; padding: 4px; box-shadow: 0 14px 30px rgba(96,50,25,.18); width: 90px; flex: none; }
.mn-ph > div { border-radius: 12px; overflow: hidden; background: #EDE2D0; aspect-ratio: 363/723; }

/* Coming-soon stub (Corteva) */
.ak-soon-stub { display: flex; flex-direction: column; align-items: center; }
.ak-soon-line { font: 400 15px var(--font-display); letter-spacing: 0.06em; color: var(--accent-text); display: inline-flex; align-items: center; }
.ak-soon-cursor { margin-left: 2px; animation: akBlink 1.1s steps(1) infinite; animation-play-state: paused; }
.ak-soon-track { width: 132px; height: 9px; border: 1px solid rgba(176,96,63,.5); padding: 1px; margin-top: 9px; display: block; box-sizing: content-box; }
.ak-soon-fill { display: block; height: 100%; background: var(--accent-text); transform-origin: left; transform: scaleX(0);
  animation: akLoad 7s steps(12, end) infinite; animation-play-state: paused; }
.ak-project-li:hover .ak-soon-cursor, .ak-project-li:hover .ak-soon-fill { animation-play-state: running; }

/* ---- hover-play video slot (replaces the prototype's <video-slot>) ---- */
.ak-vslot { position: absolute; inset: 0; width: 100%; height: 100%; }
.ak-vslot video, .ak-vslot .ak-vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-vslot .ak-vposter { transition: opacity 350ms ease; z-index: 1; }
.ak-vslot.playing .ak-vposter { opacity: 0; }

/* mobile adaptations from the handoff's responsive tokens */
@media (max-width: 600px) {
  /* portfolio.css loads after responsive.css in the prototype, so its
     20px gap + space-between wins over the token file's 16px */
  .ak-jump-nav { gap: 20px !important; justify-content: space-between; }
  .ak-jump { flex: 1 1 0 !important; min-width: 0; gap: 12px !important; }
  .ak-jump-tile { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; border-radius: 18px !important; max-width: none; }
  .ak-jump-tile .ak-picon { width: 40px !important; height: 40px !important; }
  .ak-project-row-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ak-project-row-grid > :first-child { max-width: none; }
  .ak-contact-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px; }
  .ak-contact-row > :last-child { margin-left: 0 !important; }
  .ak-social-link { padding: 10px 0 !important; }
}