@font-face {
  font-family: "Futura Condensed LUCUS";
  src: url("/fonts/futura-condensed-extra-bold.otf") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #090b09;
  --ink-soft: #151815;
  --paper: #efefed;
  --muted: #aeb2aa;
  --acid: #a8ff24;
  --line: rgba(239, 239, 237, .22);
  --display: "Futura Condensed LUCUS", Futura, "Arial Narrow", sans-serif;
  --body: Futura, "Futura PT", "Century Gothic", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
a:active { transform: translateY(1px); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.about-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 16px;
  background: rgba(9, 11, 9, .9);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.about-nav nav, .about-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.about-nav nav a, .about-footer nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.about-nav nav a:hover, .about-footer nav a:hover { color: var(--acid); }
.about-wordmark, .about-footer-wordmark {
  display: block;
  width: 108px;
  aspect-ratio: 403.622 / 136.862;
  flex: none;
  background: var(--paper);
  -webkit-mask: url("/lucus-lettering.svg") center / contain no-repeat;
  mask: url("/lucus-lettering.svg") center / contain no-repeat;
}

.about-page { overflow: hidden; }
.about-page > section { padding: 104px 16px; }
.about-kicker { width: max-content; margin-bottom: 28px; padding-bottom: 7px; border-bottom: 2px solid var(--acid); color: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .11em; }

.about-hero {
  min-height: 100dvh;
  display: grid;
  align-content: end;
  grid-template-columns: 1fr;
  padding-top: 112px !important;
  background: radial-gradient(circle at 82% 18%, rgba(168, 255, 36, .18), transparent 28%), var(--ink);
}
.about-hero h1 { max-width: 9ch; margin-bottom: 40px; font-size: clamp(70px, 19vw, 208px); line-height: .8; letter-spacing: -.045em; }
.about-lead { max-width: 34ch; margin-bottom: 0; color: var(--muted); font-size: clamp(18px, 4vw, 30px); font-weight: 700; line-height: 1.16; }

.about-manifesto { border-top: 1px solid var(--line); display: grid; gap: 52px; }
.about-manifesto h2 { max-width: 12ch; margin: 0; font-size: clamp(54px, 14vw, 154px); line-height: .84; letter-spacing: -.04em; }
.about-manifesto > p { max-width: 34ch; margin: 0; color: var(--muted); font-size: clamp(18px, 3vw, 28px); font-weight: 700; line-height: 1.25; }

.name-section { min-height: 78dvh; display: grid; align-content: center; border-top: 1px solid var(--line); }
.name-section h2 { margin: 0; color: var(--acid); font-size: clamp(112px, 35vw, 460px); line-height: .7; letter-spacing: -.055em; }
.name-section > p:last-child { max-width: 48ch; margin: 56px 0 0 auto; color: var(--muted); font-size: 17px; line-height: 1.55; }

.voice-section { border-top: 1px solid var(--line); display: grid; gap: 72px; }
.voice-section h2, .language-section h2 { margin: 0; font-size: clamp(64px, 17vw, 178px); line-height: .8; letter-spacing: -.045em; }
.voice-principles { display: grid; }
.voice-principles article { padding: 28px 0 34px; border-top: 1px solid var(--line); }
.voice-principles h3 { margin-bottom: 14px; color: var(--acid); font-size: clamp(30px, 7vw, 58px); line-height: .9; }
.voice-principles p { max-width: 42ch; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.larry-section { min-height: 100dvh; border-top: 1px solid var(--line); display: grid; gap: 68px; align-items: center; }
.larry-figure { width: min(76vw, 390px); aspect-ratio: 371.026 / 583.354; margin-inline: auto; background: var(--acid); -webkit-mask: url("/larry.svg") center / contain no-repeat; mask: url("/larry.svg") center / contain no-repeat; }
.larry-copy h2 { margin: 0 0 40px; font-size: clamp(68px, 18vw, 190px); line-height: .8; letter-spacing: -.045em; }
.larry-copy > p:not(.about-kicker) { max-width: 48ch; margin-bottom: 20px; color: var(--muted); font-size: 16px; line-height: 1.55; }

.territory-section { min-height: 90dvh; border-top: 1px solid var(--line); display: grid; align-content: center; }
.territory-section h2 { max-width: 10ch; margin-bottom: 48px; color: var(--acid); font-size: clamp(74px, 20vw, 210px); line-height: .78; letter-spacing: -.05em; }
.territory-section > p:last-child { max-width: 52ch; margin: 0 0 0 auto; color: var(--muted); font-size: 17px; line-height: 1.55; }

.language-section { border-top: 1px solid var(--line); }
.language-section > header { margin-bottom: 74px; }
.language-grid { display: grid; grid-template-columns: 1fr; }
.language-grid article { padding: 26px 0 32px; border-top: 1px solid var(--line); }
.language-grid h3 { margin-bottom: 12px; color: var(--acid); font-size: clamp(27px, 6vw, 48px); line-height: .9; }
.language-grid p { max-width: 38ch; margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.language-signatures { margin-top: 84px; display: grid; gap: 10px; }
.language-signatures span { font-family: var(--display); font-size: clamp(34px, 8vw, 84px); font-weight: 900; line-height: .9; letter-spacing: -.025em; }
.language-signatures span:nth-child(2n) { color: var(--acid); }

.about-footer { display: grid; gap: 28px; align-items: center; padding: 42px 16px 54px; border-top: 1px solid var(--line); }
.about-footer > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.about-footer-wordmark { width: 118px; background: var(--acid); }

@media (min-width: 768px) {
  .about-nav { padding-inline: 32px; }
  .about-page > section { padding: 144px 32px; }
  .about-hero { grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); column-gap: 6vw; }
  .about-hero .about-kicker, .about-hero h1 { grid-column: 1 / -1; }
  .about-hero .about-lead { grid-column: 2; justify-self: end; }
  .about-manifesto { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: end; gap: 7vw; }
  .voice-section { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 8vw; }
  .voice-section > header { position: sticky; top: 112px; align-self: start; }
  .larry-section { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 8vw; }
  .language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 7vw; }
  .about-footer { grid-template-columns: auto 1fr auto; padding: 36px 32px 50px; }
  .about-footer nav { justify-content: center; }
}

@media (min-width: 1440px) {
  .about-nav, .about-footer { padding-inline: max(64px, calc(50vw - 800px)); }
  .about-page > section { padding-left: max(64px, calc(50vw - 800px)); padding-right: max(64px, calc(50vw - 800px)); }
}

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

@media (prefers-reduced-transparency: reduce) {
  .about-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ink); }
}