/* Srikant Mehra, product designer.
   Quiet and precise: warm near-black, off-white type, 1px hairlines and a lot
   of room. The home page pairs Clash Display for headings with Switzer for
   body copy, both from Fontshare; other pages use Host Grotesk for body
   copy, with a display face for headings.
   Emphasis is brightness, never italics. Every corner is square. Each project
   keeps a deep colour of its own. Motion is slow and eased; the engine is
   js/main.js. */

:root {
  --bg: #0c0c0b;
  --deep: #121211;
  --fg: #ecebe6;
  --dim: #8e8d87;
  --faint: #4f4e4a;
  --line: rgba(236, 235, 230, .12);
  --line2: rgba(236, 235, 230, .26);
  --ok: #8fd19e;
  --sel: #6f9bff;
  --hd-bg: var(--bg);
  --hd-fg: var(--fg);
  --cbg: #0c0c0b;
  --gut: clamp(20px, 3vw, 48px);
  --hd-h: 64px;
  --f: 'Host Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fh: 'Clash Display', var(--f);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-back: cubic-bezier(.34, 1.45, .64, 1);
  color-scheme: dark;
}

:root.portfolio-home {
  --f: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fh: 'Clash Display', var(--f);
}
/* reach.js styles its toast in Host Grotesk for every page */
.portfolio-home .reach-toast { font-family: var(--f); }
/* Clash Display one step heavier on the home page: Light headings set in
   Regular, Regular ones in Medium */
.portfolio-home :is(.nm, .h2, .proj-name, .pr-step h3, .contact-title, .pt-t b) { font-weight: 400; }
.portfolio-home :is(.stop h3, .kit-title, .mi-name) { font-weight: 500; }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hd-h); background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-family: var(--fh); }
ol, ul { list-style: none; }
i, em { font-style: normal; }
b { font-weight: 500; }
mark { background: none; color: var(--fg); }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }

.skip { position: fixed; left: var(--gut); top: -60px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 14px; }
.skip:focus { top: 12px; }

.ic { display: inline-block; flex: none; width: .9em; height: .9em; margin-left: .45em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: square; stroke-linejoin: miter; transition: transform .6s var(--ease); }
a:hover > .ic { transform: translate(3px, 0); }
a[target="_blank"]:hover > .ic { transform: translate(2px, -2px); }
.ul { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; transition: background-size .6s var(--ease); }
.ul:hover { background-size: 0 1px; background-position: 100% 100%; }

.sq { flex: none; display: inline-block; width: 6px; height: 6px; background: var(--ok); }
.status { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg); }

/* section label: a hairline with the name on the left and its number on the right */
.label { display: flex; justify-content: space-between; gap: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }

.h2 { font-size: clamp(44px, 6vw, 112px); font-weight: 300; line-height: .92; letter-spacing: -.055em; }
/* Keep the reveal mask clear of ascenders, descenders and glyph overhang. */
.h2 .ln, .proj-name .ln { display: block; overflow: clip; padding: .1em .08em .24em; margin: -.1em -.08em -.24em; }
.h2 .ln > span, .proj-name .ln > span { display: inline-block; white-space: nowrap; }
.h2 .ln:nth-child(2) { padding-left: 2em; }

.more { display: inline-flex; align-items: center; padding: 12px 0 10px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size .7s var(--ease); }
.more:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ============ the selection frame ============ */
.sel { position: fixed; left: 0; top: 0; z-index: 95; width: 12px; height: 12px; pointer-events: none; border: 1px solid var(--sel); opacity: 0; transition: opacity .3s; will-change: transform, width, height; }
.sel.on { opacity: 1; }
.sel i { position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--sel); transform: scale(0); transition: transform .35s var(--ease); }
.sel i:nth-child(1) { left: -4px; top: -4px; }
.sel i:nth-child(2) { right: -4px; top: -4px; }
.sel i:nth-child(3) { left: -4px; bottom: -4px; }
.sel i:nth-child(4) { right: -4px; bottom: -4px; }
.sel b { position: absolute; left: 50%; top: calc(100% + 9px); padding: 2px 6px 3px; background: var(--sel); color: #fff; font-size: 10.5px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translateX(-50%); opacity: 0; transition: opacity .25s; }
.sel.is-target i { transform: none; }
.sel.is-target b { opacity: 1; }
html.has-sel, html.has-sel * { cursor: none !important; }
/* over a compare slider the pointer is the control, so it shows */
.sel.is-off { opacity: 0; }
html.has-sel .cmp, html.has-sel .cmp * { cursor: ew-resize !important; }

/* ============ header ============ */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  height: var(--hd-h); padding: 0 var(--gut);
  background: var(--hd-bg); color: var(--hd-fg);
  border-bottom: 1px solid color-mix(in srgb, var(--hd-fg) 10%, transparent);
  font-size: 14px;
  transition: background-color 1s var(--ease-io), color 1s var(--ease-io);
}
.hd-name { font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.hd-nav { display: flex; gap: clamp(18px, 2.4vw, 40px); white-space: nowrap; }
.hd-nav a { position: relative; color: color-mix(in srgb, var(--hd-fg) 66%, transparent); transition: color .4s; }
.hd-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.hd-nav a:hover { color: var(--hd-fg); }
.hd-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hd-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hd-fg); transform-origin: 0 0; transform: scaleX(0); opacity: .6; }

/* ============ hero ============ */
.hero {
  position: relative; overflow-x: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding: calc(var(--hd-h) + 5vh) var(--gut) 15vh;
}
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hero-where { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.hero-where time { color: var(--fg); margin-left: 6px; }
.nm {
  align-self: center;
  margin: 5vh 0 4vh;
  font-size: clamp(64px, 17vw, 330px); font-weight: 300;
  line-height: .86; letter-spacing: -.065em;
  user-select: none; -webkit-user-select: none;
}
.nm-l { display: block; overflow-x: clip; overflow-y: visible; padding: 0 .04em .06em; margin: 0 -.04em -.06em; will-change: transform; }
.nm-2 { text-align: right; }
.nm-i { display: inline-block; will-change: transform; }
/* a lens under the pointer turns the name into Devanagari */
.nm-i { position: relative; --r: 0px; --mx: 50%; --my: 50%; }
.nm-en { display: inline-block; }
.nm-d {
  position: absolute; inset: 0; display: flex; align-items: flex-start;
  font-family: 'Anek Devanagari', var(--fh); font-weight: 200; font-stretch: 125%; line-height: 1; letter-spacing: 0; white-space: nowrap;
  clip-path: circle(0 at 50% 50%); pointer-events: none;
}
.nm-2 .nm-d { justify-content: flex-end; }
.nm-d > span { display: block; }
.nm-bl { display: inline-block; width: 0; height: 0; }
.has-lens .nm-en { -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent calc(100% - 1px), #000 100%); mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), transparent calc(100% - 1px), #000 100%); }
.has-lens .nm-d { clip-path: circle(var(--r) at var(--mx) var(--my)); }
.rule { display: block; height: 1px; background: var(--line2); transform-origin: 0 50%; }
.hero-foot {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start;
  padding-top: 24px;
}
.hero-role { grid-column: 1 / 4; display: grid; gap: 2px; font-size: 14px; }
.hero-role span:last-child { color: var(--dim); }
.hero-lede { grid-column: 4 / 10; font-size: clamp(20px, 1.75vw, 29px); font-weight: 300; line-height: 1.3; letter-spacing: -.015em; color: var(--dim); text-wrap: pretty; }
.hero-links { grid-column: 10 / -1; justify-self: end; display: grid; justify-items: end; gap: 6px; font-size: 14px; }
.hero-links a { color: var(--dim); transition: color .4s; }
.hero-links a:hover { color: var(--fg); }

/* ============ about ============ */
.about { position: relative; padding: 16vh var(--gut) 14vh; }
.about-big { margin-top: 9vh; max-width: 21em; font-size: clamp(30px, 3.7vw, 66px); font-weight: 300; line-height: 1.12; letter-spacing: -.035em; color: #77766f; text-wrap: pretty; }
.about-big mark { color: var(--fg); }
.about-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 10vh; }
.about-facts > div { padding-top: 16px; border-top: 1px solid var(--line); }
.about-facts dt { font-size: 13px; color: var(--dim); }
.about-facts dd { margin-top: 8px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }

/* ============ work ============ */
.work { position: relative; isolation: isolate; overflow-x: clip; }
.work-bg {
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: -1;
  background: var(--cbg);
  transition: background-color 1.4s var(--ease-io);
}
.work-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start;
  padding: 20vh var(--gut) 8vh;
}
.work-head .label, .work-head .h2 { grid-column: 1 / -1; }
.work-head .h2 { margin-top: 5vh; }
.work-sub { grid-column: 1 / 5; margin-top: 9vh; font-size: 16px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
.work-index { grid-column: 7 / -1; margin-top: 9vh; border-top: 1px solid var(--line2); }
.work-index a {
  display: grid; grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 24px 0 22px; border-bottom: 1px solid var(--line);
  transition: opacity .6s var(--ease), padding .8s var(--ease);
}
.work-index:hover a { opacity: .32; }
.work-index a:hover { opacity: 1; padding-left: 16px; }
.wi-n, .wi-kind, .wi-year { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.wi-name { font-size: clamp(22px, 2.2vw, 36px); font-weight: 300; line-height: 1.1; letter-spacing: -.035em; white-space: nowrap; }
.wi-year { text-align: right; white-space: nowrap; }

.proj {
  position: relative;
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); align-items: start;
  padding: 20vh var(--gut) 18vh;
  overflow: clip;
  color: var(--pfg);
}
.p1 { --pbg: #141d3d; --pfg: #ecebe6; }
.p2 { --pbg: #0f2a22; --pfg: #ecebe6; }
.p3 { --pbg: #2e140c; --pfg: #f1ebe4; }
.p4 { --pbg: #0d1129; --pfg: #e9dcb8; }
.p5 { --pbg: #1c1033; --pfg: #ece8f4; }
.p6 { --pbg: #0e2229; --pfg: #e8ecea; }
.proj-head { grid-column: 1 / -1; grid-row: 1; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--pfg) 16%, transparent); font-size: 13px; color: color-mix(in srgb, var(--pfg) 58%, transparent); font-variant-numeric: tabular-nums; }
.proj-meta span:first-child { color: var(--pfg); }
.proj-name { margin-top: 5vh; font-size: clamp(56px, 9.4vw, 180px); font-weight: 300; line-height: .9; letter-spacing: -.06em; white-space: nowrap; }
.proj-line { position: relative; z-index: 3; font-size: clamp(28px, 3.2vw, 56px); font-weight: 300; line-height: 1.14; letter-spacing: -.035em; color: color-mix(in srgb, var(--pfg) 48%, transparent); text-wrap: balance; }
.proj-line mark { color: var(--pfg); }
.proj-copy { position: relative; z-index: 3; max-width: 42ch; font-size: 16px; line-height: 1.68; color: color-mix(in srgb, var(--pfg) 74%, transparent); }
.proj-copy p + p { margin-top: 1em; }
.proj-lede { font-size: clamp(20px, 1.7vw, 27px); font-weight: 300; line-height: 1.25; letter-spacing: -.02em; color: var(--pfg); }
.proj-copy .proj-note { margin-top: 1.6em; font-size: 12.5px; color: color-mix(in srgb, var(--pfg) 52%, transparent); }

figcaption { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, currentColor 62%, transparent); }

/* phones: device mockups built to the real proportions, measured in the
   phone's own width (cqw) so every part scales together at any size.
   Android (default) is a Pixel 8: 9:20 screen, 4.5% bezel, hole-punch camera.
   .phone--ios is an iPhone 15 Pro: 393:852 screen, 4.1% bezel, Dynamic Island.
   The metal frame is the border, the black glass is the padding, the
   screenshot is the content, so nothing is cropped beyond the screen. */
.phone { position: relative; z-index: 2; container-type: inline-size; }
.device {
  --bz: 4.5cqw; --rim: 1.15cqw; --r: 13.7cqw; --ar: 9 / 20;
  position: relative;
  padding: calc(var(--bz) - var(--rim));
  border: var(--rim) solid transparent;
  border-radius: var(--r);
  background:
    linear-gradient(#08080a, #08080a) padding-box,
    linear-gradient(155deg, #77787d 0%, #2b2c30 16%, #4d4e53 34%, #1d1e21 55%, #3e3f43 76%, #6c6d72 92%, #2b2c30 100%) border-box;
  box-shadow:
    inset 0 0 0 .3cqw #000,
    inset 0 0 1.2cqw .4cqw rgba(255, 255, 255, .05),
    0 0 0 .18cqw rgba(0, 0, 0, .55),
    0 1.5cqw 3cqw -1cqw rgba(0, 0, 0, .45),
    0 22cqw 40cqw -16cqw rgba(0, 0, 0, .8);
}
.device img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto; aspect-ratio: var(--ar);
  object-fit: cover; object-position: top;
  border-radius: calc(var(--r) - var(--bz));
  background: #0d0d0d;
}
/* the camera: a hole in the glass, sitting in the middle of the status bar */
.device::before {
  content: ''; position: absolute; z-index: 2; left: 50%;
  top: calc(var(--bz) - var(--rim) + 3.05cqw); width: 3.7cqw; aspect-ratio: 1; margin-left: -1.85cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgba(140, 170, 220, .5) 0 8%, transparent 14%),
    radial-gradient(circle, #1a2130 0 24%, #06080b 42%, #000 64%, #16171a 70%, #000 78%);
}
/* side buttons, drawn as metal bars just proud of the frame, behind it */
.device::after {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--rim) - .7cqw); right: calc(-1 * var(--rim) - .7cqw);
  background:
    linear-gradient(90deg, #26272a, #5c5d62 60%, #2e2f33) right 0 top 46cqw / 1.6cqw 16cqw no-repeat,
    linear-gradient(90deg, #26272a, #5c5d62 60%, #2e2f33) right 0 top 72cqw / 1.6cqw 33cqw no-repeat;
}
.phone--ios .device {
  --bz: 4.1cqw; --rim: 1.25cqw; --r: 17.3cqw; --ar: 393 / 852;
  background:
    linear-gradient(#060607, #060607) padding-box,
    linear-gradient(155deg, #8d8a85 0%, #3a3936 15%, #5f5d59 33%, #2a2927 54%, #4d4b48 75%, #85827d 92%, #3a3936 100%) border-box;
}
.phone--ios .device::before {
  top: calc(var(--bz) - var(--rim) + 2.6cqw); width: 29.5cqw; height: 8.7cqw; aspect-ratio: auto; margin-left: -14.75cqw;
  border-radius: 5cqw;
  background:
    radial-gradient(circle at 81% 50%, rgba(90, 110, 160, .45) 0 4%, #0b0d12 7%, transparent 11%),
    #000;
}
.phone--ios .device::after {
  background:
    linear-gradient(90deg, #2e2d2b, #6b6964 60%, #34332f) left 0 top 37cqw / 1.6cqw 10.5cqw no-repeat,
    linear-gradient(90deg, #2e2d2b, #6b6964 60%, #34332f) left 0 top 55cqw / 1.6cqw 18cqw no-repeat,
    linear-gradient(90deg, #2e2d2b, #6b6964 60%, #34332f) left 0 top 78cqw / 1.6cqw 18cqw no-repeat,
    linear-gradient(90deg, #34332f, #6b6964 40%, #2e2d2b) right 0 top 55cqw / 1.6cqw 28cqw no-repeat;
}
.phone figcaption { text-align: center; }

/* shots: each screen is shown on its own canvas, the way a design shot is.
   A deep tile in the project's own hue (dark, so it never flashes on the
   dark sections), a web screen floating as a window with a
   frosted edge, the part it's about lifted out as a card, phones standing
   and cut by the tile's edge. Everything inside is placed in the tile's own
   width (cqw), so a composition holds at any size. Windows and cards are
   sized by width with their images at natural height: nothing is cropped. */
.t-fm { --sh: 0 0 0; --tile-bg: radial-gradient(80% 70% at 15% 0%, rgba(132, 154, 238, .30) 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(70, 96, 200, .22) 0%, transparent 70%), linear-gradient(160deg, #232d5c 0%, #121934 100%); }
.t-po { --sh: 0 0 0; --tile-bg: radial-gradient(80% 70% at 15% 0%, rgba(120, 206, 160, .24) 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(40, 140, 100, .20) 0%, transparent 70%), linear-gradient(160deg, #1d3f33 0%, #0b211a 100%); }
.t-ed { --sh: 0 0 0; --tile-bg: radial-gradient(80% 70% at 15% 0%, rgba(240, 160, 110, .26) 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(190, 90, 50, .20) 0%, transparent 70%), linear-gradient(160deg, #4a2516 0%, #210e08 100%); }
.t-ff { --sh: 0 0 0; --tile-bg: radial-gradient(80% 70% at 15% 0%, rgba(140, 172, 245, .28) 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(232, 200, 120, .12) 0%, transparent 70%), linear-gradient(160deg, #20295a 0%, #0c112b 100%); }
.t-ids { --sh: 0 0 0; --tile-bg: radial-gradient(80% 70% at 15% 0%, rgba(110, 200, 220, .24) 0%, transparent 70%), radial-gradient(60% 60% at 100% 100%, rgba(40, 120, 150, .22) 0%, transparent 70%), linear-gradient(160deg, #1a3b46 0%, #0b1d23 100%); }
.t-ev { --sh: 0 0 0; --tile-bg: radial-gradient(55% 55% at 50% 108%, rgba(224, 4, 107, .42) 0%, transparent 70%), radial-gradient(70% 60% at 15% 0%, rgba(125, 82, 217, .5) 0%, transparent 70%), linear-gradient(160deg, #241843 0%, #110a22 100%); }

.shot { position: relative; z-index: 1; }
.shot-in, div.shot {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: clamp(14px, 1.8vw, 30px);
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.shot-in { container-type: inline-size; }
.win {
  position: absolute; padding: .55cqw; border-radius: 1.5cqw;
  /* no backdrop blur: the tile behind is a smooth gradient, so it looked the
     same, and re-blurring it on every frame of a curtain made arrivals stutter */
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 .6cqw 1.4cqw -.6cqw rgb(var(--sh) / .4), 0 4cqw 8cqw -3cqw rgb(var(--sh) / .65);
}
.win img { display: block; width: 100%; height: auto; border-radius: 1cqw; }
.float {
  position: absolute; overflow: hidden; border-radius: 1.3cqw; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 1cqw 2cqw -1cqw rgb(var(--sh) / .45), 0 5cqw 9cqw -3cqw rgb(var(--sh) / .7);
}
.float img { display: block; width: 100%; height: auto; }

/* File Manager: the files screen, its status column lifted out over the right edge */
.p1-shot .shot-in, .p2-shot .shot-in, .p6-shot .shot-in { aspect-ratio: 16 / 9.6; }
.p1-shot .win, .p6-shot .win { left: 6cqw; top: 6cqw; width: 76cqw; }
.p1-shot .p1-phone, .p6-shot .p6-phone { position: absolute; left: 74cqw; top: 10.39cqw; width: 21cqw; }
/* the files screen on a phone, drawn in HTML inside the device: measured in
   the phone's own width, like the device around it */
.fm-m {
  position: relative; z-index: 1; aspect-ratio: var(--ar); overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: calc(var(--r) - var(--bz));
  background: #f6f7f9; color: #1c2230; font-family: Inter, system-ui, sans-serif; line-height: 1.3; letter-spacing: -.01em;
}
.fm-sb { display: flex; justify-content: space-between; align-items: center; padding: 4.6cqw 7cqw 0 9cqw; height: 13cqw; font-size: 3.6cqw; }
/* signal, Wi-Fi and battery, drawn in the status bar's own colour */
.fm-sb-ic { display: block; width: 16cqw; height: auto; fill: currentColor; }
.fm-sb-ic .fm-sb-w { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.fm-sb-ic .fm-sb-b { fill: none; stroke: currentColor; stroke-width: 1; opacity: .4; }
/* a screenshot taken without a status bar: the screen gets one, and the shot starts below it */
.phone--sb .device img { padding-top: 13cqw; background: #fff; }
.phone--sb .fm-sb { position: absolute; z-index: 2; top: calc(var(--bz) - var(--rim)); left: calc(var(--bz) - var(--rim)); right: calc(var(--bz) - var(--rim)); color: #1c2230; }
.fm-top { padding: 2cqw 5.5cqw 3cqw; }
.fm-proj { display: block; font-size: 3.1cqw; color: #6b7280; }
.fm-h { display: block; margin-top: .4cqw; font-size: 7.4cqw; font-weight: 650; letter-spacing: -.03em; }
.fm-tabs { display: flex; gap: 1.6cqw; padding: 0 5.5cqw 3.4cqw; font-size: 3.1cqw; font-weight: 500; }
.fm-tabs span { padding: 1.5cqw 3cqw; border-radius: 99px; color: #4b5263; background: #e9ebf0; white-space: nowrap; }
.fm-tabs .is-on { color: #fff; background: #1c2230; }
.fm-tabs i { font-style: normal; margin-left: .8cqw; padding: 0 1.3cqw; border-radius: 99px; background: #e0742d; }
.fm-list { flex: 1; margin: 0; padding: 0 3.5cqw; list-style: none; }
.fm-list li { display: flex; gap: 3cqw; align-items: center; margin-bottom: 1.8cqw; padding: 3.2cqw; border-radius: 3.4cqw; background: #fff; box-shadow: 0 0 0 .25cqw #e8eaef; }
.fm-list li.is-you { box-shadow: 0 0 0 .3cqw #f6d2b8; background: #fffaf6; }
.fm-list li > div { min-width: 0; flex: 1; }
.fm-ic { flex: none; display: grid; place-items: center; width: 9.5cqw; aspect-ratio: 1; border-radius: 2.2cqw; font-style: normal; font-size: 2.3cqw; font-weight: 700; color: #3d5bd9; background: #eaf0ff; }
.fm-list b { display: block; overflow: hidden; font-size: 3.5cqw; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fm-row { display: flex; gap: 1.4cqw; align-items: center; margin-top: 1.3cqw; }
.fm-row em, .fm-row u { padding: .7cqw 2cqw; border-radius: 99px; font-size: 2.8cqw; font-style: normal; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fm-row em::before { content: ''; display: inline-block; width: 1.5cqw; aspect-ratio: 1; margin: 0 1.1cqw .3cqw 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
.fm-row s { text-decoration: none; opacity: .75; font-weight: 400; }
.fm-row u { margin-left: auto; border-radius: 1.4cqw; font-weight: 600; }
.c-wait { color: #b4581c; background: #fdeee2; }
.c-part { color: #3557b7; background: #e6edfc; }
.c-ok { color: #2f7a46; background: #e6f4ea; }
.c-no { color: #c0383c; background: #fbe7e7; }
.c-draft { color: #5b6170; background: #eceef2; }
.f-gfc { color: #2f68c8; background: #e8f1fd; }
.f-tender { color: #6b4fcf; background: #efeafd; }
.f-muni { color: #b4621c; background: #fdeee0; }
.fm-nav { display: flex; justify-content: space-around; padding: 3cqw 4cqw 7cqw; border-top: .25cqw solid #e6e8ee; background: #fff; font-size: 2.9cqw; color: #8a90a0; }
.fm-nav .is-on { color: #1c2230; font-weight: 600; }
/* the same screens' parts for the detail and Before you send screens */
.m-bar { display: flex; gap: 2.6cqw; align-items: center; padding: 1cqw 5cqw 3.4cqw; border-bottom: .25cqw solid #e6e8ee; }
.m-bar > div { min-width: 0; }
.m-bar b { display: block; overflow: hidden; font-size: 4.2cqw; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.m-bar span:not(.m-back) { display: block; margin-top: .4cqw; font-size: 2.8cqw; color: #6b7280; }
.m-back { font-size: 7cqw; line-height: 1; color: #4b5263; }
.m-body { flex: 1; min-height: 0; overflow: hidden; padding: 3.4cqw 4.5cqw 0; }
.m-lbl { margin: 3.6cqw 0 1.6cqw; font-size: 2.5cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9097a6; }
.m-plan { position: relative; height: 34cqw; border-radius: 3cqw; background: #fff linear-gradient(#eef0f4 1px, transparent 1px) 0 0 / 4cqw 4cqw, linear-gradient(90deg, #eef0f4 1px, transparent 1px) 0 0 / 4cqw 4cqw; box-shadow: 0 0 0 .25cqw #e6e8ee; }
.m-plan svg { width: 100%; height: 100%; fill: none; stroke: #2a3040; stroke-width: 2.4; }
.m-plan .m-thin { stroke-width: 1; }
.m-plan .m-pin { fill: rgba(220, 70, 70, .2); stroke: #d84a4a; stroke-width: 1; stroke-dasharray: 2 2; }
.m-page, .m-open { position: absolute; bottom: 2cqw; padding: .9cqw 2cqw; border-radius: 1.6cqw; font-size: 2.5cqw; background: #fff; box-shadow: 0 0 0 .25cqw #e6e8ee; }
.m-page { left: 2cqw; } .m-open { right: 2cqw; }
.m-due { display: flex; align-items: center; justify-content: space-between; margin-top: 3cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; font-size: 2.8cqw; color: #a8521b; background: #fff7ef; box-shadow: 0 0 0 .25cqw #f6d9bf; }
.m-due .fm-row { margin: 0; }
.m-chain, .m-log, .m-rules, .m-fixes { margin: 0; padding: 0; list-style: none; }
.m-chain li { position: relative; display: flex; gap: 3cqw; align-items: center; padding: 1.6cqw 0; }
.m-chain li + li::before { content: ''; position: absolute; left: 3.9cqw; top: -2.4cqw; height: 4cqw; border-left: .3cqw solid #dfe2e8; }
.m-chain div { flex: 1; }
.m-chain b { display: block; font-size: 3.3cqw; font-weight: 600; }
.m-chain span { display: block; margin-top: .3cqw; font-size: 2.8cqw; color: #6b7280; }
.m-av { flex: none; display: grid; place-items: center; width: 8cqw; aspect-ratio: 1; border-radius: 50%; font-size: 2.6cqw; font-style: normal; font-weight: 650; color: #2f6a43; background: #d9efe0; }
.m-chain .is-you .m-av { color: #8a4a12; background: #f9cf9e; box-shadow: 0 0 0 .5cqw #fff, 0 0 0 .9cqw #e8913f; }
.m-chain .is-you span { color: #b4581c; }
.m-chain .is-next { opacity: .6; } .m-chain .is-next .m-av { color: #5a6378; background: #e6eaf2; }
.m-tick { font-style: normal; font-size: 2.8cqw; display: grid; place-items: center; width: 5cqw; aspect-ratio: 1; border-radius: 50%; color: #2f7a46; background: #e2f3e7; }
.m-log li { display: flex; justify-content: space-between; padding: 1.5cqw 0; font-size: 3cqw; }
.m-log span { color: #9097a6; }
.m-cta { display: flex; gap: 2.4cqw; padding: 3cqw 4.5cqw 7cqw; border-top: .25cqw solid #e6e8ee; background: #fff; }
.m-btn { flex: 1; padding: 2.8cqw 0; border-radius: 2.6cqw; text-align: center; font-size: 3.3cqw; font-weight: 600; }
.m-btn.is-ok { color: #fff; background: #4a9d5e; }
.m-btn.is-no { color: #c0383c; background: #fdf3f3; box-shadow: inset 0 0 0 .25cqw #f2cfcf; }
.m-btn.is-send { color: #fff; background: #f09a2a; }
.m-budget { padding: 3cqw 3.4cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 0 0 .25cqw #e6e8ee; }
.m-budget p { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 2.8cqw; color: #6b7280; }
.m-budget p b { font-size: 3.5cqw; color: #1c2230; }
.m-meter { display: block; height: 1.6cqw; margin: 2cqw 0; border-radius: 99px; background: #f09a2a; }
.m-meter i { display: block; width: 98.5%; height: 100%; border-radius: 99px; background: #4a9d5e; }
.m-budget strong { display: block; margin-top: 1cqw; font-size: 2.8cqw; font-weight: 600; color: #b4621c; }
.m-rules li { display: flex; gap: 2.4cqw; margin-bottom: 1.6cqw; padding: 2.4cqw 2.8cqw; border-radius: 2.6cqw; background: #fff; box-shadow: 0 0 0 .25cqw #e6e8ee; }
.m-rules i { flex: none; display: grid; place-items: center; width: 6cqw; aspect-ratio: 1; border-radius: 50%; font-size: 2.6cqw; font-style: normal; font-weight: 700; }
.m-rules .is-ask i { color: #c46a12; background: #fdeee0; }
.m-rules .is-req i { color: #6b4fcf; background: #efeafd; }
.m-rules .is-pass i { color: #2f7a46; background: #e2f3e7; }
.m-rules b, .m-fixes b { display: block; font-size: 3cqw; font-weight: 600; }
.m-rules span { display: block; margin-top: .5cqw; font-size: 2.6cqw; line-height: 1.35; color: #6b7280; }
.m-approver { display: flex; gap: 2.4cqw; align-items: center; margin-top: 2cqw; padding: 2.6cqw 2.8cqw; border-radius: 2.6cqw; font-size: 2.7cqw; line-height: 1.35; color: #8a4a12; background: #fff3e3; }
.m-approver .m-av { color: #8a4a12; background: #f9cf9e; }
.m-fixes li { margin-bottom: 1.6cqw; padding: 2.2cqw 2.8cqw; border-radius: 2.6cqw; border: .3cqw dashed #d3d7df; background: #fff; }
.m-fixes span { display: block; margin-top: .4cqw; font-size: 2.5cqw; font-weight: 600; color: #2f8a52; }
/* the detail panel alone, as a component */
.p1-comp .shot-in { aspect-ratio: 5 / 7; }
.p1-comp .p1-cphone { position: absolute; left: 25cqw; top: 14cqw; width: 50cqw; }
/* Vendor & PO: step 2, with Before you send lifted out over the panel it comes from */
.p2-shot .win { left: 5cqw; top: 7.6cqw; width: 70cqw; }
.p2-shot .p2-phone { position: absolute; left: 72cqw; top: 8.24cqw; width: 21cqw; }
/* Vendor & PO: the guardrails as the owner meets them. Six rules, the same
   three outcomes for each, every option one sentence; pick one per row. */
.gr { --pass: #5fd08e; --ask: #f2b04c; --stop: #ff7466; padding: clamp(18px, 2.6vw, 40px); }
.gr-head, .gr-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.15fr)); gap: 10px; }
.gr-head { padding: 0 0 14px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.gr-head span { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.gr-head span:first-child { padding-left: 0; }
.gr-head span:not(:first-child)::before { content: ''; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.g-pass { --c: var(--pass); } .g-ask { --c: var(--ask); } .g-stop { --c: var(--stop); }
.gr-row { align-items: stretch; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.p2-guard.is-in .gr-row { opacity: 1; transform: none; }
.p2-guard.is-in .gr-row:nth-child(3) { transition-delay: .08s; } .p2-guard.is-in .gr-row:nth-child(4) { transition-delay: .16s; } .p2-guard.is-in .gr-row:nth-child(5) { transition-delay: .24s; }
.p2-guard.is-in .gr-row:nth-child(6) { transition-delay: .32s; } .p2-guard.is-in .gr-row:nth-child(7) { transition-delay: .4s; }
.gr-name { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 10px; }
.gr-name b { font-size: 16px; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.gr-name span { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .5); }
.gr-c { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.42; color: rgba(255, 255, 255, .58); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .35s, color .35s, box-shadow .35s; }
label.gr-c { cursor: pointer; }
label.gr-c:hover { color: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.gr-c input { flex: none; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 1px 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: box-shadow .3s, background .3s; cursor: pointer; }
.gr-c input:checked { background: var(--c); box-shadow: inset 0 0 0 4px #10261e, 0 0 0 1.5px var(--c), 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.gr-c input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gr-c:has(input:checked) { color: #fff; background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.gr-o { display: none; }
.gr-na { align-items: center; justify-content: center; color: rgba(255, 255, 255, .22); background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
/* EazyDiner: three of the 2026 screens, staggered and cut by the tile */
.p3-shot .shot-in { aspect-ratio: 16 / 11; }
.p3-shot .phone { position: absolute; width: 25cqw; }
.p3-shot .phone:nth-child(1) { left: 7.5cqw; top: 17cqw; }
.p3-shot .phone:nth-child(2) { left: 37.5cqw; top: 6cqw; }
.p3-shot .phone:nth-child(3) { left: 67.5cqw; top: 23cqw; }

/* project details: hairline rows, no box */
.facts { position: relative; z-index: 5; width: 100%; max-width: 420px; border-top: 1px solid color-mix(in srgb, var(--pfg) 30%, transparent); }
.facts dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--pfg) 12%, transparent); }
.facts dt { font-size: 12.5px; color: color-mix(in srgb, var(--pfg) 55%, transparent); padding-top: 1px; }
.facts dd { font-size: 14px; line-height: 1.45; }
.facts .more { margin-top: 22px; }

/* --- File Manager --- */
.p1-shot { grid-column: 1 / -1; grid-row: 2; margin-top: 9vh; }
.p1-line { grid-column: 3 / 19; grid-row: 3; margin-top: 26vh; }
.p1-copy { grid-column: 3 / 10; grid-row: 4; margin-top: 9vh; }
.p1-facts { grid-column: 11 / 18; grid-row: 4; margin-top: 9vh; }
.p1-comp { grid-column: 19 / 25; grid-row: 4; margin-top: 4vh; }

/* --- Vendor & PO --- */
.p2-rail { grid-column: 1 / -1; grid-row: 2; margin-top: 8vh; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.p2-rail li { position: relative; padding: 22px 12px 0 0; font-size: 14px; line-height: 1.3; color: color-mix(in srgb, var(--pfg) 62%, transparent); }
.p2-rail li::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: color-mix(in srgb, var(--pfg) 30%, transparent); transform-origin: left; }
.p2-rail li::after { content: ''; position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: var(--pbg); border: 1px solid var(--pfg); }
.p2-rail b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--pfg) 45%, transparent); font-variant-numeric: tabular-nums; }
.p2-rail li.on { color: var(--pfg); }
.p2-rail li.on::after { background: var(--pfg); }
.p2-shot { grid-column: 1 / -1; grid-row: 3; margin-top: 9vh; }
.p2-guard { grid-column: 3 / 23; grid-row: 4; margin-top: 18vh; }
.p2-line { grid-column: 3 / 19; grid-row: 5; margin-top: 16vh; }
.p2-copy { grid-column: 3 / 10; grid-row: 6; margin-top: 9vh; }
.p2-facts { grid-column: 11 / 18; grid-row: 6; margin-top: 9vh; }

/* --- EazyDiner Elite --- */
.p3-versus { grid-column: 1 / -1; grid-row: 2; margin-top: 8vh; display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; gap: 3vw; }
.p3-year { font-size: clamp(56px, 9vw, 170px); font-weight: 300; line-height: .8; letter-spacing: -.06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p3-y1 { justify-self: end; color: color-mix(in srgb, var(--pfg) 30%, transparent); }
.p3-y2 { justify-self: start; }
.p3-versus .phone { width: clamp(150px, 14vw, 260px); }
.p3-a img { filter: saturate(.7) brightness(.92); }
.p3-b { margin-top: 9vh; }
.p3-line { grid-column: 1 / 14; grid-row: 3; margin-top: 20vh; }
.p3-copy { grid-column: 1 / 7; grid-row: 4; margin-top: 9vh; }
.p3-facts { grid-column: 1 / 7; grid-row: 5; margin-top: 7vh; }
.p3-shot { grid-column: 8 / 25; grid-row: 4 / 6; align-self: start; margin-top: 9vh; }

/* --- FitFare --- */
.p4-left { grid-column: 1 / 12; grid-row: 1; }
.p4-line { margin-top: 12vh; }
.p4-copy { margin-top: 7vh; }
.p4-facts { margin-top: 7vh; }
.p4-rack { grid-column: 13 / 25; grid-row: 1; margin-top: 14vh; aspect-ratio: 1 / .84; display: flex; gap: 6%; justify-content: center; align-items: flex-start; padding: 9% 0 0; }
.p4-rack .phone { flex: none; width: 27%; margin-top: 16%; }
.p4-rack .phone:nth-child(2) { margin-top: 4%; }
.p4-rack .phone:nth-child(3) { margin-top: 22%; }
.p4-p img { object-position: 50% var(--scroll, 0%); }

/* --- Evolve --- */
.p5-score { grid-column: 1 / -1; grid-row: 2; margin-top: 8vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.p5-score div { display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--pfg) 26%, transparent); }
.p5-score dt { max-width: 24ch; font-size: 13px; color: color-mix(in srgb, var(--pfg) 58%, transparent); }
.p5-score dd { margin-top: 3vh; font-size: clamp(90px, 15vw, 280px); font-weight: 300; line-height: .8; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.p5-fan { grid-column: 1 / -1; grid-row: 3; position: relative; height: clamp(420px, 72vh, 760px); margin-top: 7vh; }
.p5-fan .phone {
  position: absolute; left: 50%; bottom: -9%;
  width: clamp(150px, 15vw, 280px); margin-left: calc(clamp(150px, 15vw, 280px) / -2);
  transform-origin: 50% 160%;
  transition: transform 1.8s var(--ease);
}
.p5-fan.is-open .phone:nth-child(1) { transform: rotate(-24deg); }
.p5-fan.is-open .phone:nth-child(2) { transform: rotate(-12deg); transition-delay: .06s; }
.p5-fan.is-open .phone:nth-child(3) { transform: translateY(-3vh); z-index: 3; transition-delay: .12s; }
.p5-fan.is-open .phone:nth-child(4) { transform: rotate(12deg); transition-delay: .18s; }
.p5-fan.is-open .phone:nth-child(5) { transform: rotate(24deg); transition-delay: .24s; }
.p5-line { grid-column: 3 / 19; grid-row: 4; margin-top: 16vh; }
.p5-copy { grid-column: 3 / 10; grid-row: 5; margin-top: 9vh; }
.p5-facts { grid-column: 11 / 18; grid-row: 5; margin-top: 9vh; }

/* --- iDesign website: the new homepage, then the line, copy and details --- */
.p6-shot { grid-column: 1 / -1; grid-row: 2; margin-top: 9vh; }
.p6-line { grid-column: 3 / 19; grid-row: 3; margin-top: 16vh; }
.p6-copy { grid-column: 3 / 10; grid-row: 4; margin-top: 9vh; }
.p6-facts { grid-column: 11 / 18; grid-row: 4; margin-top: 9vh; }

/* ============ how I work ============ */
.how { position: relative; padding: 22vh var(--gut) 12vh; background: var(--bg); overflow: clip; }
.how-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
.how-head .label, .how-head .h2 { grid-column: 1 / -1; }
.how-head .h2 { margin-top: 5vh; }
.how-sub { grid-column: 8 / -1; margin-top: 5vh; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
/* how I work: one screen, from notes to shipped. The steps scroll on the left;
   the canvas stays put on the right and the same screen changes form with
   each step (data-phase). Everything on the canvas is placed in its own
   width (cqw), so the whole thing scales as one. */
.pr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 10vh; }
.pr-steps { grid-column: 1 / 6; grid-row: 1; }
.pr-step { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .6s var(--ease); }
.pr-step:last-child { min-height: 76vh; }
.pr-step.is-on { opacity: 1; }
.pr-n { font: 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--dim); }
.pr-step h3 { margin-top: 16px; font-size: clamp(34px, 3.6vw, 60px); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.pr-step h3 + p { max-width: 40ch; margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }

.pr-stage { grid-column: 6 / -1; grid-row: 1; position: sticky; top: calc(var(--hd-h) + 5vh); align-self: start; }
.pr-canvas {
  position: relative; width: min(100%, 92vh); aspect-ratio: 5 / 4; overflow: hidden; container-type: inline-size;
  border-radius: 18px; background: #131312 radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px) 0 0 / 22px 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pr-canvas > * { position: absolute; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility 0s .55s, transform .9s var(--ease); }
.pr-stage[data-phase="1"] .p1, .pr-stage[data-phase="2"] .p2, .pr-stage[data-phase="3"] .p3, .pr-stage[data-phase="4"] .p4,
.pr-stage[data-phase="5"] .p5, .pr-stage[data-phase="6"] .p6 { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease) .15s, transform .9s var(--ease) .1s; }

/* 1 · listen: what people said, over the recording */
.pq {
  left: var(--x); top: var(--y); max-width: 40cqw; padding: 1.6cqw 2cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw .3cqw;
  font-size: max(12px, 1.95cqw); line-height: 1.35; color: #1d1c18; background: #f3f1ea;
  box-shadow: 0 1.2cqw 2.6cqw -1cqw rgba(0, 0, 0, .6); transform: translateY(2cqw) scale(.96);
}
.pr-stage[data-phase="1"] .pq { transition-delay: var(--d); }
.pq:nth-of-type(2), .pq:nth-of-type(4) { border-radius: 1.6cqw 1.6cqw .3cqw 1.6cqw; background: #dfe9ff; }
.pr-rec { left: 5cqw; right: 5cqw; bottom: 5cqw; display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw; font-size: max(11px, 1.6cqw); color: rgba(255, 255, 255, .8); background: #1d1d1b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pr-dot { width: 1.2cqw; aspect-ratio: 1; border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 0 .5cqw rgba(255, 77, 61, .25); }
.pr-wave { position: relative; flex: 1; height: 4cqw; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 .35cqw, transparent .35cqw .8cqw); -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.pr-head { position: absolute; top: -.6cqw; bottom: -.6cqw; left: 0; width: 2px; background: #ff4d3d; }
.pr-stage[data-phase="1"] .pr-head { animation: prHead 8s linear infinite; }
@keyframes prHead { to { left: 100%; } }
.pr-t { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); }

/* 2 · map: the flow, and where it gets stuck */
.pr-flow { inset: 6cqw 7cqw; width: auto; color: rgba(255, 255, 255, .4); overflow: visible; }
.pf-p { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1s var(--ease) var(--d); }
.pf-n rect { fill: #242422; stroke: rgba(255, 255, 255, .25); }
.pf-n text, .pf-note { font: 15px var(--f); text-anchor: middle; fill: rgba(255, 255, 255, .85); }
.pf-stuck { fill: none; stroke: #ff4d3d; stroke-width: 2; stroke-dasharray: 6 6; opacity: 0; transition: opacity .5s 1.2s; }
.pf-note { fill: #ff8a80; font-style: italic; opacity: 0; transition: opacity .5s 1.4s; }
.pr-stage[data-phase="2"] .pf-p { stroke-dashoffset: 0; }
.pr-stage[data-phase="2"] .pf-stuck, .pr-stage[data-phase="2"] .pf-note { opacity: 1; }

/* 3, 5, 6 · one work screen with real words in it: grey type and empty
   boxes as a wireframe, then the visual layer goes on (colour, type,
   components) and the system it comes from sits beside it */
.pr-app {
  left: 6cqw; right: 6cqw; top: 5cqw; padding: 2.4cqw 2.6cqw 2.8cqw; border-radius: 1.8cqw; background: #fbfaf7;
  font-family: var(--f); color: #1d1c18; transform-origin: 0 0;
  box-shadow: 0 2cqw 5cqw -1.5cqw rgba(0, 0, 0, .7); transform: translateY(2.5cqw);
}
.pr-app p, .pr-app b, .pr-app span { transition: color .7s var(--ease); }
.pa-top { position: relative; display: flex; align-items: center; gap: 2.4cqw; padding-bottom: 2.2cqw; border-bottom: 1px solid #ebe8e0; }
.pa-logo { flex: none; width: 3cqw; aspect-ratio: 1; border-radius: .9cqw; background: #ff6a3d; }
.pa-nav { display: flex; gap: 2.2cqw; align-items: center; font-size: max(9px, 1.35cqw); color: #8a867b; }
.pa-nav b { font-weight: 600; color: #1d1c18; }
.pa-saved { margin-left: auto; font-size: max(9px, 1.2cqw); color: #8a867b; }
.pa-av { flex: none; display: grid; place-items: center; width: 3.2cqw; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-size: max(8px, 1.1cqw); font-weight: 600; color: #fff; background: #7aa8ff; }
.pa-hero { padding: 3.2cqw 0 3cqw; }
.pa-eyebrow { font-size: max(9px, 1.2cqw); color: #8a867b; }
.pa-title { margin-top: 1cqw; font: 600 max(16px, 3.6cqw)/1.05 var(--fh); letter-spacing: -.01em; }
.pa-sub { margin-top: 1.1cqw; font-size: max(10px, 1.45cqw); color: #6b675e; }
.pa-btns { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.pa-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 4.4cqw; padding: 0 2.2cqw; border-radius: 1.1cqw; font-size: max(10px, 1.4cqw); font-weight: 600; box-shadow: inset 0 0 0 1px #d8d5cc; }
.pa-btn.is-main { background: #ff6a3d; box-shadow: none; }
.pa-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.pa-card { min-width: 0; display: flex; flex-direction: column; padding: 1.2cqw 1.2cqw 1.4cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0 0 1px #ece9e1; }
.pa-img { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 1.2cqw; overflow: hidden; border-radius: .9cqw; }
.pa-img svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #1d1c18; stroke-width: 1.6; stroke-linecap: round; }
.pa-img.is-plan { background: #fff1ea; }
.pa-door { stroke-dasharray: 2 3; }
.pa-img.is-po { background: #eef3ff; }
.pa-bar { fill: #c9d7f7; stroke: none; } .pa-bar.is-po { fill: #7aa8ff; } .pa-bar.is-paid { fill: #a9c4fb; }
.pa-over { fill: #ff6a3d; stroke: none; }
.pa-limit { stroke-dasharray: 4 3; stroke-width: 1.2; }
.pa-img.is-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #fff; }
.pa-img.is-photos i { background: linear-gradient(160deg, var(--a), var(--b)); }
.pa-img.is-photos i:nth-child(1) { --a: #d9cdb8; --b: #a8957a; } .pa-img.is-photos i:nth-child(2) { --a: #c3ccd6; --b: #8794a3; }
.pa-img.is-photos i:nth-child(3) { --a: #b7d0e8; --b: #e3d6c1; } .pa-img.is-photos i:nth-child(4) { --a: #cfc6b8; --b: #8f8a7e; }
.pa-name { overflow: hidden; font-size: max(10px, 1.45cqw); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pa-info { margin-top: .5cqw; font-size: max(9px, 1.2cqw); color: #8a867b; }
.pa-meta { display: flex; align-items: center; gap: .7cqw; margin-top: 1.4cqw; font-size: max(9px, 1.2cqw); color: #6b675e; }
.pa-dot { flex: none; display: grid; place-items: center; width: 2.2cqw; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-size: max(7px, 1cqw); font-weight: 600; color: #1d1c18; background: #efede6; }
.pa-chip { margin-left: auto; padding: .45cqw 1cqw; border-radius: 99px; font-size: max(8px, 1.1cqw); font-weight: 500; white-space: nowrap; color: #5f5b52; background: #efede6; }
.pa-chip.is-you { color: #a63e17; background: #ffe1d3; }
.pa-chip.is-info { color: #2f5fc4; background: #e3edff; }
.pr-app, .pr-app * { transition: background-color .7s var(--ease), box-shadow .7s var(--ease), color .7s var(--ease); }
/* the wireframe: the same words in one grey, outlines, no colour or display type */
.pr-stage[data-phase="3"] .pr-app, .pr-stage[data-phase="3"] .pa-nav b, .pr-stage[data-phase="3"] .pa-sub,
.pr-stage[data-phase="3"] .pa-meta, .pr-stage[data-phase="3"] .pa-btn { color: #8f8c84; }
.pr-stage[data-phase="3"] .pa-title { font-family: var(--f); font-weight: 500; letter-spacing: -.02em; color: #8f8c84; }
.pr-stage[data-phase="3"] .pa-eyebrow, .pr-stage[data-phase="3"] .pa-nav, .pr-stage[data-phase="3"] .pa-saved,
.pr-stage[data-phase="3"] .pa-info { color: #b3b0a7; }
.pr-stage[data-phase="3"] .pa-logo, .pr-stage[data-phase="3"] .pa-av, .pr-stage[data-phase="3"] .pa-dot { color: #fbfaf7; background: #dcd9d1; }
.pr-stage[data-phase="3"] .pa-img { background: linear-gradient(to top right, transparent calc(50% - .6px), #dcd9d1 50%, transparent calc(50% + .6px)), linear-gradient(to bottom right, transparent calc(50% - .6px), #dcd9d1 50%, transparent calc(50% + .6px)), #f4f2ec; box-shadow: inset 0 0 0 1px #dcd9d1; }
.pr-stage[data-phase="3"] .pa-img > * { opacity: 0; }
.pr-stage[data-phase="3"] .pa-chip { color: #8f8c84; background: transparent; box-shadow: inset 0 0 0 1px #d2cfc6; }
.pr-stage[data-phase="3"] .pa-btn.is-main { background: transparent; box-shadow: inset 0 0 0 1.5px #b9b6ad; }
.pr-stage[data-phase="3"] .pa-card { box-shadow: inset 0 0 0 1px #e4e1d9; }
/* make it real: the screen steps back and the system it's built from sits beside it */
.pr-stage[data-phase="5"] .pr-app { transform: translate(-3cqw, 14cqw) scale(.72); }
.pr-kit {
  right: 3cqw; top: 50%; translate: 0 -50%; width: 27cqw; padding: 2cqw 2cqw 2.2cqw; border-radius: 1.6cqw; background: #1c1c1a; color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 2.5cqw 5cqw -1cqw rgba(0, 0, 0, .7); transform: translateX(3cqw);
}
.pr-stage[data-phase="5"] .pr-kit { transition-delay: .35s; }
.pk-k { font: max(10px, 1.3cqw)/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .5); }
.pk-h { margin: 2cqw 0 1cqw; padding-top: 1.4cqw; border-top: 1px solid rgba(255, 255, 255, .08); font-size: max(9px, 1.1cqw); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.pk-sw { display: flex; flex-direction: column; gap: .7cqw; }
.pk-sw li { display: flex; align-items: center; gap: 1cqw; font-size: max(10px, 1.3cqw); color: rgba(255, 255, 255, .85); }
.pk-sw i { flex: none; width: 2.4cqw; aspect-ratio: 1; border-radius: .6cqw; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.pk-sw em, .pk-t em { margin-left: auto; font: max(9px, 1.1cqw)/1 ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; color: rgba(255, 255, 255, .42); }
.pk-t { display: flex; align-items: baseline; gap: 1cqw; }
.pk-t + .pk-t { margin-top: 1cqw; }
.pk-t.is-d { font: 600 max(15px, 2.4cqw)/1 var(--fh); }
.pk-t.is-b { font: 400 max(11px, 1.5cqw)/1 var(--f); }
.pk-t.is-l { font: 500 max(10px, 1.2cqw)/1 var(--f); color: rgba(255, 255, 255, .8); }
.pk-comp { display: flex; flex-wrap: wrap; align-items: center; gap: .8cqw; }
.pk-btn { padding: .9cqw 1.5cqw; border-radius: 1.1cqw; font-size: max(10px, 1.3cqw); font-weight: 600; color: #1d1c18; background: #ff6a3d; }
.pk-chip { padding: .45cqw 1cqw; border-radius: 99px; font-size: max(9px, 1.1cqw); font-weight: 500; color: #a63e17; background: #ffe1d3; }
.pk-foot { margin-top: 1.6cqw; white-space: nowrap; font: max(9px, 1.1cqw)/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .42); }
/* a small canvas (tablet widths): swatches only, so the panel still fits */
@container (max-width: 560px) {
  .pk-sw { flex-direction: row; gap: 1cqw; }
  .pk-sw li { font-size: 0; }
  .pk-sw i { width: 3.6cqw; }
  .pk-sw em, .pk-foot { display: none; }
}

/* 4 · every state */
.pr-states { inset: 5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; transform: scale(.96); }
.ps { display: flex; flex-direction: column; min-height: 0; }
.ps-k { margin-bottom: 1cqw; font: max(10px, 1.35cqw)/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .55); }
.ps-box { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; padding: 2cqw; border-radius: 1.6cqw; text-align: center; background: #fbfaf7; color: #1d1c18; font-size: max(10px, 1.45cqw); }
.ps-box b { font-size: max(12px, 1.8cqw); font-weight: 600; }
.ps-box span { color: #8a867b; line-height: 1.35; max-width: 28cqw; }
.ps-ico { width: 5cqw; aspect-ratio: 1; border-radius: 50%; background: #efede6; box-shadow: inset 0 0 0 1px #e2dfd6; }
.ps-ico.is-err { background: #fde6e3; box-shadow: inset 0 0 0 1px #f6c2bb; }
.ps-ico.is-ok { background: #e2f4e8; box-shadow: inset 0 0 0 1px #bfe5cb; }
.ps-btn { margin-top: .6cqw; padding: .8cqw 1.8cqw; border-radius: .9cqw; color: #fff !important; background: #1d1c18; }
.ps-box.is-load { align-items: stretch; gap: 1.6cqw; padding: 3cqw; }
.ps-box.is-load i { height: 2.4cqw; border-radius: .6cqw; background: linear-gradient(90deg, #ecebe6 0%, #f7f6f2 50%, #ecebe6 100%) 0 0 / 200% 100%; }
.ps-box.is-load i:nth-child(2) { width: 80%; } .ps-box.is-load i:nth-child(3) { width: 60%; }
.pr-stage[data-phase="4"] .ps-box.is-load i { animation: prShimmer 1.4s linear infinite; }
@keyframes prShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* 6 · handoff: measurements, the component in code, an edge case talked through */
.rl { position: absolute; z-index: 2; display: block; background: #ff3d8b; opacity: 0; transition: opacity .4s; pointer-events: none; }
.rl b { position: absolute; padding: .2cqw .6cqw; border-radius: .4cqw; font: 600 max(9px, 1.2cqw)/1.2 var(--f); color: #fff; background: #ff3d8b; white-space: nowrap; }
.rl-pad { left: -2.6cqw; top: 1.5cqw; width: 2.6cqw; height: 1px; } .rl-pad b { left: 50%; bottom: .5cqw; translate: -50% 0; }
.rl-gap { left: calc((100% - 3.2cqw) / 3); top: 40%; width: 1.6cqw; height: 1px; } .rl-gap b { left: 50%; bottom: .5cqw; translate: -50% 0; }
.rl-h { left: -1.2cqw; top: 0; bottom: 0; width: 1px; } .rl-h b { right: .7cqw; top: 50%; translate: 0 -50%; }
.pr-stage[data-phase="6"] .rl { opacity: 1; transition-delay: .5s; }
.pr-code { left: 44cqw; right: 4cqw; bottom: 4cqw; padding: 1.4cqw 2cqw 2cqw; border-radius: 1.4cqw; background: #0d0f14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 2cqw 4cqw -1cqw rgba(0, 0, 0, .7); transform: translateY(3cqw); }
.pr-code p { margin-bottom: 1cqw; font: max(10px, 1.3cqw)/1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .45); }
.pr-code code { font: max(11px, 1.6cqw)/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .75); }
.pr-code b { font-weight: 400; color: #8fb8ff; } .pr-code q { quotes: none; color: #b5e3a1; } .pr-code u { text-decoration: none; color: #f7c983; }
.pr-pin { left: 4cqw; bottom: 4cqw; width: 37cqw; display: flex; flex-direction: column; gap: 1cqw; transform: translateY(3cqw); transition-delay: .1s; }
.pr-pin p { display: flex; gap: 1cqw; align-items: flex-start; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; font-size: max(11px, 1.5cqw); line-height: 1.35; color: #1d1c18; background: #fff; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .6); }
.pr-pin i { flex: none; display: grid; place-items: center; width: 2.8cqw; aspect-ratio: 1; border-radius: 50%; font-style: normal; font-weight: 700; font-size: max(9px, 1.3cqw); color: #fff; background: var(--c); }
.pr-ship { right: 4cqw; top: 3.4cqw; padding: .8cqw 1.8cqw; border-radius: 99px; font-size: max(11px, 1.5cqw); font-weight: 600; color: #0f2a17; background: #8fe0a8; transform: scale(.6) rotate(-6deg); }
.pr-stage[data-phase="6"] .pr-ship { transform: rotate(-6deg); transition-delay: .7s; }
.pr-stage[data-phase="6"] .pr-app { transform: translateY(-1.5cqw); }

@media (prefers-reduced-motion: reduce) {
  .pr-canvas *, .pr-canvas > * { transition: none !important; animation: none !important; }
  .pf-p { stroke-dashoffset: 0; } .pf-stuck, .pf-note { opacity: 1; }
}
.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--gut); margin-top: 10vh; padding-top: 16px; border-top: 1px solid var(--line); }
.kit-title { font-size: 13px; color: var(--dim); }
.kit dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); }
.kit dt { font-size: 13px; color: var(--dim); }
.kit dd { margin-top: 8px; font-size: 15.5px; line-height: 1.45; }

/* ============ experience ============ */
.exp { position: relative; background: var(--deep); }
.exp-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding: calc(var(--hd-h) + 7vh) 0 5vh; }
.exp-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 0 var(--gut); }
.exp-head > div { width: min(640px, 55vw); }
.exp-head .h2 { margin-top: 4vh; font-size: clamp(44px, 6.4vw, 120px); }
.exp-cv { white-space: nowrap; }
.exp-track { display: flex; align-items: stretch; width: max-content; padding: 7vh 26vw 0 calc(var(--gut) + 7vw); will-change: transform; }
.stop { flex: none; width: clamp(300px, 27vw, 440px); display: flex; flex-direction: column; justify-content: flex-end; gap: 3vh; padding: 0 2.4vw 0 1.6vw; border-left: 1px solid var(--line); }
.stop.stop--long { width: calc(clamp(72px, 8vw, 150px) * 4.3 + 4vw); }
.stop-year { font-size: clamp(72px, 8vw, 150px); font-weight: 300; line-height: .8; letter-spacing: -.065em; white-space: nowrap; color: var(--faint); font-variant-numeric: tabular-nums; transition: color .9s var(--ease); }
.stop.is-center .stop-year { color: var(--fg); }
.stop-when { font-size: 12.5px; color: var(--dim); }
.stop h3 { margin-top: 10px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.stop-org { margin-top: 6px; font-size: 14.5px; color: var(--dim); }
.stop-desc { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.stop-desc b { color: var(--fg); }
.now { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 1px 8px; border: 1px solid var(--line2); font-size: 11.5px; color: var(--fg); vertical-align: 1px; }
/* the bar follows the stops with room to breathe, however tall they run */
.exp-bar { align-self: start; margin: 5vh var(--gut) 0; height: 1px; background: var(--line); }
.exp-bar i { display: block; height: 100%; background: var(--fg); transform-origin: 0 0; transform: scaleX(0); }
.exp.is-static .exp-pin { position: relative; height: auto; padding: 18vh 0 14vh; display: block; }
.exp.is-static .exp-track { flex-wrap: wrap; width: auto; padding: 8vh var(--gut) 0; row-gap: 9vh; transform: none !important; }
.exp.is-static .exp-bar { display: none; }
.exp.is-static .stop-year { color: var(--fg); }

/* ============ side projects ============ */
.side { position: relative; padding: 22vh var(--gut) 24vh; background: var(--bg); overflow: clip; }
.side-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
.side-head .label, .side-head .h2 { grid-column: 1 / -1; }
.side-head .h2 { margin-top: 5vh; }
.side-sub { grid-column: 8 / -1; margin-top: 5vh; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
/* the desktop: menu bar, windows, a widget and the dock, all placed in the
   desktop's own width (cqw) so the whole Mac scales as one. The wallpaper's
   glow takes the colour of the app in front.
   No backdrop blur anywhere on it: the wallpaper is a smooth gradient, so blur
   looked the same, and any one blurred bar made the browser redraw the whole
   desktop off screen on every frame of a scroll, which made it stutter. */
@property --tc { syntax: '<color>'; inherits: true; initial-value: #b8501c; }
.mac {
  --bar: max(24px, 2.2cqw);
  /* nearly edge to edge: it breaks out of the page's margins, but never taller
     than the window minus the header, so the menu bar and the dock both show */
  position: relative; left: 50%; translate: -50% 0; margin-top: 12vh;
  width: min(calc(100vw - 2 * max(12px, 1.2vw)), calc((100vh - var(--hd-h) - 24px) * 16 / 9.6));
  width: min(calc(100vw - 2 * max(12px, 1.2vw)), calc((100svh - var(--hd-h) - 24px) * 16 / 9.6)); aspect-ratio: 16 / 9.6; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  border-radius: clamp(16px, 1.6vw, 28px);
  background:
    radial-gradient(55% 70% at 72% 28%, color-mix(in srgb, var(--tc) 62%, transparent) 0%, transparent 72%),
    radial-gradient(50% 60% at 12% 92%, color-mix(in srgb, var(--tc) 34%, #2a2140) 0%, transparent 70%),
    linear-gradient(160deg, #1b1824 0%, #0c0b11 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  transition: --tc 1.4s var(--ease);
  font-family: -apple-system, BlinkMacSystemFont, var(--f);
  color: #fff;
}
.mac-bar {
  position: absolute; z-index: 200; top: 0; left: 0; right: 0; height: var(--bar);
  display: flex; align-items: center; gap: max(14px, 1.3cqw); padding: 0 max(12px, 1.2cqw);
  font-size: max(11px, .86cqw); line-height: 1; white-space: nowrap;
  background: rgba(8, 8, 12, .38);
}
.mac-mark { width: max(9px, .7cqw); aspect-ratio: 1; background: #fff; }
.mac-app { font-weight: 700; }
.mac-menus { display: flex; gap: max(14px, 1.3cqw); color: rgba(255, 255, 255, .86); }
.mac-extras { display: flex; align-items: center; gap: max(6px, .5cqw); margin-left: auto; }
.mx { display: grid; place-items: center; height: calc(var(--bar) - 6px); padding: 0 max(4px, .35cqw); border-radius: 5px; }
.mx.is-on, .mx:hover { background: rgba(255, 255, 255, .2); }
.mx-ico { display: grid; place-items: center; width: max(15px, 1.2cqw); aspect-ratio: 1; overflow: hidden; border-radius: 26%; background: var(--tile); font-size: max(9px, .7cqw); font-weight: 600; }
.mx-ico img, .dk-ico img, .mi-ico img { width: 100%; height: 100%; object-fit: cover; }
.mx-ico.pad img, .dk-ico.pad img, .mi-ico.pad img { width: 72%; height: 72%; object-fit: contain; }
.mac-bat { position: relative; width: max(20px, 1.6cqw); height: max(10px, .76cqw); border: 1px solid rgba(255, 255, 255, .75); border-radius: 3px; }
.mac-bat::before { content: ''; position: absolute; inset: 1.5px 28% 1.5px 1.5px; border-radius: 1px; background: #fff; }
.mac-clock { font-variant-numeric: tabular-nums; }

.mac-desk { position: absolute; top: var(--bar); left: 0; right: 0; bottom: 0; }
/* windows */
.mwin {
  position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw);
  visibility: hidden; cursor: grab; user-select: none; -webkit-user-select: none;
  filter: brightness(.72) saturate(.85);
  transition: filter .5s var(--ease), left .85s var(--ease), top .85s var(--ease), width .85s var(--ease), translate .85s var(--ease);
}
/* the app in front takes the stage: as big as fits between the widget and the edge, above the dock */
@media (min-width: 761px) {
  .mwin.is-front { left: calc(var(--fx) * 1cqw); top: calc(var(--fy) * 1cqw); width: calc(var(--fw) * 1cqw); }
}
.mwin.is-open { visibility: visible; }
.mwin.is-front { filter: none; }
.mwin.is-drag { cursor: grabbing; transition: filter .5s var(--ease); }
.mwin-shot {
  overflow: hidden; border-radius: .9cqw;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 1cqw 2cqw -.6cqw rgba(0, 0, 0, .5), 0 3cqw 6cqw -1.5cqw rgba(0, 0, 0, .55);
}
.mwin.is-front .mwin-shot { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 1.4cqw 2.6cqw -.6cqw rgba(0, 0, 0, .55), 0 4.5cqw 8cqw -2cqw rgba(0, 0, 0, .7); }
.mwin-shot img { display: block; width: 100%; height: auto; pointer-events: none; }
.mwin-attach { position: absolute; right: -4cqw; top: 3.5cqw; width: 15cqw; border-radius: .9cqw; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 2.5cqw 5cqw -1cqw rgba(0, 0, 0, .7); }
.mwin-min {
  position: absolute; top: .7cqw; right: .7cqw; width: max(22px, 1.7cqw); aspect-ratio: 1; border-radius: 50%;
  background: rgba(20, 20, 24, .85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); opacity: 0; transition: opacity .25s;
}
.mwin-min::before { content: ''; position: absolute; left: 30%; right: 30%; top: 50%; height: 1.5px; margin-top: -.75px; background: #fff; }
.mwin:hover .mwin-min, .mwin-min:focus-visible { opacity: 1; }
/* menu-bar panels */
.mpop {
  position: absolute; z-index: 150; top: .5cqw; width: calc(var(--w) * 1cqw);
  overflow: hidden; border-radius: 1cqw;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 3cqw 6cqw -1.5cqw rgba(0, 0, 0, .7);
  visibility: hidden; opacity: 0; transform: translateY(-.6cqw) scale(.97); transform-origin: top right;
  transition: opacity .25s, transform .4s var(--ease), visibility 0s .4s;
}
.mpop.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .5s var(--ease); }
.mpop img { display: block; width: 100%; height: auto; }

/* the widget: what the app in front is */
.mac-info {
  position: absolute; z-index: 120; left: 1.8cqw; top: 1.8cqw; width: 18.5cqw;
  padding: 1.6cqw; border-radius: 1.6cqw;
  /* the wallpaper's own colour, mostly opaque, so a window behind it still reads as frosted */
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)), rgba(27, 24, 36, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2cqw 4cqw -2cqw rgba(0, 0, 0, .5);
}
.mi-ico { display: grid; place-items: center; width: max(40px, 3.4cqw); aspect-ratio: 1; overflow: hidden; border-radius: 22%; background: var(--tile); font-size: max(18px, 1.5cqw); }
.mi-name { margin-top: 1.4cqw; font-family: var(--fh); font-size: max(22px, 2.2cqw); font-weight: 400; line-height: 1; letter-spacing: -.01em; }
.mi-kind { display: flex; align-items: center; gap: 8px; margin-top: .8cqw; font-size: max(12px, .9cqw); color: rgba(255, 255, 255, .7); }
.mac-info.is-off .mi-kind .sq { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.mi-line { margin-top: 1.2cqw; font-size: max(13px, 1.04cqw); line-height: 1.45; color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.mi-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.4cqw; font-size: max(12px, .92cqw); font-weight: 500; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; }
.mi-link .ic { width: 12px; height: 12px; }
.mi-link.is-off { background: none; color: rgba(255, 255, 255, .6); font-weight: 400; }

/* the dock */
.mac-dock {
  position: absolute; z-index: 180; left: 50%; bottom: 1.1cqw; translate: -50% 0;
  display: flex; align-items: flex-end; gap: .7cqw; padding: .7cqw .8cqw;
  border-radius: 1.6cqw;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1.5cqw 3cqw -1cqw rgba(0, 0, 0, .5);
}
.dk { position: relative; width: max(30px, 3.6cqw); aspect-ratio: 1; transform-origin: 50% 100%; transform: translateY(calc((1 - var(--s, 1)) * 1.2cqw)) scale(var(--s, 1)); transition: transform .18s ease-out; }
.dk-ico { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 23%; background: var(--tile); color: #fff; font-size: max(14px, 1.5cqw); font-weight: 500; box-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .35); }
.dk.is-off .dk-ico { filter: saturate(.55) brightness(.85); }
.dk::after { content: ''; position: absolute; left: 50%; bottom: -.5cqw; width: max(4px, .32cqw); aspect-ratio: 1; margin-left: max(-2px, -.16cqw); border-radius: 50%; background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .3s; }
.dk.is-run::after { opacity: 1; }
.dk-tip {
  position: absolute; left: 50%; bottom: calc(100% + .9cqw); translate: -50% 0; padding: .35cqw .7cqw; border-radius: .5cqw;
  font-size: max(11px, .82cqw); white-space: nowrap; background: rgba(30, 30, 34, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.dk:hover .dk-tip, .dk:focus-visible .dk-tip { opacity: 1; }
.dk-sep { align-self: stretch; width: 1px; margin: .3cqw .2cqw; background: rgba(255, 255, 255, .25); }
.mac-hint { position: relative; left: 50%; translate: -50% 0; margin-top: 18px;
  width: min(calc(100vw - 2 * max(12px, 1.2vw)), calc((100vh - var(--hd-h) - 24px) * 16 / 9.6));
  width: min(calc(100vw - 2 * max(12px, 1.2vw)), calc((100svh - var(--hd-h) - 24px) * 16 / 9.6)); font-size: 13px; color: var(--dim); }
.mac-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .mac-hint-fine { display: none; } .mac-hint-touch { display: inline; } }
@media (pointer: fine) { .mwin { touch-action: none; } }

/* the docked preview: it lives in its own column beside the work list and
   only appears where there's a pointer to drive it */
.pane { display: none; position: relative; }
.pane-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border-radius: clamp(14px, 1.8vw, 30px); background: #161614; }
.pane-shot { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 4%; opacity: 0; transition: opacity .6s var(--ease); }
.pane-shot.on { opacity: 1; }
.pane-shot.is-phones { gap: 5%; }
.pane-shot.is-phones .phone { flex: none; width: 24%; transform: translateY(14px); transition: transform 1.4s var(--ease); }
.pane-shot.is-phones .phone:nth-child(2) { transition-delay: 60ms; }
.pane-shot.is-phones .phone:nth-child(3) { transition-delay: 120ms; }
.pane-shot.is-phones.on .phone { transform: none; }
.pane-shot { container-type: size; background: var(--tile-bg, transparent); }
.pane-shot .win { translate: 0 12px; transition: translate 1.4s var(--ease); }
.pane-shot.on .win { translate: none; }
.pane-shot .win { left: 8cqw; top: 12cqh; width: 104cqw; }
.pane-cap { position: absolute; top: 100%; left: 0; right: 0; margin-top: 12px; line-height: 18px; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
  .pane { display: block; }
  .work-index { grid-row: 3 / span 2; }
  .work-pane { grid-column: 1 / 6; grid-row: 4; align-self: end; margin-top: 36px; }
}

/* ============ outside work ============ */
.mood { position: relative; padding: 22vh 0 20vh; background: var(--deep); overflow: clip; }
.mood-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; padding: 0 var(--gut); }
.mood-head .label, .mood-head .h2 { grid-column: 1 / -1; }
.mood-head .h2 { margin-top: 5vh; }
.mood-sub { grid-column: 8 / -1; margin-top: 5vh; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
.reel { display: flex; gap: 18px; width: max-content; padding: 0 var(--gut); will-change: transform; }
.reel + .reel { margin-top: 18px; }
#reel-a { margin-top: 12vh; }
.card { position: relative; flex: none; width: clamp(200px, 16.5vw, 270px); aspect-ratio: 3 / 4.6; perspective: 1200px; cursor: pointer; }
/* below 1280 the clamp bottoms out at 200px, too short for the longer backs */
@media (min-width: 761px) and (max-width: 1279px) { .card { width: 236px; } }
.card-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.card.is-flipped .card-in { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 10px 10px 0; background: #171716; border: 1px solid var(--line); transition: border-color .6s; }
.card:hover .card-face { border-color: var(--line2); }
.card-art { aspect-ratio: 3 / 4; overflow: hidden; background: #222; }
.card-art svg { width: 100%; height: 100%; pointer-events: none; filter: grayscale(1) contrast(1.04) brightness(.86); transform: scale(1.02); transition: filter 1s var(--ease), transform 1.4s var(--ease); }
.card:hover .card-art svg, .card:focus-visible .card-art svg { filter: none; transform: scale(1.06); }
.card-t { margin-top: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 400; letter-spacing: -.01em; }
.card-m { margin-top: 2px; overflow: hidden; font-size: 11.5px; color: var(--dim); white-space: nowrap; text-overflow: ellipsis; }
.card-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; overflow: hidden; background: #1c1c1a; }
.card-back .card-k { font-size: 11.5px; color: var(--dim); }
.card-back .card-k + p { margin-bottom: 8px; }
.card-scene { font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
.card-lesson { font-size: 13px; line-height: 1.5; color: #cfcdc6; }
.card-back .card-sig { margin-top: auto; font-size: 11.5px; color: var(--dim); }

/* card illustrations only animate while their section is on screen */
.card-art svg * { animation-play-state: paused !important; }
.mood.is-live .card-art svg * { animation-play-state: running !important; }
.card-art .a-spin { animation: a-spin 14s linear infinite; }
.card-art .a-wob { animation: a-wob 1.6s ease-in-out infinite; }
.card-art .a-wob.d2 { animation-delay: -.4s; }
.card-art .a-wob.d3 { animation-delay: -.8s; }
.card-art .a-sub { animation: a-sub 3s steps(6) infinite; transform-box: fill-box; transform-origin: left center; }
.card-art .a-drum { animation: a-spin 3.2s linear infinite; }
.card-art .a-pulse { animation: a-pulse 2.2s ease-out infinite; }
.card-art .a-pulse.d2 { animation-delay: .3s; }
.card-art .a-pulse.d3 { animation-delay: .6s; }
.card-art .a-skip { animation: a-skip 3.4s cubic-bezier(.3, .6, .6, 1) infinite; }
.card-art .a-ripple { animation: a-ripple 3.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.card-art .a-ripple.d2 { animation-delay: .9s; }
.card-art .a-ripple.d3 { animation-delay: 1.6s; }
.card-art .a-ripple.d4 { animation-delay: 2.1s; }
.card-art .a-funi { animation: a-funi 6s var(--ease-io) infinite alternate; }
.card-art .a-flicker { animation: a-flicker 3s ease-in-out infinite; }
.card-art .a-streak { animation: a-streak 3.8s linear infinite; }
.card-art .a-streak.d2 { animation-delay: 1.7s; }
.card-art .a-train { animation: a-train 9s linear infinite; }
.card-art .a-trail { animation: a-trail 1.2s ease-in-out infinite alternate; }
.card-art .a-t25 { animation: a-blink 2.4s steps(1) infinite; }
.card-art .a-t26 { animation: a-blink 2.4s steps(1) infinite reverse; }
.card-art .a-p1 { animation: a-p1 4.5s steps(1) infinite; }
.card-art .a-p2 { animation: a-p2 4.5s steps(1) infinite; }
.card-art .a-p3 { animation: a-p3 4.5s steps(1) infinite; }
.card-art .a-meter { animation: a-meter 4.5s var(--ease) infinite; }
.card-art .a-aura { animation: a-aura 4.5s ease-out infinite; }
.card-art .a-bloom { animation: a-bloom 5s var(--ease-back) infinite both; transform-box: fill-box; transform-origin: center; }
.card-art .a-glint { animation: a-glint 2.5s ease-in-out infinite; }
.card-art .a-comet { animation: a-comet 6s ease-in-out infinite alternate; }
.card-art .a-wave { animation: a-wave 3.6s linear infinite; }
.card-art .a-wave.d2 { animation-duration: 5.2s; animation-direction: reverse; }
.card-art .a-rattle { animation: a-rattle 3s ease-in-out infinite; }
.card-art .a-huh { animation: a-huh 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.card-art .a-coin { animation: a-coin 1.4s steps(2) infinite; }
.card-art .a-jump { animation: a-jump 1.4s steps(5) infinite; }
.card-art .a-shuffle { animation: a-shuffle 4s var(--ease-io) infinite alternate; }
.card-art .a-shuffle.d2 { animation-delay: -1.3s; }
.card-art .a-shuffle.d3 { animation-delay: -2.6s; }
.card-art .a-snip { animation: a-snip 5s linear infinite; }
.card-art .a-blade { animation: a-blade .5s ease-in-out infinite alternate; transform-origin: -4px 0; }
.card-art .a-blade.b { animation-name: a-blade-b; }
.card-art .a-fall { animation: a-fall 4s linear infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-wob { 0% { transform: translate(1.6px, 0); } 25% { transform: translate(0, 1.6px); } 50% { transform: translate(-1.6px, 0); } 75% { transform: translate(0, -1.6px); } 100% { transform: translate(1.6px, 0); } }
@keyframes a-sub { from { transform: scaleX(.1); } to { transform: scaleX(1); } }
@keyframes a-pulse { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
@keyframes a-skip { 0% { offset-distance: 0%; opacity: 1; } 92% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes a-ripple { 0%, 8% { transform: scale(.2); opacity: 0; } 12% { opacity: .9; } 40% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes a-funi { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes a-flicker { 0%, 100% { opacity: .1; } 45% { opacity: .16; } 50% { opacity: .08; } 55% { opacity: .15; } }
@keyframes a-streak { from { transform: translateX(0); } to { transform: translateX(420px); } }
@keyframes a-train { from { transform: translateX(-160px); } to { transform: translateX(320px); } }
@keyframes a-trail { from { transform: scaleX(.75); opacity: .7; } to { transform: scaleX(1.05); opacity: 1; } }
@keyframes a-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes a-p1 { 0% { opacity: 1; } 33% { opacity: 0; } }
@keyframes a-p2 { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } }
@keyframes a-p3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@keyframes a-meter { 0% { transform: scaleX(.37); } 33% { transform: scaleX(.71); } 66%, 100% { transform: scaleX(1); } }
@keyframes a-aura { 0%, 66% { opacity: 0; transform: scale(.9); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes a-bloom { 0% { transform: scale(0); } 12%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes a-glint { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes a-comet { from { transform: translate(18px, 12px); } to { transform: translate(-14px, -8px); } }
@keyframes a-wave { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes a-rattle { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-1.4deg); } 68% { transform: rotate(1deg); } 72% { transform: rotate(-1deg); } 76% { transform: rotate(.6deg); } 80% { transform: rotate(0); } }
@keyframes a-huh { 0%, 60% { opacity: 0; transform: scale(.5); } 70%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes a-coin { 50% { opacity: .3; } }
@keyframes a-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-34px); } }
@keyframes a-shuffle { from { transform: rotate(-4deg) translate(-3px, 2px); } to { transform: rotate(4deg) translate(3px, -2px); } }
@keyframes a-snip { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes a-blade { from { transform: rotate(0); } to { transform: rotate(12deg); } }
@keyframes a-blade-b { from { transform: rotate(0); } to { transform: rotate(-12deg); } }
@keyframes a-fall { 0% { transform: translateY(-40px) rotate(var(--r)); } 100% { transform: translateY(420px) rotate(calc(var(--r) * -1)); } }


/* ============ contact ============ */
/* An invitation and a direct way to get in touch, followed by the practical details. */
.contact { position: relative; padding: 14vh var(--gut) 5vh; background: var(--bg); overflow: clip; }
.contact-intro { display: grid; grid-template-columns: 7fr 4fr; gap: var(--gut); align-items: end; margin-top: 10vh; }
.contact-title { font-size: clamp(62px, 7.5vw, 132px); font-weight: 300; line-height: .96; letter-spacing: -.06em; }
.contact-title > span { color: var(--dim); }
.contact-big { max-width: 34ch; padding-bottom: .3em; font-size: clamp(19px, 1.55vw, 25px); font-weight: 300; line-height: 1.4; letter-spacing: -.02em; color: var(--dim); text-wrap: pretty; }
.contact-reach { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gut); align-items: center; margin-top: 10vh; padding: 26px 0 28px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.contact-reach-label { font-size: 13px; line-height: 1.45; }
.contact-reach-label p + p { margin-top: 4px; color: var(--dim); }
.contact-reach-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; min-width: 0; }
.mail-address { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; font-size: clamp(24px, 3vw, 48px); font-weight: 300; line-height: 1.2; letter-spacing: -.045em; }
.mail-address-text { max-width: 100%; overflow-wrap: anywhere; }
.mail-address-hint { margin-top: 7px; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--dim); }
.mail-address .ic { width: .55em; height: .55em; margin-left: .5em; color: var(--dim); }
.mail-address:hover .ic { color: var(--fg); transform: translate(3px, -3px); }
.mail { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px; border: 1px solid var(--line2); font-size: 13px; line-height: 1.2; color: var(--fg); transition: border-color .4s, color .4s; }
.mail:hover { border-color: var(--fg); }
.mail .ic { margin: 0 8px 0 0; }
.mail.is-copied { color: var(--ok); border-color: var(--ok); }
.contact-facts { margin-top: 6vh; }
.contact-facts > div { padding-top: 0; border-top: 0; }
.contact-facts .status { font-size: inherit; color: var(--fg); }
.cf-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--dim); }
.cf-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-top { margin-left: auto; transition: color .4s; }
.foot-top:hover { color: var(--fg); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: 5vh; font-size: 12.5px; color: var(--dim); }

/* ============ motion: where things wait before they arrive ============
   Only when scripts run and motion is welcome. Elements return to these
   states when they drop below the screen, so they arrive again. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-in] { transition: transform 1.5s var(--ease) var(--d, 0ms), opacity 1.2s var(--ease) var(--d, 0ms), clip-path 1.6s var(--ease-io) var(--d, 0ms); }
  .js [data-in="left"]:not(.is-in) { transform: translate3d(-7vw, 0, 0); opacity: 0; }
  .js [data-in="right"]:not(.is-in) { transform: translate3d(7vw, 0, 0); opacity: 0; }
  .js [data-in="up"]:not(.is-in) { transform: translate3d(0, 9vh, 0); opacity: 0; }
  .js [data-in="down"]:not(.is-in) { transform: translate3d(0, -9vh, 0); opacity: 0; }
  .js [data-in="fade"]:not(.is-in) { opacity: 0; }
  .js [data-in="rule"] { transition: transform 1.8s var(--ease-io) var(--d, 0ms); }
  .js [data-in="rule"]:not(.is-in) { transform: scaleX(0); }

  /* curtains: the frame opens from one side while the image settles */
  .js [data-in^="curtain"] { clip-path: inset(0 0 0 0); }
  .js [data-in="curtain-l"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
  .js [data-in="curtain-r"]:not(.is-in) { clip-path: inset(0 0 0 100%); }
  .js [data-in="curtain-u"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
  .js [data-in="curtain-d"]:not(.is-in) { clip-path: inset(0 0 100% 0); }
  .js [data-in^="curtain"] img { transition: transform 2.2s var(--ease) var(--d, 0ms); }
  .js [data-in^="curtain"]:not(.is-in) img { transform: scale(1.18); }

  .js [data-in^="stagger"] > * { transition: transform 1.3s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 80ms), opacity 1s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 80ms); }
  .js [data-in="stagger-left"]:not(.is-in) > * { transform: translate3d(-5vw, 0, 0); opacity: 0; }
  .js [data-in="stagger-right"]:not(.is-in) > * { transform: translate3d(5vw, 0, 0); opacity: 0; }
  .js [data-in="stagger-up"]:not(.is-in) > * { transform: translate3d(0, 6vh, 0); opacity: 0; }

  /* lines rise from behind their own mask, one line after another */
  .js [data-in="lines"] .wd { display: inline-block; overflow: clip; padding: .08em .025em .22em; margin: -.08em -.025em -.22em; vertical-align: top; }
  .js [data-in="lines"] .wi { display: inline-block; transition: transform 1.4s var(--ease) calc(var(--d, 0ms) + var(--li, 0) * 110ms); }
  .js [data-in="lines"]:not(.is-in) .wi { transform: translate3d(0, 140%, 0); }
  .js [data-in="lines"] mark .wi { transition: transform 1.4s var(--ease) calc(var(--d, 0ms) + var(--li, 0) * 110ms), color 1.2s var(--ease) calc(var(--d, 0ms) + 700ms); }
  .js [data-in="lines"]:not(.is-in) mark .wi { color: inherit; }

  /* words and facts arrive quicker and travel less than pictures, so nobody waits to read */
  .js .label[data-in], .js .proj-meta[data-in], .js .status[data-in], .js .hero-where[data-in],
  .js p[data-in="up"], .js .proj-copy[data-in], .js a.more[data-in] { transition-duration: .9s, .7s, 1.6s; }
  .js .label[data-in="left"]:not(.is-in), .js .proj-meta[data-in="left"]:not(.is-in), .js .status[data-in="left"]:not(.is-in) { transform: translate3d(-2.5vw, 0, 0); }
  .js .proj-meta[data-in="right"]:not(.is-in), .js .hero-where[data-in="right"]:not(.is-in) { transform: translate3d(2.5vw, 0, 0); }
  .js p[data-in="up"]:not(.is-in), .js .proj-copy[data-in="up"]:not(.is-in), .js a.more[data-in="up"]:not(.is-in) { transform: translate3d(0, 3vh, 0); }
  .js dl[data-in^="stagger"] > *, .js ul[data-in^="stagger"] > *, .js ol[data-in^="stagger"] > * { transition-duration: .8s, .6s; transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 50ms); }
  .js dl[data-in="stagger-right"]:not(.is-in) > *, .js ul[data-in="stagger-right"]:not(.is-in) > *, .js ol[data-in="stagger-right"]:not(.is-in) > * { transform: translate3d(2vw, 0, 0); }
  .js dl[data-in="stagger-up"]:not(.is-in) > * { transform: translate3d(0, 2.5vh, 0); }
  .js [data-in="lines"] .wi { transition-duration: 1s; transition-delay: calc(var(--d, 0ms) + var(--li, 0) * 70ms); }
  .js [data-in="lines"] mark .wi { transition-duration: 1s, 1.2s; transition-delay: calc(var(--d, 0ms) + var(--li, 0) * 70ms), calc(var(--d, 0ms) + 500ms); }

  /* big type slides in sideways through its mask: odd lines from the left, even from the right */
  .js [data-in="lines-x"] .ln > span { transition: transform 1.6s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 120ms); }
  .js [data-in="lines-x"]:not(.is-in) .ln > span { transform: translate3d(-104%, 0, 0); }
  .js [data-in="lines-x"]:not(.is-in) .ln:nth-child(even) > span,
  .js [data-in="lines-x"][data-from="right"]:not(.is-in) .ln > span { transform: translate3d(104%, 0, 0); }

  .js [data-in="rail"] li::before { transition: transform 1.2s var(--ease-io) calc(var(--i, 0) * 120ms); }
  .js [data-in="rail"] li::after { transition: transform .8s var(--ease) calc(var(--i, 0) * 120ms + 300ms); }
  .js [data-in="rail"] li { transition: opacity 1s var(--ease) calc(var(--i, 0) * 120ms + 300ms), transform 1.2s var(--ease) calc(var(--i, 0) * 120ms + 300ms); }
  .js [data-in="rail"]:not(.is-in) li::before { transform: scaleX(0); }
  .js [data-in="rail"]:not(.is-in) li::after { transform: scale(0); }
  .js [data-in="rail"]:not(.is-in) li { opacity: 0; transform: translate3d(2vw, 0, 0); }

  /* the name: Srikant from the left, Mehra from the right */
  .js .nm-i { transition: transform 1.9s var(--ease); }
  .js .nm-2 .nm-i { transition-delay: .14s; }
  .js:not(.is-started) .nm-1 .nm-i { transform: translate3d(-104%, 0, 0); }
  .js:not(.is-started) .nm-2 .nm-i { transform: translate3d(104%, 0, 0); }

  .js .p5-fan:not(.is-open) .phone { transform: translateY(46vh); }
  .js [data-in][data-drift] { transition: none; will-change: transform; }
}

/* ============ tablet ============ */
@media (max-width: 1100px) {
  .hero-role { grid-column: 1 / 5; }
  .hero-lede { grid-column: 5 / -1; }
  .hero-links { grid-column: 1 / -1; justify-self: start; justify-items: start; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 5vh; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5vh; }
  .work-sub, .work-index { grid-column: 1 / -1; }
  .proj-copy { max-width: 46ch; }

  .p1-shot { grid-column: 1 / -1; }
  .p1-line { grid-column: 1 / -1; grid-row: 4; margin-top: 14vh; }
  .p1-copy { grid-column: 1 / 12; grid-row: 5; }
  .p1-facts { grid-column: 13 / 25; grid-row: 5; }
  .p1-comp { grid-column: 1 / 11; grid-row: 6; margin-top: 9vh; }

  .p2-shot { grid-column: 1 / -1; }
  .p2-guard { grid-column: 1 / -1; grid-row: 5; margin-top: 12vh; }
  .p2-line { grid-column: 1 / -1; grid-row: 6; }
  .p2-copy { grid-column: 1 / 12; grid-row: 7; }
  .p2-facts { grid-column: 13 / 25; grid-row: 7; }

  .p3-line { grid-column: 1 / -1; }
  .p3-copy { grid-column: 1 / 12; }
  .p3-facts { grid-column: 1 / 12; }
  .p3-shot { grid-column: 1 / -1; grid-row: 6; margin-top: 9vh; }

  .p4-left { grid-column: 1 / -1; }
  .p4-rack { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 10; }
  .p4-rack .phone { width: 20%; }

  .p5-line { grid-column: 1 / -1; }
  .p5-copy { grid-column: 1 / 12; }
  .p5-facts { grid-column: 13 / 25; }

  .p6-line { grid-column: 1 / -1; }
  .p6-copy { grid-column: 1 / 12; }
  .p6-facts { grid-column: 13 / 25; }

  .how-sub, .side-sub, .mood-sub { grid-column: 1 / -1; max-width: 56ch; }
  .pr-steps { grid-column: 1 / 6; }
  .pr-stage { grid-column: 6 / -1; }
  .pr-step h3 + p { font-size: 16px; }
  .kit { grid-template-columns: minmax(0, 1fr); row-gap: 3vh; }
  .kit dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3vh; }

  .stop { width: clamp(280px, 40vw, 420px); }


}

@media (max-width: 900px) {
  .contact-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ============ phone ============ */
@media (max-width: 760px) {
  :root { --hd-h: 56px; }
  body { font-size: 15px; }
  .hd { gap: 14px; font-size: 13.5px; }
  .hd-nav { gap: 16px; }
  .hd-wide { display: none !important; }

  .hero { padding-bottom: 12vh; }
  .hero-top { flex-wrap: wrap; row-gap: 8px; }
  .nm { font-size: 24vw; margin: 7vh 0 5vh; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); row-gap: 3vh; }
  .hero-role, .hero-lede, .hero-links { grid-column: 1 / -1; }
  .hero-lede { font-size: 21px; }
  .hero-links { margin-top: 1vh; }

  .h2 { font-size: 12.5vw; }
  .h2 .ln:nth-child(2) { padding-left: .67em; }
  .about { padding: 16vh var(--gut); }
  .about-big { font-size: 27px; }
  .about-facts { grid-template-columns: minmax(0, 1fr); margin-top: 9vh; row-gap: 3.5vh; }

  .work-head { padding: 16vh var(--gut) 12vh; }
  .work-index a { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .wi-kind { display: none; }

  .proj { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 14vh var(--gut) 14vh; row-gap: 0; }
  .proj > *, .p4-left > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .proj-name { font-size: 14vw; }
  .p6 .proj-name { font-size: 13vw; }
  .proj-line { margin-top: 10vh !important; font-size: 26px; }
  .proj-copy { margin-top: 5vh !important; }
  .facts { max-width: none; margin-top: 6vh !important; }
  .facts dl div { grid-template-columns: 92px minmax(0, 1fr); }
  .p1-shot, .p2-shot, .p6-shot { margin-top: 6vh !important; }
  /* on a phone the shots keep the desktop layout: the tile is as tall as the
     window, the window runs off the right edge, and the phone sits on the right
     at the window's full height (its width follows from the device's shape) */
  .p1-shot .shot-in, .p2-shot .shot-in, .p6-shot .shot-in { aspect-ratio: auto; }
  .p1-shot .win, .p2-shot .win, .p6-shot .win { position: relative; left: 0; top: 0; margin: 8cqw 0 8cqw 7cqw; width: 112cqw; padding: 1cqw; border-radius: 2.6cqw; }
  .p1-shot .win img, .p2-shot .win img, .p6-shot .win img { border-radius: 1.8cqw; }
  .p1-shot .p1-phone, .p2-shot .p2-phone, .p6-shot .p6-phone { left: auto; right: 6cqw; top: 8cqw; bottom: 8cqw; width: auto; min-height: 0; aspect-ratio: .4825; }
  /* each guardrail becomes a card, its options stacked and labelled */
  .gr-head { display: none; }
  .gr-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
  .gr-head + .gr-row { border-top: 0; padding-top: 0; }
  .gr-name { padding: 0 0 4px; }
  .gr-na { display: none; }
  .gr-c { flex-wrap: wrap; }
  .gr-o { display: block; flex: 1 0 calc(100% - 26px); font-size: 11.5px; font-weight: 500; color: var(--c); }
  .gr-t { flex: 1 0 100%; padding-left: 26px; margin-top: -4px; }

  .p2-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; margin-top: 6vh; }
  .p2-guard { margin-top: 9vh; }
  .p3-versus { grid-template-columns: 1fr 1fr; gap: 4vh 5vw; margin-top: 6vh; }
  .p3-year { grid-column: 1 / -1; font-size: 24vw; justify-self: start !important; }
  .p3-y2 { order: 4; }
  .p3-versus .phone { width: 100%; }
  .p3-b { margin-top: 0; }
  .p3-shot { margin-top: 8vh !important; }
  .p3-shot .shot-in { aspect-ratio: 1 / 1.02; }
  .p3-shot .phone { width: 29cqw; }
  .p3-shot .phone:nth-child(1) { left: 3.5cqw; top: 24cqw; }
  .p3-shot .phone:nth-child(2) { left: 35.5cqw; top: 10cqw; }
  .p3-shot .phone:nth-child(3) { left: 67.5cqw; top: 32cqw; }
  .p4-rack { margin-top: 8vh; aspect-ratio: 1 / .92; gap: 4.5%; }
  .p4-rack .phone { width: 28.5%; }
  .p5-score { grid-template-columns: 1fr; gap: 3vh; }
  .p5-score dd { font-size: 30vw; }
  .p5-fan { height: 60vh; }
  .p5-fan .phone { width: 36vw; margin-left: -18vw; }

  .how { padding: 16vh var(--gut); }
  /* the canvas sticks at the top; the steps scroll up under it */
  .pr { display: flex; flex-direction: column; margin-top: 8vh; }
  .pr-stage { order: -1; position: sticky; z-index: 2; top: var(--hd-h); padding: 10px 0 14px; background: var(--bg); }
  .pr-canvas { width: 100%; border-radius: 14px; }
  .pr-step { min-height: 50vh; justify-content: flex-start; padding-top: 6vh; }
  .pr-step:last-child { min-height: 60vh; }
  .pr-step h3 { font-size: 34px; }
  .pr-step h3 + p { font-size: 16px; }
  .kit dl { grid-template-columns: minmax(0, 1fr); }

  .exp-pin { position: relative; height: auto; padding: 16vh 0 12vh; display: block; }
  .exp-head { flex-direction: column; align-items: flex-start; gap: 3vh; }
  .exp-head > div { width: 100%; }
  .exp-track { flex-direction: column; width: auto; padding: 8vh var(--gut) 0; gap: 7vh; transform: none !important; }
  .stop, .stop.stop--long { width: auto; padding: 0 0 0 16px; }
  .stop-year { font-size: 22vw; }
  .stop--long .stop-year { font-size: min(22vw, calc((100vw - 2 * var(--gut) - 20px) / 4.3)); }
  .exp-bar { display: none; }

  .side { padding: 16vh var(--gut); }
  /* one app at a time: the widget on top, the window under it, the dock below */
  .mac, .mac-hint { left: 0; translate: none; margin-inline: auto; width: min(100%, calc((100vh - var(--hd-h) - 56px) * 3 / 4.4)); width: min(100%, calc((100svh - var(--hd-h) - 56px) * 3 / 4.4)); }
  .mac { margin-top: 8vh; aspect-ratio: 3 / 4.4; }
  .mac-menus { display: none; }
  .mac-info { left: 4cqw; right: 4cqw; top: 4cqw; width: auto; padding: 4.5cqw; border-radius: 4.5cqw; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3.5cqw; align-items: center; }
  .mi-ico { grid-row: 1 / 3; width: 13cqw; }
  .mi-name { margin: 0; font-size: 6.4cqw; }
  .mi-kind { margin: 1.5cqw 0 0; font-size: 3.5cqw; }
  .mi-line, .mi-link { grid-column: 1 / -1; }
  .mi-line { margin-top: 3.5cqw; font-size: 3.8cqw; }
  .mi-link { margin-top: 3cqw; font-size: 3.6cqw; }
  .mwin { left: 6cqw !important; top: 57cqw !important; width: 88cqw !important; translate: none !important; filter: none; }
  .mwin-shot, .mwin-attach { border-radius: 2.6cqw; }
  .mwin-attach { right: -2cqw; top: 6cqw; width: 34cqw; }
  .mwin-min { top: 2cqw; right: 2cqw; width: 8cqw; opacity: 1; }
  /* a menu-bar panel would cover the info card and its "See how it works" link,
     so on a phone it rises just above the dock instead */
  .mpop { width: calc(var(--w) * 2.3cqw); top: auto; bottom: 17cqw; border-radius: 2.6cqw; transform: translateY(.8cqw) scale(.97); transform-origin: bottom right; }
  .mac-dock { bottom: 3cqw; gap: 1.6cqw; padding: 1.6cqw; border-radius: 4.5cqw; }
  .dk { width: 8.2cqw; }
  .dk-ico { font-size: 4cqw; }
  .dk::after { bottom: -1.2cqw; width: 1cqw; margin-left: -.5cqw; }
  .dk-sep { display: none; }

  .mood { padding: 16vh 0 14vh; }
  .reel { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
  .reel::-webkit-scrollbar { display: none; }
  .card { width: 64vw; scroll-snap-align: start; }

  .contact { padding-top: 12vh; }
  .contact-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 7vh; }
  .contact-title { font-size: clamp(48px, 11vw, 76px); }
  .contact-big { max-width: 38ch; padding-bottom: 0; font-size: 19px; }
  .contact-reach { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 8vh; padding: 22px 0 24px; }
  .contact-reach-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .mail-address { max-width: 100%; font-size: clamp(19px, 5.2vw, 28px); }
  .contact-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 5vh; row-gap: 3.5vh; }
  .foot { flex-direction: column; margin-top: 4vh; }
  .foot-top { margin-left: 0; }
}

@media (max-width: 379px) {
  .hd-nav a[href="#work"] { display: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .card-art svg * { animation: none !important; }
  .p5-fan .phone { transform: none; }
}

/* ---------- opening and closing ----------
   A case study rises out of its colour like a curtain going up, its title on
   the cloth; leaving drops the curtain in the next place's colour. A side
   project launches like a Mac app: it grows out of a dock at the foot of the
   screen, and minimises back into it on the way out. js/page.js drives them
   on those pages, js/main.js on the portfolio. */
.pt { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; background: var(--ptc, var(--pc, #0c0c0b)); color: var(--ptf, #ecebe6); clip-path: inset(0 0 100% 0); }
.pt.is-cover { clip-path: inset(0); }
.pt-t { width: 100%; min-width: 0; padding: 0 var(--gut); text-align: center; }
.pt-t small { display: block; font-size: 13px; letter-spacing: .02em; opacity: .65; font-variant-numeric: tabular-nums; }
.pt-t b { display: block; margin-top: 10px; font-family: var(--fh); font-size: clamp(48px, 9vw, 160px); font-weight: 300; line-height: 1.15; letter-spacing: -.05em; overflow-wrap: anywhere; }
/* the dock a side project launches out of */
.pt-dock { position: absolute; left: 50%; bottom: 3.2vh; display: flex; gap: 10px; padding: 10px; translate: -50% 0; border-radius: 22px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pt-dock i { width: 52px; aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.pt-dock .pt-app { position: relative; display: grid; place-items: center; background: var(--tile, #222); color: #fff; font-size: 22px; font-style: normal; font-weight: 500; }
.pt-dock .pt-app img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pt-dock .pt-app.pad img { width: 72%; height: 72%; object-fit: contain; }
.pt-dock .pt-app::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 5px; aspect-ratio: 1; margin-left: -2.5px; border-radius: 50%; background: #fff; }
.pt-label { position: absolute; top: calc(var(--hd-h) + 4vh); left: var(--gut); font-size: 13px; opacity: .7; }

@media (max-width: 760px) { .pt-dock i { width: 40px; } }
/* arriving back on the portfolio: covered until main.js takes over */
html.pt-arrive::after { content: ''; position: fixed; inset: 0; z-index: 299; background: var(--ptc, #0c0c0b); }
@media (prefers-reduced-motion: reduce) {
  .pt { display: none; }
  html.pt-arrive::after { content: none; }
}