/* Platin Gjochi portfolio.
   System: white page, surfaces layered one step darker each (bg → surface-1 → surface-2 → surface-3).
   Every colour, size and radius below comes from the tokens in :root; the /system page shows them. */

@font-face { font-family: Inter; src: url(/assets/fonts/Inter-400-600.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url(/assets/fonts/PlayfairDisplay-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hand'; src: url(/assets/fonts/Caveat-500-600.woff2) format('woff2'); font-weight: 500 600; font-display: swap; } /* Caveat (OFL): margin notes, captions */
@font-face { font-family: 'Signature'; src: url(/assets/fonts/HerrVonMuellerhoff-signature.woff2) format('woff2'); font-display: block; } /* Herr Von Muellerhoff (OFL), subset to “Platin” */
@font-face { font-family: 'Space Mono'; src: url(/assets/fonts/SpaceMono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Neutral ramp (one family, faintly cool) */
  --gray-0: #ffffff;
  --gray-25: #fafafa;
  --gray-50: #f6f6f6;
  --gray-100: #f0f0f0;
  --gray-150: #e9e9e9;
  --gray-200: #e1e1e1;
  --gray-300: #cfcfcf;
  --gray-400: #a6a6a6;
  --gray-500: #8c8c8c;
  --gray-600: #6e6e6e;
  --gray-700: #545454;
  --gray-800: #333333;
  --gray-900: #171717;

  /* Layers: each one sits on the one before it */
  --bg: #fbfbfb;                 /* off-white page, so white can lift off it */
  --surface-1: #f3f3f3;          /* cards, frames, footer */
  --surface-2: #ececec;          /* things inside a card: chips, pills, inset panels */
  --surface-3: #e4e4e4;          /* hover and pressed on surface-2 */
  --raised: var(--gray-0);       /* a card lifted off a surface (deck, popovers) */
  --line-1: rgba(0, 0, 0, .06);  /* hairline where two layers meet */
  --line-2: rgba(0, 0, 0, .10);  /* control outlines */

  /* Text: 1 primary, 2 body, 3 meta (all pass AA on every layer); display-muted for 32px+ only */
  --text-1: var(--gray-900);
  --text-2: var(--gray-700);
  --text-3: var(--gray-600);
  --text-muted-display: var(--gray-500);
  --text-faint: #a3a3a3;           /* placeholders, dates, the quietest meta */
  --text-on-dark: #fff;

  /* Accents: one per discipline, plus the booking warm and focus */
  --industrial: #c4381c;
  --interface: #4259bf;
  --strategy: #4d8e36;
  --ai: #8300ab;
  --warm: #e2440f;
  --warm-surface: #fdeee6;
  --focus: #3b6cf6;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui: var(--font-sans);   /* one family: Inter does UI too */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --fs-display: clamp(36px, 4.2vw, 60px);  --lh-display: 1.08;  --ls-display: -0.025em;
  --fs-quote: clamp(28px, 4vw, 48px);    --lh-quote: 1.2;     --ls-quote: -0.015em;
  --fs-h1: clamp(28px, 3vw, 36px);       --lh-h1: 1.15;       --ls-h1: -0.025em;
  --fs-h2: 24px;                         --lh-h2: 1.2;        --ls-h2: -0.02em;
  --fs-h3: 20px;                         --lh-h3: 1.3;        --ls-h3: -0.015em;
  --fs-body-lg: 18px;                    --lh-body-lg: 1.55;  --ls-body-lg: -0.012em;
  --fs-body: 16px;                       --lh-body: 1.5;      --ls-body: -0.01em;
  --fs-sm: 14px;                         --lh-sm: 1.45;       --ls-sm: -0.005em;
  --fs-xs: 12px;                         --lh-xs: 1.4;        --ls-xs: 0;
  --measure: 66ch;

  /* Space (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  /* Spacing roles: use these, not raw steps, for layout. Everything sits on the 4px grid. */
  --space-section: 144px;  /* between page sections */
  --space-block: 64px;     /* between blocks inside a section (case study parts) */
  --space-group: 32px;     /* a label or heading to its content */
  --space-related: 24px;   /* text to its image; gaps in a grid of cards */
  --space-stack: 12px;     /* a heading to its text; items in a list */
  --pad-card: 24px;        /* inside a card */
  --pad-tight: 16px;       /* inside a small card or panel */
  --pad-inset: 6px;        /* a frame around an image or panel; outer radius = inner + 6 */
  --space-header: 80px;    /* a section's heading block to its content */

  /* Radius: nested shapes use outer = inner + padding */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px;

  /* Elevation, used sparingly: layering does most of the work */
  --shadow-raised: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --shadow-float: 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 #fff, 0 12px 32px -8px rgba(0,0,0,.18);

  /* Motion, on transitions.dev's scale: durations, eases, blurs and distances. Nothing over .5s.
     Enter with --ease-out; leave faster than you arrive; swaps cross with a small blur. */
  --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms;
  --duration-slow: 400ms; --duration-very-slow: 500ms; --duration-stagger: 40ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: ease-in-out;
  --ease-bounce: cubic-bezier(.34, 1.36, .64, 1);
  --blur-small: 2px; --blur-medium: 3px;
  --distance-micro: 4px; --distance-small: 6px; --distance-medium: 12px;
  --scale-small: .98;
  /* Short names the components already use */
  --dur-fast: var(--duration-quick); --dur: var(--duration-fast); --dur-slow: var(--duration-slow);

  --content: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: var(--ease-out);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  letter-spacing: var(--ls-body);
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
picture { display: contents; } /* responsive images lay out exactly like a bare <img> */
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
.icon { width: 1em; height: 1em; flex: none; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--text-1); color: #fff; padding: 8px 14px; border-radius: var(--r-md); }
.skip:focus { left: 8px; }

/* Buttons
   Variant: primary | secondary | tertiary | ghost.  Size: sm 32 | md 40 | lg 48.  Add .btn-icon for a square icon button.
   States: rest, hover, pressed (:active), focus-visible, disabled ([disabled] / aria-disabled).
   Each button is a stroke (inset ring), a top highlight and a small drop shadow; pressing removes the lift. */
.btn {
  --h: 40px; --px: 16px; --gap: 8px; --fs: 14px; --icon: 16px; --radius: 10px;
  --bg: var(--raised); --fg: var(--text-1);
  --stroke: rgba(0,0,0,.10); --highlight: rgba(255,255,255,.9);
  --drop: 0 1px 2px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.06);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap);
  height: var(--h); padding: 0 var(--px); border: 0; border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--stroke), inset 0 1px 0 var(--highlight), var(--drop);
  font: 500 var(--fs)/1 var(--font-ui); letter-spacing: 0;
  white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.btn > span { text-box: trim-both cap alphabetic; }
.btn .icon { font-size: var(--icon); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .45; pointer-events: none; box-shadow: inset 0 0 0 1px var(--stroke); }

.btn-sm { --h: 32px; --px: 12px; --gap: 6px; --fs: 13px; --icon: 14px; --radius: 8px; }
.btn-md { --h: 40px; --px: 16px; --gap: 8px; --fs: 14px; --icon: 16px; --radius: 10px; }
.btn-lg { --h: 48px; --px: 20px; --gap: 10px; --fs: 16px; --icon: 18px; --radius: 12px; }
.btn-icon { width: var(--h); padding: 0; }

/* Primary: the one action on a screen */
.btn-primary {
  --bg: var(--gray-900); --fg: var(--text-on-dark);
  --stroke: #000; --highlight: rgba(255,255,255,.16);
  --drop: 0 1px 2px rgba(0,0,0,.22), 0 3px 8px -2px rgba(0,0,0,.20);
  background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
}
.btn-primary:hover, .btn-primary.is-hover { --bg: #262626; }
.btn-primary:active, .btn-primary.is-active { --bg: #0b0b0b; --highlight: rgba(255,255,255,.06); --drop: 0 0 0 rgba(0,0,0,0); background-image: none; }

/* Secondary: white, stroked, lifted */
.btn-secondary:hover, .btn-secondary.is-hover { --bg: #f8f8f8; --stroke: rgba(0,0,0,.16); }
.btn-secondary:active, .btn-secondary.is-active { --bg: var(--surface-1); --highlight: rgba(0,0,0,.04); --drop: 0 0 0 rgba(0,0,0,0); }

/* Tertiary: a filled step of the surface, no lift */
.btn-tertiary { --bg: var(--surface-2); --fg: var(--text-2); --stroke: transparent; --highlight: transparent; --drop: 0 0 0 rgba(0,0,0,0); font-weight: 500; font-family: var(--font-sans); }
.btn-tertiary:hover, .btn-tertiary.is-hover { --bg: var(--surface-3); --fg: var(--text-1); }
.btn-tertiary:active, .btn-tertiary.is-active { --bg: var(--gray-200); }

/* Ghost: text until touched */
.btn-ghost { --bg: transparent; --fg: var(--text-2); --stroke: transparent; --highlight: transparent; --drop: 0 0 0 rgba(0,0,0,0); font-weight: 500; font-family: var(--font-sans); }
.btn-ghost:hover, .btn-ghost.is-hover { --bg: rgba(0,0,0,.04); --fg: var(--text-1); }
.btn-ghost:active, .btn-ghost.is-active { --bg: rgba(0,0,0,.07); }

/* Section labels */
.label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px var(--s-4); border-radius: var(--r-sm);
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1);
  color: var(--text-2); font: 500 var(--fs-sm)/1.4 var(--font-sans); letter-spacing: 0;
}
.label .icon { font-size: 16px; }
.label-warm { background: var(--warm-surface); box-shadow: inset 0 0 0 1px rgba(226,68,15,.18); color: var(--warm); }

/* Nav */
.nav-wrap { position: sticky; top: 14px; z-index: 50; display: flex; justify-content: center; padding: 0 var(--gutter); height: 0; }
.nav {
  display: flex; align-items: center; gap: var(--s-2);
  height: 52px; padding: 0 6px; border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 0 0 1px var(--line-1), 0 1px 0 #fff inset, var(--shadow-float);
}
/* One pill under the links: it travels to whatever the pointer is on, then back to the current page or section */
.nav-links { position: relative; display: flex; }
.nav-links a { position: relative; z-index: 1; font: 500 14px/1 var(--font-ui); letter-spacing: 0; padding: 12px 14px; border-radius: 10px; color: var(--text-3); transition: color var(--duration-quick); }
.nav-links a:hover, .nav-links a.is-current { color: var(--text-1); }
.nav-links a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nav-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 10px; background: var(--surface-2); opacity: 0;
  transition: transform var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out), opacity var(--duration-quick); }
.nav-pill.is-on { opacity: 1; }
.nav-pill.is-instant { transition: opacity var(--duration-quick); }
.nav-sep { width: 1px; height: 20px; margin: 0 var(--s-1); background: var(--line-2, rgba(0,0,0,.1)); }
.nav-actions { display: flex; gap: 4px; }

/* Layout */
.section { width: min(var(--content), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: var(--space-section); display: flex; flex-direction: column; align-items: center; }
.section > .label { margin-bottom: var(--space-group); }

/* Hero */
.hero { padding: var(--s-32) var(--gutter) 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-short { min-height: 60vh; justify-content: center; }
.hero-title {
  position: relative;
  margin: var(--space-group) 0 var(--space-related);
  max-width: 900px; width: fit-content;
  font: 400 var(--fs-display)/var(--lh-display) var(--font-ui); letter-spacing: var(--ls-display);
  color: var(--text-muted-display);
}
.hero-title em { font-style: normal; color: var(--text-1); }
.hero-title .serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; }
.hero-title .mono { font-family: var(--font-mono); letter-spacing: -0.04em; }
.hero-title .w { display: inline-block; }
.hero-sub { max-width: 400px; color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--space-related); }
/* Hero cursor: a collaborator's cursor, Figma style, idling by the headline. It never follows the visitor:
   when their pointer comes near it leans toward them a little and says something in cursor chat, typed out;
   clicking it says the next line. */
.cursor { --c: #e2440f; position: absolute; right: -64px; top: 52%; display: block; width: 0; height: 0; pointer-events: none; z-index: 5; will-change: transform; }
.cursor-body { position: absolute; left: 0; top: 0; animation: drift 6s ease-in-out infinite; }
.cursor.is-live .cursor-body { animation: none; }
.cursor-hit { position: absolute; left: -6px; top: -6px; width: 96px; height: 56px; pointer-events: auto; cursor: pointer; }
.cursor svg { position: absolute; left: 0; top: 0; width: 22px; height: 24px; max-width: none; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); transition: transform var(--duration-quick) var(--ease-out); }
.cursor.is-pressed svg { transform: scale(.86); }
.cursor path { fill: var(--c); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.cursor-tag { position: absolute; left: 15px; top: 19px; display: flex; align-items: baseline; padding: 4px 8px 5px; border-radius: 3px 10px 10px 10px; background: var(--c); color: #fff; font: 500 13px/1.25 var(--font-sans); letter-spacing: 0; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 16px -6px rgba(226,68,15,.5), inset 0 0 0 1px rgba(255,255,255,.18); transition: border-radius var(--duration-fast) var(--ease-out); }
.cursor-tag b { font-weight: 600; }
.cursor-say { font-weight: 400; opacity: .95; }
.cursor-say:not(:empty)::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 8px -1px; background: rgba(255,255,255,.4); }
.cursor-say.is-typing::after { content: ''; display: inline-block; width: 1px; height: 13px; margin: 0 0 -2px 2px; background: #fff; animation: caret 1s steps(1) infinite; }
.cursor.is-chat .cursor-tag { border-radius: 3px 14px 14px 14px; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-10px, 8px); } 70% { transform: translate(6px, -6px); } }

/* Philosophy */
.crafts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-related); width: 100%; }
.craft-art { aspect-ratio: 1; border-radius: var(--r-2xl); background: var(--surface-1); overflow: hidden; position: relative; }
.craft h2 { margin: var(--s-5) 0 var(--s-2); font: 500 var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); }
.craft p { color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); }

/* Illustrations: quiet faux UI on surface-1, cropped and faded at the right and bottom */
.ill { position: absolute; inset: 0; font-family: var(--font-sans); letter-spacing: -0.01em; }
.ill-win {
  position: absolute; left: 28px; top: 36px; width: 380px; height: 380px;
  background: var(--raised); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line-1), 0 1px 2px rgba(0,0,0,.03);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 92%), linear-gradient(180deg, #000 45%, transparent 88%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, #000 55%, transparent 92%), linear-gradient(180deg, #000 45%, transparent 88%);
}
.ill-dots { display: flex; gap: 7px; padding: 14px 16px; }
.ill-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-150); }
.ill-head { display: flex; align-items: center; gap: 8px; padding: 0 20px; font: 500 15px/1.3 var(--font-sans); color: var(--text-2); }
.ill-head .icon { font-size: 18px; color: var(--gray-400); }
.ill-bars { display: grid; gap: 9px; padding: 14px 20px 0; }
.ill-bar { height: 10px; border-radius: 5px; background: var(--gray-100); }
.ill-bar.faint { background: var(--gray-50); }
.ill-btn { display: inline-flex; align-items: center; gap: 6px; margin: 18px 20px 0; height: 32px; padding: 0 12px 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font-sans); color: var(--text-2); background: var(--raised); }
.ill-btn .icon { font-size: 12px; color: var(--gray-400); }

