/* shared by every page: tokens, type, cursor, pills, nav */
/* palettes: neutral blacks + one loud accent + one vivid second colour (--blk) for whole areas */
:root { --ground: #0b0c0a; --ground-2: #12140f; --ground-3: #1a1d15; --line: #2e3324; --text: #f3f1e7; --dim: #a3a694; --acc: #d4ff3a; --on-acc: #1a2400; --blk: #f3f1e7; --on-blk: #0b0c0a; }
:root { --display: "Anybody", "Helvetica Neue", sans-serif; --sans: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --g: clamp(16px, 2.4vw, 36px); --ease: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; }
html { background: var(--ground); transition: background .6s; }
body { margin: 0; background: transparent; color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.45; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; }
a { color: inherit; }
::selection { background: var(--acc); color: var(--on-acc); }
.disp { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 150; text-transform: uppercase; line-height: .82; letter-spacing: -0.01em; }
/* small labels: plain sans in sentence case, not spaced-out mono capitals */
.eb { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--dim); }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12.0px var(--sans); letter-spacing: -0.005em; white-space: nowrap; }
.tag.acc { background: var(--acc); color: var(--on-acc); }
.tag.blk { background: var(--blk); color: var(--on-blk); }
.tag.line { border: 2px solid var(--line); color: var(--text); }
.tag.inv { background: var(--text); color: var(--ground); }
.scr { color: var(--acc); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section { position: relative; }
.wrap { padding-left: var(--g); padding-right: var(--g); }

/* cursor: a volt droplet that stretches with speed, with a drop trailing behind; on a control it melts over its exact shape
   and inverts it. big interactive areas get a tag naming the action */
.cur { position: fixed; inset: 0; z-index: 400; pointer-events: none; transition: opacity .25s; }
.cur.out { opacity: 0; }
.cur-defs { position: absolute; }
/* the droplet sits outside the cursor layer so its difference blend reaches the page under it */
.cg { position: fixed; left: 0; top: 0; z-index: 399; pointer-events: none; filter: url(#goo); transition: opacity .25s; }
.cur.out + .cg { opacity: 0; }
.cg-cup { position: fixed; left: 0; top: 0; z-index: 400; width: 28px; height: 30px; pointer-events: none; transform-origin: 14px 27px; transition: opacity .2s; }
.cg-cup.away { opacity: 0; }
.cg-cup svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cup-mug { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; }
.cup-fill { fill: var(--acc); }
.cg-cup.empty .cup-coffee, .cg-cup.empty .cup-steam { display: none; } /* drunk: no coffee line, no steam */
.cup-handle { fill: none; stroke: var(--acc); stroke-width: 2.4; }
.cup-coffee { fill: none; stroke: var(--ground); stroke-width: 1.6; stroke-linecap: round; }
.cup-steam path { fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; opacity: 0; }
.cg-cup.rest .cup-steam path { animation: cupSteam 1.6s ease-in-out infinite; }
.cg-cup.rest .cup-steam path + path { animation-delay: .55s; }
@keyframes cupSteam { 0% { opacity: 0; transform: translateY(3px); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-5px); } }
.cg i { position: absolute; left: 0; top: 0; display: block; background: var(--acc); border-radius: 50%; will-change: transform, width, height; }
.cur.ink + .cg i { background: var(--on-acc); }
/* on light ground the cup is ink, so it never vanishes into volt or paper */
.cg-cup.ink .cup-mug { stroke: var(--on-acc); }
.cg-cup.ink .cup-fill { fill: var(--on-acc); }
.cg-cup.ink .cup-handle, .cg-cup.ink .cup-steam path { stroke: var(--on-acc); }
.cg-cup.ink .cup-coffee { stroke: var(--acc); }
/* the coffee poured into a control: a layer inside it, so it takes the control's exact shape, tilt and corners. it floods
   out from the pointer and flips the control to the other side of night volt: ink turns volt, paper and volt turn ink */
cg-pour { position: absolute; inset: 0; z-index: 40; display: block; border-radius: inherit; pointer-events: none; clip-path: circle(0% at 50% 50%); transition: clip-path .55s var(--ease); -webkit-backdrop-filter: grayscale(1) invert(1) sepia(1) saturate(8) hue-rotate(24deg) brightness(1.1) contrast(1.3); backdrop-filter: grayscale(1) invert(1) sepia(1) saturate(8) hue-rotate(24deg) brightness(1.1) contrast(1.3); }
@media (hover: none) { cg-pour { display: none; } }
.cur-tag { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 999px; background: var(--acc); color: var(--on-acc); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; scale: .5; transform-origin: 0 0; transition: opacity .2s, scale .35s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s; }
.cur.ink .cur-tag { background: var(--on-acc); color: var(--acc); }
.cur.tagged .cur-tag { opacity: 1; scale: 1; }
@media (hover: none) { .cur, .cg, .cg-cup { display: none; } body { cursor: auto; } }

.pill { --f: var(--acc); --o: var(--on-acc); display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 8px 0 24px; border-radius: 999px; background: var(--f); color: var(--o); font: 600 16px var(--sans); letter-spacing: -0.011em; text-decoration: none; white-space: nowrap; border: 0; cursor: none; transition: transform .42s cubic-bezier(.34, 1.56, .64, 1); }
.pill:active { transform: scale(.96); transition-duration: .09s; }
.pill .lbl { display: grid; height: 1.25em; overflow: hidden; }
.pill .lbl span { grid-area: 1 / 1; line-height: 1.25em; transition: transform .5s var(--ease); }
.pill .lbl span + span { transform: translateY(100%); }
.pill:hover .lbl span:first-child { transform: translateY(-100%); }
.pill:hover .lbl span + span { transform: translateY(0); }
.pill .disc { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--o); color: var(--f); display: grid; place-items: center; overflow: hidden; flex: none; }
.pill .disc svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .5s var(--ease); }
.pill .disc svg + svg { transform: translateX(-180%); }
.pill:hover .disc svg:first-child { transform: translateX(180%); }
.pill:hover .disc svg + svg { transform: translateX(0); }
.pill.ghost { --f: transparent; --o: var(--text); border: 2px solid var(--line); padding: 0 22px; }
.pill.ghost:hover { border-color: var(--text); }
.pill.blk { --f: var(--blk); --o: var(--on-blk); }
.pill.sm { height: 42px; font-size: 14px; padding: 0 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }

.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0; }
.glitch.go::before { opacity: 1; color: var(--acc); animation: gA .55s steps(1) both; }
.glitch.go::after { opacity: 1; color: var(--text); animation: gB .55s steps(1) both; }
.glitch.go { animation: gS .55s steps(1) both; }
@keyframes gA { 0% { clip-path: inset(12% 0 64% 0); transform: translate(-6px, 0); } 20% { clip-path: inset(58% 0 18% 0); transform: translate(5px, 0); } 40% { clip-path: inset(30% 0 46% 0); transform: translate(-4px, 0); } 60% { clip-path: inset(78% 0 4% 0); transform: translate(6px, 0); } 80% { clip-path: inset(4% 0 82% 0); transform: translate(-3px, 0); } 100% { clip-path: inset(50% 0 50% 0); transform: none; } }
@keyframes gB { 0% { clip-path: inset(66% 0 10% 0); transform: translate(5px, 0); } 25% { clip-path: inset(8% 0 72% 0); transform: translate(-6px, 0); } 50% { clip-path: inset(40% 0 38% 0); transform: translate(4px, 0); } 75% { clip-path: inset(84% 0 2% 0); transform: translate(-5px, 0); } 100% { clip-path: inset(50% 0 50% 0); transform: none; } }
@keyframes gS { 0%, 100% { transform: none; } 30% { transform: translate(2px, -1px) skewX(-6deg); } 60% { transform: translate(-2px, 1px) skewX(4deg); } }

@keyframes tlBlink { 50% { opacity: 0; } }

/* ===== nav concepts ===== */
.nv-panel[hidden], .nv-pal[hidden], .st-pop[hidden] { display: none !important; }
.nv { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--g); pointer-events: none; }
.nv > * { pointer-events: auto; }
/* scrolled: the nav shrinks to one round menu button in the corner, so the page stays full screen and uncovered */
.nv-wm, .nv-count { transition: opacity .35s, transform .55s var(--ease); }
.nv.mini .nv-wm, .nv.mini .nv-count { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.nv-menu.open.mini .nv-wm { opacity: 1; transform: none; pointer-events: auto; }
.nv-btn { position: relative; }
.nv-roll { max-width: 80px; transition: max-width .45s var(--ease), opacity .3s; }
.nv.mini .nv-btn { gap: 0; padding: 0 7px; }
.nv.mini .nv-roll { max-width: 0; opacity: 0; }
.nv.mini .nv-btn:hover, .nv-menu.open.mini .nv-btn { gap: 12px; padding: 0 22px 0 8px; }
.nv.mini .nv-btn:hover .nv-roll, .nv-menu.open.mini .nv-roll { max-width: 80px; opacity: 1; }
.nv-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); pointer-events: none; overflow: visible; opacity: 0; transition: opacity .3s; }
.nv.mini:not(.open) .nv-ring { opacity: 1; }
.nv-ring rect { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nv-wm { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); transition: color .4s; }
.nv-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--acc); color: var(--on-acc); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 150; font-size: 16px; transition: transform .6s var(--ease), border-radius .6s var(--ease), background .4s, color .4s; }
.nv-wm:hover .nv-mark { transform: rotate(-90deg); border-radius: 50%; }
.nv-name { display: grid; height: 1.15em; overflow: hidden; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 150; font-size: 17px; text-transform: uppercase; line-height: 1.15em; }
.nv-name span { grid-area: 1 / 1; transition: transform .6s var(--ease); }
.nv-name span + span { transform: translateY(100%); }
.nv-wm:hover .nv-name span:first-child { transform: translateY(-100%); }
.nv-wm:hover .nv-name span + span { transform: none; }
/* the résumé slip: prints down out of the wordmark on hover, the page scrolls past in it */
.nv-wm { position: relative; }
.nv-name span + span { color: var(--acc); }
.nv-cv { position: absolute; left: 0; top: calc(100% + 12px); width: 236px; display: grid; background: var(--blk); color: var(--on-blk); clip-path: inset(0 0 100% 0); transition: clip-path .7s steps(16); pointer-events: none; }
.nv-wm:hover .nv-cv, .nv-wm:focus-visible .nv-cv { clip-path: inset(0 0 -12px 0); pointer-events: auto; }
.cv-h, .cv-f { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cv-h { border-bottom: 1.5px dashed color-mix(in srgb, var(--on-blk) 40%, transparent); }
.cv-pg { display: block; height: 200px; overflow: hidden; background: #fff; }
.cv-pg img { display: block; width: 100%; transform: translateY(0); transition: transform 3.2s cubic-bezier(.45, 0, .55, 1) .5s; }
.nv-wm:hover .cv-pg img { transform: translateY(calc(-100% + 200px)); }
.cv-f { background: var(--acc); color: var(--on-acc); }
.cv-z { display: block; height: 8px; background: linear-gradient(135deg, var(--acc) 6px, transparent 0) 0 0 / 12px 8px repeat-x, linear-gradient(-135deg, var(--acc) 6px, transparent 0) 0 0 / 12px 8px repeat-x; }
/* the cue: a paper tab beside the name, and every few seconds the slip peeks out and tucks back */
.nv-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; margin-left: 2px; border-radius: 6px; background: var(--blk); color: var(--on-blk); font: 600 11.5px var(--sans); letter-spacing: -0.005em; rotate: -4deg; transition: opacity .3s, transform .45s var(--ease); }
.nv-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-blk); animation: tlBlink 1.4s steps(1) infinite; }
.nv-tag b { display: none; font-weight: 600; }
.nv-wm:hover .nv-tag, .nv-wm:focus-visible .nv-tag { opacity: 0; transform: translateY(6px); }
.nv-cv { animation: cvPeek 7s var(--ease) 3s infinite; }
.nv-wm:hover .nv-cv, .nv-wm:focus-visible .nv-cv { animation: none; }
@keyframes cvPeek { 0%, 78%, 100% { clip-path: inset(0 0 100% 0); } 84%, 92% { clip-path: inset(0 0 calc(100% - 30px) 0); } }
@media (prefers-reduced-motion: reduce) { .nv-cv { animation: none; } }
.nv-menu.open .nv-cv { display: none; }
@media (hover: none) { .nv-cv { display: none; } }
.nv-r { display: flex; align-items: center; gap: 16px; }
.nv-r .eb b { color: var(--text); font-weight: 600; }

