/* NOku — design B (reference: macmillan.studio). Pixel display + grotesk, grey/lime/black, film grain, ghost watermarks. */
:root {
  --black: #000;
  --ink: #111;
  --white: #fff;
  --grey: #d3d6da;
  --grey-d: #818388;
  --lime: #e3fc21;
  --magenta: #f0f;
  --blue: #1057ff;
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m: clamp(16px, 1.15vw, 22px);           /* page margin */
  --g: clamp(12px, 1.1vw, 20px);            /* gutter */
  --col: calc((100vw - var(--m) * 2 - var(--g) * 11) / 12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --bg: var(--grey);
  --fg: var(--black);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--bg); color: var(--fg);
  font: 500 clamp(16px, 1.5vw, 26px)/1.22 var(--sans); letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body[data-tone="dark"] { --bg: var(--grey-d); }
body[data-tone="lime"] { --bg: var(--lime); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--black); color: var(--lime); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* ---------- film grain (the "filigrana") ---------- */
.grain {
  position: fixed; inset: -100px; z-index: 500; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
.grain.light { mix-blend-mode: screen; opacity: .12; filter: invert(1); }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-38px, 22px); } 40% { transform: translate(24px, -40px); }
  60% { transform: translate(-16px, 44px); } 80% { transform: translate(40px, 12px); } 100% { transform: translate(0, 0); }
}
/* media get their own, stronger grain */
.gr { position: relative; isolation: isolate; }
.gr::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .35; mix-blend-mode: overlay;
  background-image: inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.px { font-family: var(--pixel); font-weight: 500; text-transform: uppercase; line-height: .86; letter-spacing: -.01em; }
.sq { display: inline-block; width: .5em; height: .5em; background: currentColor; vertical-align: .08em; margin-right: .3em; flex: none; }
.sup { font-size: .55em; vertical-align: .75em; margin-left: .15em; letter-spacing: 0; }
.small { font-size: clamp(12px, .85vw, 15px); letter-spacing: 0; }
.muted { opacity: .55; }
.arr::after { content: "\2197\FE0E"; display: inline-block; margin-left: .25em; font-size: .85em; transition: transform .4s var(--ease); }
a:hover .arr::after, a.arr:hover::after { transform: translate(2px, -2px); }
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease); }
a:hover .ul, a.ul:hover { background-size: 100% 1.5px; }

/* grid helpers */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); }
.c1 { grid-column: 1 / 5; } .c2 { grid-column: 5 / 9; } .c3 { grid-column: 9 / 13; }
.c-wide { grid-column: 5 / 13; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr; row-gap: 14px; } .c1, .c2, .c3, .c-wide { grid-column: 1 / -1; } }

/* reveal */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.pxin { clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(14); }
.pxin.in, .ready .hero .pxin { clip-path: inset(0 0 0 0); }

/* ---------- fixed chrome: logo and menu sit on a solid, blurred bar so they read over any photo ---------- */
.mark { position: fixed; top: var(--m); right: var(--m); z-index: 120; width: clamp(80px, 6.2vw, 110px); display: block; color: #fff; mix-blend-mode: difference; }
.mark svg { width: 100%; height: auto; display: block; }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; padding: 12px var(--m) calc(12px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1.5px solid currentColor; font-weight: 600;
}
.dock__id { grid-column: 1 / 5; display: flex; align-items: center; gap: 10px; }
.dock__id svg { width: 46px; height: auto; flex: none; }
.dock__nav { grid-column: 5 / 9; display: flex; gap: .35em; flex-wrap: wrap; align-items: baseline; }
.dock__nav .sep { margin-left: -.3em; }
.dock__nav a { position: relative; }
.dock__nav a::before { content: ""; position: absolute; left: 0; bottom: -13px; width: 11px; height: 11px; background: currentColor; transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.dock__nav a.is-on::before { transform: none; }
.dock__nav a:hover .ul, .dock__contact a:hover .ul { background-size: 100% 1.5px; }
.dock { transition: transform .7s var(--ease); }
.dock__contact { grid-column: 9 / 11; }
.dock__mini {
  position: absolute; right: var(--m); bottom: calc(100% + 10px); width: 164px; aspect-ratio: 2/1; border-radius: 6px; overflow: hidden; background: var(--black);
  box-shadow: 0 0 0 1.5px currentColor; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .8s var(--ease);
}
.dock__mini.on { opacity: 1; transform: none; pointer-events: auto; }
.dock__mini video { width: 100%; height: 100%; object-fit: cover; }
.dock__mini i { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--black); display: grid; place-items: center; }
.dock__mini i::after { content: ""; width: 7px; height: 7px; background: var(--lime); box-shadow: 4px -4px 0 -1px var(--lime); }
.lang { display: inline-flex; gap: .4em; margin-left: .8em; }
.lang a { opacity: .45; } .lang a[aria-current] { opacity: 1; }
/* inverted chrome over black areas */
body.on-black .dock { color: var(--lime); }
body.on-black .dock__mini { opacity: 0; pointer-events: none; }
.mark { transition: color .5s, opacity .5s, background-color .8s var(--ease); }
body.in-hero .mark, body.in-foot .mark { opacity: 0; pointer-events: none; }
@media (max-width: 800px) {
  .dock { grid-template-columns: 1fr auto; row-gap: 6px; font-size: 15px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dock__id { display: none; }
  .dock__nav { grid-column: 1; } .dock__contact { grid-column: 2; justify-self: end; }
  .dock__nav a::before { bottom: -11px; }
  .dock__mini { display: none; }
  .mark { width: 72px; }
}
/* HubSpot chat launcher: just above the dock (and above the mini showreel while it shows), never over them; when the
   chat is open HubSpot places the panel itself. --dock-h comes from assets/b.js */
html:not(.hs-messages-widget-open) #hubspot-messages-iframe-container:not(:has(.active)) { bottom: var(--dock-h, 56px) !important; transition: bottom .6s var(--ease); }
@media (min-width: 801px) {
  /* in the footer it waits above the ©2011 lines (--copy-h comes from assets/b.js) */
  html:not(.hs-messages-widget-open) body.in-foot #hubspot-messages-iframe-container:not(:has(.active)) { bottom: calc(var(--dock-h, 56px) + var(--m) + var(--copy-h, 60px)) !important; }
  html:not(.hs-messages-widget-open) body:has(.dock__mini.on):not(.on-black):not(.in-foot) #hubspot-messages-iframe-container:not(:has(.active)) { bottom: calc(var(--dock-h, 56px) + 92px) !important; }
}

/* ---------- hero: pinned, the showreel (16:9, never cropped in its box) grows to full screen ---------- */
.hero { height: 240svh; position: relative; }
@media (max-width: 800px) { .hero { height: 180svh; } }  /* a shorter run on phones: a finger swipe covers less than a wheel */
.hero__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0 var(--m); background: var(--bg);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); grid-template-rows: auto auto auto 1fr; }
.hero h1 { display: contents; }
.hero__l1, .hero__l2 { font-size: clamp(64px, 10.2vw, 190px); white-space: nowrap; position: relative; z-index: 3; will-change: transform, opacity; }
.hero__l1 { grid-column: 5 / 13; grid-row: 1; justify-self: end; padding-top: calc(var(--m) * .6); }
.hero__l2 { grid-column: 1 / 13; grid-row: 2; margin-top: .1em; color: #fff; mix-blend-mode: difference; }
.hero .ch { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .04em; }
.hero .ch > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 1s var(--ease); }
.ready .hero .ch > i { transform: none; }
/* the box takes the video's own 16:9 shape and the largest size that fits above the menu bar */
.hero { --reel-ar: 1920 / 910; --reel-inv: 910 / 1920; }  /* showreel proportions (NKU_Showreel-10.26_V2.mp4) */
.hero__slot { grid-column: 5 / 13; grid-row: 2 / 5; justify-self: end; align-self: start; margin-top: .3vw; aspect-ratio: var(--reel-ar);
  height: min(calc(((100vw - var(--m) * 2 - var(--g) * 11) / 12 * 8 + var(--g) * 7) * var(--reel-inv)), calc(100svh - min(10.2vw, 190px) * .98 - var(--m) - 92px)); }
/* the video fills exactly the visible window: whole frame in its box, then the screen above the menu bar */
.hero__video { position: absolute; z-index: 1; overflow: hidden; background: var(--black);
  top: var(--ct, 100%); right: var(--cr, 0); bottom: var(--cb, 0); left: var(--cl, 0); }
.hero__video video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.04); transform: scale(var(--vs, 1)); }
/* the showreel is drawn on a canvas (pixel transition); the <video> stays as its hidden source.
   Without canvas support the video itself shows in the box (no .px-ready class). */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
.px-ready .hero__canvas { display: block; }
.px-ready .hero__video { opacity: 0; }
/* the showreel is a card like the projects: rounded, silent */
.hero__video { border-radius: calc(10px * var(--k, 1)); }
.hero__intro { grid-column: 1 / 5; grid-row: 3; align-self: start; margin-top: clamp(14px, 1.8vw, 34px); max-width: 26ch; position: relative; z-index: 2; font-size: clamp(17px, 1.45vw, 26px); }
.hero__badge { grid-column: 1 / 4; grid-row: 4; align-self: end; justify-self: start; margin-bottom: calc(var(--m) + 74px); position: relative; z-index: 2; }
/* the redacted bar: the words shuffle and now and then get blacked out (assets/b.js) */
.redact { display: inline-block; min-width: 6.6em; padding: .34em .42em .26em; background: var(--black); color: var(--lime); font-size: clamp(16px, 1.55vw, 28px); line-height: 1; white-space: nowrap; }
.hero__fade { transition: opacity .2s linear; }
@keyframes wob { 50% { transform: rotate(8deg); } }
@media (max-width: 800px) {
  .hero__pin { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto 1fr; padding-top: 70px; row-gap: 10px; }
  .hero__l1, .hero__l2, .hero__slot, .hero__intro { grid-column: 1; grid-row: auto; justify-self: start; }
  .hero__l1, .hero__l2 { font-size: 19vw; }
  .hero__slot { width: 100%; height: auto; }
  .hero__intro { margin-top: 6px; max-width: none; }
  .hero__badge { position: absolute; grid-area: auto; top: 76px; right: var(--m); margin: 0; }
  .redact { font-size: 13px; }
}

/* ---------- separators ---------- */
.rule { position: relative; height: 1.5px; background: currentColor; margin: 0 0 14px; }
.rule::before { content: ""; position: absolute; width: 11px; height: 11px; background: currentColor; top: -10px; left: var(--at, 0); }
.rule.end::before { left: auto; right: 0; top: -5px; }

/* ---------- projects: a strip you drag (independent from the page scroll) ---------- */
.works { padding: clamp(90px, 9vw, 160px) 0 clamp(90px, 9vw, 160px); }
.works__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); margin-bottom: clamp(20px, 2vw, 34px); align-items: end; }
.works__head > :first-child { grid-column: 1 / 5; display: flex; align-items: center; }
.works__hint { grid-column: 9 / 13; justify-self: end; opacity: .6; }
.works__head > a { grid-column: 5 / 9; justify-self: start; }
.btn { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; background: var(--lime); color: var(--black); font-weight: 600; padding: .55em 1em .5em; border-radius: 99px;
  box-shadow: 0 0 0 1.5px var(--black); transition: background .25s, color .25s, transform .4s var(--ease); }
.btn .sup { margin-left: 0; }
.btn:hover { background: var(--black); color: var(--lime); transform: translateY(-2px); }
.pcard--all .pcard__img { aspect-ratio: .7; background: var(--lime); color: var(--black); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; position: relative; transition: background .3s, color .3s; }
.pcard--all .px { font-size: clamp(28px, 2.4vw, 46px); line-height: .9; }
.pcard--all .px.big { font-size: clamp(54px, 5vw, 96px); }
.pcard--all .arr-big { position: absolute; right: 16px; top: 12px; font-size: clamp(40px, 3.4vw, 64px); transition: transform .5s var(--ease); }
.pcard--all:hover .pcard__img { background: var(--black); color: var(--lime); }
.pcard--all:hover .arr-big { transform: translate(4px, -4px); }
.drag { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.drag.is-down { cursor: grabbing; }
.drag:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }
.drag__track { display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 22px); padding: 0 var(--m); width: max-content; will-change: transform; }
.pcard { --H: min(62svh, 600px); display: flex; flex-direction: column; gap: 10px; flex: none; color: inherit;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease); }
.pcard__img { height: min(var(--H), var(--nh, 100vh)); aspect-ratio: var(--car, var(--ar)); border-radius: 10px; overflow: hidden; background: var(--black); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1.2s var(--ease); transform: scale(var(--zoom, 1)); }
.pcard:hover { --zoom: 1.05; }
.pcard__cap { display: grid; grid-template-columns: 1fr; row-gap: 2px; max-width: max(100%, 240px); width: 0; min-width: 100%; }
.pcard__cap b { display: block; font: 500 clamp(20px, 1.6vw, 30px)/.95 var(--pixel); text-transform: uppercase; margin-bottom: 4px; }
.pcard__cap span:last-child { opacity: .6; }
@media (max-width: 800px) {
  .works { padding: 56px 0 24px; }
  /* each card keeps its photo's shape: common height, width from the format, capped at 86vw (wider photos get shorter) */
  .drag__track { align-items: center; }
  .pcard { --H: min(58svh, 500px); width: min(86vw, calc(var(--H) * var(--ar))); }
  .pcard__img { width: 100%; height: auto; aspect-ratio: var(--car, var(--ar)); border-radius: 8px; }
  .pcard__cap { width: auto; min-width: 0; max-width: none; }
  .pcard__cap b { font-size: 20px; }
  .pcard--all { --ar: .72; }
  .gr::after { display: none; }
  .grain { opacity: .28; }
  .works__hint { display: none; }
  .works__head > :first-child { grid-column: 1 / -1; } .works__head > a { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
}

/* ---------- section heads ---------- */
.sec { padding: clamp(120px, 14vw, 260px) 0 0; position: relative; }
.sec__title { font-size: clamp(64px, 11vw, 210px); padding: 0 var(--m); }
.sec__hint { margin: clamp(24px, 3vw, 56px) 0 clamp(60px, 7vw, 130px); }
.sec__hint p { text-indent: calc(var(--col) * 1 + var(--g)); max-width: 30ch; font-size: clamp(22px, 2.2vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
@media (max-width: 800px) { .sec__hint p { text-indent: 0; } }

/* ---------- services: stacked sticky sheets ---------- */
.svcs { padding: 0 var(--m); }
.svc { position: sticky; top: calc(var(--i) * 58px + clamp(56px, 4.6vw, 76px)); background: var(--bg); border-top: 1.5px solid var(--black);
  min-height: min(64svh, 600px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); grid-template-rows: 58px auto 1fr; align-content: start; padding-bottom: clamp(30px, 3vw, 56px); }
.svc__head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.svc__head .num { grid-column: 1 / 3; display: flex; align-items: center; gap: 10px; }
.svc__head .num i { width: 14px; height: 14px; background: var(--acc); outline: 1.5px solid var(--black); display: block; }
.svc__head h3 { grid-column: 3 / 7; font: inherit; }
.svc__head .count { grid-column: 7 / 13; justify-self: end; }
.svc__name { grid-column: 1 / 8; grid-row: 2; align-self: start; font-size: clamp(48px, 6.6vw, 128px); padding: clamp(14px, 1.6vw, 28px) 0 0; }
.svc__items { grid-column: 8 / 13; grid-row: 2 / 4; list-style: none; align-self: start; counter-reset: it; padding-top: clamp(14px, 1.6vw, 28px); }
.svc__items li { display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; font-size: clamp(24px, 2.5vw, 46px); line-height: 1.04; letter-spacing: -.03em; padding: .18em 0; border-bottom: 1px solid rgba(0,0,0,.18); }
.svc__items li::before { counter-increment: it; content: "{" counter(it, decimal-leading-zero) "}"; font-size: .4em; letter-spacing: 0; opacity: .5; align-self: center; }
.svc:last-child { min-height: 0; }
@media (max-width: 800px) {
  .svc { grid-template-columns: 1fr 1fr; top: calc(var(--i) * 52px + 8px); grid-template-rows: 52px auto auto auto; padding-bottom: 28px; }
  .svc__head { grid-template-columns: auto 1fr auto; column-gap: 10px; }
  .svc__head .num, .svc__head h3, .svc__head .count { grid-column: auto; }
  .svc__name { grid-column: 1 / -1; grid-row: auto; font-size: 15vw; padding: 10px 0; }
  .svc__items { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- services ticker ---------- */
.ticker { background: var(--black); color: var(--lime); overflow: hidden; padding: clamp(14px, 1.4vw, 24px) 0; margin-top: clamp(20px, 2.4vw, 44px);
  border-top: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black); }
.ticker__track { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 34px); width: max-content; animation: tick 60s linear infinite; }
.ticker span { font: 500 clamp(28px, 3vw, 56px)/1 var(--pixel); text-transform: uppercase; white-space: nowrap; }
.ticker i { width: clamp(10px, .9vw, 16px); height: clamp(10px, .9vw, 16px); background: var(--lime); flex: none; }
.ticker i:nth-of-type(4n+2) { background: var(--magenta); } .ticker i:nth-of-type(4n+3) { background: var(--blue); } .ticker i:nth-of-type(4n) { background: var(--white); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- statement (industries) ---------- */
.statement { padding: clamp(70px, 7vw, 130px) var(--m) clamp(50px, 5vw, 90px); }
.statement p { font-size: clamp(30px, 4.3vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 22ch; margin-left: calc(var(--col) * 2 + var(--g) * 2); }
.statement .w { opacity: .18; transition: opacity .25s linear; }
.statement .w.on { opacity: 1; }
.statement .px { font-size: 1.08em; display: inline; line-height: .9; background: var(--black); color: var(--lime); padding: 0 .12em; }
@media (max-width: 800px) { .statement p { margin-left: 0; } }

/* ---------- lime: clients, compact wall with every logo ---------- */
.clients { padding: clamp(60px, 6vw, 110px) 0 clamp(50px, 5vw, 90px); position: relative; overflow: hidden; }
.clients__head { align-items: end; margin-bottom: clamp(28px, 3vw, 52px); }
.clients__head h2 { grid-column: 1 / 7; font-size: clamp(44px, 5vw, 96px); }
.clients__head p { grid-column: 7 / 11; max-width: 30ch; }
/* clients: censored wall, revealed by a flashlight */
body[data-tone="black"] { --bg: var(--black); --fg: var(--lime); }
.clients { color: var(--fg); }
.secret { position: relative; padding: 0 var(--m); --mx: 50%; --my: 50%; --r: clamp(110px, 12vw, 200px); cursor: crosshair; touch-action: pan-y; }
.secret__grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.secret { overflow: hidden; }
/* the flashlight: a soft round window that only moves (transforms, no repaint), showing the lit copy of the wall
   counter-moved inside it so the two layers stay aligned (assets/b.js) */
.secret__beam { position: absolute; z-index: 3; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; overflow: hidden; pointer-events: none; will-change: transform;
  -webkit-mask: radial-gradient(circle closest-side, #000 55%, transparent 100%); mask: radial-gradient(circle closest-side, #000 55%, transparent 100%); }
.secret__lit { position: absolute; left: 0; top: 0; width: var(--gw, 100%); will-change: transform; }
.ct { position: relative; aspect-ratio: 16 / 10; min-width: 0; overflow: hidden; border-radius: 4px; background: #0e0e0e; }
/* every logo sits in the same box, at a size its pixels can hold */
.ct img { position: absolute; left: 14%; top: 24%; width: 72%; height: 52%; object-fit: contain; image-rendering: auto; filter: brightness(0) invert(1); opacity: .1; }
.ct.found img { opacity: .22; }
.secret__lit .ct { background: var(--lime); }
.secret__lit .ct img { filter: brightness(0); opacity: 1; }
/* hover: the tile lifts and tilts after the pointer, lime with the logo in black (in negative inside the flashlight), and a
   wave runs through the tiles around it (assets/b.js) */
.ct { transform: perspective(600px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .6s var(--ease), background-color .3s, box-shadow .5s var(--ease); }
.ct img { transition: transform .6s var(--ease); }
/* solid logos keep their inner details: greyscale instead of a flat colour */
.ct.fill img { filter: grayscale(1) brightness(1.5); }
.secret__lit .ct.fill img { filter: grayscale(1) contrast(1.25); }
.secret .ct.hot { z-index: 2; background: var(--lime); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .8); transform: perspective(600px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.16);
  transition: transform .2s ease-out, background-color .12s, box-shadow .3s; }
.secret .ct.hot img { filter: brightness(0); opacity: 1; transform: scale(1.1); }
.secret .secret__lit .ct.hot { background: var(--black); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .8), 0 0 0 2px var(--black); }
.secret .secret__lit .ct.hot img { filter: brightness(0) invert(1); }
.secret .ct.fill.hot img { filter: none; }
@media (max-width: 1000px) { .secret__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 800px) { .secret__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; } .secret { --r: 90px; } }

/* ad slot that nobody bought (footer, under the mail). Not called "adslot"/"ad-…": ad blockers hide those names */
.unsold { position: relative; margin: clamp(24px, 2.6vw, 44px) 0 0 calc(var(--m) * 1.6 + var(--col) + var(--g)); width: min(540px, 100%); aspect-ratio: 970 / 250;
  border: 1.5px dashed currentColor; display: grid; place-items: center; text-align: center; padding: 26px 16px 14px;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(227,252,33,.07) 12px 13px); }
.unsold__tag { position: absolute; top: 8px; left: 10px; }
.unsold p { font-size: clamp(14px, 1.25vw, 21px); line-height: 1.05; }
.unsold p span { display: block; }
.unsold .cur { display: inline-block; width: .5em; height: .82em; background: currentColor; margin-left: .15em; vertical-align: -.06em; animation: rec 1s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0; } }
@media (max-width: 800px) { .unsold { margin-left: 0; aspect-ratio: auto; padding: 44px 16px 34px; } }
.clients__head .count { grid-column: 11 / 13; justify-self: end; font-size: clamp(44px, 5vw, 96px); font-family: var(--pixel); line-height: .86; }
.wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 0 var(--m); }
.tile { aspect-ratio: 16 / 10; border-radius: 6px; background: var(--black); display: grid; place-items: center; transition: background .25s; }
.tile img { width: 84%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); transition: filter .25s; }
.tile:hover { background: var(--grey-d); }
.tile:hover img { filter: brightness(0); }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .tile { border-radius: 4px; }
  .clients__head h2, .clients__head p, .clients__head .count { grid-column: 1 / -1; justify-self: start; }
}


/* ---------- list w/ giant watermark ---------- */
.more { padding: clamp(120px, 12vw, 220px) 0 clamp(140px, 14vw, 260px); position: relative; overflow: hidden; }
.ghost {
  position: absolute; z-index: 0; pointer-events: none; font-family: var(--pixel); font-weight: 700; line-height: .75; color: var(--lime);
  font-size: clamp(320px, 58vw, 1100px); letter-spacing: -.06em; user-select: none;
}
.more .ghost { left: -1vw; top: clamp(60px, 6vw, 120px); width: 72vw; color: var(--lime); }
.ghost svg { width: 100%; height: auto; display: block; }
.more > *:not(.ghost) { position: relative; z-index: 1; }
.lrow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m) clamp(28px, 3vw, 56px); }
.lrow .rule { grid-column: 3 / 13; --at: calc(50% + var(--g) / 2 - 6px); }
.lrow h3 { grid-column: 3 / 7; font: inherit; }
.lrow ul { grid-column: 7 / 13; list-style: none; }
.lrow li { display: grid; grid-template-columns: 1fr auto; gap: 1em; }
.lrow li span:last-child { font-variant-numeric: tabular-nums; }
/* partner icons (home, "Partner" row): small, in the text colour, in place of the numbers */
.plogo { display: inline-block; width: 1.25em; height: 1em; vertical-align: -.12em; background: currentColor;
  -webkit-mask: var(--src) right center / contain no-repeat; mask: var(--src) right center / contain no-repeat; }
/* the Etc. logo and its strapline (white PNGs from the old site, no margins) as masks, so they take the text colour;
   same width, one above the other */
.etc-logo { display: grid; gap: .45em; width: clamp(92px, 7vw, 132px); }
.etc-logo i { display: block; aspect-ratio: 185 / 89; background: currentColor; -webkit-mask: url(/assets/etc-logo.png) center / contain no-repeat; mask: url(/assets/etc-logo.png) center / contain no-repeat; }
.etc-logo i + i { aspect-ratio: 256 / 130; -webkit-mask-image: url(/assets/etc-strapline.png); mask-image: url(/assets/etc-strapline.png); }
@media (max-width: 800px) { .lrow .rule, .lrow h3, .lrow ul { grid-column: 1 / -1; } .lrow h3 { margin-bottom: 8px; } }

/* ---------- black footer ---------- */
.foot { background: var(--black); color: var(--lime); min-height: 100svh; position: relative; overflow: hidden; padding: var(--m) var(--m) calc(var(--m) + var(--dock-h, 56px)); display: flex; flex-direction: column; }
@media (max-width: 800px) { .foot { padding-bottom: calc(var(--dock-h, 56px) + 56px + env(safe-area-inset-bottom)); } }  /* room above the bottom bar (and Safari's toolbar) */
.foot__ghost { position: absolute; z-index: 0; pointer-events: none; color: #1e1e1e; width: min(64vw, 1100px); right: -4vw; bottom: 6%; will-change: transform; }
.foot__ghost svg { width: 100%; height: auto; display: block; }
.foot > *:not(.foot__ghost) { position: relative; z-index: 1; }
.foot__top { display: flex; justify-content: flex-end; }
.foot__top .open .sq { background: #12c94a; animation: ctx-blink 1.4s steps(2) infinite; }
.foot__mail { font-size: clamp(56px, 10.2vw, 196px); margin-top: .1em; display: block; }
.foot__mail span { display: block; }
.foot__mail { margin-left: calc(var(--m) * 1.6); }
.foot__mail span:nth-child(2) { padding-left: calc(var(--col) + var(--g)); }
.foot__mail span:nth-child(3) { padding-left: calc(var(--col) * 6 + var(--g) * 6 - var(--m) * 1.6); }
.foot__mail:hover span { color: var(--white); }
.foot__mail span { transition: color .2s steps(3); }
.foot__dots { position: absolute; left: calc(var(--m) + 24px); top: 32%; display: grid; gap: 125px; }
.foot__dots i { width: 12px; height: 12px; background: var(--lime); display: block; }
.foot__bottom { margin-top: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
.foot__bottom ul { list-style: none; }
.foot__geo { grid-column: 1 / 5; }
.foot__mailto { grid-column: 5 / 7; align-self: end; }
.foot__social { grid-column: 7 / 9; }
.foot__extra { grid-column: 9 / 11; }
.foot__copy { grid-column: 11 / 13; grid-row: 1 / 3; align-self: end; justify-self: end; text-align: right; }
/* company line + credits: same size as the rest of the footer, two lines under it */
.foot__credits { grid-column: 1 / 11; grid-row: 2; margin-top: 1.2em; }
.foot__credits span { display: block; }
.foot__legal { display: flex; gap: 1em; margin-top: .4em; justify-content: flex-end; }
.nowrap { white-space: nowrap; }
@media (max-width: 800px) {
  .foot__bottom { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .foot__geo, .foot__mailto, .foot__social, .foot__extra, .foot__copy { grid-column: auto; }
  .foot__copy { grid-row: auto; grid-column: 1 / -1; justify-self: start; text-align: left; }
  .foot__copy .foot__legal { justify-content: flex-start; }
  .foot__credits { grid-column: 1 / -1; grid-row: auto; margin-top: 0; font-size: clamp(13px, 3.6vw, 15px); }
  .foot__dots { display: none; }
  .foot__mail span:nth-child(n) { padding-left: 0; }
}

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.crumbs { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.crumbs .sq { margin-right: .5em; }
.crumbs a { opacity: .6; } .crumbs a:hover { opacity: 1; }

/* page header: big pixel title, letters rise in */
.bph { padding: clamp(18px, 1.6vw, 26px) var(--m) clamp(40px, 5vw, 90px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.bph__top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--g); padding-right: calc(clamp(64px, 5.4vw, 92px) + var(--g)); min-height: 30px; }
.bph__title { grid-column: 1 / -1; font-size: clamp(56px, 10.2vw, 190px); margin-top: clamp(60px, 9vw, 170px); overflow-wrap: anywhere; }
.bph .ch, .bmsg .ch { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .04em; }
.bph .ch > i, .bmsg .ch > i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 1s var(--ease); }
.ready .bph .ch > i, .ready .bmsg .ch > i { transform: none; }
.bph__foot { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; margin-top: clamp(20px, 2.4vw, 44px); }
.bph__intro { grid-column: 5 / 10; max-width: 34ch; }
.bph__count { grid-column: 11 / 13; justify-self: end; font-size: clamp(40px, 5vw, 96px); }
@media (max-width: 800px) {
  .bph__title { font-size: 15vw; }
  .bph__intro { grid-column: 1 / -1; } .bph__count { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
  .bph__top { padding-right: 90px; }
}

/* filters */
.fbar { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; gap: var(--g); padding: 12px var(--m); background: var(--bg); border-top: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black); transition: background-color .8s var(--ease); padding-right: calc(clamp(64px, 5.4vw, 92px) + var(--m) * 2); }
.fbar__chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .35em; }
.fbar button { font: inherit; position: relative; padding-left: 0; transition: padding .3s var(--ease); }
.fbar button[aria-pressed="true"] { padding-left: .8em; }
.fbar button[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: .42em; width: .45em; height: .45em; background: currentColor; }
.fbar button:hover { opacity: .6; }
.fbar .sep { margin-left: -.3em; }
.fbar__views { display: flex; align-items: baseline; gap: .35em; flex: none; }
@media (max-width: 800px) { .fbar { flex-direction: column; font-size: 15px; padding-right: var(--m); } }

/* works grid / list */
.wk { padding: clamp(28px, 3vw, 56px) var(--m) clamp(90px, 10vw, 180px); }  /* room before the footer */
.wk[data-view="grid"] .wlist, .wk[data-view="list"] .wgrid { display: none; }
.wgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 72px) var(--g); align-items: start; }
.wcard { display: flex; flex-direction: column; gap: 10px; }
.wcard[hidden], .wlist li[hidden] { display: none; }
.wcard__img { position: relative; aspect-ratio: var(--ar); max-height: min(72svh, var(--nh, 100vh)); max-width: var(--nw, 100%); width: 100%; border-radius: 10px; overflow: hidden; background: var(--black); }
.wcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .5s; }
.wcard__img img.alt { opacity: 0; display: none; }
.wcard__img img.alt.ok { display: block; }
.wcard:hover .wcard__img img { transform: scale(1.04); }
.wcard:hover .wcard__img img.alt { opacity: 1; }
.wcard .pcard__cap { width: auto; min-width: 0; }
.wlist { list-style: none; border-top: 1.5px solid var(--black); }
.wlist a { display: grid; grid-template-columns: 4fr 2fr 3fr auto; gap: var(--g); align-items: baseline; padding: .55em 0; border-bottom: 1px solid rgba(0,0,0,.2); transition: background .25s, padding .4s var(--ease); }
.wrow__name { font: 500 clamp(24px, 2.4vw, 46px)/1 var(--pixel); text-transform: uppercase; }
.wlist a:hover { background: var(--lime); padding-left: .6em; }
.wk__empty { display: none; font-size: clamp(40px, 5vw, 90px); padding: 60px 0; }
.wk__empty.on { display: block; }
/* the preview takes each image's own shape (b.js sets --ar and --k: wider for landscapes, about the same area) */
.bpeek { position: fixed; z-index: 90; left: 0; top: 0; width: calc(clamp(200px, 18vw, 300px) * var(--k, 1)); aspect-ratio: var(--ar, 3 / 4); border-radius: 8px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; background: var(--black); }
.bpeek.on { opacity: 1; }
.bpeek img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 10px; }
  .wlist a { grid-template-columns: 2.6em 1fr; } .wlist a > :nth-child(n+3) { display: none; }
  .bpeek { display: none; }
}

/* project detail */
.wd__pn { display: flex; gap: 1.2em; }
.wd .bph__top { justify-content: flex-start; column-gap: clamp(28px, 3.4vw, 64px); }  /* previous / next sit on the left, after the path */
.wd__meta { margin: 0 0 clamp(36px, 4vw, 70px); }
.wd__meta .rule { grid-column: 1 / -1; }
.wd__meta > div:nth-child(2) { grid-column: 1 / 5; } .wd__meta > div:nth-child(3) { grid-column: 5 / 9; } .wd__meta > div:nth-child(4) { grid-column: 9 / 13; }
.wd__meta p { margin-top: 6px; }
.wcover { margin: 0 var(--m); border-radius: 12px; overflow: hidden; background: var(--black); max-width: min(calc(100% - var(--m) * 2), var(--cw, 100%)); }
.wcover img, .wcover video { width: 100%; height: auto; display: block; }
.wcover video { max-height: 92svh; object-fit: cover; }
/* project cover with a logo beside it ('cover_logo'): the cover keeps its rules, the logo sits at its top right */
.pj__head { --lw: clamp(110px, 11vw, 190px); display: flex; align-items: flex-start; gap: var(--g); padding-right: var(--m); }
.pj__head .wcover { flex: 0 1 auto; margin-right: 0; max-width: min(calc(100% - var(--m) - var(--lw) - var(--g)), var(--cw, 100%)); }
.pj__logo { flex: 0 0 var(--lw); margin: 0; }
.pj__logo img { display: block; width: 100%; height: auto; }
@media (max-width: 800px) {
  .pj__head { --lw: 120px; flex-direction: column; padding-right: 0; }
  .pj__head .wcover { max-width: min(calc(100% - var(--m) * 2), var(--cw, 100%)); }
  .pj__logo { flex: none; width: var(--lw); margin-left: var(--m); }
}
/* project cover: a landscape one spans the page; a portrait or square one starts at the text column (5 of 12), as tall as the screen allows */
.pj .wcover[data-shape="tall"] { margin-left: calc(var(--m) + (100% - var(--m) * 2 + var(--g)) * 4 / 12); max-width: min(calc((100% - var(--m) * 2 + var(--g)) * 8 / 12 - var(--g)), var(--cw, 100%)); }
@media (max-width: 800px) { .pj .wcover[data-shape="tall"] { margin-left: var(--m); max-width: min(calc(100% - var(--m) * 2), var(--cw, 100%)); } }
.wd__back { padding: clamp(50px, 5vw, 90px) var(--m) clamp(90px, 10vw, 180px); font-size: clamp(22px, 2vw, 34px); }
@media (max-width: 800px) { .wd__meta > div:nth-child(n) { grid-column: 1 / -1; margin-top: 10px; } .wd__pn { display: none; } }

/* content blocks: images never larger than their pixels */
.bblocks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px) var(--g); padding: clamp(60px, 7vw, 130px) var(--m) 0; align-items: start; }
.bcol { grid-column: span var(--s, 12); display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 20px); min-width: 0; }
.bh { font: 500 clamp(24px, 2.4vw, 46px)/1.02 var(--sans); letter-spacing: -.03em; }
.bp { max-width: 46ch; }
.bp a, .bh a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1.5px; }
.bimg { display: block; width: 100%; }
.bimg img { width: auto; max-width: 100%; height: auto; border-radius: 10px; display: block; }
.bimg.logo img { max-width: min(100%, 180px); }
.bimg.logo img { border-radius: 0; }
.bvid { border-radius: 10px; overflow: hidden; background: var(--black); }
.bvid video { width: 100%; height: auto; display: block; }
.embed { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: var(--black); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.video { aspect-ratio: 16 / 9; }
.embed.spotify { height: 232px; background: none; }
.embed.audio { height: 180px; background: none; }
.embed.ig { height: clamp(560px, 46vw, 760px); background: var(--white); max-width: 540px; }
.embed.tiktok { aspect-ratio: 9 / 16; height: auto; max-width: 340px; background: var(--black); }  /* TikTok player: the video only */
.embed.page { height: 640px; background: var(--white); }
@media (max-width: 900px) { .bcol { grid-column: span 12; } }

/* next block */


/* rows-only list (contacts, jobs) */
.more.rows-only { padding: clamp(30px, 3vw, 60px) 0 clamp(80px, 8vw, 150px); }
.lrow li p { max-width: 40ch; }

/* form */
.bform { padding: clamp(80px, 9vw, 160px) var(--m); }
body[data-tone="black"] { --bg: var(--black); --fg: var(--lime); }
.bform h2 { font-size: clamp(64px, 10.2vw, 190px); }
.bform form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.4vw, 44px) var(--g); margin-top: clamp(30px, 4vw, 70px); }
.bform label { display: block; }
.bform .full { grid-column: 1 / -1; }
.bform label > .small { display: block; margin-bottom: 8px; opacity: .7; }
.bform input:not([type="checkbox"]), .bform textarea { width: 100%; background: none; border: 0; border-bottom: 1.5px solid currentColor; color: inherit; font: 500 clamp(24px, 2.6vw, 50px)/1.1 var(--sans); letter-spacing: -.03em; padding: 4px 0 10px; border-radius: 0; }
.bform textarea { resize: vertical; min-height: 2.4em; }
.bform input::placeholder, .bform textarea::placeholder { color: currentColor; opacity: .3; }
.bform input:focus, .bform textarea:focus { outline: none; border-bottom-width: 3px; }
.bform .check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; max-width: 70ch; cursor: pointer; }
.bform .check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid currentColor; flex: none; margin-top: 2px; cursor: pointer; }
.bform .check input:checked { background: currentColor; }
.bform__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.bform button[type="submit"] { font: 500 clamp(28px, 3vw, 56px)/1 var(--sans); letter-spacing: -.03em; display: inline-flex; align-items: center; gap: .3em; }
@media (max-width: 800px) { .bform form { grid-template-columns: 1fr; } .bform h2 { font-size: 18vw; } }

/* contacts: a hero whose last word rewrites itself, a fill-in-the-blanks brief, a strip of clients, the next steps */
.ctx-hero__title, .ctx-hero__foot { grid-column: 1 / -1; }
.ctx-status { display: inline-flex; align-items: center; gap: .6em; }
.ctx-status i { width: 8px; height: 8px; background: currentColor; opacity: .35; flex: none; }
.ctx-status.open i { background: #12c94a; opacity: 1; animation: ctx-blink 1.4s steps(2) infinite; }
@keyframes ctx-blink { 50% { opacity: .2; } }
.ctx-hero__title { font-size: clamp(52px, 9.4vw, 180px); margin-top: clamp(70px, 9vw, 170px); line-height: .92; }
.ctx-word { display: inline-block; background: var(--black); color: var(--lime); padding: .02em .1em 0; margin-left: .04em; white-space: nowrap; }
.ctx-word::after { content: ''; display: inline-block; width: .38em; height: .72em; margin-left: .06em; background: currentColor; vertical-align: -.02em; animation: ctx-blink .9s steps(2) infinite; }
.ctx-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; margin-top: clamp(36px, 4.4vw, 80px); align-items: end; }
.ctx-hero .bph__intro { grid-column: 1 / 6; }
.ctx-cta { grid-column: 6 / 13; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ctx-btn { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1em .62em; border: 1.5px solid currentColor; font: inherit; color: inherit; cursor: pointer;
  transition: background-color .2s steps(3), color .2s steps(3), transform .45s var(--ease); }
.ctx-btn small { font-size: .55em; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.ctx-btn:hover { background: var(--black); color: var(--lime); }
.ctx-btn--main { background: var(--black); color: var(--lime); border-color: var(--black); }
.ctx-btn--main:hover { background: var(--lime); color: var(--black); }

.ctx-form__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 32px); margin-bottom: clamp(10px, 1.6vw, 30px); }
.bform.ctx-form h2 { font-size: clamp(46px, 6.6vw, 124px); max-width: 11ch; }
.ctx-meter { display: flex; align-items: center; gap: 14px; }
.ctx-meter__bar { display: flex; gap: 3px; }
.ctx-meter__bar i { width: 14px; height: 14px; border: 1.5px solid currentColor; transition: background-color .25s steps(2); }
.ctx-meter__bar i.on { background: currentColor; }
.ctx-meter b { font: 500 22px/1 var(--pixel); min-width: 3em; text-align: right; }
.ctx-lib { grid-column: 1 / -1; position: relative; font: 500 clamp(26px, 3.3vw, 62px)/1.42 var(--sans); letter-spacing: -.03em; }
.ctx-form .ctx-lib input, .ctx-form .ctx-lib select { display: inline-block; width: auto; max-width: 100%; font: inherit; letter-spacing: inherit; color: inherit; line-height: 1.15;
  padding: 0 .12em .04em; margin: 0 .04em; border: 0; border-bottom: 2px dashed currentColor; border-radius: 0; background: none; vertical-align: baseline;
  -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .2s steps(3), color .2s steps(3); }
.ctx-form .ctx-lib input { cursor: text; }
.ctx-form .ctx-lib input:focus, .ctx-form .ctx-lib select:focus { outline: none; border-bottom-style: solid; border-bottom-width: 3px; }
.ctx-lib select:invalid, .ctx-lib select option[value=""] { color: currentColor; }
.ctx-lib select option { color: var(--black); background: var(--white); }
.ctx-form .ctx-lib .ok { background: var(--lime); color: var(--black); border-bottom-color: var(--lime); }
.ctx-form .bad, .ctx-form .ctx-lib .bad { border-bottom-color: var(--magenta); color: var(--magenta); animation: ctx-shake .4s steps(4); }
.ctx-form .check input.bad { border-color: var(--magenta); }
@keyframes ctx-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.ctx-ruler { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; pointer-events: none; padding: 0 .12em; }
.ctx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ctx-form button[type="submit"] { padding: .18em .4em .22em; margin-right: -.4em; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 100% 0;
  transition: background-size .45s var(--ease), color .2s, transform .45s var(--ease); }
.ctx-form button[type="submit"]:hover, .ctx-form button[type="submit"].ready { background-size: 100% 100%; color: var(--black); }
.ctx-form button[type="submit"].ready { animation: ctx-pulse 1.6s var(--ease) infinite; }
.ctx-form button[type="submit"]:disabled { opacity: .5; cursor: wait; animation: none; }
@keyframes ctx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 252, 33, .55); } 60% { box-shadow: 0 0 0 18px rgba(227, 252, 33, 0); } }
.form__msg a { color: inherit; }
.ctx-done { margin-top: clamp(30px, 4vw, 70px); outline: none; }
.ctx-done .px { font-size: clamp(72px, 13vw, 250px); animation: ctx-in .9s steps(10) both; }
.ctx-done p:last-child { font-size: clamp(22px, 2.2vw, 40px); letter-spacing: -.03em; max-width: 34ch; margin-top: .6em; }
@keyframes ctx-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ctx-bit { position: fixed; z-index: 60; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; }

.ctx-logos { padding: clamp(44px, 4.6vw, 84px) 0; overflow: hidden; }
.ctx-logos > p { padding: 0 var(--m); margin-bottom: clamp(22px, 2.4vw, 40px); }
.ctx-logos__track { display: flex; width: max-content; animation: ctx-run 60s linear infinite; }
.ctx-logos__track > div { display: flex; align-items: center; gap: clamp(36px, 4.4vw, 84px); padding-right: clamp(36px, 4.4vw, 84px); }
.ctx-logos img { width: clamp(92px, 8.4vw, 150px); height: clamp(40px, 3.8vw, 66px); object-fit: contain; filter: brightness(0); }
.ctx-logos:hover .ctx-logos__track { animation-play-state: paused; }
@keyframes ctx-run { to { transform: translateX(-50%); } }

.ctx-steps { padding: clamp(80px, 8vw, 150px) var(--m) 0; }
.ctx-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); margin-top: clamp(24px, 2.4vw, 44px); }
.ctx-steps li { border-top: 1.5px solid currentColor; padding-top: 18px; transition-delay: calc(var(--i) * .12s); }
.ctx-steps li .px { display: block; font-size: clamp(60px, 6.4vw, 120px); margin-bottom: .28em; transition: transform .5s var(--ease); }
.ctx-steps li:hover .px { transform: translateX(.12em); }
.ctx-steps h3 { font-size: clamp(22px, 2vw, 36px); letter-spacing: -.03em; margin-bottom: .45em; }
.ctx-steps p { max-width: 32ch; opacity: .75; }
@media (max-width: 800px) {
  .ctx-hero .bph__intro, .ctx-cta { grid-column: 1 / -1; }
  .ctx-cta { justify-content: flex-start; }
  .ctx-hero__title { font-size: 13.4vw; }
  .bform.ctx-form h2 { font-size: 14vw; }
  .ctx-steps ol { grid-template-columns: 1fr; gap: 44px; }
}
@media (prefers-reduced-motion: reduce) { .ctx-logos__track { animation: none; } .ctx-word::after, .ctx-status.open i { animation: none; } }

/* jobs */

/* side projects */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); padding: 0 var(--m); align-items: start; }
.scard { display: flex; flex-direction: column; gap: 10px; }
.scard__img { border-radius: 12px; overflow: hidden; background: var(--black); aspect-ratio: var(--ar, 4 / 3); max-width: var(--nw, 100%); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.04); }
.scard__name { font-size: clamp(40px, 5vw, 96px); }
@media (max-width: 800px) { .sides { grid-template-columns: 1fr; } }

/* full-screen messages */
.bmsg { min-height: 100svh; padding: clamp(70px, 8vw, 130px) var(--m) calc(var(--m) * 4 + 2em); display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.bmsg.short { min-height: 0; padding-top: clamp(60px, 6vw, 110px); }
.bmsg__title { font-size: clamp(60px, 10.2vw, 190px); margin-top: 14px; position: relative; z-index: 2; }
.bmsg__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px; margin-top: clamp(20px, 2.4vw, 40px); padding-top: 14px; border-top: 1.5px solid currentColor; position: relative; z-index: 2; }
.bmsg__foot > * { grid-column: 5 / 13; }
.bmsg__foot > p { grid-column: 1 / 5; max-width: 30ch; }
.bmsg__foot blockquote { grid-column: 1 / 9; font-size: clamp(24px, 2.6vw, 48px); line-height: 1.02; letter-spacing: -.03em; }
.bmsg__foot cite { display: block; margin-top: 10px; font-style: normal; opacity: .6; }
.cta { justify-self: start; font-size: clamp(26px, 2.8vw, 52px); letter-spacing: -.03em; display: inline-flex; align-items: center; gap: .3em; }
.bmsg__media { position: absolute; z-index: 1; top: clamp(70px, 8vw, 130px); right: var(--m); }
.bmsg__gif { width: min(var(--nw, 640px), 44vw); border-radius: 10px; overflow: hidden; }
.bmsg__gif img { width: 100%; height: auto; display: block; }
.bmsg__media.ast { width: auto; } .bmsg__media.ast img { width: 96px; }
.bmsg__media.a2 { right: auto; left: 46%; top: 42%; }
.bqr { max-width: 280px; background: var(--white); padding: 14px; border-radius: 10px; }
.bqr img { border-radius: 0; image-rendering: pixelated; }
.bframe { background: var(--white); border-radius: 12px; overflow: hidden; }
.bwide { padding: 0 var(--m) clamp(60px, 6vw, 110px); }
.toilet-hero { padding: clamp(18px, 1.6vw, 26px) var(--m) 0; }
.toilet-gif { margin: clamp(50px, 6vw, 100px) auto 0; }
.toilet-gif img { border-radius: 12px; }
.toilet-who { display: flex; justify-content: space-between; align-items: center; gap: var(--g); padding-top: clamp(50px, 5vw, 90px); }
.toilet-who h2 { font-size: clamp(40px, 5vw, 96px); max-width: 12ch; }
.float { animation: bob 5s var(--ease-io) infinite alternate; }
@keyframes bob { from { transform: translateY(-12px) rotate(-3deg); } to { transform: translateY(12px) rotate(3deg); } }
@media (max-width: 800px) {
  .bmsg__media { position: relative; top: auto; right: auto; margin-bottom: 24px; }
  .bmsg__gif { width: min(100%, var(--nw, 100%)); }
  .bmsg__foot > *, .bmsg__foot > p, .bmsg__foot blockquote { grid-column: 1 / -1; }
  .bmsg__title { font-size: 16vw; }
  .bmsg__media.a2 { display: none; }
  .toilet-who { flex-direction: column; align-items: flex-start; }
}

.wrd { white-space: nowrap; display: inline-block; }
.bmsg__media:not(.bmsg__gif):not(.ast) img { width: min(420px, 30vw); height: auto; }
.toilet-who .bimg { width: min(360px, 40vw); flex: none; }
.bform .check input { -webkit-appearance: none; appearance: none; display: inline-block; width: 20px; height: 20px; color: inherit; border: 1.5px solid currentColor; background: transparent; }
.bform .check input:checked { background: currentColor; }
@media (max-width: 800px) { .bmsg__media:not(.bmsg__gif):not(.ast) img { width: min(240px, 60vw); } .toilet-who .bimg { width: min(260px, 70vw); } }

/* ---------- projects page on phones ---------- */
.wrow__thumb, .fbar .ico { display: none; }
@media (max-width: 800px) {
  /* one compact sticky row: view toggle + swipeable filter pills, room on the right for the logo */
  .fbar { flex-direction: row; align-items: center; gap: 10px; padding: 10px 0 10px var(--m); font-size: 14px; }
  .fbar__views { order: -1; gap: 0; border: 1.5px solid currentColor; border-radius: 99px; padding: 2px; flex: none; }
  .fbar__views .sep, .fbar__views .t { display: none; }
  .fbar__views button { width: 32px; height: 28px; border-radius: 99px; display: grid; place-items: center; padding: 0 !important; }
  .fbar__views button::before { display: none; }
  .fbar__views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .fbar .ico { display: block; width: 12px; height: 12px; }
  .ico-grid { background: linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 100% 100% / 5px 5px no-repeat; }
  .ico-list { background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }
  .fbar__chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-right: calc(var(--m) + 82px); scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 128px), transparent calc(100% - 96px)); mask: linear-gradient(90deg, #000 calc(100% - 128px), transparent calc(100% - 96px)); }
  .fbar__chips::-webkit-scrollbar { display: none; }
  .fbar__chips .sep { display: none; }
  .fbar .chip { flex: none; white-space: nowrap; height: 32px; padding: 0 12px !important; border: 1.5px solid currentColor; border-radius: 99px; display: inline-flex; align-items: center; }
  .fbar .chip::before { display: none; }
  .fbar .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .fbar .chip .sup { font-size: .7em; vertical-align: .5em; }

  /* grid: equal 4:5 cards, number on the image, name + client underneath */
  .wk { padding-top: 18px; }
  .wgrid { gap: 22px 10px; }
  .wcard { gap: 8px; }
  .wcard__img { aspect-ratio: 4 / 5 !important; max-width: none; max-height: none; border-radius: 8px; }
  .wcard__img img.alt { display: none !important; }
  .wcard .pcard__cap { display: block; }
  .wcard .pcard__cap > span:last-child { display: none; }
  .wcard .pcard__cap b { font-size: 17px; line-height: 1; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .wcard .pcard__cap > span:first-child { font-size: 13px; color: color-mix(in srgb, var(--fg) 62%, transparent); }
  .wcard .pcard__cap b { color: var(--fg); }

  /* list: thumbnail, name, client */
  .wlist a { grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }
  .wlist a > :nth-child(n+3):not(.arr) { display: none; }
  .wlist a > .wrow__thumb { display: block; width: 56px; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--black); }
  .wlist .wrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .wlist a > .wrow__name { display: block; font-size: 20px; line-height: 1; }
  .wlist a > .arr { display: block; }
  .wlist a:hover { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; } .pxin { clip-path: none; }
  .bph .ch > i, .bmsg .ch > i, .hero .ch > i { transform: none; }
  .statement .w { opacity: 1; }
}
@media (max-width: 800px) {
  .statement .px { line-height: 1.15; }
}
/* square, filled logos (LEGO, Xiaomi) would turn into blank blocks once inked: keep them in greyscale */
.tile img[src*="2025/04/lego"], .tile img[src*="mi@2x"] { filter: grayscale(1) brightness(1.15); }

/* text for search engines and screen readers only */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 404: a full-screen "what is happening?" clip behind a giant 404, a different one at every visit */
.nf { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: var(--black); color: var(--white); text-align: center; }
.nf__media { position: absolute; inset: 0; }
.nf__media video, .nf__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the clips are small: a dot screen and a dark veil turn the enlargement into a texture and keep the text readable */
.nf__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, .6) 1px, transparent 1.7px) 0 0 / 4px 4px, rgba(0, 0, 0, .38); }
.nf__inner { position: relative; z-index: 1; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); padding: 0 var(--m); display: grid; justify-items: center; gap: clamp(10px, 1.6vw, 22px); }
.nf__inner .small { color: var(--lime); }
.nf__code { font-size: clamp(130px, 30vw, 440px); line-height: .78; letter-spacing: -.02em; }
.nf__line { font-size: clamp(20px, 2.4vw, 34px); max-width: 24ch; line-height: 1.15; min-height: 2.3em; }
.nf__cta { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; }
.nf__cta .cta { color: var(--lime); }
.nf__credit { position: absolute; left: var(--m); bottom: calc(var(--m) + 64px); z-index: 1; opacity: .6; }

/* =====================================================================
   PROJECT PAGE — fixed template (data/projects/<slug>.json)
   ===================================================================== */
.pj__facts > div:nth-child(2) { grid-column: 1 / 5; } .pj__facts > div:nth-child(3) { grid-column: 5 / 9; } .pj__facts > div:nth-child(4) { grid-column: 9 / 13; }
.pj__story { padding: clamp(60px, 7vw, 130px) var(--m) 0; display: grid; gap: clamp(36px, 4vw, 72px); }
.pj__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); border-top: 1.5px solid currentColor; padding-top: 14px; }
.pj__label { grid-column: 1 / 5; font-size: clamp(22px, 2vw, 34px); }
.pj__text { grid-column: 5 / 12; font: 500 clamp(22px, 2.1vw, 38px)/1.18 var(--sans); letter-spacing: -.02em; max-width: 34ch; }
.pj__text a { text-decoration: underline; text-underline-offset: .15em; }
.pj__text p + p { margin-top: .7em; }
.pj__text.long { font-size: clamp(18px, 1.45vw, 26px); line-height: 1.3; max-width: 46ch; }
.pj__e iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.pj__nums, .pj__social { padding: clamp(70px, 8vw, 150px) var(--m) 0; }
.pj__nums h2, .pj__social h2 { margin-bottom: 18px; display: flex; align-items: center; gap: .5em; }
.pj__numgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--g); border-top: 1.5px solid currentColor; }
.pj__num { padding-top: 14px; display: grid; gap: 8px; align-content: start; container-type: inline-size; }
.pj__num .px { font-size: min(clamp(64px, 8vw, 150px), calc(100cqi / var(--n, 4) / .56)); line-height: .85; white-space: nowrap; }
.pj__ex { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--magenta); color: var(--white); font-family: var(--sans); vertical-align: middle; }
/* gallery: justified rows (tools/build_b_pages.py gallery_html). Each item grows by its width/height ratio --r from a
   zero basis, so all the items of a line get the same height; .pj__br ends a line, .pj__fill keeps a short line short.
   Rows are planned for two widths: "d" (computer) and "m" (phone). */
.pj__gallery { --gg: clamp(10px, 1.2vw, 20px); display: flex; flex-wrap: wrap; column-gap: var(--gg); row-gap: 0; padding: clamp(70px, 8vw, 150px) var(--m) 0; }
.pj__g { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); margin: 0 0 var(--gg); border-radius: 10px; overflow: hidden; background: var(--black); }
.pj__g img, .pj__g video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj__g.pj__e .embed { height: 100%; border-radius: 0; }
.pj__full { flex: 0 0 100%; aspect-ratio: auto; background: none; }
.pj__br { flex: 0 0 100%; height: 0; }
.pj__fill { flex: var(--r) 1 0; height: 0; }
.pj__br.m, .pj__fill.m { display: none; }
@media (max-width: 800px) {
  .pj__br.d, .pj__fill.d { display: none; }
  .pj__br.m, .pj__fill.m { display: block; }
}
.pj__strip { display: flex; gap: clamp(10px, 1.2vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.pj__s { flex: 0 0 min(340px, 78vw); scroll-snap-align: start; }
.pj__s .embed { max-width: none; width: 100%; }
/* a post that cannot be embedded: a tile of the embed's size that opens it on Instagram */
.pj__link { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: clamp(560px, 46vw, 760px); padding: 20px; border-radius: 10px; background: var(--black); color: var(--lime); font-size: clamp(22px, 1.8vw, 30px); line-height: 1.05; }
.pj__link .small { font-family: var(--sans); color: var(--white); }
.pj__link:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 800px) {
  .pj__facts { grid-template-columns: 1fr 1fr; column-gap: var(--g); }
  .pj__facts > div:nth-child(n) { grid-column: auto; } .pj__facts > div.rule { grid-column: 1 / -1; }
  .pj__row { grid-template-columns: 1fr; row-gap: 10px; }
  .pj__label, .pj__text { grid-column: 1 / -1; }
}

/* works page: a title across the whole width and a clear grid/list switch */
.bph--works .bph__title { font-size: min(calc((100vw - var(--m) * 2) / (var(--n) * .565)), 52svh); line-height: .8; margin-top: clamp(40px, 5vw, 90px); white-space: nowrap; }
/* grid / list: a pill switch, the active view filled */
.fbar__views { align-self: center; gap: 0; border: 1.5px solid currentColor; border-radius: 99px; padding: 3px; }
.fbar__views button { display: inline-flex; align-items: center; gap: .45em; padding: .28em .9em !important; border-radius: 99px; line-height: 1; }
.fbar__views button::before { display: none; }
.fbar__views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.fbar__views button:hover { opacity: 1; }
.fbar__views button[aria-pressed="false"]:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.fbar .ico { display: block; width: 12px; height: 12px; flex: none; }
@media (max-width: 800px) {
  .bph--works .bph__title { margin-top: 26px; }
}
.ico-grid { background: linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
  linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 100% 100% / 5px 5px no-repeat; }
.ico-list { background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat,
  linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }

/* works grid: justified rows — every row as wide as the page and of one height, each cover in its own shape
   (landscape ones wide, portrait ones narrow), newest first left to right; the last row keeps its natural size */
.wgrid { display: flex; flex-wrap: wrap; gap: clamp(30px, 3.2vw, 60px) var(--g); align-items: flex-start; --rh: clamp(230px, 22vw, 360px); }
.wgrid::after { content: ""; flex: 999 1 0; }
.wcard { flex: var(--ar) 1 calc(var(--ar) * var(--rh)); min-width: 0; max-width: calc(var(--ar) * var(--rh) * 1.6); }  /* a cover left alone on a row doesn't blow up */
.wcard .wcard__img { width: 100%; max-width: none; max-height: none; aspect-ratio: var(--car, var(--ar)); }  /* --car: the card's shape (data-nat rewrites --ar) */
@media (max-width: 800px) {
  .wgrid { --rh: 190px; gap: 22px 10px; }
  .wcard .wcard__img { aspect-ratio: var(--car, var(--ar)) !important; }
}

/* works bar: the grid/list switch first, then the filters; the right end stays free for the NOku logo, which sits
   over the bar once it sticks to the top (same width as .mark) */
.fbar { justify-content: flex-start; padding-right: calc(clamp(80px, 6.2vw, 110px) + var(--m) * 2); }
.fbar__views { order: -1; align-self: flex-start; }
/* works list: a thumbnail per row, all of one 3:2 size so the names line up, from the small copies in assets/works/s */
.wlist a { grid-template-columns: 96px 4fr 2fr 3fr auto; align-items: center; }
.wlist a > .wrow__thumb { display: block; width: 96px; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--black); }
.wlist .wrow__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .fbar { padding-right: calc(72px + var(--m) * 2); }
  .fbar__views { align-self: center; }
  .fbar__chips { padding-right: 0; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .wlist a { grid-template-columns: 72px 1fr auto; }
  .wlist a > .wrow__thumb { width: 72px; aspect-ratio: 3 / 2; }
}

/* project page: an interactive piece in place of the cover */
.pj__xp { margin: 0 var(--m); border-radius: 12px; overflow: hidden; background: var(--black); height: min(82svh, 860px); }
.pj__xp { position: relative; }
.pj__xp-fs { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 99px;
  background: var(--lime); color: var(--black); font-weight: 500; box-shadow: 0 2px 14px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.pj__xp-fs:hover { transform: scale(1.05); }
.ico-fs { width: 12px; height: 12px; display: block; background:
  linear-gradient(currentColor 0 0) 0 0 / 5px 2px no-repeat, linear-gradient(currentColor 0 0) 0 0 / 2px 5px no-repeat,
  linear-gradient(currentColor 0 0) 100% 0 / 5px 2px no-repeat, linear-gradient(currentColor 0 0) 100% 0 / 2px 5px no-repeat,
  linear-gradient(currentColor 0 0) 0 100% / 5px 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 2px 5px no-repeat,
  linear-gradient(currentColor 0 0) 100% 100% / 5px 2px no-repeat, linear-gradient(currentColor 0 0) 100% 100% / 2px 5px no-repeat; }
.pj__xp:fullscreen { margin: 0; border-radius: 0; width: 100vw; height: 100vh; }
.pj__xp:fullscreen .pj__xp-fs { display: none; }
.pj__xp iframe { width: 100%; height: 100%; border: 0; display: block; }
.pj__xp-cta { padding: 14px var(--m) 0; font-size: clamp(20px, 1.8vw, 30px); }
@media (max-width: 800px) { .pj__xp { height: 78svh; } }

/* works title drawn as live pixels on a canvas (assets/b.js); the real h1 keeps its place, invisible */
.bph--works { position: relative; }
.bph--works .bph__foot { display: none; }
.wt__cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bph--works.wt-on .bph__title { visibility: hidden; }
/* filters: pills like the grid/list switch, the active one filled */
.fbar__chips { align-items: center; gap: 8px; }
.fbar .sep { display: none; }
.fbar .chip { padding: .32em 1em !important; border: 1.5px solid currentColor; border-radius: 99px; line-height: 1.05; font-size: clamp(15px, 1.15vw, 19px); transition: background-color .2s, color .2s; }
.fbar .chip::before { display: none; }
.fbar .chip:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.fbar .chip[aria-pressed="true"], .fbar .chip[aria-pressed="true"]:hover { background: var(--fg); color: var(--bg); }


/* NDA newsletter: a classified file — stamp, a redacted list that reveals itself, the clauses, sign here */
.nda-hero { min-height: 100svh; padding: clamp(18px, 1.6vw, 26px) var(--m) clamp(70px, 8vw, 140px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.nda-stamp { position: absolute; right: clamp(20px, 8vw, 160px); top: clamp(110px, 16vh, 200px); font-size: clamp(30px, 4.4vw, 84px); color: var(--magenta); border: .09em solid currentColor;
  padding: .12em .3em .05em; transform: rotate(-11deg); opacity: .92; animation: nda-stamp .5s steps(5) .5s both; mix-blend-mode: screen; }
@keyframes nda-stamp { from { transform: rotate(-11deg) scale(2.4); opacity: 0; } to { transform: rotate(-11deg) scale(1); opacity: .92; } }
.nda-hero__title { font-size: clamp(150px, 31vw, 560px); line-height: .78; margin-top: auto; padding-top: clamp(60px, 8vw, 140px); }
.nda-hero__sub { display: inline-flex; align-items: center; margin-top: .25em; font-size: clamp(26px, 4.4vw, 84px); line-height: 1; background: var(--lime); color: var(--black); padding: .14em .24em .08em; }
.nda-caret { display: inline-block; width: .42em; height: .78em; margin-left: .12em; background: currentColor; animation: ctx-blink .9s steps(2) infinite; }
.nda-hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 28px; margin-top: clamp(30px, 4vw, 70px); align-items: end; }
.nda-lead { grid-column: 1 / 6; font-size: clamp(22px, 2.2vw, 40px); line-height: 1.12; letter-spacing: -.03em; max-width: 20ch; }
.nda-hero .nda-form { grid-column: 7 / 13; }
.nda-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; align-items: end; }
.nda-form input { min-width: 0; width: 100%; background: none; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; color: inherit; font: 500 clamp(22px, 2.3vw, 42px)/1.1 var(--sans);
  letter-spacing: -.03em; padding: 4px 0 10px; }
.nda-form input::placeholder { color: currentColor; opacity: .35; }
.nda-form input:focus { outline: none; border-bottom-width: 4px; }
.nda-form button { font: 500 clamp(18px, 1.6vw, 28px)/1 var(--sans); padding: .75em 1.1em; background: var(--lime); color: var(--black); white-space: nowrap; transition: transform .45s var(--ease), background-color .2s steps(3), color .2s steps(3); }
.nda-form button:hover { transform: translateY(-3px) rotate(-1.5deg); background: var(--white); }
.nda-form__note, .nda-form__msg { grid-column: 1 / -1; opacity: .7; }
.nda-form__note a { text-decoration: underline; }
.nda-form__msg:empty { display: none; }
.nda-form__msg { opacity: 1; }
.nda-form.bad input { border-bottom-color: var(--magenta); animation: ctx-shake .4s steps(4); }
.nda-form.done input, .nda-form.done button, .nda-form.done .nda-form__note { display: none; }
.nda-form.done .nda-form__msg { font: 500 clamp(26px, 3vw, 56px)/1.05 var(--sans); letter-spacing: -.03em; animation: ctx-in .7s steps(8) both; }


.nda-doc { padding: clamp(80px, 9vw, 160px) var(--m) clamp(40px, 5vw, 90px); }
.nda-perks { list-style: none; margin-top: clamp(24px, 2.6vw, 48px); border-top: 1.5px solid currentColor; }
.nda-perks li { display: grid; grid-template-columns: clamp(70px, 9vw, 160px) 1fr; gap: var(--g); align-items: baseline; padding: clamp(16px, 1.8vw, 30px) 0; border-bottom: 1.5px solid currentColor; transition-delay: calc(var(--i) * .1s); }
.nda-perks .px { font-size: clamp(34px, 4vw, 76px); }
.nda-perks p { font-size: clamp(24px, 3.2vw, 60px); line-height: 1.08; letter-spacing: -.035em; }
.nda-x { font-weight: 500; background: var(--black); color: transparent; padding: 0 .12em; cursor: help; outline: none; transition: color .25s steps(3), background-color .25s steps(3); }
.nda-x:hover, .nda-x:focus, .nda-perks li.seen .nda-x { color: var(--black); background: var(--lime); }
.nda-rules { padding: clamp(40px, 5vw, 90px) var(--m) clamp(80px, 9vw, 160px); }
.nda-rules h2 { font-size: clamp(54px, 8vw, 150px); }
.nda-rules ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); margin-top: clamp(24px, 3vw, 56px); }
.nda-rules li { border-top: 1.5px solid currentColor; padding-top: 14px; transition-delay: calc(var(--i) * .1s); }
.nda-rules li p { font-size: clamp(20px, 1.8vw, 32px); line-height: 1.12; letter-spacing: -.03em; margin-top: .5em; max-width: 18ch; }
.nda-sign { padding: clamp(80px, 9vw, 160px) var(--m); }
.nda-sign h2 { font-size: clamp(64px, 12vw, 230px); line-height: .85; margin-bottom: clamp(30px, 4vw, 70px); }
.nda-sign .nda-form { max-width: 1000px; }
.nda-sign .nda-form input { border-bottom-style: dashed; }
.nda-sign .nda-form button { background: var(--black); color: var(--lime); }
.nda-sign .nda-form button:hover { background: var(--white); color: var(--black); }
@media (max-width: 800px) {
  .nda-lead, .nda-hero .nda-form { grid-column: 1 / -1; }
  .nda-form { grid-template-columns: 1fr; }
  .nda-form button { justify-self: start; }
  .nda-rules ol { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .nda-stamp { top: 90px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .nda-stamp, .nda-caret { animation: none; } }