/* ─────────────────────────────────────────────────────────────
   Portfolio v2, draft
   Idea: the site itself is a motion spec. Blush canvas, mono annotations
   (ms, curves, states) as the visual motif, electric mint highlights.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #E4E9F1;            /* ice chrome: the cool grey of the bubble header */
  --surface: #FFFFFF;
  --ink: #060A16;
  --ink-2: #2B3140;
  --muted: #737B8C;
  --line: #D2D8E3;
  --mark: #35F2BE;          /* electric mint: pink's complement, highlights only, never text */
  --blush: #F1F4F9;         /* card and orb stages: a lighter tint than the page, so they read as surfaces (matches orb.html) */
  --placeholder: #FFF4C2;

  --display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --head: 'Mona Sans', 'Inter Tight', sans-serif;   /* headings: Mona Sans wide, same as the header */
  --label: 'Bricolage Grotesque', 'Inter Tight', sans-serif;  /* secondary voice: labels, captions, specs */

  /* motion tokens, used by the site and shown on the site */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
  --dur-micro: 120ms;
  --dur-short: 250ms;
  --dur-medium: 400ms;

  --gutter: 24px;
  --max: 1152px;   /* 1104px content + gutters: same column as the project pages */
  --radius: 20px;
  /* Type scale for running text; phones get a smaller step (see the 860px query) */
  --fs-intro: 21px;   /* lead paragraph under a title */
  --fs-body: 19px;    /* long-form body copy */
  --fs-lede: 18px;
  --fs-h3: 28px;      /* section labels in case studies */
  --fs-stat: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--mark); color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--label); font-size: 13px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.ph { background: var(--placeholder); border-radius: 4px; padding: 0 4px; font-family: var(--label); font-size: .85em; }

/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* solid, not frosted: a backdrop blur re-renders everything scrolling under it every frame */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-short) var(--ease-standard);
}
.nav.is-scrolled { border-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); animation: pulse 3.2s var(--ease-standard) infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a { padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background var(--dur-micro) var(--ease-standard); }
.nav-links a:hover { background: var(--surface); }

/* ─── Section scaffolding ─── */
.section { padding-top: 120px; }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: end; margin-bottom: 40px; }
.eyebrow { display: flex; gap: 10px; align-items: center; font-family: var(--label); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.eyebrow b { color: var(--ink); font-weight: 500; }
.h2 { font-family: var(--head); font-size: clamp(28px, 3.8vw, 48px); line-height: 1.02; font-weight: 800; letter-spacing: 0; }
.lede { font-size: var(--fs-lede); color: var(--ink-2); max-width: 56ch; }

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

/* ─── Mini orb: CSS-only stand-in for the voice orb; also the image placeholder ─── */
.mini-orb-stage { position: absolute; inset: 0; background: transparent; display: grid; place-items: center; }   /* the orb sits straight on the page */
/* Glass sphere with the fabric shader inside (js/fabric-glass.js, drawn by v2.js into .mo-canvas).
   No specular dot: the rim layer is the only edge light. */
.mini-orb { width: 40%; aspect-ratio: 1; border-radius: 50%; position: relative; isolation: isolate;
  box-shadow: 0 30px 70px rgba(63, 120, 255, .2), 0 10px 26px rgba(110, 140, 255, .14);   /* blue shadow, to match the ice chrome palette */
  animation: breathe 3.2s ease-in-out infinite; }
.mini-orb.no-gl { background: radial-gradient(circle at 40% 35%, #FFC977, #FF9E9E 45%, #C9B6FF); opacity: .85; }
.mo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; }
.mo-rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 6px 8px 18px rgba(255,255,255,.35); }
@keyframes breathe { 50% { transform: scale(1.04); } }

/* ─── Footer ─── */
.footer { margin-top: 160px; background: var(--ink); color: var(--bg); padding: 96px 0 32px; }
.footer-cta { font-size: clamp(44px, 8vw, 120px); line-height: .95; font-weight: 600; letter-spacing: -.045em; }
.footer-cta a { color: inherit; }
.footer-cta .mark { background: var(--mark); color: var(--ink); padding: 0 .1em; border-radius: .1em; transition: background var(--dur-short) var(--ease-standard); }
.footer-cta a:hover .mark { background: #fff; }   /* echoes the hero's highlighted word */
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 96px; padding-top: 24px; border-top: 1px solid #2A2C30; color: #9A9EA5; }
.footer-row a:hover { color: var(--bg); }
.footer-links { display: flex; gap: 20px; }

@media (max-width: 860px) {
  :root { --gutter: 24px;   /* same side margin as the project pages */
    --fs-intro: 18px; --fs-body: 16px; --fs-lede: 16px; --fs-h3: 24px; --fs-stat: 36px; }
  .section { padding-top: 88px; }
  .section-head { grid-template-columns: 1fr; }
  .nav-links li:has(.cv), .nav-links li:has(a[href$="#earlier"]) { display: none; }   /* phones: Work and About only */
}

/* ─── No lonely words ───
   Body text wraps naturally (text-wrap: pretty reshuffled whole paragraphs on
   phones); v2.js joins the last two words of each block so one word never sits
   alone on the last line. Headings are balanced. */
h1, h2, h3, .pull { text-wrap: balance; }

/* ─── Ice chrome atmosphere: a soft blue/lilac glow and fine grain behind every page ─── */
body { background:
  radial-gradient(60vw 45vw at 85% -10%, rgba(169, 139, 255, .22), transparent 70%),
  radial-gradient(70vw 50vw at 10% 110%, rgba(63, 182, 255, .18), transparent 70%),
  var(--bg) fixed; }
body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ─── Headings: one family across the site (Mona Sans wide, like the header) ─── */
h1, h2, h3, .h2, .cs-title, .block-label h2, .case-meta h3, .mini h4, .kpi b, .pw-name, .lab h3 { font-family: var(--head); font-weight: 800; letter-spacing: 0; }   /* wide type needs air between letters */

/* ─── Arrow icon (a drawn ↗, never the text character: iOS turns that into an emoji) ─── */
.arw { display: inline-block; width: .72em; height: .72em; margin-left: .2em; vertical-align: -.02em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }