/* Layout: a dark Swiss index. Chrome hugs the edges in small grey type, the
   work sits on a 3D spiral in the middle, one huge serif number crops off the
   bottom. Deliberately single-theme: deep black. */
:root {
  --bg: #000000;
  --bg-2: #0b0b0b;
  --bg-3: #151515;
  --fg: #ededed;
  --fg-2: #8c8c8c;
  --fg-3: #4a4a4a;
  --line: rgba(237, 237, 237, 0.1);
  --line-2: rgba(237, 237, 237, 0.22);
  --glass: rgba(14, 14, 14, 0.66);
  --sheet: #f2f1ee;
  --sheet-fg: #111110;
  --sheet-fg-2: #6e6d69;
  --accent: #ffa424;

  --f-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --t-meta: 12.5px;
  --t-ui: 14px;
  --t-body: clamp(16px, 0.3vw + 14.8px, 18px);
  --t-lead: clamp(20px, 1.1vw + 14px, 28px);

  --pad: clamp(16px, 2.2vw, 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
h1, h2, h3, h4, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; touch-action: manipulation; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #0b0b0b; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 14px; background: var(--fg); color: var(--bg); font-size: var(--t-ui); border-radius: 999px; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
.label { font-size: var(--t-meta); font-weight: 400; color: var(--fg-2); letter-spacing: -0.005em; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* ─── stage ────────────────────────────────────────────────────────────── */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none; }
html.no-gl .gl { display: none; }
html.no-gl .views, html.no-gl .bignum { visibility: hidden; }
.bignum {
  position: fixed;
  left: calc(var(--pad) - 0.03em);
  bottom: -0.2em;
  z-index: 3;
  display: flex;
  font-family: var(--f-serif);
  font-size: clamp(200px, 36vw, 620px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(237, 237, 237, 0.075);
  /* printed over the spiral in a clear ink, so the cards never hide it */
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.bignum__d { display: block; height: 1em; overflow: hidden; }
.bignum__strip { display: flex; flex-direction: column; will-change: transform; }
.bignum__strip span { display: block; height: 1em; }
html.is-ready.view-index .bignum { opacity: 1; }

/* ─── header ───────────────────────────────────────────────────────────── */
.top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + var(--pad)) var(--pad) 0;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.brand { justify-self: start; display: grid; font-size: var(--t-ui); line-height: 1.2; }
.brand b { font-weight: 600; transition: text-shadow 0.45s var(--ease); }
.brand:hover b { text-shadow: -1.5px 1px 0 #ff48b0, 1.5px -1px 0 #0078bf; }
.brand span { color: var(--fg-2); }
.views { display: inline-flex; align-items: center; gap: 14px; font-size: var(--t-ui); transition: opacity 0.4s var(--ease), visibility 0s; }
.views__btn { color: var(--fg-3); padding: 10px 0; transition: color 0.4s var(--ease); }
.views__btn[aria-pressed="true"], .views__btn:hover { color: var(--fg); }
.views__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: background-color 0.6s var(--ease); }
.menu-btn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 18px 0 20px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: var(--t-ui);
  transition: border-color 0.4s var(--ease);
}
.menu-btn:hover { border-color: var(--line-2); }
.menu-btn i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transition: transform 0.5s var(--ease), background-color 0.6s var(--ease); }
.menu-btn:hover i { transform: scale(2); }
html.view-project .views, html.view-about .views { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s; }
html:not(.is-ready) .views, html:not(.is-ready) .menu-btn, html:not(.is-ready) .bottom { opacity: 0; pointer-events: none; }
html:not(.is-ready) .view--index > * { opacity: 0; }

/* ─── views ────────────────────────────────────────────────────────────── */
/* a soft black band under the header, so scrolling text never collides with it */
.veil { position: fixed; left: 0; right: 0; top: 0; z-index: 15; height: calc(env(safe-area-inset-top, 0px) + 104px); background: linear-gradient(#000 38%, rgba(0, 0, 0, 0)); pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
html.view-project .veil, html.view-about .veil, html.view-list .veil { opacity: 1; }
.view { position: fixed; inset: 0; z-index: 10; }
.view[hidden] { display: none; }
.view--index { touch-action: none; }
.view--list, .view--project, .view--about { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* index */
.side {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 18px 40px;
  font-size: var(--t-meta);
  line-height: 1.35;
  pointer-events: none;
}
.side p { display: grid; }
.side span + span { color: var(--fg-2); }
.cap {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  width: min(30vw, 440px);
  display: grid;
  justify-items: end;
  gap: 14px;
  text-align: right;
}
.cap__no { font-family: var(--f-serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--fg-2); }
.cap__title { font-size: clamp(40px, 3.9vw, 68px); font-weight: 400; line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }
.cap__title .ln { padding-bottom: 0.06em; }
.cap__kind { font-size: var(--t-ui); color: var(--fg-2); }
.cap__inks { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-meta); color: var(--fg-2); }
.inks { display: inline-flex; }
.inks i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--bg), inset 0 0 0 1px rgba(237, 237, 237, 0.24); }
.inks i + i { margin-left: -3px; }
.p-inks { display: flex; align-items: center; gap: 8px; }
.side { pointer-events: auto; }
.side p:nth-child(3) { grid-column: 1 / -1; }
.side__deal { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--fg-2); transition: color 0.3s; }
.side__deal:hover { color: var(--fg); }
.side__deal i { font-style: normal; display: inline-block; transition: transform 0.6s var(--ease); }
.side__deal:hover i { transform: rotate(-180deg); }
.cap__cta { margin-top: 8px; padding: 6px 0 4px; font-size: var(--t-ui); border-bottom: 1px solid var(--line-2); transition: border-color 0.3s; }
.cap__cta:hover { border-color: var(--fg); }
.focus {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad));
  left: var(--pad);
  right: calc(var(--pad) + 56px);
  display: none;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  text-align: left;
}
.focus__thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: var(--bg-3); }
.focus__thumb img { width: 100%; height: 100%; object-fit: cover; }
.focus__txt { display: grid; min-width: 0; line-height: 1.2; }
.focus__title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus__kind { font-size: 12.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus__no { margin-left: auto; padding-left: 10px; font-family: var(--f-serif); font-style: italic; font-size: 18px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hint { display: none; position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad) + 72px); text-align: center; font-size: var(--t-meta); color: var(--fg-2); pointer-events: none; }

/* list */
.filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: calc(env(safe-area-inset-top, 0px) + var(--pad) + 64px) var(--pad) 0;
}
.filters button { display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; font-size: 13.5px; color: var(--fg-2); transition: color 0.3s, border-color 0.3s; }
.filters button sup { font-family: var(--f-serif); font-style: italic; font-size: 13px; top: -0.35em; }
.filters button:hover { color: var(--fg); }
.filters button[aria-pressed="true"] { color: var(--fg); border-color: var(--line-2); }
.titles {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: clamp(28px, 6vh, 64px) var(--pad) calc(env(safe-area-inset-bottom, 0px) + 120px);
}
.titles li { position: relative; max-width: 100%; }
.titles li[hidden] { display: none; }
.titles a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  max-width: 100%;
  padding: 0.02em 0;
  font-size: clamp(38px, 5.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: var(--fg);
  transition: color 0.45s var(--ease);
}
.titles a sup { font-family: var(--f-serif); font-style: italic; font-size: 20px; letter-spacing: 0; color: var(--fg-2); top: -1.6em; }
.titles:has(a:hover) a { color: var(--fg-3); }
.titles a:hover, .titles a:focus-visible { color: var(--fg); }
.titles .line-mask { display: block; overflow: clip; padding-block: 0.04em; }
.titles .t { display: inline-block; text-shadow: 0 0 0 transparent, 0 0 0 transparent; transition: text-shadow 0.55s var(--ease); }
/* printed twice, a few points out of register, in the poster's own inks */
.titles a:hover .t, .titles li.is-active .t { text-shadow: -0.045em 0.02em 0 var(--i1), 0.04em -0.016em 0 var(--i2); }
.list-meta { position: fixed; left: var(--pad); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad) + 12px); font-size: var(--t-meta); color: var(--fg-2); overflow: hidden; pointer-events: none; }
.list-meta__in { display: inline-block; }
.list-meta__in em { font-family: var(--f-serif); font-size: 20px; color: var(--fg); margin-right: 10px; }
.view--list { mix-blend-mode: difference; }

/* letters that roll on hover */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll__a, .roll__b { display: block; white-space: pre; }
.roll__b { position: absolute; left: 0; top: 100%; }
.roll .ch { display: inline-block; transition: transform 0.55s var(--ease); transition-delay: calc(var(--i) * 16ms); }
a:hover .roll .ch, button:hover .roll .ch { transform: translateY(-100%); }

/* project */
.project { padding: calc(env(safe-area-inset-top, 0px) + 120px) var(--pad) 140px; max-width: 1560px; margin-inline: auto; }
.p-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px clamp(24px, 4vw, 80px); align-items: start; }
.p-intro { position: sticky; top: 120px; display: grid; gap: 28px; }
.p-eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: var(--t-meta); color: var(--fg-2); }
.p-eyebrow b { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 20px; color: var(--accent); transition: color 0.6s var(--ease); }
.p-sample { color: var(--fg-3); }
.p-title { font-size: clamp(52px, 8.2vw, 148px); font-weight: 400; letter-spacing: -0.055em; line-height: 0.92; text-wrap: balance; }
.p-title .ln { padding-bottom: 0.04em; }
.p-line { font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.02em; max-width: 26ch; }
.p-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 32px; font-size: 15px; padding-top: 22px; border-top: 1px solid var(--line); }
.p-meta dt { color: var(--fg-2); }
.p-hero { position: relative; width: min(100%, calc((100svh - 250px) * 0.7072)); max-width: 100%; aspect-ratio: 1024 / 1448; justify-self: end; }
/* the sharp print that takes over from the flying card (same size, same corners) */
.p-print { position: absolute; inset: 0; overflow: hidden; border-radius: 9px; opacity: 0; will-change: transform, opacity; }
.p-print canvas { display: block; width: 100%; height: 100%; }
.p-hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.p-hero__hint { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; font-size: var(--t-meta); color: var(--fg-3); text-align: right; pointer-events: none; }
.loupe { position: absolute; left: 0; top: 0; z-index: 3; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; scale: 0.55; box-shadow: 0 0 0 1.5px rgba(237, 237, 237, 0.9), 0 0 0 7px rgba(0, 0, 0, 0.35), 0 22px 60px rgba(0, 0, 0, 0.55); transition: opacity 0.18s var(--ease), scale 0.45s var(--ease); will-change: transform; }
.loupe.is-on { opacity: 1; scale: 1; }
.loupe canvas { display: block; width: 100%; height: 100%; }
.loupe span { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 2px 7px; border-radius: 999px; background: rgba(17, 17, 16, 0.78); color: #f2f0ea; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; }
html.is-looking .cursor { opacity: 0 !important; }
.p-hero.is-looking .p-print__lamp { opacity: 0; }
.p-inks { flex-wrap: wrap; row-gap: 10px; }
.p-inks > span { display: inline-flex; align-items: center; gap: 8px; }
.p-pull { margin-left: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--fg); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.p-pull:hover { border-color: var(--fg); }
.p-pull[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.sep-labels { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.sep-labels span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(12, 12, 12, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.sep-labels i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(237, 237, 237, 0.25); }
.p-print__lamp { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 35%) var(--my, 25%), rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 55%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.p-hero:hover .p-print__lamp { opacity: 1; }
.p-sections { margin-top: clamp(80px, 14vh, 180px); display: grid; gap: clamp(64px, 11vh, 140px); }
.p-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px clamp(24px, 4vw, 80px); }
.p-sec > .label { padding-top: 8px; }
.p-text { font-size: var(--t-lead); line-height: 1.32; letter-spacing: -0.02em; max-width: 34ch; }
.p-idea { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.05; letter-spacing: -0.04em; max-width: 20ch; text-wrap: balance; }
.p-idea::before { content: "“"; color: var(--accent); }
.p-idea::after { content: "”"; color: var(--accent); }
.p-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.p-fig { display: grid; gap: 10px; min-width: 0; align-content: start; }
.p-fig__plate { position: relative; width: 100%; max-width: 100%; overflow: hidden; border-radius: 8px; background: var(--bg-2); }
.p-fig__plate canvas { display: block; width: 100%; height: 100%; }
.p-fig figcaption { font-size: var(--t-meta); color: var(--fg-2); }
.p-made { display: flex; flex-wrap: wrap; gap: 8px; }
.p-made li { padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; }
.p-next { position: relative; margin-top: clamp(90px, 16vh, 200px); padding-top: 22px; border-top: 1px solid var(--line); display: grid; gap: 12px; text-align: left; width: 100%; }
.p-next__row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-meta); color: var(--fg-2); }
.p-next__hint { color: var(--fg-3); transition: color 0.3s; }
.p-next.is-pulling .p-next__hint { color: var(--accent); }
.p-next__pull { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.p-next__pull i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.p-next b { font-size: clamp(48px, 7vw, 120px); font-weight: 400; letter-spacing: -0.055em; line-height: 0.95; translate: 0 calc(var(--pull, 0) * -16px); color: color-mix(in srgb, var(--accent) calc(var(--pull, 0) * 100%), var(--fg)); transition: color 0.4s var(--ease); }
.p-next:hover b { color: var(--accent); }
.p-close {
  position: fixed;
  z-index: 21;
  left: 50%;
  translate: -50% 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--pad));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: var(--t-ui);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s, border-color 0.3s;
}
html.view-project .p-close { opacity: 1; visibility: visible; transition: opacity 0.8s var(--ease) 0.45s, visibility 0s, border-color 0.3s; }
html:not(.view-project) .p-close { pointer-events: none; }
.p-close:hover { border-color: var(--line-2); }

/* about */
.about { padding: calc(env(safe-area-inset-top, 0px) + 140px) var(--pad) 100px; max-width: 1480px; margin-inline: auto; display: grid; gap: clamp(90px, 15vh, 170px); }
.a-hero { display: grid; gap: clamp(20px, 3vh, 34px); }
.a-hello { font-size: clamp(56px, 11vw, 200px); font-weight: 400; line-height: 0.9; letter-spacing: -0.06em; }
.a-hello em { font-family: var(--f-serif); font-style: italic; letter-spacing: -0.03em; color: var(--accent); transition: color 0.6s var(--ease); }
.a-hello .nl { display: inline-block; }
.a-statement { max-width: 24ch; font-size: clamp(28px, 3.9vw, 66px); line-height: 1.1; letter-spacing: -0.045em; }
.a-statement .sw, .a-statement .w { display: inline-block; transition: filter 0.6s var(--ease), opacity 0.6s var(--ease); }
.a-statement.is-clear .sw, .a-statement.is-clear .w:not([data-fx="clearest"]) { filter: blur(7px); opacity: 0.25; }
.a-hint { font-size: var(--t-meta); color: var(--fg-2); }

/* the performing words */
.w { position: relative; white-space: nowrap; cursor: default; }
.w::after { content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.04em; border-bottom: 2px dotted var(--fg-3); transition: opacity 0.3s; }
.w.is-on::after { opacity: 0; }
.w[data-fx="identity"] .w__t, .w[data-fx="boldest"] .w__t { display: inline-block; }
.w[data-fx="identity"] .w__t { width: 100%; text-align: center; }
.w__ring { position: absolute; left: -0.22em; top: -0.08em; width: calc(100% + 0.44em); height: calc(100% + 0.2em); overflow: visible; pointer-events: none; }
.w__ring ellipse { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; }
.w__roll { position: relative; display: inline-block; }
.w__a { display: inline-block; }
.w__b { position: absolute; left: 0; right: 0; top: 0; opacity: 0; white-space: nowrap; text-align: center; font-family: var(--f-serif); font-style: italic; letter-spacing: -0.01em; }
.w__rule { position: absolute; left: 0; right: 0; bottom: 0.08em; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.w[data-fx="campaigns"] { transform-origin: 50% 60%; z-index: 0; }
.w__bar { position: absolute; left: -0.1em; right: -0.1em; top: 0.14em; bottom: 0.04em; background: var(--accent); border-radius: 3px; transform: scaleX(0); transform-origin: left; z-index: -1; }
.w[data-fx="campaigns"] .w__t { position: relative; }
.wl { display: inline-block; }

/* the posters behind a capability, fanned out beside the pointer */
.fan { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; }
.fan img { position: absolute; left: 0; top: 0; width: 88px; max-width: none; aspect-ratio: 1024 / 1448; translate: 0 -50%; border-radius: 5px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); opacity: 0; }

/* try the press */
.a-press { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: 28px clamp(24px, 5vw, 96px); padding-top: 18px; border-top: 1px solid var(--line); }
.a-press__text { display: grid; gap: 22px; align-content: start; }
.a-press__lede { max-width: 21ch; font-size: clamp(24px, 2.3vw, 36px); line-height: 1.15; letter-spacing: -0.03em; }
.a-press__form { display: flex; gap: 8px; max-width: 460px; }
.a-press__form input { flex: 1; min-width: 0; height: 50px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(237, 237, 237, 0.03); color: var(--fg); font: inherit; font-size: 16px; letter-spacing: -0.01em; transition: border-color 0.3s; }
.a-press__form input::placeholder { color: var(--fg-3); }
.a-press__form input:focus { outline: none; border-color: var(--fg); }
.a-press__form button { flex: none; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: #0b0b0b; font-size: 15px; font-weight: 600; transition: background-color 0.6s var(--ease), scale 0.25s var(--ease); }
.a-press__form button:active { scale: 0.96; }
.a-press__meta { display: flex; align-items: center; gap: 8px; min-height: 1.4em; font-size: var(--t-meta); color: var(--fg-2); }
.a-press__stage { position: relative; width: 100%; aspect-ratio: 1 / 1.02; }
.a-press__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* without 3D, the print itself is shown flat */
.a-press__flat { position: absolute; left: 50%; top: 50%; height: 84%; aspect-ratio: 1024 / 1448; translate: -50% -50%; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.a-press.is-3d .a-press__flat { display: none; }

.a-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(24px, 5vw, 96px); }
.a-col { display: grid; gap: 18px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
#contact { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 110px); }
.caps li > * { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.03em; }
.caps sup { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--fg-2); top: -0.4em; }
.caps a i { margin-left: auto; font-style: normal; color: var(--fg-2); transform: translateX(-6px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.3s; }
.caps a:hover { color: var(--accent); }
.caps a:hover i { transform: none; opacity: 1; color: var(--accent); }
.caps span { color: var(--fg-2); }
.mail { justify-self: start; text-align: left; font-size: clamp(28px, 3.4vw, 56px); letter-spacing: -0.045em; line-height: 1.05; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 6px; transition: background-size 0.6s var(--ease), color 0.3s; }
.mail:hover { background-size: 100% 1px; }
.mail__note { font-size: var(--t-meta); color: var(--fg-2); }
.socials { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.socials a { display: inline-block; padding: 4px 0; color: var(--fg-2); transition: color 0.3s; }
.socials a:hover { color: var(--fg); }
.colophon { display: grid; gap: 8px; max-width: 62ch; font-size: 14px; color: var(--fg-2); padding-top: 18px; border-top: 1px solid var(--line); }

/* ─── bottom bar ───────────────────────────────────────────────────────── */
.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px) + var(--pad));
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.bottom > * { pointer-events: auto; }
.avail { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-meta); color: var(--fg-2); padding-bottom: 12px; transition: opacity 0.4s var(--ease); }
.avail i { width: 7px; height: 7px; border-radius: 1px; background: var(--accent); transition: background-color 0.6s var(--ease); animation: onair 2.6s ease-in-out infinite; }
@keyframes onair { 50% { opacity: 0.35; } }
/* the opening line: one click anywhere starts it all, with sound */
.begin { position: fixed; inset: 0; z-index: 35; }
.begin[hidden] { display: none; }
.begin__on { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: var(--pad); text-align: center; }
.begin__on:focus-visible { outline: none; }
.begin__eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.begin__eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--accent); transform-origin: bottom; animation: eq 1.1s var(--ease-io) infinite alternate; }
.begin__eq i:nth-child(2) { animation-duration: 0.7s; }
.begin__eq i:nth-child(3) { animation-duration: 1.4s; }
.begin__eq i:nth-child(4) { animation-duration: 0.9s; }
.begin__eq i:nth-child(5) { animation-duration: 1.2s; }
.begin__line { max-width: 16ch; font-family: var(--f-serif); font-style: italic; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; color: var(--fg); }
.begin__m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; }
.begin__w { display: inline-block; }
.begin__sub { font-size: var(--t-meta); color: var(--fg-2); }
.begin__ripple { position: fixed; left: 0; top: 0; z-index: 34; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--accent); pointer-events: none; }
html:not(.view-index) .avail { opacity: 0; pointer-events: none; }
.sound { position: relative; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; place-items: center; transition: border-color 0.4s var(--ease); }
.sound:hover { border-color: var(--line-2); }
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path:first-child { fill: currentColor; stroke: none; }
.sound .sound__waves { display: none; }
.sound[aria-pressed="true"] .sound__waves { display: inline; }
.sound[aria-pressed="true"] .sound__off { display: none; }
.eq { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; display: flex; gap: 2px; align-items: flex-end; height: 8px; opacity: 0; transition: opacity 0.4s; }
.eq i { width: 2px; height: 100%; background: var(--fg-2); transform-origin: bottom; animation: eq 1s var(--ease-io) infinite alternate; }
.eq i:nth-child(2) { animation-duration: 0.7s; }
.eq i:nth-child(3) { animation-duration: 1.3s; }
.eq i:nth-child(4) { animation-duration: 0.9s; }
@keyframes eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
.sound[aria-pressed="true"] .eq { opacity: 1; }