/* 1. menu takeover */
.nv-count b { font-size: 14px; }
.nv-btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 8px; border-radius: 999px; border: 2px solid var(--line); background: color-mix(in srgb, var(--ground-2) 82%, transparent); backdrop-filter: blur(8px); color: var(--text); font: 600 13.5px var(--sans); letter-spacing: -0.005em; cursor: none; transition: background .4s, color .4s, border-color .4s; }
.nv-burger { width: 38px; height: 38px; border-radius: 50%; background: var(--acc); display: grid; place-content: center; gap: 5px; transition: background .4s; }
.nv-burger i { display: block; width: 14px; height: 2px; background: var(--on-acc); transition: transform .5s var(--ease), background .4s; }
.nv-roll { display: grid; height: 1.2em; overflow: hidden; line-height: 1.2em; }
.nv-roll span { grid-area: 1 / 1; transition: transform .5s var(--ease); }
.nv-roll span + span { transform: translateY(100%); }
.nv-btn:hover .nv-burger i:first-child { transform: translateX(3px); }
.nv-btn:hover .nv-burger i:last-child { transform: translateX(-3px); }
.nv-menu.open .nv-burger { background: var(--acc); }
.nv-menu.open .nv-burger i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nv-menu.open .nv-burger i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nv-menu.open .nv-roll span:first-child { transform: translateY(-100%); }
.nv-menu.open .nv-roll span + span { transform: none; }
.nv-menu.open .nv-btn { background: var(--on-acc); border-color: var(--on-acc); color: var(--acc); }
/* another page's way home: a round button in the top-left corner, ahead of the wordmark; it stays when the nav shrinks */
.nv-l { display: flex; align-items: center; gap: 14px; }
.nv-back { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px 0 8px; border-radius: 999px; border: 2px solid var(--line); background: color-mix(in srgb, var(--ground-2) 82%, transparent); backdrop-filter: blur(8px); color: var(--text); font: 600 13.5px var(--sans); letter-spacing: -0.005em; text-decoration: none; transition: background .4s, color .4s, border-color .4s, gap .45s var(--ease), padding .45s var(--ease); }
.nv-bk-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: var(--ground); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s, color .4s; }
.nv-bk-ic svg { width: 18px; height: 18px; }
.nv-back:hover .nv-bk-ic, .nv-back:focus-visible .nv-bk-ic { transform: translateX(-3px); }
.nv.mini .nv-back { gap: 0; padding: 0 7px; }
.nv.mini .nv-back:hover, .nv.mini .nv-back:focus-visible { gap: 12px; padding: 0 22px 0 8px; }
.nv.mini .nv-back:hover .nv-roll, .nv.mini .nv-back:focus-visible .nv-roll { max-width: 80px; opacity: 1; }
.nv-menu.open .nv-back { background: transparent; border-color: var(--on-acc); color: var(--on-acc); }
.nv-menu.open .nv-bk-ic { background: var(--on-acc); color: var(--acc); }
.nv-menu.open .nv-wm, .nv-menu.open .nv-count, .nv-menu.open .nv-count b { color: var(--on-acc); }
.nv-menu.open .nv-mark { background: var(--on-acc); color: var(--acc); }
.nv-panel { position: fixed; inset: 0; z-index: 55; background: var(--acc); color: var(--on-acc); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; padding: 110px var(--g) 36px; overflow: auto; }
.nv-links { display: flex; flex-direction: column; justify-content: center; }
.nv-links a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; text-decoration: none; color: var(--on-acc); border-top: 2px solid color-mix(in srgb, var(--on-acc) 22%, transparent); padding: 4px 0; cursor: none; }
.nv-links a:last-child { border-bottom: 2px solid color-mix(in srgb, var(--on-acc) 22%, transparent); }
.nv-i { font: 600 12px var(--mono); letter-spacing: .08em; }
.nv-links a.on .nv-i::after { content: " ●"; }
.nv-t { display: block; overflow: hidden; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, min(6.2vw, calc((100vh - 216px) / 6.6)), 108px); line-height: .92; white-space: nowrap; padding-bottom: .02em; } /* seven rows always fit the screen's height */
.nv-c { display: inline-block; font-variation-settings: "wdth" var(--w, 100), "wght" 900; }
.nv-arr { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--on-acc); display: grid; place-items: center; opacity: 0; transform: translateX(-24px) rotate(-45deg); transition: opacity .5s var(--ease), transform .5s var(--ease), background .3s, color .3s; }
.nv-arr svg { width: 22px; height: 22px; }
.nv-links a:hover .nv-arr, .nv-links a:focus-visible .nv-arr { opacity: 1; transform: none; background: var(--on-acc); color: var(--acc); }
.nv-side { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; border-left: 2px solid color-mix(in srgb, var(--on-acc) 22%, transparent); padding-left: 32px; }
.nv-prev b { display: block; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(56px, 8.6vw, 164px); line-height: .85; }
.nv-side .eb { color: var(--on-acc); }
.nv-contact { display: grid; gap: 14px; }
.nv-contact > a { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 120; font-size: clamp(16px, 1.7vw, 26px); color: var(--on-acc); text-decoration: none; overflow-wrap: anywhere; }
.nv-soc { display: flex; gap: 8px; flex-wrap: wrap; }
.nv-soc a { border: 2px solid var(--on-acc); border-radius: 999px; padding: 9px 14px; font: 600 12.5px var(--sans); letter-spacing: -0.005em; color: var(--on-acc); text-decoration: none; }
.nv-soc a:focus-visible { background: var(--on-acc); color: var(--acc); outline: none; } /* a mouse gets the cursor's pour instead */
/* the résumé in the menu: a tilted page that straightens and scrolls through itself on hover */
.nv-res { display: grid; grid-template-columns: clamp(86px, 8vw, 120px) 1fr; gap: 18px; align-items: center; color: var(--on-acc); text-decoration: none; }
.nr-pg { display: block; aspect-ratio: 3 / 3.6; overflow: hidden; background: #fff; border: 2px solid var(--on-acc); rotate: -4deg; transition: rotate .45s var(--ease), transform .45s var(--ease); }
.nr-pg img { display: block; width: 100%; transition: transform 2.6s cubic-bezier(.45, 0, .55, 1); }
.nv-res:hover .nr-pg, .nv-res:focus-visible .nr-pg { rotate: 0deg; transform: translateY(-4px); }
.nv-res:hover .nr-pg img, .nv-res:focus-visible .nr-pg img { transform: translateY(-58%); }
.nr-t { display: grid; gap: 6px; }
.nr-t b { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(28px, 3vw, 50px); line-height: .9; text-transform: uppercase; transition: transform .45s var(--ease); }
.nv-res:hover .nr-t b { transform: translateX(6px); }
.nv-res:focus-visible { outline: none; }

@media (max-width: 1000px) {
.nv-back { gap: 0; padding: 0 7px; } .nv-back .nv-roll { max-width: 0; opacity: 0; } /* phones: the way home is just the round button */
.nv-r { gap: 10px; } .nv-l { gap: 10px; }
  .nv-panel { grid-template-columns: 1fr; padding-top: 96px; gap: 24px; }
  .nv-side { border-left: 0; padding-left: 0; }
  .nv-prev { display: none; }
  .nv-t { font-size: 9vw; }
  .nv-arr { display: none; }
  .nv-links a { grid-template-columns: 34px minmax(0, 1fr); }
  .nv-count { display: none; }
  .nv-name { display: none; }
  .nv-tag { height: 28px; font-size: 11px; } .nv-tag i { display: none; } .nv-tag b { display: inline; } /* phones: tap the tab (or NB) to open it */
}
@media (prefers-reduced-motion: reduce) { .glitch.go, .glitch.go::before, .glitch.go::after { animation: none; opacity: 0; } .glitch.go { opacity: 1; } }

/* the section counter beside the menu button is gone */
.nv-count { display: none !important; }


/* the ground: a faint wire mesh over the ink, drawn by mesh.js */
.mesh { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }