@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/AlbertSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #06130f;

  --sky-1: #3566b8;
  --sky-2: #6f9be0;
  --sky-3: #b8cdee;
  --sky-4: #f3cbb6;
  --grain-sky: .12;
  --slot: #d6e5f2;

  --cloud-top: #2f84c4;
  --cloud-low: #7db7e0;
  --cloud: #f7f8f9;
  --cloud-shade: #b9cadb;

  --text: #eceef8;
  --text-2: #8fb1a6;
  --line: #1f3a32;
  --line-2: #33564b;
  --mark: #ff5a26;

  --g: 1px;
  --edge: clamp(20px, 5.5vw, 88px);
  --inner: clamp(16px, 3vw, 48px);
  --band-top: max(88px, 13svh);
  --band-bottom: max(40px, 7svh);

  --hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0M-1 1L1-1M7 9L9 7' stroke='%23eceef8' stroke-opacity='.1'/%3E%3C/svg%3E");

  --hatch-ink-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0M-1 1L1-1M7 9L9 7' stroke='%2306130f' stroke-opacity='.16'/%3E%3C/svg%3E");

  --paper: #eceef8;
  --ink: #06130f;
  --ink-2: rgb(6 19 15 / .62);
  --line-ink: rgb(6 19 15 / .2);
  --hinge: 5px;

  --sans: "Albert Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.4 0 0 0 -.7 2.4 0 0 0 -.7 2.4 0 0 0 -.7 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: .2;
  --soft: 9vmax;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--sky-1); color: #fff; }
:focus-visible { outline: 2px solid var(--sky-4); outline-offset: 3px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.skip {
  position: fixed; left: 16px; top: 16px; z-index: 100; padding: 10px 14px; border-radius: 8px;
  background: var(--text); color: var(--bg); transform: translateY(-200%);
}
.skip:focus { transform: none; }
.edge-probe { position: absolute; left: 0; top: 0; width: var(--edge); height: 0; visibility: hidden; pointer-events: none; }

h1, h2, h3 { font-weight: 500; }

h1 {
  font-size: clamp(44px, 6.4vw, 110px); line-height: .96; letter-spacing: -.045em;
  max-width: 12.5ch; text-wrap: balance;
}
.statement {
  font-size: clamp(28px, 3.5vw, 56px); line-height: 1.12; letter-spacing: -.03em; font-weight: 400;
  max-width: 24ch; text-wrap: pretty;
}
.kicker { font-size: 15px; line-height: 1.4; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.body { font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 42ch; text-wrap: pretty; }
h3 { font-size: clamp(21px, 1.8vw, 28px); line-height: 1.18; letter-spacing: -.02em; }

.rail {
  --label-bg: var(--text);
  --label-ink: var(--bg);
  display: flex; height: 34px;
  border-block: var(--g) solid var(--line);
}
.rail-label {
  position: relative; isolation: isolate;
  display: flex; align-items: center; margin-left: var(--edge); padding: 0 var(--inner);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--label-ink);
  translate: calc(var(--drift, 0) * 1px) 0;
  will-change: translate;
}
.rail-label::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--label-bg);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease);
}
.rail-label::after {
  content: ""; position: absolute; inset: calc(var(--g) * -.5 - 2.5px) -2.5px; pointer-events: none;
  background:
    linear-gradient(var(--label-bg) 0 0) left top / 5px 5px no-repeat,
    linear-gradient(var(--label-bg) 0 0) right top / 5px 5px no-repeat,
    linear-gradient(var(--label-bg) 0 0) left bottom / 5px 5px no-repeat,
    linear-gradient(var(--label-bg) 0 0) right bottom / 5px 5px no-repeat;
  opacity: 0; transition: opacity .4s .6s;
}
.rail-label span {
  display: inline-block; white-space: nowrap; overflow: hidden; line-height: 1.3;
  opacity: 0; transition: opacity .6s .35s;
}
.rail.rv { opacity: 1; transform: none; }
.rail.in .rail-label::before { transform: none; }
.rail.in .rail-label span, .rail.in .rail-label::after { opacity: 1; }

[data-words] .w { opacity: .16; }

.wrap { padding-inline: calc(var(--edge) + var(--inner)); }

.ruled { position: relative; }
.ruled::before, .ruled::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--g); background: var(--line); pointer-events: none;
}
.ruled::before { left: var(--edge); }
.ruled::after { left: calc(100% - var(--edge)); }

.rv { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

.split-btn { display: inline-flex; align-items: stretch; height: 48px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; }
.split-text {
  display: flex; align-items: center; padding: 0 18px; background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3); transition: background .3s var(--ease), color .3s var(--ease);
}
.split-arr { display: grid; place-items: center; width: 48px; background: var(--mark); color: var(--bg); font-size: 17px; }
.split-arr .arr { transition: transform .35s var(--ease); }
.split-btn:hover .split-text { background: var(--text); color: var(--bg); }
.split-btn:hover .arr { transform: translateX(4px); }

.drop { position: relative; cursor: pointer; }
.drop-toggle {
  display: block; width: 100%; padding: 0; font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: inherit;
}
.drop-toggle:focus-visible { outline-offset: -8px; }
.drop-plus { position: absolute; z-index: 2; top: 0; right: 0; width: 24px; height: 24px; background: var(--mark); color: var(--ink); pointer-events: none; }
.drop-plus::before, .drop-plus::after { content: ""; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; background: currentColor; }
.drop-plus::after { transition: transform .4s var(--ease); }
.shut .drop-plus::after, .drop-plus.shut::after { transform: rotate(90deg); }
.follows .drop-plus { display: none; }
.drop-float { position: fixed; z-index: 100; top: 0; left: 0; right: auto; scale: 0; transition: scale .18s var(--ease); }
.drop-float.on { scale: 1; }
.drop-body { display: grid; grid-template-rows: 1fr; overflow: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s; }
.shut .drop-body { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; }
.drop-body p { min-height: 0; }

.site-header {
  position: fixed; z-index: 50; top: calc((var(--band-top) - var(--bar)) / 2);
  left: var(--edge); right: calc(var(--edge) - var(--g));
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
  --bar: 44px;
}
.site-header > * { pointer-events: auto; }
.logo, .nav a, .menu-toggle {
  display: flex; align-items: center; height: var(--bar); padding: 0 16px;
  background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.logo .wm {
  display: block; width: 116px; aspect-ratio: 666.88 / 66.05; background: currentColor;
  -webkit-mask: url("../assets/thehaus.svg") center / contain no-repeat;
          mask: url("../assets/thehaus.svg") center / contain no-repeat;
}
.header-right { display: flex; }
.nav { display: flex; font-size: 14px; }
.nav a { gap: 9px; color: var(--text-2); transition: color .25s, background-color .25s; }
.nav a + a, .header-cta, .menu-toggle { margin-left: calc(-1 * var(--g)); }
.nav a:hover { color: var(--text); background-color: color-mix(in oklch, var(--bg), var(--text) 5%); }

.nav a[aria-current="true"] { color: var(--text); }
.nav a[aria-current="true"]::before { content: ""; width: 5px; height: 5px; background: var(--mark); }
.header-cta { height: var(--bar); }
.header-cta .split-arr { width: var(--bar); }
.menu-toggle { display: none; font-size: 14px; }
.menu {
  position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 96%, transparent);
  display: flex; align-items: flex-end; padding: 0 var(--edge) 12vh;
}
.menu nav { display: grid; gap: 10px; font-size: clamp(30px, 8vw, 44px); letter-spacing: -.03em; }

@media (max-width: 960px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: flex; margin-left: 0; }
}

.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.frame {
  position: absolute; inset: 0;
  display: grid; gap: var(--g); background: var(--line);
  grid-template-columns: 0 1fr 0; grid-template-rows: 0 1fr 0;
}
.frame > i { background: var(--bg); }
.media { position: relative; z-index: 2; overflow: visible; background: var(--bg); }
.clip { position: absolute; inset: 0; overflow: hidden; }

.window {
  position: absolute; left: 0; top: 0;
  width: calc(var(--W, 1440) * 1px); height: calc(var(--H, 900) * 1px);
  transform: translate3d(calc(var(--cx, 0) * -1px), calc(var(--cy, 0) * -1px), 0);
  will-change: transform;
}
.window > video, .window > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.grain-layer {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 220px; mix-blend-mode: overlay; opacity: var(--grain);
}
.mk {
  position: absolute; z-index: 3; width: 5px; height: 5px; background: var(--mark);
  opacity: var(--marks, 0); transition: opacity .4s;
}
.mk.tl { left: calc(var(--g) * -.5 - 2.5px); top: calc(var(--g) * -.5 - 2.5px); }
.mk.tr { right: calc(var(--g) * -.5 - 2.5px); top: calc(var(--g) * -.5 - 2.5px); }
.mk.bl { left: calc(var(--g) * -.5 - 2.5px); bottom: calc(var(--g) * -.5 - 2.5px); }
.mk.br { right: calc(var(--g) * -.5 - 2.5px); bottom: calc(var(--g) * -.5 - 2.5px); }

@keyframes blink {
  0%, 58%  { visibility: visible; translate: 0 0; }
  60%      { visibility: hidden; }
  62%      { visibility: visible; translate: 1px 0; }
  64%      { visibility: hidden; }
  67%      { visibility: visible; translate: 0 0; }
  81%      { visibility: visible; }
  82%      { visibility: hidden; translate: 0 -1px; }
  84%      { visibility: visible; translate: 0 0; }
  100%     { visibility: visible; }
}
.mk, .outline .sq {
  animation: blink var(--bd, 3.4s) steps(1, end) var(--bo, 0s) infinite;
}

.gradient { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--bg); }
.field { position: absolute; inset: -15%; pointer-events: none; }
.field i {
  position: absolute; display: block;
  border-radius: 52% 48% 61% 39% / 45% 56% 44% 55%;
  filter: blur(var(--soft));

  translate: calc(var(--dx) * var(--p, 0)) calc(var(--dy) * var(--p, 0));
  rotate: calc(var(--r) + var(--dr) * var(--p, 0));
  scale: calc(1 + (var(--ds) - 1) * var(--p, 0));
  will-change: transform;
}
.field i:nth-child(2n) { border-radius: 38% 62% 47% 53% / 58% 41% 59% 42%; }
.field i:nth-child(3n) { border-radius: 61% 39% 52% 48% / 44% 60% 40% 56%; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--noise); background-size: 220px;
  mix-blend-mode: overlay; opacity: var(--grain);
}

.story { position: relative; height: 925vh; }
.story .pin { background-color: var(--bg); }

.beat-anchor {
  position: absolute; left: 0; width: 1px; pointer-events: none;
  top: calc(var(--at) * 100vh); height: calc(var(--len) * 100vh);
}

.story .slot {
  position: absolute; inset: 0; overflow: hidden; --focus: 50% 50%;
  background: linear-gradient(to bottom, var(--cloud-top), var(--cloud-low) 64%);
}
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus); }

.window > .gl { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.window > .gl.ready { opacity: 1; }
.window.gl-ready > .slot { visibility: hidden; }

.story .frame > i:nth-child(8) { position: relative; }
.story .frame > i:nth-child(8)::before { content: ""; position: absolute; inset: 0; background: var(--hatch-img); opacity: var(--hatch, 0); }

.hero-copy {
  position: absolute; z-index: 3; left: var(--edge); bottom: var(--band-bottom);
  width: min(580px, calc(100% - 2 * var(--edge))); display: flex; flex-direction: column; align-items: flex-start;
}
.hero-tags { display: flex; align-self: stretch; }
.hero-tag, .hero-title {
  background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.hero-tag { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500; line-height: 1; }
.hero-tag + .hero-tag { margin-left: calc(-1 * var(--g)); }

.hero-tag .key { width: 16px; height: 6px; fill: var(--mark); shape-rendering: crispEdges; }

.hero-tag .pin { width: 10px; height: 10px; fill: var(--mark); shape-rendering: crispEdges; }

.hero-tag canvas { display: block; }
.hero-tag.cycling .cycle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hero-dots {
  position: relative; flex: 1; min-width: 0; margin-left: calc(-1 * var(--g)); overflow: hidden;
  background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.hero-dots i { position: absolute; top: 0; bottom: 0; right: 0; width: calc(min(580px, 100vw - 2 * var(--edge)) - 228px); --pad: 12px; }
.hero-title {
  align-self: stretch; max-width: none; margin-top: calc(-1 * var(--g)); padding: 22px 26px 28px;
  font-size: clamp(34px, 3.3vw, 54px); line-height: 1; letter-spacing: -.035em; text-wrap: balance;
}
.hero-foot { display: flex; align-items: flex-end; }
.hero-copy .lede {
  width: min(440px, 80vw); padding: 16px 26px 18px; background: var(--mark); color: var(--bg);
  font-size: 15px; line-height: 1.5; text-wrap: pretty;
}
.hero-foot .split-btn { pointer-events: auto; }

.story .outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }

.story-dots { position: absolute; z-index: 3; top: calc(var(--strip-y) * 1px); height: calc(var(--strip-h) * 1px); opacity: var(--prog, 0); }
.story-dots.l { left: var(--edge); width: calc(var(--frame-l) * 1px - var(--edge) - 14px); }
.story-dots.r { left: calc(var(--frame-r) * 1px + 14px); right: var(--edge); }
.story[data-layout="copy"] .story-dots { display: none; }

.story-copy { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.beat {
  position: absolute; top: 50%; left: calc(var(--col-left) * 1px); width: calc(var(--col-width) * 1px);
  opacity: var(--o, 0); transform: translateY(calc(-50% + (1 - var(--o, 0)) * 18px));
}
.beat.on { pointer-events: auto; }

.about-beat .statement {
  padding: 18px 20px 20px; background: var(--mark); color: var(--bg);
  font-size: clamp(18px, 1.45vw, 22px); line-height: 1.32; letter-spacing: -.012em; font-weight: 400; max-width: none;
}
.about-cta { margin-top: 6vh; opacity: var(--cta, 0); transform: translateY(calc((1 - var(--cta, 0)) * 12px)); }

.network-beat .swap { display: grid; }
.network-beat .swap-item { grid-area: 1 / 1; align-self: start; opacity: var(--in, 0); translate: 0 calc(var(--shift, 1) * 14px); }

.role { display: flex; align-items: flex-start; }
.role-n {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--mark); color: var(--bg); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .02em;
}
.role-box { flex: 1 1 auto; min-width: 0; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3); }
.role-title {
  display: flex; align-items: center; width: max-content; height: 40px; padding: 0 14px;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap; color: var(--text);
  transition: color .3s;
}
.role-text { padding: 0 14px 16px; font-size: 15px; line-height: 1.45; color: rgb(236 238 248 / .82); text-wrap: pretty; }

.story[data-layout="diagram"] .about-beat { top: 0; left: 0; width: 100%; height: 100%; transform: none; pointer-events: none; }
.story[data-layout="diagram"] .about-beat .statement {
  position: absolute; top: 50%; left: calc(var(--col-left) * 1px); width: calc(var(--note-w) * 1px);
  translate: 0 calc(-50% + (1 - var(--o, 0)) * 18px);
}
.story[data-layout="diagram"] .about-cta {
  position: absolute; margin: 0; left: calc(var(--cta-x) * 1px); top: calc(var(--cta-y) * 1px);
  transform: none; translate: calc((var(--cta, 0) - 1) * 12px) -100%;
}
.story[data-layout="diagram"] .about-beat.on .about-cta { pointer-events: auto; }
.story[data-layout="diagram"] .network-beat { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
.story[data-layout="diagram"] .network-beat.on { pointer-events: none; }
.story[data-layout="diagram"] .network-beat.on .swap-item { pointer-events: auto; }
.story[data-layout="diagram"] .network-beat .swap { display: block; }
.story[data-layout="diagram"] .network-beat .role {
  position: absolute; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
  opacity: var(--seen, 0); translate: var(--tx, 0) var(--ty, 0);
}
.story[data-layout="diagram"] .role[data-side="left"] { flex-direction: row-reverse; --tx: -100%; }
.story[data-layout="diagram"] .role[data-level="bottom"] { --ty: -100%; }
.story[data-layout="diagram"] .role-box { flex: none; width: calc(var(--bw) * 1px); height: calc(var(--bh) * 1px); }
.story[data-layout="diagram"] .role-text { width: calc(var(--box) * 1px); }
.story[data-layout="diagram"] .role:not(.open) .role-title { color: var(--text-2); }

.story.static { height: auto; }
.story.static .pin { position: relative; height: auto; overflow: visible; }
.story.static .frame { position: relative; height: 100vh; height: 100svh; }
.story.static .window { width: 100%; height: 100%; transform: none; }
.story.static .story-copy { position: static; display: grid; gap: 14vh; padding: 16vh calc(var(--edge) + var(--inner)); pointer-events: auto; }
.story.static .beat { position: static; width: auto; opacity: 1; transform: none; }
.story.static .about-cta { position: static; margin-top: 6vh; opacity: 1; transform: none; }
.story.static [data-words] .w { opacity: 1; }
.story.static .swap { gap: 6vh; }
.story.static .swap-item { grid-area: auto; opacity: 1; translate: none; }

.possible { position: relative; padding-top: 20vh; }

.possible::before {
  content: ""; position: absolute; top: 0; height: 20vh; pointer-events: none;
  left: var(--edge); width: calc(100% - 2 * var(--edge) + var(--g)); border-inline: var(--g) solid var(--line); border-bottom: var(--g) solid var(--line);
  background: var(--hatch-img) 0 calc(var(--g) - var(--band-bottom));
}

.pos-scene { position: relative; height: 240vh; }
.pos-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pos-pin::before, .pos-pin::after { content: ""; position: absolute; pointer-events: none; }
.pos-pin::before { inset: 0 calc(var(--edge) - var(--g)) 0 var(--edge); border-inline: var(--g) solid var(--line); }
.pos-pin::after { inset: var(--band-top) 0 calc(var(--band-bottom) - var(--g)) 0; border-block: var(--g) solid var(--line); }
.pos-marks {
  position: absolute; pointer-events: none;
  inset: calc(var(--band-top) + var(--g) / 2 - 2.5px) calc(var(--edge) - var(--g) / 2 - 2.5px) calc(var(--band-bottom) - var(--g) / 2 - 2.5px) calc(var(--edge) + var(--g) / 2 - 2.5px);
  background:
    linear-gradient(var(--mark) 0 0) left top / 5px 5px no-repeat,
    linear-gradient(var(--mark) 0 0) right top / 5px 5px no-repeat,
    linear-gradient(var(--mark) 0 0) left bottom / 5px 5px no-repeat,
    linear-gradient(var(--mark) 0 0) right bottom / 5px 5px no-repeat;
}
.pos-table { position: absolute; }
.pos-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pos-links .sq { animation: blink var(--bd, 3.4s) steps(1, end) var(--bo, 0s) infinite; }

.pos-texts { display: contents; }
.pos-group { position: absolute; z-index: 3; display: flex; flex-direction: column; width: clamp(280px, 23vw, 360px); }
.pos-a { left: var(--edge); top: var(--band-top); }
.pos-b { right: calc(var(--edge) - var(--g)); bottom: calc(var(--band-bottom) - var(--g)); }
.pos-label {
  display: flex; align-items: center; min-height: 36px; padding: 0 14px;
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; background: var(--text); color: var(--bg);
}
.pos-item { display: flex; flex-direction: column; }
.pos-label + .pos-item, .pos-item + .pos-item { margin-top: calc(-1 * var(--g)); }
.pos-item h3 {
  display: flex; align-items: center; min-height: 36px; padding: 0 14px;
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  background: var(--bg); color: var(--text-2); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
  transition: color .3s var(--ease);
}
.pos-item.on h3 { color: var(--text); }
.pos-item p {
  overflow: hidden; margin-top: calc(-1 * var(--g)); height: calc(var(--in, 0) * var(--h, 0) * 1px);
  padding: calc(var(--in, 0) * 14px) 14px calc(var(--in, 0) * 16px);
  font-size: 15px; line-height: 1.45; color: rgb(236 238 248 / .82); text-wrap: pretty;
  background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}

.membership {
  position: relative; overflow: clip; color: var(--ink); background: var(--paper); --left: 40%;
  --mast: calc(var(--edge) + var(--g) + (100% - 2 * var(--edge) - var(--g)) * .4);
}
.membership ::selection { background: var(--ink); color: var(--paper); }
.membership::before {
  content: ""; position: absolute; z-index: 1; inset: 0 calc(var(--edge) - var(--g)) 0 var(--edge); pointer-events: none;
  border-inline: var(--g) solid var(--line-ink);
}
.mem-top { position: relative; }
.mem-sheet {
  position: relative; margin: 0 var(--edge) 0 calc(var(--edge) + var(--g));
  display: grid; grid-template-columns: var(--left) var(--hinge) minmax(0, 1fr);
}

.mem-sheet::after { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; height: var(--g); pointer-events: none; background: var(--line-ink); }

.mem-mast { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--mast); width: var(--hinge); pointer-events: none; border-inline: var(--g) solid var(--line-ink); }
.mem-title {
  position: relative; grid-column: 1; grid-row: 1; padding: 36px var(--inner) 56px;
  font-size: clamp(34px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -.035em; max-width: none;
}
.mem-void { position: relative; grid-column: 1; grid-row: 2; }

[data-fill="dots"] { --pad: 0px; --dots-head: var(--mark); color: var(--text-2); pointer-events: none; }
[data-fill="dots"] canvas { position: absolute; left: var(--pad); top: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); }
.mem-intro {
  position: relative; flex: 1; margin: 0; max-width: none;
  padding: 22px var(--inner) 56px; color: var(--ink-2);
}

.mem-intro::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: var(--g); background: var(--line-ink); }

.mem-lead { position: relative; grid-column: 3; grid-row: 1; display: flex; flex-direction: column; }

.scan { display: flex; gap: 4px; padding: 36px var(--inner) 0; }
.scan svg { display: block; width: 33px; height: 33px; fill: var(--ink); fill-rule: evenodd; shape-rendering: crispEdges; }
.scan svg.on { fill: var(--mark); }
.mem-title::before, .mem-title::after, .mem-void::before {
  content: ""; position: absolute; width: 5px; height: 5px; background: var(--mark);
}
.mem-title::before { left: calc(var(--g) * -.5 - 2.5px); top: calc(var(--g) / 2 - 2.5px); }
.mem-title::after { right: calc(var(--hinge) / -2 - 2.5px); top: calc(var(--g) / 2 - 2.5px); }
.mem-void::before { right: calc(var(--hinge) / -2 - 2.5px); top: calc(var(--g) * -.5 - 2.5px); }

.process { position: relative; }
.process .pin { position: relative; height: auto; padding: 16vh 0 12vh; }
.process .rail { position: relative; margin-bottom: 6vh; }
.process-lines, .hinge, .step-corners, .steps-hatch { display: none; }

.steps { padding-inline: var(--edge); }
.steps li { padding: 26px var(--inner); border-top: var(--g) solid var(--line); }
.steps h3 { font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.03em; }
.steps h3 button { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: default; }
.steps p { margin-top: 14px; color: var(--text-2); max-width: 30ch; }

@media (min-width: 700px) {
  .process { height: 360vh; }
  .process .pin { position: sticky; height: 100vh; height: 100svh; padding: var(--band-top) 0 0; }

  .process .pin::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--g); background: var(--line-2); }
  .process .rail { z-index: 3; margin-bottom: 0; }

  .hinge { display: block; position: absolute; top: -100vh; bottom: -100vh; width: var(--g); background: var(--line-2); pointer-events: none; scale: 1 0; transition: scale 1.1s var(--ease); }
  .hinge.l { left: 0; }
  .hinge.r { right: 0; }
  .rail.in .hinge { scale: 1; }
  .process-lines { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
  .process-lines line { stroke: var(--line-2); stroke-width: var(--g); }
  .process-lines .sq { fill: var(--mark); }

  .steps-hatch {
    display: block; position: absolute; z-index: 1; left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); width: calc(var(--w, 0) * 1px); height: calc(var(--h, 0) * 1px);
    background: var(--hatch-img); clip-path: inset(0 calc((1 - var(--o, 0)) * 100%) 0 0);
  }
  .steps { position: absolute; inset: 0; z-index: 4; padding: 0; pointer-events: none; }
  .steps li { display: contents; }

  .steps h3 {
    position: absolute; left: calc(var(--x, 0) * 1px); top: var(--band-top); display: flex; height: 34px;
    font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
    background: var(--bg); color: var(--text-2); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
    clip-path: inset(0 calc((1 - var(--o, 0)) * 100%) 0 0); transition: background-color .3s var(--ease), color .3s var(--ease);
  }

  .steps h3 button { display: flex; align-items: center; padding: 0 16px; pointer-events: auto; cursor: pointer; transition: color .3s var(--ease); }
  .steps li:not(.on) h3 button:hover { color: var(--text); }
  .steps .on h3 { background: var(--mark); color: var(--bg); box-shadow: none; }

  .step-box { position: absolute; left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); width: calc(var(--w, 300) * 1px); }
  .steps p {
    position: relative; min-height: calc(var(--h, 0) * 1px); max-width: none; margin: calc(-1 * var(--g)) 0 0; padding: 14px 16px 16px;
    font-size: 15px; line-height: 1.45; text-wrap: pretty; background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
    clip-path: inset(0 calc((1 - var(--bw, 0)) * 100%) calc((1 - var(--bh, 0)) * 100%) 0);
  }

  .step-corners { position: absolute; z-index: 1; left: -4px; top: -4px; right: calc((1 - var(--bw, 0)) * 100% - 4px); bottom: calc((1 - var(--bh, 0)) * 100% - 4px); pointer-events: none; }
  .step-corners::before, .step-corners::after { content: ""; position: absolute; inset: 0; }
  .step-corners::before { background: linear-gradient(var(--mark) 0 0) left top / 7px 7px no-repeat, linear-gradient(var(--mark) 0 0) right bottom / 7px 7px no-repeat; }
  .step-corners::after { background: linear-gradient(var(--mark) 0 0) right top / 7px 7px no-repeat, linear-gradient(var(--mark) 0 0) left bottom / 7px 7px no-repeat; }
  .working .step-corners { display: block; }
  .gather-pic .step-corners { display: block; --bw: 1; --bh: 1; }
  .working .step-corners::before { animation: corners .44s steps(1, end) infinite; }
  .working .step-corners::after { animation: corners .44s steps(1, end) -.22s infinite; }
}
@keyframes corners { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .12; } }

.band { position: relative; --scene: 320vh; }

.conn-scene { height: var(--scene); }

.connectors .gradient { background: var(--sky-2); }
.connectors .gradient.grain::after { opacity: var(--grain-sky); }
.conn-scene .gradient::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 22%;
  background: linear-gradient(transparent, var(--sky-1));
}

.connectors .band-sky { top: calc(var(--scene) - var(--g)); background: linear-gradient(var(--sky-1), var(--sky-2) 24%, var(--sky-2) 82%, var(--sky-1)); }
.band-sky .field i { --dx: 0%; --dy: 0%; --dr: 0deg; --ds: 1; }
.band-sky .g1 { background: var(--sky-3); left: -24%; top: 30%; width: 58%; height: 14%; --r: 12deg; opacity: .7; }
.band-sky .g2 { background: var(--sky-4); left: 62%; top: 44%; width: 60%; height: 14%; --r: -10deg; opacity: .75; }
.band-sky .g3 { background: var(--sky-1); left: -20%; top: 58%; width: 55%; height: 12%; --r: 8deg; opacity: .8; }
.band-sky .g4 { background: var(--sky-3); left: 66%; top: 63%; width: 50%; height: 9%; --r: -6deg; opacity: .55; }
.connectors > .gatherings { position: relative; margin-top: calc(-1 * var(--g)); }

.band .ruled {
  --to: calc(100% - var(--edge) + var(--g));
  background: linear-gradient(90deg, transparent var(--edge), var(--bg) var(--edge) var(--to), transparent var(--to));
}

.conn-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.conn-lines circle { fill: none; stroke: rgb(236 238 248 / .5); stroke-width: var(--g); }
.conn-lines .sq { fill: var(--mark); }
.connectors .s1 { background: var(--sky-3); left: -18%; top: -10%; width: 78%; height: 70%; --r: 18deg;  --dx: 6%;  --dy: 6%;  --dr: -8deg;  --ds: 1.06; opacity: .8; }
.connectors .s7 { background: var(--sky-2); left: -8%; top: 32%; width: 42%; height: 30%; --r: -10deg; --dx: 8%; --dy: 4%; --dr: 10deg; --ds: 1.08; opacity: .6; }
.connectors .s2 { background: var(--sky-1); left: -6%;  top: 48%; width: 54%; height: 48%; --r: -16deg; --dx: 8%;  --dy: -6%; --dr: 10deg;  --ds: 1.08; }
.connectors .s3 { background: var(--sky-1); left: 46%;  top: 28%; width: 76%; height: 88%; --r: -6deg;  --dx: -6%; --dy: -4%; --dr: 6deg;   --ds: 1.05; opacity: .85; }
.connectors .s4 { background: var(--sky-2); left: 6%;   top: 62%; width: 34%; height: 13%; --r: 24deg;  --dx: 10%; --dy: -8%; --dr: -10deg; --ds: 1.12; opacity: .75; }
.connectors .s5 { background: var(--sky-4); left: 58%;  top: -22%; width: 60%; height: 50%; --r: -12deg; --dx: -4%; --dy: 6%;  --dr: 8deg;   --ds: 1.04; opacity: .8; }
.connectors .s6 { background: var(--sky-1); left: 28%;  top: 66%; width: 40%; height: 38%; --r: 8deg;   --dx: 6%;  --dy: -8%; --dr: 12deg;  --ds: 1.1; opacity: .6; }

.connectors-copy {
  position: absolute; z-index: 5; inset: 0;
  padding: calc(var(--band-top) + 4svh) calc(var(--edge) - var(--g)) var(--band-bottom) calc(var(--edge) + var(--inner));
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 500px); gap: 40px; align-items: end;
  opacity: var(--copy, 0); transform: translateY(calc((1 - var(--copy, 0)) * 24px));
}

.connectors-copy h2 {
  margin-bottom: -.14em; white-space: nowrap; line-height: 1; letter-spacing: -.05em;
  font-size: min(110px, (100vw - 2 * var(--edge) - var(--inner) - clamp(340px, 34vw, 500px) - 64px) / 13.4);
}

.wordmark { display: inline-block; width: 5.92em; vertical-align: -.015em; }
.wordmark svg { display: block; width: 100%; height: auto; overflow: visible; fill: var(--text); }

.conn-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conn-tabs::before {
  content: ""; grid-row: 2; grid-column: 1 / -1; margin-top: calc(-1 * var(--g));
  background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.conn-item { display: contents; }
.conn-item h3 { grid-row: 1; }
.conn-item + .conn-item h3 { margin-left: calc(-1 * var(--g)); }
.conn-item button {
  display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 14px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; text-align: left;
  background: var(--bg); color: var(--text-2); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.conn-item button:hover { color: var(--text); }
.conn-item.on button { background: var(--mark); color: var(--bg); box-shadow: none; }
.conn-item p {
  grid-row: 2; grid-column: 1 / -1; margin-top: calc(-1 * var(--g)); padding: 18px 20px 22px;
  font-size: 16px; line-height: 1.5; color: rgb(236 238 248 / .82); text-wrap: pretty;
  opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .35s var(--ease), translate .35s var(--ease), visibility 0s .35s;
}
.conn-item.on p { opacity: 1; visibility: visible; translate: 0; transition-delay: 0s; }
.conn-stack .split-btn { display: flex; margin-top: calc(-1 * var(--g)); }
.conn-stack .split-text { flex: 1; }

.gatherings .ruled { padding: 18vh 0 16vh; }

.gather-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 4vw; align-items: start; margin-top: 10vh; }

.gather-row { display: flex; gap: 4px; height: clamp(130px, 13vw, 190px); }
.gather-pic { position: relative; isolation: isolate; flex: none; height: 100%; aspect-ratio: 1.4; }
.gather-pic:nth-child(3) { aspect-ratio: .95; }
.gather-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.formats { margin-right: calc(-1 * var(--inner)); border-top: var(--g) solid var(--line); border-left: var(--g) solid var(--line); }
.formats li { padding-inline: var(--inner) calc(var(--inner) + 24px); border-bottom: var(--g) solid var(--line); }
.formats .drop-toggle { padding-block: 22px; }
.formats p { padding-block: 0 24px; color: var(--text-2); max-width: 46ch; }

.invite { position: relative; overflow: hidden; padding: 24vh 0 0; }
.invite-glow { position: absolute; inset: auto -10% -30% -10%; height: 78%; pointer-events: none; opacity: .5; }
.invite-glow i { position: absolute; display: block; border-radius: 50% 46% 58% 42% / 48% 56% 44% 52%; filter: blur(var(--soft)); }

.invite-glow i:nth-child(1) { background: var(--sky-1); left: 0;   top: 20%; width: 50%; height: 80%; }
.invite-glow i:nth-child(2) { background: var(--sky-2); left: 34%; top: 0;   width: 44%; height: 90%; }
.invite-glow i:nth-child(3) { background: var(--sky-4); left: 66%; top: 30%; width: 34%; height: 70%; }
.invite .wrap { position: relative; z-index: 1; }
.invite-head { display: flex; margin-bottom: 18px; }
.invite-title { display: flex; align-items: center; height: 34px; padding: 0 14px; background: var(--mark); color: var(--bg); font-size: 13px; line-height: 1; }

.invite-mail {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px;
  background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.invite-mail .letter { width: 16px; height: 12px; fill: var(--mark); shape-rendering: crispEdges; }
.invite-mail .arr { display: inline-block; font-size: 15px; line-height: 1; transition: transform .35s var(--ease); }
.invite-mail:hover { background: var(--text); color: var(--bg); }
.invite-mail:hover .arr { transform: translateX(3px); }

.glitch { position: relative; margin: 22vh 0 -1px; padding: 0 clamp(12px, 2vw, 28px); }
.glitch svg { width: 100%; height: auto; overflow: visible; }

.glitch .main, .wordmark .main { fill: var(--text); stroke: var(--text); stroke-width: .8; stroke-linejoin: round; }

.legal { --left: 34%; overflow-x: clip; display: flex; flex-direction: column; min-height: 100svh; padding-top: var(--band-top); }
.legal-sheet {
  position: relative; margin: 0 var(--edge) 0 calc(var(--edge) + var(--g));
  display: grid; grid-template-columns: var(--left) var(--hinge) minmax(0, 1fr);
}
.legal-sheet::before, .legal-sheet::after {
  content: ""; position: absolute; left: -100vw; right: -100vw; height: var(--g); background: var(--line); pointer-events: none;
}
.legal-sheet::before { top: 0; }
.legal-sheet::after { bottom: 0; }
.legal-sheet .mk { top: calc(var(--g) / 2 - 2.5px); opacity: 1; }
.legal-sheet .mk.l { left: calc(var(--g) * -.5 - 2.5px); }
.legal-sheet .mk.c { left: calc(var(--left) + var(--hinge) / 2 - 2.5px); }
.legal-sheet .mk.r { right: calc(var(--g) * -.5 - 2.5px); }
.legal-hinge { grid-column: 2; grid-row: 1; border-inline: var(--g) solid var(--line); }
.legal-side { grid-column: 1; grid-row: 1; }
.legal-head { position: sticky; top: var(--band-top); padding: 36px var(--inner) 48px; }
.legal-title { font-size: clamp(34px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.legal-date {
  display: inline-flex; align-items: center; height: 34px; margin-top: 24px; padding: 0 14px;
  font-size: 13px; font-weight: 500; line-height: 1; color: var(--text-2); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.legal-body { grid-column: 3; grid-row: 1; }
.legal-body > * { padding: 36px var(--inner) 40px; }
.legal-body > * + * { border-top: var(--g) solid var(--line); }
.legal-lede { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.4; letter-spacing: -.01em; max-width: 34em; text-wrap: pretty; }
.legal-body h2 { margin-bottom: 18px; }
.legal-body h3 { margin: 26px 0 8px; font-size: 17px; line-height: 1.4; letter-spacing: 0; }
.legal-body h2 + h3 { margin-top: 0; }
.legal-body p:not(.legal-lede) { max-width: 64ch; color: var(--text-2); text-wrap: pretty; }
.legal-body p + p { margin-top: 14px; }
.legal-body .legal-fact { color: var(--text); }
.legal-fact b { font-weight: 500; }
.legal-body a { text-decoration: underline; text-decoration-thickness: var(--g); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--mark); }
.legal-end { position: relative; overflow: hidden; margin-top: auto; padding-top: 6vh; }
.legal-missing .split-btn { margin-top: 28px; }

.legal-btn {
  display: inline-flex; align-items: center; height: 34px; margin-top: 6px; padding: 0 14px;
  font-size: 13px; font-weight: 500; line-height: 1; color: var(--text); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.legal-btn:hover { background: var(--text); color: var(--bg); }

.cookie-banner {
  position: fixed; z-index: 60; right: calc(var(--edge) - var(--g)); bottom: 16px; width: min(400px, calc(100vw - 2 * var(--edge) + var(--g)));
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: 13px; line-height: 1.5; color: var(--text);
  opacity: 0; translate: 0 12px; transition: opacity .4s var(--ease), translate .4s var(--ease);
}
.cookie-banner.is-in { opacity: 1; translate: 0; }
.cookie-tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; background: var(--mark); color: var(--bg); font-weight: 500; line-height: 1; }
.cookie-text, .cookie-actions button { background: var(--bg); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3); }
.cookie-text { align-self: stretch; padding: 16px 18px 18px; }
.cookie-text a { white-space: nowrap; text-decoration: underline; text-decoration-thickness: var(--g); text-underline-offset: 3px; }
.cookie-actions { align-self: stretch; display: flex; margin-top: calc(-1 * var(--g)); }
.cookie-actions button {
  flex: 1; height: 40px; font-size: 13px; font-weight: 500; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cookie-actions button + button { margin-left: calc(-1 * var(--g)); }
.cookie-actions button:hover { background: var(--text); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: none; } }

.site-footer {
  position: absolute; z-index: 2; bottom: 0; left: var(--edge); right: calc(var(--edge) - var(--g));
  display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none;
}
.site-footer > * { pointer-events: auto; }
.foot-box, .foot-nav a {
  display: flex; align-items: center; height: 34px; padding: 0 14px; font-size: 13px; line-height: 1; white-space: nowrap;
  background: var(--bg); color: var(--text-2); box-shadow: inset 0 0 0 var(--g) rgb(236 238 248 / .3);
}
.foot-left { display: flex; }
.foot-dots { position: relative; width: 150px; margin-left: calc(-1 * var(--g)); --pad: 12px; }
.foot-nav, .foot-right { display: flex; }
.foot-nav a, a.foot-box { transition: color .25s, background-color .25s; }
.foot-nav a + a, .foot-right > * + * { margin-left: calc(-1 * var(--g)); }
.foot-nav a:hover, a.foot-box:hover { color: var(--text); background-color: color-mix(in oklch, var(--bg), var(--text) 5%); }

a.foot-box[aria-current="page"] { gap: 9px; color: var(--text); }
a.foot-box[aria-current="page"]::before { content: ""; width: 5px; height: 5px; background: var(--mark); }

@media (max-width: 1260px) { .foot-dots { display: none; } }
@media (max-width: 1090px) { .foot-left { display: none; } }

@media (max-width: 860px) {
  .beat {
    top: calc(var(--below) * 1px); left: calc(var(--col-left) * 1px); right: calc(var(--col-left) * 1px); width: auto;
    transform: translateY(calc((1 - var(--o, 0)) * 18px));
  }

  .hero-title { padding: 18px 18px 22px; font-size: clamp(30px, 8.4vw, 42px); }
  .hero-foot { align-self: stretch; }
  .hero-copy .lede { flex: 1; width: auto; }
  .hero-copy .lede { padding: 14px 18px 16px; }
  .about-beat .statement { padding: 14px 16px 16px; font-size: 17px; }
  .about-cta { margin-top: 4vh; }

  .pos-scene { height: auto; }
  .pos-pin { position: relative; height: auto; overflow: visible; padding: 32px 0 56px; }
  .pos-pin::after { inset: 0 0 calc(-1 * var(--g)); }
  .pos-marks { inset: calc(var(--g) / 2 - 2.5px) calc(var(--edge) - var(--g) / 2 - 2.5px) calc(var(--g) / -2 - 2.5px) calc(var(--edge) + var(--g) / 2 - 2.5px); }
  .pos-table { position: relative; display: block; margin: 0 auto 32px; }
  .pos-links { display: none; }
  .pos-texts { display: flex; flex-direction: column; margin: 0 calc(var(--edge) - var(--g)) 0 var(--edge); }
  .pos-group { position: static; width: auto; }
  .pos-b { margin-top: calc(-1 * var(--g)); }
  .pos-item h3 { color: var(--text); }
  .pos-item p { height: auto; padding: 14px 14px 16px; }

  .legal-sheet { grid-template-columns: minmax(0, 1fr); }
  .legal-hinge, .legal-sheet .mk.c { display: none; }
  .legal-side, .legal-body { grid-column: 1; grid-row: auto; }
  .legal-head { position: static; padding: 28px var(--inner) 32px; border-bottom: var(--g) solid var(--line); }

  .mem-sheet { grid-template-columns: minmax(0, 1fr); }
  .mem-mast, .mem-title::after, .mem-void { display: none; }
  .mem-title, .mem-lead { grid-column: 1; grid-row: auto; }
  .mem-title { padding: 28px var(--inner) 32px; }
  .scan { padding-top: 0; }
  .mem-intro { padding: 20px var(--inner) 32px; }

  .connectors-copy { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 24px; }
  .connectors-copy h2 { margin-bottom: 0; font-size: calc((100vw - 2 * var(--edge) - var(--inner) - 24px) / 13.4); }
  .conn-stack { margin-left: calc(-1 * var(--inner)); }
  .conn-item p { padding: 14px var(--inner) 18px; font-size: 15px; }
  .connectors .s1 { opacity: .35; }

  .gather-body { grid-template-columns: minmax(0, 1fr); row-gap: 8vh; }
  .gather-row { height: 21vw; }
  .formats { margin-left: calc(-1 * var(--inner)); border-left: 0; }
  .formats li { padding: 0 var(--inner) 12px; }
  .formats .drop-toggle { padding-block: 22px 8px; padding-right: 24px; }
  .formats p { padding-block: 2px 12px; }

  .site-footer { flex-direction: column; align-items: flex-start; bottom: calc((100vw - 2 * clamp(12px, 2vw, 28px)) * .097 - 10px); }
  .foot-left { display: none; }
  .foot-nav { display: grid; grid-template-columns: repeat(2, max-content); }
  .foot-nav a + a { margin-left: 0; }
  .foot-nav a:nth-child(even) { margin-left: calc(-1 * var(--g)); }
  .foot-nav a:nth-child(n + 3), .site-footer .foot-box { margin-top: calc(-1 * var(--g)); }
}

@media (prefers-reduced-motion: reduce) {
  .mk, .outline .sq, .step-corners::before, .step-corners::after { animation: none; }
  .rail-label::before { transform: none; transition: none; }
  .rail-label span, .rail-label::after { opacity: 1; transition: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  [data-words] .w { opacity: 1 !important; }
}