:root {
  --ink: #0b0d0d;
  --paper: #f2f2ef;
  --accent: #747a7e;
  --accent-dark: #454a4e;
  --mist: #adb1b4;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { width:100%;scroll-behavior:smooth; }
body {
  width:100%;
  min-height:100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  cursor: none;
  overflow-x: hidden;
  overscroll-behavior-y:none;
  touch-action:pan-y;
}
a, button { color: inherit; }
a { text-decoration: none; }
button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.depth-canvas {
  position:fixed;
  inset:0;
  z-index:7;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.48;
  mix-blend-mode:difference;
}
.depth-planes {
  --plane-shift-1:0px;
  --plane-shift-2:0px;
  --plane-shift-3:0px;
  --depth-tilt-x:0deg;
  --depth-tilt-y:0deg;
  position:fixed;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  perspective:900px;
  transform-style:preserve-3d;
  mix-blend-mode:difference;
  opacity:.13;
}
.depth-planes i {
  --bracket:rgba(255,255,255,.68);
  position:absolute;
  width:clamp(160px,20vw,320px);
  aspect-ratio:4/3;
  border:0;
  background:
    linear-gradient(var(--bracket),var(--bracket)) left top/24px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) left top/1px 24px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) right top/24px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) right top/1px 24px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) left bottom/24px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) left bottom/1px 24px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) right bottom/24px 1px no-repeat,
    linear-gradient(var(--bracket),var(--bracket)) right bottom/1px 24px no-repeat;
  transform-style:preserve-3d;
  will-change:transform;
}
.depth-planes i:nth-child(1) {
  left:6vw;
  top:24vh;
  transform:translate3d(0,var(--plane-shift-1),-120px) rotateY(calc(-18deg + var(--depth-tilt-y))) rotateX(var(--depth-tilt-x));
}
.depth-planes i:nth-child(2) {
  right:8vw;
  top:48vh;
  transform:translate3d(0,var(--plane-shift-2),-260px) rotateY(calc(22deg + var(--depth-tilt-y))) rotateX(var(--depth-tilt-x));
}
.depth-planes i:nth-child(3) {
  left:42vw;
  top:74vh;
  transform:translate3d(0,var(--plane-shift-3),-380px) rotateY(calc(-8deg + var(--depth-tilt-y))) rotateX(var(--depth-tilt-x));
}

.scroll-window {
  --window-x: 72vw;
  --window-y: 18vh;
  --window-w: 112px;
  --window-h: 112px;
  --window-radius: 999px;
  --window-rotate: 0deg;
  position: fixed;
  z-index: 108;
  left: 0;
  top: 0;
  width: var(--window-w);
  height: var(--window-h);
  transform: translate3d(var(--window-x),var(--window-y),0) rotate(var(--window-rotate));
  border: 2px solid rgba(242,242,239,.88);
  border-radius: var(--window-radius);
  background:rgba(116,122,126,.08);
  box-shadow:inset 0 0 0 5px rgba(116,122,126,.1),0 12px 50px rgba(0,0,0,.2);
  backdrop-filter: grayscale(1) contrast(1.24);
  -webkit-backdrop-filter: grayscale(1) contrast(1.24);
  pointer-events: none;
  transition: width .16s linear, height .16s linear, border-radius .16s linear, border-color .35s, background .35s;
  will-change: transform,width,height,border-radius;
}
.scroll-window__rings {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) center 7px/1px 9px no-repeat,
    linear-gradient(currentColor,currentColor) center calc(100% - 7px)/1px 9px no-repeat,
    linear-gradient(currentColor,currentColor) 7px center/9px 1px no-repeat,
    linear-gradient(currentColor,currentColor) calc(100% - 7px) center/9px 1px no-repeat;
}
.scroll-window__rings b {
  --ring-order:1;
  position:absolute;
  inset:0;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:0;
  transform:scale(1);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);
}
.scroll-window__rings b:nth-child(2) { --ring-order:2; }
.scroll-window__rings b:nth-child(3) { --ring-order:3; }
.scroll-window__rings b:nth-child(4) { --ring-order:4; }
.scroll-window__rings b:nth-child(5) { --ring-order:5; }
.scroll-window__rings b.is-visible {
  opacity:.4;
  transform:scale(1.19);
}
.scroll-window__rings b:nth-child(2).is-visible { opacity:.34;transform:scale(1.38); }
.scroll-window__rings b:nth-child(3).is-visible { opacity:.28;transform:scale(1.57); }
.scroll-window__rings b:nth-child(4).is-visible { opacity:.22;transform:scale(1.76); }
.scroll-window__rings b:nth-child(5).is-visible { opacity:.16;transform:scale(1.95); }
.scroll-window::before,.scroll-window::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  opacity:.48;
}
.scroll-window::before {
  width:76%;
  height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,currentColor 0 43%,transparent 43% 57%,currentColor 57% 100%);
}
.scroll-window::after {
  width:1px;
  height:76%;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,currentColor 0 43%,transparent 43% 57%,currentColor 57% 100%);
}
.scroll-window__mode,.scroll-window small {
  position:absolute;
  font-size:7px;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.scroll-window__mode { left:14px;top:12px;opacity:.58; }
.scroll-window small { right:13px;bottom:11px;font-weight:400; }
.scroll-window > i {
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  transform:translate(-50%,-50%);
  border:1px solid currentColor;
  border-radius:50%;
  background:transparent;
  opacity:.68;
}
.scroll-window > i::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:2px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:currentColor;
}
.scroll-window.is-light { color:var(--ink);border-color:rgba(69,74,78,.78);background:rgba(116,122,126,.08); }

.chapter-transition {
  --portal-x:50vw;
  --portal-y:50vh;
  --portal-size:120px;
  --portal-scale:.16;
  --portal-opacity:0;
  --title-opacity:0;
  --title-y:-42%;
  position:fixed;
  inset:0;
  z-index:116;
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
}
.chapter-transition.is-active { visibility:visible; }
.chapter-transition__portal {
  position:absolute;
  left:var(--portal-x);
  top:var(--portal-y);
  width:var(--portal-size);
  height:var(--portal-size);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(var(--portal-scale));
  background:
    radial-gradient(circle at 42% 38%,rgba(255,255,255,.08),transparent 31%),
    radial-gradient(circle at center,#7d8387 0%,var(--accent-dark) 68%,#24282a 100%);
  opacity:var(--portal-opacity);
  box-shadow:0 0 0 1px rgba(242,242,239,.24),0 0 80px rgba(69,74,78,.42);
}
.chapter-transition__portal::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.chapter-transition__title {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,var(--title-y));
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--paper);
  opacity:var(--title-opacity);
  text-transform:uppercase;
  letter-spacing:.2em;
  white-space:nowrap;
}
.chapter-transition__title span { font-size:8px; }
.chapter-transition__title i { width:48px;height:1px;background:currentColor;opacity:.45; }
.chapter-transition__title p { margin:0;font:clamp(30px,4vw,58px)/1 var(--serif);letter-spacing:.02em;text-transform:none; }
.chapter-transition__portal,.chapter-transition__title { will-change:transform,opacity; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  background: var(--ink);
  transition: opacity .8s ease, visibility .8s;
}
.loader.is-gone { opacity: 0; visibility: hidden; }
.loader__mark { width:112px;animation:pulse 1s infinite alternate; }
.loader__mark img { display:block;width:100%;height:auto; }
.loader__line { width: 140px; height: 1px; background: #333; overflow: hidden; }
.loader__line span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; animation: load 1.6s cubic-bezier(.7,0,.2,1) both; }
.loader p { margin: 0; color: #777; text-transform: uppercase; letter-spacing: .18em; font-size: 9px; }
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { to { opacity:.38;transform:scale(.98); } }

.cursor {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(235,232,223,.7);
  border-radius: 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  pointer-events: none;
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%) scale(.25);
  opacity: 0;
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
  mix-blend-mode: difference;
}
.cursor span { font-size: 8px; letter-spacing: .13em; opacity: 0; transition: opacity .2s; }
.cursor.is-visible { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cursor.is-active { transform: translate(-50%,-50%) scale(1.35); background: white; color: black; mix-blend-mode: difference; }
.cursor.is-active span { opacity: 1; }

.site-header {
  position: fixed;
  z-index: 120;
  left: 0; right: 0; top: 0;
  height: 86px;
  color:var(--paper);
  padding:env(safe-area-inset-top) max(3.2vw,env(safe-area-inset-right)) 0 max(3.2vw,env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  isolation:isolate;
}
.site-header::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(5,7,7,.92) 0%,
    rgba(5,7,7,.72) 62%,
    rgba(5,7,7,.18) 88%,
    transparent 100%
  );
  border-bottom:1px solid rgba(242,242,239,.06);
  backdrop-filter:blur(14px) saturate(.72);
  -webkit-backdrop-filter:blur(14px) saturate(.72);
}
.brand { display:inline-flex;align-items:center;width:max-content; }
.brand__lockup { display:block;width:auto;height:30px; }
.chapter-status { display: flex; align-items: center; gap: 12px; font-size: 9px; text-transform: uppercase; letter-spacing: .17em; }
.chapter-status__kind { color: rgba(242,242,239,.52); }
.chapter-status i { display: block; width: 36px; height: 1px; background: currentColor; opacity: .4; }
.menu-toggle { justify-self: end; border: 0; background: none; cursor: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; }
.menu-toggle i { width: 18px; height: 1px; background: currentColor; transition: transform .3s; }
.menu-toggle i:last-child { margin-left: -26px; transform: translateY(5px); }

.menu {
  position: fixed;
  z-index: 110;
  inset: 0;
  background:var(--accent-dark);
  color: var(--paper);
  padding: 15vh 8vw 6vh;
  display: flex;
  flex-direction: column;
  gap:clamp(12px,1.8vh,24px);
  transform: translateY(-105%);
  transition: transform .8s cubic-bezier(.75,0,.15,1);
}
.menu.is-open { transform: translateY(0); }
.menu::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:rgba(5,7,7,.56);
  opacity:0;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition:opacity .35s,backdrop-filter .35s,-webkit-backdrop-filter .35s;
}
.menu.has-article-open::after {
  opacity:1;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.menu > .eyebrow { margin-bottom:clamp(8px,1.5vh,20px); }
.menu > a,.menu__pending,.menu__group-toggle { width:max-content;font:clamp(42px,5.7vw,82px)/.88 var(--serif);letter-spacing:-.035em; }
.menu > a span,.menu__pending > span,.menu__group-toggle > span { font:9px var(--sans);display:inline-block;width:38px;letter-spacing:.1em;vertical-align:top;margin-top:8px; }
.menu__pending { position:relative;color:rgba(242,242,239,.42); }
.menu__pending small { position:absolute;left:calc(100% + 18px);bottom:.12em;font:8px var(--sans);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap; }
.menu__group { position:relative;width:max-content; }
.menu__group-toggle { position:relative;border:0;padding:0;background:none;color:inherit;text-align:left;cursor:none; }
.menu__group-toggle small { position:absolute;left:calc(100% + 18px);bottom:.12em;font:8px var(--sans);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;color:rgba(242,242,239,.52); }
.menu__group-toggle::after { content:"＋";position:absolute;left:calc(100% + 154px);bottom:.22em;font:14px var(--sans);transition:transform .3s; }
.menu__group-toggle[aria-expanded="true"]::after { transform:rotate(45deg); }
.menu__options {
  position:fixed;
  z-index:3;
  left:50%;
  top:50%;
  width:min(620px,calc(100vw - 64px));
  padding:34px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(242,242,239,.2);
  background:rgba(10,12,12,.96);
  box-shadow:0 32px 110px rgba(0,0,0,.5);
}
.menu__options[hidden] { display:none; }
.menu__options-heading { display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:28px; }
.menu__options-heading .eyebrow { margin-bottom:14px;color:rgba(242,242,239,.5); }
.menu__options-heading h2 { margin:0;font:clamp(34px,4vw,58px)/.95 var(--serif);letter-spacing:-.025em; }
.menu__options-close { display:flex;align-items:center;gap:10px;border:0;background:none;color:inherit;padding:7px 0;cursor:none;text-transform:uppercase;font-size:8px;letter-spacing:.16em; }
.menu__options-close i { position:relative;width:18px;height:18px; }
.menu__options-close i::before,.menu__options-close i::after { content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:currentColor; }
.menu__options-close i::before { transform:rotate(45deg); }
.menu__options-close i::after { transform:rotate(-45deg); }
.menu__options > a,.menu__options > span { display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:14px;padding:20px 0;border-top:1px solid rgba(242,242,239,.14);font:12px var(--sans);letter-spacing:.12em;text-transform:uppercase; }
.menu__options > a > span,.menu__options > span > span { font:32px/1 var(--serif);letter-spacing:0;text-transform:none; }
.menu__options b { font-size:8px;font-weight:400;color:rgba(242,242,239,.46); }
.menu__options small { font-size:7px;letter-spacing:.14em;color:rgba(242,242,239,.5); }
.menu__option-pending { color:rgba(242,242,239,.38); }
.menu__footer { margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;text-transform:uppercase;font-size:9px;letter-spacing:.14em; }
.menu__footer img { display:block;width:74px;height:74px;object-fit:contain; }

.chapter { min-height: 100vh; position: relative; overflow: hidden; }
.chapter + .chapter::before {
  content:"";
  position:absolute;
  z-index:4;
  left:4vw;
  right:4vw;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,currentColor 20%,currentColor 80%,transparent);
  opacity:.18;
  transform:scaleX(var(--break-progress,0));
  transform-origin:center;
}
.eyebrow { margin: 0 0 28px; font-size: 9px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.body-copy { font-size: clamp(15px,1.3vw,18px); line-height: 1.8; font-weight: 300; }
h1,h2,h3,p { margin-top: 0; }
h1,h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
em { font-weight: 400; color: var(--accent-dark); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.dissolve-text { perspective:700px; }
.dissolve-word {
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  transform:translate3d(0,28px,90px) rotateX(-7deg);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    filter 1.05s ease,
    transform 1.05s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--word-index) * 42ms);
  will-change:transform,opacity,filter;
}
.dissolve-text.is-resolved .dissolve-word {
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) rotateX(0);
}

.hero { height:100svh;min-height:680px;display:flex;align-items:center; }
@supports (height:100dvh) { .hero { height:100dvh; } }
.hero__image {
  position: absolute; inset: -6%;
  background: url("https://crossvoce.com/wp-content/uploads/2023/12/s.sudan8_.jpg") center 52% / cover no-repeat;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.07);
}
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,6,7,.83) 0%,rgba(4,7,8,.35) 48%,rgba(4,7,8,.15)), linear-gradient(0deg,rgba(0,0,0,.4),transparent 45%); }
.hero__copy { position: relative; z-index: 2; margin-left: 8vw; width: min(800px,70vw); padding-top: 6vh; }
.hero h1 { font-size: clamp(64px,8.2vw,132px); line-height: .86; margin-bottom: 40px; }
.hero h1 em { color:var(--paper);text-shadow:4px 4px 0 var(--accent-dark); }
.hero__intro { width: min(450px,60vw); margin-left: 25%; font-size: clamp(14px,1.25vw,18px); line-height: 1.65; font-weight: 300; }
.hero__side { position: absolute; right: 2.5vw; top: 50%; z-index: 2; writing-mode: vertical-rl; transform: translateY(-50%); font-size: 8px; text-transform: uppercase; letter-spacing: .2em; }
.enter-button { position: absolute; right: 9vw; bottom: 11vh; z-index: 3; display: flex; align-items: center; gap: 18px; border: 0; background: none; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; cursor: none; }
.enter-button svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: .75; transition: transform .5s; }
.enter-button:hover svg { transform: rotate(45deg); }
.scroll-cue { position: absolute; z-index: 2; left: 3.2vw; bottom: 5vh; display: flex; align-items: center; gap: 14px; text-transform: uppercase; font-size: 8px; letter-spacing: .16em; }
.scroll-cue i { width: 70px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--accent); animation: cue 2s infinite; transform:translateX(-100%); }
@keyframes cue { 50%,100% { transform: translateX(100%); } }

.manifesto { background: var(--paper); color: var(--ink); padding: 20vh 8vw 18vh; }
.manifesto__counter { position: absolute; right: 4vw; top: 14vh; font: 8vw/1 var(--serif); color: rgba(11,13,13,.08); }
.manifesto > h2 {
  max-width:1050px;
  font-size:clamp(48px,7vw,108px);
  line-height:1.08;
  overflow:visible;
}
.manifesto > h2 .dissolve-word {
  line-height:1.08;
  padding:.05em 0 .1em;
  margin:-.05em 0 -.1em;
}
.manifesto__grid { margin-top: 15vh; display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; }
.manifesto .lead { font: clamp(36px,4.2vw,70px)/1 var(--serif); letter-spacing: -.03em; }
.manifesto .body-copy { max-width: 520px; }
.viewpoint-sequence {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin:13vh 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(11,13,13,.28);
}
.viewpoint-sequence li {
  position:relative;
  min-height:130px;
  padding:18px 18px 0 0;
  border-right:1px solid rgba(11,13,13,.12);
}
.viewpoint-sequence li:last-child { border-right:0; }
.viewpoint-sequence li::before {
  content:"";
  position:absolute;
  left:0;
  top:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent-dark);
  box-shadow:0 0 0 7px rgba(69,74,78,.08);
}
.viewpoint-sequence span {
  display:block;
  margin-bottom:26px;
  color:rgba(11,13,13,.42);
  font-size:8px;
  letter-spacing:.18em;
}
.viewpoint-sequence strong {
  display:block;
  font:clamp(23px,2.3vw,36px)/1 var(--serif);
  font-weight:400;
}
.viewpoint-sequence small {
  display:block;
  max-width:150px;
  margin-top:10px;
  color:rgba(11,13,13,.58);
  font-size:8px;
  line-height:1.45;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.viewpoint-sequence__open {
  position:relative;
  z-index:2;
  margin:22px 0 0 auto;
  width:max-content;
  max-width:100%;
  color:rgba(11,13,13,.58);
  font:italic 18px/1.4 var(--serif);
}
.orbit { position: absolute; right: -4vw; bottom: -10vw; width: 34vw; height: 34vw; border: 1px solid rgba(11,13,13,.15); border-radius: 50%; animation: spin 28s linear infinite; }
.orbit span { position: absolute; font-size: 8px; letter-spacing: .17em; text-transform: uppercase; }
.orbit span:nth-child(1){top:4%;left:47%}.orbit span:nth-child(2){right:3%;top:48%}.orbit span:nth-child(3){bottom:4%;left:44%}.orbit span:nth-child(4){left:3%;top:48%}
.orbit i { position:absolute;width:7px;height:7px;background:var(--accent-dark);border-radius:50%;top:50%;left:50%;box-shadow:0 0 0 8vw rgba(69,74,78,.08); }
@keyframes spin { to { transform: rotate(360deg); } }

.work { background: var(--ink); padding: 18vh 0 16vh; }
.work__heading { padding: 0 8vw 11vh; display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 8vw; }
.work h2 { font-size: clamp(58px,8vw,122px); line-height: .86; margin: 0; }
.work h2 em { color:var(--mist);text-decoration:none; }
.gallery-hint { display:none; }
.gallery {
  position:relative;
  height:175vh;
  min-height:1180px;
  padding:0 4vw;
  perspective:1300px;
  perspective-origin:50% 42%;
  transform-style:preserve-3d;
  isolation:isolate;
}
.field-grid {
  position:absolute;
  z-index:0;
  left:7%;
  right:7%;
  top:10%;
  height:72%;
  background-image:
    linear-gradient(rgba(174,178,181,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(174,178,181,.1) 1px,transparent 1px);
  background-size:54px 54px;
  transform:rotateX(72deg) translate3d(0,8%,-360px);
  transform-origin:center center;
  mask-image:radial-gradient(ellipse at center,black 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 72%);
  opacity:.38;
}
.field-origin {
  position:absolute;
  z-index:1;
  left:50%;
  top:48%;
  transform:translate3d(-50%,-50%,-180px);
  display:grid;
  justify-items:center;
  gap:12px;
  color:rgba(242,242,239,.42);
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:7px;
  white-space:nowrap;
}
.field-origin i { width:1px;height:72px;background:currentColor; }
.field-origin p { margin:0;writing-mode:vertical-rl; }
.project {
  position:absolute;
  z-index:2;
  display:block;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:box-shadow .55s ease,opacity .55s ease,filter .55s ease;
  will-change:transform;
  backface-visibility:hidden;
}
.project:hover { box-shadow:0 42px 95px rgba(0,0,0,.46); }
.gallery.has-picked .project:not(.is-picked) { opacity:.34;filter:grayscale(1) brightness(.62) blur(1px); }
.project.is-picked { z-index:20;box-shadow:0 54px 120px rgba(0,0,0,.58),0 0 0 1px rgba(242,242,239,.16); }
.project img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .7s; }
.project:hover img,.project.is-picked img { transform:scale(1.035);filter:grayscale(1) contrast(1.18) brightness(.88); }
.project::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 50%); }
.project--wide { left:2%;top:3%;width:58%;aspect-ratio:16/9; }
.project--portrait { right:4%;top:18%;width:28%;aspect-ratio:3/4; }
.project--square { left:10%;top:56%;width:36%;aspect-ratio:1; }
.project--landscape { right:4%;top:67%;width:45%;aspect-ratio:4/3; }
.project__pickup {
  position:absolute;
  z-index:4;
  right:18px;
  top:18px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(242,242,239,.28);
  border-radius:999px;
  background:rgba(10,12,12,.28);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:7px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s,transform .35s;
}
.project__pickup i { width:6px;height:6px;border-radius:50%;background:var(--mist);box-shadow:0 0 0 5px rgba(173,177,180,.12); }
.project:hover .project__pickup,.project.is-picked .project__pickup { opacity:1;transform:none; }
.project__meta { position:absolute; z-index:3; left:28px; right:28px; bottom:25px; display:grid; grid-template-columns:30px 1fr; align-items:end;transform:translateZ(30px); }
.project__meta span { grid-row:1/3; font-size:9px; opacity:.65; align-self:start; padding-top:7px; }
.project__meta h3 { font: clamp(28px,3vw,48px)/1 var(--serif); margin:0; }
.project__meta p { margin:8px 0 0; font-size:9px; letter-spacing:.13em; text-transform:uppercase; opacity:.7; }

.about { background:var(--paper);color:var(--ink);min-height:120vh;padding:18vh 8vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:center; }
.about__portrait { height: 78vh; overflow: hidden; }
.about__portrait img { width:100%;height:110%;object-fit:cover;filter:grayscale(1);transform:translateY(-4%); }
.about h2 { font-size: clamp(48px,6vw,92px); line-height: .94; }
.about .body-copy { max-width: 610px; margin-left: 14%; }
.about__identity { text-transform:none;letter-spacing:.09em; }
.text-link { display:flex;justify-content:space-between;align-items:center;max-width:610px;margin:55px 0 0 14%;padding:18px 0;border-top:1px solid rgba(11,13,13,.5);border-bottom:1px solid rgba(11,13,13,.5);font-size:11px;text-transform:uppercase;letter-spacing:.15em; }
.text-link--identity { text-transform:none;letter-spacing:.12em; }
.about blockquote { position:absolute;left:4vw;bottom:3vh;margin:0;font:italic clamp(55px,9vw,150px)/1 var(--serif);color:rgba(62,67,72,.48);white-space:nowrap; }

.contact { min-height: 100vh; background:#080909; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16vh 5vw 0; }
.contact h2 { display:flex;flex-direction:column;align-items:center;gap:.22em;font-size:clamp(70px,10vw,160px);line-height:.9;margin:0;position:relative;z-index:2; }
.contact__line { display:block; }
.contact h2 em { color:var(--paper);text-shadow:4px 4px 0 var(--accent-dark); }
.contact__halo { position:absolute;width:44vw;height:44vw;border-radius:50%;background:radial-gradient(circle,rgba(116,122,126,.58),rgba(11,13,13,0) 68%);filter:blur(20px);animation:breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { to { transform:scale(1.22);opacity:.55; } }
.contact__button { position:relative;z-index:2;width:210px;height:210px;border-radius:50%;background:var(--accent-dark);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin-top:8vh;text-transform:uppercase;font-size:10px;letter-spacing:.14em;transition:transform .45s;box-shadow:0 0 0 1px rgba(242,242,239,.18); }
.contact__button:hover { transform:scale(1.08) rotate(-4deg); }
.contact footer { width:100%;margin-top:auto;padding:8vh 0 4vh;display:grid;grid-template-columns:1fr 1fr 1fr;text-align:left;align-items:end;border-top:1px solid rgba(235,232,223,.15); }
.contact footer > p { font:24px/1.1 var(--serif);margin:0; }
.contact footer > div { display:flex;justify-content:flex-end;gap:20px;font-size:8px;text-transform:uppercase;letter-spacing:.12em; }
.contact footer .brand__lockup { height:34px; }
.footer__pathways > [aria-disabled="true"] { color:rgba(242,242,239,.38); }

@media (max-width: 1100px) {
  .hero__copy { width:min(760px,78vw); }
  .hero h1 { font-size:clamp(62px,9vw,105px); }
  .work__heading { grid-template-columns:1.15fr .85fr; }
  .about { gap:6vw;padding-left:6vw;padding-right:6vw; }
  .about h2 { font-size:clamp(48px,6.8vw,76px); }
  .depth-planes { opacity:.15;perspective:760px; }
}

@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .site-header { height:78px;padding-left:max(30px,env(safe-area-inset-left));padding-right:max(30px,env(safe-area-inset-right)); }
  .hero__copy { margin-left:7vw;width:86vw; }
  .hero h1 { font-size:clamp(72px,10.5vw,104px); }
  .hero__intro { margin-left:18%; }
  .manifesto { padding-left:7vw;padding-right:7vw; }
  .manifesto__grid { gap:6vw; }
  .viewpoint-sequence { grid-template-columns:repeat(3,1fr); }
  .viewpoint-sequence li:nth-child(3) { border-right:0; }
  .viewpoint-sequence li:nth-child(n+4) { border-top:1px solid rgba(11,13,13,.12); }
  .work__heading { grid-template-columns:1fr;gap:32px; }
  .work__heading .body-copy { max-width:520px;margin-left:22%; }
  .gallery { height:150vh;min-height:1080px; }
  .project--wide { left:2%;top:3%;width:64%; }
  .project--portrait { right:2%;top:22%;width:33%; }
  .project--square { left:6%;top:57%;width:42%; }
  .project--landscape { right:2%;top:70%;width:49%; }
  .about { grid-template-columns:1fr;gap:55px;padding:14vh 9vw 20vh; }
  .about__portrait { width:62vw;height:58vh; }
  .about__copy { width:82%;margin-left:auto; }
  .contact footer { grid-template-columns:1fr 1fr;gap:36px; }
  .contact footer > div { grid-column:1/3;justify-content:flex-start; }
}

@media (max-width: 760px) {
  body { cursor:auto;touch-action:auto; }
  .cursor, .chapter-status { display:none; }
  .depth-canvas { opacity:.34; }
  .depth-planes { opacity:.1;perspective:620px; }
  .depth-planes i { width:42vw; }
  .scroll-window {
    --window-w:82px;
    --window-h:82px;
    transform:translate3d(var(--window-x),var(--window-y),0) rotate(var(--window-rotate)) scale(.82);
    transform-origin:top left;
  }
  .scroll-window__mode { display:none; }
  .site-header {
    height:calc(68px + env(safe-area-inset-top));
    grid-template-columns:1fr 1fr;
    padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  }
  .brand__lockup { height:24px; }
  .hero { min-height:620px; }
  .hero__copy { margin-left:max(24px,env(safe-area-inset-left));width:calc(100vw - 48px - env(safe-area-inset-left) - env(safe-area-inset-right));padding-top:0; }
  .hero h1 { font-size:clamp(52px,15vw,66px); }
  .hero__intro { width:80%;margin-left:12%; }
  .hero__side { display:none; }
  .enter-button { right:max(20px,env(safe-area-inset-right));bottom:max(10vh,calc(42px + env(safe-area-inset-bottom)));min-height:44px; }
  .scroll-cue { left:max(20px,env(safe-area-inset-left));bottom:max(3vh,env(safe-area-inset-bottom)); }
  .manifesto { padding:15vh 24px 14vh; }
  .manifesto__grid,.work__heading,.about { grid-template-columns:1fr; }
  .manifesto__grid { gap:30px;margin-top:10vh; }
  .viewpoint-sequence {
    grid-template-columns:repeat(2,1fr);
    margin-top:10vh;
  }
  .viewpoint-sequence li {
    min-height:112px;
    padding-right:12px;
  }
  .viewpoint-sequence li:nth-child(2n) { border-right:0; }
  .viewpoint-sequence li:nth-child(n+3) { border-top:1px solid rgba(11,13,13,.12); }
  .viewpoint-sequence li:last-child { grid-column:1/3; }
  .viewpoint-sequence__open { width:72%;margin-top:18px; }
  .orbit { width:70vw;height:70vw; }
  .work { padding-top:14vh; }
  .work { padding-bottom:8vh; }
  .work__heading { padding:0 24px 5vh;gap:30px; }
  .gallery-hint {
    display:block;
    margin:0 24px 14px;
    color:rgba(242,242,239,.62);
    font:9px/1.3 var(--sans);
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  .gallery {
    display:flex;
    height:auto;
    min-height:0;
    overflow-x:auto;
    overflow-y:visible;
    gap:16px;
    padding:42px max(18vw,env(safe-area-inset-right)) 54px max(24px,env(safe-area-inset-left));
    perspective:800px;
    scroll-snap-type:none;
    scroll-padding-inline:max(24px,env(safe-area-inset-left));
    overscroll-behavior:auto;
    overscroll-behavior-y:auto;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }
  .field-grid { left:0;right:0;top:0;height:100%;transform:rotateX(74deg) translate3d(0,18%,-260px); }
  .field-origin { display:none; }
  .project,.project--portrait,.project--square,.project--landscape {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    flex:0 0 74vw;
    width:auto;
    aspect-ratio:3/4;
    margin:0;
    scroll-snap-align:center;
    scroll-snap-stop:normal;
    transform:none;
  }
  .project__pickup { opacity:.68;transform:none; }
  .about { padding:14vh 24px 26vh;gap:55px; }
  .about__portrait { height:65vh; }
  .about .body-copy,.text-link { margin-left:0; }
  .about blockquote {
    left:max(24px,env(safe-area-inset-left));
    right:max(24px,env(safe-area-inset-right));
    bottom:max(7vh,env(safe-area-inset-bottom));
    width:auto;
    font-size:clamp(42px,13vw,56px);
    line-height:1.12;
    text-align:center;
    white-space:normal;
    text-wrap:balance;
  }
  .contact__button { width:165px;height:165px; }
  .contact { padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:env(safe-area-inset-bottom); }
  .contact footer { grid-template-columns:1fr;gap:30px; }
  .contact footer > div { justify-content:flex-start;flex-wrap:wrap; }
  .menu { gap:clamp(10px,1.5vh,16px);padding:max(16vh,calc(92px + env(safe-area-inset-top))) max(24px,env(safe-area-inset-right)) max(5vh,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
  .menu > a,.menu__pending,.menu__group-toggle { font-size:clamp(42px,12vw,56px);line-height:.92; }
  .menu__group-toggle small { left:calc(100% + 12px); }
  .menu__group-toggle::after { left:calc(100% + 132px); }
  .menu__options { left:50%;top:50%;width:calc(100vw - 40px);padding:24px;transform:translate(-50%,-50%); }
  .menu__options-heading { padding-bottom:22px; }
  .menu__options > a,.menu__options > span { padding:18px 0; }
  .menu__footer img { width:58px;height:58px; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 560px) {
  .site-header { height:58px; }
  .brand__lockup { height:22px; }
  .hero { min-height:100dvh; }
  .hero__copy { width:72vw;margin-left:7vw;padding-top:10vh; }
  .hero h1 { font-size:clamp(44px,8.5vw,68px);margin-bottom:18px; }
  .hero__intro { width:48%;margin-left:36%;font-size:12px; }
  .enter-button { right:5vw;bottom:8vh; }
  .scroll-cue { display:none; }
  .menu { padding-top:14vh; }
  .menu > a,.menu__pending,.menu__group-toggle { font-size:clamp(30px,8vh,46px);line-height:.92; }
  .menu__options { left:50%;top:50%;width:min(620px,calc(100vw - 40px));transform:translate(-50%,-50%); }
  .menu__footer { font-size:7px; }
  .scroll-window { transform:translate3d(var(--window-x),var(--window-y),0) scale(.66); }
}

@media (max-width: 390px) {
  .hero h1 { font-size:clamp(48px,14.4vw,57px); }
  .hero__intro { width:88%;margin-left:7%; }
  .enter-button span { display:none; }
  .manifesto > h2 { font-size:44px; }
  .work h2 { font-size:53px; }
  .contact h2 { font-size:61px; }
}

@media (hover: none), (pointer: coarse) {
  body,.menu-toggle,.enter-button { cursor:auto; }
  .cursor { display:none; }
  .project:hover { box-shadow:none; }
  .project:hover img { transform:none;filter:grayscale(1) contrast(1.08); }
  .gallery.has-picked .project:not(.is-picked) { opacity:.68;filter:grayscale(1) brightness(.76); }
  .project.is-picked { box-shadow:0 28px 62px rgba(0,0,0,.42); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .cursor,.scroll-window,.chapter-transition,.depth-canvas,.depth-planes { display:none; }
  .dissolve-word { opacity:1!important;filter:none!important;transform:none!important; }
}