@font-face {
      font-family: "Anybody";
      font-style: normal;
      font-weight: 100 900;
      font-stretch: 50% 150%;
      font-display: swap;
      src: url("../assets/fonts/anybody.woff2") format("woff2")
    }

    @font-face {
      font-family: "Geist";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("../assets/fonts/geist.woff2") format("woff2")
    }

    @font-face {
      font-family: "Geist Mono";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("../assets/fonts/geist-mono.woff2") format("woff2")
    }

    @font-face {
      font-family: "Instrument Serif";
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2")
    }

    /* Layout: a sequence of rooms in two inks, the logo's blue and paper. The wide heavy face speaks in the logo's
   voice (lowercase, tight), an italic serif answers it, mono keeps the records. Each room has one mechanism:
   halftone logo, lit manifesto, horizontal reel, stitched thread, tilting cards, a plain sign-off. One committed look. */
    :root {
      --blue: #0400dd;
      --deep: #02007a;
      --lite: #5a57ff;
      --paper: #f3f2ed;
      --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
      --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
      --wide: "Anybody", "Arial Black", Impact, sans-serif;
      --gut: clamp(20px, 4vw, 64px);
      --sec: clamp(96px, 13vw, 200px);
      --ease: cubic-bezier(.19, 1, .22, 1);
      --mark: url("../assets/logo/mark.png");
      --word: url("../assets/logo/wordmark.png");
      color-scheme: light;
    }

    body,
    .on-paper {
      --g: var(--paper);
      --i: var(--blue);
      --mute: #4744c8;
      --faint: #cdccec;
      --line: #d2d1e6;
      --raise: #fbfaf7
    }

    .on-blue {
      --g: var(--blue);
      --i: var(--paper);
      --mute: #c6c5f6;
      --faint: #4e4bea;
      --line: #3a37e8;
      --raise: #0d09c4
    }

    body {
      background: var(--blue)
    }

    body,
    .on-paper,
    .on-blue {
      color: var(--i)
    }

    .on-paper,
    .on-blue {
      background: var(--g)
    }

    [data-room] {
      background: transparent
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      overflow-x: clip;
      -webkit-text-size-adjust: 100%
    }

    .flood {
      overflow: clip
    }

    body {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: clip
    }

    a {
      color: inherit;
      text-decoration: none
    }

    h1,
    h2,
    h3,
    p,
    ul,
    ol {
      margin: 0
    }

    ul,
    ol {
      padding: 0;
      list-style: none
    }

    button {
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer
    }

    canvas {
      display: block
    }

    :focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
      border-radius: 4px
    }

    ::selection {
      background: var(--i);
      color: var(--g)
    }

    .wrap {
      max-width: 1640px;
      margin-inline: auto;
      padding-inline: var(--gut)
    }

    .pad {
      padding-block: var(--sec)
    }

    .k {
      font-family: var(--mono);
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.5;
      color: var(--mute)
    }

    .d {
      font-family: var(--wide);
      font-stretch:115%;
      font-weight: 800;
      letter-spacing: -.035em;
      line-height: .9;
      text-transform: lowercase;
      text-wrap: balance
    }

    .d em,
    .s {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-stretch: 100%;
      letter-spacing: -.02em;
      text-transform: none
    }

    .d em {
      font-size: 1.22em;
      line-height: .7
    }

    h2.d {
      font-size: clamp(2rem, 5.6vw, 5.6rem)
    }

    .p {
      color: var(--mute);
      max-width: 42ch;
      font-size: 1.05rem
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: clamp(16px, 2vw, 32px);
      row-gap: 28px
    }

    .head {
      align-items: end;
      margin-bottom: clamp(36px, 5vw, 80px)
    }

    .head .k {
      grid-column: 1/-1;
      display: flex;
      gap: 1.2em;
      align-items: center
    }

    .head .k::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line)
    }

    .head h2 {
      grid-column: 1/-1
    }

    .head .p {
      grid-column: 9/-1;
      justify-self: end
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      padding: 7px 7px 7px 24px;
      border-radius: 999px;
      background: var(--i);
      color: var(--g);
      box-shadow: inset 0 0 0 1px var(--i);
      font-size: .95rem;
      font-weight: 500;
      letter-spacing: -.01em;
      line-height: 1;
      transition: background .6s var(--ease), color .6s var(--ease)
    }

    .btn i {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--g);
      color: var(--i);
      display: grid;
      place-items: center;
      font-style: normal;
      transition: transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease)
    }

    .btn:hover,
    .btn.ghost {
      background: transparent;
      color: var(--i)
    }

    .btn:hover i,
    .btn.ghost i {
      background: var(--i);
      color: var(--g)
    }

    .btn:hover i {
      transform: rotate(45deg)
    }

    .btn.ghost {
      box-shadow: inset 0 0 0 1px var(--line)
    }

    .btn.ghost:hover {
      background: var(--i);
      color: var(--g)
    }

    .btn.ghost:hover i {
      background: var(--g);
      color: var(--i)
    }

    .txt {
      position: relative;
      padding-bottom: 4px
    }

    .txt::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: currentColor;
      transform-origin: right;
      transition: transform .6s var(--ease)
    }

    .txt:hover::after {
      transform: scaleX(0)
    }

    /* loader: counts to nineteen, then lifts */
    .load {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: var(--blue);
      color: var(--paper);
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: var(--gut);
      animation: lift 1s 1.35s var(--ease) forwards
    }

    .load b {
      font-family: var(--wide);
      font-stretch:115%;
      font-weight: 800;
      font-size: clamp(5rem, 22vw, 20rem);
      line-height: .74;
      letter-spacing: -.04em;
      font-variant-numeric: tabular-nums
    }

    .load .k {
      color: var(--paper)
    }

    @keyframes lift {
      to {
        transform: translateY(-101%);
        visibility: hidden
      }
    }

    /* progress + nav */
    .prog {
      position: fixed;
      left: 0;
      top: 0;
      height: 3px;
      width: 100%;
      background: currentColor;
      transform-origin: 0 50%;
      transform: scaleX(0);
      z-index: 60;
      pointer-events: none
    }

    header.nav {
      position: fixed;
      left: 0;
      right: 0;
      top: env(safe-area-inset-top, 0px);
      z-index: 55;
      color: var(--paper);
      transition: color .5s var(--ease);
      pointer-events: none
    }

    header.nav.inv {
      color: var(--blue)
    }

    header.nav::before {
      content: "";
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--blue) 84%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 1;
      transition: opacity .5s, background .5s;
      z-index: -1
    }

    header.nav.inv::before {
      background: color-mix(in srgb, var(--paper) 84%, transparent)
    }

    header.nav.top::before {
      opacity: 0
    }

    .nav-in {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 20px;
      padding-block: 18px
    }

    .nav-in>* {
      pointer-events: auto
    }

    .mark {
      display: block;
      height: 20px;
      aspect-ratio: 640/209;
      background: currentColor;
      -webkit-mask: var(--mark) center/contain no-repeat;
      mask: var(--mark) center/contain no-repeat
    }

    .nav nav {
      display: flex;
      gap: clamp(18px, 2.8vw, 40px);
      font-size: .92rem
    }

    .nav .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: clamp(14px, 2vw, 28px)
    }

    .nav .k {
      color: inherit;
      white-space: nowrap
    }

    .nav .call {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px currentColor;
      font-size: .88rem;
      font-weight: 500;
      line-height: 1;
      transition: background .5s var(--ease)
    }

    .nav .call::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      animation: blink 2s ease-in-out infinite
    }

    @keyframes blink {
      50% {
        opacity: .25
      }
    }

    .burger {
      display: none
    }

    header.nav.mo {
      color: var(--paper)
    }

    header.nav.mo::before {
      opacity: 0
    }

    .menu {
      position: fixed;
      inset: 0;
      z-index: 54;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 32px;
      overflow-y: auto;
      padding: calc(env(safe-area-inset-top, 0px) + 104px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 28px);
      clip-path: circle(0px at calc(100% - 52px) calc(env(safe-area-inset-top, 0px) + 40px));
      visibility: hidden;
      transition: clip-path .8s var(--ease), visibility 0s .8s
    }

    .menu.open {
      clip-path: circle(150% at calc(100% - 52px) calc(env(safe-area-inset-top, 0px) + 40px));
      visibility: visible;
      transition: clip-path .9s var(--ease)
    }

    .menu ol a {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      padding-block: 14px;
      border-bottom: 1px solid var(--line);
      font-family: var(--wide);
      font-stretch:115%;
      font-weight: 800;
      font-size: clamp(2.2rem, 11.5vw, 3.8rem);
      text-transform: lowercase;
      letter-spacing: -.035em;
      line-height: 1.05
    }

    .menu ol li {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s var(--ease), transform .8s var(--ease)
    }

    .menu.open ol li {
      opacity: 1;
      transform: none;
      transition-delay: calc(.12s + var(--n, 0) * .06s)
    }

    .menu ol li:nth-child(2) {
      --n: 1
    }

    .menu ol li:nth-child(3) {
      --n: 2
    }

    .menu ol li:nth-child(4) {
      --n: 3
    }

    .menu-foot {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start
    }

    .menu-foot b {
      font-weight: 400;
      color: var(--i)
    }

    .menu-foot .k a {
      padding-block: 12px;
      display: inline-block
    }

    @media (max-width:1100px) {
      .nav .clock {
        display: none
      }
    }

    @media (max-width:760px) {
      .nav-in {
        grid-template-columns: 1fr auto;
        padding-block: 12px
      }

      .nav nav {
        display: none
      }

      .nav .right {
        gap: 8px
      }

      .nav .call,
      .burger {
        display: inline-flex;
        align-items: center;
        height: 44px;
        padding: 0 16px;
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px currentColor;
        font-size: .9rem;
        font-weight: 500;
        line-height: 1
      }

      .nav .mark {
        height: 22px
      }

      .foot a,
      .soc a,
      .plan-go .txt,
      .live {
        padding-block: 13px;
        display: inline-flex
      }

      .foot a.txt::after,
      .soc a::after,
      .plan-go .txt::after,
      .live::after {
        bottom: 8px
      }

      .foot nav {
        gap: 0 24px
      }

      .soc {
        gap: 0 22px;
        margin-top: 0
      }

      .mail button {
        padding-block: 10px
      }

      .hero h1 {
        font-size: 7vw
      }

      .reel-pin {
        padding-block: 72px 64px
      }
    }

    @media (min-width:761px) {
      .menu {
        display: none
      }
    }

    @media (max-height:520px) and (orientation:landscape) {
      .hero {
        min-height: 540px
      }

      .hero-top {
        display: none
      }
    }

    /* hero: liquid logo */
    .hero {
      position: relative;
      height: 100svh;
      min-height: 600px;
      max-height: 1100px;
      overflow: hidden
    }

    .hero canvas,
    .sign canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .nogl {
      display: none;
      position: absolute;
      left: 8%;
      right: 8%;
      top: 22%;
      aspect-ratio: 640/209;
      background: var(--paper);
      -webkit-mask: var(--mark) center/contain no-repeat;
      mask: var(--mark) center/contain no-repeat
    }

    .no-gl .nogl {
      display: block
    }

    .no-gl canvas {
      display: none
    }

    .hero-ui {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      pointer-events: none
    }

    .hero-ui a {
      pointer-events: auto
    }

    .hero-ui>.wrap {
      width: 100%
    }

    .hero-top {
      position: absolute;
      left: 0;
      right: 0;
      top: clamp(76px, 10vh, 120px);
      display: flex;
      justify-content: space-between;
      gap: 20px
    }

    .hero-top p {
      max-width: 30ch;
      color: var(--paper)
    }

    .hero-row {
      align-items: end;
      padding-bottom: clamp(28px, 4vw, 56px)
    }

    .hero h1 {
      grid-column: 1/10;
      font-size: clamp(2.6rem, 5.9vw, 5.6rem)
    }

    .hero h1 span {
      white-space: nowrap
    }

    .hero h1 span {
      display: block;
      overflow: hidden;
      padding-block: .12em .06em;
      margin-block: -.12em 0
    }

    .hero h1 span>b {
      display: block;
      font-weight: inherit;
      animation: up 1.3s var(--ease) both;
      animation-delay: calc(1s + var(--n) * .09s)
    }

    @keyframes up {
      from {
        transform: translateY(120%)
      }
    }

    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(18px)
      }
    }

    .hero-side {
      grid-column: 10/-1;
      justify-self: end;
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: flex-start;
      max-width: 34ch;
      animation: fade 1.3s 1.35s var(--ease) both
    }

    .hero-side .p {
      font-size: 1rem
    }

    .strip {
      display: flex;
      justify-content: space-between;
      gap: 8px 28px;
      flex-wrap: wrap;
      padding-block: 16px;
      border-top: 1px solid var(--line)
    }

    .strip b {
      font-weight: 400;
      color: var(--i);
      font-variant-numeric: tabular-nums
    }

    .stack {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 10px
    }

    .stack[hidden] {
      display: none
    }

    .stack i {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--raise) center/cover;
      border: 1.5px solid var(--g)
    }

    .stack i+i {
      margin-left: -7px
    }

    /* manifesto */
    .say-wrap {
      grid-column: 2/-1
    }

    .say {
      font-size: clamp(1.7rem, 4.6vw, 4.6rem);
      letter-spacing: -.045em;
      line-height: 1.05;
      max-width: 21ch;
      text-wrap: balance
    }

    .say .w {
      color: var(--faint);
      transition: color .5s ease
    }

    .say .w.on {
      color: var(--i)
    }

    /* disciplines: type that swells when chosen */
    .disc {
      margin-top: clamp(72px, 10vw, 150px)
    }

    .disc li {
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 7fr) minmax(0, 4fr);
      column-gap: clamp(16px, 2vw, 32px);
      align-items: center;
      padding-block: clamp(10px, 1.4vw, 20px);
      cursor: default
    }

    .disc li:last-child {
      border-bottom: 1px solid var(--line)
    }

    .disc .name {
      font-family: var(--wide);
      text-transform: lowercase;
      font-size: clamp(2.2rem, 7.6vw, 7.6rem);
      line-height: 1;
      letter-spacing: -.02em;
      white-space: nowrap;
      font-variation-settings: "wdth" 52, "wght" 260;
      transition: font-variation-settings .9s var(--ease)
    }

    .disc .what {
      color: var(--mute);
      font-size: .98rem;
      max-width: 34ch;
      opacity: .0;
      transform: translateX(-12px);
      transition: opacity .6s var(--ease), transform .6s var(--ease)
    }

    .disc li.act .name {
      font-variation-settings: "wdth" 150, "wght" 820
    }

    .disc li.act .what {
      opacity: 1;
      transform: none
    }

    /* work: horizontal reel */
    .reel {
      position: relative
    }

    .reel-pin {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.4vh, 28px);
      overflow: hidden;
      padding-block: clamp(76px, 10vh, 104px) 24px
    }

    .reel-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px
    }

    .reel-head h2 {
      font-size: clamp(1.7rem, 3.6vw, 3.4rem)
    }

    .reel-count {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1.4rem, 2.4vw, 2.2rem);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap
    }

    .track {
      flex: 1;
      min-height: 0;
      display: flex;
      gap: clamp(14px, 1.8vw, 28px);
      padding-inline: var(--gut);
      will-change: transform
    }

    .panel {
      flex: none;
      width: min(64vw, 1040px);
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .cover {
      position: relative;
      flex: 1;
      min-height: 0;
      border-radius: 14px;
      overflow: hidden;
      container-type: size
    }

    .cover .cap {
      position: absolute;
      left: 18px;
      top: 16px;
      z-index: 2
    }

    .cover .chip {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 2;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--i);
      color: var(--g);
      display: grid;
      place-items: center;
      transition: transform .7s var(--ease)
    }

    .panel:hover .chip {
      transform: rotate(45deg) scale(1.12)
    }

    .cover>svg,
    .cover>div {
      transition: transform 1.2s var(--ease)
    }

    .panel:hover .cover>svg,
    .panel:hover .cover>div.art {
      transform: scale(1.06)
    }

    .meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px
    }

    .meta .d {
      font-size: clamp(1.5rem, 3.2vw, 3rem)
    }

    .meta .s {
      font-size: clamp(1.2rem, 2vw, 1.8rem)
    }

    .knot {
      position: absolute;
      inset: 6%;
      width: 88%;
      height: 88%
    }

    .art {
      position: absolute;
      inset: 0
    }

    .ish {
      display: grid;
      place-items: center
    }

    .ish div {
      display: flex;
      font-family: var(--wide);
      font-size: 22cqw;
      line-height: 1;
      text-transform: lowercase
    }

    .ish span {
      animation: breathe 3.4s ease-in-out infinite alternate;
      animation-delay: calc(var(--k) * -.5s)
    }

    @keyframes breathe {
      from {
        font-variation-settings: "wdth" 50, "wght" 180
      }

      to {
        font-variation-settings: "wdth" 150, "wght" 900
      }
    }

    .tun i {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 64cqmin;
      height: 64cqmin;
      margin: -32cqmin 0 0 -32cqmin;
      border: 1.5px solid currentColor;
      border-radius: 9%;
      animation: tun 7s linear infinite;
      animation-delay: calc(var(--k) * -1s)
    }

    @keyframes tun {
      from {
        transform: scale(.04) rotate(0deg)
      }

      to {
        transform: scale(2.6) rotate(50deg)
      }
    }

    .dots {
      inset: 15% 12%;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      place-items: center
    }

    .dots i {
      width: 34%;
      aspect-ratio: 1;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1.5px currentColor;
      transition: width .6s var(--ease), background .6s var(--ease)
    }

    .dots i.c {
      background: currentColor;
      width: 86%
    }

    .panel.last {
      width: min(44vw, 560px);
      justify-content: center;
      align-items: flex-start;
      gap: 28px;
      padding-left: clamp(12px, 3vw, 48px)
    }

    .panel.last .d {
      font-size: clamp(2rem, 4.6vw, 4.4rem)
    }

    .reel-bar {
      height: 1px;
      background: var(--line);
      margin-inline: var(--gut);
      position: relative
    }

    .reel-bar i {
      position: absolute;
      left: 0;
      top: -1px;
      height: 3px;
      width: 100%;
      background: var(--i);
      transform-origin: 0 50%;
      transform: scaleX(0)
    }

    @media (max-width:899px) {
      .reel-pin {
        position: static;
        height: auto;
        min-height: 0;
        padding-block: var(--sec)
      }

      .track {
        flex: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 6px
      }

      .track::-webkit-scrollbar {
        display: none
      }

      .panel {
        width: 82vw;
        scroll-snap-align: center
      }

      .cover {
        flex: none;
        aspect-ratio: 4/5
      }

      .panel.last {
        width: 70vw;
        min-height: 0;
        padding: 0 0 0 8px
      }

      .reel-bar {
        display: none
      }
    }

    /* figures */
    .figs {
      border-top: 1px solid var(--line);
      margin-bottom: var(--sec)
    }

    .figs>div {
      grid-column: span 4;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: clamp(12px, 2vw, 28px)
    }

    .figs b {
      font-family: var(--wide);
      font-stretch:110%;
      font-weight: 760;
      font-size: clamp(2.6rem, 10.5vw, 11rem);
      line-height: .8;
      letter-spacing: -.03em;
      font-variant-numeric: tabular-nums
    }

    .figs b sup {
      font-size: .42em;
      vertical-align: top;
      letter-spacing: 0;
      margin-left: .05em;
      line-height: 1
    }

    /* process: a thread stitched by scrolling */
    .thread {
      position: relative
    }

    .thread svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none
    }

    .thread path {
      fill: none;
      stroke: var(--i)
    }

    .thread .bg {
      stroke: var(--line);
      stroke-width: 1.5;
      stroke-dasharray: 7 9
    }

    .thread .fg {
      stroke-width: 2.5;
      stroke-linecap: round
    }

    .needle {
      position: absolute;
      left: 0;
      top: 0;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: var(--i);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 14%, transparent);
      pointer-events: none
    }

    .thread li {
      position: relative;
      height: clamp(280px, 32vw, 430px);
      align-content: center
    }

    .node {
      position: absolute;
      left: var(--x);
      top: 50%;
      width: clamp(64px, 7.4vw, 104px);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--g);
      box-shadow: inset 0 0 0 1.5px var(--i);
      display: grid;
      place-items: center;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1.6rem, 3vw, 2.8rem);
      line-height: 1;
      transition: background .7s var(--ease), color .7s var(--ease), transform .7s var(--ease)
    }

    .thread li.hit .node {
      background: var(--i);
      color: var(--g);
      transform: translate(-50%, -50%) scale(1.08)
    }

    .thread li .body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      opacity: .28;
      transition: opacity .8s var(--ease)
    }

    .thread li.hit .body {
      opacity: 1
    }

    .thread li:nth-child(odd) {
      --x: 28%
    }

    .thread li:nth-child(odd) .body {
      grid-column: 6/12
    }

    .thread li:nth-child(even) {
      --x: 72%
    }

    .thread li:nth-child(even) .body {
      grid-column: 2/7
    }

    .thread h3 {
      font-size: clamp(1.6rem, 3.6vw, 3.6rem);
      font-weight: 400;
      letter-spacing: -.05em;
      line-height: 1;
      text-wrap: balance
    }

    .thread p {
      color: var(--mute);
      max-width: 44ch
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--i)
    }

    .tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor
    }

    .terms {
      margin-bottom: clamp(40px, 5vw, 80px)
    }

    .portal {
      position: relative;
      z-index: 1;
      height: 30vh;
      pointer-events: none
    }

    .ink {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: var(--blue)
    }

    #pricing.dry {
      background: transparent;
      --mute: var(--paper);
      --line: var(--paper)
    }

    #pricing>section {
      position: relative;
      z-index: 2
    }

    .needle {
      transition: opacity .2s
    }

    .terms li {
      grid-column: span 3;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--i)
    }

    @media (max-width:760px) {
      .thread li {
        height: 270px
      }

      .thread li:nth-child(n) {
        --x: 32px
      }

      .thread li:nth-child(n) .body {
        grid-column: 1/-1;
        margin-left: 84px
      }

      .node {
        width: 64px
      }
    }

    /* pricing: cards that lean toward the pointer */
    .plans {
      perspective: 1400px
    }

    .plans>article {
      grid-column: span 6;
      position: relative;
      border-radius: 16px;
      padding: clamp(26px, 3.4vw, 56px);
      display: flex;
      flex-direction: column;
      gap: clamp(22px, 2.8vw, 40px);
      transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
      transition: transform .7s var(--ease);
      overflow: hidden
    }

    .plans>article::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--lite) 26%, transparent), transparent 70%);
      opacity: var(--sh, 0);
      transition: opacity .6s
    }

    .plans>article.on-blue {
      background: var(--raise);
      box-shadow: inset 0 0 0 1px var(--line)
    }

    .plan-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px
    }

    .plan-top h3 {
      font-size: clamp(1.5rem, 2.6vw, 2.4rem)
    }

    .price {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(4rem, 9vw, 9rem);
      line-height: .8;
      letter-spacing: -.03em
    }

    .price small {
      font-family: var(--mono);
      font-style: normal;
      font-size: .7rem;
      letter-spacing: .08em;
      color: var(--mute);
      margin-left: 1em;
      vertical-align: top;
      line-height: 2
    }

    .plans .p {
      font-size: 1rem
    }

    .plans ul li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-block: 15px;
      border-top: 1px solid var(--line)
    }

    .plans ul li:last-child {
      border-bottom: 1px solid var(--line)
    }

    .plans ul li::after {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--i);
      flex: none
    }

    .plan-go {
      display: flex;
      align-items: center;
      gap: 18px 28px;
      flex-wrap: wrap;
      margin-top: auto
    }

    /* crew */
    .crew>article {
      grid-column: span 6;
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: clamp(16px, 2vw, 32px);
      align-items: end;
      padding-top: 20px;
      border-top: 1px solid var(--line)
    }

    .plate {
      aspect-ratio: 4/5;
      max-width: 100%;
      border-radius: 12px;
      background: var(--i) center/cover;
      color: var(--g);
      display: flex;
      align-items: flex-end;
      padding: clamp(14px, 1.6vw, 24px);
      overflow: hidden;
      font-family: var(--wide);
      font-stretch:115%;
      font-weight: 800;
      font-size: clamp(3rem, 7vw, 7rem);
      line-height: .72;
      letter-spacing: -.04em
    }

    .plate.has {
      color: transparent
    }

    .who {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0
    }

    .who h3 {
      font-size: clamp(1.6rem, 3vw, 3rem)
    }

    .who .s {
      font-size: 1.25rem
    }

    .who p {
      color: var(--mute);
      font-size: .98rem;
      max-width: 40ch
    }

    .soc {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 6px
    }

    .soc a {
      color: var(--i)
    }

    .after {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px 40px;
      flex-wrap: wrap;
      margin-top: clamp(40px, 5vw, 72px);
      padding-top: 24px;
      border-top: 1px solid var(--line)
    }

    .after>div {
      display: flex;
      gap: 14px 24px;
      align-items: center;
      flex-wrap: wrap;
      color: var(--mute)
    }

    .live {
      display: inline-flex;
      align-items: center;
      gap: 12px
    }

    .live::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--i);
      animation: pulse 2.4s ease-out infinite
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(4, 0, 221, .45)
      }

      100% {
        box-shadow: 0 0 0 14px rgba(4, 0, 221, 0)
      }
    }

    /* faq */
    .faq-h {
      grid-column: 1/6;
      align-self: start;
      position: sticky;
      top: calc(env(safe-area-inset-top, 0px) + 110px)
    }

    .faq-h h2 {
      font-size: clamp(1.8rem, 3.6vw, 3.6rem)
    }

    .faq-list {
      grid-column: 7/-1;
      min-width: 0
    }

    details {
      border-top: 1px solid var(--line)
    }

    details:last-child {
      border-bottom: 1px solid var(--line)
    }

    summary {
      list-style: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      padding-block: clamp(22px, 2.4vw, 32px);
      font-size: clamp(1.15rem, 1.7vw, 1.5rem);
      letter-spacing: -.03em;
      line-height: 1.25
    }

    summary::-webkit-details-marker {
      display: none
    }

    summary::after {
      content: "";
      width: 14px;
      height: 14px;
      background: linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
      transition: transform .7s var(--ease)
    }

    details[open] summary::after {
      transform: rotate(135deg)
    }

    details p {
      color: var(--mute);
      max-width: 58ch;
      padding-bottom: clamp(24px, 3vw, 40px)
    }

    @supports (interpolate-size:allow-keywords) {
      :root {
        interpolate-size: allow-keywords
      }

      details::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .7s var(--ease), content-visibility .7s allow-discrete
      }

      details[open]::details-content {
        block-size: auto
      }
    }

    /* sign-off */
    .end {
      padding-top: var(--sec)
    }

    .end h2 {
      grid-column: 1/9;
      font-size: clamp(2.4rem, 8.4vw, 9rem)
    }

    .end .side {
      grid-column: 9/-1;
      justify-self: end;
      align-self: end;
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: flex-end;
      text-align: right
    }

    .ring {
      position: relative;
      width: clamp(150px, 17vw, 230px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--i);
      color: var(--g);
      display: grid;
      place-items: center;
      will-change: transform
    }

    .ring svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      animation: spin 16s linear infinite
    }

    .ring text {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: .06em;
      text-transform: uppercase;
      fill: currentColor
    }

    .ring span {
      font-size: clamp(1.6rem, 2.6vw, 2.6rem);
      line-height: 1;
      transition: transform .6s var(--ease)
    }

    .ring:hover span {
      transform: rotate(45deg)
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .mail {
      grid-column: 1/-1;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: clamp(40px, 6vw, 96px);
      padding-top: 22px;
      border-top: 1px solid var(--line)
    }

    .mail button {
      font-size: clamp(1.3rem, 3.4vw, 3.2rem);
      letter-spacing: -.045em;
      line-height: 1.1;
      user-select: all;
      overflow-wrap: anywhere;
      text-align: left
    }

    .sign {
      position: relative;
      height: clamp(180px, 34vw, 560px);
      margin-top: clamp(24px, 4vw, 64px);
      overflow: hidden
    }

    .sign .nogl {
      left: var(--gut);
      right: var(--gut);
      top: 20%
    }

    .word {
      display: block;
      width: 100%;
      aspect-ratio: 1500/235;
      background: var(--i);
      margin-block: clamp(48px, 8vw, 128px) clamp(28px, 4vw, 56px);
      -webkit-mask: var(--word) center/contain no-repeat;
      mask: var(--word) center/contain no-repeat
    }

    .foot {
      display: flex;
      justify-content: space-between;
      gap: 14px 40px;
      flex-wrap: wrap;
      padding-block: 20px 26px;
      border-top: 1px solid var(--line)
    }

    .foot nav {
      display: flex;
      gap: 12px 28px;
      flex-wrap: wrap
    }

    .foot a:hover {
      color: var(--i)
    }

    /* pointer */
    .cur {
      position: fixed;
      left: 0;
      top: 0;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -6px;
      border-radius: 50%;
      background: #eff211;
      mix-blend-mode: difference;
      pointer-events: none;
      z-index: 150;
      opacity: 0;
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: .62rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: transparent;
      transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), opacity .3s, background .3s
    }

    .cur.big {
      width: 64px;
      height: 64px;
      margin: -32px 0 0 -32px
    }

    .cur.lab {
      width: 88px;
      height: 88px;
      margin: -44px 0 0 -44px;
      mix-blend-mode: normal;
      background: var(--paper);
      color: var(--blue);
      box-shadow: 0 0 0 1.5px var(--blue)
    }

    @media (hover:none),
    (pointer:coarse) {
      .cur {
        display: none
      }
    }

    .rv {
      transition: opacity 1.6s var(--ease), transform 1.6s var(--ease)
    }

    .rv.wait {
      opacity: .15;
      transform: translateY(28px)
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important
      }

      html {
        scroll-behavior: auto
      }

      .load {
        display: none
      }

      .rv.wait {
        opacity: 1;
        transform: none
      }

      .say .w {
        color: var(--i)
      }

      .thread li .body {
        opacity: 1
      }
    }

    @media (max-width:960px) {

      .head h2,
      .head .p,
      .hero h1,
      .hero-side,
      .say-wrap,
      .faq-h,
      .faq-list,
      .end h2,
      .end .side {
        grid-column: 1/-1
      }

      .head .p,
      .hero-side,
      .end .side {
        justify-self: start
      }

      .end .side {
        align-items: flex-start;
        text-align: left
      }

      .faq-h {
        position: static
      }

      .plans>article,
      .crew>article {
        grid-column: 1/-1
      }

      .terms li {
        grid-column: span 6
      }

      .disc li {
        grid-template-columns: minmax(0, 1fr)
      }

      .disc li .k {
        display: none
      }

      .disc .name {
        font-size: clamp(3rem, 13vw, 5rem)
      }

      .disc .what {
        opacity: 1;
        transform: none;
        padding-bottom: 8px
      }

      .hero-top p:last-child {
        display: none
      }
    }

    @media (max-width:520px) {
      .figs {
        column-gap: 10px
      }

      .crew>article {
        grid-template-columns: minmax(0, 1fr)
      }

      .plate {
        aspect-ratio: 16/10
      }

      .plate.has {
        aspect-ratio: 4/5
      }

      .hero-side .p {
        display: none
      }
    }

    /* ---- one continuous ground: the nav takes the live background colour */
    header.nav::before,
    header.nav.inv::before {
      background: color-mix(in srgb, var(--bgc, #0400dd) 80%, transparent)
    }

    .prog {
      height: 2px
    }

    .cover {
      border-radius: 20px
    }

    /* ---- pricing: one clear recommendation, the action beside the price, proof underneath */
    .plans {
      perspective: none;
      align-items: stretch
    }

    .plans>article {
      grid-column: span 6;
      position: relative;
      border-radius: 22px;
      padding: clamp(26px, 3.2vw, 52px);
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 2.2vw, 30px);
      transform: none;
      overflow: visible;
      transition: transform .9s var(--ease), box-shadow .9s var(--ease)
    }

    .plans>article::before {
      content: none
    }

    .plans>article:not(.rec) {
      box-shadow: inset 0 0 0 1px var(--line);
      margin-block: clamp(0px, 1.8vw, 28px)
    }

    .plans>article.rec {
      box-shadow: 0 44px 90px -44px rgba(2, 0, 60, .75)
    }

    .plans>article:hover {
      transform: translateY(-6px)
    }

    .plan-top {
      align-items: center;
      min-height: 34px
    }

    .plan-top h3 {
      font-size: clamp(1.5rem, 2.4vw, 2.2rem)
    }

    .badge {
      font-family: var(--mono);
      font-size: .66rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1;
      padding: 9px 13px;
      border-radius: 999px;
      background: var(--i);
      color: var(--g);
      white-space: nowrap
    }

    .for {
      color: var(--mute);
      max-width: 36ch
    }

    .price {
      font-size: clamp(3.6rem, 6.6vw, 6.6rem);
      line-height: .86
    }

    .price-note {
      color: var(--mute);
      font-size: .95rem;
      margin-top: 12px
    }

    .plans .btn {
      width: 100%;
      justify-content: space-between;
      padding: 8px 8px 8px 26px
    }

    .plans .btn i {
      width: 46px;
      height: 46px
    }

    .plans ul {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-top: clamp(20px, 2.2vw, 30px);
      border-top: 1px solid var(--line)
    }

    .plans ul li,
    .plans ul li:last-child {
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      gap: 14px;
      padding: 0;
      border: 0
    }

    .plans ul li::after {
      content: none
    }

    .plans ul li::before {
      content: "";
      flex: none;
      width: 13px;
      height: 7px;
      border-left: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-4px) rotate(-45deg)
    }

    .assure {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 30px;
      margin-top: clamp(36px, 4.4vw, 64px)
    }

    .assure li {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--i)
    }

    .assure li::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }

    .est {
      text-align: center;
      color: var(--mute);
      margin-top: 18px
    }

    .est a {
      color: var(--i);
      margin-left: .4em
    }

    #pricing .plans,
    #pricing .assure,
    #pricing .est {
      transition: opacity .9s var(--ease)
    }

    #pricing.dry .plans,
    #pricing.dry .assure,
    #pricing.dry .est {
      opacity: 0
    }

    /* ---- crew: names carry it; portraits appear only when a photo loads */
    .crew>article {
      grid-column: span 6;
      display: flex;
      align-items: center;
      gap: clamp(16px, 2vw, 28px);
      padding-block: clamp(22px, 2.6vw, 40px) 0;
      border-top: 1px solid var(--line)
    }

    .plate,
    .plate.has {
      display: none;
      width: clamp(84px, 9vw, 128px);
      aspect-ratio: 1;
      border-radius: 50%;
      padding: 0;
      font-size: 0;
      flex: none
    }

    .plate.has {
      display: block
    }

    .who {
      gap: 10px
    }

    /* ---- sign-off */
    .end .side {
      justify-self: end;
      align-items: flex-end
    }

    @media (max-width:760px) {
      .hero h1 {
        font-size: 7vw
      }

      .est a {
        padding-block: 12px;
        display: inline-flex
      }

      .est a::after {
        bottom: 8px
      }
    }

    @media (max-width:960px) {
      .plans>article {
        grid-column: 1/-1
      }

      .plans>article:not(.rec) {
        margin-block: 0
      }

      .plans>article.rec {
        order: -1
      }

      .crew>article {
        grid-column: 1/-1
      }

      .end .side {
        justify-self: start;
        align-items: flex-start
      }

      .assure {
        justify-content: flex-start
      }

      .est {
        text-align: left
      }
    }

    /* ---- entrance: the page opens on blue and the logo blooms outward in dots; the hero's dots thin out as you leave */
    .hero canvas {
      -webkit-mask-image: linear-gradient(#000 58%, transparent 97%);
      mask-image: linear-gradient(#000 58%, transparent 97%)
    }

    .nav-in {
      animation: fade 1.2s .8s var(--ease) both
    }

    /* ---- calmer scale: everything a step or two smaller, narrower measure, more air */
    :root {
      --sec: clamp(72px, 9vw, 136px)
    }

    body {
      font-size: 16px
    }

    .wrap {
      max-width: 1280px
    }

    h2.d {
      font-size: clamp(1.6rem, 3.3vw, 3rem)
    }

    .p {
      font-size: 1rem
    }

    .btn {
      font-size: .9rem;
      padding: 6px 6px 6px 20px;
      gap: 14px
    }

    .btn i {
      width: 34px;
      height: 34px;
      font-size: .9rem
    }

    .hero {
      max-height: 900px
    }

    .hero h1 {
      font-size: clamp(1.9rem, 3.9vw, 3.6rem)
    }

    .say {
      font-size: clamp(1.35rem, 2.7vw, 2.5rem);
      max-width: 26ch;
      line-height: 1.14;
      letter-spacing: -.035em
    }

    .figs b {
      font-size: clamp(2.2rem, 5.4vw, 5rem)
    }

    .thread li {
      height: clamp(210px, 20vw, 270px)
    }

    .node {
      width: clamp(52px, 4.6vw, 66px);
      font-size: clamp(1.3rem, 1.9vw, 1.7rem)
    }

    .thread h3 {
      font-size: clamp(1.25rem, 2vw, 1.8rem);
      letter-spacing: -.04em
    }

    .thread p {
      font-size: .98rem
    }

    .plans {
      max-width: 980px;
      margin-inline: auto
    }

    .plans>article {
      padding: clamp(22px, 2.4vw, 36px);
      gap: clamp(16px, 1.7vw, 22px);
      border-radius: 18px
    }

    .plan-top h3 {
      font-size: clamp(1.25rem, 1.7vw, 1.5rem)
    }

    .price {
      font-size: clamp(2.6rem, 4vw, 3.8rem)
    }

    .plans .btn {
      padding: 6px 6px 6px 20px
    }

    .plans .btn i {
      width: 38px;
      height: 38px
    }

    .plans ul {
      gap: 11px;
      font-size: .97rem
    }

    .who h3 {
      font-size: clamp(1.25rem, 1.9vw, 1.75rem)
    }

    .who .s {
      font-size: 1.08rem
    }

    .faq-h h2 {
      font-size: clamp(1.5rem, 2.5vw, 2.3rem)
    }

    summary {
      font-size: clamp(1.02rem, 1.25vw, 1.18rem);
      padding-block: clamp(18px, 1.8vw, 24px)
    }

    .end {
      padding-top: clamp(64px, 8vw, 112px)
    }

    .end h2 {
      font-size: clamp(1.9rem, 4.6vw, 4.2rem)
    }

    .mail {
      margin-top: clamp(32px, 4.4vw, 64px)
    }

    .mail button {
      font-size: clamp(1.15rem, 2vw, 1.8rem)
    }

    .word {
      margin-block: clamp(28px, 4vw, 56px) clamp(20px, 2.4vw, 32px)
    }

    .menu ol a {
      font-size: clamp(1.8rem, 9vw, 2.8rem)
    }

    @media (min-width:900px) {
      .reel-head h2 {
        font-size: clamp(1.5rem, 2.4vw, 2.2rem)
      }

      .reel-count {
        font-size: clamp(1.2rem, 1.6vw, 1.5rem)
      }

      .track {
        align-items: center
      }

      .panel {
        width: min(42vw, 620px)
      }

      .cover {
        flex: none;
        aspect-ratio: 4/3;
        container-type: size
      }

      .cover .chip {
        width: 42px;
        height: 42px
      }

      .meta .d {
        font-size: clamp(1.1rem, 1.6vw, 1.5rem)
      }

      .meta .s {
        font-size: clamp(1rem, 1.3vw, 1.2rem)
      }

      .panel.last {
        width: min(30vw, 400px)
      }

      .panel.last .d {
        font-size: clamp(1.5rem, 2.4vw, 2.2rem)
      }
    }

    @media (max-width:760px) {
      .hero h1 {
        font-size: 6.2vw
      }

      .thread li {
        height: 230px
      }

      .node {
        width: 56px
      }

      .thread li:nth-child(n) .body {
        margin-left: 76px
      }
    }

    /* ---- nav: a light pane of glass that steps aside while you read */
    header.nav {
      transition: color .5s var(--ease), transform .7s var(--ease)
    }

    header.nav.hide:not(.mo) {
      transform: translateY(-110%)
    }

    header.nav::before,
    header.nav.inv::before {
      background: color-mix(in srgb, var(--bgc, #0400dd) 22%, transparent);
      backdrop-filter: blur(20px) saturate(150%);
      -webkit-backdrop-filter: blur(20px) saturate(150%)
    }

    .nav-in {
      padding-block: 13px
    }

    .nav nav {
      font-size: .88rem
    }

    .nav .call {
      padding: 8px 14px;
      font-size: .84rem
    }

    .mark {
      height: 17px
    }

    /* ---- footer stays where it is; the page lifts away to show it */
    main {
      position: relative;
      z-index: 1;
      background: var(--bgc, #0400dd);
      border-radius: 0 0 clamp(18px, 2.6vw, 36px) clamp(18px, 2.6vw, 36px)
    }

    footer.end {
      position: sticky;
      bottom: 0;
      z-index: 0
    }

    @media (max-height:620px) {
      footer.end {
        position: static
      }
    }


    /* ---- crew: one portrait frame and a roster; pointing at a name brings that person forward */
    .crew2 {
      align-items: center;
      row-gap: clamp(28px, 5vw, 48px)
    }

    .frame {
      grid-column: 1/6;
      position: relative;
      aspect-ratio: 4/5;
      max-width: 100%;
      border-radius: clamp(18px, 2vw, 28px);
      overflow: hidden;
      background: var(--i);
      box-shadow: 0 40px 80px -48px rgba(2, 0, 90, .55)
    }

    .shot {
      position: absolute;
      inset: 0;
      background: var(--blue) center/cover;
      color: var(--paper);
      display: flex;
      align-items: flex-end;
      padding: clamp(18px, 2.2vw, 32px);
      font-family: var(--wide);
      font-stretch:115%;
      font-weight: 800;
      font-size: clamp(3rem, 8vw, 7rem);
      line-height: .74;
      letter-spacing: -.04em;
      opacity: 0;
      transform: scale(1.07);
      transition: opacity .9s var(--ease), transform 1.4s var(--ease)
    }

    .shot.act {
      opacity: 1;
      transform: none
    }

    .shot.has {
      color: transparent
    }

    .tally {
      position: absolute;
      right: 16px;
      top: 14px;
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--paper);
      color: var(--blue)
    }

    .tally b {
      font-weight: 400
    }

    .roster {
      grid-column: 7/-1;
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 3.4vw, 48px);
      min-width: 0
    }

    .roster ul {
      display: flex;
      flex-direction: column;
      gap: clamp(14px, 1.8vw, 24px)
    }

    .roster li {
      opacity: .34;
      transition: opacity .7s var(--ease)
    }

    .roster li.act {
      opacity: 1
    }

    .who2 {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      width: 100%;
      text-align: left;
      flex-wrap: wrap
    }

    .who2 .d {
      font-size: clamp(1.7rem, 3.3vw, 3rem);
      transition: transform .8s var(--ease)
    }

    .roster li.act .who2 .d {
      transform: translateX(clamp(0px, .8vw, 12px))
    }

    .who2 .s {
      font-size: clamp(1.05rem, 1.4vw, 1.3rem)
    }

    .more {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .8s var(--ease)
    }

    .roster li.act .more {
      grid-template-rows: 1fr
    }

    .more>div {
      overflow: hidden;
      min-height: 0
    }

    .more p {
      color: var(--mute);
      max-width: 44ch;
      padding-top: 14px
    }

    .more .soc {
      margin-top: 14px;
      padding-bottom: 4px
    }

    .join {
      display: flex;
      align-items: center;
      gap: 16px 28px;
      flex-wrap: wrap
    }

    @media (max-width:960px) {

      .frame,
      .roster {
        grid-column: 1/-1
      }

      .frame {
        aspect-ratio: 5/4
      }
    }

    /* ---- crew: a single sentence, the two portraits set into the line like words */
    .crewline {
      font-size: clamp(1.5rem, 3.5vw, 3.3rem);
      line-height: 1.22;
      letter-spacing: -.04em;
      max-width: 24ch;
      text-wrap: balance
    }

    .crewline em {
      font-size: 1.1em;
      margin-right: .14em
    }

    .crewline b {
      font-weight: 500;
      white-space: nowrap
    }

    .face {
      display: inline-block;
      width: 1.7em;
      height: 1em;
      margin-right: .22em;
      border-radius: 999px;
      vertical-align: -.14em;
      background: var(--i) center/cover;
      transition: width .8s var(--ease)
    }

    .face:hover {
      width: 2.6em
    }

    .crewfoot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px clamp(28px, 5vw, 72px);
      margin-top: clamp(36px, 5vw, 72px)
    }

    .crewfoot .k {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 18px
    }

    .crewfoot .k span {
      color: var(--mute)
    }

    .crewfoot .k a {
      color: var(--i);
      padding-block: 12px;
      display: inline-flex
    }

    .crewfoot .k a::after {
      bottom: 8px
    }

    .crewfoot .join {
      margin-left: auto
    }

    @media (max-width:760px) {
      .crewfoot .join {
        margin-left: 0
      }

      .crewline {
        max-width: none
      }
    }

    /* ---- applications: one quiet line */
    .hiring {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(20px, 2.4vw, 32px);
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px var(--line);
      font-size: clamp(1rem, 1.5vw, 1.3rem);
      letter-spacing: -.02em;
      transition: background .6s var(--ease), color .6s var(--ease)
    }

    .hiring .live {
      padding: 0;
      gap: 14px
    }

    .hiring .live::after {
      content: none
    }

    .hiring i {
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--i);
      color: var(--g);
      display: grid;
      place-items: center;
      font-style: normal;
      transition: transform .6s var(--ease), background .6s var(--ease), color .6s var(--ease)
    }

    .hiring:hover {
      background: var(--i);
      color: var(--g)
    }

    .hiring:hover i {
      background: var(--g);
      color: var(--i);
      transform: rotate(45deg)
    }

    .hiring:hover .live::before {
      background: var(--g)
    }

    /* ---- nav: a small floating capsule instead of a bar */
    .prog {
      display: none
    }

    header.nav {
      top: calc(env(safe-area-inset-top, 0px) + 12px)
    }

    header.nav::before,
    header.nav.inv::before {
      content: none
    }

    .nav-in.wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(14px, 2.4vw, 32px);
      width: fit-content;
      max-width: calc(100% - 2 * var(--gut));
      margin-inline: auto;
      padding: 5px 5px 5px 20px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--bgc, #0400dd) 58%, transparent);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), 0 14px 34px -22px rgba(2, 0, 60, .6);
      transition: background .5s var(--ease)
    }

    header.nav.mo .nav-in.wrap {
      background: transparent;
      box-shadow: none
    }

    .nav nav {
      gap: 2px;
      font-size: .86rem
    }

    .nav nav a {
      padding: 9px 14px;
      border-radius: 999px;
      color: inherit;
      opacity: .72;
      transition: opacity .4s, background .4s
    }

    .nav nav a:hover,
    .nav nav a.on {
      opacity: 1;
      background: color-mix(in srgb, currentColor 13%, transparent)
    }

    .nav .right {
      gap: 6px
    }

    .nav .call {
      background: currentColor;
      box-shadow: none;
      padding: 10px 16px;
      font-size: .84rem;
      transition: transform .5s var(--ease)
    }

    .nav .call span {
      color: var(--blue)
    }

    .nav.inv .call span {
      color: var(--paper)
    }

    .nav .call::before {
      background: var(--blue)
    }

    .nav.inv .call::before {
      background: var(--paper)
    }

    .nav .call:hover {
      transform: scale(1.04)
    }

    @media (max-width:760px) {
      .nav-in.wrap {
        width: auto;
        max-width: none;
        margin-inline: var(--gut);
        padding: 5px 5px 5px 16px
      }

      .nav .call,
      .burger {
        height: 40px
      }

      .burger {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent)
      }
    }

    /* ---- hero action: one confident button under the headline, with a quiet second option */
    .hero h1 {
      grid-column: 1/-1
    }

    .hero-cta {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px 28px;
      margin-top: clamp(4px, 1vw, 12px);
      animation: fade 1.3s 1.35s var(--ease) both
    }

    .btn.big {
      font-size: 1rem;
      padding: 7px 7px 7px 22px;
      gap: 14px;
      box-shadow: inset 0 0 0 1px var(--i), 0 22px 44px -22px rgba(2, 0, 50, .8)
    }

    .btn.big .pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 0 rgba(4, 0, 221, .5);
      animation: pulse 2.2s ease-out infinite;
      margin-right: -2px
    }

    .btn.big:hover .pulse {
      background: var(--paper)
    }

    .btn.big i {
      width: 44px;
      height: 44px;
      font-size: 1.05rem;
      overflow: hidden;
      position: relative;
      margin-left: 8px
    }

    .btn.big i b {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-weight: 400;
      transition: transform .6s var(--ease)
    }

    .btn.big i b+b {
      transform: translate(-110%, 110%)
    }

    .btn.big:hover i {
      transform: none
    }

    .btn.big:hover i b {
      transform: translate(110%, -110%)
    }

    .btn.big:hover i b+b {
      transform: none
    }

    .hero-cta .txt {
      font-size: .95rem
    }

    @media (max-width:760px) {
      .hero-cta .txt {
        padding-block: 12px
      }

      .hero-cta .txt::after {
        bottom: 8px
      }
    }

    /* ---- footer: applications as a quiet line among the links */
    .apply {
      color: var(--i);
      display: inline-flex;
      align-items: center;
      gap: 9px
    }

    .apply::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor
    }

    /* ---- touch polish and phone layout */
    * {
      -webkit-tap-highlight-color: transparent
    }

    .btn,
    .nav .call,
    .burger,
    .panel,
    .plans>article,
    summary {
      touch-action: manipulation
    }

    .btn:active,
    .nav .call:active,
    .burger:active {
      transform: scale(.96)
    }

    .rise {
      transition: opacity 1.1s var(--ease), transform 1.1s var(--ease)
    }

    .rise.wait {
      opacity: .1;
      transform: translateY(30px)
    }

    .plans>article.rise:not(.wait) {
      transition: opacity 1.1s var(--ease), transform .9s var(--ease), box-shadow .9s var(--ease)
    }

    .rv.wait {
      opacity: .6;
      transform: none
    }

    @media (max-width:899px) {
      .panel {
        transform-origin: 50% 85%;
        will-change: transform
      }

      .reel-bar {
        display: block;
        margin-top: 22px
      }

      .track {
        padding-block: 10px 4px;
        scroll-padding-inline: var(--gut)
      }

      .cover>svg,
      .cover>.art {
        transition: none
      }
    }

    @media (max-width:760px) {
      :root {
        --sec: clamp(64px, 16vw, 96px)
      }

      .figs>div {
        gap: 10px
      }

      .figs .k {
        min-height: 3.2em
      }

      .say {
        max-width: none
      }

      .plans>article:active {
        transform: scale(.985)
      }

      .end {
        padding-top: 56px
      }

      .foot {
        gap: 6px 24px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px)
      }

      .apply {
        padding-block: 12px
      }

      .hero-row {
        padding-bottom: clamp(28px, 7vw, 44px)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .rise.wait {
        opacity: 1;
        transform: none
      }
    }

    /* ---- email: the address opens mail, the chip copies */
    .mail {
      align-items: center
    }

    .mail a {
      font-size: clamp(1.15rem, 2vw, 1.8rem);
      letter-spacing: -.045em;
      line-height: 1.1;
      overflow-wrap: anywhere;
      background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
      padding-block: 8px;
      transition: background-size .7s var(--ease)
    }

    .mail a:hover {
      background-size: 100% 1px
    }

    .mail button.copy {
      font-size: .7rem;
      letter-spacing: .08em;
      padding: 11px 15px;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1px var(--line);
      color: var(--i);
      user-select: none;
      transition: background .5s var(--ease), color .5s var(--ease)
    }

    .mail button.copy:hover {
      background: var(--i);
      color: var(--g)
    }

    /* ---- nav: menu button as an icon */
    .burger {
      position: relative
    }

    .burger::before,
    .burger::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 1.5px;
      margin: -.75px 0 0 -8px;
      background: currentColor;
      transition: transform .6s var(--ease)
    }

    .burger::before {
      transform: translateY(-3.5px)
    }

    .burger::after {
      transform: translateY(3.5px)
    }

    .burger[aria-expanded="true"]::before {
      transform: rotate(45deg)
    }

    .burger[aria-expanded="true"]::after {
      transform: rotate(-45deg)
    }

    @media (max-width:760px) {
      .burger {
        width: 40px;
        padding: 0;
        box-shadow: none
      }

      .nav .call {
        height: 38px;
        padding: 0 15px
      }

      .nav-in.wrap {
        padding: 5px 4px 5px 16px
      }
    }

    /* ---- one still, light ground: paper throughout, blue as ink; blue surfaces only for the work covers, the recommended plan and the footer */
    .portal {
      height: 0
    }

    .plans>article.rec {
      background: var(--blue)
    }

    .plans>article:not(.rec) {
      background: var(--raise)
    }

    .btn.big .pulse {
      background: var(--g)
    }

    .btn.big:hover .pulse {
      background: var(--i)
    }

    .btn.big {
      box-shadow: inset 0 0 0 1px var(--i), 0 20px 40px -24px rgba(4, 0, 120, .55)
    }

    .nav-in.wrap {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent), 0 14px 34px -24px rgba(4, 0, 120, .35)
    }

    /* ---- open menu: the call button bows out, leaving only the close icon */
    .nav .call {
      transition: transform .5s var(--ease), opacity .4s ease
    }

    header.nav.mo .call {
      opacity: 0;
      transform: scale(.85);
      pointer-events: none
    }

    /* ---- smooth scroll */
    html.lenis,
    html.lenis body {
      height: auto
    }

    .lenis.lenis-smooth {
      scroll-behavior: auto !important
    }

    .lenis.lenis-stopped {
      overflow: hidden
    }

    /* ---- faq: answers ease open and shut, text settles in a beat later */
    .qa {
      border-top: 1px solid var(--line)
    }

    .qa:last-child {
      border-bottom: 1px solid var(--line)
    }

    .q {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: center;
      width: 100%;
      text-align: left;
      padding-block: clamp(18px, 1.9vw, 26px);
      font-size: clamp(1.02rem, 1.25vw, 1.18rem);
      letter-spacing: -.03em;
      line-height: 1.3;
      touch-action: manipulation
    }

    .q span {
      transition: transform .7s var(--ease)
    }

    .q i {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px var(--line);
      transition: transform .8s var(--ease), background .6s var(--ease), color .6s var(--ease)
    }

    .q i::before,
    .q i::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 11px;
      height: 1.5px;
      margin: -.75px 0 0 -5.5px;
      background: currentColor;
      transition: transform .8s var(--ease)
    }

    .q i::after {
      transform: rotate(90deg)
    }

    .qa.open .q i {
      background: var(--i);
      color: var(--g);
      transform: rotate(180deg)
    }

    .qa.open .q i::after {
      transform: rotate(0deg)
    }

    .qa.open .q span {
      transform: translateX(6px)
    }

    @media (hover:hover) {
      .q:hover span {
        transform: translateX(6px)
      }
    }

    .a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .85s cubic-bezier(.22, 1, .36, 1)
    }

    .qa.open .a {
      grid-template-rows: 1fr
    }

    .a>div {
      overflow: hidden;
      min-height: 0
    }

    .a p {
      color: var(--mute);
      max-width: 58ch;
      padding: 0 0 clamp(20px, 2.4vw, 30px) 6px;
      opacity: 0;
      transform: translateY(-10px);
      filter: blur(5px);
      transition: opacity .35s ease, transform .7s cubic-bezier(.22, 1, .36, 1), filter .4s ease
    }

    .qa.open .a p {
      opacity: 1;
      transform: none;
      filter: none;
      transition: opacity .5s ease .14s, transform .9s cubic-bezier(.22, 1, .36, 1) .06s, filter .55s ease .14s
    }

    /* ---- footer: the page recedes like a card being set down, and the footer comes forward into focus
   while the hero's dot field blooms out from the bottom edge — the site closes the way it opened */
    :root {
      --fp: 0
    }

    main {
      transform-origin: 50% 100%;
      transform: scale(calc(1 - var(--fp) * .055));
      box-shadow: 0 30px 80px -30px rgba(2, 0, 60, calc(var(--fp) * .55));
      border-radius: 0 0 calc(18px + var(--fp) * 34px) calc(18px + var(--fp) * 34px)
    }

    footer.end {
      overflow: hidden
    }

    footer.end>.wrap {
      --t: clamp(0, (var(--fp) - .12) * 1.5, 1);
      position: relative;
      transform: translateY(calc((1 - var(--t)) * 40px)) scale(calc(1.06 - var(--t) * .06));
      filter: blur(calc((1 - var(--t)) * 7px));
      opacity: calc(.25 + var(--t) * .75);
      transform-origin: 50% 100%
    }

    html,
    body {
      background: var(--sidebg, var(--bgc, #0400dd)) !important
    }

    @media (max-width:760px) {
      main {
        transform: scale(calc(1 - var(--fp) * .035)) translateY(calc(var(--fp) * -6px));
        border-radius: 0 0 calc(14px + var(--fp) * 22px) calc(14px + var(--fp) * 22px)
      }

      footer.end>.wrap {
        filter: none;
        transform: none;
        opacity: 1
      }

      footer.end .grid>h2,
      footer.end .side,
      footer.end .mail,
      footer.end .word,
      footer.end .foot {
        --t: clamp(0, (var(--fp) - var(--s, 0)) * 2.2, 1);
        opacity: var(--t);
        transform: translateY(calc((1 - var(--t)) * 26px))
      }

      footer.end .grid>h2 {
        --s: .05
      }

      footer.end .side {
        --s: .14
      }

      footer.end .mail {
        --s: .24
      }

      footer.end .word {
        --s: .32
      }

      footer.end .foot {
        --s: .5
      }
    }

    @media (prefers-reduced-motion:reduce) {
      :root {
        --fp: 1 !important
      }

      main {
        transform: none
      }
    }

/* ---- project covers: real screenshots */
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.2s var(--ease)}
.cover .chip{box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}
@media (min-width:900px){.cover{aspect-ratio:16/10}}
@media (max-width:899px){.cover{aspect-ratio:4/3}}

/* ---- 19 badge that trails the pointer */
.tag19{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50%;pointer-events:none;z-index:151;opacity:0;transition:opacity .3s,width .5s var(--ease),height .5s var(--ease);will-change:transform;box-shadow:0 4px 12px -4px rgba(4,0,120,.45)}
@media (hover:none),(pointer:coarse){.tag19{display:none}}
@media (prefers-reduced-motion:reduce){.tag19{display:none}}

/* ---- pointer: a plain brand dot with a paper ring, readable on light and blue without tinting what it passes over */
.cur{mix-blend-mode:normal!important;background:var(--blue)!important;box-shadow:0 0 0 1.5px var(--paper)}
.cur.big{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--blue),0 0 0 1.5px var(--paper)}

/* ---- no pointer dot: the native cursor plus the trailing 19 badge */
.cur{display:none!important}

/* ---- one continuous ground during the footer effect: the footer and the gaps beside the receding page
   share the same colour, which eases from the page tone to blue, so there is no seam above the footer */
footer.end{background:var(--sidebg,var(--blue))!important}

/* ---- work cards: a lens that tightens. On hover the frame closes in to reveal a blue matte,
   the screenshot pushes in, a View disc follows the pointer, and the title and year roll over */
.panel .cover{border-radius:20px;overflow:hidden;background:var(--blue);isolation:isolate}
.panel .cover>img{transform:scale(1.001);clip-path:inset(0 round 20px);object-position:50% 0;
  transition:clip-path .9s cubic-bezier(.65,0,.15,1),transform 1.3s cubic-bezier(.16,1,.3,1),filter .9s ease}
.panel .cover .idx{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--paper);padding:7px 10px;border-radius:999px;background:rgba(4,0,221,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .8s var(--ease),background .6s}
.panel .cover .view{position:absolute;left:0;top:0;z-index:3;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--paper);color:var(--blue);display:grid;place-content:center;justify-items:center;gap:2px;font-size:.82rem;font-weight:500;letter-spacing:-.01em;pointer-events:none;transform:translate(var(--vx,50%),var(--vy,50%)) scale(0);transition:transform .55s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 40px -18px rgba(2,0,60,.6)}
.panel .cover .view i{font-style:normal;font-size:1rem;line-height:1}
.panel .cover .chip{display:none}
.roll{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.08}
.roll b{grid-area:1/1;font-weight:inherit;transition:transform .7s cubic-bezier(.65,0,.15,1)}
.roll b+b{transform:translateY(105%)}
.meta .s.roll b+b{font-family:var(--sans);font-style:normal;font-size:.62em;letter-spacing:0;align-self:end}
@media (hover:hover){
  .panel:hover .cover>img{clip-path:inset(12px round 12px);transform:none}
  .panel:hover .cover .idx{transform:translate(10px,10px);background:var(--paper);color:var(--blue)}
  .panel:hover .cover .view{transform:translate(var(--vx,50%),var(--vy,50%)) scale(1)}
  .panel:hover .roll b{transform:translateY(-105%)}
  .panel:hover .roll b+b{transform:none}
  .track:hover .panel:not(:hover) .cover>img{filter:saturate(.5) brightness(.92)}
}
@media (hover:none){
  .panel .cover .view{left:auto;top:auto;right:14px;bottom:14px;margin:0;width:auto;height:auto;padding:9px 13px;border-radius:999px;display:flex;gap:6px;font-size:.78rem;transform:none}
}
@media (prefers-reduced-motion:reduce){.panel .cover>img{clip-path:none}}

