:root {
  color-scheme: dark;
  --black: #090505;
  --ink: #110909;
  --panel: #160c0c;
  --red: #ee2a24;
  --red-deep: #75110e;
  --white: #f3ede8;
  --muted: #9b8d87;
  --line: rgba(238, 42, 36, .24);
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 12%, rgba(184, 20, 17, .12), transparent 31rem),
    var(--black);
  color: var(--white);
  font-family: var(--sans);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(238,42,36,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(238,42,36,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .12;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 48px, 1440px);
  height: 86px;
  margin: auto;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
}

.wordmark { display: flex; align-items: center; gap: 5px; font-weight: 500; }
.wordmark span { color: var(--red); }
.wordmark .mark { width: 7px; height: 7px; margin-right: 9px; background: var(--red); box-shadow: 0 0 14px var(--red); }
.masthead p { margin: 0; color: var(--muted); }

main, footer { width: min(100% - 48px, 1440px); margin: auto; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(360px, .82fr);
  align-items: center;
  min-height: calc(100vh - 86px);
  padding: 70px 0;
}

.hero-index { align-self: start; padding-top: 12px; color: var(--red); font: 11px var(--mono); writing-mode: vertical-rl; letter-spacing: .2em; }
.kicker { margin: 0 0 26px; color: var(--red); font: 500 11px var(--mono); letter-spacing: .2em; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.065em; }

h1 { max-width: 820px; margin-bottom: 32px; font-size: clamp(3.6rem, 7.4vw, 8rem); font-weight: 500; line-height: .91; }
h1 em { color: var(--red); font-style: normal; }

.hero-deck { max-width: 600px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.7; }
.text-link { display: inline-flex; gap: 18px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--red); color: var(--white); font: 500 11px var(--mono); letter-spacing: .16em; }
.text-link span { color: var(--red); }

.hero-figure { position: relative; aspect-ratio: 1; max-width: 590px; justify-self: end; width: 100%; }
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.orbit-one { inset: 8%; }
.orbit-two { inset: 26%; border-style: dashed; animation: rotate 24s linear infinite; }
.axis { position: absolute; background: var(--line); }
.axis-x { top: 50%; left: 0; width: 100%; height: 1px; }
.axis-y { left: 50%; top: 0; width: 1px; height: 100%; }
.signal { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--red); background: var(--black); color: var(--red); border-radius: 50%; font: 400 16px var(--mono); box-shadow: 0 0 30px rgba(238,42,36,.12); }
.signal-a { top: 8%; left: calc(50% - 27px); }
.signal-b { right: 13%; bottom: 21%; }
.signal-c { left: 19%; bottom: 14%; background: var(--red); color: var(--black); }
.figure-note { position: absolute; right: 0; bottom: 2%; color: var(--muted); font: 10px/1.7 var(--mono); letter-spacing: .13em; text-align: right; }

.field { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(520px, 1.28fr); gap: clamp(40px, 7vw, 120px); padding: 130px 0; border-top: 1px solid var(--line); }
.section-heading h2, .decode-title h2, .fib-copy h2 { margin-bottom: 30px; font-size: clamp(2.8rem, 5vw, 5.7rem); font-weight: 500; line-height: .98; }
.section-heading > p:last-child { max-width: 520px; color: var(--muted); font-size: 1rem; line-height: 1.8; }

.pattern-panel { align-self: start; border: 1px solid var(--line); background: rgba(22,12,12,.78); box-shadow: 0 28px 80px rgba(0,0,0,.4); }
.panel-meta, .panel-foot { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 20px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; }
.panel-meta { border-bottom: 1px solid var(--line); }
.panel-foot { border-top: 1px solid var(--line); }
.live { color: var(--red); }
.live i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: pulse 1.5s ease infinite; }

.pattern-grid { display: grid; grid-template-columns: 86px repeat(3, 1fr); }
.row-label, .token { min-height: 82px; border-bottom: 1px solid rgba(238,42,36,.11); }
.row-label { display: flex; align-items: center; padding-left: 18px; color: var(--muted); font: 10px var(--mono); }
.token { position: relative; display: grid; place-items: center; border-left: 1px solid rgba(238,42,36,.11); }
.token span { position: relative; z-index: 1; color: #6b5a55; font: 300 13px var(--mono); transition: .25s ease; }
.token::before { content: ""; position: absolute; inset: 13px; transform: scaleX(.05); opacity: 0; background: var(--red); transform-origin: left; }
.token.active span { color: var(--black); font-weight: 500; }
.token.void { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(238,42,36,.05) 8px 9px); }
.scanning .token.active::before { animation: activate .5s ease forwards; }
.scanning .token.active:nth-child(7)::before { animation-delay: .18s; }
.scanning .token.active:nth-child(10)::before { animation-delay: .36s; }
.scanning .token.active:nth-child(14)::before { animation-delay: .54s; }
.scanning .token.active:nth-child(20)::before { animation-delay: .72s; }
.scanning .token.active:nth-child(23)::before { animation-delay: .9s; }
.panel-foot button { border: 0; padding: 0; background: none; color: var(--red); font: inherit; letter-spacing: inherit; cursor: pointer; }
.panel-foot button:hover { color: var(--white); }
.panel-foot p { margin: 0; }
.panel-foot b { color: var(--white); font-weight: 400; }

