:root {
  color-scheme: light;
  --ink: #11110f;
  --paper: #efede4;
  --blue: #2851ff;
  --orange: #ff552b;
  --acid: #c9ff2f;
  --violet: #5449ff;
  --line: 1px solid var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: inherit; }
a:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 30; top: 8px; left: 8px; padding: 10px 12px; border: var(--line); background: var(--acid); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr .7fr;
  min-height: 58px;
  border-bottom: var(--line);
  background: var(--paper);
  font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.site-header > * { display: flex; align-items: center; padding: 12px 14px; }
.site-header > * + * { border-left: var(--line); }
.wordmark { font: 900 23px/.85 Arial, sans-serif; letter-spacing: -.055em; text-decoration: none; }
.site-header nav { gap: clamp(18px, 4vw, 58px); }
.site-header nav a { text-underline-offset: 4px; }
.site-header > span { justify-content: flex-end; }

.eyebrow,
.gallery-meta,
.gallery-enter { margin: 0; font: 700 10px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }

.home-hero {
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - 58px);
  min-height: calc(100svh - 58px);
  border-bottom: var(--line);
}
.home-hero h1 { max-width: 9.2em; margin: 0; padding: 22px 14px; font-size: clamp(4.8rem, 10.4vw, 11.5rem); font-weight: 900; line-height: .74; letter-spacing: -.09em; text-transform: uppercase; }
.home-position { background: var(--blue); color: white; }

.how { border-bottom: var(--line); }
.how-intro { display: grid; grid-template-columns: .32fr 1.22fr .46fr; min-height: 470px; border-bottom: var(--line); }
.how-intro > * { margin: 0; padding: 18px 14px; }
.how-intro > * + * { border-left: var(--line); }
.how-intro h2 { display: flex; align-items: flex-end; font-size: clamp(3.8rem, 7.7vw, 8.5rem); line-height: .76; letter-spacing: -.08em; text-transform: uppercase; }
.how-intro > p:last-child { display: flex; align-items: flex-end; font-size: 16px; line-height: 1.14; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-bottom: var(--line); list-style: none; }
.how-steps li { display: flex; min-height: 360px; flex-direction: column; padding: 14px; }
.how-steps li + li { border-left: var(--line); }
.how-steps span, .relation span, .belief-grid span { font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.how-steps strong { margin-top: auto; font-size: clamp(2.1rem, 3.6vw, 4rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
.how-steps p { max-width: 28ch; margin: 16px 0 0; font-size: 13px; line-height: 1.2; }
.relation { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--acid); }
.relation div { display: flex; min-height: 230px; flex-direction: column; justify-content: space-between; padding: 14px; }
.relation div + div { border-left: var(--line); }
.relation strong { font-size: clamp(2.2rem, 4vw, 4.7rem); line-height: .78; letter-spacing: -.065em; text-transform: uppercase; }

.galleries-header { display: grid; grid-template-columns: .32fr 1.68fr; min-height: 260px; border-bottom: var(--line); }
.galleries-header > * { margin: 0; padding: 18px 14px; }
.galleries-header > * + * { border-left: var(--line); }
.galleries-header h2 { display: flex; align-items: flex-end; font-size: clamp(4.5rem, 9vw, 10rem); line-height: .76; letter-spacing: -.085em; text-transform: uppercase; }

.collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--line); }
.gallery-panel { display: grid; min-width: 0; grid-template-rows: minmax(330px, auto) 340px; text-decoration: none; }
.gallery-panel + .gallery-panel { border-left: var(--line); }
.gallery-copy { display: flex; min-width: 0; flex-direction: column; padding: 16px; border-bottom: var(--line); }
.gallery-copy h3 { margin: auto 0 18px; font-size: clamp(3.25rem, 5.15vw, 6.7rem); line-height: .72; letter-spacing: -.09em; text-transform: uppercase; }
.gallery-copy > p:not(.gallery-meta) { max-width: 32ch; margin: 0; font-size: clamp(.95rem, 1.15vw, 1.2rem); line-height: 1.06; }
.gallery-enter { display: flex; justify-content: space-between; margin: 28px -16px -16px; padding: 18px 16px; border-top: var(--line); background: var(--ink); color: var(--paper); }

.gallery-field { background: var(--acid); }
.field-composition { position: relative; min-height: 340px; overflow: hidden; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(17,17,15,.2) 50%, transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px), rgba(17,17,15,.2) 50%, transparent calc(50% + .5px)); }
.field-work { position: absolute; display: flex; align-items: flex-end; padding: 12px; border: var(--line); box-shadow: 10px 10px 0 var(--ink); font-size: clamp(2.6rem, 5vw, 6rem); font-weight: 900; line-height: .8; letter-spacing: -.08em; }
.field-work-a { inset: 9% 34% 23% 8%; background: var(--violet); color: white; transform: rotate(-2deg); }
.field-work-b { width: 41%; height: 24%; right: 6%; top: 38%; background: var(--orange); transform: rotate(4deg); }
.field-work-c { width: 21%; height: 39%; right: 13%; bottom: 4%; background: #ffc4dd; transform: rotate(-7deg); }
.crosshair { position: absolute; z-index: 3; top: calc(50% - 16px); left: calc(50% - 16px); width: 33px; height: 33px; border: var(--line); border-radius: 50%; background: var(--paper); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--ink); }
.crosshair::before { top: 15px; right: -8px; left: -8px; height: 1px; }
.crosshair::after { top: -8px; bottom: -8px; left: 15px; width: 1px; }

.gallery-relay { background: var(--ink); color: var(--paper); }
.gallery-relay .gallery-copy { border-bottom-color: var(--paper); }
.gallery-relay .gallery-enter { border-top-color: var(--paper); background: var(--orange); color: var(--ink); }
.relay-composition { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 74px 1fr; min-height: 340px; overflow: hidden; background: var(--orange); color: var(--ink); }
.relay-stage { display: flex; flex-direction: column; justify-content: space-between; padding: 13px; border-right: var(--line); border-bottom: var(--line); font: 700 9px/1 ui-monospace, monospace; text-transform: uppercase; }
.relay-stage:last-of-type { border-right: 0; }
.relay-stage strong { font-size: clamp(1rem, 1.8vw, 1.6rem); }
.relay-stage-active { background: var(--acid); }
.relay-card { position: absolute; top: 29%; right: 12%; bottom: 7%; left: 12%; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 13px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 10px 10px 0 var(--ink); transform: rotate(2deg); }
.relay-card strong { margin: auto 0; font-size: clamp(3.3rem, 5vw, 6.6rem); line-height: .72; letter-spacing: -.09em; text-transform: uppercase; }
.relay-card small { font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }

.gallery-system { background: var(--paper); }
.gallery-system .gallery-copy { background: var(--blue); color: white; border-bottom-color: white; }
.gallery-system .gallery-enter { border-top-color: white; background: var(--acid); color: var(--ink); }
.system-composition { display: grid; grid-template-rows: 1fr auto; min-height: 340px; background: var(--paper); }
.system-statement { display: flex; align-items: flex-end; margin: 0; padding: 14px; background: var(--orange); font-size: clamp(3rem, 4.6vw, 5.9rem); font-weight: 900; line-height: .7; letter-spacing: -.09em; text-transform: uppercase; }
.system-composition dl { margin: 0; border-top: var(--line); }
.system-composition dl div { display: grid; grid-template-columns: .42fr 1fr; min-height: 58px; border-bottom: var(--line); }
.system-composition dl div:last-child { border-bottom: 0; }
.system-composition dt, .system-composition dd { display: flex; align-items: center; margin: 0; padding: 10px 13px; font: 700 10px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.system-composition dd { border-left: var(--line); }

.beliefs { border-bottom: var(--line); }
.beliefs-header { display: grid; grid-template-columns: .32fr 1.22fr .46fr; min-height: 520px; border-bottom: var(--line); background: var(--orange); }
.beliefs-header > * { margin: 0; padding: 18px 14px; }
.beliefs-header > * + * { border-left: var(--line); }
.beliefs-header h2 { display: flex; align-items: flex-end; font-size: clamp(4rem, 8.8vw, 9.7rem); line-height: .74; letter-spacing: -.085em; text-transform: uppercase; }
.beliefs-header > p:last-child { display: flex; align-items: flex-end; font-size: 15px; line-height: 1.15; }
.belief-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.belief-grid article { min-height: 330px; padding: 14px; border-bottom: var(--line); }
.belief-grid article + article { border-left: var(--line); }
.belief-grid article:nth-child(5) { border-left: 0; }
.belief-grid h3 { margin: 78px 0 14px; font-size: clamp(1.8rem, 3vw, 3.5rem); line-height: .84; letter-spacing: -.06em; text-transform: uppercase; }
.belief-grid p { max-width: 29ch; margin: 0; font-size: 13px; line-height: 1.2; }
.mythos { display: grid; grid-template-columns: .32fr 1.22fr .46fr; min-height: 620px; background: var(--ink); color: var(--paper); }
.mythos > * { margin: 0; padding: 18px 14px; }
.mythos > * + * { border-left: 1px solid var(--paper); }
.mythos-words { display: flex; align-items: flex-end; color: var(--acid); font-size: clamp(3.8rem, 7.3vw, 8rem); font-weight: 900; line-height: .76; letter-spacing: -.08em; text-transform: uppercase; }
.mythos > p:last-child { display: flex; align-items: flex-end; font-size: 15px; line-height: 1.15; }

.position { display: grid; grid-template-columns: .32fr 1.22fr .46fr; min-height: 620px; border-bottom: var(--line); background: var(--blue); color: white; }
.position > * { margin: 0; padding: 18px 14px; }
.position > * + * { border-left: 1px solid white; }
.position h2 { display: flex; align-items: flex-end; font-size: clamp(4rem, 9vw, 10rem); line-height: .75; letter-spacing: -.085em; text-transform: uppercase; }
.position > p:last-child { display: flex; align-items: flex-end; font-size: 15px; line-height: 1.15; }

.money { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--line); background: var(--ink); color: var(--paper); }
.money-title { display: flex; min-height: 650px; flex-direction: column; justify-content: space-between; padding: 18px 14px; border-right: 1px solid var(--paper); }
.money-title h2 { margin: 0; color: var(--orange); font-size: clamp(4rem, 8vw, 9rem); line-height: .73; letter-spacing: -.085em; text-transform: uppercase; }
.money-ledger { margin: 0; }
.money-ledger div { min-height: 25%; padding: 16px; border-bottom: 1px solid var(--paper); }
.money-ledger div:last-child { border-bottom: 0; }
.money-ledger dt { font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.money-ledger dd { max-width: 42ch; margin: 45px 0 0; font-size: 15px; line-height: 1.16; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 58px; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.site-footer span { display: flex; align-items: center; padding: 14px; }
.site-footer span + span { border-left: var(--line); }
.site-footer span:nth-child(2) { justify-content: center; }
.site-footer span:last-child { justify-content: flex-end; }

@media (max-width: 800px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .home-hero h1 { font-size: clamp(4.4rem, 20vw, 7rem); }
  .how-intro, .beliefs-header, .mythos { grid-template-columns: 1fr; }
  .how-intro > * + *, .beliefs-header > * + *, .mythos > * + * { border-left: 0; border-top: var(--line); }
  .mythos > * + * { border-top-color: var(--paper); }
  .how-intro .eyebrow, .beliefs-header .eyebrow, .mythos .eyebrow { min-height: 68px; }
  .how-intro h2, .beliefs-header h2 { min-height: 400px; font-size: clamp(4rem, 19vw, 7rem); }
  .how-intro > p:last-child, .beliefs-header > p:last-child, .mythos > p:last-child { min-height: 170px; }
  .how-steps, .relation, .belief-grid { grid-template-columns: 1fr 1fr; }
  .how-steps li:nth-child(odd), .relation div:nth-child(odd), .belief-grid article:nth-child(odd) { border-left: 0; }
  .how-steps li:nth-child(even), .relation div:nth-child(even), .belief-grid article:nth-child(even) { border-left: var(--line); }
  .how-steps li:nth-child(n+3), .relation div:nth-child(n+3), .belief-grid article:nth-child(n+3) { border-top: var(--line); }
  .mythos-words { min-height: 520px; font-size: clamp(3.5rem, 16vw, 6rem); }
  .galleries-header { grid-template-columns: 1fr; }
  .galleries-header > * + * { border-left: 0; border-top: var(--line); }
  .galleries-header h2 { min-height: 260px; }
  .collection-grid { grid-template-columns: 1fr; }
  .gallery-panel { grid-template-rows: minmax(310px, auto) 320px; }
  .gallery-panel + .gallery-panel { border-top: var(--line); border-left: 0; }
  .gallery-copy h3 { font-size: clamp(4rem, 17vw, 7rem); }
  .field-composition, .relay-composition, .system-composition { min-height: 320px; }
  .relay-card { right: 10%; left: 10%; }
  .position { grid-template-columns: 1fr; }
  .position > * + * { border-top: 1px solid white; border-left: 0; }
  .position .eyebrow { min-height: 68px; }
  .position h2 { min-height: 430px; font-size: clamp(4.2rem, 20vw, 7rem); }
  .position > p:last-child { min-height: 170px; }
  .money { grid-template-columns: 1fr; }
  .money-title { border-right: 0; border-bottom: 1px solid var(--paper); }
}

@media (max-width: 520px) {
  .site-header > span { display: none; }
  .site-header { grid-template-columns: 1fr; }
  .relay-stage { padding: 9px 7px; }
  .relay-stage strong { font-size: 12px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer span + span { border-top: var(--line); border-left: 0; }
  .site-footer span:nth-child(2), .site-footer span:last-child { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }