*,*::before,*::after {
  box-sizing:border-box
}
html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto
}
html.lenis,html.lenis body {
  height:auto
}
.lenis.lenis-smooth {
  scroll-behavior:auto!important
}
.lenis.lenis-stopped {
  overflow:hidden
}
/* registered as a colour so the nav's backdrop can ease between bone and booth */
@property --page {
  syntax:'<color>';
  inherits:true;
  initial-value:#EDEAE3
}
body {
  /* --page is the colour under the nav: bone, or booth while the play section sits beneath it */
  --page:var(--bone);
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font:400 var(--fs-body)/1.5 var(--sans);
  overflow-x:clip;
  position:relative
}
/* graph paper + grain: one fixed canvas painted once (CSS gradient tiles and SVG filters cost fps). */
#paper,.paper-ripple {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none
}
img,svg,canvas {
  display:block;
  max-width:100%
}
button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer
}
a {
  color:inherit;
  text-underline-offset:.2em
}
h1,h2,h3,p {
  margin:0
}
::selection {
  background:var(--signal);
  color:var(--ink)
}
:focus {
  outline:none
}
:focus-visible {
  outline:2px solid var(--signal-ink);
  outline-offset:3px;
  border-radius:2px
}
body.on-dark :focus-visible,.play :focus-visible {
  outline-color:var(--signal)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}
.skip {
  position:fixed;
  left:var(--pad);
  top:8px;
  z-index:200;
  background:var(--ink);
  color:var(--bone);
  font:500 var(--fs-label)/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 16px;
  transform:translateY(-200%)
}
.skip:focus {
  transform:none
}
.mono,.label {
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  line-height:1.4
}
.label {
  color:var(--ink-2)
}
.wrap {
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad)
}
.serif {
  font-family:var(--serif);
  font-weight:400
}
.sig {
  color:var(--signal-ink)
}
.reg {
  position:relative
}
.reg::before,.reg::after {
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:1px solid var(--ink);
  opacity:.55;
  pointer-events:none
}
.reg::before {
  left:-1px;
  top:-1px;
  border-right:0;
  border-bottom:0
}
.reg::after {
  right:-1px;
  bottom:-1px;
  border-left:0;
  border-top:0
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:.7em;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--ink);
  font:500 var(--fs-label)/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1.2;
  transition:background .25s,color .25s
}
.btn:hover {
  background:var(--ink);
  color:var(--bone)
}
.dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--signal);
  display:inline-block
}
/* nav */
.nav {
  position:fixed;
  top:0;
  right:0;
  z-index:50;
  display:flex;
  gap:clamp(12px,2vw,28px);
  padding:14px var(--pad);
  mix-blend-mode:normal;
  transition:--page .45s ease
}
/* frosted backdrop: the grid shows through softly, so the bar never reads as a pasted-on panel */
.nav::before {
  content:"";
  position:absolute;
  inset:0 0 -14px;
  z-index:-1;
  background:color-mix(in srgb,var(--page) 80%,transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 64px),linear-gradient(#000 55%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 64px),linear-gradient(#000 55%,transparent);
  mask-composite:intersect;
  pointer-events:none
}
.nav a {
  position:relative;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding-inline:4px
}
.nav a::before {
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:6px;
  height:6px;
  margin-top:-3px;
  border-radius:50%;
  background:var(--signal);
  transform:scale(0);
  transition:transform .4s cubic-bezier(.2,1.4,.4,1)
}
.nav a[aria-current=true]::before {
  transform:scale(1)
}
.nav span {
  color:var(--ink-2);
  margin-right:.5em
}
.nav .nav-cv {
  border:1px solid currentColor;
  padding-inline:12px
}
.nav .nav-cv::before {
  display:none
}
body.nav-dark .nav {
  --page:var(--booth)
}
body.nav-dark .nav a {
  color:var(--bone)
}
.nav a,.nav span {
  transition:color .45s ease
}
body.nav-dark .nav .label,body.nav-dark .nav span {
  color:#a9a69c
}
@media(max-width:767px) {
  .nav {
    left:0;
    right:0;
    justify-content:space-between;
    gap:0;
    padding:6px var(--pad)
  }
  /* full-width bar on phones: no left fade, or it eats the first link */
  .nav::before {
    -webkit-mask-image:linear-gradient(#000 70%,transparent);
    mask-image:linear-gradient(#000 70%,transparent)
  }
  .nav span {
    display:none
  }
  .nav a {
    padding-inline:6px
  }
  .nav a::before {
    display:none
  }
  .nav a[aria-current=true] {
    text-decoration:underline;
    text-decoration-color:var(--signal);
    text-decoration-thickness:2px;
    text-underline-offset:6px
  }
  .nav .nav-cv {
    padding-inline:8px
  }
}
@media(max-width:359px) {
  .nav a {
    padding-inline:3px;
    font-size:14px
  }
  .nav .nav-cv {
    padding-inline:6px
  }
}
/* cursor */
.cursor {
  position:fixed;
  left:0;
  top:0;
  z-index:150;
  pointer-events:none;
  display:none;
  /* white in difference mode inverts whatever sits behind it: dark on cream, light on ink */
  mix-blend-mode:difference;
  --cursor-ink:#fff
}
/* the custom cursor stays hidden until the pointer has actually moved, so it never sits parked in the corner */
html:not(.cursor-moved) .cursor {
  opacity:0
}
.cursor i {
  position:absolute;
  left:-3px;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cursor-ink);
  transition:opacity .2s,background .3s
}
.cursor b {
  position:absolute;
  left:-14px;
  top:-14px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--cursor-ink);
  display:grid;
  place-items:center;
  font:500 9px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:transparent;
  transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .3s,color .2s
}
/* links: the ring opens up and a small arrow keeps nudging out of it */
.cursor b::after {
  content:'↗';
  position:absolute;
  right:-7px;
  top:-9px;
  font:500 13px/1 system-ui,sans-serif;
  color:var(--cursor-ink);
  opacity:0;
  transform:translate(-4px,4px) scale(.6);
  transition:opacity .25s,transform .35s
}
.cursor.is-link i {
  opacity:0
}
.cursor.is-link b {
  width:44px;
  height:44px;
  left:-22px;
  top:-22px
}
.cursor.is-link b::after {
  opacity:1;
  transform:none;
  animation:cursor-nudge 1.1s .35s ease-in-out infinite
}
@keyframes cursor-nudge {
  50% { transform:translate(2px,-2px) }
}
/* other controls: the pointer turns signal orange, its ring drawing in around a light tint */
.cursor.is-hot {
  mix-blend-mode:normal;
  --cursor-ink:var(--signal)
}
.cursor.is-hot b {
  width:22px;
  height:22px;
  left:-11px;
  top:-11px;
  background:color-mix(in srgb,var(--signal) 14%,transparent)
}
.cursor.has-label {
  mix-blend-mode:normal
}
.cursor.has-label b::after {
  opacity:0;
  animation:none
}
.cursor.has-label b {
  width:64px;
  height:64px;
  left:-32px;
  top:-32px;
  background:var(--signal);
  border-color:var(--signal);
  color:var(--ink)
}
@media(hover:hover) and (pointer:fine) {
  .cursor {
    display:block
  }
  /* the dot is the only pointer: no hand, caret or grab, even where a script sets one inline */
  html.has-cursor,html.has-cursor * {
    cursor:none!important
  }
}
@media(pointer:coarse) {
  .cursor {
    display:none!important
  }
}
/* reveal states: JS-enhanced only */
.js [data-reveal] {
  visibility:hidden
}
.mask {
  display:block;
  overflow:hidden
}
@media(prefers-reduced-motion:reduce) {
  .js [data-reveal] {
    visibility:visible
  }
}
.no-anim [data-reveal],.anim-safe [data-reveal] {
  visibility:visible
}
.ln {
  will-change:transform
}

.nowrap {
  white-space:nowrap
}