.fibonacci { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(520px, 1.3fr); gap: clamp(40px, 7vw, 120px); padding: 130px 0; border-top: 1px solid var(--line); }
.fib-copy > p:last-child { max-width: 510px; color: var(--muted); line-height: 1.8; }
.fib-copy strong { color: var(--white); font-weight: 500; }
.fib-readout { align-self: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fib-rule { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; color: var(--muted); font: 10px var(--mono); letter-spacing: .11em; }
.fib-rule b { color: var(--red); font-weight: 400; }
.fib-readout ol { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); list-style: none; }
.fib-readout li { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: .7; padding: 12px; border-right: 1px solid var(--line); background: linear-gradient(to top, rgba(238,42,36,.08), transparent); }
.fib-readout li span { color: var(--muted); font: 9px var(--mono); }
.fib-readout li b { color: var(--white); font: 400 clamp(1.2rem, 2.5vw, 2.6rem) var(--mono); }
.fib-readout li:nth-child(4) { background: var(--red); }
.fib-readout li:nth-child(4) span, .fib-readout li:nth-child(4) b { color: var(--black); }
.fib-equation { margin: 0; padding: 18px 0; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-align: right; }
.fib-equation span { color: var(--white); }
.repeat-copy { grid-column: 1; padding-top: 38px; border-top: 1px solid var(--line); }
.repeat-copy h3 { margin-bottom: 20px; font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.04em; }
.repeat-copy > p:last-child { max-width: 510px; color: var(--muted); line-height: 1.8; }
.repeat-copy strong { color: var(--white); font-weight: 500; }
.repeat-readout { grid-column: 2; display: grid; grid-template-columns: repeat(10, 1fr); align-self: center; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.repeat-group { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 128px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(to top, rgba(238,42,36,.07), transparent); }
.repeat-group span { color: var(--muted); font: 9px var(--mono); }
.repeat-group b { color: var(--white); font: 400 clamp(.85rem, 1.25vw, 1.2rem) var(--mono); white-space: nowrap; }
.repeat-one { grid-column: span 1; }
.repeat-two { grid-column: span 2; }
.repeat-three { grid-column: span 3; background: var(--red); }
.repeat-three span, .repeat-three b { color: var(--black); }
.repeat-four { grid-column: span 4; }
.repeat-note { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 17px 14px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.repeat-note span { color: var(--red); }
.relationship { grid-column: 1 / -1; display: grid; grid-template-columns: .35fr 1fr; gap: 30px; margin-top: 15px; padding: 28px 0 0; border-top: 1px solid var(--line); }
.relationship > span { color: var(--red); font: 10px var(--mono); letter-spacing: .14em; }
.relationship p { max-width: 900px; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.relationship b { color: var(--white); font-weight: 500; }

.decode { padding: 130px 0 150px; border-top: 1px solid var(--line); }
.decode-title { display: grid; grid-template-columns: .55fr 1.45fr; align-items: start; }
.decode-title .kicker { padding-top: 12px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: var(--line); border: 1px solid var(--line); }
.principles article { min-height: 320px; padding: 34px; background: var(--black); transition: background .25s ease; }
.principles article:hover { background: var(--panel); }
.principles span { color: var(--red); font: 11px var(--mono); }
.principles h3 { margin: 100px 0 15px; font-size: 1.6rem; font-weight: 500; }
.principles p { max-width: 340px; color: var(--muted); line-height: 1.7; }

.statement { position: relative; overflow: hidden; padding: 130px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement p { margin: 0; font-size: clamp(3rem, 8vw, 8.7rem); font-weight: 600; line-height: .9; letter-spacing: -.07em; }
.statement p:nth-child(2) { color: var(--red); text-align: right; }
.statement p span { color: var(--white); }
.statement-code { margin-top: 60px; color: var(--muted); font: 10px var(--mono); letter-spacing: .25em; text-align: center; }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px 0 50px; color: var(--muted); font: 10px var(--mono); letter-spacing: .13em; }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes activate { 0% { opacity: 0; transform: scaleX(.05); } 100% { opacity: 1; transform: scaleX(1); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 34px 1fr; min-height: auto; }
  .hero-figure { grid-column: 2; width: min(100%, 520px); margin-top: 60px; justify-self: start; }
  .field, .fibonacci { grid-template-columns: 1fr; }
  .repeat-copy, .repeat-readout, .relationship { grid-column: 1; }
  .decode-title { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .principles article { min-height: 240px; }
  .principles h3 { margin-top: 55px; }
}

@media (max-width: 600px) {
  .masthead, main, footer { width: min(100% - 30px, 1440px); }
  .masthead { height: 72px; }
  .masthead p { display: none; }
  .hero { grid-template-columns: 1fr; padding: 70px 0 90px; }
  .hero-index { display: none; }
  .hero-figure { grid-column: 1; }
  h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
  .field, .fibonacci, .decode { padding: 90px 0; }
  .pattern-grid { grid-template-columns: 64px repeat(3, 1fr); }
  .row-label, .token { min-height: 66px; }
  .panel-meta span:first-child { display: none; }
  .panel-meta { justify-content: flex-end; }
  .panel-foot { align-items: flex-start; flex-direction: column-reverse; gap: 12px; padding-block: 15px; }
  .fib-readout { overflow-x: auto; }
  .fib-readout ol { min-width: 620px; }
  .repeat-readout { grid-template-columns: repeat(6, 1fr); overflow-x: auto; }
  .repeat-one, .repeat-two, .repeat-three, .repeat-four { grid-column: span 3; }
  .repeat-note { min-width: 100%; }
  .relationship { grid-template-columns: 1fr; }
  .statement { padding: 90px 0; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}