/* ---- figures: short label on phones so all three sit on one line */
.figs .k .sm{display:none}
@media (max-width:760px){.figs .k .lg{display:none}.figs .k .sm{display:inline}.figs .k{min-height:0;white-space:nowrap}.figs>div{gap:12px}}

/* ---- figures sit close under the work reel instead of after a full section gap */
.pad.after-reel{padding-top:clamp(8px,2vw,32px)}
@media (min-width:900px){.reel-pin{padding-bottom:clamp(12px,2vh,24px)}}
@media (max-width:899px){.reel-pin{padding-bottom:28px}.pad.after-reel{padding-top:20px}}

/* ---- no divider above the figures */
.figs{border-top:0!important}

/* ---- easter egg */
.egg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:400;pointer-events:none}
.egg-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);z-index:402;transform:translateX(-50%);padding:12px 20px;border-radius:999px;background:var(--blue);color:var(--paper);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;box-shadow:0 0 0 1px rgba(243,242,237,.45),0 14px 34px -12px rgba(2,0,60,.7);animation:egg-toast 2.9s var(--ease) forwards}
@keyframes egg-toast{0%{opacity:0;transform:translate(-50%,20px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}


/* page transitions (see js/transition.js) */
html.arriving body{opacity:0}
html.fadein body{transition:opacity .6s cubic-bezier(.19,1,.22,1)}
html.leaving body{opacity:0;transition:opacity .34s ease}
html.arriving,html.leaving{scroll-behavior:auto!important}
html.arriving body{animation:t19show .01s 2.5s forwards}
@keyframes t19show{to{opacity:1}}

/* email copy chip: clear copied state */
.mail button.copy{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:84px;cursor:pointer}
.mail button.copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;animation:t19tick .5s .05s cubic-bezier(.19,1,.22,1) forwards}
.mail button.copy.is-copied{background:var(--i);color:var(--g);box-shadow:none;animation:t19pop .5s cubic-bezier(.19,1,.22,1)}
.mail button.copy.is-failed{box-shadow:inset 0 0 0 1px currentColor}
@keyframes t19tick{to{stroke-dashoffset:0}}
@keyframes t19pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* reel ends on the last project: keep a gutter after it (the archive panel used to provide it) */
.track::after{content:"";flex:0 0 max(1px, calc(var(--gut) - clamp(14px, 1.8vw, 28px)))}

/* arrows: drawn as SVG so phones never swap them for the emoji */
svg.ar{display:inline-block;width:.82em;height:.82em;vertical-align:-.04em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;flex:none}

/* ---- easter egg on phones: a jolt when the hero logo goes off */
html.egg-jolt main{animation:egg-jolt .45s cubic-bezier(.3,.7,.4,1)}
@keyframes egg-jolt{0%,100%{translate:0 0}20%{translate:0 7px}45%{translate:0 -4px}70%{translate:0 2px}}

/* ---- work cards that aren't live yet: no link, a status tag, and a "Soon" disc instead of "View" */
.panel.soon{cursor:default}
.panel .cover .tag{position:absolute;right:14px;top:14px;z-index:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);padding:7px 10px;border-radius:999px;background:var(--paper);transition:transform .8s var(--ease)}
.panel .cover .tag::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:.08em;animation:soon-blink 1.6s ease-in-out infinite}
@keyframes soon-blink{50%{opacity:.25}}
.tc-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--paper);background:radial-gradient(120% 90% at 50% 110%,#2a26ff 0,var(--blue) 60%)}
.tc-mark{font-family:var(--wide);font-stretch:115%;font-weight:800;font-size:clamp(2.6rem,14cqw,10rem);line-height:.9;letter-spacing:-.035em}
.tc-sub{font-family:var(--mono);font-size:clamp(.66rem,1.6cqw,.85rem);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
@media (hover:hover){.panel:hover .cover .tag{transform:translate(-10px,10px)}}
@media (prefers-reduced-motion:reduce){.panel .cover .tag::before{animation:none}}