/* ============ Tokens Noctua Pastel (design/noctua-tokens.json) ============ */
:root{
  /* Surfaces and ink: dark theme */
  --bg:#131218;--surface:#1b1a22;--surface-raised:#24232e;--surface-overlay:#2e2c3a;
  --border:#3b3949;--border-strong:#7a7790;
  --ink:#efedf5;--ink-muted:#aeaac0;--ink-faint:#8f8ba3;--on-pastel:#1a1822;

  /* Pastels: fill, soft background and ink */
  --mint:#9fe3c6;--mint-soft:#1d3a30;--mint-ink:#9fe3c6;
  --peach:#f7bd9f;--peach-soft:#3d2a22;--peach-ink:#f7bd9f;
  --lavender:#cdbdf6;--lavender-soft:#2c2645;--lavender-ink:#cdbdf6;
  --sky:#a9d2f3;--sky-soft:#1f3142;--sky-ink:#a9d2f3;
  --lemon:#f2e3a0;--lemon-soft:#38341e;--lemon-ink:#f2e3a0;
  --rose:#f5abbf;--rose-soft:#3d2129;--rose-ink:#f5abbf;

  /* Semantic */
  --primary:var(--lavender);--on-primary:var(--on-pastel);--primary-soft:var(--lavender-soft);--primary-ink:var(--lavender-ink);
  --success:var(--mint);--success-soft:var(--mint-soft);--success-ink:var(--mint-ink);
  --focus-ring:#f2e3a0;

  /* Typography */
  /* Developer style: Fira Code across the final layer (with ligatures) */
  --font-display:"Fira Code",ui-monospace,"SF Mono",Menlo,monospace;
  --font-sans:"Fira Code",ui-monospace,"SF Mono",Menlo,monospace;
  --font-mono:"Fira Code",ui-monospace,"SF Mono",Menlo,monospace;

  /* Shape and elevation */
  --radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-xl:32px;--radius-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 12px 32px rgba(0,0,0,.5);
  --shadow-glow:0 0 0 4px rgba(205,189,246,.22);

  /* Motion */
  --duration-instant:90ms;--duration-fast:160ms;--duration-base:240ms;--duration-slow:420ms;--duration-expressive:700ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* Sketch layer (outside Noctua) */
  --sk-paper:#fdfdfb;--sk-ink:#2a2a31;--sk-pencil:#8a8c96;--sk-graphite:#6b6d78;--sk-dots:#c2c6d0;
  --sk-blue:#2f5bd3;--sk-red:#d4473a;
}
/* Light theme */
:root[data-theme="light"]{
  --bg:#f7f5fa;--surface:#ffffff;--surface-raised:#f0edf5;--surface-overlay:#e7e3ef;
  --border:#d8d3e2;--border-strong:#7d788d;
  --ink:#1c1a24;--ink-muted:#5b576b;--ink-faint:#67637a;
  --mint-soft:#e0f6ec;--mint-ink:#1e6a4e;--peach-soft:#fde9df;--peach-ink:#8a4524;
  --lavender-soft:#eee8fd;--lavender-ink:#5a43a8;--sky-soft:#e3f0fb;--sky-ink:#24618f;
  --lemon-soft:#fbf4d6;--lemon-ink:#6d5a0f;--rose-soft:#fde6ec;--rose-ink:#9c2f4e;
  --primary:var(--lavender-ink);--on-primary:#ffffff;
  --focus-ring:#5a43a8;
  --shadow-1:0 1px 2px rgba(28,26,36,.08);--shadow-2:0 12px 32px rgba(28,26,36,.14);--shadow-glow:0 0 0 4px rgba(90,67,168,.16);
}

body{margin:0;background:var(--sk-paper)}
.stage{background-color:var(--sk-paper);background-image:radial-gradient(var(--sk-dots) 1.2px,transparent 1.5px);background-size:22px 22px}
.wire{color:var(--sk-ink);font-family:"Patrick Hand","Comic Sans MS",cursive}
.hand{font-family:"Caveat",cursive}
.sk{border:2px solid var(--sk-ink);border-radius:255px 14px 225px 14px/14px 225px 14px 255px}
.sk2{border:2px solid var(--sk-ink);border-radius:14px 225px 14px 255px/255px 14px 225px 14px}
.dash{border:2px dashed var(--sk-pencil);border-radius:12px 200px 14px 180px/180px 14px 200px 12px}
.xph{border:2px solid var(--sk-ink);background:linear-gradient(to top right,transparent calc(50% - 1px),var(--sk-ink) calc(50% - 1px),var(--sk-ink) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),var(--sk-ink) calc(50% - 1px),var(--sk-ink) calc(50% + 1px),transparent calc(50% + 1px))}
.wt{font-family:"Patrick Hand","Comic Sans MS",cursive;font-size:21px;line-height:1.35;color:var(--sk-ink);max-width:640px}
.ln{height:9px;border-radius:6px;background:var(--sk-ink);opacity:.16}
.strike{position:relative;display:inline-block}
.strike::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:3px;background:var(--sk-red);transform:rotate(-2.5deg);border-radius:3px}
.scrib{position:relative;display:inline-block}
.scrib::after{content:"";position:absolute;inset:-2px -6px;background:repeating-linear-gradient(-28deg,transparent 0 5px,var(--sk-ink) 5px 7px);opacity:.75;border-radius:6px}
.smudge{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(42,42,49,.24),rgba(42,42,49,.09) 45%,transparent 70%);filter:blur(3px);pointer-events:none}
.coffee{position:absolute;border-radius:50%;border:7px solid rgba(146,98,48,.16);box-shadow:inset 0 0 14px rgba(146,98,48,.14),0 0 6px rgba(146,98,48,.08);pointer-events:none}
.ruler{position:absolute;height:54px;border-radius:4px;background-color:rgba(241,226,170,.82);background-image:repeating-linear-gradient(90deg,#4a4535 0 1.5px,transparent 1.5px 12px),repeating-linear-gradient(90deg,#4a4535 0 1.5px,transparent 1.5px 60px);background-size:100% 12px,100% 22px;background-repeat:no-repeat;box-shadow:2px 4px 0 rgba(42,42,49,.18);border:1.5px solid rgba(74,69,53,.6);pointer-events:none}
.note{color:var(--sk-blue);font-family:"Caveat",cursive;font-size:24px;line-height:1}
.red{color:var(--sk-red);font-family:"Caveat",cursive;font-size:24px;line-height:1}
.fin{background:var(--bg);color:var(--ink);font-family:var(--font-sans)}
.disp{font-family:var(--font-display)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font:600 14px/16px var(--font-sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-instant) var(--ease-standard),background-color var(--duration-instant) var(--ease-standard)}
.btn:active{transform:scale(.95)}
.btn-p{background:var(--primary);color:var(--on-primary);border:0}
.btn-p:hover{box-shadow:var(--shadow-glow)}
.btn-g{background:transparent;color:var(--ink);border:1.5px solid var(--border-strong)}
.btn-g:hover{background:var(--surface-raised)}
.seg{min-height:40px;padding:0 16px;border-radius:999px;border:0;font:600 14px/16px var(--font-sans);cursor:pointer;transition:background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}
.seg:active{transform:scale(.95)}
.wseg{min-height:40px;padding:0 14px;font:20px/1 "Patrick Hand",cursive;cursor:pointer;background:transparent;color:var(--sk-ink)}
.card{transition:transform var(--duration-base) var(--ease-spring),box-shadow var(--duration-base) var(--ease-standard)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.flink{color:var(--ink);text-decoration:none;font:600 14px/16px var(--font-sans);padding:12px 4px}
.flink:hover{color:var(--primary-ink)}
/* Hero illustration: landscape frame with the scene's aspect ratio */
.av{width:100%;aspect-ratio:1304/1025;box-sizing:border-box}
.knob{transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-instant)}
.knob:hover{box-shadow:0 0 0 6px rgba(205,189,246,.3),0 12px 32px rgba(0,0,0,.35)}
.knob:active{transform:scale(.94)}
a{color:var(--primary-ink)}a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.wire :focus-visible{outline:2px solid var(--sk-blue)}
section[id]{scroll-margin-top:88px}
.card[id]{scroll-margin-top:104px}
.flink{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
/* Version switch: same height as the theme switch (36 px) */
.fin .navseg{display:flex;align-items:center;box-sizing:border-box;height:36px;gap:2px;padding:0 3px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1.5px solid var(--border-strong)}
.seg,.wseg{position:relative;width:27px;height:27px;min-height:0;padding:0;display:inline-grid;place-items:center}
.wseg{width:28px;height:28px}
.seg{border-radius:999px}
/* Touch target taller than the visible button */
.seg::after,.wseg::after{content:"";position:absolute;inset:-8px -1px}
.btn{max-width:100%;box-sizing:border-box;text-align:center}
.btn,.wl{overflow-wrap:anywhere}
.navlinks{scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
@media (max-width:760px){
  .navpad{padding:8px 16px !important}
  .navbar{display:grid !important;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px !important}
  .navtools{order:2}
  .navlinks{order:3;grid-column:1 / -1;flex-wrap:nowrap !important;overflow-x:auto;gap:4px 20px !important;margin:0 -16px;padding:0 16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent)}
  .navlinks>*{flex:0 0 auto;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
  .wire .navlinks{font-size:20px !important}
  section[id]{scroll-margin-top:124px}
  .card[id]{scroll-margin-top:140px}
  .avwrap{flex-direction:column;align-items:center;gap:12px}
  .fchip{position:static !important}
  .anno{position:static !important;display:block;transform:rotate(-1.5deg) !important;margin-top:16px;font-size:22px}
  .mhide{display:none}
  .sm{font-size:16px !important;line-height:24px !important}
  .ctas>a{flex:1 1 100%;justify-content:center}
  .ctas>a:has(+ .btn-icon){flex:1 1 0;min-width:0}
  .ruler{width:320px !important}
}
@media (max-width:540px){
  .navname{display:none}
}

.wire a.wl,.wire a.wl:hover,.wire a.wl:active,.wire a.wl:visited{color:inherit;text-decoration-color:inherit;transition:none;transform:none;cursor:pointer}
.wire a.wl{text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Version switch: pressed state (was inline in the canvas) */
.seg{background:transparent;color:var(--ink-muted)}
.seg[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.wseg[aria-pressed="true"]{background:var(--sk-ink);color:var(--sk-paper)}
.stage{--pos:65%;--clip:inset(0 35% 0 0);--trans:clip-path var(--duration-slow) var(--ease-standard);--bar-trans:left var(--duration-slow) var(--ease-standard)}
.stage.is-dragging{--trans:none;--bar-trans:none}
.stage.is-dragging,.stage.is-dragging *{user-select:none;-webkit-user-select:none}
.knob:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}


/* ============ Final layer components ============ */
.card{border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border)}
.chip{display:inline-block;padding:8px 14px;border-radius:var(--radius-pill);background:var(--surface-raised);font:600 14px/16px var(--font-sans)}
.chip-sm{padding:6px 12px}
.eyebrow{font-size:14px;color:var(--tone-ink)}
.tile{padding:16px 20px;border-radius:var(--radius-lg);background:var(--surface-raised);display:flex;align-items:center;gap:12px}
.tile-outline{background:var(--surface);border:1px solid var(--border);flex-direction:column;align-items:stretch;gap:4px}

/* ============ Reveal as the bar passes ============ */
/* Pop: whatever the bar uncovers scales 1 → 1.07 → 1 (subtler on cards). */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(var(--pop-scale,1.07))}100%{transform:scale(1)}}
/* Draw: icons draw themselves with stroke-dashoffset from 1 to 0. */
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.card,.tile,.phone,.av{--pop-scale:1.02}
.fin .pop{animation:pop var(--duration-slow) var(--ease-standard)}
.fin .pop svg [pathLength]{stroke-dasharray:1;animation:draw var(--duration-base) var(--ease-standard) both}
.stage.is-tweening{--trans:none;--bar-trans:none}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}

/* ============ Interactive components ============ */
:root{--scrim:rgba(8,7,12,.64)}
:root[data-theme="light"]{--scrim:rgba(28,26,36,.32)}

/* Segmented control with an indicator that stretches as it travels */
.segmented{position:relative;align-self:flex-start;display:inline-flex;max-width:100%;padding:4px;border-radius:var(--radius-pill);background:var(--surface-raised);overflow-x:auto;scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.segmented button{position:relative;z-index:1;flex:0 0 auto;min-height:44px;padding:0 18px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-muted);font:600 14px/16px var(--font-sans);cursor:pointer;transition:color var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}
.segmented button[aria-pressed="true"]{color:var(--on-tone)}
.segmented button:active{transform:scale(.95)}
.segmented-thumb{position:absolute;top:4px;bottom:4px;left:var(--l,4px);right:var(--r,4px);border-radius:var(--radius-pill);background:var(--tone-solid);
  transition:left var(--duration-slow) var(--ease-spring),right var(--duration-slow) var(--ease-spring)}
/* Stretch: the leading edge moves first and the trailing edge catches up. */
.segmented.to-right .segmented-thumb{transition:left var(--duration-slow) var(--ease-spring) 60ms,right var(--duration-base) var(--ease-standard)}
.segmented.to-left .segmented-thumb{transition:left var(--duration-base) var(--ease-standard),right var(--duration-slow) var(--ease-spring) 60ms}

/* Timeline that fills up on scroll */
.timeline{--progress:0;position:relative;display:flex;flex-direction:column;gap:24px;padding-left:36px}
.timeline::before,.timeline-fill{content:"";position:absolute;left:11px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--border)}
.timeline-fill{background:var(--tone-solid);transform-origin:top;transform:scaleY(var(--progress))}
.timeline .card{position:relative;transition:transform var(--duration-base) var(--ease-spring),box-shadow var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard),filter var(--duration-base) var(--ease-standard)}
.timeline-dot{position:absolute;left:-32px;top:30px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid var(--border-strong);background:var(--bg);transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.timeline .card.is-reached .timeline-dot{background:var(--tone-solid);border-color:var(--tone-solid);animation:pop var(--duration-slow) var(--ease-standard)}
.timeline .card.is-muted{opacity:.38;filter:saturate(.4)}
.timeline .card.is-muted:hover{opacity:.7}

/* Linked skills */
.skills-hint{margin:-8px 0 0;font-size:14px;line-height:20px;color:var(--ink-faint)}
.skills-hint-dot,button.chip::after{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;vertical-align:middle}
button.chip{border:0;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-instant) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
button.chip::after{content:""}
button.chip.chip-tone{color:var(--tone-ink)}
button.chip:hover{box-shadow:var(--shadow-glow)}
button.chip:active{transform:scale(.95)}
button.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary)}
.uses{padding:16px 20px;border-radius:var(--radius-lg);background:var(--surface-overlay);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;line-height:20px;color:var(--ink-muted)}
.uses[hidden]{display:none}
.uses:not([hidden]){animation:pop var(--duration-slow) var(--ease-standard);--pop-scale:1.02}
.uses strong{color:var(--ink)}
.uses a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font-weight:600;text-decoration:none;transition:background-color var(--duration-instant) var(--ease-standard)}
.uses a:hover{background:var(--primary-soft);color:var(--primary-ink)}
@keyframes highlight{0%{box-shadow:0 0 0 0 rgba(205,189,246,.0)}30%{box-shadow:0 0 0 6px rgba(205,189,246,.45)}100%{box-shadow:0 0 0 0 rgba(205,189,246,0)}}
.card.is-flash{animation:pop var(--duration-slow) var(--ease-standard),highlight 1200ms var(--ease-standard)}

/* Mockups that follow the pointer */
.mock{perspective:700px;overflow:hidden}
.mock>*{transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(var(--lift,0px));transition:transform var(--duration-slow) var(--ease-spring)}
.mock.is-tracking>*{transition:transform var(--duration-instant) linear}
.card:hover .mock{--lift:-6px}

/* Copy email */
.btn-icon{width:48px;padding:0}
.btn-icon .icon-check{display:none}
.btn-icon.is-done{color:var(--success-ink);border-color:var(--success-ink);animation:pop var(--duration-slow) var(--ease-standard)}
.btn-icon.is-done .icon-copy{display:none}
.btn-icon.is-done .icon-check{display:block}
.btn-icon.is-done .icon-check path{stroke-dasharray:1;animation:draw var(--duration-base) var(--ease-standard) both}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:40;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px 20px;border-radius:var(--radius-lg);background:var(--surface-overlay);color:var(--ink);box-shadow:var(--shadow-2);font:600 14px/20px var(--font-sans);
  transform:translate(-50%,calc(100% + 32px));opacity:0;pointer-events:none;transition:transform var(--duration-fast) var(--ease-exit),opacity var(--duration-fast) var(--ease-exit)}
.toast svg{flex:none;color:var(--success-ink)}
.toast.is-error svg{display:none}
.toast.is-open{transform:translate(-50%,0);opacity:1;transition:transform var(--duration-slow) var(--ease-spring),opacity var(--duration-base) var(--ease-standard)}
.toast.is-open svg path{stroke-dasharray:1;animation:draw var(--duration-base) var(--ease-standard) 120ms both}

/* Project sheet: bottom sheet on mobile, centered dialog on desktop */
.sheet{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box;padding:24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);color:var(--ink);font-family:var(--font-sans);box-shadow:var(--shadow-2);overflow:auto}
.sheet[open]{display:flex;flex-direction:column;gap:12px;animation:sheet-in var(--duration-slow) var(--ease-spring)}
.sheet::backdrop{background:var(--scrim);animation:fade-in var(--duration-base) var(--ease-standard)}
@keyframes sheet-in{from{transform:translateY(32px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes fade-in{from{opacity:0}}
.sheet-grab{display:none;align-self:center;width:40px;height:4px;border-radius:2px;background:var(--border-strong)}
.sheet-close{position:absolute;z-index:2;top:16px;right:16px;box-shadow:var(--shadow-1);width:44px;height:44px;border:0;border-radius:50%;background:var(--surface-raised);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform var(--duration-fast) var(--ease-spring)}
.sheet-close:active{transform:scale(.94)}
.sheet-mock{display:grid;place-items:center;height:200px;border-radius:var(--radius-md);overflow:hidden}
.sheet-mock>.mock{width:100%;height:100% !important}
.sheet h3{margin:4px 0 0;font-size:28px;line-height:34px;font-weight:600}
.sheet-meta{font-size:15px;color:var(--ink-muted)}
.sheet-text{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.sheet-skills{display:flex;flex-wrap:wrap;gap:8px}
.sheet-skills:empty{display:none}
.sheet-era:empty{display:none}
.sheet-private{display:flex;align-items:flex-start;gap:10px;margin:4px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);font-size:14px;line-height:20px;color:var(--ink-muted)}
.sheet-private svg{flex:none;margin-top:2px}
.sheet-cta{align-self:flex-start}

@media (max-width:760px){
  .timeline{padding-left:28px}
  .timeline::before,.timeline-fill{left:7px}
  .timeline-dot{left:-28px}
  .sheet{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}
  .sheet-grab{display:block}
  .sheet-close{top:20px}
  @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){.mock>*{transform:none !important}.timeline-fill{transition:none}}

/* ============ Section tones and light/dark theme ============ */
/* Each final layer uses primary plus one tone (data-tone). Without data-tone, lavender.
   --tone-pastel: decorative fill, the same in both themes.
   --tone-solid: indicators; in the light theme it becomes the ink, like primary. */
.fin{--tone-pastel:var(--lavender);--tone-soft:var(--lavender-soft);--tone-ink:var(--lavender-ink);--tone-solid:var(--tone-pastel);--on-tone:var(--on-pastel)}
.fin[data-tone="mint"]{--tone-pastel:var(--mint);--tone-soft:var(--mint-soft);--tone-ink:var(--mint-ink)}
.fin[data-tone="peach"]{--tone-pastel:var(--peach);--tone-soft:var(--peach-soft);--tone-ink:var(--peach-ink)}
.fin[data-tone="sky"]{--tone-pastel:var(--sky);--tone-soft:var(--sky-soft);--tone-ink:var(--sky-ink)}
.fin[data-tone="lemon"]{--tone-pastel:var(--lemon);--tone-soft:var(--lemon-soft);--tone-ink:var(--lemon-ink)}
.fin[data-tone="rose"]{--tone-pastel:var(--rose);--tone-soft:var(--rose-soft);--tone-ink:var(--rose-ink)}
:root[data-theme="light"] .fin{--tone-solid:var(--tone-ink);--on-tone:#fff}
.chip-tone{background:var(--tone-soft);color:var(--tone-ink)}

/* Theme switch: the thumb stretches on press and travels with a spring */
.switch{position:relative;flex:none;width:60px;height:36px;padding:0;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface-raised);cursor:pointer;transition:background-color var(--duration-base) var(--ease-standard)}
.switch-thumb{position:absolute;top:3px;left:3px;width:27px;height:27px;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);display:grid;place-items:center;
  transition:left var(--duration-slow) var(--ease-spring),width var(--duration-fast) var(--ease-spring)}
.switch[aria-checked="true"] .switch-thumb{left:calc(100% - 30px)}
.switch:active .switch-thumb{width:33px}
.switch[aria-checked="true"]:active .switch-thumb{left:calc(100% - 36px)}
.switch:hover{box-shadow:var(--shadow-glow)}
.switch-thumb svg{grid-area:1/1}
.switch.has-toggled .switch-thumb svg path,.switch.has-toggled .switch-thumb svg circle{stroke-dasharray:1;animation:draw var(--duration-base) var(--ease-standard) both}
.theme-wire{position:relative;width:60px;height:36px;padding:0;background:transparent;color:var(--sk-ink);display:inline-grid;place-items:center;cursor:pointer}
.theme-wire svg{grid-area:1/1}
:root[data-theme="light"] .when-dark,:root:not([data-theme="light"]) .when-light{display:none}

/* Theme change: the new theme is revealed in a circle from the switch */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ============ EN/ES language ============ */
html[data-i18n-pending] body{visibility:hidden}
/* Hero language switch: a pill sized to its text, with a mini switch inside */
.lang-switch{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:6px 8px 6px 14px;border:0;border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink-muted);font:600 12px/16px var(--font-sans);letter-spacing:.02em;cursor:pointer;transition:color var(--duration-instant) var(--ease-standard),box-shadow var(--duration-instant) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}
.lang-switch:hover{color:var(--ink);box-shadow:var(--shadow-glow)}
.lang-switch:active{transform:scale(.96)}
.lang-track{position:relative;flex:none;width:28px;height:16px;box-sizing:border-box;border:1.5px solid var(--border-strong);border-radius:var(--radius-pill);transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.lang-thumb{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--border-strong);transition:left var(--duration-slow) var(--ease-spring),width var(--duration-fast) var(--ease-spring),background-color var(--duration-base) var(--ease-standard)}
.lang-switch:active .lang-thumb{width:12px}
.lang-switch[aria-checked="true"] .lang-track{background:var(--primary);border-color:var(--primary)}
.lang-switch[aria-checked="true"] .lang-thumb{left:calc(100% - 11px);background:var(--on-primary)}
.lang-switch[aria-checked="true"]:active .lang-thumb{left:calc(100% - 14px)}
.lang-switch-wire{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:4px 10px 4px 14px;background:transparent;color:var(--sk-ink);font:18px/1.2 "Patrick Hand",cursive;cursor:pointer}
.wire-track{position:relative;display:inline-block;width:30px;height:16px;box-sizing:border-box;border-width:1.5px}
.wire-thumb{position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--sk-ink);transition:left var(--duration-base) var(--ease-standard)}
.lang-switch-wire[aria-checked="true"] .wire-thumb{left:calc(100% - 11px)}
/* Language change: short crossfade between both versions */
@keyframes fade-out{to{opacity:0}}
:root.vt-lang::view-transition-old(root){animation:fade-out var(--duration-base) var(--ease-exit) both}
:root.vt-lang::view-transition-new(root){animation:fade-in var(--duration-base) var(--ease-standard) both}

/* ============ Case study page ============ */
.page{min-height:100vh}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-64px;z-index:50;padding:12px 16px;border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-weight:600;text-decoration:none;transition:top var(--duration-fast) var(--ease-standard)}
.skip-link:focus{top:12px}
.progress{position:fixed;top:0;left:0;right:0;z-index:30;height:3px;background:var(--tone-solid);transform-origin:left;transform:scaleX(var(--read,0))}
.site-nav{position:sticky;top:0;z-index:15;background:var(--bg);border-bottom:1px solid var(--border);padding:20px clamp(16px,4vw,48px)}
.site-nav .navbar{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.site-nav .navlinks{display:flex;flex-wrap:wrap;gap:20px}
.site-nav .navtools{display:flex;align-items:center;gap:12px}
.flink[aria-current="true"]{color:var(--primary-ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:22px;font-weight:600}
.brand:hover{color:var(--ink)}
/* VH monogram: the V in a sky-to-lavender gradient, the H in the theme ink.
   As tall as the name's capitals (Fira Code cap height is .69em) and on its baseline. */
.brand-logo{display:block;flex-shrink:0;height:.69em;width:calc(.69em * 132 / 73);align-self:baseline}
.brand-logo~.navname{align-self:baseline}
/* Phones hide the name, so the logo stands alone: larger and centered */
@media (max-width:540px){
  .brand-logo{height:24px;width:calc(24px * 132 / 73);align-self:center}
}
.brand-logo .vh-from{stop-color:var(--sky-ink)}
.brand-logo .vh-to{stop-color:var(--primary-ink)}
.brand-logo .vh-ink{fill:var(--ink)}
.brand-logo .vh-fold{fill:var(--ink-faint)}

.case{display:block;max-width:1120px;margin:0 auto;padding:clamp(24px,4vw,40px) clamp(16px,4vw,48px) 0;outline:none}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,4vw,40px);padding:0;list-style:none;font-size:14px;line-height:20px;color:var(--ink-faint)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--border-strong)}
.crumbs a{color:var(--ink-muted);text-decoration:none}
.crumbs a:hover{color:var(--primary-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}

.case-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);align-items:center}
.case-intro{display:flex;flex-direction:column;gap:20px;min-width:0}
.case-intro .eyebrow{margin:0}
.case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* Pre-AI label: dashed border as a nod to the hand-drawn sketch layer */
/* radius-md: still a pill on one line, a rounded box if a long label wraps */
.era-badge{display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 12px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-md);color:var(--ink-muted);font:600 12px/16px var(--font-sans)}
.case-title{margin:0}
.case-logo{display:block;width:min(280px,72%);aspect-ratio:292/64;background:var(--ink);-webkit-mask:url(assets/akasa/logo.png) left center/contain no-repeat;mask:url(assets/akasa/logo.png) left center/contain no-repeat}
.case-lead{margin:0;max-width:52ch;font-size:18px;line-height:28px;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:4px 0 0}
.facts dt{font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.facts dd{margin:4px 0 0;font-size:15px;line-height:22px;color:var(--ink)}
.case-ctas{display:flex;flex-wrap:wrap;gap:12px}

.case-figure{margin:0;display:flex;flex-direction:column;gap:10px}
.case-figure figcaption{font-size:14px;line-height:20px;color:var(--ink-muted)}
.zoom{position:relative;display:block;width:100%;padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;cursor:zoom-in;transition:transform var(--duration-base) var(--ease-spring),box-shadow var(--duration-base) var(--ease-standard)}
.zoom img{display:block;width:100%;height:auto}
/* Slide exports: hide the slide title above the screens */
.zoom img.crop-slide{aspect-ratio:960/400;object-fit:cover;object-position:50% 100%}
/* Portrait photos: landscape crop in the page, full photo in the lightbox */
.zoom img.crop-photo{aspect-ratio:3/2;object-fit:cover;object-position:50% 45%}
.zoom:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.zoom:active{transform:scale(.98)}
.zoom-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);background:var(--surface-overlay);color:var(--ink);box-shadow:var(--shadow-1);font:600 12px/16px var(--font-sans);opacity:0;transform:translateY(4px);transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-spring)}
.zoom:hover .zoom-hint,.zoom:focus-visible .zoom-hint{opacity:1;transform:none}
@media (hover:none){.zoom-hint{opacity:1;transform:none}}