/* Industrial: a CAD viewport over a real render */
.ill-cad { position: relative; margin: 16px 20px 0; height: 210px; border-radius: 10px; background:
  linear-gradient(var(--gray-50) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(90deg, var(--gray-50) 1px, transparent 1px) 0 0 / 20px 20px, var(--gray-25);
  box-shadow: inset 0 0 0 1px var(--line-1); overflow: hidden; }
.ill-cad img { position: absolute; left: 50%; top: 12px; width: 190px; margin-left: -110px; filter: grayscale(1) contrast(.9) brightness(1.08); mix-blend-mode: multiply; }
.ill-dim { position: absolute; left: 22px; top: 22px; bottom: 26px; width: 1px; background: var(--gray-300); }
.ill-dim::before, .ill-dim::after { content: ''; position: absolute; left: -4px; width: 9px; height: 1px; background: var(--gray-300); }
.ill-dim::before { top: 0; } .ill-dim::after { bottom: 0; }
.ill-dim span { white-space: nowrap; position: absolute; top: 50%; left: 8px; transform: translateY(-50%); font: 500 11px/1.3 var(--font-sans); color: var(--text-3); background: var(--gray-25); padding: 2px 4px; border-radius: 4px; }

/* UX/UI: an app with a sidebar */
.ill-app { display: flex; height: 100%; }
.ill-side { flex: none; width: 64px; padding: 16px 12px; display: grid; align-content: start; gap: 10px; box-shadow: inset -1px 0 0 var(--line-1); }
.ill-side i { width: 40px; height: 40px; border-radius: 10px; background: var(--gray-50); }
.ill-side i:first-child { background: var(--gray-100); }
.ill-side hr { width: 28px; margin: 2px 6px; border: 0; border-top: 1px solid var(--line-2); }
.ill-main { flex: 1; padding-top: 22px; }

/* Strategy: a roadmap board */
.ill-board { display: grid; grid-template-columns: repeat(3, 150px); gap: 12px; padding: 16px 20px 0; }
.ill-col { display: grid; gap: 8px; align-content: start; }
.ill-col-name { font: 500 12px/1.3 var(--font-sans); color: var(--text-3); padding: 0 2px 2px; }
.ill-card { padding: 10px; border-radius: 10px; background: var(--gray-25); box-shadow: inset 0 0 0 1px var(--line-1); display: grid; gap: 7px; }
.ill-card .ill-bar { height: 7px; border-radius: 4px; }
.ill-card.real { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 12px -6px rgba(0,0,0,.12); }
.ill-card.real b { font: 500 13px/1.3 var(--font-sans); color: var(--text-1); }
.ill-tag { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font: 500 11px/1.4 var(--font-sans); color: var(--strategy); background: #edf5ea; }
.ill-tag .icon { font-size: 11px; }

/* Selected work: one card per project. Every cover is one hero on the same grey stage:
   a screen in a window running off the bottom right, phones rising from the bottom edge, or the object itself. */
.work-list { width: 100%; display: grid; gap: var(--space-related); }
.project { padding: var(--pad-inset); border-radius: var(--r-2xl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.cover {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-2xl) - var(--pad-inset)); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-1);
}
.cover-item { display: block; transition: transform var(--dur-slow) var(--ease-out); }
.cover-stage { position: absolute; inset: 0; display: block; }
.cover-item img { display: block; width: 100%; height: auto; }
.cover-window .cover-item { position: absolute; left: 9%; top: 11%; width: 100%; }
.project:hover .cover-window .cover-item { transform: translate(-6px, -6px); }
/* A desktop window: a title bar with the three lights and, for live products, the address */
.device-window {
  overflow: hidden; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.09), 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px -16px rgba(0,0,0,.22);
}
.win-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f6f6f6; border-bottom: 1px solid rgba(0,0,0,.07); }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dcdcdc; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.win-url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; height: 20px; border-radius: 6px; background: #ececec; color: var(--text-3); font-size: 11px; line-height: 20px; text-align: center; white-space: nowrap; overflow: hidden; }
.device-window.is-dark { background: #0d0d0e; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,255,255,.06) inset, 0 24px 48px -16px rgba(0,0,0,.35); }
.device-window.is-dark .win-bar { background: #161618; border-bottom-color: rgba(255,255,255,.06); }
.device-window.is-dark .win-bar i { background: #3a3a3d; box-shadow: none; }
.cover-phones .cover-stage { display: flex; justify-content: center; align-items: flex-start; gap: 4%; }
.cover-phones .cover-item { flex: none; width: 27%; margin-top: 7%; }
/* A phone: a dark bezel with a thin lit edge around the screen */
/* Padding percentages resolve against the stage, not the phone: .85% of the stage is about 3% of a phone that's
   27% wide, the thin bezel of a real iPhone. Corners stay concentric: outer radius = screen radius + bezel. */
.device-phone {
  padding: .85%; border-radius: 15.9% / 7.5%; background: #0b0b0c;
  box-shadow: 0 0 0 1px #3a3a3c, 0 0 0 1px rgba(255,255,255,.1) inset, 0 28px 56px -18px rgba(0,0,0,.4);
}
.device-phone img { border-radius: 13.7% / 6.3%; }
.cover-phones .cover-item:nth-child(2) { margin-top: 4%; }
.project:hover .cover-phones .cover-item { transform: translateY(-8px); }
.cover-object .cover-item { position: absolute; inset: 0; }
/* The product shots sit on a studio gradient; the stage takes the same gradient and their sides fade into it */
.cover-object { background: linear-gradient(180deg, #fafafa, #f2f2f2); }
.cover-object .cover-item img { width: auto; height: 100%; margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.project:hover .cover-object .cover-item { transform: scale(1.025); }
.project-body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-related); padding: var(--pad-card) var(--pad-tight) var(--pad-tight); }
.project-text { display: grid; gap: var(--s-2); max-width: 600px; }
.project h3 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); }
.project-text p { color: var(--text-3); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.tags li { padding: 4px 10px; border-radius: var(--r-sm); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-sm); color: var(--text-2); }
.project-body .btn { flex: none; }

/* Work groups: digital and physical, each with its own heading */
.work-group { width: 100%; }
.work-group + .work-group { margin-top: var(--space-block); }
.work-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-related); padding: 0 var(--pad-tight) var(--space-related); }
.work-group-head h3 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); }
.work-group-head p { color: var(--text-3); max-width: 420px; text-align: right; }

/* More work: a compact index of the smaller projects (after benlau and directoryyy) */
.more-work { width: 100%; margin-top: var(--space-block); }
.more-title { font: 500 var(--fs-sm)/1.4 var(--font-sans); color: var(--text-3); padding: 0 var(--pad-tight) var(--space-stack); }
.index { display: grid; border-radius: var(--r-xl); background: var(--surface-1); padding: var(--pad-inset); }
.index a { display: grid; grid-template-columns: 48px 1fr 1fr auto 20px; align-items: center; gap: var(--pad-tight); padding: 10px; border-radius: calc(var(--r-xl) - var(--pad-inset)); transition: background-color var(--dur-fast); }
.index a:hover { background: var(--raised); }
.index-thumb img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--raised); }
.index-name { font-weight: 500; }
.index-kind { color: var(--text-3); }
.index-tags { font-size: var(--fs-sm); color: var(--text-faint); }
.index .icon { font-size: 16px; color: var(--text-faint); transition: color var(--dur-fast), transform var(--dur) var(--ease-out); }
.index a:hover .icon { color: var(--text-1); transform: translateX(2px); }


/* Impact strip under the hero: four numbers, one line of proof each */
.impact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pad-inset); width: min(var(--content), 100%); margin-top: var(--space-block); text-align: left; }
.impact div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: var(--pad-tight) var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); }
.impact dd { margin: 0; font: 500 var(--fs-h1)/1.05 var(--font-sans); letter-spacing: var(--ls-h1); color: var(--text-1); }
.impact dt { font-size: var(--fs-sm); color: var(--text-3); }

.section-intro { margin: calc(-1 * var(--space-stack)) 0 var(--space-group); color: var(--text-3); text-align: center; }

/* Built: the arrow link under each item */
.craft-proof { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-stack); font-size: var(--fs-sm); font-weight: 500; color: var(--text-1); }
.craft-proof .icon { font-size: 13px; transition: transform var(--dur) var(--ease-out); }
.craft-proof:hover .icon { transform: translateX(3px); }

/* Experience timeline: every role visible with its dates; open one for the detail */
.timeline { width: 100%; display: grid; gap: var(--pad-inset); padding: 0; list-style: none; }
.tl-item { border-radius: var(--r-xl); background: var(--surface-1); transition: background-color var(--duration-quick) var(--ease-out); }
.tl-item:hover { background: var(--surface-2); }
.tl-head { width: 100%; display: grid; grid-template-columns: 40px 1fr auto auto 16px; align-items: center; gap: var(--pad-tight); padding: var(--pad-tight) var(--pad-card) var(--pad-tight) var(--pad-tight); border: 0; border-radius: var(--r-xl); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-head img { width: 40px; height: 40px; border-radius: 10px; }
.tl-main { display: grid; gap: 2px; }
.tl-main b { font-weight: 500; font-size: var(--fs-body-lg); }
.tl-main span, .tl-dates { color: var(--text-3); font-size: var(--fs-sm); }
.tl-role { font-weight: 500; }
.tl-dates { min-width: 116px; text-align: right; font-variant-numeric: tabular-nums; }
.tl-head .icon { font-size: 14px; color: var(--text-faint); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-quick); }
.tl-item:hover .tl-head .icon { color: var(--text-2); }
/* Accordion (transitions.dev): height via grid rows 0fr to 1fr, the text un-blurs as it opens, the chevron turns down. 250ms both ways. */
.tl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-fast) var(--ease-out); }
.tl-panel-inner { overflow: hidden; opacity: 0; filter: blur(var(--blur-small)); transition: opacity var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
.tl-item[data-open="true"] .tl-panel { grid-template-rows: 1fr; }
.tl-item[data-open="true"] .tl-panel-inner { opacity: 1; filter: blur(0); }
.tl-item[data-open="true"] .tl-head .icon { transform: rotate(90deg); }
.tl-panel ul { display: grid; gap: 6px; margin: 0; padding: 0 var(--pad-card) var(--pad-card) calc(var(--pad-tight) + 40px + var(--pad-tight) + 18px); list-style: disc; color: var(--text-2); }
.tl-panel li::marker { color: var(--text-faint); }

/* Built: things made in code, each with a live stage */
.built { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-related); }
.built-item { display: grid; align-content: start; gap: var(--pad-tight); }
.built-stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-2xl); background: var(--surface-1); overflow: hidden; display: grid; place-items: center; }
.built-stage > video { width: 100%; height: 100%; object-fit: cover; }
.built-text h3 { font: 500 var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); }
.built-kind { font-size: var(--fs-sm); color: var(--text-faint); margin: 2px 0 var(--s-2); }
.built-text p:not(.built-kind) { color: var(--text-3); }

/* Soma demo: an interactive sketch of the Today screen (dark, awareness colour from below) */
.demo-phone { position: relative; width: 236px; height: 480px; scale: .74; margin-top: -8px; border-radius: 40px; padding: 8px; background: #0b0b0d; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 48px -16px rgba(0,0,0,.35); }
.demo-screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 60% at 50% 110%, var(--glow, rgba(232,162,122,.45)), transparent 70%), #050507; color: #f4f4f5; font: 400 12px/1.35 var(--font-sans); display: flex; flex-direction: column; align-items: center; padding: 34px 16px 18px; transition: background var(--dur-slow); }
.demo-island { position: absolute; top: 9px; left: 50%; width: 72px; height: 20px; margin-left: -36px; border-radius: 12px; background: #000; }
.demo-date { align-self: flex-start; font-size: 11px; color: rgba(255,255,255,.5); }
.demo-title { align-self: flex-start; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-top: 2px; }
.demo-gauge { position: relative; width: 168px; height: 100px; margin-top: 26px; }
.demo-gauge svg { width: 100%; height: 100%; overflow: visible; }
.demo-gauge .track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 12; stroke-linecap: round; }
.demo-gauge .arc { fill: none; stroke: url(#somaBand); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease-out); }
.demo-score { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.demo-score b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.demo-score span { font-size: 11px; color: rgba(255,255,255,.55); }
.demo-card { width: 100%; margin-top: auto; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.demo-row { display: flex; justify-content: space-between; align-items: center; }
.demo-row b { font-weight: 600; font-size: 13px; }
.demo-row span { color: rgba(255,255,255,.55); font-size: 11px; font-variant-numeric: tabular-nums; }
.demo-apps { display: flex; gap: 5px; margin: 10px 0 12px; }
.demo-apps i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.12); transition: opacity var(--dur), filter var(--dur); }
.demo-screen.is-on .demo-apps i { opacity: .35; filter: grayscale(1); }
.demo-btn { width: 100%; height: 38px; border: 0; border-radius: 12px; background: #2f6bff; color: #fff; font: 600 13px/1 var(--font-sans); cursor: pointer; transition: transform var(--dur-fast), background var(--dur-fast); }
.demo-btn:active { transform: scale(.97); }
.demo-screen.is-on .demo-btn { background: rgba(255,255,255,.12); }
.demo-hint { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-faint); }

/* The post, as a card in the site's style */
.tweet { display: block; width: min(560px, 100%); padding: var(--pad-card); border-radius: var(--r-2xl); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-raised); transition: box-shadow var(--dur), transform var(--dur) var(--ease-out); }
.tweet:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); }
.tweet-head { display: grid; grid-template-columns: 40px 1fr 18px; gap: var(--s-3); align-items: center; }
.tweet-head img { width: 40px; height: 40px; border-radius: 50%; }
.tweet-head > span { display: grid; gap: 1px; }
.tweet-head b { font-weight: 600; }
.tweet-head > span span { font-size: var(--fs-sm); color: var(--text-3); }
.tweet-head .mark { width: 16px; height: 16px; color: var(--text-1); }
.tweet-body { display: grid; gap: var(--s-3); margin-top: var(--pad-tight); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-2); }
.tweet-hl { color: var(--text-1); font-weight: 500; }
.tweet-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; margin-top: var(--pad-tight); border-radius: var(--r-lg); }
.tweet-foot { display: flex; justify-content: space-between; margin-top: var(--pad-tight); font-size: var(--fs-sm); color: var(--text-3); }
.tweet-read { display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); font-weight: 500; }
.tweet-read .icon { font-size: 13px; }

/* On X: own posts ranked by likes */
.inline-link { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
/* On X: the most-liked posts as an uneven wall. Posts are dealt into three columns by rank (1, 2, 3 on top),
   and each recording keeps its own proportions, playing while in view. */
.xwall { width: 100%; }
.xwall-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.xwall-col { display: grid; gap: var(--s-3); }
.xpost { display: grid; gap: var(--s-3); padding: var(--pad-tight); border-radius: var(--r-xl); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-raised); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.xpost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); }
.xpost-text { padding: 4px 4px 0; color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xpost-media { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-1); }
.xpost-media video, .xpost-media img { width: 100%; height: 100%; object-fit: cover; }
.xpost-media-tall { background: #fff; }
.xpost-media-tall video, .xpost-media-tall img { object-fit: contain; }
.xpost-meta { display: flex; align-items: center; gap: var(--pad-tight); padding: 0 4px 2px; font-size: var(--fs-sm); color: var(--text-3); }
.xpost-meta span { display: inline-flex; align-items: center; gap: 4px; }
.xpost-meta .icon { font-size: 13px; color: #e0245e; }
.xpost-meta .mark { width: 13px; height: 13px; margin-left: auto; color: var(--text-faint); }
/* Narrower: the columns dissolve into a two, then one column masonry flow */
@media (max-width: 900px) { .xwall-cols { display: block; columns: 2; column-gap: var(--s-3); } .xwall-col { display: contents; } .xpost { break-inside: avoid; margin-bottom: var(--s-3); } }
@media (max-width: 560px) { .xwall-cols { columns: 1; } }
.xfollow { display: grid; justify-items: center; gap: var(--s-2); padding: var(--space-group) var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); text-align: center; transition: background-color var(--duration-quick); }
.xfollow:hover { background: var(--surface-2); }
.xfollow img { width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--s-1); }
.xfollow > span:not(.xfollow-btn) { max-width: 260px; color: var(--text-3); }
.xfollow-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: var(--s-3); padding: 0 16px; border-radius: 10px; background: var(--gray-900); color: #fff; font-weight: 500; }
.xfollow-btn .mark { width: 14px; height: 14px; }

/* Case template: each part carries its role as a small label */
.case-slot > .slot-label { margin-top: var(--space-block); margin-bottom: calc(-1 * var(--space-block) + var(--s-2)); }
.slot-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-faint); }
.slot-empty { margin-top: var(--space-block); padding: var(--pad-card); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line-2); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.02) 10px 20px); }
.slot-empty .slot-label { color: var(--text-2); }
.slot-guide { margin-top: 4px; color: var(--text-3); max-width: var(--measure); }

/* About */
/* About: a letter. One narrow column, the lead in full colour and the rest a step quieter, signed in hand at the end. */
.letter { width: min(640px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 184px 0 var(--space-block); }
.letter-lead { font-size: var(--fs-h3); line-height: 1.45; letter-spacing: var(--ls-h3); color: var(--text-1); font-weight: 500; text-wrap: pretty; }
.letter-body { display: grid; gap: var(--space-related); margin-top: var(--space-related); font-size: var(--fs-body-lg); line-height: 1.65; color: var(--text-2); }
/* The signature writes itself in once, left to right, the one motion on the site allowed past .5s */
.signature-wrap { margin-top: var(--space-group); }
.signature { display: block; width: 260px; height: auto; overflow: visible; }
.signature text { font: 88px 'Signature', cursive; fill: var(--text-1); }
.js .signature { clip-path: inset(0 100% 0 0); }
.js .signature.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.45, .05, .35, 1) .2s; }
.letter-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--space-block); }

/* Experience deck */
.deck { position: relative; width: 360px; max-width: 100%; height: 420px; touch-action: pan-y; cursor: grab; outline: none; }
.deck:active { cursor: grabbing; }
.deck-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--pad-card); border-radius: var(--r-xl);
  background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-1), var(--shadow-raised);
  transform-origin: 50% 50%;
  transition: transform .5s var(--ease), opacity .5s;
  user-select: none; -webkit-user-select: none;
}
.deck-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s-4); }
.deck-top img { width: 36px; height: 36px; border-radius: 9px; }
.deck-dates { font-size: var(--fs-xs); color: var(--text-3); }
.deck-card h2 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); }
.deck-what { color: var(--text-3); margin-top: var(--s-1); }
.deck-card ul { margin-top: var(--s-8); padding-left: var(--s-5); list-style: disc; color: var(--text-2); display: grid; gap: var(--s-2); }
.deck-card li::marker { color: var(--gray-400); }
.deck-role { margin-top: auto; align-self: flex-end; font: 500 var(--fs-body-lg)/1.3 var(--font-sans); }
.swipe { position: relative; z-index: 5; display: flex; align-items: center; gap: var(--s-2); margin-top: var(--space-block); font: 500 var(--fs-h3)/1.3 var(--font-ui); color: var(--text-3); }
.swipe .icon { font-size: 22px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(6px); } }

/* Education & Awards */
.facts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-inset); }
.facts-col { padding: var(--pad-card); display: grid; align-content: start; gap: var(--s-1); background: var(--surface-1); border-radius: var(--r-xl); }
.facts h2 { font: 500 var(--fs-sm)/1.4 var(--font-sans); color: var(--text-3); margin-bottom: var(--s-2); letter-spacing: 0; }
.fact { display: grid; gap: 2px; padding: 10px var(--s-3); margin: 0 calc(-1 * var(--s-3)); border-radius: var(--r-md); }
.fact span:first-child { font: 500 var(--fs-body-lg)/1.35 var(--font-sans); letter-spacing: var(--ls-body-lg); }
.fact span:last-child { color: var(--text-3); }
a.fact { transition: background-color .2s; }
a.fact:hover { background: var(--surface-2); }

/* Skills */
/* Skills: four discipline cards side by side, colour only on each icon; the skills read as a plain list.
   Below, one tools card: every mark named, with what it is for in a tooltip. */
.skills { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.skill-card { padding: var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); }
.skill-head { display: flex; align-items: center; gap: var(--s-3); }
.skill-head h3 { font: 500 var(--fs-body-lg)/1.3 var(--font-sans); }
.skill-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-1), 0 1px 2px rgba(0,0,0,.05); }
.skill-icon .icon { font-size: 20px; }
.skill-card[data-color=red] .skill-icon { color: var(--industrial); }
.skill-card[data-color=blue] .skill-icon { color: var(--interface); }
.skill-card[data-color=green] .skill-icon { color: var(--strategy); }
.skill-card[data-color=purple] .skill-icon { color: var(--ai); }
.skill-card ul { margin: var(--space-related) 0 0; padding: 0; list-style: none; }
.skill-card li { padding: 10px 0; border-top: 1px solid var(--line-1); color: var(--text-2); }
.tools-card { width: 100%; margin-top: var(--s-3); padding: var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); }
.tools-title { font-weight: 500; font-size: var(--fs-body-lg); margin-bottom: var(--space-related); }
.tools { display: flex; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
.tools li { flex: none; width: 136px; }
/* The tools drift past in one endless row: two copies side by side, moved by exactly one copy's width,
   so the loop has no seam. Hovering or focusing a tool pauses it so its tooltip can be read. Edges fade softly. */
.marquee { display: flex; gap: var(--s-2); overflow-x: clip; padding-top: 56px; margin-top: -56px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.marquee-track { animation: marquee 48s linear infinite; }
/* Only a tool under the pointer (or focused) stops the row; the gaps and the space around it don't */
.marquee:has(li:hover) .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--s-2))); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .marquee-track[aria-hidden] { display: none; }
}
.tools li { display: grid; justify-items: center; align-content: center; gap: 10px; height: 92px; border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-1); color: var(--text-2); cursor: default; outline-offset: 0; transition: color var(--duration-quick); }
.tools .mark { width: auto; height: 24px; max-width: 64px; transition: transform var(--duration-fast) var(--ease-out); }
.mark-mask { display: block; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tools .mark-mask { width: 26px; }
.tool-name { font-size: var(--fs-xs); color: var(--text-3); }
.tools li:hover, .tools li:focus-visible { color: var(--text-1); }
.tools li:hover .mark, .tools li:focus-visible .mark { transform: translateY(-2px); }
@media (max-width: 1000px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .skills { grid-template-columns: 1fr; } }

/* Tooltip: dark pill above its target on hover or keyboard focus. Name, then what it is. */
.tip-wrap { position: relative; display: inline-flex; }
.tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20;
  display: grid; gap: 1px; justify-items: center;
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--gray-900); color: var(--text-on-dark);
  box-shadow: var(--shadow-float);
  font: 500 var(--fs-xs)/1.35 var(--font-sans); white-space: nowrap; letter-spacing: 0;
  opacity: 0; transform: translate(-50%, 0) scale(var(--scale-small)); transform-origin: 50% 100%; pointer-events: none;
  /* Leaving: no delay, 50ms, so it is gone the moment the pointer is */
  transition: opacity 50ms var(--ease-out), transform 50ms var(--ease-out);
}
.tip b { font-weight: 600; }
.tip span { color: rgba(255,255,255,.66); }
.tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--gray-900); }
.tip-wrap:hover .tip, .tip-wrap:focus-visible .tip, .tip-wrap.is-open .tip {
  /* Arriving: a micro delay, then quick, scaling up from its bottom edge */
  opacity: 1; transform: translate(-50%, 0) scale(1);
  transition: opacity var(--duration-quick) var(--ease-out) var(--duration-micro), transform var(--duration-quick) var(--ease-out) var(--duration-micro);
}

/* Icon swap (transitions.dev): two icons share one cell; the outgoing one shrinks, blurs and fades
   while the incoming one grows in. data-state picks which shows. */
.icon-swap { display: inline-grid; flex: none; }
.icon-swap .icon { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-in-out), filter var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out); }
.icon-swap[data-state="a"] [data-icon="b"], .icon-swap[data-state="b"] [data-icon="a"] { opacity: 0; filter: blur(var(--blur-small)); transform: scale(.25); }

/* Copy button: copies on click; the copy icon swaps to a tick, then back */
.btn.btn-copy .icon-swap { font-size: var(--icon); color: var(--text-3); transition: color var(--duration-quick); }
.btn.btn-copy:hover .icon-swap { color: var(--text-1); }
.btn.btn-copy .icon-swap[data-state="b"] { color: var(--text-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Testimonial */
.quote { padding-top: calc(var(--space-section) * 1.5); text-align: center; }
.quote-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.quote-name { margin-top: var(--s-5); font: 600 var(--fs-body)/1.3 var(--font-sans); }
.quote-role { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-3); }
.quote blockquote { margin-top: var(--space-group); max-width: 920px; font: 600 var(--fs-quote)/var(--lh-quote) var(--font-sans); letter-spacing: var(--ls-quote); color: var(--text-1); }
.quote blockquote span { display: inline-block; transition: filter .5s, opacity .5s; }
.js .quote blockquote span { filter: blur(var(--b, 0px)); opacity: var(--o, 1); }

/* Connect */
.connect { padding-top: calc(var(--space-section) * 1.5); }
.cal { position: relative; width: 100%; min-height: 520px; }
.cal-fallback { position: absolute; inset: 0; display: grid; place-content: center; color: var(--text-3); text-align: center; transition: opacity .3s; }
.cal-fallback a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
.cal-ready .cal-fallback { opacity: 0; pointer-events: none; }
.cal-slot { position: relative; width: 100%; }
.cal-slot iframe { display: block; width: 100%; border: 0; overflow: hidden; }

/* Footer */
/* Footer: a blueprint sheet in a box the content's width. Rulers along its top and left edges count from
   where the content starts (0), a faint 100px grid, a hatched strip down the right edge, mono labels. */
.bp {
  --bp: #3e6ff4; --bp-line: rgba(255,255,255,.16); --bp-faint: rgba(255,255,255,.6);
  --ruler: 32px; --x0: calc(var(--ruler) + var(--space-group));
  position: relative; overflow: hidden; width: min(var(--content), 100% - 2 * var(--gutter)); margin: var(--space-section) auto var(--gutter);
  border-radius: var(--r-2xl); background: var(--bp); color: #fff;
  box-shadow: 0 0 0 1px #2d5be3, inset 0 0 0 1px rgba(255,255,255,.22);
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 100px);
  background-position: var(--x0) 0, 0 var(--ruler);
}
.bp-ruler { position: absolute; font: 400 10px/1 var(--font-mono); color: var(--bp-faint); pointer-events: none; }
.bp-ruler-x { top: 0; left: var(--ruler); right: 0; height: var(--ruler); overflow: hidden; border-bottom: 1px solid var(--bp-line);
  background:
    repeating-linear-gradient(to right, var(--bp-line) 0 1px, transparent 1px 10px) calc(var(--x0) - var(--ruler)) 100% / 100% 5px repeat-x,
    repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 1px, transparent 1px 100px) calc(var(--x0) - var(--ruler)) 100% / 100% 12px repeat-x; }
.bp-ruler span.is-off { visibility: hidden; }
.bp-ruler-x span { position: absolute; top: 9px; left: calc(var(--x0) - var(--ruler) + var(--x) * 1px + 4px); }
.bp-ruler-y { top: var(--ruler); bottom: 0; left: 0; width: var(--ruler); overflow: hidden; border-right: 1px solid var(--bp-line);
  background:
    repeating-linear-gradient(to bottom, var(--bp-line) 0 1px, transparent 1px 10px) 100% 0 / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 1px, transparent 1px 100px) 100% 0 / 12px 100% no-repeat; }
.bp-ruler-y span { position: absolute; left: 6px; top: calc(var(--y) * 1px - 4px); writing-mode: vertical-rl; transform: rotate(180deg); }
.bp-hatch { position: absolute; top: var(--ruler); bottom: 0; right: 0; width: 28px; border-left: 1px dashed var(--bp-line);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px); }
.bp-inner { position: relative; padding: calc(var(--ruler) + var(--space-group)) calc(28px + var(--space-group)) 0 var(--x0); }
.bp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--space-related); }
.bp-fig { font: 500 var(--fs-h3)/1.2 var(--font-sans); letter-spacing: var(--ls-h3); }
.bp-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #fff; color: var(--bp); font: 600 14px/1 var(--font-sans); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -10px rgba(10,30,120,.6); transition: transform var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
.bp-btn .icon { font-size: 16px; }
.bp-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -10px rgba(10,30,120,.7); }
.bp-btn:active { transform: translateY(0) scale(.98); }
/* The list: icon, name, a dotted leader, the value. Linked rows light up and show an arrow on hover. */
.bp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bp-line); }
.bp-list li { border-bottom: 1px solid var(--bp-line); }
.bp-row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px; margin: 0 -8px; border-radius: 10px; transition: background-color var(--duration-quick); }
a.bp-row:hover { background: rgba(255,255,255,.08); }
.bp-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.14); flex: none; }
.bp-ic .icon, .bp-ic .mark { width: 15px; height: 15px; font-size: 15px; color: #fff; }
.bp-k { font-weight: 500; }
.bp-dots { flex: 1; height: 1px; min-width: 24px; background: repeating-linear-gradient(to right, rgba(255,255,255,.35) 0 2px, transparent 2px 6px); }
.bp-v { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--font-mono); letter-spacing: .02em; color: #fff; }
.bp-v span { color: var(--bp-faint); }
.bp-v .bp-copy > span:first-child { color: #fff; }
.bp-v a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; transition: text-decoration-color var(--duration-quick); }
.bp-v a:hover { text-decoration-color: #fff; }
.bp-row > .icon { font-size: 15px; color: var(--bp-faint); transform: rotate(-45deg); transition: color var(--duration-quick), transform var(--duration-fast) var(--ease-out); }
a.bp-row:hover > .icon { color: #fff; transform: rotate(-45deg) translateX(2px); }
.bp-copy { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.bp-copy .icon-swap { font-size: 15px; color: var(--bp-faint); transition: color var(--duration-quick); }
.bp-copy:hover .icon-swap, .bp-copy .icon-swap[data-state="b"] { color: #fff; }
.bp-base { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--space-group) 0 var(--s-5); font-size: 12px; color: var(--bp-faint); }
@media (max-width: 860px) {
  .bp { --ruler: 0px; --x0: var(--pad-card); }
  .bp-ruler, .bp-hatch { display: none; }
  .bp-inner { padding: var(--pad-card); padding-bottom: 0; }
  .bp-top { flex-direction: column; align-items: flex-start; }
  .bp-v { font-size: 12px; } .bp-dots { display: none; } .bp-v { margin-left: auto; }
  .bp-base { flex-direction: column; }
}
@keyframes holo { to { filter: hue-rotate(360deg); } }

/* Case study */
.case { width: min(var(--content), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: 168px; }
.case-block { padding-top: var(--space-block); }
.case-block:first-child { padding-top: 0; }
.case-eyebrow { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-3); }
.case h1 { font: 500 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); max-width: 30ch; }
.case h2 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); }
.case-text { margin-top: var(--space-stack); max-width: var(--measure); color: var(--text-2); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--ls-body-lg); display: grid; gap: var(--s-3); }
.case-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--space-group); margin-top: var(--space-related); font-size: var(--fs-sm); }
.case-facts div { display: grid; gap: 2px; }
.case-facts dt { color: var(--text-3); }
.case-facts dd { margin: 0; color: var(--text-1); font-weight: 500; }
/* Case: first-screen summary (role, team, dates, what I did, live link), then the numbers */
.glance { margin-top: var(--space-related); display: grid; gap: var(--space-related); padding: var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); }
.glance .case-facts { margin-top: 0; }
.glance .btn { justify-self: start; }
.glance-label { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-2); }
.glance-did ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; color: var(--text-2); }
.glance-did li::marker { color: var(--text-faint); }
.metrics { margin-top: var(--pad-inset); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--pad-inset); }
.metrics div { display: grid; gap: 4px; padding: var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); }
.metrics b { font: 500 var(--fs-h1)/1.05 var(--font-sans); letter-spacing: var(--ls-h1); }
.metrics span { color: var(--text-3); font-size: var(--fs-sm); }

/* Case: decisions with what was ruled out */
.decisions { margin-top: var(--space-related); display: grid; gap: var(--pad-inset); }
.decision { padding: var(--pad-card); border-radius: var(--r-xl); background: var(--surface-1); display: grid; gap: var(--space-stack); }
.decision h3 { font: 500 var(--fs-body-lg)/1.35 var(--font-sans); }
.decision p { display: grid; grid-template-columns: 96px 1fr; gap: var(--pad-tight); color: var(--text-2); }
.decision p span { font-size: var(--fs-sm); color: var(--text-3); padding-top: 2px; }
.decision-chose span { color: var(--strategy) !important; }

/* Case: a full flow, step by step */
.flow { margin-top: var(--space-related); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-related) var(--pad-tight); padding: 0; list-style: none; counter-reset: none; }
.flow .frame { margin-top: 0; }
.flow p { display: flex; gap: var(--s-3); margin-top: var(--space-stack); color: var(--text-2); font-size: var(--fs-sm); }
.flow p b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 500; color: var(--text-1); }

/* Case: sticky numbered menu in the left margin (after aydaoz), wide screens only */
.case { position: relative; }
.case-menu-toggle { display: none; }
/* Narrower screens: a floating pill bottom-left with the section being read; tap it for the full list */
@media (max-width: 1599px) {
  .case-menu { position: fixed; left: 16px; bottom: 16px; z-index: 40; }
  .case-menu-toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); font: 500 var(--fs-sm)/1 var(--font-sans); color: var(--text-1); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out); }
  .case-menu-toggle:active { transform: scale(.97); }
  .case-menu-toggle .cm-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
  .case-menu-toggle .icon { width: 14px; height: 14px; color: var(--text-3); transform: rotate(-90deg); transition: transform var(--duration-fast) var(--ease-out); }
  .case-menu.is-open .case-menu-toggle .icon { transform: rotate(90deg); }
  .case-menu ol { position: absolute; left: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; min-width: 220px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-float); opacity: 0; transform: translateY(6px) scale(.98); transform-origin: left bottom; filter: blur(2px); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); }
  .case-menu.is-open ol { opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .case-menu a { display: flex; gap: var(--s-3); padding: 8px 10px; border-radius: 10px; font-size: var(--fs-sm); color: var(--text-2); }
  .case-menu a span { font-variant-numeric: tabular-nums; color: var(--text-faint); }
  .case-menu a:hover { background: var(--surface-1); color: var(--text-1); }
  .case-menu a.is-current { color: var(--text-1); background: var(--surface-1); }
}
@media (min-width: 1600px) {
  .case-menu { display: block; position: absolute; top: 168px; bottom: 0; right: calc(100% + 28px); width: 156px; }
  .case-menu ol { position: sticky; top: 112px; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .case-menu a { display: flex; gap: var(--s-3); padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-3); transition: background-color var(--dur-fast), color var(--dur-fast); }
  .case-menu a span { font-variant-numeric: tabular-nums; color: var(--text-faint); }
  .case-menu a:hover { color: var(--text-1); }
  .case-menu a.is-current { color: var(--text-1); background: var(--surface-1); }
}

.todo { background: none; color: #b42318; outline: 1.5px dashed rgba(180,35,24,.5); outline-offset: 1px; border-radius: 4px; padding: 0 4px; font-style: normal; }
.frame { margin-top: var(--space-related); padding: var(--pad-inset); border-radius: var(--r-xl); background: var(--surface-1); }
.frame-inner { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r-xl) - var(--pad-inset)); overflow: hidden; background: var(--gray-25); box-shadow: inset 0 0 0 1px var(--line-1); }
.frame-inner.tall { aspect-ratio: 16 / 10; }
.frame-inner > img, .frame-inner > picture > img, .frame-inner > video { width: 100%; height: 100%; object-fit: cover; }
.frame-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: var(--s-6); }
.frame-caption { padding: var(--s-3) var(--s-2) var(--s-1); font-size: var(--fs-sm); color: var(--text-3); }
.lottie { position: absolute; inset: 0; background: #fff; }
.lottie svg { width: 100% !important; height: 100% !important; }
.case-nav { display: flex; justify-content: center; gap: var(--s-2); padding-top: var(--space-block); }

/* Phone screens in a frame: one to three, centred, on a dark stage */
.phones { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 4%; padding: 4% 6%; background: radial-gradient(90% 70% at 50% 110%, #2a2340, #0c0c10 70%); }
.phones img { height: 100%; width: auto; border-radius: 9% / 4.2%; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -12px rgba(0,0,0,.6); }
.phones-note { position: absolute; right: var(--s-3); bottom: var(--s-3); padding: 3px 8px; border-radius: var(--r-sm); background: rgba(0,0,0,.5); color: rgba(255,255,255,.7); font-size: var(--fs-xs); }

/* Before / after */
.compare { position: absolute; inset: 0; background: #fff; }
.compare > img, .compare > picture > img, .compare-before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
/* The divider: a 2px white line with a soft shadow, full height, and a small round grip on it.
   The grip lifts on hover and presses in while dragging. */
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 0 12px rgba(0,0,0,.12); pointer-events: none; }
.compare-handle {
  position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center; gap: 0; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-float); color: var(--text-2); pointer-events: none;
  transition: transform var(--duration-quick) var(--ease-out), color var(--duration-quick);
}
.compare-handle .icon { font-size: 14px; margin: 0 -2px; }
.compare:hover .compare-handle { transform: scale(1.06); color: var(--text-1); }
.compare.is-dragging .compare-handle { transform: scale(.94); }
.compare-tags { position: absolute; inset: auto var(--s-3) var(--s-3); display: flex; justify-content: space-between; pointer-events: none; }
.compare-tags span { padding: 4px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px var(--line-1); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); }
.compare-range:focus-visible + .compare-handle { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Resume (screen and print; the PDF is printed from this page) */
.cv-body { background: var(--surface-1); }
.cv-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; padding: var(--s-3) var(--gutter); background: rgba(246,246,246,.85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cv { width: 210mm; min-height: 297mm; margin: var(--s-6) auto var(--s-16); padding: 12mm 13mm; background: #fff; box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.5; color: var(--text-1); }
.cv-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding-bottom: var(--s-5); border-bottom: 1px solid var(--gray-150); }
.cv-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.cv-head h1 { font: 500 30px/1.1 var(--font-sans); letter-spacing: -0.03em; }
.cv-head p { font-size: 17px; color: var(--text-3); margin-top: 2px; }
.cv-contact { text-align: right; color: var(--text-3); font-size: 13px; display: grid; gap: 2px; }
.cv-contact a { color: var(--text-3); text-decoration: underline; text-underline-offset: 2px; }
.cv-cols { display: grid; grid-template-columns: 0.82fr 1fr; gap: 9mm; padding-top: var(--s-4); align-items: start; }
.cv section + section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-150); }
.cv-cols > div section + section { border-top: 0; padding-top: 0; }
.cv h2 { font: 500 19px/1.2 var(--font-sans); letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.cv-item + .cv-item { margin-top: var(--s-3); }
.cv-item h3 { font: 500 15px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.cv-item p { color: var(--text-3); font-size: 12.5px; }
.cv-group { font: 500 15px/1.3 var(--font-sans); margin: var(--s-3) 0 6px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-chips li { padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); font-size: 12.5px; }
.cv-quote { padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-1); font-size: 12.5px; color: var(--text-2); }
.cv-intro { color: var(--text-2); font-size: 13.5px; }
.cv-job + .cv-job { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--gray-150); }
.cv-job-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: 6px; }
.cv-job-head h3 { font: 500 15px/1.3 var(--font-sans); display: flex; gap: 10px; white-space: nowrap; }
.cv-job-head h3 span { white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--gray-200); }
.cv-job-head > span { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.cv-job ul { list-style: disc; padding-left: 16px; color: var(--text-2); display: grid; gap: 3px; }
.cv-job li::marker { color: var(--gray-400); }
@page { size: A4; margin: 0; }
@media print {
  .cv-body { background: #fff; }
  .cv-bar { display: none; }
  .cv { margin: 0; box-shadow: none; width: 210mm; min-height: 0; }
}
@media screen and (max-width: 860px) {
  .cv { width: auto; min-height: 0; margin: var(--s-3); padding: var(--s-6) var(--s-5); }
  .cv-head { grid-template-columns: auto 1fr; }
  .cv-contact { grid-column: 1 / -1; text-align: left; }
  .cv-cols { grid-template-columns: 1fr; }
}

/* Design system page */
.sys code { font: 400 12px/1.4 var(--font-mono); color: var(--text-3); }
.sys-h3 { font: 500 var(--fs-sm)/1.4 var(--font-sans); color: var(--text-3); margin: var(--s-8) 0 var(--s-3); }
.sys-layers { margin-top: var(--s-6); }
.sys-layers div { padding: var(--s-5); border-radius: var(--r-xl); font-size: var(--fs-sm); color: var(--text-3); }
.sys-layers > div { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-1); }
.sys-layers > div > div { margin-top: var(--s-3); background: var(--surface-1); }
.sys-layers > div > div > div { background: var(--surface-2); border-radius: var(--r-lg); }
.sys-layers > div > div > div > div { background: var(--surface-3); border-radius: var(--r-md); }
.sys-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.sys-swatch { display: grid; gap: 4px; }
.sys-swatch span { height: 56px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line-1); }
.sys-swatch small { font-size: var(--fs-xs); color: var(--text-3); }
.sys-space { margin-top: var(--space-related); display: grid; gap: var(--s-2); }
.sys-space-row { display: grid; grid-template-columns: 160px 160px 1fr; gap: var(--s-4); align-items: center; font-size: var(--fs-sm); color: var(--text-2); }
.sys-space-bar { display: block; height: 16px; border-radius: 4px; background: var(--focus); opacity: .18; }
.sys-space-row small { color: var(--text-3); }
.sys-type { margin-top: var(--s-6); display: grid; }
.sys-type-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-6); align-items: baseline; padding: var(--s-5) 0; border-top: 1px solid var(--gray-100); }
.sys-type-meta { display: grid; gap: 2px; font-size: var(--fs-sm); }
.sys-buttons { margin-top: var(--space-related); padding: var(--pad-card); border-radius: var(--r-xl); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-1); }
.sys-btn-grid { display: grid; grid-template-columns: 96px repeat(var(--cols), 1fr); gap: var(--s-4) var(--s-3); align-items: center; font-size: var(--fs-sm); }
.sys-btn-grid > b { font-weight: 500; color: var(--text-3); }
.sys-btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.sys-specs { margin-top: var(--s-8); display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--text-3); }
.sys-specs b { color: var(--text-1); font-weight: 500; display: inline-block; width: 28px; }
@media (max-width: 809px) { .sys-btn-grid { grid-template-columns: 72px repeat(var(--cols), auto); overflow-x: auto; } .sys-type-row { grid-template-columns: 1fr; gap: var(--s-2); } }

/* Reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .w, .js .hero .label, .js .hero-sub, .js .hero .btn { opacity: 0; transform: translateY(14px); filter: blur(6px); animation: rise .9s var(--ease) forwards; }
.js .hero .label { animation-delay: .05s; }
.js .hero .w { animation-delay: calc(.12s + var(--i) * .07s); }
.js .hero-sub { animation-delay: .7s; }
.js .hero .btn { animation-delay: .8s; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

/* Phone */
@media (max-width: 809px) {
  :root { --space-section: 72px; --space-block: 48px; --pad-card: 20px; }
  .nav { width: 100%; justify-content: space-between; }
  .nav-links .nav-wide, .nav-actions .btn-ghost, .nav-sep { display: none; }
  .nav-links a { padding: 12px 11px; }

  .hero { padding-top: 120px; }
  .hero-title { margin: 22px 0 22px; }
  .cursor { right: 40px; top: auto; bottom: -96px; }
  .crafts { grid-template-columns: 1fr; gap: var(--s-10); }
  .project-body { flex-direction: column; align-items: stretch; padding: var(--s-5) var(--s-3) var(--s-3); }
  .impact { grid-template-columns: repeat(2, 1fr); }
  .impact dd { font-size: 26px; }
  .tl-head { grid-template-columns: 36px 1fr 16px; padding: var(--s-3); }
  .tl-head img { width: 36px; height: 36px; }
  .tl-role, .tl-dates { grid-column: 2; text-align: left; min-width: 0; }
  .tl-head .icon { grid-column: 3; grid-row: 1; }
  .tl-panel ul { padding: 0 var(--pad-card) var(--pad-card) 64px; }
  .built { grid-template-columns: 1fr; }
  .letter { padding-top: 136px; }
  .work-group-head { flex-direction: column; gap: 4px; padding: 0 var(--s-2) var(--pad-tight); }
  .work-group-head p { text-align: left; }
  .index a { grid-template-columns: 40px 1fr 20px; }
  .index-thumb img { width: 40px; height: 40px; }
  .index-kind, .index-tags { display: none; }
  .flow { grid-template-columns: 1fr; }
  .decision p { grid-template-columns: 1fr; gap: 2px; }
  .deck { width: min(360px, 100%); height: 440px; }
  .facts { grid-template-columns: 1fr; }
  .quote { padding-top: 160px; }
  .connect { padding-top: 140px; }
  .case { padding-top: 104px; }
  .case-text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .frame { padding: 5px; border-radius: 18px; }
  .frame-inner { border-radius: 13px; }
}
@media (min-width: 810px) and (max-width: 1100px) {
  .nav-links a { padding: 12px 11px; }
  .cursor { right: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero .w, .js .hero .label, .js .hero-sub, .js .hero .btn { opacity: 1; transform: none; filter: none; }
  .js .quote blockquote span { filter: none; opacity: 1; }
}

/* Case study storytelling kit. A case reads like a page from a designer's notebook: a marker over the one line a
   skimmer must read, a loop around a short phrase, handwritten notes in blue ballpoint pinned to a picture or the
   margin, and ways of showing information that aren't paragraphs: apps as their marks, before and after, the paths
   considered (the rejected ones crossed out), steps, small cards, big numbers. One or two per section. */
:root { --marker: #ffe169; --ink: #2747c9; --font-hand: 'Hand', 'Caveat', cursive; }
.hand { font-family: var(--font-hand); font-weight: 600; letter-spacing: 0; }
/* Marker: a translucent stroke with ragged ends, sitting low on the line like a real highlighter, swept in */
mark.hl { color: inherit; padding: 0 .18em; margin: 0 -.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.5C14 3.6 30 4.6 48 3.8s34 .3 50.5.6c.6 3 .4 7.4.2 11.3-15 .9-33 .1-50 .6-17 .5-31 .9-47.2-.4C.9 12 1 8.6 1.5 5.5Z' fill='%23ffe169' fill-opacity='.78'/%3E%3C/svg%3E") 0 78% / 100% 68% no-repeat; transition: background-size .9s var(--ease-out) .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .reveal:not(.in) mark.hl { background-size: 0% 68%; }
.case-text mark.hl { color: var(--text-1); }
/* Looped and squiggled words: drawn behind the text with room around it, so the stroke never crosses a letter */
.circled, .squiggled { position: relative; isolation: isolate; color: var(--text-1); }
.circled { white-space: nowrap; margin: 0 .3em; }
.doodle { position: absolute; max-width: none; overflow: visible; pointer-events: none; }
.doodle path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) .35s; }
.js .reveal:not(.in) .doodle path { stroke-dashoffset: 1; }
.circled .doodle { z-index: -1; left: -.5em; top: -.42em; width: calc(100% + 1em); height: calc(100% + .84em); opacity: .85; }
.squiggled .doodle { left: -.05em; bottom: -.32em; width: calc(100% + .1em); height: .45em; }
/* Handwritten notes, in ballpoint blue. Pinned to a picture: above its top-right corner, the arrow landing inside it.
   Beside text: in the margin, level with the heading, an arrow pointing back at the words. */
.hand-note { font: 600 23px/1.12 var(--font-hand); color: var(--ink); }
.hand-note .doodle { position: static; display: block; }
.hand-note .doodle path { stroke-width: 1.6; transition-delay: .7s; }
.noted { position: relative; margin-top: calc(var(--space-related) + 40px); }
.noted > .frame { margin-top: 0; }
.hand-note-media { position: absolute; z-index: 2; right: clamp(24px, 8%, 120px); bottom: calc(100% - 34px); display: flex; align-items: flex-end; gap: 4px; max-width: 360px; text-wrap: balance; transform: rotate(-2.5deg); transform-origin: right bottom; }
.hand-note-media span { padding-bottom: 40px; text-align: right; }
.hand-note-media .doodle-arrow { flex: none; width: 54px; height: 60px; margin-bottom: -6px; }
.cb-grid.has-note { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(180px, 1fr); gap: var(--space-group); align-items: start; }
.hand-note-side { display: flex; align-items: flex-start; gap: 8px; max-width: 320px; text-wrap: balance; padding-top: 4px; transform: rotate(-2deg); }
.hand-note-side .doodle-arrow-left { flex: none; width: 54px; height: 28px; margin-top: 14px; }
/* Apps named in the copy: their mark on a small app-icon tile, then the name */
.app { display: inline-flex; align-items: baseline; gap: .32em; white-space: nowrap; font-weight: 500; color: var(--text-1); }
.app-ic { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: .3em; background: var(--bg); color: var(--fg); align-self: center; transform: translateY(-.04em); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.app-ic.is-light { box-shadow: inset 0 0 0 1px var(--line-2); }
.app-glyph { width: .78em; height: .78em; fill: currentColor; }
.app-chrome { width: .92em; height: .92em; border-radius: 50%; background: radial-gradient(circle, #4285F4 0 34%, #fff 35% 46%, transparent 47%), conic-gradient(from -60deg, #DB4437 0 120deg, #FFCD40 0 240deg, #0F9D58 0); }
/* Before and after */
.shift { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-top: var(--space-group); }
.shift-card { height: 100%; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.shift-card p:not(.shift-label) { font-size: var(--fs-body); line-height: 1.5; }
.shift-card.is-before p:not(.shift-label) { color: var(--text-3); }
.shift-card.is-after { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px -18px rgba(0,0,0,.25); }
.shift-card.is-after p:not(.shift-label) { color: var(--text-1); }
.shift-label { margin-bottom: var(--s-2); font-size: 22px; line-height: 1; color: var(--text-3); }
.is-after .shift-label { color: var(--ink); }
.shift-arrow { display: grid; place-items: center; }
.shift-arrow .doodle { position: static; width: 52px; height: 26px; }
/* Paths considered: the rejected ones crossed out and faded, the one taken ticked */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-top: var(--space-group); }
.option { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.option > .icon { width: 22px; height: 22px; color: var(--text-3); }
.option h3 { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.option-name { position: relative; }
.option-name .doodle-strike { left: -.1em; top: 50%; width: calc(100% + .2em); height: .5em; margin-top: -.2em; }
.option p { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.option.is-out h3, .option.is-out p:not(.hand), .option.is-out > .icon { opacity: .55; }
.option.is-picked { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 30px -18px rgba(39,71,201,.45); }
.option.is-picked > .icon { color: var(--ink); }
.option .hand { font-size: 21px; line-height: 1.1; color: var(--ink); }
.option-pick { display: flex; align-items: center; gap: 6px; }
.option-pick .icon { width: 18px; height: 18px; }
/* Steps in order: a timeline row, one dot per step on a dashed line, the last one filled */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--space-group); padding: 0; list-style: none; }
.steps li { position: relative; display: grid; align-content: start; gap: var(--s-2); padding-top: 4px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.steps li::before { content: ''; position: absolute; left: 30px; right: calc(var(--s-3) * -1); top: 15px; border-top: 1.5px dashed var(--line-2); }
.steps li:last-child::before { display: none; }
.steps li:last-child { color: var(--text-1); font-weight: 500; }
.step-n { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.steps li:last-child .step-n { background: var(--text-1); color: #fff; box-shadow: none; }
/* Small cards: a set of parallel things */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin-top: var(--space-group); }
.card { position: relative; display: grid; align-content: start; gap: 6px; padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.card h3 { font-size: var(--fs-body); font-weight: 600; color: var(--text-1); }
.card p { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.card-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s-2); border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-1); color: var(--text-1); }
.card-ic .icon { width: 20px; height: 20px; }
.card-swatch { width: 36px; height: 36px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--s); box-shadow: inset 0 -6px 12px rgba(0,0,0,.12), inset 0 4px 8px rgba(255,255,255,.45), 0 0 0 1px var(--line-1); }
.card-tag { position: absolute; top: 14px; right: 16px; font-size: 20px; color: var(--ink); transform: rotate(-4deg); }
/* Big numbers: the stat is the headline */
.big-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-group); margin-top: var(--space-group); }
.big-stats > div { display: grid; gap: 8px; padding-top: var(--s-3); border-top: 1px solid var(--line-2, rgba(0,0,0,.1)); }
.big-stats b { font: 500 clamp(56px, 7vw, 104px)/.95 var(--font-sans); letter-spacing: -.045em; color: var(--text-1); }
.big-stats span { color: var(--text-3); font-size: var(--fs-body); max-width: 26ch; }
.big-stats .hand { color: var(--ink); font-size: 21px; transform: rotate(-1.5deg); transform-origin: left; }
/* Pull quote */
.pull { margin: var(--space-group) 0 0; padding-left: var(--s-5); border-left: 2px solid var(--text-1); max-width: 40ch; }
.pull p { font: 500 clamp(24px, 2.6vw, 34px)/1.25 var(--font-serif); letter-spacing: -.01em; color: var(--text-1); }
.pull cite { display: block; margin-top: var(--s-3); font-style: normal; font-size: var(--fs-sm); color: var(--text-3); }
/* References pinned with tape: a loose row of prints, each a little crooked */
.board { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-related); padding: var(--space-group) 0 var(--s-5); }
.pin { position: relative; width: min(240px, 42%); margin: 0; padding: 10px 10px 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 30px -14px rgba(0,0,0,.25); transform: rotate(var(--r)); transition: transform var(--duration-fast) var(--ease-out); }
.pin:hover { transform: rotate(0) scale(1.03); }
.pin::before { content: ''; position: absolute; left: 50%; top: -12px; width: 76px; height: 24px; margin-left: -38px; background: rgba(255, 232, 140, .7); box-shadow: 0 1px 1px rgba(0,0,0,.06); transform: rotate(calc(var(--r) * -1.5)); }
.pin img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pin figcaption { margin-top: 8px; font-size: 20px; line-height: 1.1; color: var(--text-2); text-align: center; }
@media (max-width: 860px) {
  .cb-grid.has-note { grid-template-columns: 1fr; gap: var(--s-3); }
  .hand-note-side { padding-top: 0; }
  .hand-note-side .doodle-arrow-left { display: none; }
  .noted { margin-top: var(--space-related); }
  .hand-note-media { position: static; max-width: none; margin: 0 0 var(--s-2) var(--s-2); transform: rotate(-1.5deg); transform-origin: left; }
  .hand-note-media span { padding-bottom: 0; text-align: left; }
  .hand-note-media .doodle-arrow { display: none; }
  .shift { grid-template-columns: 1fr; }
  .shift-arrow .doodle { transform: rotate(90deg); height: 40px; }
  .steps { grid-auto-flow: row; gap: var(--s-4); }
  .steps li { grid-template-columns: 24px 1fr; align-items: center; gap: var(--s-3); padding-top: 0; }
  .steps li::before { left: 11.5px; right: auto; top: 28px; height: calc(100% - 8px); border-top: 0; border-left: 1.5px dashed var(--line-2); }
}
@media (prefers-reduced-motion: reduce) {
  mark.hl { background-size: 100% 68%; transition: none; }
  .doodle path { stroke-dashoffset: 0; transition: none; }
}


/* Explainer diagrams: one visual language for every case. Light canvas with a faint dot grid, grey linework, ballpoint
   blue (--ink) for what moves or matters, marker yellow for the one thing to notice, Inter labels, one handwritten note. */
.dg { position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.07) 1px, transparent 1.2px) 0 0 / 24px 24px, #f7f7f5; }
.dg-svg { width: 100%; height: 100%; display: block; max-width: none; font-family: var(--font-sans); }
.dg-ln { fill: none; stroke: #8a8a8a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-thin { stroke-width: 1.5; stroke: #b5b5b5; }
.dg-body { fill: #fff; stroke: #cfcfcf; stroke-width: 2; }
.dg-part { fill: #f1f1f1; stroke: #a8a8a8; stroke-width: 1.5; }
.dg-hub { fill: #8a8a8a; }
.dg-heat { fill: #e8823a; }
.dg-call path { fill: none; stroke: #b0b0b0; stroke-width: 1.5; stroke-dasharray: 4 5; }
.dg-lb { font-size: 26px; font-weight: 600; fill: #1a1a1a; letter-spacing: -.01em; }
.dg-sub { font-size: 21px; font-weight: 400; fill: #7a7a7a; }
.dg-big { font-size: 56px; font-weight: 600; fill: #1a1a1a; letter-spacing: -.03em; }
.dg-hand { font-family: var(--font-hand); font-weight: 600; font-size: 34px; fill: var(--ink); }
.dg-ink { fill: var(--ink); } .dg-ink-s { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.dg-ring-track { fill: none; stroke: #e7e7e7; stroke-width: 22; }
.dg-ring-seg { fill: none; stroke: var(--ink); stroke-width: 22; stroke-linecap: round; }
.dg-tick { stroke: #f7f7f5; stroke-width: 6; }
/* On a phone a 1600-wide diagram would shrink its labels past reading, so it keeps a readable width and scrolls sideways */
@media (max-width: 700px) {
  .frame-inner:has(> .dg) { aspect-ratio: auto; overflow-x: auto; overscroll-behavior-x: contain; }
  .frame-inner > .dg { position: relative; width: 760px; height: 428px; }
}