/* ─── menu ─────────────────────────────────────────────────────────────── */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.menu__sheet {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  width: min(460px, calc(100vw - 2 * var(--pad)));
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 22px 26px 26px;
  border-radius: 18px;
  background: var(--sheet);
  color: var(--sheet-fg);
}
.menu__close { justify-self: end; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.menu__close i { width: 44px; height: 44px; border-radius: 50%; background: var(--sheet-fg); color: var(--sheet); display: grid; place-items: center; font-style: normal; font-size: 20px; }
.menu__links { align-self: center; display: grid; gap: 4px; }
.menu__links a { display: inline-flex; align-items: baseline; gap: 12px; font-size: clamp(46px, 6vw, 76px); letter-spacing: -0.055em; line-height: 1.02; }
.menu__links a::after { content: attr(data-n); font-family: var(--f-serif); font-style: italic; font-size: 22px; letter-spacing: 0; color: var(--sheet-fg-2); }
.menu__links a:hover { color: #d9770f; }
.menu__foot { display: grid; gap: 14px; }
.menu__mail { justify-self: start; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.menu .socials a { color: var(--sheet-fg-2); }
.menu .socials a:hover { color: var(--sheet-fg); }

/* ─── the deal (loader) ────────────────────────────────────────────────── */
.deal { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(28px, 9vh, 84px)); z-index: 30; display: grid; justify-items: center; gap: 8px; text-align: center; pointer-events: none; }
.deal__line { font-size: var(--t-meta); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.deal__no { color: var(--fg); }
.deal__title { height: 1.25em; overflow: hidden; font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.deal__title span { display: inline-block; }

/* ─── small things ─────────────────────────────────────────────────────── */
/* a fine film grain over everything, for a little analog tooth (it only shows on what isn't black) */
.grain { position: fixed; inset: -120px; z-index: 55; pointer-events: none; background-image: var(--grain); opacity: 0.06; mix-blend-mode: overlay; animation: grain 1s steps(5) infinite; }
@keyframes grain { 20% { transform: translate(-40px, 25px); } 40% { transform: translate(30px, -45px); } 60% { transform: translate(-25px, -10px); } 80% { transform: translate(45px, 35px); } }
@media (hover: none) { .grain { display: none; } }
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 30; height: 2px; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
html.view-project .progress { opacity: 1; }
.keys { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.keys[hidden] { display: none; }
.keys__card { width: min(420px, calc(100vw - 2 * var(--pad))); padding: 26px 28px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 18px; }
.keys__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; font-size: 15px; }
.keys__list dt { font-family: var(--f-mono); font-size: 12.5px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 6px; justify-self: start; }
.keys__list dd { color: var(--fg-2); padding-top: 2px; }
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
html.has-cursor .cursor { opacity: 1; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); transition: background-color 0.6s var(--ease); }
.cursor__ring { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(237, 237, 237, 0.4); transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s; }
.cursor.is-link .cursor__ring { transform: scale(1.6); border-color: transparent; background: rgba(237, 237, 237, 0.12); }
.cursor.has-label .cursor__ring { transform: scale(1.9); border-color: transparent; background: rgba(237, 237, 237, 0.94); }
.cursor.is-down .cursor__ring { transform: scale(0.8); }
.cursor__label { position: absolute; transform: translate(-50%, -52%) scale(0.6); font-family: var(--f-serif); font-style: italic; font-size: 17px; color: #0b0b0b; opacity: 0; white-space: nowrap; transition: opacity 0.2s, transform 0.4s var(--ease); }
.cursor.has-label .cursor__label { opacity: 1; transform: translate(-50%, -52%) scale(1); }
html.is-dragging, html.is-dragging * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 80; transform: translate(-50%, -20px); padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.5s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
html.failed .deal::after { content: "Something didn’t load. Refresh to try again."; font-size: var(--t-ui); color: var(--fg-2); }
html.failed .deal__line, html.failed .deal__title { display: none; }

/* ─── small screens ────────────────────────────────────────────────────── */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .top { grid-template-columns: auto 1fr auto; }
  .brand span { display: none; }
  .views { justify-self: center; }
  .menu-btn { height: 40px; padding: 0 14px 0 16px; }
  .side, .cap, .avail, .list-meta { display: none; }
  html.view-index .focus { display: flex; }
  .focus { max-width: 520px; }
  .focus { height: 52px; }
  .focus__thumb { width: 40px; height: 40px; }
  html.view-index .hint { display: block; }
  .bignum { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 96px); font-size: 58vw; }
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-top: calc(env(safe-area-inset-top, 0px) + var(--pad) + 56px); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
  .titles a { font-size: clamp(32px, 9.4vw, 44px); gap: 0; }
  .titles a sup { display: none; }
  .p-head { grid-template-columns: minmax(0, 1fr); }
  .p-intro { position: static; gap: 22px; }
  .p-hero { width: 100%; justify-self: stretch; }
  .p-print { border-radius: 7px; }
  .p-hero__hint { text-align: left; }
  .loupe { width: 150px; height: 150px; }
  .p-sec { grid-template-columns: minmax(0, 1fr); }
  .p-figs { grid-template-columns: minmax(0, 1fr); }
  .project { padding: calc(env(safe-area-inset-top, 0px) + 92px) var(--pad) 150px; }
  .p-close { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pad)); left: var(--pad); translate: none; height: 44px; padding: 0 18px; }
  .about { padding-top: calc(env(safe-area-inset-top, 0px) + 104px); padding-bottom: 120px; }
  .a-statement { max-width: none; }
  .a-press { grid-template-columns: minmax(0, 1fr); }
  .a-press__stage { aspect-ratio: 1 / 1.08; }
  .a-cols { grid-template-columns: minmax(0, 1fr); }
  .menu__sheet { top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); width: calc(100vw - 20px); }
}

/* the smallest phones: keep the header on one line */
@media (max-width: 360px) {
  .brand b { white-space: nowrap; font-size: 13px; }
  .views { gap: 8px; }
  .menu-btn { gap: 8px; padding: 0 12px 0 14px; }
}

/* touch screens: no hover, so the list lights up the title in the middle */
@media (hover: none) {
  .titles { padding-top: 34svh; padding-bottom: 46svh; }
  .titles a, .titles:has(a:hover) a { color: var(--fg-3); }
  .titles li.is-active a { color: var(--fg); }
}

/* ⌘P: a project or the About page comes out as a clean printed sheet */
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #111 !important; }
  .gl, .bignum, .top, .bottom, .menu, .keys, .cursor, .toast, .progress, .veil, .deal, .begin, .sep-labels, .fan, .p-close, .p-pull, .loupe, .p-hero__hint, .p-next, .view--index, .view--list, .skip, .a-hint, .a-press { display: none !important; }
  .view { position: static !important; inset: auto !important; overflow: visible !important; }
  .view[hidden] { display: none !important; }
  .project, .about { padding: 0 !important; max-width: none !important; }
  .p-intro { position: static !important; }
  .p-print { opacity: 1 !important; transform: none !important; }
  .p-fig__plate { clip-path: none !important; }
  .p-title, .p-line, .p-text, .p-idea, .p-meta dd, .a-hello, .a-statement, .mail, .caps li > * { color: #111 !important; }
  .label, .p-meta dt, .p-eyebrow, .p-fig figcaption, .colophon { color: #666 !important; }
  .p-sec, figure { break-inside: avoid; }
  .a-statement .sw, .a-statement .w { filter: none !important; opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ─── real work: film, screens of the real interface, plates, links ─────── */
.p-sec--wide { grid-template-columns: minmax(0, 1fr); }
.p-film { display: grid; gap: 12px; }
.p-film video { width: 100%; aspect-ratio: 16 / 9; background: var(--bg-2); border-radius: 10px; display: block; }
.p-film figcaption, .p-shot figcaption, .p-plate figcaption { font-size: var(--t-meta); color: var(--fg-2); max-width: 60ch; }
.p-shot figcaption b { color: var(--fg); font-weight: 500; }
.p-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(14px, 2vw, 28px); }
.p-shot { display: grid; gap: 12px; min-width: 0; }
.p-shot--wide { grid-column: 1 / -1; }
.p-shot__frame { border-radius: 10px; overflow: hidden; background: #0e0e10; box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.p-shot__bar { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #17171a; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.p-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3f; }
.p-shot__bar i:nth-child(1) { background: #ff5f57; } .p-shot__bar i:nth-child(2) { background: #febc2e; } .p-shot__bar i:nth-child(3) { background: #28c840; }
.p-shot__bar span { margin-left: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.02em; }
.p-shot__frame img { display: block; width: 100%; height: auto; }
.p-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.p-plate { display: grid; gap: 10px; margin: 0; }
.p-plate img { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--bg-2); }
.p-links { display: flex; flex-wrap: wrap; gap: 10px; }
.p-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.p-link:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 760px) {
  .p-screens, .p-plates { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .p-link { transition: none; } }
.p-note { margin-top: 18px; font-size: var(--t-meta); color: var(--fg-2); max-width: 52ch; }

/* home: say who this is before anything spins */
.home-intro { position: absolute; z-index: 2; left: var(--pad); top: clamp(104px, 16vh, 170px); max-width: min(36vw, 560px); display: grid; gap: 22px; animation: home-in 1.4s var(--ease) 0.4s both; }
.home-intro__line { font-family: var(--f-serif); font-size: clamp(26px, 2.5vw, 42px); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.home-intro__line em { font-style: italic; color: var(--accent); }
.home-intro__cta { justify-self: start; display: inline-flex; gap: 10px; align-items: center; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-ui); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.home-intro__cta:hover { border-color: var(--accent); color: var(--accent); }
@keyframes home-in { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 760px) {
  .home-intro { top: calc(env(safe-area-inset-top, 0px) + 84px); right: var(--pad); max-width: none; gap: 14px; }
  .home-intro__line { font-size: 22px; }
  .home-intro__cta { padding: 9px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .home-intro { animation: none; } }

.resume-link { justify-self: start; display: inline-flex; gap: 10px; align-items: center; margin-top: 6px; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-ui); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
.resume-link:hover { border-color: var(--accent); color: var(--accent); }
.a-col--wide { grid-column: 1 / -1; }
.a-now { font-size: var(--t-lead); line-height: 1.35; letter-spacing: -0.015em; max-width: 46ch; }
.a-now em { font-family: var(--f-serif); font-style: italic; color: var(--accent); }