/* fonts: served from this site (was Google Fonts), so text does not wait on a second server */
@font-face{ font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/bebasneue-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/bebasneue-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:italic; font-weight:600; font-display:swap; src:url(/assets/fonts/inter-italic-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:italic; font-weight:600; font-display:swap; src:url(/assets/fonts/inter-italic-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Six Caps'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/sixcaps-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Six Caps'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/sixcaps-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Rupabrata Bhattacharya — site styles
   Dark, gallery-like canvas (Apple Pro-page restraint) with an editorial work grid. */
/* themes: light is the default; [data-theme="dark"] on <html> switches everything */
/* SCALE v289: on desktop the whole page is drawn as it is on a 1366px-wide laptop and enlarged or reduced as one piece to
   fit the window (html zoom = --k, set by the script in each page's head). Viewport units are divided by the same factor
   so that they keep meaning "a share of the real window". On phones and tablets --k is 1 and nothing changes. */
:root{ --k:1; --vw:calc(1vw / var(--k)); --svh:calc(1svh / var(--k)); }
:root, :root[data-theme="light"]{
  color-scheme:light;
  --c-bg:#efece5; --c-bg-rgb:239 236 229; --c-ink:#0b0b0d; --c-ink-rgb:11 11 13; --c-mute:#615e57; --c-surface:#e3dfd5; --c-accent:#1248fc; --c-card:#ffffff;
  --bg:#efece5;
  --surface:#e6e2d9;
  --surface-2:#e6e2d9;
  --surface-3:#dad5ca;
  --press:#cfc9bc;
  --ink:#0b0b0d;
  --ink-2:#333336;
  --gray:#6e6e73;
  --gray-3:#86868b;
  --hairline:rgba(0,0,0,.1);
  --line-strong:rgba(0,0,0,.28);
  --line-hover:rgba(0,0,0,.2);
  --on-ink:#ffffff;
  --nav-bg:rgba(239,236,229,.8);
  --menu-bg:#efece5;
  --sheet-backdrop:#efece5;
  --view-backdrop:rgba(239,236,229,.94);
  --blue:#1248fc;
  --blue-hover:#2f5bff;
  --link:#1248fc;
  --accent:#b64400;
  --glow:#dbe8fb;
  --tint-a:#e3edf6; --tint-b:#f6eee2; --tint-c:#f5e6ea; --tint-d:#ebf0df;
  --grad:linear-gradient(100deg, #1d1d1f 0%, #0b57d0 40%, #6a4fe0 66%, #c2552f 100%);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --c-bg:#000; --c-bg-rgb:0 0 0; --c-ink:#f5f5f7; --c-ink-rgb:245 245 247; --c-mute:#a1a1a6; --c-surface:#141416; --c-accent:#1248fc; --c-card:#17171b;
  --bg:#000000;
  --surface:#111113;
  --surface-2:#1c1c1e;
  --surface-3:#2a2a2d;
  --press:#3a3a3d;
  --ink:#f5f5f7;
  --ink-2:#d2d2d7;
  --gray:#a1a1a6;
  --gray-3:#6e6e73;
  --hairline:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.4);
  --line-hover:rgba(255,255,255,.28);
  --on-ink:#000000;
  --nav-bg:rgba(0,0,0,.72);
  --menu-bg:#000000;
  --sheet-backdrop:#000000;
  --view-backdrop:rgba(0,0,0,.9);
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --link:#2997ff;
  --accent:#ff9f45;
  --glow:#1b2b4a;
  --tint-a:#16304a; --tint-b:#3a2a14; --tint-c:#3a1a24; --tint-d:#22341a;
  --grad:linear-gradient(100deg, #f5f5f7 0%, #b8d4ff 38%, #8ab4ff 55%, #f0d7c0 92%);
}
/* light mode: cards on a gray band are white, as on apple.com */
:root:not([data-theme="dark"]) .band--tint{ --surface-2:#ffffff; }
:root{
  --font:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;

  --max:1280px;
  --gutter:clamp(20px, calc(4 * var(--vw)), 56px);
  --band:clamp(80px, calc(11 * var(--vw)), 140px);
  --radius:22px;
  --radius-sm:14px;
  --gap:16px;

  --t-hero:clamp(3rem, calc(8.4 * var(--vw)), 7.75rem);
  --t-h1:clamp(2.6rem, calc(5.6 * var(--vw)), 5rem);
  --t-h2:clamp(2.1rem, calc(4.2 * var(--vw)), 3.5rem);
  --t-sub:clamp(1.2rem, calc(2 * var(--vw)), 1.6rem);
  --t-lead:clamp(1.05rem, calc(1.4 * var(--vw)), 1.25rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  font-family:var(--font); font-size:17px; line-height:1.47; letter-spacing:-.022em;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--link); color:var(--on-ink); }
:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--link); outline-offset:3px; border-radius:8px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-80px; z-index:300; background:var(--ink); color:var(--on-ink); padding:10px 18px; border-radius:980px; font-size:14px; }
.skip:focus{ top:12px; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--band); }
.band--tint{ background:var(--surface); }
.center{ text-align:center; }

/* reveal on scroll (only when JS is running) */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ---------- type ---------- */
.kicker{ display:block; font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-2); }
.tag-label{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); white-space:nowrap; }
.h1{ font-size:var(--t-h1); font-weight:700; line-height:1.04; letter-spacing:-.022em; }
.h2{ font-size:var(--t-h2); font-weight:600; line-height:1.07; letter-spacing:-.012em; }
.sub{ font-size:var(--t-sub); font-weight:500; line-height:1.22; letter-spacing:.004em; color:var(--ink-2); }
.lead{ font-size:var(--t-lead); line-height:1.5; letter-spacing:.004em; color:var(--gray); }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--gray); }
.section-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 40px; margin-bottom:clamp(36px, calc(5 * var(--vw)), 64px); }
.section-head .lead{ max-width:440px; }
.section-head--stack{ display:block; }
.section-head--stack .lead{ margin-top:14px; max-width:640px; }
.section-head--stack.center .lead{ margin-inline:auto; }

/* ---------- buttons & links ---------- */
.btns{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:clamp(20px, calc(2.6 * var(--vw)), 32px); }
.center .btns{ justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:11px 22px; border-radius:980px; font-size:17px; font-weight:400; letter-spacing:-.022em; line-height:1.18;
  background:var(--blue); color:#fff; border:1px solid var(--blue); white-space:nowrap;
  transition:background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn:hover{ background:var(--blue-hover); border-color:var(--blue-hover); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.btn--sm{ min-height:34px; padding:7px 16px; font-size:14px; }
.arrow::after{ content:'\2197'; font-size:.9em; margin-left:2px; }
.more{ color:var(--link); display:inline-flex; align-items:center; gap:4px; }
.more::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); }
.more:hover{ text-decoration:underline; }

/* ---------- global nav ---------- */
.gnav{
  position:sticky; top:0; z-index:200; height:56px;
  background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline);
}
.gnav__inner{ height:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:clamp(20px, calc(3 * var(--vw)), 40px); }
.gnav__brand{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.gnav__brand img{ width:24px; height:auto; }
.gnav__links{ display:flex; align-items:center; gap:clamp(18px, calc(2.6 * var(--vw)), 32px); font-size:13px; letter-spacing:.02em; }
.gnav__links a{ color:var(--gray); transition:color 160ms ease; }
.gnav__links a:hover, .gnav__links a[aria-current="page"]{ color:var(--ink); }
.gnav__cta{ margin-left:auto; font-size:13px; min-height:34px; padding:6px 16px; border-radius:980px; border:1px solid var(--line-strong); color:var(--ink); transition:background 200ms ease, color 200ms ease; white-space:nowrap; }
.gnav__cta:hover{ background:var(--ink); color:var(--on-ink); }
.gnav__toggle{ display:none; width:44px; height:44px; margin-left:auto; margin-right:-12px; align-items:center; justify-content:center; }
.gnav__toggle i, .gnav__toggle i::before{ display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform 240ms var(--ease); }
.gnav__toggle i{ position:relative; transform:translateY(-3.5px); }
.gnav__toggle i::before{ content:''; position:absolute; left:0; top:7px; }
.gnav.is-open .gnav__toggle i{ transform:translateY(0) rotate(45deg); }
.gnav.is-open .gnav__toggle i::before{ top:0; transform:rotate(-90deg); }
@media (max-width:760px){
  .gnav__brand span{ display:none; }
  .gnav__toggle{ display:inline-flex; }
  .gnav__cta{ display:none; }
  .gnav__links{
    position:absolute; top:100%; left:0; right:0; height:calc(calc(100 * var(--svh)) - 56px); height:calc(calc(100 * var(--svh)) - 56px); overflow-y:auto; z-index:199;
    flex-direction:column; align-items:flex-start; gap:4px; padding:32px var(--gutter);
    background:var(--menu-bg); font-size:32px; font-weight:600; letter-spacing:-.01em;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity 240ms ease, transform 240ms var(--ease), visibility 0s 240ms;
  }
  .gnav__links a{ color:var(--ink); padding:6px 0; }
  .gnav__links .gnav__mobile-cta{ display:inline-flex; margin-top:20px; padding:11px 24px; font-size:17px; font-weight:400; color:#fff; letter-spacing:-.022em; }
  .gnav.is-open .gnav__links{ opacity:1; visibility:visible; transform:none; transition:opacity 240ms ease, transform 240ms var(--ease); }
}
@media (min-width:761px){ .gnav__mobile-cta{ display:none !important; } }

/* ---------- theme toggle ---------- */
.theme-toggle{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); border:1px solid var(--line-strong);
  transition:background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.gnav__cta + .theme-toggle{ margin-left:calc(10px - clamp(20px, calc(3 * var(--vw)), 40px)); }
@media (max-width:760px){ .gnav__cta + .theme-toggle{ margin-left:auto; } }
.theme-toggle:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle svg{ grid-area:1 / 1; width:17px; height:17px; transition:opacity 300ms ease, transform 500ms var(--ease); }
.theme-toggle__sun{ opacity:0; transform:rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle__sun{ opacity:1; transform:none; }
:root[data-theme="dark"] .theme-toggle__moon{ opacity:0; transform:rotate(90deg) scale(.5); }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after{
  transition:background-color 400ms ease, color 400ms ease, border-color 400ms ease, fill 400ms ease, box-shadow 400ms ease !important;
}
@media (max-width:760px){
  .theme-toggle{ margin-left:auto; width:40px; height:40px; }
  .gnav__toggle{ margin-left:4px !important; }
}

/* ---------- home: intro ---------- */
.intro{ padding-top:clamp(96px, calc(16 * var(--svh)), 200px); padding-bottom:clamp(48px, calc(6 * var(--vw)), 80px); }
.intro__title{ font-size:var(--t-hero); font-weight:700; line-height:.98; letter-spacing:-.035em; margin-top:22px; }
.intro__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:28px 48px; margin-top:clamp(28px, calc(4 * var(--vw)), 44px); }
.intro__note{ max-width:440px; font-size:var(--t-lead); line-height:1.45; color:var(--gray); }
.intro__note b{ color:var(--ink); font-weight:600; }
.intro .btns{ margin-top:0; }

/* ---------- home: filters + work grid ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px, calc(3 * var(--vw)), 36px); }
.filter{
  min-height:36px; padding:7px 16px; border-radius:980px; font-size:14px; color:var(--gray);
  border:1px solid var(--hairline); transition:color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.filter:hover{ color:var(--ink); border-color:var(--line-hover); }
.filter[aria-pressed="true"]{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.filter span{ margin-left:6px; font-size:12px; opacity:.6; }

.work{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(36px, calc(4 * var(--vw)), 56px) var(--gap); }
.wcard{ grid-column:span var(--span, 6); display:flex; flex-direction:column; cursor:pointer; }
.wcard[hidden]{ display:none; }
.wcard__media{ position:relative; border-radius:var(--radius); overflow:hidden; background:#fff; isolation:isolate; box-shadow:0 0 0 1px var(--hairline); }
.wcard__media img{ display:block; width:100%; height:auto; transition:transform 1100ms var(--ease); }
.wcard__cta{
  position:absolute; z-index:1; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:980px; font-size:14px; background:rgba(0,0,0,.82); color:#fff;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transform:translateY(8px); transition:opacity 300ms ease, transform 400ms var(--ease);
}
.wcard__cta::after{ content:'\2192'; }
.wcard:hover .wcard__media img, .wcard:focus-visible .wcard__media img{ transform:scale(1.02); }
.wcard:hover .wcard__cta, .wcard:focus-visible .wcard__cta{ opacity:1; transform:none; }
.wcard__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:18px; }
.wcard__title{ font-size:clamp(1.25rem, calc(1.7 * var(--vw)), 1.5rem); font-weight:600; letter-spacing:-.012em; line-height:1.2; }
.wcard__desc{ margin-top:6px; color:var(--gray); font-size:16px; line-height:1.45; max-width:62ch; }
.wcard[style*="--span:12"] .wcard__title{ font-size:clamp(1.5rem, calc(2.2 * var(--vw)), 2rem); }

.work-more{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px 40px;
  margin-top:clamp(48px, calc(6 * var(--vw)), 80px); padding:clamp(28px, calc(4 * var(--vw)), 48px);
  border-radius:var(--radius); border:1px solid var(--hairline);
  background:radial-gradient(90% 160% at 100% 0%, var(--glow) 0%, var(--surface) 60%);
  transition:border-color 300ms ease;
}
.work-more:hover{ border-color:var(--line-hover); }
.work-more strong{ display:block; margin-top:12px; font-size:clamp(1.9rem, calc(3.2 * var(--vw)), 2.75rem); font-weight:700; line-height:1.05; letter-spacing:-.025em; }
.work-more p{ margin-top:10px; color:var(--gray); max-width:46ch; }
.work-more:hover .btn--ghost{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
@media (max-width:860px){
  .work{ grid-template-columns:1fr; }
  .wcard{ grid-column:auto; }
  .wcard__cta{ display:none; }
}

/* ---------- home: approach split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(36px, calc(6 * var(--vw)), 96px); align-items:center; }
.split__art{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1520 / 1038; background:var(--surface-2); }
.split__art img{ width:100%; height:100%; object-fit:cover; }
.statement{ font-size:clamp(1.6rem, calc(2.7 * var(--vw)), 2.5rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.statement .dim{ color:var(--gray-3); }
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); margin-top:clamp(36px, calc(4 * var(--vw)), 56px); }
.step{ border-top:1px solid var(--hairline); padding-top:18px; }
.step b{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); font-weight:600; }
.step span{ display:block; margin-top:8px; font-size:17px; color:var(--ink-2); line-height:1.4; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:980px){ .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:var(--surface-2); border-radius:var(--radius); padding:30px 26px 32px; }
.stat__num{ display:block; font-size:clamp(3rem, calc(5 * var(--vw)), 4.5rem); font-weight:700; line-height:1; letter-spacing:-.03em; }
.stat__label{ display:block; margin-top:14px; font-size:16px; line-height:1.4; color:var(--gray); }
.stat__label b{ color:var(--ink); font-weight:600; }

/* ---------- explore cards ---------- */
.cards3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:900px){ .cards3{ grid-template-columns:1fr; } }
.lcard{ display:flex; flex-direction:column; min-height:260px; padding:30px 28px 28px; border-radius:var(--radius); background:var(--surface-2); border:1px solid transparent; transition:border-color 300ms ease, transform 500ms var(--ease); }
.lcard:hover{ border-color:var(--hairline); transform:translateY(-4px); }
.lcard h3{ margin-top:14px; font-size:clamp(1.5rem, calc(2.2 * var(--vw)), 1.9rem); font-weight:600; line-height:1.12; letter-spacing:-.012em; }
.lcard p{ margin-top:10px; color:var(--gray); }
.lcard .more{ margin-top:auto; padding-top:24px; }

/* ---------- big contact ---------- */
.cta-big{ padding-block:clamp(96px, calc(14 * var(--vw)), 180px); }
.cta-big__title{ font-size:clamp(3rem, calc(9 * var(--vw)), 8rem); font-weight:700; line-height:.96; letter-spacing:-.04em; }
.cta-big__title a{ display:inline-flex; align-items:baseline; gap:.15em; transition:opacity 200ms ease; }
.cta-big__title a::after{ content:'\2197'; font-size:.55em; font-weight:500; transition:transform 300ms var(--ease); }
.cta-big__title a:hover::after{ transform:translate(6px,-6px); }
.cta-big__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-top:clamp(28px, calc(4 * var(--vw)), 48px); }
.cta-big__mail{ font-size:var(--t-sub); color:var(--link); }
.cta-big__mail:hover{ text-decoration:underline; }

/* ---------- footer ---------- */
.gfoot{ color:var(--gray); font-size:13px; letter-spacing:-.01em; }
.gfoot__inner{ max-width:var(--max); margin-inline:auto; padding:22px var(--gutter) 32px; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 28px; }
.gfoot__links{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.gfoot__links a{ color:var(--ink-2); }
.gfoot__links a:hover{ color:var(--ink); }
.gfoot__links a[target]::after{ content:' \2197'; }

/* ---------- case study sheet ---------- */
dialog.cs{ border:0; padding:0; margin:0; width:100%; height:100%; max-width:none; max-height:none; background:var(--bg); color:var(--ink); }
dialog.cs::backdrop{ background:var(--sheet-backdrop); }
.cs__scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain; outline:none; }
.cs__bar{ position:sticky; top:0; z-index:3; height:56px; display:flex; align-items:center; justify-content:flex-start; gap:16px; padding-inline:var(--gutter); background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hairline); }
.cs__bar-title{ font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.cs__close{ width:36px; height:36px; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; transition:background 160ms ease; }
.cs__close:hover{ background:var(--press); }
.cs__close svg{ width:14px; height:14px; }
.cs__hero{ padding-top:clamp(56px, calc(8 * var(--vw)), 104px); }
.cs__hero .h1{ margin-top:18px; }
.cs__hero .sub{ margin-top:12px; }
.cs__hero .lead{ max-width:720px; margin-top:20px; }
.cs__cover{ margin-top:clamp(36px, calc(5 * var(--vw)), 64px); border-radius:var(--radius); overflow:hidden; aspect-ratio:1838 / 515; background:var(--surface-2); }
.cs__cover img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .cs__cover{ aspect-ratio:16 / 10; } }
.cs__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.chip{ display:inline-flex; align-items:center; min-height:30px; padding:4px 14px; border-radius:980px; border:1px solid var(--hairline); font-size:13px; color:var(--ink-2); }
.cs__facts{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--gap); margin-top:clamp(48px, calc(6 * var(--vw)), 80px); }
@media (max-width:900px){ .cs__facts{ grid-template-columns:1fr; } }
.fact{ background:var(--surface-2); border-radius:var(--radius); padding:28px 28px 32px; }
.fact h3{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); margin-bottom:14px; }
.fact p{ font-size:16.5px; line-height:1.55; color:var(--ink-2); }
.cs__deck{ display:flex; flex-direction:column; gap:clamp(12px, calc(1.6 * var(--vw)), 20px); margin-top:clamp(48px, calc(6 * var(--vw)), 80px); }
.cs__deck img{ width:100%; height:auto; border-radius:clamp(10px, calc(1.4 * var(--vw)), 18px); background:var(--surface-2); }
.cs__more{ margin-top:clamp(72px, calc(9 * var(--vw)), 120px); padding-bottom:clamp(72px, calc(9 * var(--vw)), 120px); }
.mini{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:28px var(--gap); }
.mini__item{ display:block; }
.mini__item .frame{ overflow:hidden; border-radius:var(--radius-sm); background:#fff; box-shadow:0 0 0 1px var(--hairline); }
.mini__item img{ display:block; width:100%; height:auto; transition:transform 900ms var(--ease); }
.mini__item:hover img{ transform:scale(1.02); }
.mini__item .wcard__head{ margin-top:12px; }
.mini__item strong{ font-size:17px; font-weight:600; }

/* ---------- about ---------- */
.about-hero{ padding-top:clamp(72px, calc(11 * var(--svh)), 140px); }
.about-hero__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px, calc(6 * var(--vw)), 96px); align-items:end; }
.about-hero .h1{ margin-top:20px; }
.about-hero .sub{ margin-top:14px; }
.about-hero .lead{ margin-top:22px; max-width:620px; }
.about-hero__photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4 / 5; background:var(--surface-2); }
.about-hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
.cv-contact{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:14px; }
.cv-contact a{ color:var(--link); }
.cv-contact a:hover{ text-decoration:underline; }
@media (max-width:860px){
  .about-hero__grid{ grid-template-columns:1fr; }
  .about-hero__photo{ aspect-ratio:1; max-width:520px; order:-1; }
}

.timeline{ display:grid; gap:var(--gap); }
.tl{ display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:8px 32px; align-items:baseline; background:var(--surface-2); border-radius:var(--radius); padding:28px 32px; }
.tl__when{ font-size:14px; color:var(--gray); }
.tl__what{ font-size:clamp(1.25rem, calc(1.9 * var(--vw)), 1.55rem); font-weight:600; line-height:1.2; letter-spacing:-.01em; }
.tl__where{ display:block; margin-top:4px; font-size:16px; font-weight:400; color:var(--gray); letter-spacing:-.022em; }
.tl__note{ grid-column:2 / -1; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.tl__tag{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
@media (max-width:700px){
  .tl{ grid-template-columns:1fr; padding:24px; }
  .tl__note{ grid-column:1; }
}

.awards{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:1060px){ .awards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .awards{ grid-template-columns:1fr; } }
.award{ background:var(--surface-2); border-radius:var(--radius); padding:30px 26px 32px; }
.award strong{ display:block; font-size:clamp(1.9rem, calc(2.6 * var(--vw)), 2.5rem); font-weight:700; line-height:1.04; letter-spacing:-.025em; }
.award span{ display:block; margin-top:14px; color:var(--gray); font-size:15.5px; line-height:1.45; }

.sheet{ background:var(--surface-2); border-radius:var(--radius); padding:0 clamp(22px, calc(4 * var(--vw)), 52px); }
.spec{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px 40px; padding-block:clamp(36px, calc(5 * var(--vw)), 56px); border-top:1px solid var(--hairline); }
.spec:first-child{ border-top:0; }
.spec__label{ font-size:clamp(1.3rem, calc(2 * var(--vw)), 1.6rem); font-weight:600; letter-spacing:-.01em; line-height:1.15; }
.spec__body{ display:grid; gap:28px; }
.item__head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 20px; align-items:baseline; }
.item__title{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.item__title a:hover{ color:var(--link); }
.item__when{ font-size:14px; color:var(--gray); white-space:nowrap; }
.item__org{ display:block; margin-top:2px; color:var(--gray); font-size:15.5px; }
.item ul{ margin-top:10px; display:grid; gap:6px; }
.item li{ position:relative; padding-left:18px; font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.item li::before{ content:''; position:absolute; left:2px; top:.7em; width:5px; height:5px; border-radius:50%; background:var(--gray-3); }
.subhead{ font-size:11px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.18em; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pills span{ display:inline-flex; align-items:center; min-height:32px; padding:5px 14px; border-radius:980px; border:1px solid var(--hairline); font-size:14px; color:var(--ink-2); }
@media (max-width:760px){ .spec{ grid-template-columns:1fr; gap:18px; } }

.grid-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:980px){ .grid-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .grid-cards{ grid-template-columns:1fr; } }
.gcard{ background:var(--surface-2); border-radius:var(--radius); padding:28px 28px 30px; }
.gcard__icon{ width:40px; height:40px; color:var(--ink); margin-bottom:22px; }
.gcard__icon svg{ width:100%; height:100%; }
.gcard h3{ font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.gcard ul{ margin-top:14px; }
.gcard li{ padding:9px 0; border-top:1px solid var(--hairline); font-size:16px; color:var(--ink-2); }
.gcard li:first-child{ border-top:0; padding-top:0; }
.gcard--wide{ grid-column:span 2; }
@media (max-width:620px){ .gcard--wide{ grid-column:auto; } }

/* ---------- lab ---------- */
.lab-hero{ padding-top:clamp(96px, calc(16 * var(--svh)), 200px); padding-bottom:clamp(40px, calc(5 * var(--vw)), 64px); }
.lab-hero .intro__title{ max-width:11ch; }
.thoughts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:820px){ .thoughts{ grid-template-columns:1fr; } }
.thought{ display:flex; flex-direction:column; background:var(--surface-2); border-radius:var(--radius); padding:32px 30px 30px; min-height:290px; }
.thought__meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; }
.thought__meta .status{ color:var(--accent); }
.thought h3{ margin-top:22px; font-size:clamp(1.6rem, calc(2.4 * var(--vw)), 2.1rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.thought p{ margin-top:12px; color:var(--gray); font-size:16.5px; }
.thought__foot{ margin-top:auto; padding-top:24px; font-size:14px; color:var(--gray-3); }

.exps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
@media (max-width:1000px){ .exps{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .exps{ grid-template-columns:1fr; } }
.exp{ display:flex; flex-direction:column; min-height:300px; padding:28px 26px 28px; border-radius:var(--radius); border:1px solid var(--hairline); background:var(--surface); }
.exp--a{ background:radial-gradient(130% 100% at 100% 0%, var(--tint-a) 0%, var(--surface) 60%); }
.exp--b{ background:radial-gradient(130% 100% at 100% 0%, var(--tint-b) 0%, var(--surface) 60%); }
.exp--c{ background:radial-gradient(130% 100% at 100% 0%, var(--tint-c) 0%, var(--surface) 60%); }
.exp--d{ background:radial-gradient(130% 100% at 100% 0%, var(--tint-d) 0%, var(--surface) 60%); }
.exp h3{ margin-top:12px; font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-.012em; }
.exp p{ margin-top:10px; font-size:15.5px; line-height:1.5; color:var(--gray); }
.exp .badge{ margin-top:auto; padding-top:20px; font-size:13px; font-weight:600; color:var(--ink-2); }

.rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; --edge:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); scroll-padding-inline:var(--edge); padding:4px var(--edge) 8px; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.poster{ flex:0 0 auto; scroll-snap-align:start; text-align:left; }
.poster__img{ --h:clamp(300px, calc(34 * var(--vw)), 460px); display:block; height:var(--h); width:calc(var(--h) * var(--ar, .7)); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); }
.poster__img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.poster:hover .poster__img img{ transform:scale(1.04); }
.poster__cap{ display:block; margin-top:14px; font-size:16px; font-weight:600; }
.poster__cat{ display:block; margin-top:4px; }
.rail-nav{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.rnav{ width:44px; height:44px; border-radius:50%; background:var(--surface-3); display:grid; place-items:center; transition:background 160ms ease; }
.rnav:hover{ background:var(--press); }
.rnav svg{ width:16px; height:16px; }

dialog.pview{ border:0; padding:0; margin:auto; background:transparent; max-width:min(calc(92 * var(--vw)), 760px); max-height:calc(94 * var(--svh)); overflow:visible; color:var(--ink); }
dialog.pview::backdrop{ background:var(--view-backdrop); }
.pview__frame{ background:var(--bg); border-radius:var(--radius); padding:14px; max-height:calc(94 * var(--svh)); overflow:auto; box-shadow:0 0 0 1px var(--hairline), 0 30px 80px rgba(0,0,0,.18); }
.pview img{ max-width:100%; max-height:calc(calc(94 * var(--svh)) - 120px); width:auto; margin:0 auto; border-radius:12px; }
.pview__label{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 8px 4px; }
.pview__title{ font-size:20px; font-weight:600; }

/* ---------- illustrations (lab) ---------- */
.illus{ display:grid; gap:clamp(36px, calc(4 * var(--vw)), 56px); }
.art{ display:block; width:100%; text-align:left; cursor:zoom-in; }
.art__img{ display:block; border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--hairline); transition:transform 300ms var(--ease); }
.art__img img{ display:block; width:100%; height:auto; transition:transform 1100ms var(--ease); }
.art:hover .art__img img, .art:focus-visible .art__img img{ transform:scale(1.025); }
.art:active .art__img{ transform:scale(.985); }
.art .wcard__head{ margin-top:14px; }
.art__title{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.art--feature .art__title{ font-size:clamp(1.25rem, calc(1.7 * var(--vw)), 1.5rem); }
.art-cols{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0,1fr)); gap:var(--gap); align-items:start; }
.art-col{ display:grid; gap:clamp(28px, calc(3 * var(--vw)), 40px); }
dialog.pview.pview--wide{ max-width:min(calc(94 * var(--vw)), 1400px); }

/* ---------- lab showcase shelves (posters + illustrations) ---------- */
.showcase__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px 48px; margin-bottom:clamp(36px, calc(4 * var(--vw)), 56px); }
.showcase__head .btns{ margin-top:0; }
.shelf-bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.shelf-nav{ display:flex; gap:10px; }
.shelf-nav .rnav{ width:44px; height:44px; color:var(--ink); }
.shelf-nav .rnav:focus-visible{ outline:2px solid var(--link); outline-offset:3px; }
.shelf__item:focus-visible{ outline:none; }
.shelf__item:focus-visible .shelf__img{ box-shadow:0 0 0 2px var(--link); }
.shelf{ position:relative; overflow:hidden; touch-action:pan-y; -webkit-user-select:none; user-select:none; padding-block:4px; cursor:grab; }
.shelf:active{ cursor:grabbing; }
.shelf + .wrap{ margin-top:clamp(40px, calc(5 * var(--vw)), 64px); }
.shelf__track{ display:flex; gap:clamp(14px, calc(1.6 * var(--vw)), 22px); width:max-content; will-change:transform; }
.shelf__item{ flex:0 0 auto; display:block; text-align:left; cursor:pointer; }
.shelf__img{
  --h:clamp(230px, calc(25 * var(--vw)), 380px);
  position:relative; display:block; height:var(--h); width:calc(var(--h) * var(--ar));
  border-radius:14px; overflow:hidden; background:var(--surface-2); box-shadow:0 0 0 1px var(--hairline);
  transition:transform 400ms var(--ease);
}
.shelf__img img{ display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.shelf__pill{
  position:absolute; left:50%; top:50%; padding:12px 26px; border-radius:980px;
  background:#fff; color:#000; font-size:17px; font-weight:500; letter-spacing:-.02em; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform:translate(-50%,-50%) scale(.92); transition:opacity 220ms ease, transform 320ms var(--ease);
}
.shelf__item.is-hover .shelf__img{ transform:scale(1.015); }
.shelf__item.is-hover .shelf__pill, .shelf__item:focus-visible .shelf__pill{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.shelf__item:active .shelf__img{ transform:scale(.985); }
.shelf__title{ display:block; margin-top:14px; font-size:17px; font-weight:500; color:var(--ink-2); max-width:calc(var(--h, 300px) * 1.2); }
.shelf__cat{ display:block; margin-top:3px; font-size:15px; color:var(--gray-3); }
@media (hover:none){ .shelf__pill{ display:none; } }

/* ---------- about: apple-style story ---------- */
.ab-hero{ padding-top:clamp(64px, calc(10 * var(--svh)), 120px); padding-bottom:var(--band); }
.ab-hero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(36px, calc(6 * var(--vw)), 96px); align-items:center; }
.ab-hero__title{ margin-top:20px; font-size:var(--t-hero); font-weight:700; line-height:.98; letter-spacing:-.035em; }
.ab-hero .sub{ margin-top:22px; max-width:30ch; }
.ab-hero__photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4 / 5; background:var(--surface-2); }
.ab-hero__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; }
@media (max-width:860px){
  .ab-hero__grid{ grid-template-columns:1fr; }
  .ab-hero__photo{ order:-1; aspect-ratio:1; max-width:520px; }
}

/* story: large lines that light up as they scroll past the middle of the screen */
.beats{ display:grid; gap:clamp(36px, calc(5 * var(--vw)), 64px); }
.beat{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:12px 48px; align-items:baseline; }
.beat__when{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); transition:color 500ms ease; }
.beat__text{ font-size:clamp(1.6rem, calc(3.1 * var(--vw)), 2.75rem); font-weight:600; line-height:1.14; letter-spacing:-.018em; color:var(--gray-3); opacity:.45; transition:opacity 600ms ease, color 600ms ease; max-width:24em; }
.beat mark{ background:none; color:inherit; transition:color 600ms ease; }
.beat.is-lit .beat__text{ opacity:1; color:var(--ink); }
.beat.is-lit mark{ color:var(--link); }
.beat.is-lit .beat__when{ color:var(--accent); }
.beat-sign{ margin-top:clamp(56px, calc(7 * var(--vw)), 96px); padding-left:calc(200px + 48px); font-size:clamp(1.15rem, calc(1.7 * var(--vw)), 1.5rem); color:var(--gray); }
.beat-sign em{ font-style:normal; font-weight:600; color:var(--ink); }
@media (max-width:760px){
  .beat{ grid-template-columns:1fr; }
  .beat-sign{ padding-left:0; }
}
.no-js .beat__text, :root:not(.js) .beat__text{ opacity:1; color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .beat__text{ opacity:1; color:var(--ink); } }

/* recognition: bento */
.bento{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); }
.bento__tile{ display:flex; flex-direction:column; min-height:240px; padding:30px 28px 30px; border-radius:var(--radius); background:var(--surface-2); }
.bento__tile strong{ display:block; margin-top:auto; padding-top:28px; font-size:clamp(2rem, calc(3 * var(--vw)), 2.75rem); font-weight:700; line-height:1.04; letter-spacing:-.03em; }
.bento__tile p{ margin-top:10px; color:var(--gray); font-size:16px; line-height:1.45; }
.bento__tile--hero{ grid-column:span 2; grid-row:span 2; justify-content:flex-end; background:radial-gradient(120% 100% at 100% 0%, var(--glow) 0%, var(--surface-2) 62%); }
.bento__tile--hero strong{ font-size:clamp(3.2rem, calc(7 * var(--vw)), 6rem); }
.bento__tile--hero p{ font-size:18px; max-width:30ch; }
@media (max-width:1000px){ .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } .bento__tile--hero{ grid-column:auto; grid-row:auto; } }
@media print{
  .ab-hero__photo{ display:none; }
  .beat__text{ opacity:1 !important; color:#111 !important; font-size:13pt; }
  .bento{ display:block; }
  .bento__tile{ min-height:0; padding:6px 0; background:none; }
  .bento__tile strong{ padding-top:0; font-size:16pt; }
}

/* ---------- micro-interactions (apple.com-style) ---------- */
/* nav: clear at the top of the page, frosted once content scrolls under it */
.gnav{ transition:background-color 400ms var(--ease), border-color 400ms var(--ease), -webkit-backdrop-filter 400ms var(--ease), backdrop-filter 400ms var(--ease); }
.gnav:not(.is-scrolled):not(.is-open){ background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* mobile menu: items cascade in one after another */
@media (max-width:760px){
  .gnav .gnav__links > *{ opacity:0; transform:translateY(-10px); transition:opacity 300ms ease, transform 420ms var(--ease); transition-delay:0ms; }
  .gnav.is-open .gnav__links > *{ opacity:1; transform:none; transition-delay:calc(60ms + var(--i, 0) * 45ms); }
}

/* press feedback: everything clickable dips slightly */
.btn, .filter, .gnav__cta, .cs__close, .rnav{ transition-property:background, color, border-color, transform; transition-duration:200ms; transition-timing-function:var(--ease); }
.btn:active, .filter:active, .gnav__cta:active, .cs__close:active, .rnav:active{ transform:scale(.96); }
.wcard:active .wcard__media, .mini__item:active .frame, .poster:active .poster__img{ transform:scale(.985); }
.wcard__media, .mini__item .frame, .poster__img{ transition:transform 300ms var(--ease); }
.lcard:active{ transform:scale(.985); }

/* "›" links nudge forward */
.more::after{ transition:transform 260ms var(--ease); }
.more:hover::after{ transform:translate(3px,-1px); }
.wcard__cta::after{ display:inline-block; transition:transform 260ms var(--ease); }
.wcard:hover .wcard__cta::after{ transform:translateX(3px); }
.arrow::after{ display:inline-block; transition:transform 260ms var(--ease); }
.arrow:hover::after, .work-more:hover .arrow::after{ transform:translate(2px,-2px); }

/* text links get an underline that draws in from the left */
.gfoot__links a, .cv-contact a{ background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition:background-size 300ms var(--ease), color 160ms ease; }
.gfoot__links a:hover, .cv-contact a:hover{ background-size:100% 1px; text-decoration:none; }

/* gradient words: a slow shimmer */
.grad{ background-size:220% 100%; animation:grad-drift 9s ease-in-out infinite alternate; }
@keyframes grad-drift{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

/* staggered reveal (delay set per element in JS) */
.js .reveal{ transition-delay:var(--d, 0ms); }

/* scroll-linked zoom: the image grows into place as it enters the viewport */
.zoom{ transform:scale(var(--z, 1)); transform-origin:50% 60%; will-change:transform; }

/* case study: opens and closes with a soft scale and fade */
dialog.cs[open]{ animation:cs-in 460ms var(--ease) both; }
dialog.cs.is-closing{ animation:cs-out 260ms ease-in both; }
dialog.cs[open]::backdrop{ animation:fade-in 300ms ease both; }
dialog.pview[open]{ animation:pv-in 380ms var(--ease) both; }
dialog.pview[open]::backdrop{ animation:fade-in 300ms ease both; }
dialog.pview.is-closing{ animation:cs-out 220ms ease-in both; }
@keyframes cs-in{ from{ opacity:0; transform:scale(.985) translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes cs-out{ to{ opacity:0; transform:scale(.99) translateY(10px); } }
@keyframes pv-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } }

@media (prefers-reduced-motion:reduce){
  .grad{ animation:none; }
  .zoom{ transform:none; }
  dialog.cs[open], dialog.pview[open], dialog.cs.is-closing, dialog.pview.is-closing{ animation:none; }
}

/* ---------- print (resume): back to ink on paper ---------- */
@media print{
  :root{ color-scheme:light; --bg:#fff; --surface:#fff; --surface-2:#fff; --ink:#111; --ink-2:#222; --gray:#555; --gray-3:#777; --hairline:#ccc; --link:#111; --accent:#111; }
  .gnav, .gfoot, .no-print, .about-hero__photo{ display:none !important; }
  body{ font-size:11pt; }
  .band, .about-hero{ padding-block:14px; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .zoom{ transform:none !important; }
  .grad{ animation:none; color:var(--ink); -webkit-text-fill-color:currentColor; background:none; }
  .spec, .tl, .award{ break-inside:avoid; }
  .sheet, .tl, .award{ padding:6px 0; border-radius:0; }
  .award strong{ font-size:18pt; }
  .section-head{ margin-bottom:10px; }
}

/* =====================================================================
   LIQUID GLASS (Apple, 2025-style): translucent, blurred, with a bright
   top edge, a soft inner rim and a light sheen that follows the pointer.
   ===================================================================== */
:root, :root[data-theme="light"]{
  --glass-bg:rgba(255,255,255,.56);
  --glass-bg-strong:rgba(255,255,255,.8);
  --glass-border:rgba(255,255,255,.8);
  --glass-rim:rgba(0,0,0,.06);
  --glass-hi:rgba(255,255,255,.95);
  --glass-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.08);
  --glass-sheen:rgba(255,255,255,.55);
  --glass-panel:#ffffff;
  --amb-1:rgba(0,113,227,.16); --amb-2:rgba(122,90,248,.14); --amb-3:rgba(255,149,79,.13);
}
:root[data-theme="dark"]{
  --glass-bg:rgba(42,42,46,.5);
  --glass-bg-strong:rgba(28,28,31,.82);
  --glass-border:rgba(255,255,255,.14);
  --glass-rim:rgba(0,0,0,.5);
  --glass-hi:rgba(255,255,255,.22);
  --glass-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.45);
  --glass-sheen:rgba(255,255,255,.1);
  --glass-panel:#1c1c1f;
  --amb-1:rgba(41,151,255,.22); --amb-2:rgba(140,100,255,.18); --amb-3:rgba(255,140,70,.12);
}

/* the shared glass recipe */
.gnav__inner, .btn--ghost, .filter, .theme-toggle, .gnav__cta, .rnav, .cs__close, .glass-tile,
.chip, .pills span, .shelf__pill, .wcard__cta{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 1px var(--glass-rim), var(--glass-shadow);
}
.btn--ghost:hover, .filter:hover, .theme-toggle:hover, .gnav__cta:hover, .rnav:hover, .cs__close:hover{
  background:var(--glass-bg-strong); color:var(--ink); border-color:var(--glass-border);
}
.filter[aria-pressed="true"]{ background:var(--ink); color:var(--on-ink); border-color:transparent; box-shadow:var(--glass-shadow); }
.work-more:hover .btn--ghost{ background:var(--glass-bg-strong); color:var(--ink); border-color:var(--glass-border); }
/* primary button: tinted glass, a bright top edge on solid blue */
.btn:not(.btn--ghost){ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.12), 0 6px 18px rgba(0,113,227,.28); }
.wcard__cta{ color:var(--ink); }
.shelf__pill{ color:var(--ink); }

/* ---------- floating glass navigation capsule ---------- */
.gnav, .gnav:not(.is-scrolled):not(.is-open){
  height:auto; padding:10px var(--gutter) 0; background:transparent; border-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.gnav__inner{ height:52px; max-width:1120px; padding-inline:20px 9px; border-radius:980px; transition:background 400ms var(--ease), box-shadow 400ms var(--ease); }
.gnav:not(.is-scrolled) .gnav__inner{ background:var(--glass-bg); }
.gnav.is-scrolled .gnav__inner{ background:var(--glass-bg-strong); }
html{ scroll-padding-top:84px; }
@media (max-width:760px){
  .gnav__inner{ height:50px; padding-inline:16px 6px; }
  .gnav .gnav__links{
    top:calc(100% + 8px); left:0; right:0; height:auto; max-height:calc(calc(100 * var(--svh)) - 90px);
    padding:22px 24px 26px; border-radius:28px;
    background:var(--glass-panel);
    border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
    transform:translateY(-8px) scale(.98); transform-origin:top center;
  }
  .gnav.is-open .gnav__links{ transform:none; }
}

/* ---------- ambient colour behind glass ---------- */
.ambient{ position:relative; isolation:isolate; }
.ambient::before{
  content:''; position:absolute; z-index:-1; inset:-10% 0 0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 82% 24%, var(--amb-1), transparent 70%),
    radial-gradient(34% 40% at 64% 70%, var(--amb-2), transparent 70%),
    radial-gradient(30% 36% at 14% 86%, var(--amb-3), transparent 70%);
  filter:blur(10px);
  animation:amb-float 18s ease-in-out infinite alternate;
}
@keyframes amb-float{ to{ transform:translate3d(-3%, 2%, 0) scale(1.05); } }

/* ---------- glass tiles with pointer sheen ---------- */
.glass-tile{ position:relative; overflow:hidden; border-radius:var(--radius); }
.glass-tile::after{
  content:''; position:absolute; z-index:0; inset:0; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--glass-sheen), transparent 45%);
  transition:opacity 400ms ease;
}
.glass-tile:hover::after{ opacity:1; }
.glass-tile > *{ position:relative; z-index:1; }

/* ---------- about: recognition, redone ---------- */
.honors{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr); gap:var(--gap); align-items:stretch; }
.honor{ display:flex; flex-direction:column; padding:30px 30px 32px; min-height:260px; }
.honor__icon{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:var(--ink);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-hi), 0 4px 12px rgba(0,0,0,.06); }
.honor__icon svg{ width:24px; height:24px; }
.honor__eyebrow{ margin-top:26px; }
.honor strong{ display:block; margin-top:8px; font-size:clamp(1.9rem, calc(2.6 * var(--vw)), 2.5rem); font-weight:700; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
.honor p{ margin-top:10px; color:var(--gray); font-size:16px; line-height:1.45; max-width:34ch; }
.honor--feature{ justify-content:flex-start; }
.honor--feature strong{ font-size:clamp(1.9rem, calc(2.6 * var(--vw)), 2.5rem); }
.honor--feature p{ max-width:40ch; }
.honor__medals{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.honor__medal{ display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:6px 16px 6px 8px; border-radius:980px; font-size:14.5px; font-weight:500; color:var(--ink-2);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-hi); }
.honor__medal i{ width:24px; height:24px; border-radius:50%; background:var(--m); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.18); }

@media (max-width:980px){ .honors{ grid-template-columns:repeat(2, minmax(0,1fr)); } .honor--feature{ grid-column:span 2; } }
@media (max-width:600px){ .honors{ grid-template-columns:1fr; } .honor--feature{ grid-column:auto; } .honor{ min-height:0; } }

@media (prefers-reduced-motion:reduce){ .ambient::before{ animation:none; } }
@media print{
  .ambient::before, .glass-tile::after{ display:none; }
  .glass-tile, .honor__icon, .honor__medal{ background:none !important; box-shadow:none !important; border:0 !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .honors{ display:block; }
  .honor{ min-height:0; padding:6px 0; }
  .honor__icon{ display:none; }
  .honor strong, .honor--feature strong{ font-size:16pt; }
}

/* ---------- lab: game (Apple Arcade-style, always dark) ---------- */
.game{
  --bg:#000; --surface:#111113; --surface-2:#1c1c1e; --surface-3:#2a2a2d; --press:#3a3a3d;
  --ink:#f5f5f7; --ink-2:#d2d2d7; --gray:#a1a1a6; --gray-3:#6e6e73;
  --hairline:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.4); --line-hover:rgba(255,255,255,.28);
  --on-ink:#000; --link:#2997ff; --accent:#ff9f45;
  --glass-bg:rgba(42,42,46,.5); --glass-bg-strong:rgba(28,28,31,.82); --glass-border:rgba(255,255,255,.14);
  --glass-rim:rgba(0,0,0,.5); --glass-hi:rgba(255,255,255,.22); --glass-shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.45); --glass-sheen:rgba(255,255,255,.1);
  --grad:linear-gradient(100deg, #ffd88a 0%, #ffb44d 45%, #ff7a3d 100%);
  color-scheme:dark; position:relative; isolation:isolate; overflow:hidden;
  background:#000; color:var(--ink); padding-block:var(--band);
}
.game::before{
  content:''; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%, rgba(255,170,60,.18), transparent 70%), radial-gradient(40% 30% at 85% 55%, rgba(255,120,40,.10), transparent 70%);
}
.game__head{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.game__icon{ width:112px; height:auto; border-radius:28px; background:#fff; padding:10px; box-shadow:0 20px 50px rgba(255,170,60,.25), inset 0 1px 0 rgba(255,255,255,.6); margin-bottom:26px; }
.game__title{ margin-top:14px; font-size:clamp(4rem, calc(12 * var(--vw)), 9rem); font-weight:700; line-height:.92; letter-spacing:-.045em; }
.game__tag{ margin-top:18px; font-size:clamp(1.4rem, calc(2.6 * var(--vw)), 2.25rem); font-weight:600; letter-spacing:-.015em; color:var(--ink-2); }
.game__head .btns{ justify-content:center; }
.game__award{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 16px 8px 8px; border-radius:980px; font-size:14px; color:var(--ink-2);
  background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 var(--glass-hi); }
.game__award i{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#e7b07a,#9a5a28); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.25); }

.game__film{ margin-top:clamp(48px, calc(7 * var(--vw)), 88px); border-radius:var(--radius); overflow:hidden; aspect-ratio:16 / 9; background:#111; box-shadow:0 40px 100px rgba(255,150,50,.12), 0 0 0 1px var(--hairline); }
.game__play{ position:relative; display:block; width:100%; height:100%; cursor:pointer; }
.game__play img{ width:100%; height:100%; object-fit:cover; transition:transform 1200ms var(--ease), filter 600ms ease; }
.game__play::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); }
.game__play:hover img{ transform:scale(1.02); filter:brightness(1.05); }
.game__play-btn{
  position:absolute; z-index:1; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 12px 40px rgba(0,0,0,.35);
  transition:transform 400ms var(--ease), background 300ms ease;
}
.game__play-btn svg{ width:34px; height:34px; margin-left:4px; }
.game__play:hover .game__play-btn{ transform:scale(1.08); background:rgba(255,255,255,.28); }
.game__play-label{ position:absolute; z-index:1; left:0; right:0; bottom:22px; text-align:center; font-size:15px; font-weight:500; color:#fff; }
.game__film iframe{ display:block; width:100%; height:100%; border:0; }

.game__story{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px, calc(5 * var(--vw)), 80px); align-items:end; margin-top:clamp(64px, calc(9 * var(--vw)), 120px); }
.game__statement{ font-size:clamp(1.7rem, calc(3.2 * var(--vw)), 2.9rem); font-weight:600; line-height:1.12; letter-spacing:-.02em; }
.game__statement .dim{ color:var(--gray-3); }
.game__copy{ font-size:clamp(1.05rem, calc(1.4 * var(--vw)), 1.2rem); line-height:1.55; color:var(--gray); }
@media (max-width:860px){ .game__story{ grid-template-columns:1fr; } }

.game__roles{ margin-top:clamp(72px, calc(10 * var(--vw)), 130px); }
.game__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.role{ display:flex; flex-direction:column; padding:28px 28px 30px; min-height:210px; }
.role h4{ margin-top:22px; font-size:22px; font-weight:600; letter-spacing:-.015em; }
.role p{ margin-top:8px; color:var(--gray); font-size:16px; line-height:1.45; }
@media (max-width:900px){ .game__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .game__grid{ grid-template-columns:1fr; } .role{ min-height:0; } }

.game__gallery{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap); margin-top:clamp(56px, calc(7 * var(--vw)), 96px); }
.game__shot{ display:block; border-radius:var(--radius); overflow:hidden; aspect-ratio:16 / 9; cursor:zoom-in; box-shadow:0 0 0 1px var(--hairline); }
.game__shot--wide{ grid-column:1 / -1; }
.game__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1100ms var(--ease); }
.game__shot:hover img{ transform:scale(1.025); }
.game__shot:active{ transform:scale(.99); }
@media (max-width:560px){ .game__gallery{ grid-template-columns:1fr; } }

.game__credit{ margin-top:clamp(40px, calc(5 * var(--vw)), 64px); text-align:center; color:var(--gray); font-size:15px; }
.game__credit .more{ margin-left:8px; }
@media print{ .game{ display:none; } }
@media (max-width:560px){ .game__play-label{ display:none; } .game__play-btn{ width:68px; height:68px; margin:-34px 0 0 -34px; } }

/* =====================================================================
   RESPONSIVE PASS (apple.com-style phones, consistent on every screen)
   ===================================================================== */

/* headlines scale with the screen so the longest word always fits its column */
.ab-hero__title{ font-size:clamp(2.6rem, calc(6.2 * var(--vw)), 6.25rem); }
.intro__title{ font-size:clamp(2.6rem, calc(8.4 * var(--vw)), 7.75rem); overflow-wrap:break-word; }
.game__icon{ object-fit:contain; aspect-ratio:631 / 500; height:auto; }

/* ---------- phones: Apple-style swipe rails instead of tall stacks of cards ---------- */
@media (max-width:760px){
  :root{ --gutter:20px; --band:clamp(64px, calc(16 * var(--vw)), 88px); --radius:20px; }

  .cards3, .honors, .grid-cards, .game__grid, .thoughts, .exps{
    display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:none;
    grid-auto-columns:min(84%, 340px); align-items:stretch; gap:12px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1); padding:6px var(--gutter) 14px; scroll-padding-inline:var(--gutter);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .cards3::-webkit-scrollbar, .honors::-webkit-scrollbar, .grid-cards::-webkit-scrollbar,
  .game__grid::-webkit-scrollbar, .thoughts::-webkit-scrollbar, .exps::-webkit-scrollbar{ display:none; }
  .cards3 > *, .honors > *, .grid-cards > *, .game__grid > *, .thoughts > *, .exps > *{
    scroll-snap-align:start; grid-column:auto !important; grid-row:auto !important; min-height:0; margin:0;
  }
  /* inside a rail, cards are revealed as a group, not one by one off-screen */
  .js .cards3 > .reveal, .js .honors > .reveal, .js .grid-cards > .reveal,
  .js .game__grid > .reveal, .js .thoughts > .reveal, .js .exps > .reveal{ opacity:1; transform:none; transition-delay:0ms; }
  .lcard{ min-height:220px; }
  .thought{ min-height:260px; }
  .exp{ min-height:260px; }

  /* type: Apple phone scale */
  .h2{ font-size:clamp(1.9rem, calc(8.4 * var(--vw)), 2.4rem); }
  .h1{ font-size:clamp(2.2rem, calc(10 * var(--vw)), 3rem); }
  .lead{ font-size:17px; }
  .sub{ font-size:clamp(1.15rem, calc(5 * var(--vw)), 1.35rem); }
  .section-head{ margin-bottom:28px; gap:10px; }
  .section-head .lead{ max-width:none; }

  /* hero areas */
  .intro{ padding-top:clamp(56px, calc(14 * var(--svh)), 96px); padding-bottom:28px; }
  .intro__row{ margin-top:22px; gap:22px; }
  .intro .btns, .ab-hero .btns{ width:100%; }
  .intro .btns .btn, .ab-hero .btns .btn{ flex:1 1 0; min-width:0; }
  .ab-hero{ padding-top:24px; }
  .ab-hero__grid{ gap:28px; }
  .ab-hero__photo{ max-width:none; aspect-ratio:4 / 5; }
  .lab-hero{ padding-top:clamp(56px, calc(14 * var(--svh)), 96px); padding-bottom:24px; }

  /* filters: one swipeable line of 44px chips */
  .filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 10px; }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ flex:0 0 auto; min-height:44px; padding-inline:18px; }

  /* comfortable tap targets */
  .gnav__brand{ min-height:44px; min-width:44px; }
  .more{ min-height:44px; }
  .cv-contact{ gap:0 18px; }
  .cv-contact a{ display:inline-flex; align-items:center; min-height:44px; }
  .gfoot__links a{ display:inline-flex; align-items:center; min-height:40px; }

  /* work: posters keep their real shape, captions tighten */
  .work{ gap:36px; }
  .wcard__head{ margin-top:14px; }
  .work-more{ padding:26px 22px; }
  .work-more .btn{ width:100%; }

  /* about story */
  .beats{ gap:30px; }
  .beat__text{ font-size:clamp(1.45rem, calc(6.4 * var(--vw)), 1.75rem); line-height:1.18; }
  .beat-sign{ margin-top:40px; }
  .honor{ padding:24px 24px 26px; }
  .honor strong, .honor--feature strong{ font-size:clamp(1.7rem, calc(7.6 * var(--vw)), 2.1rem); }
  .honor__medals{ flex-direction:column; align-items:flex-start; }
  .tl{ padding:22px; }
  .sheet{ padding:0 18px; }

  /* lab */
  .shelf__img{ --h:clamp(210px, calc(62 * var(--vw)), 280px); }
  .shelf-bar{ margin-bottom:12px; }
  .game__head .btns{ width:100%; flex-direction:column; align-items:stretch; }
  .game__title{ font-size:clamp(3.4rem, calc(18 * var(--vw)), 5rem); }
  .game__tag{ font-size:clamp(1.25rem, calc(5.6 * var(--vw)), 1.6rem); }
  .game__icon{ width:96px; border-radius:24px; }
  .game__film{ margin-inline:calc(var(--gutter) * -1); border-radius:0; }
  .game__statement{ font-size:clamp(1.5rem, calc(6.6 * var(--vw)), 1.9rem); }
  .game__gallery{ gap:12px; }
  .game__credit .more{ display:flex; justify-content:center; margin:8px 0 0; }

  /* contact */
  .cta-big{ padding-block:72px 64px; }
  .cta-big__title{ font-size:clamp(3rem, calc(15 * var(--vw)), 4.5rem); }
  .cta-big__row .btns{ width:100%; }
  .cta-big__row .btn{ flex:1 1 0; }
}

/* very small phones (iPhone SE / 320px) */
@media (max-width:360px){
  :root{ --gutter:16px; }
  .intro__title, .ab-hero__title{ font-size:clamp(2.3rem, calc(12.6 * var(--vw)), 2.8rem); }
  .cards3, .honors, .grid-cards, .game__grid, .thoughts, .exps{ grid-auto-columns:88%; }
  .intro .btns, .ab-hero .btns{ flex-direction:column; align-items:stretch; }
  .intro .btns .btn, .ab-hero .btns .btn{ flex:0 0 auto; width:100%; }
}

/* phones held sideways: short screens, keep heroes compact */
@media (max-height:500px) and (orientation:landscape){
  .intro, .lab-hero{ padding-top:40px; }
  .intro__title{ font-size:clamp(2.4rem, calc(7 * var(--vw)), 4rem); }
  .ab-hero__photo{ max-height:calc(70 * var(--svh)); width:auto; aspect-ratio:4 / 5; }
}

/* tablets: two-up grids instead of squeezed three/four-up */
@media (min-width:761px) and (max-width:1060px){
  .cards3, .grid-cards, .game__grid, .exps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cards3 > :last-child:nth-child(odd), .exps > :last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* big screens: the content column grows with the window instead of leaving wide empty sides */
@media (min-width:1500px){
  :root{ --max:clamp(1280px, calc(86 * var(--vw)), 1920px); }
}
@media (max-width:760px){ .item__title a{ display:inline-block; padding-block:11px; margin-block:-11px; } }

/* =====================================================================
   PHONE REDESIGN (iPhone / apple.com patterns) — overrides everything above
   ===================================================================== */
@media (max-width:760px){
  html{ scroll-padding-top:64px; }
  body{ font-size:17px; }

  /* ---------- global nav: full-width frosted bar, plain icons ---------- */
  .gnav, .gnav:not(.is-scrolled):not(.is-open){ padding:0; }
  .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    height:52px; max-width:none; padding:0 6px 0 16px; border-radius:0; border:0; gap:4px;
    background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 1px 0 var(--hairline);
  }
  .gnav.is-open .gnav__inner{ background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .gnav__brand{ gap:8px; min-height:44px; margin-right:auto; }
  .gnav__brand img{ width:22px; }
  .gnav__brand span{ display:inline; font-size:11.5px; letter-spacing:.14em; }
  .theme-toggle, .gnav__toggle{
    width:44px; height:44px; margin:0; border:0; border-radius:50%; background:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--ink);
  }
  .theme-toggle:hover{ background:var(--surface-3); color:var(--ink); }
  .theme-toggle svg{ width:19px; height:19px; }
  .gnav__toggle{ margin-left:0 !important; }

  /* menu: full-screen sheet with large rows, like apple.com on iPhone */
  .gnav .gnav__links{
    position:fixed; top:52px; left:0; right:0; bottom:0; height:auto; max-height:none;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 20px calc(28px + env(safe-area-inset-bottom)); border:0; border-radius:0;
    background:var(--bg); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    font-size:28px; font-weight:600; letter-spacing:-.015em;
    transform:none; overflow-y:auto;
  }
  .gnav .gnav__links > a:not(.gnav__mobile-cta){
    display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:0;
    border-bottom:1px solid var(--hairline); color:var(--ink);
  }
  .gnav .gnav__links > a:not(.gnav__mobile-cta)::after{ content:'\203A'; font-size:28px; font-weight:400; color:var(--gray-3); }
  .gnav .gnav__links > a[aria-current="page"]{ color:var(--link); }
  .gnav .gnav__links .gnav__mobile-cta{ margin-top:28px; width:100%; min-height:52px; justify-content:center; }

  /* ---------- buttons: flat Apple pills ---------- */
  .btn{ min-height:48px; padding:12px 22px; font-size:17px; }
  .btn--sm{ min-height:40px; }
  .btn--ghost, .work-more .btn--ghost, .work-more:hover .btn--ghost{
    background:var(--surface-3); color:var(--ink); border-color:transparent; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .btn:not(.btn--ghost){ box-shadow:none; }
  .btns{ gap:10px; }

  /* chips and small controls: flat, no glass shadows */
  .filter, .chip, .pills span, .rnav, .cs__close, .honor__icon, .honor__medal, .game__award{ box-shadow:none; }
  .filter{ background:var(--surface-3); border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; font-size:15px; }
  .filter[aria-pressed="true"]{ background:var(--ink); }
  .pills span{ background:var(--surface-3); border-color:transparent; }

  /* cards: solid, quiet, no floating shadows */
  .glass-tile, .stat, .lcard, .honor, .gcard, .thought, .exp, .tl, .role{
    background:var(--surface-2); border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .glass-tile::after{ display:none; }
  .game .role{ background:#1c1c1e; }
  .ambient::before{ opacity:.7; }

  /* ---------- headings & spacing rhythm ---------- */
  .kicker{ font-size:11px; letter-spacing:.22em; }
  .section-head{ margin-bottom:24px; }
  .h2{ font-size:clamp(1.9rem, calc(8.6 * var(--vw)), 2.25rem); line-height:1.1; }
  .lead{ font-size:17px; line-height:1.45; }

  /* ---------- home ---------- */
  .intro{ padding-top:40px; padding-bottom:20px; }
  .intro__title{ margin-top:14px; font-size:clamp(2.6rem, calc(12 * var(--vw)), 3.4rem); line-height:1.02; letter-spacing:-.03em; }
  .intro__note{ font-size:17px; }
  .filters{ margin-bottom:22px; }
  .wcard__media{ border-radius:16px; }
  .wcard__head{ margin-top:12px; }
  .wcard__title{ font-size:21px; }
  .wcard__desc{ font-size:15.5px; }
  .work-more{ border:0; }

  /* contact */
  .cta-big{ padding-block:64px 56px; }
  .cta-big__title{ font-size:clamp(3rem, calc(15 * var(--vw)), 4rem); }
  .cta-big__row{ flex-direction:column; align-items:stretch; gap:16px; }
  .cta-big__mail{ font-size:19px; word-break:break-word; }

  /* ---------- about ---------- */
  .ab-hero{ padding-top:16px; }
  .ab-hero__photo{ border-radius:20px; aspect-ratio:1 / 1; }
  .ab-hero__photo img{ object-position:50% 30%; }
  .ab-hero__title{ font-size:clamp(2.6rem, calc(12 * var(--vw)), 3.4rem); }
  .ab-hero .sub{ font-size:19px; margin-top:14px; }
  .ab-hero .btns{ flex-direction:column; align-items:stretch; }
  .ab-hero .btns .btn{ width:100%; flex:0 0 auto; }
  /* contact details as an inset list */
  .ab-hero .cv-contact{
    display:grid; grid-template-columns:1fr; gap:0; margin-top:20px; padding:0 16px;
    border-radius:16px; background:var(--surface-2); font-size:16px;
  }
  .ab-hero .cv-contact a{ min-height:50px; justify-content:space-between; border-bottom:1px solid var(--hairline); background:none; }
  .ab-hero .cv-contact a:last-child{ border-bottom:0; }
  .ab-hero .cv-contact a::after{ content:'\2197'; color:var(--gray-3); font-size:14px; }
  .beat__when{ font-size:11px; }
  .item__head{ flex-direction:column; gap:2px; }
  .item__when{ white-space:normal; }
  .spec{ padding-block:28px; }
  #resume .section-head .btns{ width:100%; }
  #resume .section-head .btns .btn{ flex:1 1 0; }

  /* ---------- lab ---------- */
  .lab-hero{ padding-top:40px; padding-bottom:16px; }
  .shelf-nav{ display:none; }
  .shelf-bar{ margin-bottom:12px; }
  .shelf__title{ font-size:15px; }
  .shelf__cat{ font-size:13px; }

  /* ---------- footer: apple.com-style stacked list ---------- */
  .gfoot__inner{ flex-direction:column-reverse; align-items:stretch; gap:20px; padding:8px 20px calc(28px + env(safe-area-inset-bottom)); border-top:0; }
  .gfoot__links{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; border-top:1px solid var(--hairline); }
  .gfoot__links a{ min-height:48px; border-bottom:1px solid var(--hairline); font-size:14px; background:none; }
  .gfoot{ background:var(--surface); }
  .gfoot__inner > span{ font-size:12px; line-height:1.5; }
}
@media (max-width:360px){
  .gnav__brand span{ display:none; }
}

/* ---------- lab: Cell-O thumbnail (App Store "Today" card) + game sheet ---------- */
.gthumb{
  position:relative; display:block; overflow:hidden; isolation:isolate; border-radius:var(--radius);
  width:100%; aspect-ratio:16 / 7; min-height:340px; background:#111; color:#fff;
  box-shadow:0 0 0 1px var(--hairline), 0 24px 60px rgba(0,0,0,.14);
  transition:transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.gthumb:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--hairline), 0 34px 80px rgba(0,0,0,.2); }
.gthumb:active{ transform:scale(.985); }
.gthumb__media, .gthumb__media img{ position:absolute; inset:0; width:100%; height:100%; }
.gthumb__media img{ object-fit:cover; object-position:50% 100%; transition:transform 1200ms var(--ease); }
.gthumb:hover .gthumb__media img{ transform:scale(1.04); }
.gthumb__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%); }
.gthumb__top{ position:absolute; z-index:1; left:clamp(22px, calc(3 * var(--vw)), 36px); right:clamp(22px, calc(3 * var(--vw)), 36px); top:clamp(22px, calc(3 * var(--vw)), 34px); }
.gthumb__eyebrow{ display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.gthumb__title{ display:block; margin-top:8px; font-size:clamp(2rem, calc(4.4 * var(--vw)), 3.6rem); font-weight:700; line-height:1.02; letter-spacing:-.03em; }
.gthumb__bar{
  position:absolute; z-index:1; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:14px;
  padding:12px 12px 12px 12px; border-radius:calc(var(--radius) - 8px);
  background:rgba(30,30,32,.45); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.gthumb__icon{ flex:0 0 auto; width:52px; height:52px; object-fit:contain; border-radius:13px; background:#fff; padding:4px; }
.gthumb__meta{ flex:1 1 auto; min-width:0; }
.gthumb__meta strong{ display:block; font-size:17px; font-weight:600; }
.gthumb__meta span{ display:block; margin-top:2px; font-size:13.5px; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gthumb__btn{ flex:0 0 auto; min-height:34px; padding:7px 20px; border-radius:980px; background:#fff; color:#0071e3; font-size:15px; font-weight:600; display:inline-flex; align-items:center; }

dialog.game-sheet{
  --bg:#000; --surface-2:#1c1c1e; --surface-3:#2a2a2d; --press:#3a3a3d; --ink:#f5f5f7; --gray:#a1a1a6; --hairline:rgba(255,255,255,.12);
  --nav-bg:rgba(0,0,0,.72); color-scheme:dark; background:#000; color:#f5f5f7;
}
dialog.game-sheet::backdrop{ background:#000; }
dialog.game-sheet .cs__bar{ background:rgba(0,0,0,.72); border-bottom-color:rgba(255,255,255,.12); }
dialog.game-sheet .cs__close{ background:#2a2a2d; color:#f5f5f7; }
dialog.game-sheet .game{ padding-top:clamp(40px, calc(6 * var(--vw)), 72px); }
@media (max-width:760px){
  .gthumb{ aspect-ratio:4 / 5; min-height:0; }
  .gthumb__media img{ object-position:55% 70%; }
  .gthumb__title{ font-size:clamp(2rem, calc(10 * var(--vw)), 2.6rem); }
  .gthumb__bar{ left:10px; right:10px; bottom:10px; gap:12px; padding:10px; }
  .gthumb__icon{ width:46px; height:46px; }
}

/* =====================================================================
   HOME (redo): personal, specific, no slogan gradients or colour blobs
   ===================================================================== */
.hh{ padding-top:clamp(64px, calc(11 * var(--svh)), 132px); padding-bottom:clamp(56px, calc(7 * var(--vw)), 96px); }
.hh__status{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 12px; border-radius:980px; font-size:14px; color:var(--ink-2); background:var(--surface-2); }
.hh__dot{ width:8px; height:8px; border-radius:50%; background:#30d158; box-shadow:0 0 0 4px rgba(48,209,88,.18); animation:hh-pulse 2.4s ease-in-out infinite; }
@keyframes hh-pulse{ 50%{ box-shadow:0 0 0 7px rgba(48,209,88,.06); } }
.hh__title{ text-wrap:balance; margin-top:26px; font-size:clamp(2.6rem, calc(5.6 * var(--vw)), 5.25rem); font-weight:700; line-height:1.02; letter-spacing:-.035em; color:var(--ink); }
.hh__soft{ color:var(--gray-3); }
.hh__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 64px; align-items:end; margin-top:clamp(24px, calc(3 * var(--vw)), 36px); }
.hh__lede{ max-width:56ch; font-size:clamp(1.08rem, calc(1.45 * var(--vw)), 1.3rem); line-height:1.5; color:var(--gray); }
.hh__row .btns{ margin-top:0; }
.hh__art{ margin-top:clamp(40px, calc(6 * var(--vw)), 80px); }
.hh__art picture, .hh__art img{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.hh__art img{ box-shadow:0 0 0 1px var(--hairline); }
.hh__art figcaption{ margin-top:12px; font-size:13px; color:var(--gray-3); }

/* work heading sits beside the filters */
.work-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 32px; margin-bottom:clamp(28px, calc(4 * var(--vw)), 48px); }
.work-head .filters{ margin-bottom:0; }

/* off the clock: a row of real work at true proportions */
.otc{
  display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  --edge:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding:4px var(--edge) 8px; scroll-padding-inline:var(--edge);
}
.otc::-webkit-scrollbar{ display:none; }
.otc__item{ flex:0 0 auto; scroll-snap-align:start; border-radius:var(--radius-sm); overflow:hidden; box-shadow:0 0 0 1px var(--hairline); background:var(--surface-2); }
.otc__item img{ display:block; height:clamp(240px, calc(26 * var(--vw)), 380px); width:auto; transition:transform 900ms var(--ease); }
.otc__item:hover img{ transform:scale(1.03); }
.otc__item:active{ transform:scale(.985); }
.section-head .more{ align-self:flex-end; }

/* about teaser */
.teaser{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, calc(6 * var(--vw)), 96px); align-items:center; }
.teaser__photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4 / 5; background:var(--surface-2); }
.teaser__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.teaser__quote{ margin-top:18px; font-size:clamp(1.6rem, calc(3 * var(--vw)), 2.6rem); font-weight:600; line-height:1.15; letter-spacing:-.02em; color:var(--ink); }
.teaser .more{ margin-top:22px; }

@media (max-width:860px){
  .hh__row{ grid-template-columns:1fr; }
  .teaser{ grid-template-columns:1fr; }
  .teaser__photo{ aspect-ratio:1; }
}
@media (max-width:760px){
  .hh{ padding-top:32px; padding-bottom:40px; }
  .hh__status{ font-size:13px; }
  .hh__title{ margin-top:20px; font-size:clamp(2.3rem, calc(10.6 * var(--vw)), 3rem); letter-spacing:-.03em; }
  .hh__lede{ font-size:17px; }
  .hh__row .btns{ width:100%; }
  .hh__row .btns .btn{ flex:1 1 0; }
  .hh__art{ margin-top:32px; }
  .hh__art picture, .hh__art img{ border-radius:16px; }
  .work-head{ display:block; }
  .work-head .h2{ margin-bottom:16px; }
  .otc__item img{ height:clamp(220px, calc(60 * var(--vw)), 280px); }
  .teaser__quote{ font-size:clamp(1.4rem, calc(6.4 * var(--vw)), 1.75rem); }
}
@media (max-width:360px){ .hh__row .btns{ flex-direction:column; } .hh__row .btns .btn{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .hh__dot{ animation:none; } }

/* ---------- desktop nav matches the phone bar: full-width frosted strip, plain icons ---------- */
@media (min-width:761px){
  html{ scroll-padding-top:64px; }
  .gnav, .gnav:not(.is-scrolled):not(.is-open){ padding:0; }
  .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    height:52px; max-width:none; padding:0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    border-radius:0; border:0;
    background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 1px 0 var(--hairline);
  }
  .gnav__brand img{ width:22px; }
  .gnav__brand{ font-size:11.5px; letter-spacing:.14em; }
  .gnav__cta, .gnav__cta:hover{
    border:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    color:var(--gray); padding:6px 8px; min-height:36px;
  }
  .gnav__cta:hover{ color:var(--ink); }
  .theme-toggle, .theme-toggle:hover{
    width:40px; height:40px; border:0; box-shadow:none; background:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--ink);
  }
  .theme-toggle:hover{ background:var(--surface-3); }
  .theme-toggle svg{ width:18px; height:18px; }
  .gnav__cta + .theme-toggle{ margin-left:4px; }
}

/* dark entertainment band for drawings (like apple.com's tv+ shelf) */
.band--dark{
  --bg:#000; --surface:#111113; --surface-2:#1c1c1e; --surface-3:#2a2a2d; --ink:#f5f5f7; --ink-2:#d2d2d7; --gray:#a1a1a6; --gray-3:#6e6e73;
  --hairline:rgba(255,255,255,.12); --link:#2997ff; color-scheme:dark; background:#000; color:var(--ink);
}
.otc-band__head{ text-align:center; display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(32px, calc(4 * var(--vw)), 52px); }
.otc-band__sub{ margin-top:10px; font-size:clamp(1.1rem, calc(1.7 * var(--vw)), 1.5rem); color:var(--gray); }
.otc-band__head .more{ margin-top:12px; font-size:17px; min-height:44px; }
.otc-band .otc__item{ box-shadow:none; border-radius:18px; }
:root[data-theme="dark"] .otc-band{ background:#0b0b0c; }

@media (max-width:760px){ .otc-band__head{ text-align:center; } }

/* apple surfaces: flat pills, no glows */
.btn:not(.btn--ghost){ box-shadow:none; }

/* =====================================================================
   LANDING HERO (apple product hero): eyebrow, headline, CTA, fine print,
   then the whole illustration filling what is left of the first screen
   ===================================================================== */
.ah{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:calc(calc(100 * var(--svh)) - 52px); padding:clamp(36px, calc(6.5 * var(--svh)), 76px) 0 clamp(28px, calc(4 * var(--svh)), 48px);
}
.ah__text{ display:flex; flex-direction:column; align-items:center; }
.ah__eyebrow{ font-size:clamp(17px, calc(1.5 * var(--vw)), 21px); font-weight:600; letter-spacing:.007em; color:var(--ink); }
.ah__title{
  margin-top:clamp(4px, calc(.6 * var(--vw)), 10px);
  font-size:clamp(2.6rem, min(calc(7.2 * var(--vw)), calc(11.5 * var(--svh))), 6rem); font-weight:700; line-height:1.04; letter-spacing:-.015em; color:var(--ink);
}
.ah__sub{
  margin-top:clamp(8px, calc(1.4 * var(--svh)), 16px); max-width:32ch;
  font-size:clamp(1.2rem, min(calc(2 * var(--vw)), calc(3.4 * var(--svh))), 1.75rem); font-weight:600; line-height:1.18; letter-spacing:.007em; color:var(--gray); text-wrap:balance;
}
.ah__ctas{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 28px; margin-top:clamp(18px, calc(3 * var(--svh)), 30px); }
.ah__ctas .more{ font-size:17px; min-height:44px; }
.ah__meta{ margin-top:clamp(10px, calc(1.6 * var(--svh)), 16px); font-size:14px; line-height:1.43; color:var(--gray); }
.ah__art{ position:relative; flex:1 1 auto; width:calc(100% - 2 * var(--gutter)); max-width:1200px; min-height:300px; margin-top:clamp(28px, calc(4.5 * var(--svh)), 52px); }
.ah__art picture{ position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-start; }
.ah__art img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; border-radius:28px; }

/* =====================================================================
   SELECTED WORK (apple feature cards): grey cards, whole posters, text below
   ===================================================================== */
.pw__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; margin-bottom:clamp(28px, calc(3.4 * var(--vw)), 44px); }
.pw__title{ font-size:clamp(2.5rem, calc(4.6 * var(--vw)), 3.5rem); font-weight:600; line-height:1.07; letter-spacing:-.005em; color:var(--ink); }
.pw__head .more{ font-size:17px; min-height:44px; }
.pw__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.pcard{
  display:flex; flex-direction:column; border-radius:28px; overflow:hidden; padding:clamp(20px, calc(2.2 * var(--vw)), 28px);
  background:var(--surface); color:var(--ink); transition:transform 500ms var(--ease);
}
.pcard__media img{ display:block; width:100%; height:auto; border-radius:16px; transition:transform 900ms var(--ease); }
.pcard__media{ border-radius:16px; overflow:hidden; }
.pcard__text{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(18px, calc(2 * var(--vw)), 26px) 4px 4px; }
.pcard__eyebrow{ font-size:14px; font-weight:600; color:var(--gray); }
.pcard__title{ margin-top:4px; font-size:clamp(1.75rem, calc(2.4 * var(--vw)), 2rem); font-weight:600; line-height:1.12; letter-spacing:.004em; }
.pcard__desc{ margin-top:8px; max-width:48ch; font-size:17px; line-height:1.47; letter-spacing:-.022em; color:var(--gray); }
.pcard__more{ margin-top:14px; display:inline-flex; align-items:center; gap:4px; font-size:17px; color:var(--link); }
.pcard__more::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.pcard:hover .pcard__media img{ transform:scale(1.025); }
.pcard:hover .pcard__more{ text-decoration:underline; }
.pcard:hover .pcard__more::after{ transform:translate(3px,-1px); }
.pcard:active{ transform:scale(.99); }
.pcard:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* first project: two-column feature card, text left and poster right */
.pcard--wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); align-items:center; gap:clamp(24px, calc(3.4 * var(--vw)), 56px); padding:clamp(24px, calc(3 * var(--vw)), 40px); }
.pcard--wide .pcard__media{ order:2; }
.pcard--wide .pcard__text{ order:1; padding:0 0 0 clamp(4px, calc(1.2 * var(--vw)), 16px); }
.pcard--wide .pcard__title{ font-size:clamp(2.25rem, calc(3.8 * var(--vw)), 3rem); line-height:1.08; }
.pcard--wide .pcard__desc{ font-size:clamp(17px, calc(1.4 * var(--vw)), 19px); }

@media (max-width:900px){
  .pcard--wide{ grid-template-columns:1fr; }
  .pcard--wide .pcard__media{ order:0; }
  .pcard--wide .pcard__text{ padding:4px 4px 4px; }
}
@media (max-width:760px){
  .ah{ min-height:0; padding:36px 0 36px; }
  .ah__title{ font-size:clamp(2.2rem, calc(10.4 * var(--vw)), 3.2rem); }
  .ah__sub{ font-size:clamp(1.15rem, calc(5.2 * var(--vw)), 1.35rem); }
  .ah__ctas{ flex-direction:column; gap:4px; width:100%; }
  .ah__ctas .btn{ width:min(100%, 320px); }
  .ah__meta{ font-size:13px; max-width:30ch; }
  .ah__art{ min-height:0; width:100%; padding-inline:var(--gutter); margin-top:32px; }
  .ah__art picture{ position:static; display:block; }
  .ah__art img{ width:100%; max-height:none; border-radius:18px; }
  .pw__grid{ grid-template-columns:1fr; gap:14px; }
  .pcard, .pcard--wide{ border-radius:22px; padding:14px; }
  .pcard__media, .pcard__media img{ border-radius:12px; }
  .pcard__text, .pcard--wide .pcard__text{ padding:16px 6px 8px; }
  .pcard__title, .pcard--wide .pcard__title{ font-size:clamp(1.6rem, calc(7 * var(--vw)), 1.9rem); }
  .pcard__desc, .pcard--wide .pcard__desc{ font-size:16px; }
}
.pw{ padding-top:clamp(36px, calc(5 * var(--vw)), 72px); }
.pw__head{ align-items:flex-end; }
@media (max-width:900px){ .pcard--wide{ gap:0; } }

/* =====================================================================
   HERO v26: apple.com homepage tile. Black in both themes, name + tagline,
   filled and outlined pills, the illustration filling the rest of the screen
   ===================================================================== */
.ah{
  --ink:#f5f5f7; --gray:#a1a1a6; --link:#2997ff;
  background:#000; color:var(--ink); color-scheme:dark;
  min-height:calc(calc(100 * var(--svh)) - 52px); padding:clamp(44px, calc(7.5 * var(--svh)), 84px) 0 clamp(36px, calc(6 * var(--svh)), 64px);
}
.ah__title{ margin-top:0; font-size:clamp(2.75rem, min(calc(5.6 * var(--vw)), calc(9 * var(--svh))), 5rem); font-weight:600; line-height:1.05; letter-spacing:-.015em; color:var(--ink); }
.ah__sub{ margin-top:clamp(4px, calc(.8 * var(--svh)), 10px); max-width:none; font-size:clamp(1.3rem, min(calc(2.4 * var(--vw)), calc(4 * var(--svh))), 2.1rem); font-weight:400; line-height:1.15; letter-spacing:.004em; color:var(--ink); }
.ah__ctas{ gap:14px; margin-top:clamp(20px, calc(3.4 * var(--svh)), 34px); }
.ah__ctas .btn{ min-height:48px; padding:12px 26px; font-size:17px; }
.btn--outline, .btn--outline:hover{ background:transparent; color:var(--link); border:1px solid var(--link); }
.btn--outline:hover{ background:var(--link); color:#fff; }
.ah__art{ margin-top:clamp(36px, calc(6 * var(--svh)), 72px); max-width:1240px; }
.ah__art img{ border-radius:24px; }
:root:not([data-theme="dark"]) .ah + .pw{ margin-top:0; }

@media (max-width:760px){
  .ah{ min-height:0; padding:52px 0 40px; }
  .ah__title{ font-size:clamp(2.5rem, calc(12 * var(--vw)), 3.25rem); }
  .ah__sub{ font-size:clamp(1.25rem, calc(5.6 * var(--vw)), 1.5rem); }
  .ah__ctas{ flex-direction:row; justify-content:center; width:auto; gap:12px; }
  .ah__ctas .btn{ width:auto; min-height:44px; padding:10px 22px; }
  .ah__art{ margin-top:40px; }
  .ah__art img{ border-radius:16px; }
}
/* the nav goes dark while it sits over the black hero, like apple.com */
.gnav.gnav--dark:not(.is-open){
  --ink:#f5f5f7; --ink-2:#d2d2d7; --gray:#d2d2d7; --gray-3:#86868b; --hairline:rgba(255,255,255,.1);
  --nav-bg:#161617; --surface-3:#2a2a2d; color-scheme:dark; color:#f5f5f7;
}
.gnav .gnav__inner{ transition:background-color 300ms var(--ease), box-shadow 300ms var(--ease); }

/* =====================================================================
   SELECTED WORK v28: apple.com homepage tiles. Each project gets a deep
   colour taken from its own photo; text centred on top, the whole photo
   running edge to edge along the bottom. 12px gutters, square-edged tiles.
   ===================================================================== */
.pw{ padding:clamp(56px, calc(7 * var(--vw)), 96px) 0 12px; background:var(--bg); }
.pw__head{ display:block; margin-bottom:clamp(24px, calc(3 * var(--vw)), 40px); }
.ptiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:0 12px; max-width:2400px; margin:0 auto; }
.ptile{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden;
  background:var(--tile, #000); color:#f5f5f7; min-height:clamp(420px, calc(38 * var(--vw)), 580px);
  --link:#2997ff;
}
.ptile--full{ grid-column:1 / -1; min-height:clamp(520px, calc(48 * var(--vw)), 760px); }
.ptile__text{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:clamp(40px, calc(4.4 * var(--vw)), 60px) 24px 0; }
.ptile__eyebrow{ font-size:clamp(14px, calc(1.1 * var(--vw)), 17px); font-weight:600; color:rgba(245,245,247,.7); }
.ptile__title{ margin-top:4px; font-size:clamp(2.25rem, calc(3.6 * var(--vw)), 3rem); font-weight:600; line-height:1.08; letter-spacing:-.005em; color:#f5f5f7; }
.ptile--full .ptile__title{ font-size:clamp(2.6rem, calc(4.8 * var(--vw)), 3.5rem); line-height:1.07; }
.ptile__tag{ margin-top:6px; font-size:clamp(1.15rem, calc(1.7 * var(--vw)), 1.5rem); line-height:1.2; letter-spacing:.007em; color:#f5f5f7; }
.ptile--full .ptile__tag{ font-size:clamp(1.25rem, calc(2 * var(--vw)), 1.75rem); }
.ptile__ctas{ display:flex; gap:14px; margin-top:clamp(16px, calc(1.8 * var(--vw)), 22px); }
.ptile__ctas .btn{ min-height:40px; padding:9px 22px; font-size:17px; }

/* the photo: full width, natural shape, its top edge melting into the tile colour */
.ptile__img{ position:relative; width:100%; margin-top:auto; }
.ptile__img::before{
  content:''; position:absolute; z-index:1; left:0; right:0; top:-1px; height:42%; pointer-events:none;
  background:linear-gradient(var(--tile), color-mix(in srgb, var(--tile) 0%, transparent));
}
.ptile__img img{ display:block; width:100%; height:auto; transition:transform 1200ms var(--ease); transform-origin:50% 100%; }
.ptile:hover .ptile__img img{ transform:scale(1.04); }
.ptile:focus-visible{ outline:3px solid #2997ff; outline-offset:-3px; }

/* behance: posters rising out of the bottom of a black tile */
.ptile--be{ min-height:clamp(460px, calc(40 * var(--vw)), 600px); }
.ptile__fan{ position:relative; width:100%; margin-top:auto; height:clamp(200px, calc(21 * var(--vw)), 320px); display:flex; justify-content:center; align-items:flex-start; gap:clamp(10px, calc(1.4 * var(--vw)), 20px); }
.ptile__fan img{
  width:clamp(110px, calc(11.5 * var(--vw)), 190px); height:auto; aspect-ratio:3 / 4; object-fit:cover; border-radius:clamp(8px, calc(.8 * var(--vw)), 12px);
  transform:translateY(var(--y, 18%)) rotate(var(--r, 0deg)); transition:transform 800ms var(--ease);
}
.ptile__fan img:nth-child(1){ --r:-6deg; --y:30%; }
.ptile__fan img:nth-child(2){ --r:-3deg; --y:14%; }
.ptile__fan img:nth-child(3){ --r:0deg;  --y:6%; }
.ptile__fan img:nth-child(4){ --r:3deg;  --y:14%; }
.ptile__fan img:nth-child(5){ --r:6deg;  --y:30%; }
.ptile--be:hover .ptile__fan img{ transform:translateY(calc(var(--y, 18%) - 8%)) rotate(calc(var(--r, 0deg) * 1.4)); }

@media (max-width:760px){
  .pw{ padding-top:48px; }
  .ptiles{ grid-template-columns:1fr; padding:0; gap:12px; }
  .ptile, .ptile--full{ min-height:0; }
  .ptile__text{ padding:40px 20px 0; }
  .ptile__title, .ptile--full .ptile__title{ font-size:clamp(2rem, calc(9 * var(--vw)), 2.5rem); }
  .ptile__tag, .ptile--full .ptile__tag{ font-size:clamp(1.1rem, calc(4.8 * var(--vw)), 1.3rem); }
  /* phones: the wide photo gets a taller window so it doesn't shrink to a strip */
  .ptile__img{ margin-top:24px; aspect-ratio:16 / 10; }
  .ptile__img img{ height:100%; object-fit:cover; }
  .ptile--be{ min-height:0; }
  .ptile__fan{ margin-top:32px; height:170px; gap:8px; }
  .ptile__fan img{ width:calc(22 * var(--vw)); }
  .ptile__fan img:nth-child(1), .ptile__fan img:nth-child(5){ display:none; }
}
@media (prefers-reduced-motion:reduce){ .ptile__img img, .ptile__fan img{ transition:none; } }
/* half tiles: photo follows the text, no dead space */
.ptile:not(.ptile--full){ min-height:0; }
.ptile:not(.ptile--full) .ptile__img{ margin-top:clamp(28px, calc(3 * var(--vw)), 44px); }
/* trim the 1-2px light edge some photos carry */
.ptile__img{ overflow:hidden; }
.ptile__img img{ width:calc(100% + 6px); max-width:none; margin-left:-3px; }
/* behance: a light tile, so it doesn't merge into the black drawings band below */
.ptile--be{ --tile:#f5f5f7 !important; background:#f5f5f7; color:#1d1d1f; --link:#0066cc; }
.ptile--be .ptile__eyebrow{ color:#6e6e73; }
.ptile--be .ptile__title, .ptile--be .ptile__tag{ color:#1d1d1f; }
.ptile--be .ptile__fan img{ box-shadow:0 20px 44px rgba(0,0,0,.22); }
:root[data-theme="dark"] .ptile--be{ background:#1c1c1e; color:#f5f5f7; --link:#2997ff; }
:root[data-theme="dark"] .ptile--be .ptile__title, :root[data-theme="dark"] .ptile--be .ptile__tag{ color:#f5f5f7; }
:root[data-theme="dark"] .ptile--be .ptile__eyebrow{ color:#a1a1a6; }

/* =====================================================================
   HERO v29: immersive scene (apple vision pro / tv+ style).
   Wide screens: the drawing covers the whole first screen, weighted to the
   figure, and the words sit in a black fade along the bottom.
   Tall screens: words first, then the whole drawing edge to edge.
   ===================================================================== */
.ah--scene{
  position:relative; isolation:isolate; overflow:hidden; justify-content:flex-end;
  min-height:calc(calc(100 * var(--svh)) - 52px); padding:0 0 clamp(40px, calc(7 * var(--svh)), 80px);
}
.ah--scene .ah__art{
  position:absolute; inset:0; z-index:-1; margin:0; width:auto; max-width:none; min-height:0; flex:none;
}
.ah--scene .ah__art picture{ position:absolute; inset:0; display:block; }
.ah--scene .ah__art img{
  width:100%; height:100%; max-width:none; max-height:none; border-radius:0;
  object-fit:cover; object-position:50% 18%;
  animation:ah-settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
/* black fade: light at the top for the nav, deep at the foot for the words */
.ah--scene .ah__art::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 68%, #000 100%);
}
.ah--scene .ah__text{ position:relative; }
.ah--scene .ah__eyebrow{ font-size:clamp(17px, calc(1.5 * var(--vw)), 21px); font-weight:600; letter-spacing:.007em; color:rgba(245,245,247,.86); }
.ah--scene .ah__title{ margin-top:6px; font-size:clamp(2.75rem, min(calc(6.4 * var(--vw)), calc(11 * var(--svh))), 6rem); font-weight:700; line-height:1.04; letter-spacing:-.018em; color:#f5f5f7; text-wrap:balance; }
.ah--scene .ah__sub{ margin-top:clamp(6px, calc(1 * var(--svh)), 12px); font-size:clamp(1.3rem, min(calc(2.4 * var(--vw)), calc(4 * var(--svh))), 2rem); font-weight:600; line-height:1.15; letter-spacing:.006em; color:rgba(245,245,247,.86); }
.ah--scene .ah__ctas{ margin-top:clamp(20px, calc(3.4 * var(--svh)), 32px); }
@keyframes ah-settle{ from{ transform:scale(1.07); opacity:.4; } to{ transform:none; opacity:1; } }

/* tall screens (phones, portrait tablets): stack the words, then the whole drawing */
@media (max-aspect-ratio:11/10){
  .ah--scene{ min-height:0; padding:clamp(44px, calc(7 * var(--vw)), 72px) 0 0; justify-content:flex-start; }
  .ah--scene .ah__text{ order:-1; }
  .ah--scene .ah__art{ position:relative; inset:auto; z-index:0; width:100%; margin-top:clamp(36px, calc(6 * var(--vw)), 56px); }
  .ah--scene .ah__art picture{ position:static; }
  .ah--scene .ah__art img{ height:auto; object-fit:initial; }
  .ah--scene .ah__art::after{ background:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 82%, rgba(0,0,0,.5) 100%); }
}
@media (max-width:760px){
  .ah--scene .ah__title{ font-size:clamp(2.4rem, calc(11.4 * var(--vw)), 3.4rem); }
  .ah--scene .ah__sub{ font-size:clamp(1.2rem, calc(5.4 * var(--vw)), 1.45rem); }
  .ah--scene .ah__ctas{ flex-direction:row; gap:12px; width:auto; }
  .ah--scene .ah__ctas .btn{ width:auto; }
}
@media (prefers-reduced-motion:reduce){ .ah--scene .ah__art img{ animation:none; } }
.ah--scene .ah__art{ padding:0; }
.ah--scene .ah__art img{ object-position:50% 6%; }
@media (min-aspect-ratio:11/10){
  .ah--scene .ah__art::after{
    background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 34%, rgba(0,0,0,.55) 54%, rgba(0,0,0,.86) 74%, #000 100%);
  }
}

/* behance: a quiet full-width text strip, no imagery */
.be-strip{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:24px 48px;
  padding:clamp(36px, calc(4.4 * var(--vw)), 64px) clamp(28px, calc(6 * var(--vw)), 96px); background:var(--surface); color:var(--ink);
}
.be-strip__eyebrow{ font-size:clamp(14px, calc(1.1 * var(--vw)), 17px); font-weight:600; color:var(--gray); }
.be-strip__title{ margin-top:4px; font-size:clamp(2rem, calc(3.6 * var(--vw)), 3rem); font-weight:600; line-height:1.08; letter-spacing:-.005em; }
.be-strip__tag{ margin-top:8px; max-width:44ch; font-size:clamp(17px, calc(1.5 * var(--vw)), 21px); line-height:1.38; color:var(--gray); }
.be-strip__btn{ flex:0 0 auto; gap:6px; min-height:48px; padding:12px 26px; }
.be-strip__btn svg{ width:12px; height:12px; transition:transform 260ms var(--ease); }
.be-strip:hover .be-strip__btn svg{ transform:translate(2px,-2px); }
.be-strip:focus-visible{ outline:3px solid var(--blue); outline-offset:-3px; }
:root[data-theme="dark"] .be-strip{ background:#1c1c1e; }
@media (max-width:760px){
  .be-strip{ flex-direction:column; align-items:flex-start; padding:40px 20px 44px; }
  .be-strip__btn{ width:100%; }
}

/* lab title: apple display spacing — room between lines, descenders never clipped */
.lab-hero .intro__title{ margin-top:clamp(14px, calc(1.6 * var(--vw)), 22px); line-height:1.07; letter-spacing:-.022em; max-width:12ch; }
.lab-hero .intro__title .grad{ display:inline-block; padding-bottom:.06em; margin-bottom:-.06em; }
.lab-hero{ padding-bottom:clamp(48px, calc(6 * var(--vw)), 80px); }
@media (max-width:760px){ .lab-hero .intro__title{ line-height:1.08; letter-spacing:-.02em; } }

/* =====================================================================
   LIQUID GLASS BUTTONS (site-wide). Neutral, translucent, blurred, with a
   specular rim — no salesy blue fills. Light glass on light surfaces,
   clear glass on dark surfaces and photos.
   ===================================================================== */
:root{
  --lg-bg:rgba(120,120,128,.12); --lg-bg-hover:rgba(120,120,128,.2);
  --lg-border:rgba(0,0,0,.07); --lg-hi:rgba(255,255,255,.95); --lg-lo:rgba(0,0,0,.05);
  --lg-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --lg-ink:#1d1d1f; --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 58%);
}
:root[data-theme="dark"], .ah, .pcard2, .ptile, .band--dark, .game, dialog.game-sheet, .gthumb, .gnav--dark{
  --lg-bg:rgba(255,255,255,.13); --lg-bg-hover:rgba(255,255,255,.22);
  --lg-border:rgba(255,255,255,.2); --lg-hi:rgba(255,255,255,.45); --lg-lo:rgba(255,255,255,.06);
  --lg-shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.3);
  --lg-ink:#f5f5f7; --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%);
}
:root .btn:not(.x-glass){
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--lg-ink); font-weight:500;
  background:var(--lg-sheen), var(--lg-bg);
  border:1px solid var(--lg-border);
  box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  transition:background-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
/* a soft light that follows the rim, like glass catching the room */
:root .btn:not(.x-glass)::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 140% at 50% -40%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  opacity:.7; transition:opacity 240ms var(--ease);
}
:root .btn:not(.x-glass):hover,
:root :is(.pcard2, .be-strip, .gthumb, .work-more):hover .btn:not(.x-glass){
  background:var(--lg-sheen), var(--lg-bg-hover); color:var(--lg-ink); border-color:var(--lg-border);
  box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-shadow), 0 0 0 4px rgba(255,255,255,.04);
}
:root .btn:not(.x-glass):hover::before{ opacity:1; }
:root .btn:not(.x-glass):active{ transform:scale(.96); }
:root .btn:not(.x-glass):focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }
/* the secondary pill is just a clearer pane of the same glass */
:root .btn--ghost:not(.x-glass), :root .btn--outline:not(.x-glass){ font-weight:400; background:var(--lg-sheen), transparent; }
:root .btn--ghost:not(.x-glass):hover, :root .btn--outline:not(.x-glass):hover{ background:var(--lg-sheen), var(--lg-bg); }
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root .btn:not(.x-glass){ background:var(--lg-bg-hover); }
}
@media (prefers-reduced-transparency:reduce){
  :root .btn:not(.x-glass){ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface-3); }
}

/* =====================================================================
   PROJECT THUMBNAILS v32: rounded photo cards. The photo fills the card,
   the black fade rises from the bottom, words sit on the fade.
   ===================================================================== */
.pw{ padding-bottom:var(--band); }
.pgrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, calc(1.6 * var(--vw)), 22px); }
.pcard2{
  position:relative; isolation:isolate; display:flex; align-items:flex-end; overflow:hidden;
  aspect-ratio:4 / 3.1; border-radius:28px; background:var(--tile, #000); color:#f5f5f7;
  transition:transform 500ms var(--ease);
}
.pcard2--wide{ grid-column:1 / -1; aspect-ratio:2.25 / 1; }
.pcard2__img{ position:absolute; inset:0; z-index:-1; }
.pcard2__img picture, .pcard2__img img{ display:block; width:100%; height:100%; }
.pcard2__img img{ object-fit:cover; object-position:var(--focus, 50% 50%); transition:transform 1400ms var(--ease); }
.pcard2__img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 56%, rgba(0,0,0,.86) 84%, #000 100%);
}
.pcard2__text{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px, calc(2.6 * var(--vw)), 40px); max-width:40rem; }
.pcard2__eyebrow{ font-size:clamp(13px, calc(1 * var(--vw)), 15px); font-weight:600; color:rgba(245,245,247,.72); }
.pcard2__title{ margin-top:4px; font-size:clamp(1.75rem, calc(2.6 * var(--vw)), 2.4rem); font-weight:600; line-height:1.08; letter-spacing:-.005em; color:#f5f5f7; }
.pcard2--wide .pcard2__title{ font-size:clamp(2.2rem, calc(4 * var(--vw)), 3.4rem); }
.pcard2__tag{ margin-top:6px; font-size:clamp(16px, calc(1.3 * var(--vw)), 19px); line-height:1.35; color:rgba(245,245,247,.86); }
.pcard2--wide .pcard2__tag{ font-size:clamp(17px, calc(1.6 * var(--vw)), 22px); }
.pcard2__btn{ margin-top:clamp(14px, calc(1.6 * var(--vw)), 20px); min-height:40px; padding:9px 20px; font-size:15px; }
.pcard2:hover .pcard2__img img{ transform:scale(1.045); }
.pcard2:active{ transform:scale(.99); }
.pcard2:focus-visible{ outline:3px solid #2997ff; outline-offset:3px; }

/* behance strip sits in the same grid, same rounding */
.pgrid .be-strip{ border-radius:28px; }

@media (max-width:760px){
  .pgrid{ grid-template-columns:1fr; gap:14px; }
  .pcard2, .pcard2--wide{ aspect-ratio:4 / 3.4; border-radius:22px; }
  .pcard2__text{ padding:22px 20px 22px; }
  .pcard2__title, .pcard2--wide .pcard2__title{ font-size:clamp(1.7rem, calc(7.6 * var(--vw)), 2.1rem); }
  .pcard2__tag, .pcard2--wide .pcard2__tag{ font-size:16px; }
  .pgrid .be-strip{ border-radius:22px; }
  :root .be-strip__btn.btn:not(.x-glass){ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .pcard2__img img{ transition:none; } }
/* clearer glass over photos and dark scenes */
.ah, .pcard2, .band--dark, .game, dialog.game-sheet, .gthumb{
  --lg-bg:rgba(255,255,255,.17); --lg-bg-hover:rgba(255,255,255,.27);
  --lg-border:rgba(255,255,255,.3); --lg-hi:rgba(255,255,255,.55);
  --lg-sheen:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 60%);
}
@media (max-width:760px){ .pcard2, .pcard2--wide{ aspect-ratio:5 / 4; } }

/* =====================================================================
   DARK ONLY + TOP BAR v33 (apple.com global nav, dark)
   One quiet frosted strip. Desktop: brand and links spread evenly across a
   centred 1024px row, like apple.com. Phones: brand + menu icon.
   ===================================================================== */
html{ color-scheme:dark; }
.theme-toggle{ display:none !important; }
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){
  --nav-bg:rgba(22,22,23,.8); --ink:#f5f5f7; --gray:#d2d2d7; --gray-3:#86868b; --hairline:rgba(255,255,255,.08);
  height:48px; padding:0; border:0; color:#f5f5f7;
  background:var(--nav-bg); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  box-shadow:none;
}
.gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
  height:48px; background:transparent; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.gnav.is-scrolled{ box-shadow:0 1px 0 rgba(255,255,255,.06); }
.gnav__brand{ color:#f5f5f7; }
.gnav__brand img{ width:20px; }
.gnav__brand span{ font-size:12px; font-weight:600; letter-spacing:.12em; }
.gnav__links a, .gnav__cta, .gnav__cta:hover{
  font-size:12.5px; font-weight:400; letter-spacing:-.005em; color:rgba(245,245,247,.8);
  background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:color 200ms var(--ease);
}
.gnav__links a:hover, .gnav__links a[aria-current="page"], .gnav__cta:hover{ color:#fff; }
.gnav__toggle i, .gnav__toggle i::before{ background:#f5f5f7; }
html{ scroll-padding-top:60px; }

@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    max-width:1024px; margin:0 auto; padding:0 22px; gap:0; justify-content:space-between;
  }
  /* links become direct items of the row so everything spaces evenly */
  .gnav__links{ display:contents; }
  .gnav__links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; }
  .gnav__cta{ margin:0; min-height:44px; padding:0 8px; display:inline-flex; align-items:center; }
  .gnav__toggle{ display:none !important; }
}
@media (max-width:760px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ padding:0 4px 0 16px; }
  .gnav .gnav__links{ top:48px; background:#000; }
  .gnav .gnav__links > a:not(.gnav__mobile-cta){ color:#f5f5f7; border-bottom-color:rgba(255,255,255,.12); }
  .gnav.is-open, .gnav.is-open .gnav__inner{ background:#000; }
}
/* an open menu sheet is position:fixed inside the bar; a backdrop-filter on the bar would trap it */
.gnav.is-open.is-open, .gnav.is-open.is-open .gnav__inner{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#000; }
@media (max-width:760px){
  .gnav .gnav__links > a:not(.gnav__mobile-cta){ font-size:28px; font-weight:600; letter-spacing:-.015em; color:#f5f5f7; }
  .gnav .gnav__links > a[aria-current="page"]{ color:#2997ff; }
}

/* =====================================================================
   SELECTED WORK v34: a cinematic catalogue. Each photo shown whole at its
   real wide shape (no cropping, no upscaling), a quiet meta row beneath:
   number, title + discipline, one-liner, link.
   ===================================================================== */
.pw__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:clamp(28px, calc(3.4 * var(--vw)), 48px); padding-bottom:clamp(16px, calc(1.6 * var(--vw)), 22px); border-bottom:1px solid rgba(255,255,255,.14); }
.pw__count{ font-size:14px; color:#86868b; letter-spacing:.02em; }
.pgrid{ display:flex; flex-direction:column; gap:clamp(56px, calc(6.5 * var(--vw)), 96px); }
.prow{ display:block; color:#f5f5f7; }
.prow__img{ border-radius:18px; overflow:hidden; background:#111; aspect-ratio:1838 / 515; }
.prow__img picture, .prow__img img{ display:block; width:100%; height:100%; }
.prow__img img{ object-fit:cover; object-position:var(--focus, 50% 50%); transition:transform 1400ms var(--ease), filter 600ms var(--ease); filter:saturate(.95); }
.prow:hover .prow__img img{ transform:scale(1.03); filter:saturate(1.08); }
.prow__meta{
  display:grid; grid-template-columns:3.5rem minmax(0,1.1fr) minmax(0,1fr) auto; gap:8px clamp(20px, calc(2.6 * var(--vw)), 40px);
  align-items:baseline; padding-top:clamp(18px, calc(2 * var(--vw)), 26px);
}
.prow__num{ font-size:14px; font-weight:500; color:#6e6e73; font-variant-numeric:tabular-nums; }
.prow__title{ font-size:clamp(1.6rem, calc(2.5 * var(--vw)), 2.25rem); font-weight:600; line-height:1.1; letter-spacing:-.01em; color:#f5f5f7; }
.prow__niche{ display:block; margin-top:6px; font-size:14px; color:#86868b; }
.prow__desc{ font-size:17px; line-height:1.47; letter-spacing:-.022em; color:#a1a1a6; max-width:44ch; }
.prow__more{ display:inline-flex; align-items:center; gap:4px; font-size:17px; color:#2997ff; white-space:nowrap; }
.prow__more::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.prow:hover .prow__more{ text-decoration:underline; }
.prow:hover .prow__more::after{ transform:translate(3px,-1px); }
.prow:focus-visible{ outline:none; }
.prow:focus-visible .prow__img{ outline:2px solid #2997ff; outline-offset:4px; }
.pgrid .be-strip{ border-radius:18px; margin-top:clamp(-24px, calc(-2 * var(--vw)), -8px); }

@media (max-width:900px){
  .prow__meta{ grid-template-columns:2.5rem minmax(0,1fr) auto; }
  .prow__desc{ grid-column:2 / -1; }
  .prow__more{ grid-column:3; grid-row:1; }
}
@media (max-width:760px){
  .pgrid{ gap:44px; }
  /* phones: a taller window on the same photo so it isn't a thin strip */
  .prow__img{ aspect-ratio:16 / 9; border-radius:14px; }
  .prow__meta{ grid-template-columns:2rem minmax(0,1fr); padding-top:14px; }
  .prow__more{ grid-column:2; grid-row:auto; }
  .prow__desc{ font-size:16px; }
  .prow__title{ font-size:clamp(1.5rem, calc(6.6 * var(--vw)), 1.8rem); }
}
@media (prefers-reduced-motion:reduce){ .prow__img img{ transition:none; } }
.pw__head{ border-bottom:0; background:linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 50% 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* =====================================================================
   SELECTED WORK v35: apple.com-style bento. Dark rounded tiles of mixed
   sizes; words top-left, the whole deck poster (never cropped) below.
   ===================================================================== */
.pgrid{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(12px, calc(1.4 * var(--vw)), 20px);
  grid-template-areas:
    "cp cp cp cp cp cp cp cp gp gp gp gp"
    "cp cp cp cp cp cp cp cp nd nd nd nd"
    "cd cd cd cd cd am am am am am am am";
}
.bento2--carepulse{ grid-area:cp; }
.bento2--gpay{ grid-area:gp; }
.bento2--noda{ grid-area:nd; }
.bento2--cooldownkanpur{ grid-area:cd; }
.bento2--alphamafia{ grid-area:am; }
.pgrid .be-strip{ grid-column:1 / -1; margin-top:0; border-radius:28px; }

.bento2{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border-radius:28px; background:#161617; color:#f5f5f7;
  padding:clamp(22px, calc(2.4 * var(--vw)), 34px) clamp(22px, calc(2.4 * var(--vw)), 34px) 0;
  transition:background-color 400ms var(--ease), transform 500ms var(--ease);
}
.bento2:hover{ background:#1d1d1f; }
.bento2:active{ transform:scale(.99); }
.bento2__text{ display:flex; flex-direction:column; align-items:flex-start; }
.bento2__eyebrow{ font-size:13px; font-weight:600; color:#86868b; letter-spacing:.01em; }
.bento2__title{ margin-top:6px; font-size:clamp(1.4rem, calc(2 * var(--vw)), 1.75rem); font-weight:600; line-height:1.12; letter-spacing:-.005em; color:#f5f5f7; }
.bento2__tag{ margin-top:6px; font-size:clamp(15px, calc(1.15 * var(--vw)), 17px); line-height:1.4; color:#a1a1a6; max-width:34ch; }
.bento2__btn{ margin-top:16px; min-height:36px; padding:7px 18px; font-size:14px; }
/* the poster: whole, sitting on the bottom edge like a product in an apple tile */
.bento2__poster{
  margin-top:auto; padding-top:clamp(20px, calc(2.2 * var(--vw)), 32px);
}
.bento2__poster img{
  display:block; width:100%; height:auto; border-radius:14px 14px 0 0;
  box-shadow:0 -1px 0 rgba(255,255,255,.06), 0 -20px 50px rgba(0,0,0,.35);
  transform:translateY(6px); transition:transform 700ms var(--ease);
}
.bento2:hover .bento2__poster img{ transform:translateY(0) scale(1.01); }
.bento2:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }

/* the big tile gets big words */
.bento2--carepulse{ padding:clamp(28px, calc(3.4 * var(--vw)), 48px) clamp(28px, calc(3.4 * var(--vw)), 48px) 0; }
.bento2--carepulse .bento2__title{ font-size:clamp(2.2rem, calc(3.8 * var(--vw)), 3.25rem); line-height:1.06; }
.bento2--carepulse .bento2__tag{ font-size:clamp(17px, calc(1.5 * var(--vw)), 21px); }
.bento2--carepulse .bento2__btn{ min-height:42px; padding:9px 22px; font-size:15px; }

/* tablets: two across, the big tile on its own row */
@media (max-width:1060px){
  .pgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-areas:"cp cp" "gp nd" "cd am"; }
}
@media (max-width:760px){
  .pgrid{ grid-template-columns:1fr; grid-template-areas:"cp" "gp" "nd" "cd" "am"; gap:12px; }
  .bento2, .bento2--carepulse{ border-radius:22px; padding:24px 20px 0; }
  .bento2--carepulse .bento2__title{ font-size:clamp(1.9rem, calc(8.4 * var(--vw)), 2.3rem); }
  .bento2__poster img{ border-radius:10px 10px 0 0; }
  .pgrid .be-strip{ border-radius:22px; }
}
@media (prefers-reduced-motion:reduce){ .bento2__poster img{ transition:none; } }
/* v35b: bento rhythm — equal bottom row, wider poster in the big tile, glass › chip instead of buttons */
.pgrid{
  grid-template-areas:
    "cp cp cp cp cp cp cp cp gp gp gp gp"
    "cp cp cp cp cp cp cp cp nd nd nd nd"
    "cd cd cd cd cd cd am am am am am am";
}
.bento2{ position:relative; }
.bento2__text{ padding-right:48px; }
.bento2__go{
  position:absolute; top:clamp(18px, calc(2 * var(--vw)), 26px); right:clamp(18px, calc(2 * var(--vw)), 26px);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#f5f5f7;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 18px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  transition:transform 400ms var(--ease), background-color 300ms var(--ease);
}
.bento2__go svg{ width:12px; height:12px; }
.bento2:hover .bento2__go{ transform:scale(1.1); background-color:rgba(255,255,255,.2); }
.bento2--carepulse .bento2__poster{ margin-inline:calc(-1 * clamp(28px, calc(3.4 * var(--vw)), 48px) + clamp(14px, calc(1.6 * var(--vw)), 22px)); }
.bento2--carepulse .bento2__go{ width:44px; height:44px; top:clamp(24px, calc(2.8 * var(--vw)), 40px); right:clamp(24px, calc(2.8 * var(--vw)), 40px); }
.bento2--carepulse .bento2__go svg{ width:14px; height:14px; }
@media (max-width:1060px){ .pgrid{ grid-template-areas:"cp cp" "gp nd" "cd am"; } }
@media (max-width:760px){
  .pgrid{ grid-template-areas:"cp" "gp" "nd" "cd" "am"; }
  .bento2--carepulse .bento2__poster{ margin-inline:-8px; }
}
.pgrid .be-strip{ background:#161617; padding:clamp(28px, calc(3.4 * var(--vw)), 48px); } .pgrid .be-strip:hover{ background:#1d1d1f; }

/* =====================================================================
   SELECTED WORK v36: stacked poster cards. The deck poster IS the card.
   Each pins below the nav; the next one slides over and the covered card
   eases back and dims. Phones: a plain stack.
   ===================================================================== */
.pgrid{ display:block; }
.scard{
  --w:min(100%, calc((calc(100 * var(--svh)) - 150px) * 16 / 9));
  position:sticky; top:calc(64px + var(--i) * 10px); display:block; width:var(--w); margin:0 auto clamp(40px, calc(6 * var(--svh)), 72px);
  border-radius:24px; overflow:hidden; background:#fff; color:#1d1d1f;
  box-shadow:0 -1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.55);
  transform:scale(calc(1 - .06 * var(--p, 0))); transform-origin:50% 0;
  filter:brightness(calc(1 - .45 * var(--p, 0)));
  will-change:transform;
}
.scard.reveal, .js .scard.reveal.is-in{ transform:scale(calc(1 - .06 * var(--p, 0))); }
.scard__poster img{ display:block; width:100%; height:auto; transition:transform 1200ms var(--ease); }
.scard:hover .scard__poster img{ transform:scale(1.015); }
/* one glass pill, bottom-right on the poster */
.scard__pill{
  position:absolute; right:clamp(14px, calc(1.6 * var(--vw)), 24px); bottom:clamp(14px, calc(1.6 * var(--vw)), 24px);
  display:inline-flex; align-items:center; gap:12px; padding:6px 6px 6px 16px; border-radius:980px;
  background:rgba(29,29,31,.72); color:#f5f5f7; font-size:14px;
  border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  transition:transform 400ms var(--ease), background-color 300ms var(--ease);
}
.scard__niche{ color:rgba(245,245,247,.7); }
.scard__cta{ padding:7px 14px; border-radius:980px; background:rgba(255,255,255,.16); font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.scard__cta::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.scard:hover .scard__pill{ transform:translateY(-2px); background:rgba(29,29,31,.85); }
.scard:hover .scard__cta::after{ transform:translate(3px,-1px); }
.scard:focus-visible{ outline:3px solid #2997ff; outline-offset:4px; }
.pgrid .be-strip{ width:var(--w, 100%); max-width:min(100%, calc((calc(100 * var(--svh)) - 150px) * 16 / 9)); margin:clamp(24px, calc(4 * var(--svh)), 48px) auto 0; position:relative; z-index:2; }

@media (max-width:760px){
  .scard{ position:relative; top:auto; width:100%; margin:0 0 16px; border-radius:16px; transform:none; filter:none; }
  .scard__pill{ position:static; display:flex; justify-content:space-between; border-radius:0; margin:0; padding:10px 10px 10px 16px;
    background:#1c1c1e; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .pgrid .be-strip{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){ .scard{ transform:none !important; filter:none !important; } }

/* =====================================================================
   TOP BAR ELEMENTS v37 (bar glass unchanged): name in sentence case,
   links in a centred segmented pill with a sliding glass indicator,
   Contact as a small glass pill.
   ===================================================================== */
.gnav__brand{ gap:10px; text-transform:none; }
.gnav__brand img{ width:22px; }
.gnav__brand span{ font-size:14px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:#f5f5f7; }

@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; max-width:1200px; padding:0 var(--gutter); gap:16px;
  }
  .gnav__brand{ justify-self:start; }
  .gnav__links{
    display:flex; position:relative; justify-self:center; gap:2px; padding:3px; border-radius:980px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .gnav__links a{
    position:relative; z-index:1; min-height:30px; padding:0 16px; border-radius:980px;
    font-size:13px; font-weight:500; color:rgba(245,245,247,.68);
  }
  .gnav__links a:hover{ color:#fff; }
  .gnav__links a[aria-current="page"]{ color:#fff; }
  /* the sliding glass indicator */
  .gnav__pill{
    position:absolute; z-index:0; top:3px; bottom:3px; left:0; width:0; border-radius:980px; pointer-events:none; opacity:0;
    background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)), rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.3);
    transition:transform 420ms cubic-bezier(.3,.9,.3,1.05), width 420ms cubic-bezier(.3,.9,.3,1.05), opacity 200ms ease;
  }
  .gnav__pill.is-on{ opacity:1; }
  .gnav__cta, .gnav__cta:hover{
    justify-self:end; min-height:30px; padding:0 14px 0 16px; border-radius:980px; gap:4px;
    font-size:13px; font-weight:500; color:#f5f5f7;
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
    transition:background-color 200ms ease, transform 200ms var(--ease);
  }
  .gnav__cta:hover{ background-color:rgba(255,255,255,.16); }
  .gnav__cta:active{ transform:scale(.96); }
}
@media (max-width:760px){
  .gnav__brand span{ display:inline; font-size:15px; }
}
@media (max-width:340px){ .gnav__brand span{ display:none; } }
@media (prefers-reduced-motion:reduce){ .gnav__pill{ transition:opacity 200ms ease; } }

/* hero scroll cue: an abstract thread of light falling down — no arrow, no words */
.ah__cue{
  position:relative; display:block; width:1px; height:clamp(40px, calc(7 * var(--svh)), 64px); margin-top:clamp(22px, calc(4 * var(--svh)), 40px);
  background:linear-gradient(180deg, rgba(245,245,247,0), rgba(245,245,247,.22)); overflow:hidden;
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
.ah__cue::after{
  content:''; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff);
  box-shadow:0 0 6px rgba(255,255,255,.8);
  animation:ah-cue 2.4s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes ah-cue{ 0%{ top:-40%; opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ top:100%; opacity:0; } }
html.is-past-hero .ah__cue{ opacity:0; transform:translateY(10px); }
@media (max-aspect-ratio:11/10){ .ah__cue{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ah__cue::after{ animation:none; top:30%; } }

/* scroll cue v2: a small glass capsule with three dots that light up in a downward cascade */
.ah__cue{
  width:26px; height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  margin-top:clamp(24px, calc(4.4 * var(--svh)), 44px); border-radius:980px; overflow:visible;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03)), rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
}
.ah__cue::after{ content:none; }
.ah__cue i{
  display:block; width:4px; height:4px; border-radius:50%; background:#fff; opacity:.18;
  animation:ah-dots 1.8s ease-in-out infinite;
}
.ah__cue i:nth-child(2){ animation-delay:.2s; }
.ah__cue i:nth-child(3){ animation-delay:.4s; }
@keyframes ah-dots{
  0%, 100%{ opacity:.18; transform:translateY(-2px) scale(.8); box-shadow:none; }
  30%{ opacity:1; transform:translateY(1px) scale(1); box-shadow:0 0 8px rgba(255,255,255,.9); }
  60%{ opacity:.18; transform:translateY(2px) scale(.8); box-shadow:none; }
}
@media (prefers-reduced-motion:reduce){ .ah__cue i{ animation:none; opacity:.5; } }

/* scroll cue v3: editorial hairline chevron (washington post style) — tiny, quiet, slowly drifting */
.ah__cue.ah__cue--chev{
  display:grid; place-items:center; width:44px; height:44px; margin-top:clamp(18px, calc(3.6 * var(--svh)), 36px);
  background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:50%;
  color:rgba(245,245,247,.62); transition:color 300ms var(--ease), opacity 500ms var(--ease), transform 500ms var(--ease);
}
.ah__cue--chev svg{ width:22px; height:11px; animation:ah-drift 2.8s cubic-bezier(.45,0,.25,1) infinite; }
.ah__cue--chev:hover{ color:#fff; }
.ah__cue--chev:focus-visible{ outline:2px solid #2997ff; outline-offset:2px; }
@keyframes ah-drift{
  0%{ transform:translateY(-4px); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateY(4px); opacity:1; }
  100%{ transform:translateY(7px); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .ah__cue--chev svg{ animation:none; } }

/* =====================================================================
   SELECTED WORK v41: stacked cards, refined. Each poster sits in a dark
   glass frame with an info bar. All cards pin at the same spot; the next
   one covers the last completely while it sinks back into the dark.
   ===================================================================== */
.scard{
  --bar:64px;
  --w:min(100%, calc((calc(100 * var(--svh)) - 64px - var(--bar) - 64px) * 16 / 9 + 24px));
  position:sticky; top:64px; width:var(--w); margin:0 auto clamp(48px, calc(8 * var(--svh)), 96px);
  border-radius:30px; overflow:visible; background:none; color:#f5f5f7; box-shadow:none; filter:none;
  transform:scale(calc(1 - .08 * var(--p, 0))); transform-origin:50% 0;
}
.scard.reveal, .js .scard.reveal.is-in{ transform:scale(calc(1 - .08 * var(--p, 0))); }
.scard__frame{
  position:relative; padding:12px 12px 0; border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), #121214;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 -20px 60px rgba(0,0,0,.6);
}
/* the covered card sinks back: a dark veil instead of greying the poster */
.scard__frame::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:#000; opacity:calc(.82 * var(--p, 0));
}
.scard__poster{ border-radius:20px; overflow:hidden; background:#fff; }
.scard__poster img{ display:block; width:100%; height:auto; transition:transform 1200ms var(--ease); }
.scard:hover .scard__poster img{ transform:scale(1.02); }
.scard__bar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  height:var(--bar); padding:0 10px 0 14px;
}
.scard__num{ font-size:13px; font-weight:600; color:#f5f5f7; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.scard__num em{ font-style:normal; font-weight:400; color:#6e6e73; margin-left:4px; }
.scard__name{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.scard__name strong{ font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.scard__name span{ font-size:14px; color:#86868b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard__cta{
  display:inline-flex; align-items:center; gap:4px; min-height:38px; padding:0 16px 0 18px; border-radius:980px;
  font-size:14px; font-weight:500; color:#f5f5f7;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:background-color 250ms var(--ease);
}
.scard__cta::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.scard:hover .scard__cta{ background-color:rgba(255,255,255,.16); }
.scard:hover .scard__cta::after{ transform:translate(3px,-1px); }
.scard:focus-visible{ outline:none; }
.scard:focus-visible .scard__frame{ outline:2px solid #2997ff; outline-offset:3px; }
/* retire the v36 pill */
.scard__pill{ display:none; }

@media (max-width:760px){
  .scard{ --bar:auto; position:relative; top:auto; width:100%; margin:0 0 16px; transform:none; }
  .scard__frame{ padding:8px 8px 0; border-radius:22px; }
  .scard__poster{ border-radius:15px; }
  .scard__frame::after{ display:none; }
  .scard__bar{ grid-template-columns:1fr auto; gap:12px; padding:12px 4px 12px 8px; }
  .scard__num{ display:none; }
  .scard__name{ flex-direction:column; gap:2px; }
  .scard__cta{ min-height:36px; padding:0 14px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){ .scard__frame::after{ display:none; } }

/* =====================================================================
   SELECTED WORK v42: apple newsroom "Featured Stories". A dark band with a
   sideways carousel of large cinematic cards (next one peeking in), title
   on a black fade, dots left and glass arrows right.
   ===================================================================== */
.fs{ --edge:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); background:#161617; padding:clamp(64px, calc(8 * var(--vw)), 104px) 0 clamp(56px, calc(7 * var(--vw)), 88px); color:#f5f5f7; }
.fs__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:clamp(24px, calc(2.6 * var(--vw)), 36px); }
.fs__title{ font-size:clamp(2rem, calc(3.4 * var(--vw)), 2.75rem); font-weight:600; line-height:1.08; letter-spacing:-.005em; }
.fs__all{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 16px; border-radius:980px; font-size:14px; font-weight:500; color:#f5f5f7;
  border:1px solid rgba(255,255,255,.55); transition:background-color 200ms ease, color 200ms ease;
}
.fs__all::after{ content:'\2197'; font-size:.9em; }
.fs__all:hover{ background:#f5f5f7; color:#1d1d1f; }

.fs__track{
  display:flex; gap:clamp(14px, calc(1.6 * var(--vw)), 24px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge); padding:0 var(--edge) 4px; scrollbar-width:none;
}
.fs__track::-webkit-scrollbar{ display:none; }
.fs__track:focus-visible{ outline:2px solid #2997ff; outline-offset:4px; }
.fslide{
  position:relative; isolation:isolate; flex:0 0 min(calc(calc(100 * var(--vw)) - 2 * var(--edge)), 1120px); scroll-snap-align:start;
  aspect-ratio:2.1 / 1; border-radius:24px; overflow:hidden; background:#000; color:#f5f5f7;
  display:flex; align-items:flex-end;
}
.fslide picture{ position:absolute; inset:0; z-index:-1; }
.fslide img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); transition:transform 1400ms var(--ease); }
.fslide::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.5) 66%, rgba(0,0,0,.88) 100%);
}
.fslide picture{ z-index:-2; }
.fslide__text{ padding:clamp(22px, calc(3 * var(--vw)), 44px); max-width:46rem; transition:opacity 400ms var(--ease); }
.fslide__eyebrow{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(245,245,247,.8); }
.fslide__title{ margin-top:8px; font-size:clamp(1.9rem, calc(3.6 * var(--vw)), 3rem); font-weight:700; line-height:1.07; letter-spacing:-.015em; }
.fslide__tag{ margin-top:8px; font-size:clamp(15px, calc(1.3 * var(--vw)), 19px); color:rgba(245,245,247,.82); }
.fslide:hover img{ transform:scale(1.035); }
.fslide:focus-visible{ outline:2px solid #2997ff; outline-offset:-2px; }
.fslide:not(.is-current) .fslide__text{ opacity:.55; }

.fs__foot{ display:flex; justify-content:space-between; align-items:center; margin-top:clamp(18px, calc(2 * var(--vw)), 26px); }
.fs__dots{ display:flex; gap:4px; margin-left:-8px; }
.fs__dot{ width:24px; height:24px; display:grid; place-items:center; border-radius:50%; }
.fs__dot::before{ content:''; width:8px; height:8px; border-radius:50%; background:rgba(245,245,247,.35); transition:background-color 300ms ease; }
.fs__dot[aria-selected="true"]::before{ background:#f5f5f7; }
.fs__arrows{ display:flex; gap:12px; }
.fs__arrow{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#f5f5f7;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:background-color 200ms ease, opacity 200ms ease, transform 200ms var(--ease);
}
.fs__arrow svg{ width:13px; height:13px; }
.fs__arrow:hover:not(:disabled){ background-color:rgba(255,255,255,.18); }
.fs__arrow:active:not(:disabled){ transform:scale(.94); }
.fs__arrow:disabled{ opacity:.35; cursor:default; }

@media (max-width:760px){
  .fs{ padding:56px 0 48px; }
  .fs__all{ font-size:13px; padding:0 14px; }
  .fslide{ flex-basis:calc(calc(100 * var(--vw)) - 2 * var(--edge) - 28px); aspect-ratio:4 / 5; border-radius:20px; }
  .fslide__title{ font-size:clamp(1.7rem, calc(7.4 * var(--vw)), 2.1rem); }
  .fs__arrows{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .fslide img{ transition:none; } }
.fs__all{ white-space:nowrap; flex:0 0 auto; }
@media (max-width:760px){
  .fs__title{ font-size:clamp(1.75rem, calc(7.6 * var(--vw)), 2.1rem); }
  .fs__all{ min-height:34px; padding:0 12px; }
  .fslide{ aspect-ratio:1 / 1; }
}
@media (max-width:760px){
  .fs__all{ min-height:44px; }
  .fs__dots{ gap:0; margin-left:-14px; }
  .fs__dot{ width:44px; height:44px; }
}

/* =====================================================================
   SELECTED WORK v43: pinned sideways stack (apple product-page style).
   The section pins; scrolling down slides each WHOLE poster in from the
   right over the last one, which eases back and dims. Phones: swipe row.
   ===================================================================== */
.hs{ position:relative; background:#000; color:#f5f5f7; }
.hs__stage{ padding:clamp(48px, calc(7 * var(--svh)), 80px) 0 clamp(32px, calc(5 * var(--svh)), 56px); }
.hs__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:clamp(20px, calc(3 * var(--svh)), 36px); }
.hs__title{ font-size:clamp(2rem, calc(3.6 * var(--vw)), 3rem); font-weight:600; line-height:1.07; letter-spacing:-.005em; }
.hs__meta{ display:flex; align-items:center; gap:18px; }
.hs__count{ font-size:14px; color:#86868b; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.hs__count b{ color:#f5f5f7; font-weight:600; }
.hs__dots{ display:flex; gap:2px; }
.hs__dot{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%; }
.hs__dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:rgba(245,245,247,.3); transition:background-color 300ms ease, transform 300ms var(--ease); }
.hs__dot[aria-selected="true"]::before{ background:#f5f5f7; transform:scale(1.15); }
.hs__bar{ display:none; }

/* a framed card: whole poster + info bar */
.hcard{ display:block; color:#f5f5f7; }
.hcard__frame{
  position:relative; padding:12px 12px 0; border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), #141416;
  border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hcard__frame::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:#000; opacity:calc(.75 * var(--c, 0)); }
.hcard__poster{ border-radius:20px; overflow:hidden; background:#fff; }
.hcard__poster img{ display:block; width:100%; height:auto; transition:transform 1200ms var(--ease); }
.hcard:hover .hcard__poster img{ transform:scale(1.015); }
.hcard__bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; padding:10px 8px 10px 12px; }
.hcard__name{ display:flex; align-items:baseline; gap:12px; min-width:0; }
.hcard__name strong{ font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.hcard__name span{ font-size:14px; color:#86868b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hcard__cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:38px; padding:0 16px 0 18px; border-radius:980px;
  font-size:14px; font-weight:500; color:#f5f5f7;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); transition:background-color 250ms var(--ease);
}
.hcard__cta::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.hcard:hover .hcard__cta{ background-color:rgba(255,255,255,.16); }
.hcard:hover .hcard__cta::after{ transform:translate(3px,-1px); }
.hcard:focus-visible{ outline:none; }
.hcard:focus-visible .hcard__frame{ outline:2px solid #2997ff; outline-offset:3px; }

/* ---- desktop & tablet: pinned stage ---- */
@media (min-width:761px){
  .hs{ height:calc((calc(100 * var(--svh)) - 48px) * 4.2); }
  .hs__stage{
    position:sticky; top:48px; height:calc(calc(100 * var(--svh)) - 48px); display:flex; flex-direction:column; overflow:hidden;
    padding:clamp(28px, calc(5 * var(--svh)), 56px) 0 clamp(24px, calc(4 * var(--svh)), 40px);
  }
  .hs__deck{ position:relative; flex:1 1 auto; min-height:0; }
  .hcard{
    --h:100%;
    position:absolute; left:50%; top:0;
    width:min(calc(100% - 2 * var(--gutter)), 1200px, calc((calc(100 * var(--svh)) - 48px - 200px - 76px) * 16 / 9 + 24px));
    transform:translateX(calc(-50% + var(--x, 0%))) scale(calc(1 - .08 * var(--c, 0)));
    transform-origin:50% 50%; will-change:transform;
  }
  .hs:not(.is-pinned) .hcard{ position:relative; left:auto; transform:none; margin:0 auto 24px; }
  .hcard + .hcard{ box-shadow:none; }
  .hcard .hcard__frame{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12), -30px 0 80px rgba(0,0,0,.55); }
  .hs__bar{ display:block; position:relative; width:min(calc(100% - 2 * var(--gutter)), 240px); height:2px; margin:clamp(14px, calc(2.4 * var(--svh)), 24px) auto 0; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
  .hs__bar i{ position:absolute; inset:0; background:#f5f5f7; transform-origin:0 50%; transform:scaleX(0); }
}

/* ---- phones: whole posters in a swipe row ---- */
@media (max-width:760px){
  .hs__head{ align-items:center; }
  .hs__dots{ display:none; }
  .hs__deck{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:0 var(--gutter) 4px; scroll-padding-inline:var(--gutter);
  }
  .hs__deck::-webkit-scrollbar{ display:none; }
  .hcard{ flex:0 0 calc(100% - 36px); scroll-snap-align:start; }
  .hcard__frame{ padding:8px 8px 0; border-radius:22px; }
  .hcard__poster{ border-radius:15px; }
  .hcard__bar{ flex-wrap:wrap; padding:12px 4px 12px 8px; }
  .hcard__name{ flex-direction:column; gap:2px; }
  .hcard__cta{ min-height:40px; padding:0 14px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .hs{ height:auto; }
  .hs__stage{ position:relative; height:auto; }
  .hcard{ position:relative !important; left:auto !important; transform:none !important; margin:0 auto 24px; }
}

.hs-after{ background:#000; padding:0 0 clamp(64px, calc(8 * var(--vw)), 104px); }
.hs-after .be-strip{ border-radius:28px; background:#161617; padding:clamp(28px, calc(3.4 * var(--vw)), 48px); }
.hs-after .be-strip:hover{ background:#1d1d1f; }
@media (max-width:760px){ .hs-after{ padding-top:32px; } .hs-after .be-strip{ border-radius:22px; } }
@media (min-width:761px){
  .hs__head{ width:100%; }
  /* waiting cards sit fully off the right edge until their turn */
  .hcard{ transform:translateX(calc(-50% + var(--k, 0) * (calc(50 * var(--vw)) + 50% + 40px))) scale(calc(1 - .08 * var(--c, 0))); }
}
@media (max-width:760px){ .hs__deck{ align-items:flex-start; } .hs__stage{ padding-bottom:24px; } }

/* =====================================================================
   SELECTED WORK v44: a calm list (how apple designers show their own work).
   Text left, the whole poster right at a comfortable size, hairlines between.
   No pinning, no scroll tricks; everything scans in one easy pass.
   ===================================================================== */
.wl{ background:#000; color:#f5f5f7; padding:clamp(72px, calc(9 * var(--vw)), 128px) 0 clamp(40px, calc(5 * var(--vw)), 64px); }
.wl__head{ margin-bottom:clamp(28px, calc(3.6 * var(--vw)), 48px); }
.wl__title{ font-size:clamp(2.25rem, calc(4 * var(--vw)), 3.5rem); font-weight:600; line-height:1.07; letter-spacing:-.01em; }
.wl__lede{ margin-top:10px; font-size:clamp(17px, calc(1.5 * var(--vw)), 21px); line-height:1.4; color:#86868b; }
.wl__list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.12); }
.wrow{ border-bottom:1px solid rgba(255,255,255,.12); }
.wrow__link{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, calc(4 * var(--vw)), 72px); align-items:center;
  padding:clamp(28px, calc(3.4 * var(--vw)), 44px) 0; color:#f5f5f7;
}
.wrow__text{ display:flex; flex-direction:column; align-items:flex-start; }
.wrow__num{ font-size:13px; font-weight:500; color:#6e6e73; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.wrow__title{ margin-top:14px; font-size:clamp(1.75rem, calc(2.8 * var(--vw)), 2.5rem); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
.wrow__niche{ margin-top:6px; font-size:15px; color:#86868b; }
.wrow__desc{ margin-top:16px; max-width:40ch; font-size:17px; line-height:1.47; letter-spacing:-.022em; color:#a1a1a6; }
.wrow__more{ margin-top:18px; display:inline-flex; align-items:center; gap:4px; font-size:17px; color:#2997ff; }
.wrow__more::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.wrow__poster{ border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.08); transition:transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.wrow__poster img{ display:block; width:100%; height:auto; }
.wrow__link:hover .wrow__poster{ transform:translateY(-4px); box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.6); }
.wrow__link:hover .wrow__more{ text-decoration:underline; }
.wrow__link:hover .wrow__more::after{ transform:translate(3px,-1px); }
.wrow__link:focus-visible{ outline:none; }
.wrow__link:focus-visible .wrow__poster{ outline:2px solid #2997ff; outline-offset:4px; }

.hs-after{ padding-top:clamp(24px, calc(3 * var(--vw)), 40px); }

@media (max-width:860px){
  .wrow__link{ grid-template-columns:1fr; gap:18px; }
  .wrow__poster{ order:-1; border-radius:12px; }
  .wrow__title{ margin-top:8px; font-size:clamp(1.6rem, calc(6.8 * var(--vw)), 2rem); }
  .wrow__desc{ margin-top:10px; font-size:16px; }
  .wrow__more{ margin-top:12px; }
}
@media (prefers-reduced-motion:reduce){ .wrow__poster{ transition:none; } }

/* =====================================================================
   SELECTED WORK v45: poster on a colour field (Buzz Usborne / Ed Chao /
   apple finish-swatch tiles). No repeated text: the poster says it all.
   Two across, every tile the same size; a glass pill appears on hover.
   ===================================================================== */
.wl{ padding-bottom:var(--band); }
.wl__head{ margin-bottom:clamp(24px, calc(3 * var(--vw)), 40px); }
.pfield{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(12px, calc(1.4 * var(--vw)), 20px); }
.pfield__tile{
  position:relative; isolation:isolate; display:grid; place-items:center; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:28px; background:var(--field, #161617); color:#f5f5f7;
  transition:transform 500ms var(--ease);
}
/* a soft light from above, so the field reads as a surface, not a flat fill */
.pfield__tile::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
}
.pfield__poster{
  width:80%; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 30px 60px -10px rgba(0,0,0,.55);
  transition:transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.pfield__poster img{ display:block; width:100%; height:auto; }
.pfield__tile:hover .pfield__poster{ transform:translateY(-6px) scale(1.02); box-shadow:0 4px 10px rgba(0,0,0,.25), 0 40px 80px -10px rgba(0,0,0,.6); }
.pfield__tile:active{ transform:scale(.99); }
.pfield__tile:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }

/* glass pill, revealed on hover / focus (always visible on touch screens) */
.pfield__pill{
  position:absolute; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:4px;
  min-height:36px; padding:0 14px 0 16px; border-radius:980px; font-size:14px; font-weight:500; color:#f5f5f7;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05)), rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  opacity:0; transform:translateY(6px); transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.pfield__pill::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); }
.pfield__tile:hover .pfield__pill, .pfield__tile:focus-visible .pfield__pill, .pfield__pill--on{ opacity:1; transform:none; }
@media (hover:none){ .pfield__pill{ opacity:1; transform:none; } }

/* the sixth tile: behance, words only (nothing here repeats a poster) */
.pfield__tile--be{ --field:#161617; place-items:center start; align-content:center; justify-items:start; padding:clamp(28px, calc(4 * var(--vw)), 56px); gap:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.pfield__be-eyebrow{ font-size:14px; font-weight:600; color:#86868b; }
.pfield__be-title{ margin-top:6px; font-size:clamp(2rem, calc(3.4 * var(--vw)), 3rem); font-weight:600; line-height:1.07; letter-spacing:-.01em; }
.pfield__be-sub{ margin-top:8px; font-size:clamp(16px, calc(1.4 * var(--vw)), 19px); color:#a1a1a6; }
.pfield__tile--be .pfield__pill::after{ content:'\2197'; font-size:.9em; transform:none; }

/* the old list and strip are retired */
.hs-after{ display:none; }

@media (max-width:760px){
  .pfield{ grid-template-columns:1fr; gap:12px; }
  .pfield__tile{ border-radius:22px; aspect-ratio:5 / 4; }
  .pfield__poster{ width:86%; border-radius:8px; }
  .pfield__pill{ right:12px; bottom:12px; min-height:34px; font-size:13px; }
  .pfield__tile--be{ aspect-ratio:auto; min-height:220px; }
}
@media (prefers-reduced-motion:reduce){ .pfield__poster, .pfield__pill{ transition:none; } }

/* =====================================================================
   SELECTED WORK v46: editorial stagger (user's pick, option D).
   Whole posters alternate left/right at ~68% width; a large faint number
   sits behind each. Hover lifts the poster and shows a glass pill.
   ===================================================================== */
.stag{ position:relative; z-index:0; display:flex; flex-direction:column; gap:clamp(48px, calc(6.5 * var(--vw)), 96px); margin-top:clamp(40px, calc(5 * var(--vw)), 64px); }
.stag__item{ position:relative; isolation:isolate; display:block; width:68%; color:#f5f5f7; }
.stag__item:nth-child(even){ align-self:flex-end; }
.stag__num{
  position:absolute; z-index:-1; top:-.55em; font-size:clamp(64px, calc(9 * var(--vw)), 136px); font-weight:700; line-height:1;
  letter-spacing:-.04em; color:#1d1d1f; font-variant-numeric:tabular-nums; pointer-events:none;
  transition:color 500ms var(--ease);
}
.stag__item:nth-child(odd) .stag__num{ right:-.95em; }
.stag__item:nth-child(even) .stag__num{ left:-.95em; }
.stag__poster{
  border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transition:transform 700ms var(--ease), box-shadow 700ms var(--ease);
}
.stag__poster img{ display:block; width:100%; height:auto; }
.stag__item:hover .stag__poster{ transform:translateY(-6px); box-shadow:0 40px 100px rgba(0,0,0,.7); }
.stag__item:hover .stag__num{ color:#2c2c2e; }
.stag__item:focus-visible{ outline:none; }
.stag__item:focus-visible .stag__poster{ outline:2px solid #2997ff; outline-offset:4px; }
.stag__pill{
  position:absolute; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:4px;
  min-height:36px; padding:0 14px 0 16px; border-radius:980px; font-size:14px; font-weight:500; color:#f5f5f7;
  background:rgba(29,29,31,.72); border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  opacity:0; transform:translateY(6px); transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.stag__pill::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); }
.stag__item:hover .stag__pill, .stag__item:focus-visible .stag__pill{ opacity:1; transform:none; }
@media (hover:none){ .stag__pill{ opacity:1; transform:none; } }

.stag__more{
  display:flex; width:max-content; margin:clamp(56px, calc(7 * var(--vw)), 96px) auto 0; align-items:center; gap:6px; min-height:44px;
  font-size:17px; color:#2997ff;
}
.stag__more::after{ content:'\2197'; font-size:.85em; transition:transform 260ms var(--ease); }
.stag__more:hover{ text-decoration:underline; }
.stag__more:hover::after{ transform:translate(2px,-2px); }

@media (max-width:760px){
  .stag{ gap:28px; }
  .stag__item{ width:100%; }
  .stag__num{ display:none; }
  .stag__poster{ border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.5); }
  .stag__pill{ right:10px; bottom:10px; min-height:32px; font-size:12.5px; padding:0 12px; }
}
@media (prefers-reduced-motion:reduce){ .stag__poster, .stag__pill{ transition:none; } }

/* scroll-linked stagger motion (v47) */
.stag-live .stag__item{
  --dir:-1;
  opacity:calc(.15 + .85 * var(--p, 1));
  transform:translate3d(calc(var(--dir) * (1 - var(--p, 1)) * 9%), calc((1 - var(--p, 1)) * 40px), 0) scale(calc(.9 + .1 * var(--p, 1)));
  transform-origin:50% 100%; will-change:transform, opacity;
}
.stag-live .stag__item:nth-child(even){ --dir:1; }
.stag-live .stag__num{
  transform:translate3d(0, calc(var(--d, 0) * 70px), 0);
  opacity:var(--p, 1); will-change:transform;
}
/* the poster's own hover lift stays separate from the scroll motion */
.stag__poster{ transition:transform 600ms cubic-bezier(.25,.1,.25,1), box-shadow 600ms cubic-bezier(.25,.1,.25,1); }
.stag__item:hover .stag__poster{ transform:translateY(-8px) scale(1.012); }
@media (max-width:760px){
  .stag-live .stag__item{ transform:translate3d(0, calc((1 - var(--p, 1)) * 28px), 0) scale(calc(.94 + .06 * var(--p, 1))); }
}

/* ---- work section: extra motion (v48) ---- */
/* heading: words rise in, blur to sharp */
.wl__title .wword{ display:inline-block; opacity:0; filter:blur(12px); transform:translateY(.35em);
  transition:opacity 900ms cubic-bezier(.2,.7,.2,1), filter 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--wi) * 120ms); }
.wl__title.is-split-in .wword{ opacity:1; filter:none; transform:none; }

/* poster unmasks from its own side; the image inside zooms out as it settles */
.stag-live .stag__item .stag__poster{
  clip-path:inset(0 calc((1 - var(--p, 1)) * 34%) 0 0 round 16px);
}
.stag-live .stag__item:nth-child(even) .stag__poster{
  clip-path:inset(0 0 0 calc((1 - var(--p, 1)) * 34%) round 16px);
}
.stag-live .stag__poster img{ transform:scale(calc(1.18 - .18 * var(--p, 1))); transform-origin:50% 40%; will-change:transform; }

/* a sheen that sweeps across once as the poster settles */
.stag__poster{ position:relative; }
.stag-live .stag__poster::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(calc(-100% + var(--p, 1) * 200%));
  opacity:calc(min(var(--p, 1), 1 - var(--p, 1)) * 2);
  mix-blend-mode:soft-light;
}

/* 3D tilt toward the pointer, plus a soft light that follows it */
.stag{ perspective:1400px; }
.stag__poster{
  transform:translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style:preserve-3d;
  transition:transform 500ms cubic-bezier(.2,.7,.2,1), box-shadow 600ms cubic-bezier(.25,.1,.25,1);
}
.stag__item:hover .stag__poster{ --lift:-8px; transform:translateY(var(--lift)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform 160ms linear, box-shadow 600ms cubic-bezier(.25,.1,.25,1); }
.stag__poster::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity 400ms ease;
  background:radial-gradient(40% 50% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%);
}
.stag__item:hover .stag__poster::after{ opacity:1; }

/* the number counts up from below as its poster arrives */
.stag-live .stag__num{
  transform:translate3d(0, calc(var(--d, 0) * 70px + (1 - var(--p, 1)) * 60px), 0);
  filter:blur(calc((1 - var(--p, 1)) * 10px));
}

/* the glass pill slides up a little later than the hover lift */
.stag__pill{ transition:opacity 350ms cubic-bezier(.2,.7,.2,1) 80ms, transform 450ms cubic-bezier(.2,.7,.2,1) 80ms; z-index:4; }

@media (max-width:760px){
  .stag-live .stag__item .stag__poster, .stag-live .stag__item:nth-child(even) .stag__poster{ clip-path:inset(0 0 calc((1 - var(--p, 1)) * 20%) 0 round 12px); }
}
@media (prefers-reduced-motion:reduce){
  .wl__title .wword{ opacity:1; filter:none; transform:none; transition:none; }
  .stag__poster::before, .stag__poster::after{ display:none; }
}

/* stagger captions: the problem, then the role (v51) */
.stag__cap{ margin-top:18px; max-width:46ch; }
.stag__item:nth-child(even) .stag__cap{ margin-left:auto; text-align:right; }
.stag__problem{ font-size:clamp(19px, calc(1.7 * var(--vw)), 24px); font-weight:600; line-height:1.25; letter-spacing:-.01em; color:#f5f5f7; }
.stag__role{ margin-top:6px; font-size:15px; color:#86868b; }
.stag-live .stag__cap{ opacity:calc(var(--p, 1) * 1.4 - .4); transform:translateY(calc((1 - var(--p, 1)) * 16px)); }
@media (max-width:760px){
  .stag__item:nth-child(even) .stag__cap{ margin-left:0; text-align:left; }
  .stag__cap{ margin-top:14px; }
  .stag__problem{ font-size:18px; }
}

/* case study process as numbered steps (v52) */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:18px; }
.steps li{ counter-increment:step; display:grid; grid-template-columns:28px 1fr; column-gap:12px; }
.steps li::before{ content:counter(step, decimal-leading-zero); grid-row:1 / span 2; font-size:13px; font-weight:600; color:var(--gray-3); font-variant-numeric:tabular-nums; padding-top:3px; }
.steps strong{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.steps span{ margin-top:2px; font-size:15.5px; line-height:1.5; color:var(--ink-2); }

/* case study panorama: the final synthesis map, scrolled sideways at a readable height */
.cs__pano{ margin:0; }
.cs__pano-scroll{ overflow-x:auto; overscroll-behavior-x:contain; border-radius:clamp(10px, calc(1.4 * var(--vw)), 18px); background:#f3efe6; cursor:grab; scrollbar-width:thin; }
.cs__pano-scroll:active{ cursor:grabbing; }
.cs__deck .cs__pano-scroll img{ display:block; width:auto; max-width:none; height:min(calc(78 * var(--svh)), 820px); border-radius:0; }
.cs__pano-scroll:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }
.cs__pano figcaption{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; font-size:14px; color:var(--gray); }
.cs__pano figcaption .more{ font-size:14px; min-height:0; }
@media (max-width:760px){ .cs__deck .cs__pano-scroll img{ height:calc(60 * var(--svh)); } }

/* map v57: bigger fitted view + true 1:1 mode */
.cs__pano{ position:relative; }
.cs__pano-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.cs__pano-bar > span{ font-size:17px; font-weight:600; color:var(--ink); }
.cs__pano-ctl{ display:inline-flex; padding:3px; gap:2px; border-radius:980px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.cs__pano-ctl button{ min-height:34px; padding:0 14px; border-radius:980px; font-size:13.5px; font-weight:500; color:rgba(245,245,247,.75); }
.cs__pano-ctl button[aria-pressed="true"]{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.cs__pano-scroll{ height:min(calc(86 * var(--svh)), 1100px); overflow:auto; }
.cs__deck .cs__pano-scroll img.cs__pano-fit{ height:100%; width:auto; }
.cs__pano-full{ display:flex; width:max-content; }
.cs__pano-full[hidden], .cs__pano-fit[hidden]{ display:none !important; }
.cs__deck .cs__pano-full img{ display:block; width:4096px; height:6967px; max-width:none; border-radius:0; background:#f3efe6; }
.cs__pano figcaption{ display:block; margin-top:10px; font-size:13.5px; }
.cs__pano figcaption b{ color:var(--ink); font-weight:600; }
@media (max-width:760px){ .cs__pano-scroll{ height:calc(70 * var(--svh)); } }

/* map v58: deep-zoom viewer */
.cs__osd{ position:relative; height:min(calc(82 * var(--svh)), 1000px); border-radius:clamp(10px, calc(1.4 * var(--vw)), 18px); overflow:hidden; background:#f3efe6; touch-action:none; }
.cs__osd:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }
.cs__zoom .cs__pano-ctl button{ min-width:36px; }
.cs__zoom .cs__pano-ctl button[data-map="in"], .cs__zoom .cs__pano-ctl button[data-map="out"]{ font-size:18px; padding:0 10px; }
.cs__zoom .cs__pano-ctl button:hover{ background:rgba(255,255,255,.12); color:#fff; }
.cs__zoom:fullscreen{ background:#000; padding:16px 20px 20px; display:flex; flex-direction:column; }
.cs__zoom:fullscreen .cs__osd{ flex:1 1 auto; height:auto; }
.cs__zoom:fullscreen figcaption{ display:none; }
.cs__osd .navigator{ border:1px solid rgba(0,0,0,.25) !important; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.85) !important; }
@media (max-width:760px){ .cs__osd{ height:calc(62 * var(--svh)); } .cs__zoom .cs__pano-bar > span{ display:none; } .cs__zoom .cs__pano-bar{ justify-content:flex-end; } }

/* home: "Not just interfaces" as two quiet drifting rows (v59) */
.otc-band{ overflow:hidden; }
.shelf--home{ padding-block:0; }
.shelf--home + .shelf--home{ margin-top:clamp(12px, calc(1.4 * var(--vw)), 18px); }
.shelf--home .shelf__track{ gap:clamp(12px, calc(1.4 * var(--vw)), 18px); }
.shelf--home .shelf__img{ --h:clamp(180px, calc(17 * var(--vw)), 250px); border-radius:14px; box-shadow:none; }
.shelf--home[data-shelf="illustrations"] .shelf__img{ --h:clamp(150px, calc(14 * var(--vw)), 210px); }
.shelf--home .shelf__title, .shelf--home .shelf__cat{ display:none; }
.shelf--home .shelf__item.is-hover .shelf__img{ transform:scale(1.03); }
/* soft fade at both edges so the rows feel endless */
.shelf--home{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@media (max-width:760px){
  .shelf--home .shelf__img{ --h:150px; border-radius:10px; }
  .shelf--home[data-shelf="illustrations"] .shelf__img{ --h:120px; }
}

/* home: "Not just interfaces" as four craft tiles, a doorway into the Lab (v60) */
.crafts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(12px, calc(1.4 * var(--vw)), 20px); }
.craft{
  position:relative; isolation:isolate; display:flex; flex-direction:column; overflow:hidden;
  aspect-ratio:3 / 4; border-radius:24px; background:#1c1c1e; color:#f5f5f7;
  transition:transform 500ms var(--ease), background-color 400ms var(--ease);
}
.craft:hover{ background:#232326; }
.craft:active{ transform:scale(.985); }
.craft:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }
.craft__art{ position:relative; flex:1 1 auto; display:grid; place-items:center; }
.craft__art img{ position:absolute; display:block; border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.55); transition:transform 700ms cubic-bezier(.2,.7,.2,1); }
.craft__text{ position:relative; padding:0 22px 22px; }
.craft__count{ font-size:13px; color:#86868b; }
.craft__title{ margin-top:2px; font-size:clamp(1.4rem, calc(2 * var(--vw)), 1.75rem); font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.craft__go{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:15px; color:#2997ff; }
.craft__go::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform 260ms var(--ease); }
.craft:hover .craft__go::after{ transform:translate(3px,-1px); }

/* posters: a fanned hand of three */
.craft--posters .craft__art img{ width:44%; top:14%; }
.craft--posters .craft__art img:nth-child(1){ transform:translateX(-46%) rotate(-10deg); }
.craft--posters .craft__art img:nth-child(2){ transform:translateY(-4%); z-index:2; }
.craft--posters .craft__art img:nth-child(3){ transform:translateX(46%) rotate(10deg); }
.craft--posters:hover .craft__art img:nth-child(1){ transform:translateX(-58%) rotate(-15deg); }
.craft--posters:hover .craft__art img:nth-child(2){ transform:translateY(-9%) scale(1.04); }
.craft--posters:hover .craft__art img:nth-child(3){ transform:translateX(58%) rotate(15deg); }

/* illustrations: two sheets, one tucked behind the other */
.craft--illus .craft__art img{ width:78%; }
.craft--illus .craft__art img:nth-child(1){ transform:translate(6%, -26%) rotate(4deg); opacity:.85; }
.craft--illus .craft__art img:nth-child(2){ transform:translate(-4%, 10%) rotate(-3deg); z-index:2; }
.craft--illus:hover .craft__art img:nth-child(1){ transform:translate(10%, -34%) rotate(7deg); opacity:1; }
.craft--illus:hover .craft__art img:nth-child(2){ transform:translate(-6%, 14%) rotate(-5deg) scale(1.03); }

/* games: the screen glows like a console */
.craft--game{ background:radial-gradient(80% 60% at 50% 35%, rgba(255,160,60,.22), transparent 70%), #1c1c1e; }
.craft--game .craft__art img{ width:84%; border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(255,140,40,.25); }
.craft--game:hover .craft__art img{ transform:scale(1.05); }

/* writing: words are the artwork */
.craft__quote{ padding:0 22px; font-family:Georgia, "Times New Roman", serif; font-style:italic; font-size:clamp(1.25rem, calc(1.9 * var(--vw)), 1.6rem); line-height:1.3; color:#d2d2d7; transition:transform 700ms cubic-bezier(.2,.7,.2,1); }
.craft--words:hover .craft__quote{ transform:translateY(-6px); color:#fff; }

@media (max-width:1060px){ .crafts{ grid-template-columns:repeat(2, minmax(0,1fr)); } .craft{ aspect-ratio:4 / 4.3; } }
@media (max-width:560px){
  .crafts{ gap:10px; }
  .craft{ border-radius:18px; aspect-ratio:3 / 4; }
  .craft__text{ padding:0 14px 14px; }
  .craft__title{ font-size:1.15rem; }
  .craft__go{ font-size:13px; }
  .craft__quote{ padding:0 14px; font-size:1rem; }
}
@media (prefers-reduced-motion:reduce){ .craft__art img, .craft__quote{ transition:none; } }
.craft--illus .craft__art img:nth-child(1){ transform:translate(6%, -16%) rotate(4deg); } .craft--illus:hover .craft__art img:nth-child(1){ transform:translate(10%, -22%) rotate(7deg); }

/* contact: hand-drawn animated self-portrait, hovering beside "Let's make it real." (v63) */
.cta-big{ overflow:hidden; }
.cta-big__wrap{ position:relative; }
.me-anim{
  position:absolute; right:clamp(0px, calc(2 * var(--vw)), 40px); top:50%; width:clamp(200px, calc(22 * var(--vw)), 330px); aspect-ratio:560 / 865; margin:0;
  transform:translateY(-50%); pointer-events:none; z-index:0;
}
.me-anim__canvas, .me-anim__still{ position:absolute; inset:0; width:100%; height:100%; animation:me-hover 4s ease-in-out infinite; }
.me-anim__canvas{ opacity:0; transition:opacity 500ms ease; }
.me-anim.is-ready .me-anim__canvas{ opacity:1; }
.me-anim.is-ready .me-anim__still{ opacity:0; transition:opacity 500ms ease; }
/* a soft shadow on the "floor" that breathes with the hover */
.me-anim::after{
  content:''; position:absolute; left:28%; right:28%; bottom:-4%; height:5%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); animation:me-shadow 4s ease-in-out infinite;
}
@keyframes me-hover{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes me-shadow{ 0%,100%{ transform:scaleX(1); opacity:.9; } 50%{ transform:scaleX(.8); opacity:.5; } }
.cta-big__wrap > :not(.me-anim){ position:relative; z-index:1; }
.cta-big__title, .cta-big__row{ max-width:calc(100% - clamp(200px, calc(22 * var(--vw)), 330px) - 24px); }
@media (max-width:860px){
  .me-anim{ position:relative; top:auto; right:auto; transform:none; width:min(calc(62 * var(--vw)), 260px); margin:0 auto 24px; }
  .cta-big__title, .cta-big__row{ max-width:none; }
  .cta-big__wrap{ display:flex; flex-direction:column; }
  .cta-big__wrap > .kicker{ order:1; } .cta-big__wrap > .cta-big__title{ order:2; } .cta-big__wrap > .cta-big__row{ order:3; }
}
@media (prefers-reduced-motion:reduce){ .me-anim__canvas, .me-anim__still, .me-anim::after{ animation:none; } }
/* the drawings already rise and fall on their own: no extra CSS bob, steady shadow */
.me-anim__canvas, .me-anim__still, .me-anim::after{ animation:none; }

/* home: creative index (v65). Big words; artwork floats beside the pointer on hover. */
.cindex{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
.cindex__row{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) auto; align-items:baseline; gap:16px;
  padding:clamp(14px, calc(1.8 * var(--vw)), 26px) 0; border-bottom:1px solid rgba(255,255,255,.14); color:#f5f5f7;
  transition:opacity 300ms var(--ease), padding-left 400ms var(--ease);
}
.cindex__num{ font-size:14px; color:#6e6e73; font-variant-numeric:tabular-nums; }
.cindex__word{ font-size:clamp(2.6rem, calc(8.4 * var(--vw)), 7.5rem); font-weight:700; line-height:1; letter-spacing:-.04em; }
.cindex__meta{ font-size:15px; color:#86868b; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.cindex__meta::after{ content:'\2192'; color:#f5f5f7; opacity:0; transform:translateX(-8px); transition:opacity 300ms var(--ease), transform 300ms var(--ease); }
.cindex__thumb{ display:none; }
.cindex:hover .cindex__row{ opacity:.35; }
.cindex .cindex__row:hover, .cindex .cindex__row:focus-visible{ opacity:1; padding-left:14px; }
.cindex__row:hover .cindex__meta::after, .cindex__row:focus-visible .cindex__meta::after{ opacity:1; transform:none; }
.cindex__row:focus-visible{ outline:2px solid #2997ff; outline-offset:4px; }
.cindex__float{
  position:fixed; left:0; top:0; z-index:50; pointer-events:none; opacity:0; width:300px;
  transition:opacity 250ms ease, width 300ms var(--ease);
}
.cindex__float[data-shape="tall"]{ width:230px; }
.cindex__float[data-shape="wide"]{ width:380px; }
.cindex__float.is-on{ opacity:1; }
.cindex__float img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); }
@media (hover:none), (max-width:760px){
  .cindex__row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"word thumb" "meta thumb"; align-items:center; gap:4px 14px; padding:18px 0; }
  .cindex__num{ display:none; }
  .cindex__word{ grid-area:word; font-size:clamp(2.1rem, calc(10.5 * var(--vw)), 3rem); }
  .cindex__meta{ grid-area:meta; font-size:13.5px; }
  .cindex__thumb{ grid-area:thumb; display:block; width:auto; height:64px; max-width:96px; object-fit:cover; border-radius:8px; }
  .cindex:hover .cindex__row{ opacity:1; }
  .cindex .cindex__row:hover{ padding-left:0; }
  .cindex__float{ display:none; }
}

/* =====================================================================
   SCROLL-REACTIVE (v67). --sv is the smoothed scroll velocity (-1..1),
   --sva its magnitude. Everything eases back to rest when scrolling stops.
   ===================================================================== */
:root{ --sv:0; --sva:0; }

/* top bar slips away on a fast scroll down, returns on any scroll up */
.gnav{ transition:transform 420ms cubic-bezier(.2,.7,.2,1), background-color 400ms var(--ease); will-change:transform; }
.gnav.gnav--away:not(.is-open){ transform:translateY(-110%); }

/* while scrolling fast, reveals resolve almost instantly so nothing is left blank */
.is-fast .js .reveal, html.is-fast.js .reveal{ transition-duration:220ms !important; transition-delay:0ms !important; }
html.is-fast .wl__title .wword{ transition-duration:260ms !important; transition-delay:0ms !important; }

/* project posters lean into the scroll and the big numbers stretch */
.stag-live .stag__item{
  transform:translate3d(calc(var(--dir) * (1 - var(--p, 1)) * 9%), calc((1 - var(--p, 1)) * 40px), 0)
            scale(calc(.9 + .1 * var(--p, 1))) skewY(calc(var(--sv) * var(--dir) * 1.6deg));
}
.stag-live .stag__num{
  transform:translate3d(0, calc(var(--d, 0) * 70px + (1 - var(--p, 1)) * 60px + var(--sv) * -46px), 0) scaleY(calc(1 + var(--sva) * .22));
}
.stag-live .stag__poster img{ transform:scale(calc(1.18 - .18 * var(--p, 1) + var(--sva) * .03)); }

/* the creative index: words lean and spread with speed */
.cindex__word{ display:inline-block; transform-origin:0 60%; transform:skewX(calc(var(--sv) * -9deg)); letter-spacing:calc(-.04em + var(--sva) * .035em); will-change:transform; }
.cindex__row:nth-child(1){ }
.cindex li:nth-child(even) .cindex__word{ transform:skewX(calc(var(--sv) * 9deg)); }

/* hero: the scene drifts a touch against the scroll; the heading tightens */
.ah--scene .ah__art img{ translate:0 calc(var(--sv) * -18px); }
.ah--scene .ah__title{ translate:0 calc(var(--sv) * -10px); }

/* section headings and the work title stretch slightly, like a spring */
.wl__title, .otc-band .h2, .cta-big__title{ transform-origin:0 100%; scale:1 calc(1 + var(--sva) * .07); }
.otc-band .h2{ transform-origin:50% 100%; }

/* the animated me sways with the scroll */
.me-anim{ rotate:calc(var(--sv) * -7deg); translate:0 calc(var(--sv) * -22px); transition:none; }

/* lab: the drifting rows lean with the scroll */
.shelf__track{ rotate:calc(var(--sv) * -.6deg); }

@media (max-width:760px){
  .stag-live .stag__item{ transform:translate3d(0, calc((1 - var(--p, 1)) * 28px), 0) scale(calc(.94 + .06 * var(--p, 1))) skewY(calc(var(--sv) * 1.2deg)); }
  .cindex__word{ transform:skewX(calc(var(--sv) * -6deg)); }
}
@media (prefers-reduced-motion:reduce){
  .gnav.gnav--away{ transform:none; }
  .cindex__word{ transform:none; }
  .wl__title, .otc-band .h2, .cta-big__title{ scale:none; }
  .me-anim, .shelf__track{ rotate:none; translate:none; }
}

/* =====================================================================
   TOP BAR v68: one language. Everything is plain text at one size and
   weight; the current page is simply brighter with a small dot under it.
   No pill group, no button. Name left, links and Resume together right.
   ===================================================================== */
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    display:flex; justify-content:flex-start; gap:clamp(22px, calc(2.6 * var(--vw)), 36px); max-width:1200px;
  }
  .gnav__brand{ margin-right:auto; gap:9px; }
  .gnav__brand img{ width:20px; }
  .gnav__brand span, .gnav__links a, .gnav__cta, .gnav__cta:hover{
    font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  }
  .gnav__brand span{ color:#f5f5f7; }
  .gnav__links{ display:contents; background:none; border:0; box-shadow:none; padding:0; }
  .gnav__pill{ display:none !important; }
  .gnav__links a, .gnav__cta, .gnav__cta:hover{
    position:relative; min-height:44px; padding:0; border-radius:0; display:inline-flex; align-items:center; gap:4px;
    background:none; border:0; box-shadow:none; color:rgba(245,245,247,.62); transition:color 200ms var(--ease);
  }
  .gnav__links a:hover, .gnav__cta:hover, .gnav__links a[aria-current="page"]{ color:#f5f5f7; }
  /* current page: a small dot beneath the word */
  .gnav__links a::after{
    content:''; position:absolute; left:50%; bottom:7px; width:4px; height:4px; margin-left:-2px; border-radius:50%;
    background:#f5f5f7; opacity:0; transform:scale(.4); transition:opacity 250ms var(--ease), transform 250ms var(--ease);
  }
  .gnav__links a[aria-current="page"]::after, .gnav__links a.is-here::after{ opacity:1; transform:none; }
  .gnav__links a.is-here{ color:#f5f5f7; }
  .gnav__cta{ justify-self:auto; margin:0; }
  .gnav__cta:active{ transform:none; }
}
@media (min-width:761px){ .gnav .gnav__brand span{ font-weight:500; font-size:13.5px; letter-spacing:-.005em; } }

/* jumping to Work lands with "Projects." just under the top bar and the first poster in view (v70) */
.wl{ --wl-pad:clamp(72px, calc(9 * var(--vw)), 128px); padding-top:var(--wl-pad); }
#work{ scroll-margin-top:calc(28px - var(--wl-pad)); }
.wl__head{ margin-bottom:clamp(20px, calc(2.4 * var(--vw)), 32px); }
.stag{ margin-top:0; }

/* posters never grow taller than the screen can show with heading + caption (v72) */
@media (min-width:761px){
  .stag__item{ width:min(68%, max(440px, calc((calc(100 * var(--svh)) - 340px) * 16 / 9))); }
}

/* animated me v73: bigger, tighter crop, a soft stage light behind, gentler sway */
.me-anim{
  width:clamp(240px, calc(24 * var(--vw)), 360px); aspect-ratio:640 / 1145; right:clamp(8px, calc(4 * var(--vw)), 72px);
  rotate:calc(var(--sv) * -2deg); translate:0 calc(var(--sv) * -12px);
}
.me-anim::before{
  content:''; position:absolute; left:50%; top:46%; width:150%; aspect-ratio:1; translate:-50% -50%; z-index:-1; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(166,255,0,.16), transparent 62%),
    radial-gradient(closest-side at 62% 58%, rgba(255,0,102,.14), transparent 70%);
  filter:blur(18px); pointer-events:none;
}
.me-anim__canvas, .me-anim__still{ filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.me-anim::after{ left:22%; right:22%; bottom:-2%; height:4%; background:radial-gradient(closest-side, rgba(0,0,0,.7), transparent); }
.cta-big__title, .cta-big__row{ max-width:calc(100% - clamp(240px, calc(24 * var(--vw)), 360px) - clamp(32px, calc(6 * var(--vw)), 96px)); }
.cta-big{ padding-block:clamp(96px, calc(12 * var(--vw)), 160px); }
@media (max-width:860px){
  .me-anim{ width:min(calc(58 * var(--vw)), 250px); right:auto; margin:0 auto 28px; }
  .cta-big__title, .cta-big__row{ max-width:none; }
  .cta-big{ padding-block:56px 56px; }
}
@media (max-width:860px){ .me-anim{ width:min(calc(44 * var(--vw)), 190px); margin-bottom:20px; } }
.me-anim__canvas, .me-anim__still{ object-fit:contain; }
/* animation removed (v75): the contact heading gets its full width back */
.cta-big__title, .cta-big__row{ max-width:none; }

/* =====================================================================
   TOP BAR v76: apple.com global nav. 44px tall, logo mark only, links at
   12px regular spread evenly across a centred 1024px row. No dot, no pills.
   ===================================================================== */
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){ height:44px; --nav-bg:rgba(22,22,23,.8); }
.gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:44px; }
html{ scroll-padding-top:56px; }
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    display:flex; justify-content:space-between; align-items:center; gap:0; max-width:1024px; padding:0 22px;
  }
  .gnav__brand{ margin-right:0; min-height:44px; padding:0 8px; opacity:.8; transition:opacity 320ms cubic-bezier(.4,0,.6,1); }
  .gnav__brand:hover{ opacity:1; }
  .gnav__brand img{ width:19px; }
  /* the name stays for screen readers; apple shows only the mark */
  .gnav .gnav__brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .gnav__links a, .gnav__cta, .gnav__cta:hover, .gnav__links a[aria-current="page"], .gnav__links a.is-here{
    min-height:44px; padding:0 8px; font-size:12px; font-weight:400; letter-spacing:-.01em;
    color:rgba(255,255,255,.8); transition:color 320ms cubic-bezier(.4,0,.6,1);
  }
  .gnav__links a:hover, .gnav__cta:hover{ color:#fff; }
  .gnav__links a[aria-current="page"], .gnav__links a.is-here{ color:#fff; }
  .gnav__links a::after{ display:none; }
  .gnav__cta.arrow::after{ font-size:.85em; opacity:.8; }
}
@media (max-width:760px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:44px; }
  .gnav .gnav__links{ top:44px; }
  .gnav__brand span{ font-size:14px; font-weight:500; }
  .gnav__toggle{ width:44px; height:44px; }
}
/* an open menu is a fixed full-screen sheet inside the bar: the bar must not be a transform container then */
.gnav{ will-change:auto; }
.gnav.is-open, .gnav.is-open.gnav--away{ transform:none !important; will-change:auto; translate:none; }
@media (max-width:760px){ .gnav:not(.gnav--away){ transform:none; } }

/* =====================================================================
   TOP BAR v77: apple product-page bar (the "iPhone" local nav).
   Name left at title size; small links right; one small pill at the end.
   ===================================================================== */
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){ height:52px; }
.gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:52px; }
.gnav.is-scrolled{ box-shadow:0 1px 0 rgba(255,255,255,.14); }
html{ scroll-padding-top:64px; }
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    justify-content:flex-start; gap:24px; max-width:1024px; padding:0 22px;
  }
  .gnav__brand{ margin-right:auto; opacity:1; padding:0; gap:10px; }
  .gnav__brand img{ width:22px; }
  .gnav .gnav__brand span{
    position:static; width:auto; height:auto; overflow:visible; clip-path:none;
    font-size:21px; font-weight:600; letter-spacing:.011em; color:#f5f5f7;
  }
  .gnav__links a, .gnav__links a[aria-current="page"], .gnav__links a.is-here{
    min-height:52px; padding:0; font-size:12px; font-weight:400; letter-spacing:-.01em; color:rgba(255,255,255,.8);
  }
  .gnav__links a:hover{ color:#fff; }
  /* current page: dimmed, as apple does on its local nav */
  .gnav__links a[aria-current="page"], .gnav__links a.is-here{ color:rgba(255,255,255,.56); cursor:default; }
  .gnav__cta, .gnav__cta:hover{
    min-height:0; height:24px; padding:0 11px; border-radius:980px; font-size:12px; font-weight:400; letter-spacing:-.01em;
    background:#f5f5f7; color:#1d1d1f; border:0; box-shadow:none; transition:background-color 200ms ease;
  }
  .gnav__cta:hover{ background:#fff; }
  .gnav__cta.arrow::after{ opacity:1; }
}
@media (max-width:760px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:52px; }
  .gnav .gnav__links{ top:52px; }
  .gnav__brand span{ font-size:17px; font-weight:600; letter-spacing:0; }
}

/* =====================================================================
   TOP BAR v78: measured from apple.com. 44px, rgba(29,29,31,.8), 12px/400
   links at 80% white, logo at the left of a centred 996px row, links
   following it ~20px apart, the last item at the far right (apple's icons).
   ===================================================================== */
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){
  height:44px; --nav-bg:rgba(29,29,31,.8); background:rgba(29,29,31,.8);
  -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); box-shadow:none;
}
.gnav.is-scrolled{ box-shadow:none; }
.gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:44px; }
html{ scroll-padding-top:56px; }
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    justify-content:flex-start; gap:20px; max-width:996px; padding:0; width:calc(100% - 44px);
  }
  .gnav__brand{ margin-right:0; padding:0 8px; min-height:44px; opacity:.8; }
  .gnav__brand:hover{ opacity:1; }
  .gnav__brand img{ width:17px; filter:brightness(0) invert(1); }
  .gnav .gnav__brand span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; font-size:12px; }
  .gnav__links a, .gnav__links a[aria-current="page"], .gnav__links a.is-here, .gnav__cta, .gnav__cta:hover{
    min-height:44px; height:44px; padding:0 8px; border-radius:0; background:none; border:0; box-shadow:none;
    font-size:12px; font-weight:400; letter-spacing:-.01em; color:rgba(255,255,255,.8); cursor:pointer;
    transition:color 320ms cubic-bezier(.4,0,.6,1);
  }
  .gnav__links a:hover, .gnav__cta:hover{ color:#fff; background:none; }
  .gnav__links a[aria-current="page"], .gnav__links a.is-here{ color:#fff; }
  .gnav__cta{ margin-left:auto; }
  .gnav__cta.arrow::after{ opacity:.8; }
}
@media (max-width:760px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:44px; }
  .gnav .gnav__links{ top:44px; }
  .gnav__brand span{ font-size:14px; font-weight:500; }
  .gnav.is-open, .gnav.is-open .gnav__inner{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#000; }
}

/* TOP BAR v79: apple's layout, but readable. Bigger, brighter type; slightly taller bar. */
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){ height:52px; background:rgba(22,22,23,.86); }
.gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:52px; }
.gnav.is-scrolled{ box-shadow:0 1px 0 rgba(255,255,255,.1); }
html{ scroll-padding-top:64px; }
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ gap:28px; max-width:1080px; }
  .gnav__brand{ opacity:1; }
  .gnav__brand img{ width:24px; }
  .gnav__links a, .gnav__links a[aria-current="page"], .gnav__links a.is-here, .gnav__cta, .gnav__cta:hover{
    min-height:52px; height:52px; font-size:15px; font-weight:500; letter-spacing:-.01em; color:rgba(255,255,255,.72);
  }
  .gnav__links a:hover, .gnav__cta:hover, .gnav__links a[aria-current="page"], .gnav__links a.is-here{ color:#fff; }
  .gnav__cta, .gnav__cta:hover{ color:#fff; }
  .gnav__cta.arrow::after{ opacity:1; }
}
@media (max-width:760px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{ height:52px; }
  .gnav .gnav__links{ top:52px; }
  .gnav__brand span{ font-size:16px; font-weight:600; }
  .gnav__brand img{ width:24px; }
}

/* home: "Not just interfaces" as a justified gallery (v80). Two rows; every image keeps
   its real shape (width follows its aspect ratio), so nothing is cropped or stretched
   and both rows end flush. */
.mos{ display:flex; flex-direction:column; gap:clamp(8px, calc(1 * var(--vw)), 14px); }
.mos__row{ display:flex; gap:clamp(8px, calc(1 * var(--vw)), 14px); }
.mos__item{
  position:relative; flex:var(--ar) 1 0; min-width:0; aspect-ratio:var(--ar); overflow:hidden;
  border-radius:clamp(10px, calc(1.2 * var(--vw)), 16px); background:#1c1c1e; display:block;
}
.mos__item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 900ms cubic-bezier(.2,.7,.2,1), filter 400ms ease; }
.mos__tag{
  position:absolute; left:10px; bottom:10px; padding:5px 11px; border-radius:980px; font-size:12.5px; font-weight:500; color:#f5f5f7;
  background:rgba(29,29,31,.72); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
  opacity:0; transform:translateY(6px); transition:opacity 280ms var(--ease), transform 280ms var(--ease);
}
.mos__item:hover img{ transform:scale(1.035); }
.mos__item:hover .mos__tag, .mos__item:focus-visible .mos__tag{ opacity:1; transform:none; }
.mos:hover .mos__item:not(:hover) img{ filter:brightness(.55); }
.mos__item:focus-visible{ outline:2px solid #2997ff; outline-offset:3px; }
@media (hover:none){ .mos__tag{ opacity:1; transform:none; font-size:11.5px; padding:4px 9px; left:8px; bottom:8px; } }
@media (max-width:760px){
  /* wide pieces take a full line; the two narrower ones share the next */
  .mos__row{ flex-wrap:wrap; }
  .mos__item--wide{ flex:1 0 100%; order:-1; }
  .mos__row:nth-child(2) .mos__item--wide{ order:0; }
}
@media (prefers-reduced-motion:reduce){ .mos__item img, .mos__tag{ transition:none; } }

/* home: "Not just interfaces" as a quiet text list (v84, user's pick: option B) */
.qlist{ max-width:560px; margin:0 auto; }
.qlist__row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; min-height:56px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:19px; color:#f5f5f7; }
.qlist__row:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.qlist__row b{ font-weight:500; transition:color 200ms var(--ease); }
.qlist__row span{ display:inline-flex; align-items:center; gap:8px; color:#86868b; font-size:15px; white-space:nowrap; }
.qlist__row span::after{ content:'→'; transition:transform 260ms var(--ease), color 200ms var(--ease); }
.qlist__row:hover b, .qlist__row:focus-visible b{ color:#2997ff; }
.qlist__row:hover span::after{ transform:translateX(4px); color:#2997ff; }
.qlist__row:focus-visible{ outline:2px solid #2997ff; outline-offset:4px; }
.otc-band__head{ margin-bottom:clamp(28px, calc(3.4 * var(--vw)), 44px); }
@media (max-width:760px){ .qlist__row{ font-size:17px; } .qlist__row span{ font-size:14px; } }

/* about hero v86: one balanced screen. Text and photo centred together; the photo is
   cropped closer to you (less empty archway), sized to the screen, aligned to the page grid. */
@media (min-width:861px){
  .ab-hero{ min-height:calc(calc(100 * var(--svh)) - 52px); display:flex; align-items:center; padding-block:clamp(40px, calc(6 * var(--svh)), 72px); }
  .ab-hero__grid{ width:100%; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(40px, calc(6 * var(--vw)), 96px); align-items:center; }
  .ab-hero__photo{
    justify-self:end; width:min(100%, 420px, calc((calc(100 * var(--svh)) - 52px - 144px) * .8)); aspect-ratio:4 / 5; border-radius:28px;
    box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.55);
  }
  .ab-hero__photo img{ object-position:50% 100%; transform:scale(1.5); transform-origin:50% 100%; }
  .ab-hero .sub{ max-width:26ch; }
}

/* projects v87 (user's pick, option H): posters slide in once from their own side. Nothing else moves. */
#work{ overflow-x:clip; }
.stag-slide .stag__item{ opacity:0; transform:translateX(-22%); transition:opacity 600ms ease, transform 1000ms cubic-bezier(.2,.7,.2,1); }
.stag-slide .stag__item:nth-child(even){ transform:translateX(22%); }
.stag-slide .stag__item.is-in{ opacity:1; transform:none; }
.stag__num{ transform:none; filter:none; opacity:1; }
.stag__poster, .stag__item:hover .stag__poster{ transform:translateY(var(--lift, 0px)); transition:transform 500ms cubic-bezier(.2,.7,.2,1), box-shadow 500ms cubic-bezier(.2,.7,.2,1); clip-path:none; }
.stag__poster img{ transform:none; }
.stag__poster::before, .stag__poster::after{ display:none; }
.stag__cap{ opacity:1; transform:none; }
html.is-fast .stag-slide .stag__item, html.is-fast.stag-slide .stag__item{ transition-duration:250ms; }
@media (max-width:760px){ .stag-slide .stag__item, .stag-slide .stag__item:nth-child(even){ transform:translateY(28px); } .stag-slide .stag__item.is-in{ transform:none; } }

/* new geometric "rb" mark (v90): already white, sized by height */
.gnav .gnav__brand img, .gnav__brand img{ width:auto; height:20px; filter:none; }
@media (max-width:760px){ .gnav .gnav__brand img{ height:18px; } }

/* =====================================================================
   BRAND (v91): the R mark, used in three places only.
   1. top bar (plays the Wipe animation once per visit)
   2. footer signature
   3. one large cropped mark behind the contact section
   ===================================================================== */
.gnav .gnav__brand .gnav__mark, .gnav__mark{ display:block; height:22px; width:auto; fill:#f5f5f7; overflow:visible; flex:0 0 auto; }
@media (max-width:760px){ .gnav .gnav__brand .gnav__mark{ height:20px; } }
.wipe *{ transform-box:fill-box; }
.wipe .w-hole{ transform-origin:0 50%; } .wipe .w-notch{ transform-origin:50% 100%; }
.wipe.play .w-block{ animation:w-in .4s ease .15s both; }
.wipe.play .w-hole{ animation:w-x .7s cubic-bezier(.7,0,.2,1) .65s both; }
.wipe.play .w-notch{ animation:w-y .5s cubic-bezier(.7,0,.2,1) 1.25s both; }
.wipe.play .w-leg{ animation:w-leg .8s cubic-bezier(.7,0,.2,1) 1.65s both; }
@keyframes w-in{ from{ opacity:0; } }
@keyframes w-x{ from{ transform:scaleX(0); } }
@keyframes w-y{ from{ transform:scaleY(0); } }
@keyframes w-leg{ from{ clip-path:inset(0 100% 100% 0); } to{ clip-path:inset(0 0 0 0); } }

.gfoot__sign{ display:inline-flex; align-items:center; gap:10px; }
.gfoot__mark{ height:16px; width:auto; fill:currentColor; flex:0 0 auto; opacity:.85; }

.cta-big{ position:relative; isolation:isolate; }
.cta-big::after{
  content:''; position:absolute; z-index:-1; right:max(calc(-4 * var(--vw)), -60px); top:50%; height:150%; aspect-ratio:80 / 124.72; transform:translateY(-42%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%20124.72%27%3E%3Cpath%20fill%3D%27%23f5f5f7%27%20fill-rule%3D%27evenodd%27%20d%3D%27M0%200H80V64.72H20V44.72H0ZM20%2020V44.72H60V20ZM0%2064.72H20L80%20124.72H47.64L0%2077.08Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; opacity:.045; pointer-events:none;
}
@media (max-width:760px){ .cta-big::after{ height:92%; right:-18%; opacity:.05; } }
@media (prefers-reduced-motion:reduce){ .wipe *{ animation:none !important; } }

/* brand intro (v92): black screen, the mark is cut out in the centre, then it travels into the top bar */
html.intro-on{ overflow:hidden; }
/* cover from the very first paint, before any script runs; fades by itself if scripts never load */
html.intro-on body::before{ content:''; position:fixed; inset:0; z-index:998; background:#000; animation:intro-safety .4s ease 6.5s forwards; }
@keyframes intro-safety{ to{ opacity:0; visibility:hidden; } }
.intro{ position:fixed; inset:0; z-index:999; display:grid; place-items:center; background:#000; transition:background-color 900ms cubic-bezier(.4,0,.2,1); }
.intro__mark{ height:min(calc(38 * var(--svh)), 300px); width:auto; fill:#f5f5f7; overflow:visible; transition:transform 900ms cubic-bezier(.7,0,.2,1); will-change:transform; }
html.intro-out body::before{ display:none; }
html.intro-out .intro{ background-color:rgba(0,0,0,0); pointer-events:none; }
.gnav__mark{ transition:opacity 0s; }

/* intro v93: no flight to the corner. The centre mark dissolves; the top-bar mark fades in. */
.intro{ transition:opacity 800ms cubic-bezier(.4,0,.2,1); }
.intro__mark{ transition:transform 800ms cubic-bezier(.4,0,.2,1), opacity 500ms ease; }
html.intro-out .intro{ opacity:0; background-color:#000; }
html.intro-out .intro__mark{ transform:scale(.94); opacity:0; }
.gnav__mark.is-arriving{ animation:mark-arrive 900ms cubic-bezier(.2,.7,.2,1) 150ms both; }
@keyframes mark-arrive{ from{ opacity:0; transform:translateY(4px); } }

/* TOP BAR v95: back to apple.com's bar. One full-width frosted strip (apple's own colour and blur),
   R mark at the left of a centred row, links after it, Resume at the far right. */
.gnav, .gnav:not(.is-scrolled):not(.is-open), .gnav.gnav--dark:not(.is-open){
  background:rgba(22,22,23,.8); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
}
.gnav.is-open, .gnav.is-open .gnav__inner{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#000; }

/* contact (v96): the "Let's make it real." poster, in black. Tilted R, cropped large, behind the words. */
.cta-big, .cta-big.band--tint{ background:#000; }
.cta-big::after{ right:6%; top:50%; height:185%; transform:translateY(-50%) rotate(-45deg); opacity:.14; }
@media (max-width:760px){ .cta-big::after{ right:-30%; top:38%; height:105%; opacity:.14; } }
/* contact (v97): the whole tilted R, nothing chopped by the section edge */
.cta-big::after{ right:12%; top:50%; height:68%; transform:translateY(-50%) rotate(-45deg); opacity:.14; }
@media (max-width:760px){ .cta-big::after{ right:6%; top:44%; height:52%; } }
@media (max-width:760px){ .cta-big::after{ right:20%; height:46%; } }
/* contact (v98): no mark behind the words */
.cta-big::after{ display:none; }
/* captions: one line each on laptops, so every project caption has the same shape */
@media (min-width:761px){ .stag__cap{ max-width:none; } .stag__problem{ white-space:nowrap; } }

/* contact (v104): email and phone as lines, five actions, copy feedback on laptops */
.cta-big__row{ align-items:flex-end; }
.contact-lines{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.contact-hint{ font-size:13px; color:#6e6e73; margin-top:4px; }
.is-touch .contact-hint{ display:none; }
.contact-btns{ flex-wrap:wrap; justify-content:flex-end; gap:10px; max-width:560px; }
[data-copy]{ cursor:copy; } .is-touch [data-copy]{ cursor:pointer; }
.toast{
  position:fixed; z-index:400; left:50%; bottom:28px; transform:translate(-50%, 16px); opacity:0; pointer-events:none; max-width:calc(calc(100 * var(--vw)) - 32px);
  padding:12px 20px; border-radius:980px; font-size:15px; font-weight:500; color:#f5f5f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(40,40,44,.82); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  transition:opacity 220ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0); }
@media (max-width:760px){
  .cta-big__row{ align-items:stretch; }
  .cta-big__row .contact-btns{ display:grid; grid-template-columns:1fr 1fr; max-width:none; }
  .cta-big__row .contact-btns .btn{ width:100%; flex:none; }
  .cta-big__row .contact-btns .btn:first-child{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .toast{ transition:opacity 200ms ease; } }
@media (max-width:760px){ .contact-lines{ gap:0; } .contact-lines a{ min-height:44px; display:inline-flex; align-items:center; } }
/* contact (v105): email and phone on top, then all five buttons in one straight row */
@media (min-width:761px){
  .cta-big__row{ flex-direction:column; align-items:flex-start; gap:clamp(24px, calc(3 * var(--vw)), 36px); }
  .contact-btns{ max-width:none; justify-content:flex-start; flex-wrap:wrap; }
}
/* contact (v106): no repeats. Email and phone appear once, as the two lines; buttons are only the three profiles.
   On the home page the footer skips Mail and Call, since they sit right above it. */
body:has(.cta-big) .gfoot__links a[href^="mailto:"], body:has(.cta-big) .gfoot__links a[href^="tel:"]{ display:none; }
@media (max-width:760px){
  .cta-big__row .contact-btns{ grid-template-columns:1fr 1fr; }
  .cta-big__row .contact-btns .btn:first-child{ grid-column:auto; }
  .cta-big__row .contact-btns .btn:last-child{ grid-column:1 / -1; }
}

/* BUTTONS v107: no glass. Apple's dark-page buttons: a solid white pill for the main action,
   a thin outline for the rest (it fills white on hover). */
html:root .btn:not(.x-glass), html:root :is(.pcard2, .be-strip, .gthumb, .work-more):hover .btn:not(.x-glass){
  background:#f5f5f7; color:#1d1d1f; border:1px solid #f5f5f7; box-shadow:none; font-weight:500;
  -webkit-backdrop-filter:none; backdrop-filter:none; overflow:visible;
  transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
}
html:root .btn:not(.x-glass)::before{ display:none; }
html:root .btn:not(.x-glass):hover{ background:#fff; border-color:#fff; color:#000; box-shadow:none; }
html:root .btn:not(.x-glass):active{ transform:scale(.97); }
html:root .btn--ghost:not(.x-glass), html:root .btn--outline:not(.x-glass){ background:transparent; color:#f5f5f7; border:1px solid rgba(245,245,247,.5); font-weight:400; }
html:root .btn--ghost:not(.x-glass):hover, html:root .btn--outline:not(.x-glass):hover{ background:#f5f5f7; border-color:#f5f5f7; color:#1d1d1f; }

/* TOP BAR v108: alignment. The bar now shares the page's content edges: the mark sits flush with
   the left edge of the content below, the links are centred, Resume ends flush with the right edge. */
@media (min-width:761px){
  .gnav .gnav__inner, .gnav:not(.is-scrolled) .gnav__inner, .gnav.is-scrolled .gnav__inner{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0;
    width:100%; max-width:var(--max); padding:0 var(--gutter);
  }
  .gnav .gnav__brand{ justify-self:start; margin:0 0 0 -8px; }
  .gnav .gnav__links{ display:flex; align-items:center; gap:28px; justify-self:center; }
  .gnav .gnav__cta{ justify-self:end; margin:0 -8px 0 0; }
}

/* FOOTER v109: alignment. The rule above the footer stops at the content edges (it used to run
   wider than everything else); on phones the mark lines up with the first line of the sign-off. */
@media (min-width:761px){
  .gfoot__inner{ border-top:0; background:linear-gradient(var(--hairline), var(--hairline)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
}
.gfoot__links a[target]::after{ content:'\2197'; margin-left:.3em; }
@media (max-width:760px){
  .gfoot__sign{ display:flex; align-items:flex-start; }
  .gfoot__mark{ height:14px; margin-top:2px; }
}

/* MARK v110: small sizes drawn on the pixel grid. At 22px and 16px the strokes were 3.5px and 2.5px
   wide, so they blurred and the R's proportions read wrong. Now the stroke is a whole number of
   pixels (4 in the bar, 3 in the footer) and the square part renders with hard edges. */
.gnav .gnav__brand .gnav__mark, .gnav__mark{ width:16px; height:24.94px; }
.gnav__mark .w-block, .gfoot__mark .m-box{ shape-rendering:crispEdges; }
.gfoot__mark{ width:12px; height:19px; opacity:1; }
.gfoot__sign{ gap:12px; }
@media (max-width:760px){
  .gnav .gnav__brand .gnav__mark{ width:16px; height:24.94px; }
  .gfoot__mark{ width:12px; height:19px; margin-top:0; }
}

/* CONTACT FORM v111: Apple's form fields. Label sits inside the field and moves up when you type. */
.cform{ display:flex; flex-direction:column; gap:14px; width:100%; }
.cform__head{ font-size:21px; font-weight:600; letter-spacing:-.01em; color:#f5f5f7; margin-bottom:6px; }
.cform__f{ position:relative; }
.cform__f input, .cform__f textarea{
  display:block; width:100%; height:56px; padding:22px 16px 6px; border-radius:12px; border:1px solid #6e6e73;
  background:rgba(255,255,255,.04); color:#f5f5f7; font:inherit; font-size:17px; line-height:1.3; letter-spacing:-.01em;
  outline:0; -webkit-appearance:none; appearance:none; transition:border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.cform__f textarea{ height:auto; min-height:132px; padding-top:26px; resize:vertical; }
.cform__f label{
  position:absolute; left:17px; top:18px; font-size:17px; line-height:20px; color:#86868b; pointer-events:none;
  transform-origin:0 0; transition:transform 160ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}
.cform__f :is(input, textarea):focus + label, .cform__f :is(input, textarea):not(:placeholder-shown) + label{ transform:translateY(-10px) scale(.72); }
.cform__f :is(input, textarea):hover{ border-color:#86868b; }
.cform__f :is(input, textarea):focus{ border-color:#0071e3; box-shadow:0 0 0 3px rgba(0,113,227,.45); background:rgba(255,255,255,.06); }
.cform__f :is(input, textarea):-webkit-autofill{ -webkit-text-fill-color:#f5f5f7; box-shadow:0 0 0 100px #1d1d1f inset; caret-color:#f5f5f7; }
.cform__f.is-bad :is(input, textarea){ border-color:#ff453a; background:rgba(255,69,58,.07); }
.cform__f.is-bad :is(input, textarea):focus{ box-shadow:0 0 0 3px rgba(255,69,58,.4); }
.cform__f.is-bad label{ color:#ff6961; }
.cform__err{ display:block; font-size:13px; line-height:1.35; color:#ff6961; }
.cform__err:not(:empty){ margin-top:6px; }
.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
html:root .cform .cform__send{ align-self:flex-start; margin-top:6px; min-width:160px; min-height:48px; justify-content:center; }
html:root .cform .cform__send:disabled{ opacity:.6; cursor:default; }
.cform__note{ font-size:14px; color:#a1a1a6; }
.cform__note:empty{ display:none; }
.cform__note.is-bad{ color:#ff6961; }
.cform__note a{ color:#2997ff; text-decoration:underline; }
.cform__done{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:8px 0; }
.cform__done svg{ width:44px; height:44px; color:#30d158; margin-bottom:10px; }
.cform__done-t{ font-size:28px; font-weight:600; letter-spacing:-.015em; color:#f5f5f7; }
.cform__done-s{ font-size:17px; color:#a1a1a6; }
@media (min-width:961px){
  .cta-big__wrap{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(360px, 440px); column-gap:clamp(48px, calc(7 * var(--vw)), 112px); align-items:start; }
  .cta-big__wrap > :not(.cform){ grid-column:1; }
  .cta-big__wrap > .cform{ grid-column:2; grid-row:1 / span 3; align-self:center; }
  .cta-big .cta-big__row{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:960px){
  .cta-big__wrap{ display:flex; flex-direction:column; }
  .cta-big__wrap > .cform{ order:4; margin-top:clamp(40px, calc(7 * var(--vw)), 56px); max-width:560px; }
  html:root .cform .cform__send{ align-self:stretch; }
}
@media (prefers-reduced-motion:reduce){ .cform__f label, .cform__f input, .cform__f textarea{ transition:none; } }
.cta-big__title a{ display:inline; }
.cta-big__title a::after{ display:inline-block; margin-left:.14em; }
@media (min-width:961px){ .cta-big .cta-big__title{ font-size:clamp(3.25rem, calc(6 * var(--vw)), 6rem); text-wrap:balance; } }

/* ABOUT v113: the intro has a voice. Name meaning, then the joke, then what I do and what I'm like. */
.ab-fun{ margin-top:clamp(18px, calc(2.4 * var(--vw)), 28px); max-width:34em; display:flex; flex-direction:column; gap:14px; }
.ab-fun p{ font-size:clamp(1.02rem, calc(1.25 * var(--vw)), 1.2rem); line-height:1.5; color:#a1a1a6; }
.ab-fun .ab-fun__name{ font-size:clamp(1.2rem, calc(1.75 * var(--vw)), 1.6rem); line-height:1.32; font-weight:500; letter-spacing:-.012em; color:#f5f5f7; }
.ab-fun em{ font-style:normal; background:linear-gradient(90deg, #8fb0ff, #f3dcc4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ab-fun em{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#9db8ff; font-weight:inherit; white-space:nowrap; }

/* ABOUT v114: one joke in the headline voice, one quiet line under it. */
.ab-line{ margin-top:14px; max-width:30em; font-size:clamp(1.02rem, calc(1.25 * var(--vw)), 1.2rem); line-height:1.5; color:#a1a1a6; }

/* ABOUT v115: the intro and the story are one piece now. Short centred lines, a small portrait on top. */
.av{ padding-block:clamp(48px, calc(8 * var(--vw)), 104px) clamp(64px, calc(9 * var(--vw)), 120px); }
.av__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.av__photo{ width:clamp(104px, calc(11 * var(--vw)), 136px); aspect-ratio:1; margin:0 0 clamp(22px, calc(3 * var(--vw)), 32px); border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.18); }
.av__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; transform:scale(1.9); transform-origin:50% 46%; }
.av__title{ font-size:clamp(2.3rem, calc(5.4 * var(--vw)), 4.4rem); font-weight:700; line-height:1.06; letter-spacing:-.028em; color:#f5f5f7; text-wrap:balance; }
.av__p{ max-width:40em; margin-top:1.55em; font-size:clamp(1.06rem, calc(1.55 * var(--vw)), 1.32rem); line-height:1.5; color:#d2d2d7; text-wrap:balance; }
.av__title + .av__p{ margin-top:clamp(16px, calc(2 * var(--vw)), 24px); }
.av__p em{ font-style:normal; font-weight:600; color:#9db8ff; }
.av__end{ font-style:italic; color:#f3dcc4; }
.av .av__btns{ justify-content:center; margin-top:clamp(32px, calc(4 * var(--vw)), 44px); width:auto; }
.av .av__contact{ justify-content:center; margin-top:18px; }
@media (max-width:760px){
  .av{ padding-top:36px; }
  .av__p br{ display:none; }
  .av__p{ max-width:22em; }
  .av .av__btns{ width:100%; }
  .av .av__contact{ display:flex; flex-wrap:wrap; gap:0 18px; }
}
.av__photo img{ object-position:50% 62%; transform:scale(1.55); transform-origin:50% 42%; }
@media (max-width:760px){ .av__p br{ display:inline; } .av__p{ max-width:none; text-wrap:pretty; } }
@media (max-width:760px){ .av__p{ font-size:16px; } .av__title + .av__p{ margin-top:18px; } }

/* ABOUT v116: the words beside the photo, as short playful lines. Nothing else on the page changes. */
.ab-say{ margin-top:clamp(16px, calc(2 * var(--vw)), 24px); display:flex; flex-direction:column; gap:1.1em; font-size:clamp(1.05rem, calc(1.42 * var(--vw)), 1.3rem); line-height:1.48; color:#d2d2d7; }
.ab-say em{ font-style:normal; font-weight:600; color:#9db8ff; }
.ab-say__end{ font-style:italic; color:#f3dcc4; }
@media (max-width:760px){ .ab-say{ font-size:16px; } .ab-say br{ display:none; } .ab-say br + *{ } }
@media (max-width:760px){ .ab-say br{ display:inline; } .ab-say{ margin-top:14px; } }

/* v118: shorter, smaller */
.ab-say{ font-size:clamp(1rem, calc(1.2 * var(--vw)), 1.12rem); gap:.9em; }
@media (max-width:760px){ .ab-say{ font-size:15px; } }

/* v124: contact headline carries the drifting gradient; no link arrow */
.cta-big__title a::after{ display:none; }
.cta-big__title .grad{ display:inline-block; padding-bottom:.08em; margin-bottom:-.08em; }

/* HOME HERO v126 (wide screens): a strip of the drawing, shown from its top edge, with the name very
   large on black underneath. Words never sit on the artwork. */
@media (min-aspect-ratio:11/10){
  .ah--scene{ height:calc(calc(100 * var(--svh)) - 52px); min-height:460px; padding:0; justify-content:flex-start; }
  .ah--scene .ah__art{ position:relative; inset:auto; z-index:0; flex:1 1 0; min-height:0; width:100%; }
  .ah--scene .ah__art img{ object-position:50% 0; }
  .ah--scene .ah__art::after{ background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, #000 100%); }
  .ah--scene .ah__text{ flex:none; text-align:left; padding-top:clamp(10px, calc(2 * var(--svh)), 22px); padding-bottom:clamp(18px, calc(3.4 * var(--svh)), 34px); }
  .ah--scene .ah__title{
    margin:0; white-space:nowrap; text-wrap:nowrap; line-height:.98; letter-spacing:-.04em;
    font-size:min(calc((calc(100 * var(--vw)) - 2 * var(--gutter)) / 10.6), calc((var(--max) - 2 * var(--gutter)) / 10.6), calc(19 * var(--svh)));
  }
  .ah--scene .ah__sub{ margin-top:clamp(6px, calc(1.2 * var(--svh)), 12px); font-size:clamp(1.05rem, calc(1.6 * var(--vw)), 1.5rem); font-weight:500; }
  .ah--scene .ah__cue{ position:absolute; right:var(--gutter); bottom:clamp(18px, calc(3.4 * var(--svh)), 34px); left:auto; margin:0; transform:none; }
}
@media (min-aspect-ratio:11/10){
  .ah--scene .ah__text{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
  .ah--scene .ah__title{ font-size:min(calc((calc(100 * var(--vw)) - 2 * var(--gutter)) / 11.15), calc((var(--max) - 2 * var(--gutter)) / 11.15), calc(17 * var(--svh))); margin-left:-.035em; }
  .ah--scene .ah__sub{ margin-top:clamp(6px, calc(1.2 * var(--svh)), 12px); }
  .ah--scene .ah__text > .reveal{ opacity:1; transform:none; }
}
@media (min-aspect-ratio:11/10){ .ah--scene .ah__text{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); scale:none; } .ah--scene .ah__title{ margin-left:-.04em; } }
@media (min-aspect-ratio:11/10){ .ah--scene .ah__art::after{ display:none; } }

/* HOME HERO v128 (wide screens): the drawing sits in a rounded frame on the content edges. */
@media (min-aspect-ratio:11/10){
  .ah--scene .ah__art{
    width:calc(100% - 2 * var(--gutter)); max-width:calc(var(--max) - 2 * var(--gutter));
    margin:clamp(16px, calc(2.6 * var(--svh)), 28px) auto 0; border-radius:28px; overflow:hidden; align-self:center;
  }
  .ah--scene .ah__text{ padding-top:clamp(12px, calc(2.2 * var(--svh)), 24px); }
}
@media (min-aspect-ratio:11/10){ .ah--scene .ah__art img{ object-position:50% 24%; } }

/* HOME HERO v130 (wide screens): Apple's product hero. Headline and one line centred on black,
   then the picture underneath in its rounded frame. */
@media (min-aspect-ratio:11/10){
  .ah--scene{ padding:0 0 clamp(16px, calc(2.6 * var(--svh)), 28px); }
  .ah--scene .ah__text{ order:-1; align-items:center; text-align:center; padding-top:clamp(28px, calc(5.4 * var(--svh)), 56px); padding-bottom:0; }
  .ah--scene .ah__title{
    margin:0; font-size:clamp(2.5rem, min(calc(4.6 * var(--vw)), calc(8.4 * var(--svh))), 5rem); font-weight:600; line-height:1.07; letter-spacing:-.015em; white-space:normal;
  }
  .ah--scene .ah__sub{ margin-top:clamp(4px, calc(.8 * var(--svh)), 8px); font-size:clamp(1.15rem, min(calc(1.75 * var(--vw)), calc(3.4 * var(--svh))), 1.75rem); font-weight:400; letter-spacing:.007em; color:#f5f5f7; }
  .ah--scene .ah__cue{ display:none; }
  .ah--scene .ah__art{ margin-top:clamp(20px, calc(3.6 * var(--svh)), 40px); }
}

/* HOME HERO v133: the name sits closer to the top bar; everything else as v130. */
@media (min-aspect-ratio:11/10){
  .ah--scene .ah__text{ padding-top:clamp(14px, calc(2.8 * var(--svh)), 28px); }
}

/* HOME HERO v134: the line under the name is a full sentence now, so it wraps to two balanced lines. */
.ah--scene .ah__sub{ max-width:34em; margin-inline:auto; text-wrap:balance; }
@media (min-aspect-ratio:11/10){ .ah--scene .ah__sub{ font-size:clamp(1.05rem, min(calc(1.45 * var(--vw)), calc(2.9 * var(--svh))), 1.5rem); line-height:1.3; color:rgba(245,245,247,.86); } }
@media (max-aspect-ratio:11/10){ .ah--scene .ah__sub{ font-size:clamp(1.02rem, calc(4.4 * var(--vw)), 1.2rem); font-weight:500; line-height:1.35; padding-inline:4px; } }

/* ABOUT v136: contact links on one line beside the photo (no resume button above them). */
@media (min-width:1200px){
  .ab-hero .cv-contact{ flex-wrap:nowrap; white-space:nowrap; gap:0 clamp(12px, calc(1.5 * var(--vw)), 22px); font-size:clamp(13px, calc(1.05 * var(--vw)), 15px); margin-top:clamp(22px, calc(3 * var(--vw)), 32px); }
}

/* =====================================================================
   PHONE v139: the phone site follows the laptop site.
   ===================================================================== */
/* landing screen: name and line on black, the drawing below in its rounded frame (no fades, no gaps) */
@media (max-aspect-ratio:11/10){
  .ah--scene{ height:calc(calc(100 * var(--svh)) - 52px); min-height:520px; padding:0 0 clamp(16px, calc(2.4 * var(--svh)), 24px); justify-content:flex-start; }
  .ah--scene .ah__text{ order:-1; flex:none; padding-top:clamp(22px, calc(3.6 * var(--svh)), 36px); }
  .ah--scene .ah__title{ margin:0; font-size:clamp(2.1rem, calc(9.8 * var(--vw)), 3.6rem); font-weight:600; line-height:1.07; letter-spacing:-.018em; }
  .ah--scene .ah__sub{ margin-top:10px; max-width:30em; font-size:clamp(1rem, calc(4.3 * var(--vw)), 1.3rem); font-weight:400; line-height:1.35; color:rgba(245,245,247,.86); }
  .ah--scene .ah__cue{ display:none; }
  .ah--scene .ah__art{
    position:relative; inset:auto; z-index:0; flex:1 1 0; min-height:0; align-self:center;
    width:calc(100% - 2 * var(--gutter)); margin:clamp(20px, calc(3.2 * var(--svh)), 32px) 0 0; border-radius:22px; overflow:hidden;
  }
  .ah--scene .ah__art picture{ position:absolute; inset:0; }
  .ah--scene .ah__art img{ width:100%; height:100%; object-fit:cover; object-position:46% 50%; }
  .ah--scene .ah__art::after{ display:none; }
  .ah--scene .ah__text > .reveal{ opacity:1; transform:none; }
}
@media (max-width:760px){
  /* projects: posters arrive from their own side, as on the laptop */
  .wl{ overflow-x:clip; --wl-pad:56px; }
  .stag{ gap:36px; }
  .stag__item{ width:90%; }
  .stag__item:nth-child(even) .stag__cap{ margin-left:auto; text-align:right; }
  .stag-slide .stag__item{ transform:translateX(-28%); }
  .stag-slide .stag__item:nth-child(even){ transform:translateX(28%); }
  .stag-slide .stag__item.is-in{ transform:none; }
  .stag__problem{ font-size:17px; }
  .stag__role{ font-size:14px; }

  /* small labels were 11px */
  .kicker, .beat__when, .tag-label{ font-size:12px; }

  /* about: links as a plain wrapped line, cards stacked instead of a sideways scroller */
  .ab-hero .cv-contact{ display:flex; flex-wrap:wrap; gap:0 18px; padding:0; margin-top:14px; background:none; border-radius:0; font-size:15px; }
  .ab-hero .cv-contact a{ min-height:44px; justify-content:flex-start; border-bottom:0; }
  .ab-hero .cv-contact a::after{ content:none; }
  .grid-cards{ display:grid; grid-auto-flow:row; grid-template-columns:1fr; grid-auto-columns:auto; overflow:visible; margin-inline:0; padding:0; gap:12px; scroll-snap-type:none; }
  .grid-cards > *, .js .grid-cards > .reveal{ scroll-snap-align:none; opacity:1; transform:none; }
  .gcard{ padding:22px 20px 20px; }
  .gcard--wide{ grid-column:auto; }

  /* last part: one calm block, then a short footer */
  .cta-big{ padding-block:64px 48px; }
  .cta-big .cta-big__title{ font-size:clamp(2.6rem, calc(13 * var(--vw)), 3.6rem); margin-top:14px !important; }
  .cta-big__row{ margin-top:24px; gap:20px; }
  .contact-lines{ gap:0; }
  .cta-big__mail{ display:inline-flex; align-items:center; min-height:44px; font-size:18px; }
  .cta-big__row .contact-btns{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; width:100%; }
  .cta-big__row .contact-btns .btn, .cta-big__row .contact-btns .btn:last-child, .cta-big__row .contact-btns .btn:first-child{ grid-column:auto; min-height:44px; padding:0 6px; font-size:14px; gap:4px; }
  .cta-big__wrap > .cform{ margin-top:44px; }
  .cform__head{ font-size:19px; }

  .gfoot{ background:#000; }
  .gfoot__inner{ flex-direction:column; align-items:flex-start; gap:6px; padding:20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-top:0; background:linear-gradient(var(--hairline), var(--hairline)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
  .gfoot__links{ order:-1; display:flex; flex-wrap:wrap; gap:0 22px; border-top:0; }
  .gfoot__links a{ min-height:44px; border-bottom:0; font-size:14px; }
  body:has(.cta-big) .gfoot__links a[target]{ display:none; }
  .gfoot__sign{ align-items:flex-start; gap:10px; }
  .gfoot__inner > span{ font-size:12px; line-height:1.5; color:#86868b; }
}
@media (max-width:760px){ .gfoot__links a{ min-width:44px; } }

/* ABOUT phone v140: under the intro, one tidy row of three links (same pills as the contact section).
   Email and phone live in the contact section at the end of the page, so they are not repeated here. */
@media (max-width:760px){
  .ab-hero .cv-contact{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:22px; font-size:14px; }
  .ab-hero .cv-contact a[href^="mailto:"], .ab-hero .cv-contact a[href^="tel:"]{ display:none; }
  .ab-hero .cv-contact a{
    min-height:44px; justify-content:center; padding:0 6px; border-radius:980px; border:1px solid rgba(245,245,247,.5);
    color:#f5f5f7; background:none; text-decoration:none;
  }
  .ab-hero .cv-contact a::after{ content:'\2197'; margin-left:.3em; font-size:.85em; color:inherit; }
  .ab-hero .ab-say{ margin-top:12px; }
  .ab-hero__title{ margin-top:10px; }
}

/* ABOUT phone v141: under the intro, the resume button replaces the row of links. Laptop unchanged. */
.ab-resume{ display:none; }
@media (max-width:760px){
  html:root .ab-hero .ab-resume{ display:flex; width:100%; min-height:50px; margin-top:22px; justify-content:center; }
  .ab-hero .cv-contact{ display:none; }
}
/* v142: the resume is a plain link, the way Apple writes "Learn more" */
@media (max-width:760px){
  html:root .ab-hero .ab-resume{ display:inline-flex; align-items:center; width:auto; min-height:44px; margin-top:14px; justify-content:flex-start; font-size:17px; color:#2997ff; background:none; border:0; padding:0; }
  .ab-hero .ab-resume::after{ content:'\2197'; margin-left:.3em; font-size:.85em; }
  .ab-hero .ab-resume:active{ text-decoration:underline; }
}

/* =====================================================================
   v144: About and Lab open like the home page (words centred on black, picture framed below),
   and every page gets a small scroll cue at the bottom of its first screen.
   ===================================================================== */
html:root .lab-hero{ text-align:center; }
html:root .lab-hero .intro__title{ margin-inline:auto; }
@media (max-width:760px){
}
/* scroll cue: a thin chevron that drifts down, fixed to the bottom of the first screen; it leaves as soon as you scroll */
.scue{
  position:fixed; z-index:40; left:50%; bottom:max(2px, env(safe-area-inset-bottom)); width:44px; height:40px; margin-left:-22px; padding:0; border:0; background:none;
  display:grid; place-items:center; color:rgba(245,245,247,.7); cursor:pointer; opacity:0; pointer-events:none; transition:opacity 400ms ease;
}
.scue.is-on{ opacity:1; pointer-events:auto; }
.scue svg{ width:22px; height:11px; animation:scue-drift 2.4s cubic-bezier(.45,0,.25,1) infinite; }
.scue:hover{ color:#fff; }
.scue:focus-visible{ outline:2px solid #2997ff; outline-offset:2px; border-radius:8px; }
@keyframes scue-drift{ 0%, 100%{ transform:translateY(-3px); opacity:.55; } 50%{ transform:translateY(3px); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .scue svg{ animation:none; } }
html.intro-on .scue{ opacity:0; }
/* room for the cue under the home picture */
html:root .ah--scene{ padding-bottom:44px; }
@media (min-width:761px){
}

/* ABOUT v146: the two statements read as one designed pair: same size, side by side, each under a hairline. */
.ab-hero .ab-say{
  display:grid; grid-template-columns:repeat(2, max-content); gap:0 clamp(28px, calc(3.4 * var(--vw)), 56px); margin-top:clamp(22px, calc(2.8 * var(--vw)), 36px);
  font-size:clamp(1.02rem, calc(1.3 * var(--vw)), 1.25rem); line-height:1.45; color:#d2d2d7;
}
.ab-hero .ab-say p{ margin:0; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); }
.ab-hero .ab-say em{ color:#f5f5f7; font-weight:600; }
@media (max-width:1100px){
  .ab-hero .ab-say{ grid-template-columns:1fr; gap:14px 0; max-width:24em; }
}
@media (max-width:760px){ .ab-hero .ab-say{ margin-top:16px; font-size:16px; max-width:none; } }

/* ABOUT v147: Apple's intro paragraph. One block of large semibold grey text, key phrases in white. Replaces the v146 pair. */
html:root .ab-hero .ab-say{
  display:block; margin-top:clamp(18px, calc(2.2 * var(--vw)), 28px); max-width:21em;
  font-size:clamp(1.3rem, calc(1.85 * var(--vw)), 1.75rem); font-weight:600; line-height:1.24; letter-spacing:-.012em; color:#86868b; text-wrap:pretty;
}
html:root .ab-hero .ab-say p{ display:inline; margin:0; padding:0; border:0; font:inherit; color:inherit; }
html:root .ab-hero .ab-say br{ display:none; }
html:root .ab-hero .ab-say em{ font-style:normal; font-weight:inherit; color:#f5f5f7; }
@media (max-width:760px){ html:root .ab-hero .ab-say{ margin-top:14px; font-size:clamp(1.2rem, calc(5.4 * var(--vw)), 1.4rem); max-width:none; } html:root .ab-hero .ab-resume{ margin-top:16px; } }
html:root .ab-hero .ab-say p{ display:block; text-wrap:balance; } html:root .ab-hero .ab-say p + p{ margin-top:.5em; } html:root .ab-hero .ab-say{ max-width:19em; }
html:root .ab-hero .ab-say em{ white-space:nowrap; }
@media (min-width:761px){ html:root .ab-hero .ab-say{ max-width:none; } html:root .ab-hero .ab-say br{ display:inline; } html:root .ab-hero .ab-say p{ text-wrap:nowrap; } }
@media (max-width:760px){ html:root .ab-hero .ab-say{ font-size:min(calc(4.55 * var(--vw)), 1.3rem); } html:root .ab-hero .ab-say br{ display:inline; } html:root .ab-hero .ab-say p{ text-wrap:wrap; } }
.story .section-head .lead{ white-space:nowrap; max-width:none; } @media (max-width:760px){ .story .section-head .lead{ font-size:min(calc(3.9 * var(--vw)), 17px); } }
.story .section-head .lead{ white-space:normal; line-height:1.45; } @media (max-width:760px){ .story .section-head .lead{ font-size:16px; text-wrap:balance; } }
.story .section-head .lead{ white-space:nowrap; } @media (max-width:760px){ .story .section-head .lead{ font-size:min(calc(3.9 * var(--vw)), 17px); } }

/* ABOUT v151: one clear order. Headline, then the name line as the single big statement, then one quiet supporting line. */
html:root .ab-hero .ab-say{ color:#f5f5f7; }
html:root .ab-hero .ab-say em{ color:inherit; }
html:root .ab-hero .ab-say .ab-say__more{ margin-top:clamp(14px, calc(1.6 * var(--vw)), 20px); font-size:clamp(1rem, calc(1.2 * var(--vw)), 1.15rem); font-weight:400; line-height:1.5; letter-spacing:0; color:#a1a1a6; }
@media (max-width:760px){ html:root .ab-hero .ab-say .ab-say__more{ font-size:16px; margin-top:12px; } }
html:root .ab-hero .ab-say .ab-say__more{ max-width:25em; text-wrap:balance; white-space:normal; }

/* =====================================================================
   v153: fixes from a sweep of 16 screen sizes (320px phones to 2560px monitors).
   ===================================================================== */
/* About, phones: the photo was so tall that the intro fell below the first screen */
@media (max-width:760px){
  .ab-hero__photo{ width:100%; max-width:none; max-height:none; aspect-ratio:auto; height:clamp(180px, calc(38 * var(--svh)), 380px); }
  .ab-hero__photo img{ object-position:50% 34%; }
}
/* About, portrait tablets and phones held sideways: text beside the photo, as on the laptop */
@media (min-width:761px) and (max-width:860px){
  .ab-hero{ min-height:calc(calc(100 * var(--svh)) - 52px); display:flex; align-items:center; padding-block:clamp(32px, calc(6 * var(--svh)), 72px); }
  .ab-hero__grid{ width:100%; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px, calc(4 * var(--vw)), 48px); align-items:center; }
  .ab-hero__photo{ order:0; justify-self:end; width:min(100%, 320px, calc((calc(100 * var(--svh)) - 52px - 96px) * .8)); max-width:none; aspect-ratio:4 / 5; border-radius:24px; }
  .ab-hero__photo img{ object-position:50% 100%; transform:scale(1.5); transform-origin:50% 100%; }
}
/* short, wide screens (phones held sideways, small laptop windows): keep the first screen and photos inside the screen */
@media (max-height:520px) and (min-width:600px){
  .ah--scene{ min-height:0; height:auto; }
  .ah--scene .ah__art{ flex:none; height:auto; aspect-ratio:1920 / 1341; max-height:none; }
  .ah--scene .ah__art picture{ position:static; }
  .ah--scene .ah__art img{ height:auto; }
  .ab-hero__photo{ width:min(100%, calc((calc(100 * var(--svh)) - 52px - 48px) * .8)); }
  .teaser__photo{ max-height:calc(86 * var(--svh)); width:auto; margin-inline:auto; }
  .ab-hero .ab-say{ font-size:1.05rem; }
  .ab-hero__title{ font-size:clamp(2.2rem, calc(9 * var(--svh)) + 1rem, 3.4rem); }
}
/* touch tablets: links were too small to tap */
@media (pointer:coarse){
  .cta-big__mail, .gfoot__links a, .more{ display:inline-flex; align-items:center; min-height:44px; }
  .gfoot__links{ gap:0 24px; }
}
@media (max-height:520px) and (min-width:600px){
  .ah--scene .ah__art{ aspect-ratio:auto; height:calc(calc(100 * var(--svh)) - 76px); }
  .ah--scene .ah__art picture{ position:absolute; inset:0; }
  .ah--scene .ah__art img{ height:100%; object-position:50% 24%; }
}
@media (max-width:760px) and (max-height:640px){ .ab-hero__photo{ height:clamp(140px, calc(27 * var(--svh)), 200px); } }
@media (max-width:760px){ .ab-hero__photo img{ object-position:50% 74%; } }

/* GAME SHEET v159: the header is laid out like an App Store product page. Icon, name, Get button, info strip. */
.game__head.gstore{ display:block; text-align:left; }
.gstore__top{ display:flex; align-items:flex-start; gap:clamp(16px, calc(2.4 * var(--vw)), 28px); }
.gstore__icon{ flex:none; width:clamp(104px, calc(13 * var(--vw)), 168px); aspect-ratio:1; height:auto; object-fit:contain; padding:10px; border-radius:22.5%; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.gstore__id{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-self:stretch; }
.gstore__title{ font-size:clamp(1.7rem, calc(3.2 * var(--vw)), 2.6rem); font-weight:700; line-height:1.08; letter-spacing:-.02em; color:#f5f5f7; }
.gstore__sub{ margin-top:4px; font-size:clamp(1rem, calc(1.5 * var(--vw)), 1.25rem); color:#a1a1a6; }
.gstore__dev{ margin-top:2px; font-size:15px; color:#2997ff; }
.gstore__get{ margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:14px; }
.gstore__btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:84px; min-height:36px; padding:0 22px; border-radius:980px; background:#0a84ff; color:#fff; font-size:16px; font-weight:700; letter-spacing:.01em; transition:background-color 180ms ease, transform 180ms ease; }
.gstore__btn:hover{ background:#3b9dff; text-decoration:none; }
.gstore__btn:active{ transform:scale(.96); }
.gstore__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.gstore__note{ font-size:12px; line-height:1.35; color:#86868b; }
.gstore__strip{ display:flex; margin:clamp(22px, calc(3 * var(--vw)), 32px) 0 0; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); overflow-x:auto; scrollbar-width:none; }
.gstore__strip::-webkit-scrollbar{ display:none; }
.gstore__strip > div{ flex:1 0 auto; min-width:118px; padding:0 16px; text-align:center; border-left:1px solid rgba(255,255,255,.14); }
.gstore__strip > div:first-child{ border-left:0; }
.gstore__strip dt{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#86868b; }
.gstore__strip dd{ margin:4px 0 0; font-size:21px; font-weight:700; letter-spacing:-.01em; color:#d2d2d7; }
.gstore__strip dd.s{ margin-top:1px; font-size:12.5px; font-weight:400; letter-spacing:0; color:#86868b; }
.game__head.gstore + .game__film{ margin-top:clamp(24px, calc(3.4 * var(--vw)), 40px); }
@media (pointer:coarse){ .gstore__btn{ min-height:44px; } }
@media (max-width:760px){
  .gstore__note br{ display:none; }
  .gstore__strip{ margin-inline:calc(var(--gutter) * -1); padding-inline:calc(var(--gutter) - 16px); }
}
.gstore__get .btn{ flex:none; margin:0; }

/* v162: the game card's button uses the same pill as "View project" on the home posters */
html:root .gthumb .gthumb__btn, html:root .gthumb:hover .gthumb__btn{
  gap:4px; min-height:36px; padding:0 14px 0 16px; border-radius:980px; font-size:14px; font-weight:500; color:#f5f5f7;
  background:rgba(29,29,31,.72); border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%); white-space:nowrap;
}
.gthumb .gthumb__btn::after{ content:'\203A'; font-size:1.25em; line-height:1; transform:translateY(-1px); }

/* CARDS v163: every box on Lab and About uses the "On my mind" card: soft grey panel, hairline edge,
   small spaced label, big title, grey body, dim footer. */
html:root .exp, html:root .gcard, html:root .role{
  background:rgba(42,42,46,.5); border:1px solid rgba(255,255,255,.14); border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.3); padding:32px 30px 30px;
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
}
html:root .exp{ background-image:none; }
html:root .exp h3, html:root .gcard h3, html:root .role h4{ font-size:clamp(1.5rem, calc(2 * var(--vw)), 1.9rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; color:#f5f5f7; }
html:root .exp h3{ margin-top:22px; }
html:root .exp p, html:root .role p{ margin-top:12px; font-size:16.5px; line-height:1.5; color:#a1a1a6; }
html:root .exp .badge{ margin-top:auto; padding-top:24px; font-size:14px; font-weight:400; color:#6e6e73; }
html:root .gcard__icon, html:root .role .honor__icon{ color:#a1a1a6; }
html:root .gcard h3{ margin-top:22px; }
html:root .gcard ul{ margin-top:12px; }
html:root .gcard li{ padding:0; border:0; font-size:16.5px; line-height:1.5; color:#a1a1a6; }
html:root .gcard li + li{ margin-top:4px; }
@media (max-width:760px){ html:root .exp, html:root .gcard, html:root .role{ padding:24px 22px 22px; } }

/* PROJECTS v167 (big screens): the caption moves out from under the poster into the empty half
   beside it, so each row fills the column edge to edge. Freed from the caption, the poster grows. */
@media (min-width:1500px){
  .stag{ --pw:min(70%, calc((calc(100 * var(--svh)) - 230px) * 16 / 9)); gap:clamp(72px, calc(6 * var(--vw)), 120px); }
  .stag__item{ width:100%; display:grid; grid-template-columns:var(--pw) minmax(0, 1fr); column-gap:clamp(40px, calc(3.4 * var(--vw)), 72px); align-items:end; }
  .stag__item:nth-child(even){ grid-template-columns:minmax(0, 1fr) var(--pw); }
  .stag__item:nth-child(even) .stag__poster{ grid-column:2; grid-row:1; }
  .stag__item:nth-child(even) .stag__cap{ grid-column:1; grid-row:1; }
  .stag__item:nth-child(odd) .stag__num{ right:auto; left:calc(var(--pw) - .3em); }
  .stag__item:nth-child(even) .stag__num{ left:auto; right:calc(var(--pw) - .3em); }
  .stag__cap{ margin-top:0; padding-bottom:clamp(8px, calc(1 * var(--vw)), 20px); }
  .stag__problem{ white-space:normal; text-wrap:balance; font-size:clamp(30px, calc(2.3 * var(--vw)), 46px); line-height:1.1; letter-spacing:-.02em; }
  .stag__role{ margin-top:14px; font-size:clamp(16px, calc(1.05 * var(--vw)), 20px); }
  .stag-slide .stag__item{ transform:translateX(-12%); }
  .stag-slide .stag__item:nth-child(even){ transform:translateX(12%); }
  .stag-slide .stag__item.is-in{ transform:none; }
}

/* =====================================================================
   ABOUT STORY v169: told as a story in three chapters, type only (no pictures).
   Form -> The turn -> Function, after the line in the hero ("devoted to form. Function, I
   picked up later"). The chapter title stays beside its lines while they are read, and one
   thread runs down the lines, lighting up dot by dot.
   ===================================================================== */
.chapters{ display:grid; gap:clamp(72px, calc(10 * var(--vw)), 150px); }
.chap{ display:grid; gap:clamp(28px, calc(4 * var(--vw)), 44px); }
.chap + .chap{ padding-top:clamp(72px, calc(10 * var(--vw)), 150px); border-top:1px solid var(--hairline); }
.chap__no{ display:block; font-size:12px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); }
.chap__title{ margin-top:clamp(10px, calc(1.2 * var(--vw)), 18px); font-size:clamp(3.2rem, calc(8.6 * var(--vw)), 8.5rem); font-weight:700; line-height:.95; letter-spacing:-.04em; color:var(--ink); }
.chap__sub{ margin-top:clamp(12px, calc(1.4 * var(--vw)), 22px); font-size:clamp(1.05rem, calc(1.5 * var(--vw)), 1.4rem); color:var(--gray); }

/* the thread: a dot for every line, joined by one rule that lights up as the lines do */
.chap .beats{ gap:0; }
.chap .beat{ position:relative; display:block; padding:0 0 clamp(40px, calc(5.4 * var(--vw)), 76px) clamp(30px, calc(3.6 * var(--vw)), 56px); }
.chap .beat:last-child{ padding-bottom:0; }
.chap .beat::before{
  content:""; position:absolute; left:0; top:.2em; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gray-3); transition:border-color 500ms ease, background 500ms ease, box-shadow 500ms ease;
}
.chap .beat::after{ content:""; position:absolute; left:5px; top:calc(.2em + 17px); bottom:-.2em; width:1px; background:var(--hairline); transform-origin:50% 0; transition:background 700ms ease; }
.chap .beat:last-child::after{ display:none; }
.chap .beat.is-lit::before{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 6px rgba(255,159,69,.14); }
.chap .beat.is-lit::after{ background:linear-gradient(var(--accent), rgba(255,159,69,.25)); }
.chap .beat__when{ display:block; margin-bottom:clamp(10px, calc(1.1 * var(--vw)), 16px); }
.chap .beat__text{ display:block; max-width:22em; }
.story__end{ font-size:clamp(1.05rem, calc(1.5 * var(--vw)), 1.4rem); font-style:italic; color:var(--gray); text-align:center; }

/* wide screens: the chapter title waits on the left while its lines scroll past on the right */
@media (min-width:1000px){
  .chap{ grid-template-columns:minmax(0, 38%) minmax(0, 1fr); column-gap:clamp(32px, calc(4 * var(--vw)), 80px); align-items:start; }
  .chap__head{ position:sticky; top:clamp(96px, calc(18 * var(--svh)), 190px); }
  .chap .beat__text{ font-size:clamp(1.6rem, calc(2.5 * var(--vw)), 2.9rem); }
}
@media (max-width:760px){
  .chap__title{ font-size:clamp(3.4rem, calc(17 * var(--vw)), 4.6rem); }
  .chap .beat{ padding-left:28px; padding-bottom:36px; }
  .chap .beat__when{ margin-bottom:8px; }
}
@media print{ .chap{ display:block; } .chap__title{ font-size:18pt; } .chap + .chap{ padding-top:12pt; border:0; } .chap .beat{ padding:0 0 8pt; } .chap .beat::before, .chap .beat::after, .story__end{ display:none; } }

/* =====================================================================
   TYPE v174: font usage after ariyana-studio.webflow.io. Two families doing two jobs:
   a condensed display face (Bebas Neue) in capitals for every heading and big statement, set very
   large and tight; a plain sans (DM Sans) for reading text and for small capital labels.
   Plus its "stickers": small coloured tags slapped at an angle across the big headings.
   ===================================================================== */
:root{ --font:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --display:'Bebas Neue', 'Six Caps', Impact, 'Arial Narrow', sans-serif; }
html:root body{ letter-spacing:-.008em; }
html:root :is(h1, h2, h3, h4, .beat__text, .stag__problem, .chap__title){ font-family:var(--display); font-weight:400 !important; text-transform:uppercase; letter-spacing:-.012em !important; }
html:root :is(.kicker, .tag-label, .beat__when, .chap__no, .gnav__links a, .gnav__cta, .btn, .gfoot__links a, .stag__role, .more, .stag__more){ text-transform:uppercase; letter-spacing:.02em; }
html:root .gnav .gnav__links a, html:root .gnav .gnav__cta{ font-size:13px; font-weight:500; }
html:root .btn{ font-size:13px; font-weight:600; }
html:root .h2{ font-size:clamp(3.2rem, calc(6.9 * var(--vw)), 7rem); line-height:.95; }
html:root .wl__title{ font-size:clamp(5rem, calc(14 * var(--vw)), 16.6rem); line-height:.86; }
html:root .cta-big .cta-big__title{ font-size:clamp(4.5rem, calc(10.5 * var(--vw)), 10.5rem); line-height:.9; }
html:root .chap__title{ font-size:clamp(4rem, calc(9 * var(--vw)), 10rem); line-height:.88; }
html:root .ab-hero__title{ font-size:clamp(3.6rem, calc(7.4 * var(--vw)), 7.6rem); line-height:.9; }
html:root .intro__title{ font-size:clamp(4rem, calc(10 * var(--vw)), 10.5rem); line-height:.9; max-width:none; }
html:root .beat__text{ font-size:clamp(2.1rem, calc(4.3 * var(--vw)), 4.5rem); line-height:1; }
html:root .chap .beat__text{ font-size:clamp(2rem, calc(3.5 * var(--vw)), 3.9rem); }
html:root .stag__problem{ font-size:clamp(1.9rem, calc(2.4 * var(--vw)), 2.6rem); line-height:1; }
html:root .teaser h2{ font-size:clamp(2.4rem, calc(4.2 * var(--vw)), 4.4rem); line-height:1; }
html:root :is(.exp h3, .gcard h3, .role h4, .thought h3){ font-size:clamp(1.8rem, calc(2.3 * var(--vw)), 2.3rem); line-height:1; }
@media (min-width:1500px){ html:root .stag__problem{ font-size:clamp(2.6rem, calc(3.4 * var(--vw)), 4.2rem); line-height:.96; } }

html:root .mh__name{ font-family:'Bebas Neue', 'League Gothic', Impact, 'Arial Narrow', sans-serif; letter-spacing:0 !important; }

/* stickers */
[data-sticker]{ position:relative; }
.stk{ position:absolute; z-index:3; left:var(--sx, 64%); top:var(--sy, 4%); display:block; font-size:1em; line-height:1; pointer-events:none; }
.stk b{
  display:block; padding:.24em .55em .17em; white-space:nowrap;
  font-family:var(--display); font-size:max(17px, .2em); font-weight:400; line-height:1; letter-spacing:0; text-transform:uppercase;
  color:#111; background:var(--sc, #d9f25c); transform:rotate(var(--sr, -11deg)); transform-origin:50% 50%;
  box-shadow:0 .5em 1.4em rgba(0, 0, 0, .35);
}
.js .stk b{ opacity:0; transform:rotate(calc(var(--sr, -11deg) - 14deg)) scale(1.9); transition:opacity 260ms ease, transform 620ms cubic-bezier(.2, 1.5, .4, 1); }
.js .stk.is-on b{ opacity:1; transform:rotate(var(--sr, -11deg)); }
@media (prefers-reduced-motion:reduce){ .js .stk b{ opacity:1; transform:rotate(var(--sr, -11deg)); transition:none; } }
@media (max-width:760px){ .stk b{ font-size:max(14px, .24em); } }
@media print{ .stk{ display:none; } }

/* ---- home landing (after maxx-template.webflow.io/home-2): one towering line of name across the page.
   It appears alone in the middle of an empty screen, then moves up while the bar, the line under it and
   the projects come in. The name is then drawn on a WebGL canvas, the way the reference does it: around
   the pointer the letters are scattered into grain (a "diffuse" pass) and bent (a "bulge" pass). ---- */
.mh{ --pad:max(var(--gutter), calc((calc(100 * var(--vw)) - var(--max)) / 2 + var(--gutter))); position:relative; overflow-x:clip; background:var(--c-bg); padding:clamp(10px, calc(2.4 * var(--svh)), 28px) var(--pad) clamp(20px, calc(4 * var(--svh)), 44px); }
.mh__name{
  position:relative; font-family:'Bebas Neue', 'League Gothic', Impact, 'Arial Narrow', sans-serif; font-size:var(--fs, calc(15.6 * var(--vw))); font-weight:400 !important;
  line-height:.9; letter-spacing:0 !important; text-transform:uppercase; font-kerning:none; color:var(--c-ink); white-space:nowrap; cursor:default;
}
.mh__base{ display:block; }
.mh__in{ display:inline-block; }
.mh__gl{ position:absolute; left:calc(var(--glpad, 0px) * -1); top:calc(var(--glpad, 0px) * -1); width:calc(100% + var(--glpad, 0px) * 2); height:calc(100% + var(--glpad, 0px) * 2); pointer-events:none; opacity:0; }
.mh__name.is-gl .mh__gl{ opacity:1; }
.mh__name.is-gl .mh__base{ color:transparent; }
.mh__row{ display:grid; grid-template-columns:minmax(0, 1.2fr) auto minmax(0, 1.2fr); align-items:start; gap:24px; margin-top:clamp(18px, calc(3.6 * var(--svh)), 44px); font-size:clamp(12px, calc(.95 * var(--vw)), 15px); line-height:1.4; letter-spacing:.03em; text-transform:uppercase; color:var(--c-ink); }
.mh__row .mh__sub{ max-width:44ch; }
.mh__row > :nth-child(2){ text-align:center; color:var(--c-mute); }
.mh__row > :nth-child(3){ text-align:right; color:var(--c-mute); }
html:root .mh + .wl{ --wl-pad:clamp(28px, calc(4.4 * var(--svh)), 56px); }
@media (max-width:760px){
  .mh{ padding-top:16px; }
  .mh__name{ font-size:var(--fs, calc(37 * var(--vw))); line-height:.92; }
  .mh__line{ display:block; }
  .mh__row{ grid-template-columns:1fr 1fr; gap:14px 16px; font-size:12px; }
  .mh__row .mh__sub{ grid-column:1 / -1; max-width:none; font-size:13px; }
  .mh__row > :nth-child(2){ text-align:left; }
}

/* the opening: everything but the name waits, the name sits in the middle of the screen */
html.mh-pre{ overflow:hidden; }
html.mh-pre .mh__name{ transform:translate3d(0, var(--cy, 0px), 0); }
html.mh-pre :is(.gnav, .mh__row, .scue), html.mh-pre main > :not(.mh){ opacity:0 !important; }
html.mh-pre main > :not(.mh){ transform:translate3d(0, 60px, 0); }
html.mh-go .mh__name{ transition:transform 1250ms cubic-bezier(.76, 0, .24, 1); }
html.mh-go :is(.gnav, .mh__row){ transition:opacity 900ms ease 650ms; }
html.mh-go main > :not(.mh){ transition:opacity 1000ms ease 700ms, transform 1300ms cubic-bezier(.16, 1, .3, 1) 700ms; }

/* ---- letters and words rise out of a mask ---- */
.cm{ display:inline-block; overflow:hidden; vertical-align:top; padding-block:.09em; margin-block:-.09em; }
.cm > *{ display:inline-block; }
.js [data-rise] .cm > *{ transform:translate3d(0, 112%, 0); transition:transform 1000ms cubic-bezier(.16, 1, .3, 1); transition-delay:calc(var(--i, 0) * 26ms + var(--d, 0ms)); }
.js [data-rise].is-up .cm > *{ transform:none; }
.js [data-rise="words"] .cm > *{ transition-delay:calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
.js .mh__sub[data-fade] span{ opacity:0; transition:opacity 900ms ease 700ms; } .js .mh__sub[data-fade].is-up span{ opacity:1; }
.js .mh__meta[data-fade]{ transition:opacity 900ms ease 500ms; } .js .mh__meta[data-fade]:not(.is-up){ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .js [data-rise] .cm > *{ transform:none; transition:none; }
  .js .mh{ height:auto; } .js .mh__pin{ position:static; height:auto; min-height:calc(calc(100 * var(--svh)) - 52px); }
  .js .mh__line, .js .mh__sub span{ transform:none !important; } .js .mh__name{ opacity:1; }
  .js .mh__sub[data-fade] span, .js .mh__meta[data-fade]{ opacity:1 !important; transition:none; }
}
@media (max-width:760px){ html:root .story .section-head .lead{ white-space:normal; font-size:14px; } }

/* =====================================================================
   ABOUT STORY v175: laid out like the year timeline on ariyana-studio.webflow.io.
   A small eyebrow and one big statement open it. Then the story runs sideways: each stop is a giant
   year (or marker) with a sticker slapped on it and a dash after it, a hairline, and the plain text under.
   The section pins while the row slides past; on phones the stops stack.
   ===================================================================== */
.yr-sec{ overflow:visible; }
.yr-eyebrow{ display:flex; align-items:center; gap:.5em; font-size:clamp(1.15rem, calc(1.9 * var(--vw)), 1.9rem); font-weight:600; letter-spacing:-.01em; color:var(--c-ink); }
.yr-eyebrow i{ width:.62em; aspect-ratio:1; border-radius:50%; background:currentColor; }
.yr-eyebrow em{ font-style:italic; font-weight:600; }
html:root .yr-say{ margin-top:clamp(18px, calc(2.4 * var(--vw)), 34px); max-width:17em; font-size:clamp(2.3rem, calc(4.6 * var(--vw)), 4.6rem); line-height:1; }
.yr-say mark{ background:none; color:inherit; }
.js .yr-say .w{ color:rgb(var(--c-ink-rgb) / .35); transition:color 500ms ease; }
.js .yr-say .w.on{ color:var(--c-ink); } .js .yr-say mark .w.on{ color:var(--c-accent); }
.yr-lead{ margin-top:clamp(16px, calc(2 * var(--vw)), 26px); color:var(--c-mute); font-size:clamp(1rem, calc(1.25 * var(--vw)), 1.25rem); }
.yr{ --padx:max(var(--gutter), calc((calc(100 * var(--vw)) - var(--max)) / 2 + var(--gutter))); margin-top:clamp(48px, calc(7 * var(--vw)), 96px); }
.yr__track{ display:flex; gap:calc(12.5 * var(--vw)); width:max-content; will-change:transform; }
.yr__item{ flex:none; width:max(calc(32 * var(--vw)), 420px); }
.yr__year{ position:relative; display:flex; align-items:center; gap:.14em; font-family:var(--display, 'Bebas Neue', Impact, sans-serif); font-size:clamp(9rem, calc(16.9 * var(--vw)), 17.5rem); line-height:.8; letter-spacing:-.03em; color:var(--c-ink); white-space:nowrap; }
.yr__dash{ flex:none; width:.3em; height:.032em; margin-top:.06em; background:currentColor; }
.yr__body{ margin:clamp(36px, calc(6.5 * var(--svh)), 84px) 0 0 max(calc(1.9 * var(--vw)), 24px); padding-top:clamp(22px, calc(4 * var(--svh)), 48px); border-top:1px solid rgb(var(--c-ink-rgb) / .4); max-width:30em; font-size:clamp(1rem, calc(1.25 * var(--vw)), 1.25rem); line-height:1.5; letter-spacing:-.005em; color:#d2d2d7; }
.yr mark{ background:none; color:var(--c-accent); }
@media (min-width:761px){
  .js .yr__pin{ position:sticky; top:0; height:calc(100 * var(--svh)); overflow:hidden; display:flex; align-items:center; }
  :root:not(.js) .yr__pin{ overflow-x:auto; } :root:not(.js) .yr__track{ padding-inline:var(--padx); }
}
@media (max-width:760px){
  .yr__track{ flex-direction:column; gap:56px; width:auto; padding-inline:var(--padx); }
  .yr__item{ width:auto; padding-right:0; }
  .yr__year{ font-size:calc(34 * var(--vw)); }
  .yr__body{ margin:26px 0 0; padding-top:20px; }
}
@media print{ .yr__track{ display:block; } .yr__year{ font-size:20pt; } .yr__body{ margin:4pt 0 10pt; padding:0; border:0; color:#111; } }

/* =====================================================================
   HOME v177: laid out after the Valtero template (rovano-template.webflow.io), in my own code and with
   this site's own words and work. Black and var(--c-ink) only. Display type in condensed capitals, Inter for
   reading. Order: name hero with a centred line and a foot row -> full-screen project panels that
   slide over one another -> one centred statement with pill buttons -> two giant rows of moving words
   -> numbered rows (thumbnail, title, line, category chips) -> big statement with portrait and a row
   of large numbers -> contact. The name animation in the hero is unchanged.
   ===================================================================== */
:root{ --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
html:root body{ letter-spacing:-.011em; }

/* top bar: clear over var(--c-bg), links in display capitals, one var(--c-ink) pill */
html:root .gnav .gnav__links a{ font-family:var(--display); font-size:17px; font-weight:400; letter-spacing:.03em; }
@media (min-width:761px){
  html:root .gnav .gnav__cta{ font-family:var(--display); font-size:17px; font-weight:400; letter-spacing:.04em; background:var(--c-ink); color:var(--c-bg); border-radius:980px; padding:7px 16px 5px; }
  html:root .gnav .gnav__cta::after{ display:none; }
}

/* hero: name, centred line, foot row */
.mh--rv{ display:flex; flex-direction:column; min-height:calc(calc(100 * var(--svh)) - 52px); padding-bottom:clamp(18px, calc(3 * var(--svh)), 32px); }
.mh__tag{ margin:clamp(20px, calc(3.4 * var(--svh)), 40px) auto 0; max-width:21em; text-align:center; font-size:clamp(1rem, calc(1.2 * var(--vw)), 1.2rem); font-weight:600; line-height:1.3; color:var(--c-ink); text-wrap:balance; }
.mh__foot{ margin-top:auto; padding-top:32px; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:16px; font-family:var(--display); font-size:16px; line-height:1.3; letter-spacing:.045em; text-transform:uppercase; color:var(--c-ink); }
.mh__list{ list-style:none; }
.mh__scroll{ color:var(--c-ink); text-decoration:none; white-space:nowrap; }
.mh__scroll::before{ content:"\2193"; margin-right:.5em; }
.mh__count{ text-align:right; }
html.mh-pre :is(.mh__tag, .mh__foot){ opacity:0 !important; }
html.mh-go :is(.mh__tag, .mh__foot){ transition:opacity 900ms ease 650ms; }
@media (max-width:760px){ .mh__foot{ grid-template-columns:1fr 1fr; font-size:14px; } .mh__scroll{ display:none; } .mh__tag{ font-size:15px; } }

/* project panels: each fills the screen and the next one slides over it */
html:root .rv-work{ padding:0; --wl-pad:0px; }
.rv-panels{ display:block; }
.rv-panel{ position:sticky; top:0; display:block; height:calc(100 * var(--svh)); overflow:hidden; color:#fff; background:#111; text-decoration:none; }
.rv-panel picture, .rv-panel img{ position:absolute; inset:0; width:100%; height:100%; }
.rv-panel img{ object-fit:cover; object-position:var(--f, 50% 50%); transform:scale(1.04); transition:transform 1400ms cubic-bezier(.2, .7, .2, 1); }
.rv-panel:hover img{ transform:scale(1.08); }
.rv-panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .62) 100%); }
.rv-panel > span, .rv-panel > h3{ position:absolute; z-index:2; }
html:root .rv-panel__title{ left:clamp(16px, calc(1.1 * var(--vw)), 24px); bottom:clamp(18px, calc(2.6 * var(--svh)), 30px); font-size:clamp(2.6rem, calc(4 * var(--vw)), 4rem); line-height:.85; letter-spacing:.006em !important; color:#fff; }
.rv-panel__meta{ right:clamp(16px, calc(1.1 * var(--vw)), 24px); bottom:clamp(20px, calc(3 * var(--svh)), 34px); font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; }
.rv-panel__ticks{ left:clamp(16px, calc(1.1 * var(--vw)), 24px); top:50%; display:grid; gap:22px; translate:0 -50%; }
.rv-panel__ticks i{ display:block; width:26px; height:1px; background:rgba(255, 255, 255, .55); }
.rv-panel__ticks i.on{ width:52px; height:2px; background:#fff; }
.rv-panel__go{ left:50%; top:50%; translate:-50% -50%; padding:10px 18px 8px; border-radius:980px; background:#fff; color:#000; font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; opacity:0; transition:opacity 300ms ease; }
.rv-panel:hover .rv-panel__go, .rv-panel:focus-visible .rv-panel__go{ opacity:1; }
@media (hover:none){ .rv-panel__go{ display:none; } }
@media (max-width:760px){ .rv-panel{ height:calc(82 * var(--svh)); } .rv-panel__ticks{ display:none; } .rv-panel__meta{ left:16px; right:auto; bottom:auto; top:18px; font-size:15px; } html:root .rv-panel__title{ font-size:clamp(2.4rem, calc(11 * var(--vw)), 3.2rem); right:16px; } }

/* one centred statement, pill buttons under it */
.rv-say{ padding:clamp(88px, calc(15 * var(--svh)), 170px) var(--gutter) clamp(56px, calc(9 * var(--svh)), 110px); text-align:center; background:var(--c-bg); position:relative; z-index:1; }
.rv-say p{ margin:0 auto; max-width:19em; font-size:clamp(1.3rem, calc(1.7 * var(--vw)), 1.7rem); font-weight:600; line-height:1.3; color:var(--c-ink); text-wrap:balance; }
.rv-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:clamp(22px, calc(3 * var(--svh)), 34px); }
.rv-pill{ display:inline-flex; align-items:center; min-height:38px; padding:9px 18px 7px; border-radius:980px; background:var(--c-ink); color:var(--c-bg); font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; transition:opacity 200ms ease; }
.rv-pill--line{ background:none; color:var(--c-ink); box-shadow:inset 0 0 0 1px rgb(var(--c-ink-rgb) / .55); }
.rv-pill:hover{ opacity:.8; }

/* two rows of giant words that move sideways with the scroll */
.rv-mq{ overflow:hidden; padding:clamp(20px, calc(5 * var(--svh)), 60px) 0 clamp(40px, calc(9 * var(--svh)), 110px); background:var(--c-bg); position:relative; z-index:1; }
.rv-mq div{ display:flex; width:max-content; font-family:var(--display); font-size:clamp(6rem, calc(18 * var(--vw)), 18rem); line-height:.85; letter-spacing:.004em; text-transform:uppercase; white-space:nowrap; color:var(--c-ink); will-change:transform; transform:translate3d(calc(calc(-8 * var(--vw)) + var(--y, 0) * -.22px), 0, 0); }
.rv-mq div + div{ transform:translate3d(calc(calc(-46 * var(--vw)) + var(--y, 0) * .22px), 0, 0); }
.rv-mq span::after{ content:"\2022"; margin:0 .14em; }

/* numbered rows */
.rv-rows{ padding-bottom:clamp(64px, calc(12 * var(--svh)), 150px); background:var(--c-bg); position:relative; z-index:1; }
.rv-rows .wrap{ max-width:min(var(--max), 1500px); }
.rv-row{ display:grid; grid-template-columns:76px minmax(0, 330px) minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(18px, calc(2.4 * var(--vw)), 44px); align-items:start; padding:clamp(22px, calc(3 * var(--svh)), 34px) 0; border-bottom:1px solid rgb(var(--c-ink-rgb) / .14); color:var(--c-ink); text-decoration:none; }
.rv-row__n{ justify-self:start; padding:3px 6px 1px; border-radius:6px; background:var(--c-ink); color:var(--c-bg); font-family:var(--display); font-size:19px; line-height:1.1; }
.rv-row__img{ aspect-ratio:2 / 1; border-radius:14px; overflow:hidden; background:var(--c-surface); display:grid; place-items:center; }
.rv-row__img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.2, .7, .2, 1); }
.rv-row:hover .rv-row__img img{ transform:scale(1.05); }
.rv-row__img b{ font-family:var(--display); font-size:clamp(3rem, calc(5 * var(--vw)), 5rem); font-weight:400; line-height:1; color:var(--c-ink); }
html:root .rv-row__title{ font-family:var(--font); font-size:clamp(1.3rem, calc(1.7 * var(--vw)), 1.7rem); font-weight:600 !important; line-height:1.3; letter-spacing:-.01em !important; text-transform:none; color:var(--c-ink); }
.rv-row__desc{ margin-top:8px; max-width:22em; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-.012em; color:rgb(var(--c-ink-rgb) / .78); }
.rv-row__k{ display:block; font-family:var(--display); font-size:16px; letter-spacing:.045em; text-transform:uppercase; color:var(--c-ink); }
.rv-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.rv-chips span{ padding:4px 8px; border-radius:6px; background:#222; font-size:14px; font-weight:500; line-height:1.3; color:#fff; }
@media (max-width:1000px){ .rv-row{ grid-template-columns:56px minmax(0, 1fr); } .rv-row__img{ grid-column:2; } .rv-row > div:nth-child(3), .rv-row > div:nth-child(4){ grid-column:2; } }

/* big statement with portrait, then a row of large numbers */
.rv-about{ padding:clamp(40px, calc(8 * var(--svh)), 100px) 0 clamp(72px, calc(13 * var(--svh)), 160px); background:var(--c-bg); position:relative; z-index:1; }
.rv-about__top{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(24px, calc(4 * var(--vw)), 72px); align-items:start; }
html:root .rv-about__title{ font-size:clamp(3.2rem, calc(7 * var(--vw)), 8.4rem); line-height:.86; letter-spacing:.002em !important; color:var(--c-ink); }
.rv-about__sub{ margin-top:clamp(18px, calc(2.4 * var(--vw)), 32px); max-width:24em; font-size:16px; font-weight:600; line-height:1.3; color:var(--c-ink); }
.rv-about__photo{ justify-self:end; width:100%; max-width:420px; aspect-ratio:4 / 4.7; border-radius:10px; overflow:hidden; background:var(--c-surface); }
.rv-about__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.rv-stats{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(16px, calc(2 * var(--vw)), 40px); margin-top:clamp(56px, calc(10 * var(--svh)), 120px); }
.rv-stats b{ display:block; font-family:var(--display); font-size:clamp(4rem, calc(7.5 * var(--vw)), 7.5rem); font-weight:400; line-height:.85; color:var(--c-ink); }
.rv-stats span{ display:block; margin-top:14px; font-size:14px; font-weight:500; line-height:1.3; color:rgb(var(--c-ink-rgb) / .62); }
@media (max-width:860px){ .rv-about__top{ grid-template-columns:1fr; } .rv-about__photo{ justify-self:start; max-width:300px; } .rv-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:36px; } }
html:root .rv-work ~ .cta-big{ position:relative; z-index:1; }
@media print{ .rv-panel{ position:static; height:auto; } .rv-mq{ display:none; } }

/* project panels v178: each panel shows the whole project frame (the cover slide with its name, picture, line and
   dates), uncropped, on a blurred copy of its own photo */
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rv-panel{ display:grid; place-items:center; }
.rv-panel__bg{ position:absolute; inset:0; z-index:0 !important; overflow:hidden; }
.rv-panel__bg img{ filter:blur(34px) brightness(.5) saturate(1.15); transform:scale(1.18) !important; }
.rv-panel::after{ background:linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, .45) 100%); z-index:1; }
.rv-panel > .rv-panel__frame{ position:relative; z-index:2; display:block; width:min(calc(92 * var(--vw)), calc((calc(100 * var(--svh)) - 150px) * 16 / 9)); margin-top:26px; border-radius:clamp(10px, calc(1.2 * var(--vw)), 20px); overflow:hidden; background:#fff; box-shadow:0 40px 110px rgba(0, 0, 0, .55); transition:transform 900ms cubic-bezier(.2, .7, .2, 1); }
.rv-panel__frame img{ position:static; display:block; width:100%; height:auto; object-fit:initial; transform:none !important; }
.rv-panel:hover .rv-panel__frame{ transform:scale(1.015); }
@media (max-width:760px){ .rv-panel > .rv-panel__frame{ width:calc(calc(100 * var(--vw)) - 32px); margin-top:0; } }

/* project panels v179: in the page flow, with parallax inside each panel (as on the template) */
.rv-panel{ position:relative; top:auto; }
.rv-panel__bg{ inset:-18% 0; }
.rv-panel__bg img{ transform:translate3d(0, calc(var(--p, 0) * 13%), 0) scale(1.12) !important; will-change:transform; }
.rv-panel > .rv-panel__frame{ transform:translate3d(0, calc(var(--p, 0) * calc(6 * var(--svh))), 0); transition:none; will-change:transform; }
.rv-panel:hover .rv-panel__frame{ transform:translate3d(0, calc(var(--p, 0) * calc(6 * var(--svh))), 0); }
.rv-panel__frame img{ transition:transform 900ms cubic-bezier(.2, .7, .2, 1); }
.rv-panel:hover .rv-panel__frame img{ transform:scale(1.02) !important; }
@media (prefers-reduced-motion:reduce){ .rv-panel__bg img, .rv-panel > .rv-panel__frame{ transform:none !important; } }

/* home name v179: letters at rest while the canvas copy is measured, and more room in the letter masks */
.mh__base.is-still .cm > *{ transition:none !important; transform:none !important; }
.mh__name .cm{ padding-block:.22em; margin-block:-.22em; }

/* project panels v180 (after re-checking the template): edge to edge, touching, in the page flow; the whole project
   slide is the picture, uncropped, and it drifts inside its panel as the page scrolls. No card, no blurred backdrop. */
.rv-panels{ position:relative; display:grid; gap:10px; background:#000; }
html:root .rv-panel{ position:relative; display:block; height:auto; aspect-ratio:16 / 9; overflow:hidden; background:#fff; color:#111; }
.rv-panel::after{ display:none; }
.rv-panel > .rv-panel__img{ position:absolute; inset:0; z-index:1; display:block; }
.rv-panel .rv-panel__img img, .rv-panel:hover .rv-panel__img img{ position:static; display:block; width:100%; height:100%; object-fit:cover; transform:translate3d(0, calc(var(--p, 0) * 9%), 0) !important; transition:none; will-change:transform; }
html:root .rv-panel > .rv-panel__meta{ left:auto; top:auto; right:clamp(16px, calc(1.6 * var(--vw)), 34px); bottom:clamp(14px, calc(2.2 * var(--vw)), 40px); z-index:3; font-size:clamp(14px, calc(1.15 * var(--vw)), 22px); color:#111; }
.rv-panel > .rv-panel__go{ left:var(--mx, 50%); top:var(--my, 50%); z-index:4; translate:-50% calc(-100% - 18px); background:#111; color:#fff; pointer-events:none; transition:opacity 200ms ease; }
.rv-ticks{ position:sticky; top:0; height:0; margin-bottom:-10px; z-index:5; pointer-events:none; mix-blend-mode:difference; }
.rv-ticks span{ position:absolute; left:clamp(14px, calc(1 * var(--vw)), 22px); top:calc(50 * var(--svh)); display:grid; gap:22px; translate:0 -50%; }
.rv-ticks i{ display:block; width:26px; height:1px; background:rgba(255, 255, 255, .6); transition:width 400ms cubic-bezier(.2, .7, .2, 1), background 400ms ease; }
.rv-ticks i.on{ width:52px; height:2px; background:#fff; }
@media (max-width:760px){ .rv-ticks{ display:none; } .rv-panels{ gap:6px; } .rv-panel .rv-panel__img img, .rv-panel:hover .rv-panel__img img{ transform:translate3d(0, calc(var(--p, 0) * 5%), 0) !important; } html:root .rv-panel > .rv-panel__meta{ font-size:11px; right:10px; bottom:8px; } }
@media (prefers-reduced-motion:reduce){ .rv-panel .rv-panel__img img{ transform:none !important; } }
@media print{ .rv-ticks{ display:none; } }

/* project panels v181 (the user's pick): each project fills the whole screen with its actual photo, pins there, and
   the next one slides up over it. The name, one line, the discipline and the number sit over the photo. A stretch of
   extra scrolling after each panel lets it be seen whole before the next arrives. */
.rv-panels{ display:block; gap:0; }
html:root .rv-panel{ position:sticky; top:0; display:block; height:calc(100 * var(--svh)); aspect-ratio:auto; margin-bottom:calc(55 * var(--svh)); overflow:hidden; background:#111; color:#fff; }
html:root .rv-panel:last-child{ margin-bottom:0; }
.rv-panel--photo > picture, .rv-panel--photo > picture img{ position:absolute; inset:0; width:100%; height:100%; }
.rv-panel--photo > picture img{ object-fit:cover; object-position:var(--f, 50% 50%); transform:scale(1.03); transition:transform 1400ms cubic-bezier(.2, .7, .2, 1); }
.rv-panel--photo:hover > picture img{ transform:scale(1.07); }
.rv-panel--photo::after{ display:block; content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .78) 100%); }
html:root .rv-panel--photo > .rv-panel__title{ position:absolute; z-index:2; left:clamp(16px, calc(1.6 * var(--vw)), 34px); right:20%; bottom:clamp(20px, calc(3.4 * var(--svh)), 40px); font-size:clamp(3.4rem, calc(6.6 * var(--vw)), 7rem); line-height:.84; color:#fff; }
.rv-panel--photo > .rv-panel__line{ position:absolute; z-index:2; left:clamp(16px, calc(1.6 * var(--vw)), 34px); bottom:calc(clamp(20px, calc(3.4 * var(--svh)), 40px) + clamp(3.4rem, calc(6.6 * var(--vw)), 7rem) * .84 + 14px); max-width:32em; font-size:clamp(15px, calc(1.15 * var(--vw)), 19px); font-weight:500; line-height:1.35; color:rgba(255, 255, 255, .9); }
html:root .rv-panel--photo > .rv-panel__meta{ left:auto; top:auto; right:clamp(16px, calc(1.6 * var(--vw)), 34px); bottom:clamp(20px, calc(3.4 * var(--svh)), 40px); font-size:clamp(2.2rem, calc(3.6 * var(--vw)), 3.8rem); line-height:.84; letter-spacing:.01em; color:#fff; }
.rv-panel--photo > .rv-panel__top{ position:absolute; z-index:2; right:clamp(16px, calc(1.6 * var(--vw)), 34px); top:clamp(70px, calc(9 * var(--svh)), 96px); font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.rv-panel--photo > .rv-panel__go{ background:#fff; color:#000; }
@media (max-width:760px){
  html:root .rv-panel{ height:calc(86 * var(--svh)); margin-bottom:calc(34 * var(--svh)); }
  html:root .rv-panel--photo > .rv-panel__title{ right:16px; font-size:clamp(2.8rem, calc(13 * var(--vw)), 3.8rem); bottom:56px; }
  .rv-panel--photo > .rv-panel__line{ bottom:auto; top:64px; right:16px; font-size:14px; }
  html:root .rv-panel--photo > .rv-panel__meta{ right:auto; left:16px; bottom:16px; font-size:1.6rem; }
  .rv-panel--photo > .rv-panel__top{ top:auto; bottom:20px; right:16px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce){ .rv-panel--photo > picture img{ transform:none; transition:none; } }
@media print{ html:root .rv-panel{ position:static; height:auto; min-height:220pt; margin-bottom:8pt; } }

/* project panels v182: same pinned, slide-over panels, but each one shows the entire cover slide (its var(--c-ink) border,
   name, picture, line and dates), never cropped. The panel is var(--c-ink) like the slide, so the slide reads as filling
   the whole screen; it sits below the top bar so the bar never covers the name. */
html:root .rv-panel--slide{ background:#fff; color:#111; }
.rv-panel--slide > .rv-panel__img{ position:absolute; inset:52px 0 0 0; z-index:1; display:block; }
.rv-panel--slide .rv-panel__img img, .rv-panel--slide:hover .rv-panel__img img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; transform:none !important; transition:none; }
@media (max-width:760px){
  html:root .rv-panel--slide{ top:52px; height:auto; aspect-ratio:16 / 9; margin-bottom:calc(12 * var(--svh)); }
  .rv-panel--slide > .rv-panel__img{ inset:0; }
  .rv-panel--slide .rv-panel__img img{ width:100%; height:100%; }
}

/* project panels v183: a little polish, same structure. Each panel is a sheet with rounded top corners and a soft
   shadow, so the pile reads as layers. The panel underneath sinks back and dims as the next one covers it. Each
   slide eases up into place as its panel arrives. */
html:root .rv-panel--slide{ border-radius:clamp(18px, calc(2 * var(--vw)), 34px) clamp(18px, calc(2 * var(--vw)), 34px) 0 0; box-shadow:0 -28px 80px rgba(0, 0, 0, .38); isolation:isolate; }
.rv-panel--slide > .rv-panel__img{ transform:translate3d(0, calc((1 - var(--a, 1)) * calc(7 * var(--svh))), 0) scale(calc(1 - var(--c, 0) * .045)); transform-origin:50% 40%; will-change:transform; }
.rv-panel--slide::before{ content:""; position:absolute; inset:0; z-index:3; background:#000; opacity:calc(var(--c, 0) * .5); pointer-events:none; }
html:root .rv-panel--slide > .rv-panel__meta{ display:inline-flex; align-items:center; gap:.7em; right:clamp(18px, calc(2 * var(--vw)), 40px); bottom:clamp(16px, calc(2.4 * var(--svh)), 30px); padding:8px 14px 6px; border-radius:980px; background:#111; color:#fff; font-size:clamp(13px, calc(.95 * var(--vw)), 16px); letter-spacing:.06em; opacity:calc(1 - var(--c, 0) * 1.6); }
.rv-panel--slide > .rv-panel__go{ box-shadow:0 10px 30px rgba(0, 0, 0, .25); }
.rv-ticks i{ border-radius:2px; }
@media (max-width:760px){
  html:root .rv-panel--slide{ border-radius:14px 14px 0 0; box-shadow:0 -14px 40px rgba(0, 0, 0, .4); }
  .rv-panel--slide > .rv-panel__img{ transform:scale(calc(1 - var(--c, 0) * .04)); }
  html:root .rv-panel--slide > .rv-panel__meta{ right:8px; bottom:8px; padding:5px 9px 4px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){ .rv-panel--slide > .rv-panel__img{ transform:none; } .rv-panel--slide::before{ display:none; } }

/* project panels v184: the template's look with the pinned slide-over interaction kept.
   Each cover slide runs edge to edge, side to side, with square corners and no card, sheet or shadow. A slide at
   full width is taller than most screens, so its panel scrolls up until its bottom edge reaches the bottom of the
   screen and pins there; the next project then slides up over it. Nothing is cropped: the top of the slide is seen
   as it arrives, the rest when it pins. Tick marks sit flush at the left edge, as on the template. */
html:root .rv-panel--slide{ top:min(52px, calc(calc(100 * var(--svh)) - calc(56.25 * var(--vw)))); height:auto; aspect-ratio:16 / 9; margin-bottom:calc(38 * var(--svh)); border-radius:0; box-shadow:none; background:#fff; }
html:root .rv-panel--slide:last-child{ margin-bottom:0; }
.rv-panel--slide > .rv-panel__img{ inset:0; transform:none; }
.rv-panel--slide::before{ display:none; }
html:root .rv-panel--slide > .rv-panel__meta{ display:block; right:clamp(16px, calc(1.1 * var(--vw)), 24px); bottom:clamp(14px, calc(2 * var(--svh)), 26px); padding:0; border-radius:0; background:none; color:#111; font-size:clamp(1.5rem, calc(2.4 * var(--vw)), 2.7rem); line-height:.85; letter-spacing:.01em; opacity:1; }
.rv-panel--slide > .rv-panel__go{ box-shadow:none; }
.rv-ticks span{ left:0; gap:24px; }
.rv-ticks i{ width:28px; height:1px; border-radius:0; background:rgba(255, 255, 255, .7); }
.rv-ticks i.on{ width:56px; height:1px; background:#fff; }
@media (max-width:760px){ html:root .rv-panel--slide{ margin-bottom:calc(10 * var(--svh)); border-radius:0; box-shadow:none; } .rv-panel--slide > .rv-panel__img{ transform:none; } html:root .rv-panel--slide > .rv-panel__meta{ right:8px; bottom:6px; padding:0; font-size:15px; } }
.rv-panel--slide + .rv-panel--slide{ box-shadow:0 -2px 0 #000; }

/* =====================================================================
   TOP BAR v185 (after the Valtero template). The old strip (.gnav) is retired. The new bar is clear, lies over the
   top of the page and scrolls away with it: mark and name at the left, a var(--c-ink) "Resume" pill and a round menu dot at
   the right. Once the page has scrolled, the dot alone floats at the top right. The dot opens a full-screen menu
   with large links.
   ===================================================================== */
html:root .gnav{ display:none !important; }
.vnav{ position:absolute; z-index:300; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px clamp(16px, calc(2 * var(--vw)), 32px); color:var(--c-ink); pointer-events:none; }
.vnav > *{ pointer-events:auto; }
.vnav__brand{ display:inline-flex; align-items:center; gap:12px; color:var(--c-ink); text-decoration:none; font-family:var(--display); font-size:27px; line-height:1; letter-spacing:.07em; text-transform:uppercase; }
.vnav__brand svg{ display:block; width:auto; height:24px; }
.vnav__right{ display:flex; align-items:center; gap:10px; }
.vnav__pill{ display:inline-flex; align-items:center; height:44px; padding:2px 24px 0; border-radius:980px; background:var(--c-ink); color:var(--c-bg); font-family:var(--display); font-size:19px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:transform 300ms cubic-bezier(.2, .7, .2, 1); }
.vnav__pill:hover{ transform:scale(1.04); }
.vdot{ position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:none; color:var(--c-ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vdot::before{ content:""; width:16px; height:16px; border-radius:50%; background:currentColor; transition:transform 350ms cubic-bezier(.2, .7, .2, 1); }
.vdot:hover::before{ transform:scale(1.5); }
.vdot:focus-visible, .vnav a:focus-visible, .vmenu a:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
/* the floating dot: appears after the bar has scrolled away; it inverts whatever is behind it so it shows on any slide */
.vdot--float{ position:fixed; z-index:450; top:20px; right:clamp(16px, calc(2 * var(--vw)), 32px); mix-blend-mode:difference; transform:scale(0); transition:transform 450ms cubic-bezier(.2, .9, .3, 1.2); }
html.is-scrolled-nav .vdot--float, html.vmenu-open .vdot--float{ transform:scale(1); }
html.vmenu-open .vdot--float{ mix-blend-mode:normal; }
html.vmenu-open .vdot--float::before{ width:24px; height:2px; border-radius:0; transform:rotate(45deg); }
html.vmenu-open .vdot--float::after{ content:""; position:absolute; width:24px; height:2px; background:currentColor; transform:rotate(-45deg); }

.vmenu{ position:fixed; z-index:400; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 clamp(24px, calc(12 * var(--vw)), 230px) 0 24px; background:#222; color:#fff; visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path 700ms cubic-bezier(.76, 0, .24, 1), visibility 0s linear 700ms; }
html.vmenu-open .vmenu{ visibility:visible; clip-path:inset(0); transition:clip-path 700ms cubic-bezier(.76, 0, .24, 1), visibility 0s; }
html.vmenu-open{ overflow:hidden; }
.vmenu__list{ display:grid; gap:clamp(4px, calc(1 * var(--svh)), 12px); list-style:none; }
.vmenu__list li{ overflow:hidden; }
.vmenu__list a{ display:inline-block; font-family:var(--display); font-size:clamp(3rem, calc(9 * var(--svh)), 5.4rem); line-height:.95; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-decoration:none; transform:translate3d(0, 110%, 0); transition:transform 700ms cubic-bezier(.2, .8, .2, 1), opacity 250ms ease; transition-delay:calc(var(--i, 0) * 60ms); }
html.vmenu-open .vmenu__list a{ transform:none; transition-delay:calc(260ms + var(--i, 0) * 70ms); }
.vmenu__list:hover a:not(:hover){ opacity:.4; }
.vmenu__list a[aria-current="page"]{ box-shadow:inset 0 -2px 0 #fff; }
.vmenu__foot{ position:absolute; left:clamp(16px, calc(2 * var(--vw)), 32px); bottom:clamp(18px, calc(3 * var(--svh)), 30px); right:clamp(16px, calc(2 * var(--vw)), 32px); display:flex; justify-content:space-between; gap:16px; font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; }
.vmenu__foot a{ color:#fff; text-decoration:none; opacity:.75; } .vmenu__foot a:hover{ opacity:1; }

/* room for the clear bar: the page starts under it */
html:root .mh{ padding-top:clamp(84px, calc(11 * var(--svh)), 108px); }
html:root .mh--rv{ min-height:calc(100 * var(--svh)); }
body:not(:has(.mh)) #main{ padding-top:64px; }
html:root .rv-panel--slide{ top:min(0px, calc(calc(100 * var(--svh)) - calc(56.25 * var(--vw)))); }
html.mh-pre :is(.vnav, .vdot--float){ opacity:0 !important; }
html.mh-go .vnav{ transition:opacity 900ms ease 650ms; }
@media (max-width:760px){
  .vnav{ padding:14px 16px; } .vnav__brand span{ display:none; } .vnav__pill{ height:38px; padding:2px 16px 0; font-size:16px; }
  .vdot--float{ top:14px; right:12px; }
  .vmenu{ justify-content:flex-start; padding:0 24px; } .vmenu__list a{ font-size:clamp(2.8rem, calc(15 * var(--vw)), 4.2rem); }
  html:root .mh{ padding-top:76px; } body:not(:has(.mh)) #main{ padding-top:56px; }
  html:root .rv-panel--slide{ top:0; }
}
@media (prefers-reduced-motion:reduce){ .vmenu, .vmenu__list a, .vdot--float{ transition:none !important; } }
@media print{ .vnav, .vdot--float, .vmenu{ display:none !important; } }
.vnav__brand .vnav__mark{ display:block; width:16px; height:24.94px; fill:var(--c-ink); overflow:visible; flex:0 0 auto; }
.vnav__mark .w-block{ shape-rendering:crispEdges; }

/* MENU v186 (after the Valtero template): clicking the dot does not cover the page. The page shrinks into a card at
   the left and the menu stands in the space it leaves at the right, with a round close button on the card's edge.
   Clicking the card closes the menu too. */
.vpage{ position:relative; background:var(--c-bg); transform-origin:0 var(--oy, calc(50 * var(--svh))); transition:transform 800ms cubic-bezier(.76, 0, .24, 1), border-radius 800ms ease; }
html.vmenu-open body, html.vmenu-closing body{ background:#19191b; }
html.vmenu-open .vpage, html.vmenu-closing .vpage{ clip-path:inset(var(--ct, 0px) 0 var(--cb, 0px) 0); will-change:transform; }
html.vmenu-open .vpage{ transform:translate3d(calc(.5 * var(--vw)), 0, 0) scale(.83); cursor:pointer; }
html.vmenu-open .vpage *{ pointer-events:none; }
html.vmenu-open :is(.scue, .vdot--float){ display:none; }
html:root .vmenu{ inset:0 0 0 auto; width:calc(16.5 * var(--vw)); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(18px, calc(3 * var(--svh)), 34px); padding:0 0 0 clamp(18px, calc(2.6 * var(--vw)), 52px); background:none; clip-path:none; visibility:hidden; opacity:0; transition:opacity 300ms ease, visibility 0s linear 300ms; }
html.vmenu-open .vmenu{ visibility:visible; opacity:1; transition:opacity 400ms ease 250ms, visibility 0s; }
html:root .vmenu__list{ gap:0; }
html:root .vmenu__list li{ border-bottom:1px solid rgba(255, 255, 255, .16); padding:2px 0 0; }
html:root .vmenu__list a{ font-size:clamp(2.2rem, calc(3.75 * var(--vw)), 4.4rem); line-height:1; white-space:nowrap; }
html:root .vmenu__list a[aria-current="page"]{ box-shadow:none; }
html:root .vmenu__foot{ position:static; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px 16px; font-size:clamp(13px, calc(.95 * var(--vw)), 17px); }
.vmenu__close{ position:fixed; z-index:460; left:calc(calc(83.5 * var(--vw)) - 30px); top:50%; width:60px; height:60px; margin-top:-30px; padding:0; border:0; border-radius:50%; background:#fff; color:#000; cursor:pointer; display:grid; place-items:center; transform:scale(0); transition:transform 450ms cubic-bezier(.2, .9, .3, 1.2); }
.vmenu__close::before, .vmenu__close::after{ content:""; position:absolute; width:22px; height:2px; background:currentColor; transform:rotate(45deg); }
.vmenu__close::after{ transform:rotate(-45deg); }
html.vmenu-open .vmenu__close{ transform:scale(1); transition-delay:350ms; }
.vmenu__close:hover{ background:#e8e8ed; }
.vmenu__close:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
@media (max-width:760px){
  /* phones: the card drops to the lower part of the screen and the links stand above it */
  .vpage{ transform-origin:50% var(--ob, calc(100 * var(--svh))); }
  html.vmenu-open .vpage{ transform:scale(.6); }
  html:root .vmenu{ inset:0 0 auto 0; width:auto; height:calc(40 * var(--svh)); padding:0 20px; justify-content:center; gap:14px; }
  html:root .vmenu__list a{ font-size:clamp(2rem, calc(9.4 * var(--vw)), 2.8rem); }
  html:root .vmenu__list{ grid-template-columns:1fr 1fr; column-gap:22px; }
  .vmenu__close{ left:50%; margin-left:-26px; top:calc(40 * var(--svh)); margin-top:-26px; width:52px; height:52px; }
}
@media (prefers-reduced-motion:reduce){ .vpage, .vmenu__close{ transition:none !important; } }
@media print{ .vmenu__close{ display:none !important; } }

/* MENU v187: a soft colour gradient behind the page card while the menu is open (blue, violet and a warm corner on near-black) */
html.vmenu-open body, html.vmenu-closing body{
  background:
    radial-gradient(60% 85% at 92% 12%, rgba(64, 106, 255, .9) 0%, rgba(64, 106, 255, 0) 62%),
    radial-gradient(48% 70% at 100% 96%, rgba(255, 122, 69, .92) 0%, rgba(255, 122, 69, 0) 60%),
    radial-gradient(70% 90% at 4% 100%, rgba(112, 72, 232, .75) 0%, rgba(112, 72, 232, 0) 64%),
    radial-gradient(50% 60% at 30% 0%, rgba(41, 151, 255, .35) 0%, rgba(41, 151, 255, 0) 70%),
    #0c0d18;
  background-attachment:fixed;
}
html.vmenu-open .vpage{ box-shadow:0 30px 90px rgba(0, 0, 0, .45); }
html:root .vmenu__list li{ border-bottom-color:rgba(255, 255, 255, .28); }

/* project panels v188: nothing cut off. A full-width slide is taller than the screen, which hid the top of the name
   when the panel pinned. Each panel is now exactly one screen tall and the whole slide is fitted inside it: as large
   as the screen allows, never cropped. The panel is var(--c-ink) like the slide, so it still reads edge to edge. */
@media (min-width:761px){
  html:root .rv-panel--slide{ top:0; height:calc(100 * var(--svh)); aspect-ratio:auto; }
  .rv-panel--slide > .rv-panel__img{ inset:0; }
  .rv-panel--slide .rv-panel__img img, .rv-panel--slide:hover .rv-panel__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
}

/* home name v189: landing-size name. After being fitted to the width, the name is stretched upward (--sy, set by the
   script) so it fills the first screen down to the line under it. The opening move uses the translate property, so it
   is not multiplied by the stretch. */
html:root .mh__name{ scale:1 var(--sy, 1); transform-origin:50% 0; }
html.mh-pre .mh__name{ transform:none; translate:0 var(--cy, 0px); }
html.mh-go .mh__name{ transition:translate 1250ms cubic-bezier(.76, 0, .24, 1); }
html:root .mh__tag{ margin-top:clamp(16px, calc(2.6 * var(--svh)), 30px); }

/* =====================================================================
   LAB v190 (after maxx-template.webflow.io/work, in this site's var(--c-bg) and var(--c-ink)). Two giant rows of moving words,
   a small info row, then a two-column grid of large rounded tiles: the piece shown whole, its name bottom-left and
   its kind bottom-right. The game is one wide tile under the grid.
   ===================================================================== */
.lab2{ background:var(--c-bg); padding-bottom:clamp(40px, calc(6 * var(--vw)), 90px); }
html:root .lab2__mq{ padding:clamp(8px, calc(2 * var(--svh)), 28px) 0 0; }
.lab2__row{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; padding:clamp(22px, calc(4 * var(--svh)), 44px) clamp(16px, calc(1.4 * var(--vw)), 28px) clamp(26px, calc(4 * var(--svh)), 48px); font-family:var(--display); font-size:17px; line-height:1.25; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.lab2__row span:first-child{ max-width:20em; } .lab2__row span:last-child{ text-align:right; }
.lg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:0 clamp(8px, calc(1.4 * var(--vw)), 28px); }
.lg__t{ position:relative; display:block; aspect-ratio:1 / 1; padding:0; border:0; border-radius:clamp(14px, calc(1.3 * var(--vw)), 22px); overflow:hidden; background:#141416; color:#fff; cursor:pointer; text-align:left; font:inherit; }
.lg__t img{ position:absolute; inset:7% 7% 11%; width:86%; height:82%; object-fit:contain; transition:transform 800ms cubic-bezier(.2, .7, .2, 1); }
.lg__t:hover img{ transform:scale(1.035); }
.lg__t span{ position:absolute; z-index:2; bottom:clamp(12px, calc(1.2 * var(--vw)), 20px); font-family:var(--display); font-size:clamp(15px, calc(1.15 * var(--vw)), 21px); line-height:1; letter-spacing:.03em; text-transform:uppercase; }
.lg__t span:nth-of-type(1){ left:clamp(14px, calc(1.3 * var(--vw)), 22px); right:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lg__t span:nth-of-type(2){ right:clamp(14px, calc(1.3 * var(--vw)), 22px); color:rgba(255, 255, 255, .7); }
.lg__t:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.js .lg__t{ opacity:0; transform:translate3d(0, 40px, 0); transition:opacity 700ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1); }
.js .lg__t.is-in{ opacity:1; transform:none; }
.lab2__game{ padding:8px clamp(8px, calc(1.4 * var(--vw)), 28px) 0; }
.lab2__game .gthumb{ display:block; border-radius:clamp(14px, calc(1.3 * var(--vw)), 22px); }
@media (max-width:760px){ .lg{ grid-template-columns:1fr; } .lab2__row{ grid-template-columns:1fr 1fr; font-size:14px; } .lab2__row span:nth-child(2){ display:none; } }
@media (prefers-reduced-motion:reduce){ .js .lg__t{ opacity:1; transform:none; transition:none; } }

/* LAB v191: the grid was dropped; the drifting poster and illustration rows and the Games section are back under the moving headline */
.lab2{ padding-bottom:0; }
.lab2 + #art{ padding-top:clamp(8px, calc(1.5 * var(--vw)), 24px) !important; }

/* the menu column is wide enough for the longest link ("Side Quests") */
@media (min-width:761px){ html:root .vmenu{ width:calc(17.5 * var(--vw)); padding-left:clamp(14px, calc(2 * var(--vw)), 40px); } html:root .vmenu__list a{ font-size:clamp(2rem, calc(3.3 * var(--vw)), 4rem); } }
@media (min-width:761px){ html:root .vmenu{ padding-left:calc(calc(1 * var(--vw)) + 40px); } }

/* =====================================================================
   TOP BAR v194 (after ariyana-studio.webflow.io, in this site's var(--c-bg) and var(--c-ink)). A clear row of columns over the
   top of the page, each on its own thin underline: the brand; four links, each a small ring and a word in capitals
   whose letters roll over on hover; a slashes icon that opens the menu. It scrolls away with the page; the floating
   dot opens the menu after that.
   ===================================================================== */
html:root .vnav{ display:flex; align-items:stretch; justify-content:flex-start; gap:clamp(12px, calc(1.75 * var(--vw)), 28px); height:65px; padding:0 clamp(14px, calc(1.75 * var(--vw)), 28px); font-family:var(--font); color:var(--c-ink); }
html:root .vnav > *{ border-bottom:1px solid rgb(var(--c-ink-rgb) / .9); }
html:root .vnav__brand{ flex:0 0 clamp(190px, calc(22 * var(--vw)), 350px); display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:clamp(28px, calc(2.45 * var(--vw)), 39px); line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--c-ink); }
html:root .vnav__brand .vnav__mark{ width:15px; height:23.4px; fill:var(--c-ink); }
.vnav__links{ flex:1 1 auto; display:flex; gap:clamp(12px, calc(1.75 * var(--vw)), 28px); min-width:0; border-bottom:0 !important; }
.vnav__link{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:clamp(10px, calc(1.25 * var(--vw)), 20px); border-bottom:1px solid rgb(var(--c-ink-rgb) / .9); color:var(--c-ink); text-decoration:none; font-size:16px; font-weight:400; letter-spacing:0; text-transform:uppercase; white-space:nowrap; transition:border-color 250ms ease; }
.vnav__ring{ flex:none; width:12px; height:12px; border:1px solid currentColor; border-radius:50%; transition:background 250ms ease, transform 350ms cubic-bezier(.2, .7, .2, 1); }
.vnav__link:hover .vnav__ring{ transform:scale(1.25); }
.vnav__link[aria-current="page"] .vnav__ring{ background:currentColor; }
.vnav__word{ position:relative; display:block; height:24px; line-height:24px; overflow:hidden; }
.vnav__word > span{ display:block; }
.vnav__word > span + span{ position:absolute; left:0; top:100%; }
.vnav__word i{ display:inline-block; font-style:normal; transition:transform 460ms cubic-bezier(.3, .8, .2, 1); transition-delay:calc(var(--i, 0) * 22ms); }
.vnav__link:hover .vnav__word i, .vnav__link:focus-visible .vnav__word i{ transform:translate3d(0, -24px, 0); }
html:root .vnav .vdot{ flex:0 0 clamp(48px, calc(4.4 * var(--vw)), 70px); display:grid; place-items:center; width:auto; height:auto; border-radius:0; background:none; color:var(--c-ink); border-bottom:1px solid rgb(var(--c-ink-rgb) / .9); }
html:root .vnav .vdot::before{ content:""; width:26px; height:22px; border-radius:0; background:
  linear-gradient(currentColor, currentColor) 0 0 / 100% 100% no-repeat; -webkit-mask:linear-gradient(-55deg, transparent 0 34%, var(--c-bg) 34% 41%, transparent 41% 59%, var(--c-bg) 59% 66%, transparent 66%); mask:linear-gradient(-55deg, transparent 0 34%, var(--c-bg) 34% 41%, transparent 41% 59%, var(--c-bg) 59% 66%, transparent 66%); transition:transform 350ms cubic-bezier(.2, .7, .2, 1); }
html:root .vnav .vdot:hover::before{ transform:translateX(3px); }
.vnav a:focus-visible, .vnav .vdot:focus-visible{ outline:2px solid var(--c-ink); outline-offset:-2px; }
html:root .mh{ padding-top:clamp(92px, calc(11.5 * var(--svh)), 112px); }
body:not(:has(.mh)) #main{ padding-top:74px; }
@media (max-width:900px){ .vnav__links{ display:none; } html:root .vnav__brand{ flex:1 1 auto; } html:root .vnav{ height:58px; } html:root .mh{ padding-top:80px; } body:not(:has(.mh)) #main{ padding-top:64px; } }
@media (prefers-reduced-motion:reduce){ .vnav__word i, .vnav__ring{ transition:none !important; } }

/* TOP BAR v195: the menu icon is three slanted lines (a short, a long, a short). On hover or keyboard focus they
   swing flat and even out into a three-line menu icon, one after another, and swing back when the pointer leaves. */
html:root .vnav .vdot{ position:relative; }
html:root .vnav .vdot::before{ display:none; }
.vnav .vdot i{ position:absolute; left:50%; top:50%; width:28px; height:2px; margin:-1px 0 0 -14px; background:currentColor; border-radius:1px; transform:rotate(-45deg) translateY(var(--o)) scaleX(var(--s)); transition:transform 520ms cubic-bezier(.3, .9, .2, 1); }
.vnav .vdot i:nth-child(1){ --o:-8px; --s:.55; }
.vnav .vdot i:nth-child(2){ --o:0px; --s:1; transition-delay:50ms; }
.vnav .vdot i:nth-child(3){ --o:8px; --s:.55; transition-delay:100ms; }
.vnav .vdot:hover i, .vnav .vdot:focus-visible i{ transform:rotate(0deg) translateY(var(--o)) scaleX(1); }
@media (prefers-reduced-motion:reduce){ .vnav .vdot i{ transition:none; } }

/* MENU BUTTON v196: one menu icon everywhere. The floating button that appears after scrolling is the same three
   slanted lines as in the top bar (they swing flat on hover), not a dot. */
html:root .vdot--float{ width:52px; height:52px; }
html:root .vdot--float::before, html.vmenu-open .vdot--float::before, html.vmenu-open .vdot--float::after{ display:none; }
.vdot--float i{ position:absolute; left:50%; top:50%; width:28px; height:2px; margin:-1px 0 0 -14px; background:currentColor; border-radius:1px; transform:rotate(-45deg) translateY(var(--o)) scaleX(var(--s)); transition:transform 520ms cubic-bezier(.3, .9, .2, 1); }
.vdot--float i:nth-child(1){ --o:-8px; --s:.55; }
.vdot--float i:nth-child(2){ --o:0px; --s:1; transition-delay:50ms; }
.vdot--float i:nth-child(3){ --o:8px; --s:.55; transition-delay:100ms; }
.vdot--float:hover i, .vdot--float:focus-visible i{ transform:rotate(0deg) translateY(var(--o)) scaleX(1); }
@media (max-width:760px){ html:root .vdot--float{ top:4px; right:8px; } }
@media (prefers-reduced-motion:reduce){ .vdot--float i{ transition:none; } }

/* MENU BUTTON v197: one icon, pinned. It sits exactly over the last column of the top bar and stays there while the
   bar scrolls away underneath it, so there is no second icon appearing or joining. It inverts against what is behind it. */
.vnav__slot{ flex:0 0 clamp(48px, calc(4.4 * var(--vw)), 70px); }
html:root .vdot--float{ top:0; right:clamp(14px, calc(1.75 * var(--vw)), 28px); width:clamp(48px, calc(4.4 * var(--vw)), 70px); height:65px; border-radius:0; transform:none; transition:none; }
html.is-scrolled-nav .vdot--float, html.vmenu-open .vdot--float{ transform:none; }
@media (max-width:900px){ html:root .vdot--float{ height:58px; top:0; right:clamp(14px, calc(1.75 * var(--vw)), 28px); } }
html:root .vnav > .vnav__slot{ border-bottom-color:transparent; }
html:root .vdot--float{ border-bottom:1px solid rgba(255, 255, 255, .9); transition:border-color 260ms ease; }
html.is-scrolled-nav .vdot--float{ border-bottom-color:transparent; }

/* the numbers row was removed from the home About block; a little less space under it */
.rv-about{ padding-bottom:clamp(56px, calc(9 * var(--svh)), 110px); }

/* HOME ABOUT v198: aligned. Two columns of equal height: the heading starts level with the top of the photo, breaks
   at its sentences, and the line + button sit on the photo's bottom edge. The photo is flush with the right edge. */
.rv-about__top{ grid-template-columns:minmax(0, 1fr) clamp(280px, calc(26 * var(--vw)), 440px); align-items:stretch; gap:clamp(24px, calc(4 * var(--vw)), 72px); }
.rv-about__top > div{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(28px, calc(4 * var(--vw)), 56px); min-width:0; }
html:root .rv-about__title{ font-size:clamp(3rem, calc(6.1 * var(--vw)), 7.2rem); line-height:.88; margin-top:-.06em; }
.rv-about__sub{ margin-top:0; font-size:clamp(16px, calc(1.2 * var(--vw)), 20px); max-width:26em; }
.rv-about__foot .rv-pills{ margin-top:clamp(16px, calc(1.6 * var(--vw)), 24px); }
.rv-about__photo{ justify-self:end; align-self:start; width:100%; max-width:none; }
@media (max-width:860px){
  .rv-about__top{ grid-template-columns:1fr; }
  .rv-about__title br{ display:none; }
  .rv-about__photo{ justify-self:start; max-width:320px; }
}

/* project panels v199: a clean ending. A pinned panel can only stay pinned while its container continues below it,
   and the container used to end with the last panel, so the last two let go early. The container now runs on past
   the last panel (an empty stretch), and the section after it is pulled up over that stretch: Noda stays pinned, is
   seen whole for a moment, and is then covered by the next section exactly as the other panels cover each other. */
.rv-panels::after{ content:""; display:block; height:calc(155 * var(--svh)); }
.rv-panels{ margin-bottom:calc(-100 * var(--svh)); }
html:root .rv-work ~ .rv-say{ z-index:6; }
@media (max-width:760px){
  .rv-panels::after{ height:calc(calc(12 * var(--svh)) + calc(56.25 * var(--vw))); }
  .rv-panels{ margin-bottom:calc(-56.25 * var(--vw)); }
}
@media print{ .rv-panels::after{ display:none; } .rv-panels{ margin-bottom:0; } }

/* =====================================================================
   ENTRY, CONTACT, FOOTER v200 (after ariyana-studio.webflow.io: structure and motion, not colours).
   ===================================================================== */
/* entry: a light sheet with the small brand in the middle; it lifts off the var(--c-bg) page, trailing a striped lower edge */
html.intro-on body::before{ background:var(--c-ink); }
.intro.intro--curtain{ display:grid; place-items:center; background:var(--c-ink); color:var(--c-bg); transform:translate3d(0, 0, 0); transition:transform 1150ms cubic-bezier(.76, 0, .24, 1); will-change:transform; }
html.intro-out .intro.intro--curtain{ background-color:var(--c-ink); }
.intro.intro--curtain.is-up{ transform:translate3d(0, calc(-100% - 60px), 0); }
.intro.intro--curtain::after{ content:""; position:absolute; left:0; right:0; top:100%; height:54px; background:linear-gradient(to bottom, var(--c-ink) 0 11px, transparent 11px 15px, var(--c-ink) 15px 23px, transparent 23px 28px, var(--c-ink) 28px 34px, transparent 34px 39px, var(--c-ink) 39px 43px, transparent 43px 48px, var(--c-ink) 48px 50px, transparent 50px); }
.intro__brand{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--display, 'Bebas Neue', Impact, sans-serif); font-size:clamp(26px, calc(2.4 * var(--vw)), 38px); line-height:1; letter-spacing:.02em; text-transform:uppercase; overflow:hidden; padding:.1em 0; }
.intro__brand svg{ width:auto; height:.74em; fill:currentColor; transform:translate3d(0, 130%, 0); transition:transform 700ms cubic-bezier(.2, .8, .2, 1); }
.intro__brand b{ display:inline-block; font-weight:400; transform:translate3d(0, 130%, 0); transition:transform 700ms cubic-bezier(.2, .8, .2, 1); transition-delay:calc(90ms + var(--i) * 34ms); }
.intro.is-in .intro__brand svg, .intro.is-in .intro__brand b{ transform:none; }

/* contact: two giant moving rows on a light band (one solid, one outlined), a pill button over them */
.ct{ position:relative; z-index:1; overflow:hidden; padding:clamp(56px, calc(10 * var(--svh)), 120px) 0 clamp(64px, calc(11 * var(--svh)), 130px); background:var(--c-ink); color:var(--c-bg); }
html:root .ct__mq{ padding:0; background:none; }
.ct__mq div{ font-size:clamp(4.6rem, calc(12.5 * var(--vw)), 13.5rem); line-height:.9; color:var(--c-mute); }
.ct__mq div.ct__line{ margin-top:.04em; color:transparent; -webkit-text-stroke:1.5px var(--c-mute); }
.ct__mq span::after{ content:""; margin:0 .16em; }
.ct__btn{ position:absolute; left:50%; top:50%; z-index:2; translate:-50% -50%; display:inline-flex; align-items:center; gap:.5em; padding:.28em .36em .2em .8em; border-radius:980px; background:var(--c-bg); color:var(--c-ink); font-family:var(--display); font-size:clamp(1.8rem, calc(2.9 * var(--vw)), 3.1rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; text-decoration:none; white-space:nowrap; box-shadow:0 0 0 1px var(--c-bg); transition:scale 350ms cubic-bezier(.2, .7, .2, 1); }
.ct__btn i{ position:relative; display:block; width:1.25em; height:1.25em; margin-top:-.08em; border-radius:50%; background:var(--c-ink); transition:transform 350ms cubic-bezier(.2, .7, .2, 1); }
.ct__btn i::before{ content:""; position:absolute; left:28%; right:26%; top:50%; height:2px; margin-top:-1px; background:var(--c-bg); }
.ct__btn i::after{ content:""; position:absolute; right:26%; top:50%; width:.34em; height:.34em; margin-top:-.17em; border:2px solid var(--c-bg); border-left:0; border-bottom:0; transform:rotate(45deg); box-sizing:border-box; }
.ct__btn:hover{ scale:1.05; } .ct__btn:hover i{ transform:translateX(.12em); }
.ct__btn:focus-visible{ outline:3px solid var(--c-bg); outline-offset:4px; }

/* footer: a striped top edge, four columns, a giant fading wordmark, the sign-off */
.ft{ position:relative; z-index:1; background:var(--c-bg); color:var(--c-ink); padding:clamp(72px, calc(12 * var(--svh)), 130px) clamp(18px, calc(3.4 * var(--vw)), 56px) clamp(22px, calc(3 * var(--vw)), 44px); font-family:var(--font); }
.ft::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:54px; background:linear-gradient(to top, var(--c-bg) 0 11px, transparent 11px 15px, var(--c-bg) 15px 23px, transparent 23px 28px, var(--c-bg) 28px 34px, transparent 34px 39px, var(--c-bg) 39px 43px, transparent 43px 48px, var(--c-bg) 48px 50px, transparent 50px); pointer-events:none; }
.ft__top{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap:clamp(24px, calc(3 * var(--vw)), 56px); align-items:start; }
.ft__col{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
html:root .ft__h{ margin-bottom:clamp(8px, calc(1 * var(--vw)), 16px); font-family:var(--font); font-size:15px; font-weight:700 !important; letter-spacing:-.01em !important; text-transform:uppercase; color:var(--c-ink); }
.ft__col a{ font-size:16px; line-height:1.4; color:rgb(var(--c-ink-rgb) / .62); text-decoration:none; transition:color 200ms ease; }
.ft__col a:hover{ color:var(--c-ink); }
.ft__col a.ft__big{ font-size:clamp(16px, calc(1.25 * var(--vw)), 20px); color:var(--c-ink); box-shadow:inset 0 -1px 0 rgb(var(--c-ink-rgb) / .7); overflow-wrap:anywhere; }
.ft__hint{ font-size:12px; color:rgb(var(--c-ink-rgb) / .4); }
.ft__col--form .cform{ width:100%; max-width:520px; margin:0; }
.ft__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px, calc(4 * var(--vw)), 72px); margin-top:clamp(56px, calc(10 * var(--svh)), 120px); }
.ft__word{ display:inline-flex; align-items:center; gap:.12em; font-family:var(--display); font-size:clamp(5.4rem, calc(17.4 * var(--vw)), 19rem); line-height:.8; letter-spacing:-.01em; text-transform:uppercase; text-decoration:none; color:var(--c-ink); white-space:nowrap; }
.ft__word span{ background:linear-gradient(180deg, var(--c-ink) 0%, var(--c-ink) 26%, rgb(var(--c-ink-rgb) / 0) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ft__mark{ width:auto; height:.62em; flex:none; fill:url(#none) var(--c-ink); -webkit-mask:linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 26%, transparent 96%); mask:linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg) 26%, transparent 96%); }
.ft__sign{ flex:none; max-width:26em; margin-bottom:.6em; font-size:13px; line-height:1.5; letter-spacing:.02em; text-transform:uppercase; text-align:right; color:rgb(var(--c-ink-rgb) / .7); }
@media (max-width:1000px){ .ft__top{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .ft__col--form{ grid-column:1 / -1; } .ft__bottom{ flex-direction:column; align-items:flex-start; } .ft__sign{ text-align:left; } }
@media (max-width:560px){ .ft__top{ grid-template-columns:1fr 1fr; } .ft__col:first-child{ grid-column:1 / -1; } .ct__mq div{ font-size:calc(22 * var(--vw)); } }
@media (prefers-reduced-motion:reduce){ .intro.intro--curtain, .intro__brand svg, .intro__brand b{ transition:none !important; } }
@media print{ .ct{ display:none; } .ft::before{ display:none; } }
/* the curtain stays solid while it lifts (an older rule faded the entry cover out), and the name's letters wait fully
   below their masks so their tops no longer peek out before they rise */
html.intro-out .intro.intro--curtain{ opacity:1; background-color:var(--c-ink); }
.js .mh__base[data-rise]:not(.is-up) .cm > *{ transform:translate3d(0, 150%, 0); }

/* the contact band was removed: the footer follows dark sections now, so it is set off by a thin line instead of the stripes */
.ft::before{ display:none; }
.ft{ border-top:1px solid rgb(var(--c-ink-rgb) / .16); scroll-margin-top:0; }

/* PROJECT COUNTER v202: the marker at the left edge of the projects is a counter (current number, a thin line that
   fills, the total). It belongs to the projects only: every section after them sits above it, so it is never seen
   once the projects are over. */
html:root .rv-work ~ *{ position:relative; z-index:6; }
.rv-ticks span{ left:clamp(14px, calc(1.5 * var(--vw)), 30px); display:flex; flex-direction:column; align-items:center; gap:12px; translate:0 -50%; font-family:var(--display); color:#fff; }
.rv-ticks span b{ font-weight:400; font-size:clamp(20px, calc(1.5 * var(--vw)), 28px); line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.rv-ticks span em{ font-style:normal; font-size:14px; line-height:1; letter-spacing:.04em; opacity:.6; }
.rv-ticks span i, .rv-ticks span i.on{ position:relative; display:block; width:1px; height:clamp(56px, calc(9 * var(--svh)), 92px); border-radius:0; background:rgba(255, 255, 255, .32); }
.rv-ticks span i u{ position:absolute; inset:0; background:#fff; transform-origin:50% 0; transform:scaleY(var(--f, .2)); transition:transform 600ms cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion:reduce){ .rv-ticks span i u{ transition:none; } }

/* PROJECT MARKER removed (v203): no lines, dots or counter beside the projects; each slide carries its own number */
.rv-ticks{ display:none !important; }

/* =====================================================================
   ABOUT v204 (after maxx-template.webflow.io/about, in this site's var(--c-bg) and var(--c-ink)). A rounded card with a rolling
   list of what I work on; then a two-column page: small labels and statements on the left; the portrait, plain
   tables (story, honours, looking ahead) and stacks of giant words on the right. Text lights up as it is read.
   ===================================================================== */
.ab2-card{ position:relative; margin:clamp(6px, calc(1 * var(--vw)), 14px) clamp(12px, calc(1.4 * var(--vw)), 28px) 0; height:clamp(300px, calc(52 * var(--svh)), 520px); border-radius:clamp(18px, calc(1.6 * var(--vw)), 28px); background:var(--c-surface); overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent 0, var(--c-bg) 22%, var(--c-bg) 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, var(--c-bg) 22%, var(--c-bg) 78%, transparent 100%); }
.ab2-card__roll ul{ list-style:none; margin:0; padding:0; display:grid; justify-items:center; animation:ab2-roll 22s linear infinite; }
.ab2-card__roll li{ font-family:var(--display); font-size:clamp(3.4rem, calc(7.6 * var(--vw)), 7.6rem); line-height:.86; letter-spacing:.005em; text-transform:uppercase; color:var(--c-ink); white-space:nowrap; }
@keyframes ab2-roll{ to{ transform:translate3d(0, -50%, 0); } }
.ab2{ padding:clamp(28px, calc(4 * var(--vw)), 56px) clamp(12px, calc(1.4 * var(--vw)), 28px) clamp(64px, calc(10 * var(--svh)), 130px); background:var(--c-bg); }
.ab2__grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:clamp(20px, calc(3 * var(--vw)), 56px); align-items:start; padding-top:clamp(56px, calc(9 * var(--svh)), 110px); }
.ab2__grid--intro{ padding-top:0; }
.ab2__label{ display:block; font-family:var(--display); font-size:18px; line-height:1.25; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.ab2__say{ margin-top:clamp(18px, calc(2 * var(--vw)), 30px); max-width:22em; font-size:clamp(1.35rem, calc(1.75 * var(--vw)), 2rem); font-weight:600; line-height:1.12; letter-spacing:-.015em; color:var(--c-ink); text-wrap:pretty; }
.ab2__say--2{ margin-top:.8em; }
.js .ab2__say[data-light] .w{ opacity:.3; transition:opacity 400ms ease; } .js .ab2__say[data-light] .w.on{ opacity:1; }
.ab2__meta{ display:flex; justify-content:space-between; gap:16px; max-width:calc(22em * 1.6); margin-top:clamp(28px, calc(4 * var(--vw)), 52px); font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.ab2__meta a{ color:var(--c-ink); text-decoration:none; box-shadow:inset 0 -1px 0 currentColor; }
.ab2__photo{ margin:0; aspect-ratio:1 / 1.05; border-radius:clamp(16px, calc(1.4 * var(--vw)), 24px); overflow:hidden; background:var(--c-surface); }
.ab2__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.ab2__table{ list-style:none; margin:0; padding:0; }
.ab2__row{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px; padding:9px 0 7px; border-bottom:1px solid rgb(var(--c-ink-rgb) / .16); font-family:var(--display); font-size:clamp(18px, calc(1.35 * var(--vw)), 23px); line-height:1.25; letter-spacing:.02em; text-transform:uppercase; color:var(--c-ink); }
.ab2__table--3 .ab2__row{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; }
.ab2__row span:last-child:not(:first-child){ text-align:right; white-space:nowrap; }
.ab2__big{ list-style:none; margin:0; padding:0; }
.ab2__big li{ font-family:var(--display); font-size:clamp(3.4rem, calc(7.2 * var(--vw)), 7.6rem); line-height:.9; letter-spacing:.005em; text-transform:uppercase; color:var(--c-ink); opacity:.3; transition:opacity 500ms ease; }
.ab2__big li.on{ opacity:1; }
@media (max-width:860px){
  .ab2__grid{ grid-template-columns:1fr; row-gap:18px; padding-top:56px; }
  .ab2__grid--intro .ab2__photo{ order:-1; aspect-ratio:4 / 4.4; }
  .ab2__table--3 .ab2__row{ grid-template-columns:minmax(0, 1fr) auto; } .ab2__table--3 .ab2__row span:nth-child(2){ grid-column:1; grid-row:2; opacity:.6; font-size:.82em; }
  .ab2__table--3 .ab2__row span:nth-child(3){ grid-column:2; grid-row:1; }
  .ab2-card{ height:calc(42 * var(--svh)); }
}
@media (prefers-reduced-motion:reduce){ .ab2-card__roll ul{ animation:none; } .js .ab2__say[data-light] .w, .ab2__big li{ opacity:1; transition:none; } }
@media print{ .ab2-card{ display:none; } .ab2, .ab2 *{ color:#111 !important; background:none !important; opacity:1 !important; } .ab2__row{ border-color:#bbb; } }

/* ABOUT v205: the story is the sideways year timeline again, between the intro and the tables */
.ab2:not(.ab2--rest){ padding-bottom:clamp(36px, calc(6 * var(--svh)), 80px); }
.ab2 + .story{ background:var(--c-bg); }
.ab2--rest{ padding-top:0; }
.ab2--rest > .ab2__grid:first-child{ padding-top:clamp(24px, calc(4 * var(--svh)), 56px); }

/* ABOUT v207: the intro lights up slowly as the page scrolls; only the name is bright at the start */
.js .ab2__say[data-light] .w{ opacity:.28; transition:opacity 700ms ease; }
.js .ab2__say[data-light] .w.on{ opacity:1; }

/* ABOUT v209: a much smaller portrait, set at the right edge beside the intro */
.ab2__grid--intro{ grid-template-columns:minmax(0, 1fr) auto; }
.ab2__photo{ width:clamp(220px, calc(19 * var(--vw)), 340px); aspect-ratio:4 / 5; justify-self:end; border-radius:clamp(12px, calc(1 * var(--vw)), 18px); }
@media (max-width:860px){ .ab2__grid--intro{ grid-template-columns:1fr; } .ab2__grid--intro .ab2__photo{ width:min(calc(52 * var(--vw)), 220px); aspect-ratio:4 / 5; justify-self:start; } }

/* ABOUT v210: the story timeline in the page's own language. No coloured, tilted stickers and no blue: each year
   carries a small numbered label in display capitals above it, everything is var(--c-ink) on var(--c-bg), and the section lines
   up with the page's left edge like the rest of the About page. */
.story .wrap{ max-width:none; padding-inline:clamp(12px, calc(1.4 * var(--vw)), 28px); }
.story .yr-eyebrow{ font-family:var(--display); font-size:18px; font-weight:400; line-height:1.25; letter-spacing:.05em; text-transform:uppercase; }
.story .yr-eyebrow i{ display:none; } .story .yr-eyebrow em{ font-style:normal; font-weight:400; }
.js .story .yr-say mark .w.on, .story .yr-say mark, .story .yr mark{ color:var(--c-ink); }
.story .yr mark{ font-weight:600; }
.story .yr__track{ counter-reset:stop; }
.story .yr__item{ counter-increment:stop; }
.story .yr__year{ padding-top:44px; }
.story .yr__year .stk{ left:.02em; top:0; }
.story .yr__year .stk b, .js .story .yr__year .stk b, .js .story .yr__year .stk.is-on b{ display:flex; align-items:baseline; gap:.9em; padding:0; background:none; box-shadow:none; color:#f5f5f7; font-size:18px; letter-spacing:.05em; transform:none; }
.story .yr__year .stk b::before{ content:counter(stop, decimal-leading-zero); opacity:.5; }
.js .story .yr__year .stk b{ opacity:0; transition:opacity 600ms ease; } .js .story .yr__year .stk.is-on b{ opacity:1; }
.story .yr__dash{ height:1px; width:.34em; opacity:.6; }
.story .yr__body{ margin-left:0; border-top-color:rgb(var(--c-ink-rgb) / .22); color:rgb(var(--c-ink-rgb) / .78); }
@media (max-width:760px){ .story .yr__year{ padding-top:34px; } }

/* ABOUT v212: each stack of giant words has its own label right above it, so it is clear what the words are */
.ab2__right .ab2__big{ margin-top:clamp(12px, calc(1.4 * var(--vw)), 22px); }
@media (max-width:860px){ .ab2__grid--big .ab2__left:empty{ display:none; } }

/* ABOUT v213: "Beyond design" is a left-column label like "Looking ahead"; its words start level with it */
.ab2__right--bare .ab2__big{ margin-top:-.06em; }

/* =====================================================================
   CONTACT PAGE + FOOTER v214 (after rovano-template.webflow.io/contact/contact-1, in this site's var(--c-bg) and var(--c-ink)).
   ===================================================================== */
.cp-hero{ position:relative; min-height:calc(calc(72 * var(--svh)) - 74px); display:grid; place-items:center; padding:clamp(24px, calc(6 * var(--svh)), 70px) clamp(12px, calc(1.4 * var(--vw)), 28px) 64px; background:var(--c-bg); }
html:root .cp__title{ font-size:clamp(6rem, calc(23 * var(--vw)), 22rem); line-height:.82; letter-spacing:.002em !important; text-align:center; color:var(--c-ink); }
.cp-hero__row{ position:absolute; left:clamp(14px, calc(1.75 * var(--vw)), 28px); right:clamp(14px, calc(1.75 * var(--vw)), 28px); bottom:20px; display:flex; justify-content:space-between; gap:16px; font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.cp-hero__row a{ color:var(--c-ink); text-decoration:none; } .cp-hero__row a::before{ content:"\2193"; margin-right:.5em; }
.cp{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, calc(5 * var(--vw)), 96px); align-items:start; max-width:1500px; margin:0 auto; padding:clamp(48px, calc(9 * var(--svh)), 110px) clamp(16px, calc(4 * var(--vw)), 72px) clamp(72px, calc(12 * var(--svh)), 150px); background:var(--c-bg); }
.cp__say{ max-width:16em; font-size:clamp(1.5rem, calc(2 * var(--vw)), 2.1rem); font-weight:600; line-height:1.15; letter-spacing:-.015em; color:var(--c-ink); }
.cp__say span{ color:rgb(var(--c-ink-rgb) / .5); }
.cp__lines{ display:grid; justify-items:start; gap:6px; margin-top:clamp(36px, calc(6 * var(--svh)), 72px); }
.cp__k{ margin-top:14px; font-family:var(--display); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:rgb(var(--c-ink-rgb) / .5); }
.cp__k:first-child{ margin-top:0; }
.cp__lines a{ font-size:clamp(1.1rem, calc(1.45 * var(--vw)), 1.5rem); font-weight:600; letter-spacing:-.01em; color:var(--c-ink); text-decoration:none; box-shadow:inset 0 -1px 0 rgb(var(--c-ink-rgb) / .5); overflow-wrap:anywhere; }
.cp__hint{ margin-top:8px; font-size:12px; color:rgb(var(--c-ink-rgb) / .4); }
.cp__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(28px, calc(4 * var(--svh)), 48px); }
.cp__links a{ padding:9px 16px 7px; border-radius:980px; box-shadow:inset 0 0 0 1px rgb(var(--c-ink-rgb) / .4); font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); text-decoration:none; transition:background 200ms ease, color 200ms ease; }
.cp__links a:hover{ background:var(--c-ink); color:var(--c-bg); }
.cp__card{ padding:clamp(18px, calc(2 * var(--vw)), 30px); border-radius:clamp(18px, calc(1.6 * var(--vw)), 28px); background:var(--c-surface); }
.cp__card .cform{ width:100%; max-width:none; margin:0; }
html:root .cp__card .cform .cform__send{ align-self:stretch; width:100%; margin-top:10px; }
@media (max-width:860px){ .cp{ grid-template-columns:1fr; } .cp-hero{ min-height:calc(46 * var(--svh)); } }

.ft2{ position:relative; z-index:1; background:var(--c-bg); color:var(--c-ink); padding:clamp(56px, calc(9 * var(--svh)), 110px) clamp(16px, calc(4 * var(--vw)), 72px) 0; border-top:1px solid rgb(var(--c-ink-rgb) / .14); font-family:var(--font); overflow:hidden; }
.ft2__top{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, calc(3 * var(--vw)), 56px); align-items:start; }
.ft2__col{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
html:root .ft2__h{ margin-bottom:clamp(10px, calc(1.2 * var(--vw)), 18px); font-family:var(--display); font-size:16px; font-weight:400 !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--c-ink); }
.ft2__col a{ font-family:var(--display); font-size:19px; line-height:1.2; letter-spacing:.03em; text-transform:uppercase; color:var(--c-ink); text-decoration:none; transition:opacity 200ms ease; }
/* v242: the link lists (Pages, Elsewhere) rest in grey; only the word under the mouse turns var(--c-ink) */
nav.ft2__col a{ opacity:.45; }
nav.ft2__col a:hover, nav.ft2__col a:focus-visible{ opacity:1; }
.ft2__col a.ft2__big{ font-family:var(--font); font-size:clamp(17px, calc(1.3 * var(--vw)), 21px); font-weight:600; line-height:1.35; letter-spacing:-.01em; text-transform:none; overflow-wrap:anywhere; }
.ft2__col a.ft2__cta{ margin-top:16px; padding:10px 18px 8px; border-radius:980px; background:var(--c-ink); color:var(--c-bg); font-size:17px; opacity:1 !important; }
.ft2__sign{ margin-top:clamp(40px, calc(7 * var(--svh)), 84px); font-size:14px; font-weight:500; color:rgb(var(--c-ink-rgb) / .6); }
.ft2__word{ display:block; margin:clamp(14px, calc(2 * var(--svh)), 28px) 0 0; color:var(--c-ink); text-decoration:none; font-family:var(--display); font-size:var(--fw, calc(26 * var(--vw))); line-height:.74; letter-spacing:-.005em; text-transform:uppercase; white-space:nowrap; }
.ft2__word span{ display:inline-block; }
@media (max-width:760px){ .ft2__top{ grid-template-columns:1fr 1fr; } .ft2__col--contact{ grid-column:1 / -1; } }
@media print{ .ft2__word{ display:none; } }
.cp-hero__row{ right:calc(clamp(14px, calc(1.75 * var(--vw)), 28px) + clamp(48px, calc(4.4 * var(--vw)), 70px) + 14px); }

/* FOOTER v216: the logo mark and the name, large at the left and fading into the var(--c-bg) toward the bottom; the sign-off
   and copyright sit at the bottom right. */
.ft2{ padding-bottom:clamp(20px, calc(3 * var(--svh)), 40px); }
.ft2__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px, calc(4 * var(--vw)), 72px); margin-top:clamp(48px, calc(9 * var(--svh)), 110px); }
.ft2__name{ display:inline-flex; align-items:flex-end; gap:.16em; font-family:var(--display); font-size:clamp(5rem, calc(15.6 * var(--vw)), 17.5rem); line-height:.78; letter-spacing:-.005em; text-transform:uppercase; text-decoration:none; white-space:nowrap; color:var(--c-ink); }
.ft2__name span{ background:linear-gradient(180deg, var(--c-ink) 0%, var(--c-ink) 22%, rgb(var(--c-ink-rgb) / 0) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ft2__mark{ flex:none; width:auto; height:.71em; margin-bottom:.035em; }
.ft2__bottom .ft2__sign{ flex:none; max-width:30em; margin:0 0 .4em; font-size:13px; line-height:1.6; letter-spacing:.03em; text-transform:uppercase; text-align:right; color:rgb(var(--c-ink-rgb) / .75); }
@media (max-width:900px){ .ft2__bottom{ flex-direction:column; align-items:flex-start; } .ft2__bottom .ft2__sign{ text-align:left; } .ft2__name{ font-size:calc(21 * var(--vw)); } }

/* home name v217: the real text stays on screen after the opening; the effect canvas is shown only while the
   mouse effect is showing. Nothing swaps when the opening animation ends. */
.mh__name.is-gl .mh__gl{ opacity:0; }
.mh__name.is-gl .mh__base{ color:inherit; }
.mh__name.is-gl.is-hot .mh__gl{ opacity:1; }

/* home name v218: the effect copy fades over the real text instead of replacing it in one frame */
.mh__name.is-gl .mh__gl{ transition:opacity 160ms linear; }

/* home name v219: the real text is never hidden. The effect canvas covers it only around the pointer (done in the
   shader), so nothing is swapped when the effect starts or ends. And the room for the page's scrollbar is kept while
   the opening holds the page still: before, the scrollbar arrived as the name started to move up, the page became
   narrower under a name fitted to the wider page, and the name was refitted (smaller) when the opening ended. */
html{ scrollbar-gutter:stable; }

/* MENU v220: five links (Work is reached from Home). The column is laid out to fit: the longest word always fits between
   the close button and an even right margin, and every underline runs the full width of the column. The scrollbar room
   kept for the page is given back while the menu is open, so the gradient and the card reach the screen edge. */
html.vmenu-open{ scrollbar-gutter:auto; }
@media (min-width:761px){
  html:root .vmenu{ padding-right:calc(1.5 * var(--vw)); }
  html:root .vmenu__list{ align-self:stretch; }
  html:root .vmenu__list a{ font-size:clamp(1.4rem, calc(calc(3.75 * var(--vw)) - 10px), 4rem); }
}

/* WORK ROWS v225 (preview page /home-rows, after the Bittersweet template's work page): a giant "Selected work" heading on
   a rule, then one row per project. The whole cover slide (never cropped) sits on one side, the name, line, role and
   tags on the other, sides alternating; rows are separated by thin lines. Black and white. */
html:root .rv-rows{ display:block; background:var(--c-bg); color:var(--c-ink); padding:clamp(70px, calc(12 * var(--svh)), 150px) clamp(16px, calc(2 * var(--vw)), 32px) clamp(30px, calc(6 * var(--svh)), 80px); }
.wr-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:clamp(16px, calc(3 * var(--svh)), 34px); border-bottom:1px solid rgb(var(--c-ink-rgb) / .28); }
html:root .wr-head h2{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(4rem, calc(11.5 * var(--vw)), 13rem); line-height:.8; letter-spacing:0; text-transform:uppercase; color:var(--c-ink); }
.wr-head span, .wr-kicker{ font-size:13px; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mute); }
.wr-head span{ padding-bottom:.5em; white-space:nowrap; }
.wr-row{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(24px, calc(3.2 * var(--vw)), 56px); align-items:start; padding:clamp(36px, calc(7 * var(--svh)), 88px) 0; border-bottom:1px solid rgb(var(--c-ink-rgb) / .16); }
.wr-row:last-child{ border-bottom:0; }
.wr-row--flip{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.wr-row--flip .wr-pic{ order:2; }
/* v227: the frame is var(--c-ink) and a tenth taller than the slide; the slide drifts up and down inside it with the scroll (--p, -1 to 1) */
.wr-pic{ display:flex; align-items:center; aspect-ratio:16 / 9.9; overflow:hidden; background:#fff; line-height:0; }
.wr-pic img{ display:block; width:100%; height:auto; translate:0 calc(var(--p, 0) * 5%); will-change:translate; }
.wr-kicker{ display:flex; justify-content:space-between; gap:16px; margin:0; }
html:root .wr-name{ margin:.1em 0 .16em; font-family:var(--display); font-weight:400; font-size:clamp(3.4rem, calc(7.4 * var(--vw)), 8.4rem); line-height:.86; letter-spacing:0; text-transform:uppercase; color:var(--c-ink); }
.wr-name a{ color:inherit; text-decoration:none; }
.wr-line{ margin:0; max-width:30em; font-size:clamp(1rem, calc(1.25 * var(--vw)), 1.3rem); line-height:1.4; color:rgb(var(--c-ink-rgb) / .88); }
.wr-how{ margin:clamp(22px, calc(4.4 * var(--svh)), 48px) 0 0 clamp(0px, calc(6 * var(--vw)), 110px); }
html:root .wr-how h4{ margin:0 0 .3em; font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, calc(1.9 * var(--vw)), 2rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--c-ink); }
.wr-how p{ margin:0; max-width:36em; font-size:15px; line-height:1.55; color:var(--c-mute); }
.wr-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.wr-tags li{ padding:6px 14px; border:1px solid rgb(var(--c-ink-rgb) / .32); border-radius:999px; font-size:13px; line-height:1.3; color:var(--c-ink); }
.wr-go{ display:inline-block; margin-top:24px; padding:11px 22px 9px; border-radius:999px; background:var(--c-ink); color:var(--c-bg); font-family:var(--display); font-size:17px; line-height:1; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.wr-go:hover{ background:rgb(var(--c-ink-rgb) / .88); }
.wr-pic:focus-visible, .wr-name a:focus-visible, .wr-go:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.js .wr-pic{ clip-path:inset(0 0 100% 0); transition:clip-path 1200ms cubic-bezier(.76, 0, .24, 1); }
.js .wr-row.is-in .wr-pic{ clip-path:inset(0); }
/* while it is uncovered the slide also settles from slightly enlarged and pale, as on the reference */
.js .wr-pic img{ scale:1.1; opacity:.5; transition:scale 1500ms cubic-bezier(.16, 1, .3, 1) 150ms, opacity 1000ms ease 150ms; }
.js .wr-row.is-in .wr-pic img{ scale:1; opacity:1; }
.js .wr-text > *{ opacity:0; transform:translate3d(0, 26px, 0); transition:opacity 800ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); transition-delay:calc(200ms + var(--k, 0) * 90ms); }
.js .wr-row.is-in .wr-text > *{ opacity:1; transform:none; }
@media (max-width:860px){
  .wr-row, .wr-row--flip{ grid-template-columns:minmax(0, 1fr); gap:20px; }
  .wr-row--flip .wr-pic{ order:0; }
  .wr-how{ margin-left:0; }
  .wr-head{ flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (prefers-reduced-motion:reduce){ .js .wr-pic img{ scale:1; opacity:1; translate:none; transition:none; } .js .wr-pic{ clip-path:none; transition:none; } .js .wr-text > *{ opacity:1; transform:none; transition:none; } }

/* BRAND v231: the top bar shows the logo mark alone, no name beside it. */
html:root .vnav__brand{ gap:0; }
html:root .vnav__brand .vnav__mark{ width:auto; height:26px; aspect-ratio:80 / 124.72; }

/* ENTRY v231: the opening sheet shows only the logo, drawn by its own animation (Wipe: block, hole, notch, leg); the sheet
   lifts when the logo is complete. */
.intro__logo{ display:block; width:auto; height:min(calc(30 * var(--svh)), 230px); fill:var(--c-bg); overflow:visible; }
.intro__logo .w-block{ shape-rendering:crispEdges; }
.intro__logo:not(.play){ visibility:hidden; }

/* CASE STUDY v233: the Role and Outcome cards are gone; the Process card runs the full width with its steps side by side */
.cs__facts{ grid-template-columns:minmax(0, 1fr); }
@media (min-width:901px){ .fact--steps .steps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px clamp(20px, calc(2.4 * var(--vw)), 40px); } }
@media (min-width:561px) and (max-width:900px){ .fact--steps .steps{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 28px; } }
.fact--steps .steps li{ align-content:start; }

/* SPEED v234: the entry sheet shows for about half as long (the logo draws in ~1.25s and the sheet lifts at 1.5s) */
.intro__logo.wipe.play .w-block{ animation-duration:.2s; animation-delay:.05s; }
.intro__logo.wipe.play .w-hole{ animation-duration:.38s; animation-delay:.3s; }
.intro__logo.wipe.play .w-notch{ animation-duration:.28s; animation-delay:.62s; }
.intro__logo.wipe.play .w-leg{ animation-duration:.42s; animation-delay:.82s; }
.intro.intro--curtain{ transition-duration:900ms; }

/* HOME NAME v237: Bebas Neue exactly as in the project titles, not stretched: two lines, centred, sized by the script */
.mh__line{ display:block; }
/* v238: the name runs from one edge of the page to the other (the top bar's edges), each line sized by the script */
html:root .mh__name{ font-size:var(--fs, calc(24 * var(--vw))); line-height:.82; text-align:left; margin-inline:calc(clamp(14px, calc(1.75 * var(--vw)), 28px) - var(--pad)); }
.mh__in{ display:block; }

/* THEME v243: two modes, after the colours of thorfin.webflow.io — light: cream page, black text, electric blue; dark: black
   page, off-white text, the same blue a little brighter. The switch is a column of the top bar. The side menu, and the
   white project slides, look the same in both modes. */
html:root .mh__name{ color:var(--c-accent); }
.rv-pill, .wr-go, .ft2__col a.ft2__cta, .cform__send{ background:var(--c-accent) !important; color:#fff !important; border-color:var(--c-accent) !important; }
.wr-go:hover, .cform__send:hover{ background:var(--c-accent) !important; opacity:.85; }
::selection{ background:var(--c-accent); color:#fff; }
html:root .vnav__theme{ flex:0 0 auto; width:auto; height:auto; display:flex; align-items:center; gap:10px; padding:0 2px; margin:0; border:0; border-bottom:1px solid rgb(var(--c-ink-rgb) / .9); border-radius:0; background:none; color:var(--c-ink); font:inherit; font-size:16px; text-transform:uppercase; cursor:pointer; transform:none; }
html:root .vnav__theme:hover{ background:none; color:var(--c-ink); }
.vnav__sw{ position:relative; flex:0 0 auto; width:44px; height:24px; border:1.5px solid var(--c-ink); border-radius:999px; transition:background-color 250ms ease; }
.vnav__sw i{ position:absolute; left:3px; top:50%; width:15px; height:15px; margin-top:-7.5px; border-radius:50%; background:var(--c-ink); transition:translate 350ms cubic-bezier(.3, 1.3, .5, 1), background-color 250ms ease; }
:root[data-theme="dark"] .vnav__sw{ background:var(--c-accent); border-color:var(--c-accent); }
:root[data-theme="dark"] .vnav__sw i{ translate:20px 0; background:#fff; }
.vnav__mode::before{ content:"Light"; } :root[data-theme="dark"] .vnav__mode::before{ content:"Dark"; }
.vnav__theme:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
@media (max-width:900px){ .vnav__mode{ display:none; } }
html.mh-pre .vnav__theme{ pointer-events:none; }
html:root .vnav__theme{ display:flex !important; }
/* the menu icon is drawn in white and blended by difference, so it reads on the cream page, the black page and the white slides alike */
html:root .vdot--float{ color:#fff; }
/* the footer mark's fade is written into the picture in off-white; in the page's own text colour instead */
.ft2__mark stop{ stop-color:var(--c-ink); }

/* v244: the whole project row is the link; the "View project" button is gone */
.wr-row{ cursor:pointer; }
.wr-pic:focus-visible, .wr-name a:focus-visible{ outline-color:var(--c-ink); }

/* HOME ABOUT v245 (after a reference the user sent): a large plain statement, then a small portrait with a short grey
   note beside its top and a quiet pill beside its bottom */
.hb .wrap{ display:block; }
.hb__say{ margin:0; max-width:27em; font-family:var(--font); font-size:clamp(1.55rem, calc(2.9 * var(--vw)), 2.7rem); font-weight:600; line-height:1.2; letter-spacing:-.03em; color:var(--c-ink); text-wrap:pretty; }
.hb__row{ display:flex; align-items:stretch; gap:clamp(16px, calc(1.8 * var(--vw)), 28px); margin-top:clamp(28px, calc(3.6 * var(--vw)), 56px); }
.hb__photo{ flex:0 0 clamp(120px, calc(13 * var(--vw)), 196px); margin:0; aspect-ratio:2 / 3; border-radius:8px; overflow:hidden; background:var(--c-surface); }
.hb__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hb__side{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px; min-width:0; max-width:31em; padding-top:2px; }
.hb__note{ margin:0; font-size:clamp(15px, calc(1.25 * var(--vw)), 19px); line-height:1.55; letter-spacing:-.01em; color:var(--c-mute); }
.hb__btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:999px; background:rgb(var(--c-ink-rgb) / .09); color:var(--c-ink); font-family:var(--font); font-size:17px; font-weight:600; letter-spacing:-.02em; text-decoration:none; transition:background-color 200ms ease; }
.hb__btn:hover{ background:rgb(var(--c-ink-rgb) / .16); }
.hb__btn:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.hb__btn{ white-space:nowrap; }
@media (max-width:560px){ .hb__btn{ min-height:42px; padding:0 18px; font-size:15px; } }

/* THOR v246 — colours and navigation after thorfin.webflow.io, at the user's request.
   Where the reference is blue, the site is blue: the big display headings, filled buttons, the far end of the top bar,
   feature cards. Where it is blackish: running text, small labels, links. Cards are white on the cream page.
   Dark mode is the same scheme turned over: black page, near-black cards, off-white text, the same blue.
   Navigation: one fixed bar — round logo button, a long pill with the links whose far end runs into blue (Resume and the
   light/dark switch sit there), and a separate blue Contact pill. The old top bar, the slanted-lines button and the
   full-screen side menu are gone; on phones the links are in a drop-down under the bar. */

/* ---- the bar ---- */
.tn{ position:fixed; z-index:500; top:clamp(10px, calc(1.25 * var(--vw)), 18px); left:clamp(12px, calc(4.86 * var(--vw)), 70px); right:clamp(12px, calc(4.86 * var(--vw)), 70px); display:flex; align-items:stretch; gap:clamp(6px, calc(.6 * var(--vw)), 9px); height:clamp(52px, calc(4.2 * var(--vw)), 60px); font-family:var(--font); }
.tn a, .tn button{ -webkit-tap-highlight-color:transparent; }
.tn__logo{ flex:0 0 auto; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--c-card); color:var(--c-accent); box-shadow:0 1px 2px rgba(0, 0, 0, .06); transition:transform 300ms cubic-bezier(.3, 1.4, .5, 1); }
.tn__logo svg{ display:block; height:46%; width:auto; fill:currentColor; translate:6% 0; }
.tn__logo:hover{ transform:rotate(-8deg) scale(1.05); }
.tn__bar{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 clamp(10px, calc(1.1 * var(--vw)), 16px) 0 clamp(18px, calc(2.7 * var(--vw)), 40px); border-radius:999px; background:linear-gradient(90deg, var(--c-card) 0%, var(--c-card) 27%, color-mix(in srgb, var(--c-accent) 34%, var(--c-card)) 52%, var(--c-accent) 90%); box-shadow:0 1px 2px rgba(0, 0, 0, .06), inset -6px -4px 10px rgba(0, 0, 40, .12); }
.tn__links{ display:flex; align-items:center; gap:clamp(18px, calc(2.5 * var(--vw)), 38px); min-width:0; }
.tn__links a{ position:relative; font-size:clamp(15px, calc(1.25 * var(--vw)), 18px); font-weight:500; letter-spacing:-.01em; line-height:1; color:var(--c-ink); text-decoration:none; white-space:nowrap; transition:opacity 180ms ease; }
.tn__links:hover a:not(:hover){ opacity:.5; }
.tn__links a[aria-current="page"]::after{ content:""; position:absolute; left:calc(100% + 9px); top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:currentColor; }
.tn__links a[aria-current="page"]{ margin-right:14px; }
.tn__only-drop, .tn__menu{ display:none; }
.tn__end{ flex:0 0 auto; display:flex; align-items:center; gap:clamp(12px, calc(1.5 * var(--vw)), 22px); }
.tn__resume{ font-size:clamp(15px, calc(1.25 * var(--vw)), 18px); font-weight:500; letter-spacing:-.01em; color:#fff; text-decoration:none; }
.tn__resume:hover{ text-decoration:underline; text-underline-offset:4px; }
html:root .tn .tn__theme{ display:grid !important; place-items:center; flex:0 0 auto; width:auto; height:auto; margin:0; padding:6px; border:0; border-radius:999px; background:none; color:#fff; cursor:pointer; transform:none; }
html:root .tn .tn__theme:hover{ background:none; color:#fff; }
.tn__sw{ position:relative; display:block; width:46px; height:26px; border:1.5px solid #fff; border-radius:999px; }
.tn__sw i{ position:absolute; left:3px; top:50%; width:17px; height:17px; margin-top:-8.5px; border-radius:50%; background:#fff; transition:translate 350ms cubic-bezier(.3, 1.3, .5, 1); }
:root[data-theme="dark"] .tn__sw{ background:rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .tn__sw i{ translate:20px 0; }
.tn__cta{ flex:0 0 auto; display:grid; place-items:center; padding:0 clamp(18px, calc(2.5 * var(--vw)), 36px); border-radius:999px; background:var(--c-accent); color:#fff; font-size:clamp(13px, calc(1.05 * var(--vw)), 15px); font-weight:500; letter-spacing:.01em; text-transform:uppercase; text-decoration:none; box-shadow:inset -4px -4px 8px rgba(0, 0, 40, .22), inset 3px 3px 6px rgba(255, 255, 255, .14); transition:transform 200ms ease; }
.tn__cta:hover{ transform:scale(1.04); }
.tn :is(a, button):focus-visible{ outline:2px solid var(--c-ink); outline-offset:3px; }
html.mh-pre .tn, html.intro-on .tn{ opacity:0 !important; pointer-events:none; }
html.mh-go .tn{ transition:opacity 900ms ease 650ms; }
@media (max-width:760px){
  .tn__menu{ display:block; padding:8px 4px; border:0; background:none; font:inherit; font-size:16px; font-weight:500; color:var(--c-ink); cursor:pointer; }
  .tn__resume{ display:none; } .tn__only-drop{ display:block; }
  .tn__bar{ padding-left:18px; background:linear-gradient(90deg, var(--c-card) 0%, var(--c-card) 34%, var(--c-accent) 96%); }
  .tn__links{ position:absolute; left:0; right:0; top:calc(100% + 8px); flex-direction:column; align-items:stretch; gap:0; padding:10px 22px; border-radius:24px; background:var(--c-card); box-shadow:0 18px 40px rgba(0, 0, 0, .18); visibility:hidden; opacity:0; translate:0 -8px; transition:opacity 200ms ease, translate 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s 260ms; }
  .tn.is-open .tn__links{ visibility:visible; opacity:1; translate:0 0; transition-delay:0s; }
  .tn__links a{ padding:15px 0; font-size:19px; border-bottom:1px solid rgb(var(--c-ink-rgb) / .1); }
  .tn__links a:last-child{ border-bottom:0; }
  .tn__links a[aria-current="page"]{ margin-right:0; } .tn__links a[aria-current="page"]::after{ left:auto; right:2px; }
}
@media print{ .tn{ display:none; } }
/* room for the bar: pages start under it, and jumps to a section stop below it */
html{ scroll-padding-top:clamp(72px, calc(7 * var(--vw)), 96px); }
html:root .mh{ padding-top:clamp(84px, calc(7.4 * var(--vw)), 104px); }
body:not(:has(.mh)) #main{ padding-top:clamp(76px, calc(6.6 * var(--vw)), 96px); }

/* ---- blue: the big display headings ---- */
.wr-head h2, .wr-name, .wr-name a, .rv-mq span, .yr__year, .cp__title, #main .h2, .cs .h1, .cs .h2, .gstore__title{ color:var(--c-accent) !important; }
.ft2__name span{ background-image:linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent) 22%, color-mix(in srgb, var(--c-accent) 0%, transparent) 100%); }
.ft2__mark stop{ stop-color:var(--c-accent); }
/* a feature card in blue with white words (the list that rolls at the top of About) */
.ab2-card{ background:var(--c-accent); }
.ab2-card__roll li{ color:#fff; }

/* ---- white cards, quiet chips, fields outlined in blue ---- */
.cp__card, .fact, .thought, .thought.glass-tile{ background:var(--c-card) !important; }
.wr-tags li{ border-color:transparent; background:var(--c-card); color:var(--c-ink); }
.hb__btn{ background:var(--c-card); } .hb__btn:hover{ background:var(--c-accent); color:#fff; }
.cform__head{ color:var(--c-ink); }
.cform__f input, .cform__f textarea{ background:transparent; border-color:color-mix(in srgb, var(--c-accent) 55%, transparent); color:var(--c-ink); }
.cform__f label{ color:var(--c-mute); }
.cform__f :is(input, textarea):hover{ border-color:var(--c-accent); }
.cform__f :is(input, textarea):focus{ border-color:var(--c-accent); background:transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.cform__f :is(input, textarea):-webkit-autofill{ -webkit-text-fill-color:var(--c-ink); box-shadow:0 0 0 100px var(--c-card) inset; caret-color:var(--c-ink); }
/* the small labels over the years were written in off-white; in the page's text colour */
.story .yr__year .stk b, .js .story .yr__year .stk b, .js .story .yr__year .stk.is-on b{ color:var(--c-ink); }
/* v247, after a close-up of the reference's bar: a strip of the page's own colour sits behind the bar so nothing shows
   around it while the page scrolls under, and the blue parts have a soft glow (blurred edge inside, a little light outside) */
.tn::before{ content:""; position:absolute; z-index:-1; left:calc(-100 * var(--vw)); right:calc(-100 * var(--vw)); top:calc(clamp(10px, calc(1.25 * var(--vw)), 18px) * -1); bottom:calc(clamp(10px, calc(1.25 * var(--vw)), 18px) * -1); background:var(--c-bg); pointer-events:none; }
.tn__bar{ isolation:isolate; box-shadow:0 1px 2px rgba(0, 0, 0, .06); }
.tn__bar::before{ content:""; position:absolute; z-index:-1; inset:3px 0 -1px 38%; border-radius:999px; background:linear-gradient(90deg, transparent, var(--c-accent) 70%); filter:blur(9px); opacity:.55; pointer-events:none; }
.tn__bar::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 11px 3px color-mix(in srgb, var(--c-accent) 70%, #000a3c), inset 0 0 2px 1px rgba(255, 255, 255, .18); -webkit-mask-image:linear-gradient(90deg, transparent 34%, #000 82%); mask-image:linear-gradient(90deg, transparent 34%, #000 82%); pointer-events:none; }
.tn__bar > *{ position:relative; z-index:1; }
.tn__cta{ box-shadow:inset 0 0 11px 3px color-mix(in srgb, var(--c-accent) 62%, #000a3c), inset 0 0 2px 1px rgba(255, 255, 255, .2), 0 0 14px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.tn__logo{ box-shadow:0 1px 2px rgba(0, 0, 0, .06), 0 0 12px color-mix(in srgb, var(--c-accent) 14%, transparent); }
@media (max-width:760px){ .tn__links{ z-index:2; } }
@media (max-width:760px){ .tn__bar > .tn__links{ position:absolute; z-index:2; } }
/* v248: the bar's colours and light are now the reference's own values, read from its stylesheet:
   pill = white with linear-gradient(253deg, #1248fc, #fff 74%) and an inner white light (inset 2px 2px 10px rgba(255,255,255,.78));
   Contact = #1248fc with inset 0 0 5px rgba(255,255,255,.78); the word at the blue end is the page's cream; strip = page colour, 16px above and below */
.tn{ top:16px; height:64px; gap:8px; align-items:center; }
.tn::before{ top:-16px; bottom:-16px; }
.tn__logo{ height:64px; box-shadow:none; }
.tn__bar{ height:61px; background:var(--c-card) linear-gradient(253deg, #1248fc, var(--c-card) 74%); box-shadow:inset 2px 2px 10px rgba(255, 255, 255, .78); }
.tn__bar::before, .tn__bar::after{ content:none; }
.tn__links a{ font-size:clamp(16px, calc(1.34 * var(--vw)), 19.2px); font-weight:400; }
.tn__resume{ font-size:clamp(16px, calc(1.34 * var(--vw)), 19.2px); font-weight:400; color:#efece5; }
.tn__cta{ height:53px; padding:0 36px; background:#1248fc; box-shadow:inset 0 0 5px rgba(255, 255, 255, .78); font-size:15px; font-weight:400; letter-spacing:0; }
:root[data-theme="dark"] .tn__bar{ box-shadow:inset 2px 2px 10px rgba(255, 255, 255, .16); }
@media (max-width:760px){ .tn{ top:10px; height:56px; } .tn::before{ top:-10px; bottom:-10px; } .tn__logo{ height:56px; } .tn__bar{ height:54px; background:var(--c-card) linear-gradient(253deg, #1248fc, var(--c-card) 70%); } .tn__cta{ height:48px; padding:0 20px; font-size:14px; } }


/* v253: dark mode removed at the user's request. The site is light only (cream, blackish text, #1248fc); the switch is gone
   from the bar and every page sets data-theme="light". The dark values above are no longer reachable. */
.tn__end{ padding-right:clamp(10px, calc(1.4 * var(--vw)), 22px); }

/* v254: Resume and Contact changed places — Contact is the word at the blue end of the pill, Resume is the separate blue pill */
.tn__resume[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px; }

/* v257: each project is headed by its number alone, in blue. The name is not written here (it is on the cover slide);
   it stays in the page for screen readers */
.wr-name .wr-no{ color:var(--c-accent); }
/* v258: the links in the pill behave as on the reference — the one under the mouse turns its violet-blue (#4a3aff) over
   0.3s, the others stay black (they no longer fade) */
.tn__links a{ transition:color .3s; }
.tn__links:hover a:not(:hover){ opacity:1; }
.tn__links a:hover, .tn__links a:focus-visible{ color:#4a3aff; }
.tn__links a{ color:#000; }
/* v259: the mark sits exactly in the middle of its round button */
.tn__logo{ line-height:0; }
.tn__logo svg{ translate:none; }

/* v260: on the Playground row the two labels changed places (Off the clock at the left, the list in the middle); phones still show the list and the count */
@media (max-width:760px){ .lab2__row span:nth-child(2){ display:block; } .lab2__row span:nth-child(1){ display:none; } }

/* v261: the game view (Cell-O) in the light scheme. It was built "always dark" by redefining the colour variables inside
   .game and dialog.game-sheet; here the same variables are given the site's light values (cream page, blackish text,
   white tiles, blue links), and the few colours that were written out directly are restated. */
.game, dialog.game-sheet, dialog.game-sheet .game{
  --bg:#efece5; --surface:#e6e2d9; --surface-2:#ffffff; --surface-3:#dad5ca; --press:#cfc9bc;
  --ink:#0b0b0d; --ink-2:#333336; --gray:#615e57; --gray-3:#8d8a83;
  --hairline:rgba(0, 0, 0, .1); --line-strong:rgba(0, 0, 0, .28); --line-hover:rgba(0, 0, 0, .2);
  --on-ink:#ffffff; --link:#1248fc; --accent:#1248fc; --nav-bg:rgba(239, 236, 229, .82);
  --glass-bg:#ffffff; --glass-bg-strong:#efece5; --glass-border:rgba(0, 0, 0, .06);
  --glass-rim:rgba(0, 0, 0, .04); --glass-hi:rgba(255, 255, 255, .9); --glass-shadow:0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .06); --glass-sheen:rgba(255, 255, 255, 0);
  --grad:linear-gradient(100deg, #1248fc 0%, #4a3aff 100%);
  --lg-bg:rgba(120, 120, 128, .12); --lg-bg-hover:rgba(120, 120, 128, .2); --lg-border:rgba(0, 0, 0, .07); --lg-hi:rgba(255, 255, 255, .95); --lg-lo:rgba(0, 0, 0, .05);
  --lg-shadow:0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .07); --lg-ink:#0b0b0d; --lg-sheen:linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 58%);
  color-scheme:light; background:#efece5; color:#0b0b0d;
}
.game::before{ background:none; }
dialog.game-sheet::backdrop{ background:#efece5; }
dialog.game-sheet .cs__bar{ background:rgba(239, 236, 229, .82); border-bottom-color:rgba(0, 0, 0, .1); }
dialog.game-sheet .cs__close{ background:#ffffff; color:#0b0b0d; }
.gstore__icon{ box-shadow:0 0 0 1px rgba(0, 0, 0, .06); }
.gstore__sub{ color:#615e57; } .gstore__dev{ color:#1248fc; } .gstore__note{ color:#8d8a83; }
.gstore__btn{ background:#1248fc; } .gstore__btn:hover{ background:#4a3aff; } .gstore__btn:focus-visible{ outline-color:#0b0b0d; }
.gstore__strip{ border-top-color:rgba(0, 0, 0, .12); border-bottom-color:rgba(0, 0, 0, .12); }
.gstore__strip > div{ border-left-color:rgba(0, 0, 0, .12); }
.gstore__strip dt, .gstore__strip dd.s{ color:#8d8a83; } .gstore__strip dd{ color:#0b0b0d; }
.game__film{ box-shadow:0 30px 70px rgba(18, 72, 252, .1), 0 0 0 1px rgba(0, 0, 0, .08); }
.game__icon{ box-shadow:0 20px 50px rgba(18, 72, 252, .14), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* v261, continued: the role tiles are white with blackish words, the outline button and the bar's line read on cream */
.game .role, .game .role.glass-tile{ background:#ffffff !important; border-color:rgba(0, 0, 0, .06) !important; box-shadow:0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .05) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
html:root .game .role h4{ color:#0b0b0d; }
html:root .game .role p{ color:#615e57; }
.game .btn--ghost, dialog.game-sheet .btn--ghost{ color:#0b0b0d !important; border-color:rgba(11, 11, 13, .45) !important; background:transparent !important; }
.game .btn--ghost:hover, dialog.game-sheet .btn--ghost:hover{ background:#0b0b0d !important; color:#efece5 !important; }
dialog.game-sheet .cs__bar{ border-bottom:1px solid rgba(0, 0, 0, .1); }

/* v262, spacing around the home line: it sits midway between the name above and "Selected work" below, with the same
   clear space on both sides (the 21px evens out the letters' own head-room). On phones the first screen is no longer
   padded out to full height, so the line is not left floating in an empty screen. */
html:root .mh--rv{ padding-bottom:0; }
html:root .mh__tag{ margin-top:auto; margin-bottom:auto; padding-top:calc(clamp(56px, calc(9.5 * var(--svh)), 96px) - 21px); }
html:root .rv-work .rv-rows{ padding-top:clamp(56px, calc(9.5 * var(--svh)), 96px); }
@media (max-width:760px){ html:root .mh--rv{ min-height:0; } html:root .mh__tag{ padding-top:calc(clamp(44px, calc(7 * var(--svh)), 64px) - 14px); } html:root .rv-work .rv-rows{ padding-top:clamp(44px, calc(7 * var(--svh)), 64px); } }

/* v264 */
/* Playground: the two moving rows and the label row fill the first screen exactly, so the shelves begin just below it and
   nothing (the "Posters" label, the arrows, the posters) is caught half-way at the bottom edge. The rows shrink on
   short screens so they always fit. Not on phones, where the page simply scrolls. */
@media (min-width:761px){
  .lab2{ display:flex; flex-direction:column; min-height:calc(calc(100 * var(--svh)) - clamp(76px, calc(6.6 * var(--vw)), 96px)); }
  html:root .lab2__mq{ margin-block:auto; padding-bottom:0; }
  .lab2__mq div{ font-size:min(clamp(6rem, calc(18 * var(--vw)), 18rem), calc((calc(100 * var(--svh)) - 262px) / 1.7)); }
  .lab2__row{ padding-bottom:clamp(20px, calc(3.4 * var(--svh)), 36px); }
  .lab2 + #art{ padding-top:clamp(28px, calc(4.5 * var(--svh)), 56px) !important; }
}
/* the rounded picture corner of the Playground shelves (14px) is used for pictures across the site */
.wr-pic, .hb__photo, .ab2__photo, .rv-about__photo{ border-radius:14px; }

/* v265: one corner curve everywhere. Every picture and every card on the site uses the same 14px corner (it used to be
   14, 18, 22 or 23px depending on the place). Pills and round buttons stay fully round. */
:root{ --radius:14px; --curve:14px; }
.wr-pic, .hb__photo, .ab2__photo, .rv-about__photo, .shelf__img, .ab2-card, .cp__card, .fact, .frame, .cs__deck img, .cs__deck figure, .cs__deck .frame,
.gthumb, .lab2__game .gthumb, .thought, .thought.glass-tile, .glass-tile, .role, .game__film, .game__shot, .gthumb__bar, .mini__item, .mini__item img,
.cform__f input, .cform__f textarea, #pviewImg, .pview__card, dialog.pview .pview__card{ border-radius:var(--curve) !important; }
/* the uncovering of a project cover keeps the same curve while it opens */
.js .wr-pic{ clip-path:inset(0 0 100% 0 round var(--curve)); }
.js .wr-row.is-in .wr-pic{ clip-path:inset(0 round var(--curve)); }

/* v267: square corners were tried (v266) and the user preferred the curves: every picture and card is back on the 14px curve */

/* v268: while the year row is pinned it sits in the middle of the space under the top bar (it was centred on the whole
   screen, so on short screens it ran up against the bar with a gap left at the bottom) */
@media (min-width:761px){ .js .yr__pin{ box-sizing:border-box; padding-top:clamp(80px, calc(6.6 * var(--vw)), 96px); } }
/* a touch lower still: most stops have shorter text than the longest one the row is centred on */
@media (min-width:761px){ .js .yr__pin{ padding-top:calc(clamp(80px, calc(6.6 * var(--vw)), 96px) + calc(2.4 * var(--svh))); } }

/* ESSAY v269 — the writing section of the Playground holds one essay. On the page it is a single wide white card; a click
   opens the whole text in a pop-up: a reading card in the middle of the screen over the dimmed page. */
.essay{ display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"meta meta" "title go" "text go"; column-gap:clamp(24px, calc(5 * var(--vw)), 80px); align-items:end; padding:clamp(22px, calc(2.6 * var(--vw)), 38px); border-radius:var(--curve); background:var(--c-card); color:var(--c-ink); text-decoration:none; transition:translate 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease; box-shadow:0 1px 2px rgba(0, 0, 0, .04); }
.essay:hover{ translate:0 -3px; box-shadow:0 18px 40px rgba(18, 72, 252, .1), 0 1px 2px rgba(0, 0, 0, .04); }
.essay__meta{ grid-area:meta; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(40px, calc(7 * var(--vw)), 110px); }
.essay__meta span{ padding:5px 14px 4px; border-radius:999px; background:var(--c-bg); font-size:13px; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; color:var(--c-ink); }
.essay__meta span:first-child{ background:var(--c-accent); color:#fff; }
.essay__title{ grid-area:title; max-width:13em; font-family:var(--display); font-size:clamp(2.6rem, calc(6 * var(--vw)), 6.2rem); line-height:.88; letter-spacing:.002em; text-transform:uppercase; color:var(--c-accent); }
.essay__text{ grid-area:text; max-width:38em; margin-top:clamp(14px, calc(1.6 * var(--vw)), 24px); font-size:clamp(15px, calc(1.25 * var(--vw)), 18px); line-height:1.5; color:var(--c-mute); }
.essay__go{ grid-area:go; align-self:end; display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border-radius:999px; background:var(--c-accent); color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; box-shadow:inset 0 0 5px rgba(255, 255, 255, .78); }
.essay:focus-visible{ outline:2px solid var(--c-accent); outline-offset:4px; }
@media (max-width:760px){ .essay{ grid-template-columns:1fr; grid-template-areas:"meta" "title" "text" "go"; } .essay__go{ justify-self:start; margin-top:22px; } }

html:has(dialog.art[open]){ overflow:hidden; }
dialog.art{ width:min(860px, calc(calc(100 * var(--vw)) - 32px)); height:min(calc(92 * var(--svh)), 1100px); max-width:none; max-height:none; margin:auto; padding:0; border:0; border-radius:var(--curve); background:var(--c-card); color:var(--c-ink); overflow:hidden; box-shadow:0 40px 120px rgba(0, 0, 20, .35); }
dialog.art::backdrop{ background:rgba(11, 11, 13, .55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
dialog.art[open]{ animation:art-in 420ms cubic-bezier(.2, .8, .2, 1) both; }
dialog.art[open]::backdrop{ animation:art-dim 300ms ease both; }
dialog.art.is-closing{ animation:art-out 220ms ease-in both; }
dialog.art.is-closing::backdrop{ animation:art-dim 220ms ease reverse both; }
@keyframes art-in{ from{ opacity:0; transform:translate3d(0, 28px, 0) scale(.985); } }
@keyframes art-out{ to{ opacity:0; transform:translate3d(0, 18px, 0) scale(.99); } }
@keyframes art-dim{ from{ opacity:0; } }
.art__card{ display:flex; flex-direction:column; height:100%; }
.art__bar{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; padding:0 14px 0 clamp(20px, calc(5 * var(--vw)), 64px); border-bottom:1px solid rgb(var(--c-ink-rgb) / .1); }
.art__where{ font-family:var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.art__close{ display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:var(--c-bg); color:var(--c-ink); cursor:pointer; transition:background-color 180ms ease, color 180ms ease; }
.art__close svg{ width:13px; height:13px; }
.art__close:hover{ background:var(--c-accent); color:#fff; }
.art__close:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.art__progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; }
.art__progress i{ display:block; height:100%; background:var(--c-accent); transform-origin:0 50%; transform:scaleX(0); }
.art__scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; outline:none; }
.art__body{ max-width:660px; margin:0 auto; padding:clamp(32px, calc(6 * var(--vw)), 72px) clamp(20px, calc(5 * var(--vw)), 64px) clamp(56px, calc(8 * var(--vw)), 110px); font-family:var(--font); font-size:clamp(17px, calc(1.3 * var(--vw)), 19px); line-height:1.62; letter-spacing:-.005em; color:rgb(var(--c-ink-rgb) / .86); }
.art__kicker{ margin:0 0 18px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mute); }
html:root .art__title{ margin:0 0 clamp(28px, calc(4.5 * var(--vw)), 52px); font-family:var(--display); font-weight:400; font-size:clamp(2.8rem, calc(7 * var(--vw)), 5.4rem); line-height:.88; letter-spacing:.002em; text-transform:uppercase; color:var(--c-accent); }
.art__body p{ margin:0 0 1.05em; }
.art__body strong{ font-weight:600; color:var(--c-ink); }
.art__body .art__lede{ font-size:1.28em; line-height:1.38; letter-spacing:-.015em; color:var(--c-ink); }
.art__body .art__beats{ padding-left:1em; border-left:2px solid rgb(var(--c-ink-rgb) / .14); line-height:1.7; color:var(--c-ink); }
html:root .art__body h3{ margin:2.3em 0 .75em; font-family:var(--font); font-size:1.42em; font-weight:600; line-height:1.2; letter-spacing:-.02em; text-transform:none; color:var(--c-ink); }
html:root .art__body h3.art__turn{ margin-top:2.6em; padding-top:1.5em; border-top:1px solid rgb(var(--c-ink-rgb) / .14); font-family:var(--display); font-weight:400; font-size:clamp(2.2rem, calc(4.6 * var(--vw)), 3.4rem); line-height:.92; letter-spacing:.002em; text-transform:uppercase; color:var(--c-accent); }
.art__body blockquote{ margin:1.4em 0 1.5em; padding:0 0 0 clamp(16px, calc(2 * var(--vw)), 24px); border-left:3px solid var(--c-accent); }
.art__body blockquote p{ margin:0; font-size:1.36em; font-weight:600; line-height:1.25; letter-spacing:-.02em; color:var(--c-ink); }
.art__swap{ margin:0 0 .9em; padding:14px 18px; border-radius:var(--curve); background:var(--c-bg); }
.art__swap p{ margin:0; } .art__swap p:first-child{ color:var(--c-mute); } .art__swap p:first-child strong{ font-weight:500; color:inherit; } .art__swap p + p{ margin-top:4px; }
.art__asks{ list-style:none; margin:0 0 1.2em; padding:0; }
.art__asks li{ position:relative; padding:9px 0 9px 28px; border-top:1px solid rgb(var(--c-ink-rgb) / .1); font-weight:600; color:var(--c-ink); }
.art__asks li:last-child{ border-bottom:1px solid rgb(var(--c-ink-rgb) / .1); }
.art__asks li::before{ content:"?"; position:absolute; left:2px; top:9px; font-family:var(--display); font-size:1.15em; line-height:1.4; color:var(--c-accent); }
.art__zip{ margin:0 0 1.3em; display:grid; gap:8px; }
.art__zip > div{ display:grid; grid-template-columns:54px minmax(0, 1fr); gap:16px; align-items:center; padding:12px 18px 12px 12px; border-radius:var(--curve); background:var(--c-bg); }
.art__zip dt{ display:grid; place-items:center; height:54px; border-radius:10px; background:var(--c-accent); color:#fff; font-family:var(--display); font-size:34px; line-height:1; padding-top:3px; }
.art__zip dd{ margin:0; }
.art__flow{ display:flex; flex-wrap:wrap; gap:8px 6px; align-items:center; margin:.2em 0 1.2em !important; font-family:var(--display); font-size:1.24em; line-height:1; letter-spacing:.03em; text-transform:uppercase; }
.art__flow span{ display:inline-flex; align-items:center; padding:9px 14px 6px; border-radius:999px; background:var(--c-accent); color:#fff; }
.art__flow span:not(:last-child)::after{ content:"\2192"; margin:0 -6px 0 10px; translate:14px 0; font-family:var(--font); font-size:.8em; color:var(--c-accent); }
.art__flow span:not(:last-child){ margin-right:18px; }
.art__flow--was span{ background:var(--c-bg); color:var(--c-mute); } .art__flow--was span:not(:last-child)::after{ color:var(--c-mute); }
.art__body .art__end{ margin:1.8em 0 0; font-size:1.5em; font-weight:600; line-height:1.22; letter-spacing:-.025em; color:var(--c-accent); }
.art__sources{ margin-top:clamp(40px, calc(6 * var(--vw)), 72px); padding-top:22px; border-top:1px solid rgb(var(--c-ink-rgb) / .14); font-size:14px; line-height:1.5; color:var(--c-mute); }
html:root .art__sources h4{ margin:0 0 8px; font-family:var(--display); font-weight:400; font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-ink); }
.art__sources ul{ margin:0; padding:0; list-style:none; } .art__sources li + li{ margin-top:3px; }
@media (max-width:560px){ dialog.art{ width:calc(100 * var(--vw)); height:calc(100 * var(--svh)); border-radius:0; } .art__flow{ font-size:1.05em; } }
@media (prefers-reduced-motion:reduce){ dialog.art[open], dialog.art.is-closing, dialog.art[open]::backdrop, dialog.art.is-closing::backdrop{ animation:none; } .essay{ transition:none; } }
@media print{ dialog.art{ position:static; width:auto; height:auto; box-shadow:none; } .art__scroll{ overflow:visible; } .art__bar{ display:none; } }
/* essay: the arrows between the steps sit in the gap between two pills; on phones the pop-up covers the whole screen */
.art__flow{ gap:8px 0; }
.art__flow span{ position:relative; }
.art__flow span:not(:last-child){ margin-right:30px; }
.art__flow span:not(:last-child)::after{ content:"\2192"; position:absolute; left:100%; top:50%; width:30px; margin:0; translate:0 -54%; text-align:center; font-family:var(--font); font-size:.82em; line-height:1; color:var(--c-accent); }
@media (max-width:560px){ dialog.art{ position:fixed; inset:0; width:auto; height:auto; margin:0; } .art__flow span:not(:last-child){ margin-right:24px; } .art__flow span:not(:last-child)::after{ width:24px; } }
dialog.art:not([open]){ display:none !important; }

/* v270, Playground: the empty space between the shelves, "Games" and "On my mind" was two full section paddings stacked
   (up to 312px). Sections that follow each other on the same background now share one moderate gap. */
#art.band{ padding-bottom:clamp(20px, calc(2.5 * var(--vw)), 36px); }
#game.band{ padding-top:clamp(36px, calc(5 * var(--vw)), 72px); padding-bottom:clamp(48px, calc(6 * var(--vw)), 88px); }
#thoughts.band{ padding-top:clamp(48px, calc(6 * var(--vw)), 88px); padding-bottom:clamp(56px, calc(7 * var(--vw)), 100px); }
#game.band{ padding-top:clamp(12px, calc(2.4 * var(--vw)), 34px); }

/* WRITING v271 — the writing section as an index for any number of write-ups: one ruled row each (number, title and
   opening lines, chips, arrow). A row lifts onto white under the pointer. Replaces the single big card. */
.wlist{ border-top:1px solid rgb(var(--c-ink-rgb) / .22); }
.wrow{ display:grid; grid-template-columns:clamp(48px, calc(6 * var(--vw)), 96px) minmax(0, 1fr) auto clamp(40px, calc(4 * var(--vw)), 56px); column-gap:clamp(14px, calc(2 * var(--vw)), 32px); align-items:start; padding:clamp(22px, calc(2.8 * var(--vw)), 40px) clamp(10px, calc(1.4 * var(--vw)), 22px); border-bottom:1px solid rgb(var(--c-ink-rgb) / .22); border-radius:0; color:var(--c-ink); text-decoration:none; transition:background-color 220ms ease, border-radius 220ms ease, padding 300ms cubic-bezier(.2, .8, .2, 1); }
.wrow:hover, .wrow:focus-visible{ background:var(--c-card); border-radius:var(--curve); padding-inline:clamp(18px, calc(2.4 * var(--vw)), 36px); outline:none; }
.wrow:focus-visible{ box-shadow:0 0 0 2px var(--c-accent); }
.wrow__no{ font-family:var(--display); font-size:clamp(1.5rem, calc(2.2 * var(--vw)), 2.2rem); line-height:1; color:var(--c-mute); padding-top:.28em; }
.wrow__main{ display:block; min-width:0; }
.wrow__title{ display:block; max-width:16em; font-family:var(--display); font-size:clamp(2rem, calc(4.3 * var(--vw)), 4.4rem); line-height:.9; letter-spacing:.002em; text-transform:uppercase; color:var(--c-accent); }
.wrow__text{ display:block; max-width:40em; margin-top:clamp(10px, calc(1.2 * var(--vw)), 18px); font-size:clamp(15px, calc(1.15 * var(--vw)), 17px); line-height:1.5; color:var(--c-mute); }
.wrow__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; padding-top:.5em; }
.wrow__meta span{ padding:5px 14px 4px; border-radius:999px; background:var(--c-card); font-size:13px; line-height:1.35; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; color:var(--c-ink); }
.wrow__meta span:first-child{ background:var(--c-accent); color:#fff; }
.wrow:hover .wrow__meta span:not(:first-child){ background:var(--c-bg); }
.wrow__go{ justify-self:end; display:grid; place-items:center; width:clamp(40px, calc(4 * var(--vw)), 56px); aspect-ratio:1; border-radius:50%; border:1px solid rgb(var(--c-ink-rgb) / .3); font-size:20px; line-height:1; color:var(--c-ink); transition:background-color 220ms ease, color 220ms ease, border-color 220ms ease, rotate 300ms cubic-bezier(.2, .8, .2, 1); }
.wrow:hover .wrow__go{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; rotate:-45deg; }
.wlist__more{ margin:clamp(16px, calc(1.8 * var(--vw)), 26px) 0 0; padding-left:clamp(10px, calc(1.4 * var(--vw)), 22px); font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mute); }
@media (max-width:760px){
  .wrow{ grid-template-columns:minmax(0, 1fr) 40px; row-gap:14px; } .wrow__no{ grid-column:1 / -1; padding-top:0; }
  .wrow__main{ grid-column:1 / -1; } .wrow__meta{ grid-column:1; flex-direction:row; flex-wrap:wrap; align-items:center; padding-top:0; } .wrow__go{ grid-column:2; align-self:end; }
}
.art__body[hidden]{ display:none; }
.art__next{ display:block; margin-top:clamp(28px, calc(4 * var(--vw)), 48px); padding:20px 22px; border-radius:var(--curve); background:var(--c-accent); color:#fff; text-decoration:none; }
.art__next span{ display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase; opacity:.8; }
.art__next b{ display:block; margin-top:6px; font-family:var(--display); font-weight:400; font-size:clamp(1.6rem, calc(3 * var(--vw)), 2.4rem); line-height:.95; text-transform:uppercase; }
@media (prefers-reduced-motion:reduce){ .wrow, .wrow__go{ transition:none; } }
.wrow__title, .wrow__no{ font-weight:400; }

/* v272: the chips (type, topic, read time) were removed from the writing rows at the user's request */
.wrow{ grid-template-columns:clamp(48px, calc(6 * var(--vw)), 96px) minmax(0, 1fr) clamp(40px, calc(4 * var(--vw)), 56px); }
@media (max-width:760px){ .wrow{ grid-template-columns:minmax(0, 1fr) 40px; } .wrow__main{ grid-column:1; } .wrow__go{ grid-column:2; grid-row:2; align-self:end; } }

/* v273: the writing section sits on the same cream as the sections above it (it was a darker band) */
#thoughts.band, #thoughts.band--tint{ background:var(--c-bg); border-top:0; }

/* v274: a hovered writing row is a clean white card — the thin rules above and below it step aside, so no line runs
   into the card's rounded corners */
.wlist{ border-top:0; border-bottom:1px solid rgb(var(--c-ink-rgb) / .22); transition:border-color 220ms ease; }
.wrow{ border-bottom:0; border-top:1px solid rgb(var(--c-ink-rgb) / .22); transition:background-color 220ms ease, border-color 220ms ease, border-radius 220ms ease, padding 300ms cubic-bezier(.2, .8, .2, 1); }
.wrow:hover, .wrow:focus-visible, .wrow:hover + .wrow, .wrow:focus-visible + .wrow{ border-top-color:transparent; }
.wlist:has(.wrow:last-child:hover), .wlist:has(.wrow:last-child:focus-visible){ border-bottom-color:transparent; }

/* v275: no dot beside the current page in the bar (removed at the user's request) */
.tn__links a[aria-current="page"]::after{ content:none; }
.tn__links a[aria-current="page"]{ margin-right:0; }

/* v279: the bar does not mark the current page; a link turns blue only under the mouse */

/* SYSTEM v280 — one visual language for the repeated parts, after an audit of every page and pop-up.
   Before: 5 different filled buttons, 3 secondary buttons, 2 close buttons, small labels in 9 size/spacing variants,
   two different greys, display headings at four line-heights. Now:
   · primary button  — blue pill, Inter 15px capitals, the bar's inner light (the bar's own Resume pill is the model)
   · secondary button — white pill, same type, turns blue under the mouse
   · close button    — 38px white circle, turns blue under the mouse
   · display label   — Bebas 17px, .05em;   small label — Inter 13px capitals, .05em, grey
   · one grey for secondary text (#615e57) and one for faint text (#8d8a83)
   · display headings share one line-height */
:root, :root[data-theme="light"]{ --gray:#615e57; --gray-3:#8d8a83; --ink-2:#333336; --btn-h:48px; }

/* primary */
.rv-pill, .ft2__col a.ft2__cta, .cform__send, .btn.cform__send, .gstore__get .btn, .gstore__btn, .art__next{ background:#1248fc !important; color:#fff !important; border:0 !important; box-shadow:inset 0 0 5px rgba(255, 255, 255, .78) !important; }
.rv-pill, .ft2__col a.ft2__cta, .cform__send, .btn.cform__send, .gstore__get .btn, .gstore__btn, .hb__btn, .gthumb__btn{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--btn-h); height:auto; padding:0 26px !important; border-radius:999px !important; font-family:var(--font) !important; font-size:15px !important; font-weight:400 !important; line-height:1 !important; letter-spacing:0 !important; text-transform:uppercase !important; text-decoration:none; white-space:nowrap; opacity:1; transition:scale 200ms ease, background-color 200ms ease, color 200ms ease; }
:is(.rv-pill, .ft2__col a.ft2__cta, .cform__send, .gstore__get .btn, .gstore__btn):hover{ scale:1.04; opacity:1; background:#1248fc !important; }
.ft2__col a.ft2__cta{ margin-top:18px; }
/* secondary */
.hb__btn, .gthumb__btn{ background:#fff !important; color:var(--c-ink) !important; border:0 !important; box-shadow:0 1px 2px rgba(0, 0, 0, .06) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.hb__btn:hover, .gthumb:hover .gthumb__btn{ background:#1248fc !important; color:#fff !important; }
.gthumb__btn{ min-height:40px; padding:0 20px !important; }
/* close */
.cs__close, dialog.game-sheet .cs__close, .art__close{ width:38px; height:38px; border:0 !important; border-radius:50% !important; background:#fff !important; color:var(--c-ink) !important; box-shadow:0 1px 2px rgba(0, 0, 0, .08); -webkit-backdrop-filter:none; backdrop-filter:none; transition:background-color 180ms ease, color 180ms ease; }
.art__close{ background:var(--c-bg) !important; box-shadow:none; }
:is(.cs__close, .art__close):hover{ background:#1248fc !important; color:#fff !important; }

/* display labels */
.cp__k, .wlist__more, html:root .ft2__h, .ab2__label, .story .yr-eyebrow, .story .yr-eyebrow em, .art__where, html:root .art__sources h4,
.story .yr__year .stk b, .js .story .yr__year .stk b, .js .story .yr__year .stk.is-on b, .lab2__row, .ab2__meta span, .cp-hero__row span{ font-family:var(--display) !important; font-size:17px !important; font-weight:400 !important; letter-spacing:.05em !important; text-transform:uppercase; }
.cp__k{ color:var(--c-mute); }
/* small labels */
.tag-label, .kicker, .gstore__strip dt, .wr-head span, .wr-kicker, .art__kicker, .fact > h3, .fact h3{ font-family:var(--font) !important; font-size:13px !important; font-weight:400 !important; line-height:1.4 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--c-mute) !important; }
/* display headings */
.cs .h1, .cs .h2, .gstore__title, #main .h2, .art__title, .wrow__title, .wr-name{ line-height:.9 !important; }
html:root .wr-how h4, html:root .game .role h4, html:root .role h4{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, calc(1.9 * var(--vw)), 2rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; }
/* lead paragraphs beside section headings: one grey */
.lead, .game__copy, .hb__note{ color:var(--c-mute); }
html:root .fact h3, html:root .fact > h3{ letter-spacing:.05em !important; }
/* SYSTEM v280, continued: the game's Play button is a primary button; the contact page's link pills are secondary buttons;
   chips (case study, home project tags) are one chip */
dialog.game-sheet .gstore__get .btn, .game .gstore__get .btn{ background:#1248fc !important; color:#fff !important; border:0 !important; box-shadow:inset 0 0 5px rgba(255, 255, 255, .78) !important; min-height:var(--btn-h); padding:0 26px !important; font-size:15px !important; }
dialog.game-sheet .gstore__get .btn:hover, .game .gstore__get .btn:hover{ background:#1248fc !important; color:#fff !important; scale:1.04; }
.cp__links a{ display:inline-flex; align-items:center; min-height:var(--btn-h); padding:0 26px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, .06); font-family:var(--font); font-size:15px; font-weight:400; letter-spacing:0; text-transform:uppercase; color:var(--c-ink); transition:background-color 200ms ease, color 200ms ease; }
.cp__links a:hover{ background:#1248fc; color:#fff; }
.chip, .wr-tags li{ display:inline-flex; align-items:center; min-height:30px; padding:4px 14px; border:0; border-radius:999px; background:var(--c-card); font-size:13px; line-height:1.3; color:var(--c-ink); }

/* v281: the entry sheet is blue with the mark in white (it was a pale sheet with a black mark). The sheet's colours are
   written with the page variables, so they are simply given their own values here. */
.intro.intro--curtain{ --c-ink:#1248fc; --c-ink-rgb:18 72 252; --c-bg:#ffffff; background:#1248fc !important; color:#fff; }
html.intro-on body::before{ background:#1248fc !important; }
html.intro-out .intro.intro--curtain{ background-color:#1248fc !important; }
.intro__logo{ fill:#fff !important; }

/* READING v282 — the write-up pop-up set the way long articles are usually read: a sentence-case headline, a byline with
   a small portrait, a serif text face at a comfortable size in a ~680px column, plain sub-headings, quiet quotes and
   lists. The poster-style blue capitals, tiles and pills are gone from inside the article; blue is only an accent. */
dialog.art{ width:min(920px, calc(calc(100 * var(--vw)) - 32px)); height:min(calc(94 * var(--svh)), 1200px); }
.art__bar{ height:56px; }
.art__body{ max-width:680px; padding-top:clamp(36px, calc(6 * var(--vw)), 76px); font-family:'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif; font-size:clamp(19px, calc(1.45 * var(--vw)), 21px); line-height:1.62; letter-spacing:0; color:#1f1f23; font-optical-sizing:auto; }
.art__head{ display:flex; flex-direction:column; margin-bottom:clamp(30px, calc(4.5 * var(--vw)), 48px); padding-bottom:clamp(22px, calc(3 * var(--vw)), 30px); border-bottom:1px solid rgb(var(--c-ink-rgb) / .12); }
html:root .art__title{ order:1; margin:0 0 clamp(20px, calc(2.6 * var(--vw)), 28px); font-family:var(--font); font-weight:700; font-size:clamp(2rem, calc(4.4 * var(--vw)), 2.9rem); line-height:1.1 !important; letter-spacing:-.03em; text-transform:none; color:var(--c-ink); text-wrap:balance; }
.art__body .art__kicker{ order:2; display:flex; align-items:center; gap:12px; margin:0; font-family:var(--font) !important; font-size:15px !important; line-height:1.35 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--c-mute) !important; }
.art__kicker img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 16%; }
.art__kicker b{ display:block; font-weight:600; color:var(--c-ink); } .art__kicker i{ display:block; font-style:normal; }
.art__body p{ margin:0 0 1.25em; }
.art__body strong{ font-weight:700; color:inherit; }
.art__body .art__lede{ font-size:1.18em; line-height:1.5; letter-spacing:0; color:var(--c-ink); }
.art__body .art__beats{ padding-left:0; border-left:0; line-height:1.62; color:inherit; }
html:root .art__body h3, html:root .art__body h3.art__turn{ margin:2.1em 0 .7em; padding:0; border:0; font-family:var(--font); font-weight:700; font-size:clamp(1.4rem, calc(2.2 * var(--vw)), 1.65rem); line-height:1.22 !important; letter-spacing:-.02em; text-transform:none; color:var(--c-ink); }
html:root .art__body h3.art__turn{ margin-top:0; }
html:root .art__body h3.art__turn::before{ content:"\00b7\2002\00b7\2002\00b7"; display:block; margin:1.9em 0 1.5em; text-align:center; font-weight:400; font-size:1.2em; letter-spacing:.2em; color:var(--c-mute); }
.art__body blockquote{ margin:1.5em 0 1.6em; padding:0 0 0 22px; border-left:3px solid var(--c-ink); }
.art__body blockquote p{ font-size:1.22em; font-style:italic; font-weight:400; line-height:1.42; letter-spacing:0; color:var(--c-ink); }
.art__swap{ margin:0 0 1.1em; padding:0 0 0 22px; border-radius:0; background:none; border-left:1px solid rgb(var(--c-ink-rgb) / .2); }
.art__swap p:first-child{ color:var(--c-mute); } .art__swap p:first-child strong{ font-weight:400; font-style:italic; } .art__swap p + p{ margin-top:2px; }
.art__asks{ list-style:disc; margin:0 0 1.3em; padding-left:1.3em; }
.art__asks li{ padding:0; margin:.3em 0; border:0 !important; font-weight:400; font-style:italic; color:inherit; }
.art__asks li::before{ content:none; }
.art__zip{ display:block; margin:0 0 1.3em; }
.art__zip > div{ display:block; margin:0 0 .5em; padding:0 0 0 1.3em; border-radius:0; background:none; text-indent:-1.3em; }
.art__zip dt{ display:inline; height:auto; padding:0; border-radius:0; background:none; color:var(--c-accent); font-family:var(--font); font-weight:700; font-size:1em; }
.art__zip dt::after{ content:"\2002\2002"; color:var(--c-mute); font-weight:400; }
.art__zip dd{ display:inline; }
.art__flow{ display:block; margin:.1em 0 1.3em !important; font-family:var(--font); font-size:.86em; font-weight:600; line-height:1.7; letter-spacing:0; text-transform:none; color:var(--c-ink); }
.art__flow span, .art__flow--was span{ display:inline; padding:0; border-radius:0; background:none; color:inherit; }
.art__flow span:not(:last-child){ margin-right:0; }
.art__flow span:not(:last-child)::after, .art__flow--was span:not(:last-child)::after{ content:"\2002\2192\2002"; position:static; width:auto; translate:none; font-size:1em; font-weight:400; color:var(--c-accent); }
.art__flow--was{ color:var(--c-mute); font-weight:500; } .art__flow--was span:not(:last-child)::after{ color:var(--c-mute); }
.art__body .art__end{ margin:1.6em 0 0; font-size:1.22em; font-style:italic; font-weight:600; line-height:1.4; letter-spacing:0; color:var(--c-ink); }
.art__sources{ font-family:var(--font); }
.art__body a:not(.art__next){ color:var(--c-accent); }
@media (max-width:560px){ .art__body{ font-size:18.5px; } .art__flow{ font-size:.84em; } .art__flow span:not(:last-child){ margin-right:0; } }
html:root .art__title{ font-weight:700 !important; }
html:root .art__body h3, html:root .art__body h3.art__turn{ font-weight:700 !important; }
.art__av{ position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--c-surface); }
.art__kicker .art__av img{ position:absolute; left:-36px; top:-88px; width:116px; height:auto; max-width:none; border-radius:0; object-fit:fill; }

/* v283: no byline; the article is set in the site's own text face (Inter) instead of a serif. Emphasis is by weight, not
   by slanted letters. */
.art__body{ font-family:var(--font); font-size:clamp(17.5px, calc(1.3 * var(--vw)), 19px); line-height:1.7; letter-spacing:-.011em; color:#26262b; }
.art__head{ margin-bottom:clamp(26px, calc(4 * var(--vw)), 40px); padding-bottom:clamp(22px, calc(3 * var(--vw)), 30px); }
html:root .art__title{ margin-bottom:0; }
.art__body p{ margin:0 0 1.2em; }
.art__body strong{ font-weight:600; color:var(--c-ink); }
.art__body em, .art__body i{ font-style:normal; font-weight:500; color:var(--c-ink); }
.art__body .art__lede{ font-size:1.2em; line-height:1.5; letter-spacing:-.015em; }
.art__body .art__beats{ line-height:1.7; }
.art__body blockquote p{ font-size:1.2em; font-style:normal; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.art__swap p:first-child strong{ font-style:normal; font-weight:400; }
.art__asks li{ font-style:normal; font-weight:500; color:var(--c-ink); }
.art__flow{ font-size:.95em; }
.art__body .art__end{ font-size:1.2em; font-style:normal; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
@media (max-width:560px){ .art__body{ font-size:17px; } }

/* FLOW v285 — a process line in a write-up is drawn as a flow diagram: numbered stations on one track inside a soft
   panel, the word under each station, and a dashed return line underneath that brings the last station back to the
   first (the process is a loop). A blue marker travels along the track; the part already travelled is blue. Stations can
   be pointed at, clicked, or reached with the keyboard. On phones the track runs downward. */
.art__flow.is-live{ --dot:30px; position:relative; display:grid; grid-template-columns:repeat(var(--count, 6), minmax(0, 1fr)); gap:0; margin:1.1em 0 1.9em !important; padding:26px 10px 52px; border-radius:var(--curve); background:var(--c-bg); font-family:var(--font); font-size:13.5px; font-weight:500; line-height:1.2; letter-spacing:0; text-transform:none; color:var(--c-ink); user-select:none; }
.art__flow.is-live span{ position:relative; display:flex; flex-direction:column; align-items:center; gap:11px; margin:0; padding:0 2px; border-radius:0; background:none; color:rgb(var(--c-ink-rgb) / .62); text-align:center; cursor:pointer; outline:none; transition:color 300ms ease; }
/* the station */
.art__flow.is-live span::before{ content:attr(data-n); position:relative; z-index:2; display:grid; place-items:center; width:var(--dot); height:var(--dot); border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px rgb(var(--c-ink-rgb) / .16); font-size:12px; font-weight:600; color:var(--c-mute); transition:background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, scale 380ms cubic-bezier(.3, 1.5, .5, 1); }
/* the piece of track from this station to the next */
.art__flow.is-live span::after, .art__flow.is-live span:not(:last-child)::after{ content:""; position:absolute; z-index:1; left:50%; top:calc(var(--dot) / 2 - 1px); width:100%; height:2px; margin:0; translate:none; background:linear-gradient(90deg, var(--c-accent) 50%, rgb(var(--c-ink-rgb) / .14) 50%) 100% 0 / 200% 100% no-repeat; transition:background-position 420ms ease; }
.art__flow.is-live span:last-child::after{ content:none; }
.art__flow.is-live span.is-past{ color:var(--c-ink); }
.art__flow.is-live span.is-past::before{ background:var(--c-accent); color:#fff; box-shadow:none; }
.art__flow.is-live span.is-past::after{ background-position:0 0; }
.art__flow.is-live span.is-on{ color:var(--c-accent); font-weight:600; scale:none; background:none; box-shadow:none; }
.art__flow.is-live span.is-on::before{ background:var(--c-accent); color:#fff; scale:1.28; box-shadow:0 0 0 6px color-mix(in srgb, var(--c-accent) 16%, transparent), 0 8px 20px rgba(18, 72, 252, .3); }
.art__flow.is-live span:hover::before{ box-shadow:inset 0 0 0 1.5px var(--c-accent); }
.art__flow.is-live span.is-on:hover::before, .art__flow.is-live span.is-past:hover::before{ box-shadow:0 0 0 6px color-mix(in srgb, var(--c-accent) 16%, transparent); }
.art__flow.is-live span:focus-visible::before{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--c-accent); }
/* the way back from the last station to the first */
.art__flow.is-live::before{ content:""; position:absolute; left:calc(10px + (100% - 20px) / var(--count, 6) / 2); right:calc(10px + (100% - 20px) / var(--count, 6) / 2); bottom:20px; height:18px; border:1.5px dashed rgb(var(--c-ink-rgb) / .28); border-top:0; border-radius:0 0 12px 12px; pointer-events:none; }
.art__flow.is-live::after{ content:"\21BA"; position:absolute; left:50%; bottom:9px; translate:-50% 0; padding:0 10px; background:var(--c-bg); font-size:20px; line-height:1; color:var(--c-accent); pointer-events:none; }
@media (max-width:620px){
  .art__flow.is-live{ --dot:28px; grid-template-columns:1fr; padding:18px 18px 18px 16px; font-size:15px; }
  .art__flow.is-live span{ flex-direction:row; gap:14px; padding:7px 0; text-align:left; }
  .art__flow.is-live span::after, .art__flow.is-live span:not(:last-child)::after{ left:calc(var(--dot) / 2 - 1px); top:50%; width:2px; height:100%; background:linear-gradient(180deg, var(--c-accent) 50%, rgb(var(--c-ink-rgb) / .14) 50%) 0 100% / 100% 200% no-repeat; }
  .art__flow.is-live span.is-past::after{ background-position:0 0; }
  .art__flow.is-live::before{ left:auto; right:16px; top:calc(18px + 21px); bottom:calc(18px + 21px); width:16px; height:auto; border:1.5px dashed rgb(var(--c-ink-rgb) / .28); border-left:0; border-radius:0 12px 12px 0; }
  .art__flow.is-live::after{ left:auto; right:6px; bottom:50%; translate:0 50%; padding:6px 0; }
}
@media (prefers-reduced-motion:reduce){ .art__flow.is-live span, .art__flow.is-live span::before, .art__flow.is-live span::after{ transition:none; } }

/* v285: the write-up pop-up is wider, and the text column with it */
dialog.art{ width:min(1180px, calc(calc(100 * var(--vw)) - 48px)); }
.art__body{ max-width:780px; }
@media (max-width:560px){ dialog.art{ width:auto; } }
.art__body{ max-width:calc(780px + 2 * clamp(20px, calc(5 * var(--vw)), 64px)); }

/* POP-UPS v286 — one chrome for every pop-up (case study, game, write-up, picture viewer): a 56px cream bar with a thin
   line under it, a display label at the left saying what is open, and the same close button at the right: a 38px white
   circle with the same cross, blue under the mouse. */
.cs__bar, dialog.game-sheet .cs__bar, .art__bar{ height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 clamp(12px, calc(1.6 * var(--vw)), 22px) 0 clamp(20px, calc(3 * var(--vw)), 44px); background:rgba(239, 236, 229, .9) !important; border-bottom:1px solid rgba(0, 0, 0, .1) !important; -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.cs__bar .cs__close{ order:2; margin-left:auto; }
.cs__bar #csTitle, .cs__bar .sr-only{ position:static !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; clip:auto !important; clip-path:none !important; white-space:nowrap !important; }
.cs__bar #csTitle, .cs__bar::before, .art__where{ font-family:var(--display) !important; font-size:17px !important; font-weight:400 !important; line-height:1 !important; letter-spacing:.05em !important; text-transform:uppercase; color:var(--c-ink); }
.cs__bar #csTitle::before{ content:"Case study \00b7 "; }
dialog.game-sheet .cs__bar::before{ content:"Game \00b7 Cell-O"; }
.cs__close, dialog.game-sheet .cs__close, .art__close, .pview .cs__close{ flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:0 !important; border-radius:50% !important; background:#fff !important; color:var(--c-ink) !important; box-shadow:0 1px 2px rgba(0, 0, 0, .1) !important; cursor:pointer; transition:background-color 180ms ease, color 180ms ease; }
:is(.cs__close, .art__close) svg{ width:13px; height:13px; stroke-width:1.6; }
:is(.cs__close, .art__close):hover{ background:#1248fc !important; color:#fff !important; }
:is(.cs__close, .art__close):focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }
.cs__bar #csTitle::before{ content:"Case study\00a0\00a0\00b7\00a0\00a0"; }
dialog.game-sheet .cs__bar::before{ content:"Game\00a0\00a0\00b7\00a0\00a0 Cell-O"; }
/* the page behind a floating pop-up (picture viewer, write-up) is dimmed and blurred the same way */
dialog.pview::backdrop, dialog.art::backdrop{ background:rgba(11, 11, 13, .55) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pview__frame{ background:#fff; box-shadow:0 40px 120px rgba(0, 0, 20, .35); }
.pview__title{ font-family:var(--font); font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--c-ink); }
.pview__cat{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mute); }
.pview .cs__close{ background:var(--c-bg) !important; box-shadow:none !important; }
.art__close{ background:#fff !important; }
.cs__bar #csTitle::before{ content:"Case study\00a0\00b7\00a0"; }
dialog.game-sheet .cs__bar::before{ content:"Game\00a0\00b7\00a0 Cell-O"; }

/* CROSS v287 — one close button, always at the top left. In every pop-up (case study, game, write-up, picture viewer) the
   cross is the first thing in the top-left corner, with the label right after it. One rule draws all of them, so they
   cannot differ: 38px cream-white circle, hairline ring, 13px cross, blue under the mouse. */
.cs__bar, dialog.game-sheet .cs__bar, .art__bar{ justify-content:flex-start; gap:14px; padding:0 clamp(16px, calc(2.4 * var(--vw)), 32px) 0 clamp(12px, calc(1.4 * var(--vw)), 20px); }
.cs__bar .cs__close, .art__bar .art__close{ order:-1; margin:0; }
dialog .cs__close, dialog .art__close, dialog.game-sheet .cs__close, dialog.pview .cs__close{ flex:0 0 38px; width:38px; height:38px; min-width:0; display:grid; place-items:center; margin:0; padding:0; border:0 !important; border-radius:50% !important; background:#fff !important; color:#0b0b0d !important; box-shadow:0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .08) !important; opacity:1; transform:none; cursor:pointer; transition:background-color 180ms ease, color 180ms ease; }
dialog .cs__close svg, dialog .art__close svg{ display:block; width:13px; height:13px; stroke:currentColor; stroke-width:1.6; fill:none; }
dialog .cs__close:hover, dialog .art__close:hover{ background:#1248fc !important; color:#fff !important; box-shadow:0 0 0 1px #1248fc !important; }
/* the picture viewer: its title row is now on top, cross first */
.pview__frame{ display:flex; flex-direction:column; }
.pview__label{ order:-1; justify-content:flex-start; gap:14px; padding:2px 4px 14px; }
.pview__label .cs__close{ order:-1; }
/* the cross never shows a different ring because it happens to hold the focus when a pop-up opens */
dialog .cs__close:focus, dialog .art__close:focus, dialog .cs__close:focus-visible, dialog .art__close:focus-visible{ outline:none !important; }
dialog .cs__close:focus-visible:not(:hover), dialog .art__close:focus-visible:not(:hover){ box-shadow:0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .08) !important; }
@media (max-width:560px){ dialog.art{ position:fixed; inset:0; width:auto; height:auto; max-height:none; margin:0; border-radius:0; } }

/* QA v288 — fixes from a pass over every page and pop-up in Safari (Mac, iPhone, iPad), Firefox and Chrome */
/* contact form: the small label no longer touches what is typed under it */
.cform__f input{ height:62px; padding:28px 16px 8px; }
.cform__f textarea{ padding-top:30px; }
.cform__f :is(input, textarea):focus + label, .cform__f :is(input, textarea):not(:placeholder-shown) + label{ transform:translateY(-9px) scale(.72); }
/* iPhone: "Read the whole story" was 5px wider than the screen */
@media (max-width:560px){ .hb__btn{ min-height:42px; padding:0 16px !important; font-size:13px !important; } .hb__side{ min-width:0; flex:1 1 0; } }

/* PHONE v290
   Top bar on phones: only the round logo at the left and two blue dashes at the right (they cross into an X when open).
   Tapping the dashes opens the list of pages under the bar, on the bar's own white-to-blue gradient. */
.tn__menu i{ display:none; }
@media (max-width:760px){
  .tn{ justify-content:space-between; }
  .tn__cta{ display:none; }
  .tn__bar, .tn__bar:is(nav){ position:static; flex:0 0 auto; height:auto; padding:0; border-radius:0; background:none !important; box-shadow:none !important; }
  .tn__end{ display:none; }
  .tn__menu{ position:relative; display:block; width:56px; height:56px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tn__menu i{ display:block; position:absolute; right:4px; top:50%; width:40px; height:3px; border-radius:2px; background:#1248fc; transition:translate 260ms cubic-bezier(.2, .8, .2, 1), rotate 260ms cubic-bezier(.2, .8, .2, 1); }
  .tn__menu i:first-child{ translate:0 -7px; } .tn__menu i:last-child{ translate:0 5px; }
  .tn.is-open .tn__menu i:first-child{ translate:0 -1px; rotate:45deg; } .tn.is-open .tn__menu i:last-child{ translate:0 -1px; rotate:-45deg; }
  .tn__bar > .tn__links, .tn__links{ left:0; right:0; top:calc(100% + 10px); padding:8px 24px 10px; border-radius:22px; background:#fff linear-gradient(253deg, #1248fc, #fff 74%); box-shadow:inset 2px 2px 10px rgba(255, 255, 255, .78), 0 20px 44px rgba(0, 0, 40, .2); }
  .tn{ position:fixed; }
  .tn__links a{ padding:16px 0; font-size:20px; color:#000; border-bottom:1px solid rgba(0, 0, 0, .1); }
  .tn__links a:last-child{ border-bottom:0; }
  .tn__menu:focus-visible{ outline:2px solid #1248fc; outline-offset:2px; border-radius:12px; }
}
/* About on phones and small tablets, after maxx-template.webflow.io/about: the portrait is a large picture across the
   page, straight after the rolling card and before the words (it was a small picture at the left). Words unchanged. */
@media (max-width:860px){
  .ab2__grid--intro .ab2__photo{ order:-1; width:100%; max-width:none; aspect-ratio:1 / 1.12; justify-self:stretch; margin-bottom:clamp(18px, 5vw, 32px); }
  .ab2__grid--intro .ab2__photo img{ object-position:50% 14%; }
}
/* About story v292: the 2019, 2022 and 2024 stops each carry one of the user's own photographs, standing to the right of
   the words at the height of the year and its paragraph, shown whole. On phones the picture follows the paragraph. */
.yr__item--pic{ display:flex; align-items:flex-start; gap:max(calc(4.4 * var(--vw)), 40px); width:auto; }
.yr__item--pic .yr__text{ flex:none; width:max(calc(32 * var(--vw)), 420px); }
.yr__pic{ --h:min(calc(26 * var(--vw)), calc(56 * var(--svh))); position:relative; flex:none; margin:44px 0 0; height:var(--h); width:calc(var(--h) * var(--r)); border-radius:var(--curve); overflow:hidden; background:rgb(var(--c-ink-rgb) / .06); }
.yr__pic img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .yr__item--pic{ display:block; }
  .yr__item--pic .yr__text{ width:auto; }
  .yr__pic{ margin:24px 0 0; width:100%; height:auto; aspect-ratio:var(--ar); }
}
@media print{ .yr__pic{ display:none; } }
/* About story v293: the photographs are larger scenes between the years (nearly the height of the pinned screen). Each one
   opens with a wipe as it arrives and its picture drifts a little inside the frame while the row travels (set by yearsRow). */
@media (min-width:761px){
  .yr__pic{ --h:min(calc(34 * var(--vw)), calc(70 * var(--svh))); margin-top:0; }
  .yr__item--pic{ gap:max(calc(3.6 * var(--vw)), 36px); }
  .yr--fx .yr__pic{ clip-path:inset(0 100% 0 0 round var(--curve)); transition:clip-path 1100ms cubic-bezier(.2, .8, .2, 1); }
  .yr--fx .yr__pic.is-in{ clip-path:inset(0 0 0 0 round var(--curve)); }
  .yr--fx .yr__pic img{ inset:0 -3%; width:106%; max-width:none; transform:translate3d(calc(var(--px, 0) * 2.8%), 0, 0); will-change:transform; }
}
/* About story v297: with a mouse the row is type only. Pointing at a stop that has a photograph opens the photograph
   in the row itself, to the right of that stop's words: the later years slide along to make room, so it covers neither
   the words nor the year, and it closes again when the pointer leaves. Touch screens keep the photographs open. */
.yr--hover .yr__item--pic{ gap:0; }
.yr--hover .yr__pic{ --h:min(calc(26 * var(--vw)), calc(56 * var(--svh))); --w:calc(var(--h) * var(--r)); width:0; margin:44px 0 0; opacity:0; clip-path:none; background:none;
  transition:width 620ms cubic-bezier(.3, .7, .2, 1), margin-left 620ms cubic-bezier(.3, .7, .2, 1), opacity 320ms ease; }
.yr--hover .yr__pic img{ inset:0 auto 0 0; width:var(--w); max-width:none; transform:none; }
.yr--hover .yr__item--pic.is-hot .yr__pic{ width:var(--w); margin-left:max(calc(3 * var(--vw)), 32px); opacity:1; }

/* no single word left alone on the last line of any text (the user's rule). :where keeps this the weakest rule, so blocks set
   to text-wrap:balance keep it; site.js also joins the last two words of each block for browsers without 'pretty' */
:where(p, li, dd, dt, figcaption, blockquote, h1, h2, h3, h4, h5, h6){ text-wrap:pretty; }

/* ONE BUTTON (v304): the user found two kinds of button confusing ("use only one type"). The white secondary pill is gone;
   every button is the primary one: blue pill, Inter 15px capitals, the inner light, grows 4% under the mouse */
.hb__btn, .gthumb__btn, .cp__links a{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--btn-h) !important; padding:0 26px !important; border:0 !important; border-radius:999px !important;
  background:#1248fc !important; color:#fff !important; box-shadow:inset 0 0 5px rgba(255, 255, 255, .78) !important; font-family:var(--font) !important; font-size:15px !important; font-weight:400 !important;
  letter-spacing:0 !important; text-transform:uppercase !important; text-decoration:none; transition:scale 200ms ease !important; }
.hb__btn:hover, .gthumb:hover .gthumb__btn, .cp__links a:hover{ background:#1248fc !important; color:#fff !important; scale:1.04; }

/* writing list: the arrow in the circle is drawn (it was the → character, whose ink sat about 1px low and off-centre);
   the drawing's middle is the circle's middle, so it stays centred when it turns on hover */
.wrow__go svg{ display:block; width:clamp(16px, calc(1.5 * var(--vw)), 20px); height:auto; }

/* home, "Not just interfaces…": the space above it (from the last project card) was twice the space below it (to the
   POSTERS line), because the section's own top padding came on top of the projects' bottom padding. Without it the two
   gaps are equal at every window size */
html:root .rv-say{ padding-top:0; }

/* PLAY v311: trailer play button in the Instagram Reels "paused" look the user asked for: dark see-through circle
   with a soft blur, no white rim or shine, solid white triangle with rounded corners, centred by its centre of mass; v313: nudged 2px left (outline was 4px right of centre and still read off) */
html:root .game__play-btn{ width:80px; height:80px; margin:-40px 0 0 -40px; background:rgba(0,0,0,.38); border:0;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:none; }
html:root .game__play-btn svg{ width:42px; height:42px; margin-left:-4px; overflow:visible; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
html:root .game__play-btn svg path{ stroke:currentColor; stroke-width:2.4; stroke-linejoin:round; }
html:root .game__play:hover .game__play-btn{ background:rgba(0,0,0,.5); transform:scale(1.04); }
@media (max-width:560px){ html:root .game__play-btn{ width:64px; height:64px; margin:-32px 0 0 -32px; } html:root .game__play-btn svg{ width:34px; height:34px; margin-left:-3px; } }

/* LAB ROW v314: the "21 pieces" count was removed (user); the list is left-aligned. Laptop: "Off the clock" at
   the left edge, the list starting at the middle of the page. Phone: the list alone, from the left edge */
html:root .lab2__row{ grid-template-columns:1fr 1fr; }
html:root .lab2__row span:nth-child(2){ text-align:right; justify-self:end; }
@media (max-width:760px){ html:root .lab2__row{ grid-template-columns:1fr; } }

/* LAB SHELVES v315: the "Posters" and "Illustrations" labels were removed (user); the two rows now sit together
   as one wall, a little more apart than the tiles so the scroll tilt never lets them touch. The #posters and
   #illustrations anchors moved onto the rows themselves */
.shelf + .shelf{ margin-top:clamp(20px, calc(2.4 * var(--vw)), 32px); }

/* ESSAY PIECES v317: the user asked for "a few things like" the flow loop and the dot divider through the write-up,
   "not exactly but new ways". Each piece is built from the sentences it replaces (the words are the user's, unchanged):
   .ax-under (what I see / underneath), .ax-table (everything on the table, draggable), .ax-rel (things or relationships),
   .ax-harden (a problem statement hardening), .ax-ripple (tap to intervene) and three dividers (.ax-rule). They share
   the flow panel's look: cream panel, 14px corners, Inter, one blue. JS adds .is-seen when a piece scrolls into view. */
.art__body .ax{ position:relative; margin:1.3em 0 1.8em; padding:0; border-radius:var(--curve); background:var(--c-bg); font-family:var(--font); }
.art__body .ax__label{ display:block; margin:0; font-family:var(--font); font-size:13px; font-weight:400; line-height:1.4; letter-spacing:.05em; text-transform:uppercase; color:var(--c-mute); }

/* what I see, and what is underneath: the sentences split at a waterline; the reasons rise into view */
.art__body .ax-under{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:22px; padding:20px 22px 24px; }
.ax-under__top{ grid-column:1 / -1; grid-row:1; margin-bottom:6px !important; }
.ax-under__low{ position:absolute; left:22px; top:var(--wl, 50%); translate:0 -50%; padding-right:12px; background:var(--c-bg); z-index:1; color:var(--c-accent) !important; }
.art__body .ax-under__col{ grid-row:2; display:grid; grid-template-rows:auto 1fr; margin:0; font-size:16px; line-height:1.5; }
.ax-under__col b{ display:flex; align-items:flex-end; min-height:2.6em; padding-bottom:44px; font-weight:600; line-height:1.3; color:var(--c-ink); transition:color 200ms ease; }
.ax-under__col span{ position:relative; padding-top:16px; color:#45434a; transition:opacity 700ms ease, translate 700ms cubic-bezier(.2, .8, .2, 1); }
.ax-under__col span::before{ content:""; position:absolute; left:0; top:-30px; width:2px; height:38px; background:var(--c-accent); transform-origin:50% 0; transition:scale 500ms ease; }
/* the waterline, drawn across the panel through the gap between the two halves (its height is set by JS) */
.ax-under::after{ content:""; position:absolute; left:22px; right:22px; top:var(--wl, 50%); height:0; border-top:1.5px dashed color-mix(in srgb, var(--c-accent) 55%, transparent); pointer-events:none; }
.js .ax-under:not(.is-seen) .ax-under__col span{ opacity:0; translate:0 -14px; }
.js .ax-under:not(.is-seen) .ax-under__col span::before{ scale:1 0; }
.ax-under .ax-under__col:nth-of-type(2) span, .ax-under .ax-under__col:nth-of-type(2) span::before{ transition-delay:250ms; }
.ax-under .ax-under__col:nth-of-type(3) span, .ax-under .ax-under__col:nth-of-type(3) span::before{ transition-delay:500ms; }
.ax-under__col:hover b{ color:var(--c-accent); }
@media (max-width:620px){
  .art__body .ax-under{ grid-template-columns:1fr; padding:16px 18px 18px; }
  .ax-under__top, .ax-under__low{ display:none !important; }
  .ax-under::after{ content:none; }
  .art__body .ax-under__col{ grid-row:auto; display:block; padding:14px 0; border-top:1px solid rgb(var(--c-ink-rgb) / .1); font-size:15.5px; }
  .art__body .ax-under__col:first-of-type{ border-top:0; padding-top:4px; }
  .ax-under__col b{ display:block; min-height:0; padding:0 0 8px; }
  .ax-under__col span{ display:block; padding:0 0 0 14px; }
  .ax-under__col span::before{ top:2px; height:calc(100% - 4px); }
}

/* everything on the table: the nine words as cards tossed on the panel; each can be dragged */
.art__body .ax-table{ padding:0 0 14px; user-select:none; -webkit-user-select:none; }
.ax-table__top{ position:relative; height:280px; }
.ax-table__top span{ position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; rotate:var(--r); padding:9px 16px 8px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .06); font-size:15px; font-weight:500; line-height:1.2; white-space:nowrap; color:var(--c-ink); cursor:grab; touch-action:none;
  transition:opacity 500ms ease, translate 650ms cubic-bezier(.3, 1.4, .5, 1), rotate 300ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease; }
.ax-table__top span:hover{ color:var(--c-accent); }
.ax-table__top span.is-held{ cursor:grabbing; rotate:0deg; z-index:5; box-shadow:0 2px 4px rgba(0, 0, 0, .08), 0 16px 34px rgba(0, 0, 0, .14); transition:opacity 500ms ease, rotate 200ms ease, box-shadow 200ms ease; }
.ax-table__top span.is-moved{ background:var(--c-accent); color:#fff; }
.js .ax-table:not(.is-seen) .ax-table__top span{ opacity:0; translate:-50% -160%; }
.ax-table .ax__label{ text-align:center; }
@media (max-width:620px){ .ax-table__top{ height:330px; } .ax-table__top span{ left:var(--mx); top:var(--my); font-size:14px; padding:8px 13px 7px; } }

/* things, or the relationships between them: a switch above a stage; JS draws the lines between the four */
.art__body .ax-rel{ padding:14px 14px 10px; }
.ax-rel__switch{ display:flex; justify-content:center; gap:6px; }
.ax-rel__switch button{ position:relative; padding:6px 10px 8px; border:0; background:none; font:500 15px/1.2 var(--font); color:var(--c-mute); cursor:pointer; }
.ax-rel__switch button::after{ content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; border-radius:2px; background:var(--c-accent); scale:0 1; transition:scale 300ms ease; }
.ax-rel__switch button[aria-pressed="true"]{ color:var(--c-ink); }
.ax-rel__switch button[aria-pressed="true"]::after{ scale:1 1; }
.ax-rel__switch button:hover{ color:var(--c-accent); }
.ax-rel__switch button:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; border-radius:6px; }
.ax-rel__stage{ position:relative; height:230px; }
.ax-rel__stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ax-rel__stage line{ stroke:var(--c-accent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:4 7; opacity:0; transition:opacity 500ms ease; }
.ax-rel[data-mode="links"] .ax-rel__stage line{ opacity:.85; animation:ax-flow 1.1s linear infinite; }
.ax-rel[data-mode="links"] .ax-rel__stage line:nth-child(even){ animation-direction:reverse; }
@keyframes ax-flow{ to{ stroke-dashoffset:-22; } }
.ax-rel__stage span{ position:absolute; z-index:1; left:var(--x); top:var(--y); translate:-50% -50%; padding:12px 18px 11px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .06); font-size:16px; font-weight:600; line-height:1.2; white-space:nowrap; color:var(--c-ink); transition:background-color 400ms ease, color 400ms ease, box-shadow 400ms ease, scale 500ms cubic-bezier(.3, 1.4, .5, 1); }
.ax-rel[data-mode="links"] .ax-rel__stage span{ scale:.86; color:var(--c-mute); background:var(--c-bg); box-shadow:inset 0 0 0 1.5px rgb(var(--c-ink-rgb) / .14); }
@media (max-width:620px){ .ax-rel__stage{ height:250px; } .ax-rel__stage span{ font-size:14.5px; padding:10px 14px 9px; } }

/* a problem statement hardens: four frames, each a little more solid than the last */
.art__body .ax-harden{ padding:22px 20px 20px; }
.ax-harden ol{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:26px; margin:0; padding:0; list-style:none; }
.ax-harden li{ position:relative; display:flex; flex-direction:column; gap:12px; margin:0; font-size:14.5px; font-weight:500; line-height:1.35; color:var(--c-ink); transition:opacity 500ms ease, translate 600ms cubic-bezier(.2, .8, .2, 1); }
.ax-harden__f{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:7px; aspect-ratio:4 / 3; padding:14px; border-radius:10px; font-style:normal; }
.ax-harden li:not(:last-child) .ax-harden__f::after{ content:"\2192"; position:absolute; right:-20px; top:50%; translate:0 -50%; font-size:16px; line-height:1; color:var(--c-accent); }
.ax-harden__f--1 { rotate:-2deg; }
.ax-harden li:first-child .ax-harden__f::after{ rotate:2deg; right:-21px; }
.ax-harden__f u{ display:block; height:5px; border-radius:3px; background:rgb(var(--c-ink-rgb) / .16); text-decoration:none; }
.ax-harden__f u:nth-of-type(2){ width:82%; } .ax-harden__f u:nth-of-type(3){ width:60%; }
.ax-harden__f b{ display:block; width:55%; height:8px; margin-bottom:4px; border-radius:3px; background:var(--c-ink); }
/* 1 a loose thought: dashed, faint, a little crooked */
.ax-harden__f--1{ border:1.5px dashed rgb(var(--c-ink-rgb) / .3); }
.ax-harden__f--1 u{ background:rgb(var(--c-ink-rgb) / .1); }
/* 2 written down: solid lines of words */
.ax-harden__f--2{ border:1.5px solid rgb(var(--c-ink-rgb) / .2); }
.ax-harden__f--2 u{ background:rgb(var(--c-ink-rgb) / .38); }
/* 3 a slide */
.ax-harden__f--3{ justify-content:flex-start; background:#fff; box-shadow:0 1px 2px rgba(0, 0, 0, .06), 0 8px 20px rgba(0, 0, 0, .07); }
/* 4 the same slide, now guarded */
.ax-harden__f--4{ justify-content:flex-start; background:#fff; box-shadow:0 0 0 2.5px var(--c-accent), 0 8px 20px rgba(18, 72, 252, .18); }
.ax-harden__f em{ position:absolute; right:-9px; bottom:-9px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--c-accent); color:#fff; transition:scale 450ms cubic-bezier(.3, 1.6, .5, 1) 1.3s; }
.ax-harden__f em svg{ width:15px; height:15px; }
.js .ax-harden:not(.is-seen) li{ opacity:0; translate:0 10px; }
.js .ax-harden:not(.is-seen) .ax-harden__f em{ scale:0; }
.ax-harden li:nth-child(2){ transition-delay:300ms; } .ax-harden li:nth-child(3){ transition-delay:600ms; } .ax-harden li:nth-child(4){ transition-delay:900ms; }
@media (max-width:620px){
  .ax-harden ol{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 20px; }
  .ax-harden li:not(:last-child) .ax-harden__f::after{ content:none; }
}

/* tap to intervene: a field of dots; a tap sends a ripple through it and leaves a blue dot behind */
.art__body .ax-ripple{ padding:0 0 14px; overflow:hidden; }
.ax-ripple canvas{ display:block; width:100%; height:230px; cursor:pointer; touch-action:manipulation; }
.ax-ripple .ax__label{ text-align:center; }
@media (max-width:620px){ .ax-ripple canvas{ height:210px; } }

/* dividers, three takes on the dots: linked (a small system), zoom (one dot opens up), dance (they move in turn) */
.art__body .ax-rule{ position:relative; display:flex; justify-content:center; gap:46px; margin:2.4em 0 1.6em; }
html:root .art__body .ax-rule + h3{ margin-top:0; }
.ax-rule i{ position:relative; z-index:1; width:5px; height:5px; border-radius:50%; background:var(--c-mute); }
.ax-rule--link::before{ content:""; position:absolute; left:50%; top:50%; width:102px; height:1px; translate:-51px -50%; background:rgb(var(--c-ink-rgb) / .3); transform-origin:0 50%; transition:scale 900ms ease; }
.js .ax-rule--link:not(.is-seen)::before{ scale:0 1; }
.ax-rule--zoom i:nth-child(2){ background:var(--c-accent); }
.ax-rule--zoom i:nth-child(2)::after{ content:""; position:absolute; inset:-9px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--c-accent); opacity:0; }
.ax-rule--zoom.is-seen i:nth-child(2)::after{ animation:ax-zoom 2.4s ease-out infinite; }
@keyframes ax-zoom{ 0%{ scale:.3; opacity:.9; } 100%{ scale:1.6; opacity:0; } }
.ax-rule--dance.is-seen i{ animation:ax-dance 1.8s cubic-bezier(.4, 0, .2, 1) infinite; }
.ax-rule--dance.is-seen i:nth-child(2){ animation-delay:.18s; } .ax-rule--dance.is-seen i:nth-child(3){ animation-delay:.36s; }
@keyframes ax-dance{ 0%, 55%, 100%{ translate:0 0; background:var(--c-mute); } 20%{ translate:0 -9px; background:var(--c-accent); } }
html:root .art__body .ax-rule + h3.art__turn::before{ content:none; }

@media (prefers-reduced-motion:reduce){
  .ax *, .ax *::before, .ax *::after, .ax-rule *, .ax-rule::before, .ax-rule *::after{ transition:none !important; animation:none !important; }
  .js .ax-under:not(.is-seen) .ax-under__col span, .js .ax-harden:not(.is-seen) li{ opacity:1; translate:none; }
  .js .ax-under:not(.is-seen) .ax-under__col span::before, .js .ax-harden:not(.is-seen) .ax-harden__f em, .js .ax-rule--link:not(.is-seen)::before{ scale:none; }
  .js .ax-table:not(.is-seen) .ax-table__top span{ opacity:1; translate:-50% -50%; }
}
/* v317b: the three columns share one grid, so every "what I see" line ends on the same row and the ticks line up */
@media (min-width:621px){
  .art__body .ax-under{ grid-template-rows:auto auto auto; }
  .art__body .ax-under__col{ display:contents; }
  .ax-under__col b{ grid-row:2; }
  .ax-under__col span{ grid-row:3; }
  .ax-under__col:nth-of-type(1) b, .ax-under__col:nth-of-type(1) span{ grid-column:1; }
  .ax-under__col:nth-of-type(2) b, .ax-under__col:nth-of-type(2) span{ grid-column:2; }
  .ax-under__col:nth-of-type(3) b, .ax-under__col:nth-of-type(3) span{ grid-column:3; }
  .ax-under__col b:hover{ color:var(--c-accent); }
}
/* v317c: "Underneath" sits at the right end of the waterline, clear of the first tick; the phone table is a little taller */
.ax-under__low{ left:auto; right:22px; padding:0 0 0 12px; }
@media (max-width:620px){ .ax-table__top{ height:340px; } }
/* v318: user "poor alignment redo". Four clean rows on one grid: WHAT I SEE / the three things, top-aligned /
   one unbroken dashed waterline carrying UNDERNEATH / the three reasons, top-aligned. No ticks. */
@media (min-width:621px){
  .art__body .ax-under{ grid-template-rows:auto auto auto auto; padding:22px 24px 26px; column-gap:28px; }
  .art__body .ax-under::after{ content:none; }
  .ax-under__top{ grid-row:1; margin:0 0 10px !important; }
  .art__body .ax-under__low{ position:static; grid-column:1 / -1; grid-row:3; translate:none; margin:18px 0 12px !important; padding:12px 0 0; background:none; border-top:1.5px dashed color-mix(in srgb, var(--c-accent) 50%, transparent); }
  .ax-under__col b{ grid-row:2; display:block; align-self:start; min-height:0; padding:0; }
  .ax-under__col span{ grid-row:4; align-self:start; padding:0; font-size:15px; line-height:1.55; text-wrap:wrap; }
  .ax-under__col span::before{ content:none; }
}
/* v321: the essay bar names the essay itself (user); a long title is cut with an ellipsis on narrow screens */
.art__where{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){ html:root .art__where{ font-size:min(15px, calc(3.75 * var(--vw))) !important; letter-spacing:.03em !important; } }