.glance{margin-top:clamp(40px,6vw,64px);padding:clamp(20px,3vw,32px);border-radius:var(--radius-xl);background:var(--tone-soft)}
.glance-title{margin:0 0 16px;font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--tone-ink)}
.glance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.glance h3{margin:0 0 6px;font-size:17px;line-height:24px;font-weight:700}
.glance p{margin:0;font-size:16px;line-height:26px;color:var(--ink)}

.case-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,5vw,64px);margin-top:clamp(40px,6vw,64px)}
.toc{position:sticky;top:112px;align-self:start}
.toc-title{margin:0 0 12px;font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:block;padding:8px 12px;border-left:2px solid var(--border);color:var(--ink-muted);font-size:14px;line-height:20px;text-decoration:none;transition:color var(--duration-instant) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{border-color:var(--tone-solid);color:var(--ink);font-weight:600}

.case-body{min-width:0}
.case-section{padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:96px}
.case-section:first-child{padding-top:0;border-top:0}
.case-section h2{margin:0 0 16px;font-size:clamp(26px,3vw,32px);line-height:1.2;font-weight:600}
.case-section h3{margin:28px 0 12px;font-size:20px;line-height:28px;font-weight:600}
.case-section h4{margin:0;font-size:17px;line-height:24px;font-weight:700}
.case-section p{max-width:68ch;margin:0 0 16px;font-size:16px;line-height:28px;color:var(--ink-muted)}
.case-section .case-figure{margin-top:24px}
/* Text on the left, photo on the right; stacked on small screens */
.case-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,40px);align-items:start}
.case-split .goal{margin-top:8px}
.case-section .case-figure-side{margin-top:6px}
.case-figure-side .zoom img.crop-photo{aspect-ratio:4/5}
.goal{margin:24px 0 0;padding:20px 24px;border-left:3px solid var(--tone-solid);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--surface)}
.goal p{margin:0;color:var(--ink)}
.goal .goal-label{margin-bottom:8px;font-size:12px;line-height:16px;letter-spacing:.06em;color:var(--tone-ink)}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.pains .card{display:flex;flex-direction:column;gap:10px;padding:20px}
.pains .card p{margin:0;font-size:15px;line-height:24px}
.pain-number{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-pill);background:var(--tone-soft);color:var(--tone-ink);font-weight:600}
.screens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 0;padding:0;list-style:none}
.screens p{margin:0;font-size:15px;line-height:24px}

.case-end{display:flex;flex-direction:column;align-items:center;gap:16px;margin:clamp(40px,6vw,72px) 0 0;padding:clamp(40px,6vw,64px) clamp(16px,4vw,48px);border-radius:var(--radius-xl);background:var(--surface);text-align:center}
.case-end h2{margin:0;font-size:clamp(30px,4vw,40px);line-height:1.15;font-weight:600}
.case-end p{margin:0;color:var(--ink-muted)}
.case-end .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.site-footer{max-width:1120px;margin:0 auto;padding:32px clamp(16px,4vw,48px) 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:14px;line-height:20px;color:var(--ink-faint)}

/* Lightbox: enlarged image; wide images scroll sideways on small screens */
.lightbox{width:min(1400px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box;padding:56px 16px 16px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);color:var(--ink);font-family:var(--font-sans);box-shadow:var(--shadow-2)}
.lightbox[open]{display:flex;flex-direction:column;gap:12px;animation:sheet-in var(--duration-slow) var(--ease-spring)}
.lightbox::backdrop{background:var(--scrim);animation:fade-in var(--duration-base) var(--ease-standard)}
.lightbox-scroll{overflow:auto;border-radius:var(--radius-md);outline-offset:-2px}
.lightbox-scroll img{display:block;width:100%;height:auto}
.lightbox.is-wide .lightbox-scroll img{min-width:900px}
/* Other images fit entirely on screen, portrait photos included */
.lightbox:not(.is-wide) .lightbox-scroll img{width:auto;max-width:100%;max-height:calc(100vh - 170px);margin:0 auto}
.lightbox-caption{margin:0;font-size:14px;line-height:20px;color:var(--ink-muted)}

@media (max-width:900px){
  .case-hero,.case-layout{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
}
@media (max-width:760px){
  .site-nav{padding:8px 16px}
  .facts,.glance-grid,.screens,.case-split{grid-template-columns:minmax(0,1fr)}
  .pains{grid-template-columns:minmax(0,1fr)}
  .case-ctas>a{flex:1 1 100%}
  .case-end .ctas>a{flex:1 1 100%;justify-content:center}
  .case-end .ctas>a:has(+ .btn-icon){flex:1 1 0;min-width:0;padding-inline:16px;white-space:nowrap}
  .lightbox{width:100vw;max-width:100vw;max-height:100vh;height:100vh;margin:0;border-radius:0;border:0}
}

/* Dashboard mockup for the design challenge card */
.dash-mock{display:flex;gap:8px;width:min(280px,86%);aspect-ratio:16/10;box-sizing:border-box;padding:10px;border-radius:14px;border:2px solid var(--border);background:var(--bg)}
.dash-side{display:flex;flex-direction:column;gap:8px;width:14px;padding-top:4px}
.dash-side span{height:14px;border-radius:5px;background:var(--surface-raised)}
.dash-side span:first-child{background:var(--tone-pastel)}
.dash-main{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dash-stats span{height:26px;border-radius:6px;background:var(--surface-raised)}
.dash-chart{flex:1;width:100%;min-height:0;border-radius:6px;background:var(--surface)}
.dash-chart path{stroke:var(--tone-pastel)}
.dash-rows{display:flex;flex-direction:column;gap:5px}
.dash-rows span{height:6px;border-radius:3px;background:var(--border)}
.dash-rows span:nth-child(2){width:80%}
.dash-rows span:nth-child(3){width:60%}

/* ============ Design challenge page ============ */
.case-title-text{font-size:clamp(40px,6vw,60px);line-height:1.05;font-weight:600;letter-spacing:-.01em}
.text-link{color:var(--primary-ink);font-weight:600;text-underline-offset:3px}
.btn.is-pending{border-style:dashed;color:var(--ink-faint);cursor:default}
.btn.is-pending:hover{background:transparent}
.btn.is-pending:active{transform:none}
.reqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.reqs .card{display:flex;flex-direction:column;gap:8px;padding:20px}
.reqs h3{margin:0;font-size:17px;line-height:24px}
.reqs ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px;color:var(--ink-muted)}
.req-label{margin:0 !important;font-size:12px !important;line-height:16px !important;letter-spacing:.06em;color:var(--tone-ink) !important}
.case-section .reqs+.goal{margin-top:16px}

/* Placeholders to fill in later: dashed and muted so they read as "pending" */
.todo{margin:16px 0;padding:16px 20px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg)}
.todo p{margin:0}
.todo .todo-label{margin-bottom:6px;font-size:12px;line-height:16px;letter-spacing:.06em;color:var(--tone-ink)}
.todo-inline{color:var(--ink-faint) !important;font-style:italic}
.img-slot{display:grid;place-items:center;aspect-ratio:16/9;margin-top:16px;padding:16px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--ink-faint);font-size:14px;line-height:20px;text-align:center}
.days{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.days li{display:flex;gap:16px;align-items:baseline;padding:12px 16px;border-radius:var(--radius-md);background:var(--surface)}
.days .mono{flex:none;font-size:12px;letter-spacing:.06em;color:var(--tone-ink)}
.table-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-lg)}
.decisions{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.decisions caption{padding:12px 16px;text-align:left;font-weight:600;color:var(--ink)}
.decisions th,.decisions td{padding:12px 16px;border-top:1px solid var(--border);text-align:left;vertical-align:top}
.decisions th{font:600 12px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.delivered{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0 0;padding:0;list-style:none}
.delivered p{margin:0 !important;font-size:15px;line-height:22px}
.changes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:change}
.changes .card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 18px 56px;counter-increment:change}
.changes .card::before{content:counter(change);position:absolute;left:16px;top:16px;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--tone-soft);color:var(--tone-ink);font:600 13px/1 var(--font-mono)}
.changes p{margin:0 !important;font-size:15px;line-height:22px}
.swatches{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px;margin:0 0 20px;padding:0;list-style:none}
.swatches li{display:flex;flex-direction:column;gap:4px;font-size:11px;line-height:14px;color:var(--ink-muted)}
.swatch{display:block;aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--border)}
.case-figure-side .zoom:has(.phone-shot){max-width:320px;margin:0 auto}
@media (max-width:760px){
  .changes{grid-template-columns:minmax(0,1fr)}
  .swatches{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Tool cards (Maze, Zeroheight): logo drawn with a mask so it follows the text color */
.tool-card{display:flex;flex-direction:column;gap:16px;margin-top:20px;padding:24px}
.tool-head{display:flex;align-items:center;gap:12px;min-height:32px}
.tool-head h3{margin:0;font-size:20px;line-height:28px}
.tool-logo{display:block;flex:none;height:28px;background:var(--ink)}
.tool-logo-maze{width:28px;-webkit-mask:url(assets/logos/maze.svg) left center/contain no-repeat;mask:url(assets/logos/maze.svg) left center/contain no-repeat}
.tool-logo-figma{width:28px;-webkit-mask:url(assets/logos/figma.svg) left center/contain no-repeat;mask:url(assets/logos/figma.svg) left center/contain no-repeat}
.tool-logo-zeroheight{width:140px;-webkit-mask:url(assets/logos/zeroheight.svg) left center/contain no-repeat;mask:url(assets/logos/zeroheight.svg) left center/contain no-repeat}
.tool-body{display:flex;flex-direction:column;gap:6px}
.tool-body p{max-width:none;margin:0 !important;font-size:15px;line-height:24px}
.tool-body .req-label+p{margin-bottom:10px !important}
.tool-card .btn{align-self:flex-start}