@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.ttf") format("truetype");
  font-display: swap;
}

:root {
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --paper: #f1ede4;
  --ink: #161311;
  --muted: #69615b;
  --line: rgba(22, 19, 17, .18);
  --accent: #9c713a;
  --surface: #e7e0d5;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 999;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.progress {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
}

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid currentColor;
  color: var(--header-color, currentColor);
}

.brand {
  width: max-content;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 2rem;
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-nav a, .header-cta { position: relative; }
.site-nav a::after, .header-cta::after {
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--ease);
}

.site-nav a:hover::after, .site-nav a:focus-visible::after,
.header-cta:hover::after, .header-cta:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  justify-self: end;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.menu-toggle span {
  display: block;
  width: 1rem;
  height: 1px;
  margin: .25rem auto;
  background: currentColor;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--hero-color, #fff);
}

.hero__media, .hero__shade { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { background: var(--hero-shade, linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.08))); }

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  padding: clamp(8rem, 14vh, 11rem) var(--gutter) clamp(2rem, 4vw, 4rem);
}

.hero__main { align-self: center; max-width: 72rem; }

.eyebrow {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1.4rem;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow::before { width: 2.5rem; height: 1px; background: currentColor; content: ""; }

.hero h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5.1rem, 12vw, 12rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .75;
}

.hero h1 em { color: var(--hero-accent, inherit); font-weight: 400; }

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem) auto;
  align-items: end;
  gap: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
}

.hero__bottom p { margin: 0; font-size: .83rem; line-height: 1.65; }

.hero__index {
  align-self: end;
  font-size: .59rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.round-link {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background 300ms ease, color 300ms ease, transform 500ms var(--ease);
}

.round-link:hover, .round-link:focus-visible { background: currentColor; color: var(--ink); transform: rotate(45deg); }

.section { padding: clamp(5rem, 10vw, 11rem) var(--gutter); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--surface { background: var(--surface); }

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 7vw, 7rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid currentColor;
}

.section-head span {
  font-size: .59rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .82;
}

.manifesto {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: clamp(3rem, 9vw, 10rem);
}

.manifesto__label { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.manifesto__body { max-width: 60rem; }
.manifesto h2 { margin: 0; font-family: var(--serif); font-size: clamp(3.6rem, 7vw, 8rem); font-weight: 400; letter-spacing: -.05em; line-height: .88; }
.manifesto h2 em { color: var(--accent); font-weight: 400; }
.manifesto p { max-width: 37rem; margin: 2.5rem 0 0 auto; color: var(--muted); font-size: .95rem; line-height: 1.8; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
  min-height: 48rem;
}

.split--reverse { grid-template-columns: minmax(22rem, .88fr) minmax(0, 1.12fr); }
.split__media { position: relative; min-height: 42rem; overflow: hidden; }
.split__media img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; }
.split__content { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(3rem, 7vw, 8rem); background: var(--surface); }
.split__content small { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.split__content h2 { max-width: 8ch; margin: 2rem 0; font-family: var(--serif); font-size: clamp(3.8rem, 6vw, 7rem); font-weight: 400; letter-spacing: -.05em; line-height: .82; }
.split__content p { max-width: 29rem; color: var(--muted); font-size: .9rem; line-height: 1.75; }

.text-link {
  display: inline-flex;
  gap: .8rem;
  align-items: center;
  width: max-content;
  margin-top: 2rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.text-link span { transition: transform 300ms var(--ease); }
.text-link:hover span, .text-link:focus-visible span { transform: translate(.25rem, -.25rem); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid currentColor; }
.feature { min-height: 20rem; padding: 2rem; border-right: 1px solid currentColor; }
.feature:last-child { border-right: 0; }
.feature__number { font-size: .58rem; letter-spacing: .12em; }
.feature h3 { margin: 6rem 0 1rem; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 4.5rem); font-weight: 400; }
.feature p { max-width: 24rem; color: var(--muted); font-size: .83rem; line-height: 1.7; }

.ticker { overflow: hidden; padding: 1.4rem 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.ticker__track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker span { padding-right: 2rem; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.5rem); }
.ticker i { color: var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }

.quote-stage {
  display: grid;
  place-items: center;
  min-height: 80svh;
  padding: clamp(5rem, 10vw, 10rem) var(--gutter);
  text-align: center;
}

.quote-stage blockquote { max-width: 14ch; margin: 0; font-family: var(--serif); font-size: clamp(4rem, 9vw, 10rem); line-height: .8; letter-spacing: -.05em; }
.quote-stage blockquote em { color: var(--accent); font-weight: 400; }

.cta-stage {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  padding: clamp(6rem, 12vw, 13rem) var(--gutter) 3rem;
  background: var(--ink);
  color: var(--paper);
}

.cta-stage small { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.cta-stage h2 { max-width: 10ch; margin: 2rem 0 0; font-family: var(--serif); font-size: clamp(4.5rem, 10vw, 11rem); font-weight: 400; letter-spacing: -.055em; line-height: .78; }
.cta-stage .round-link { width: 7rem; height: 7rem; }

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem var(--gutter);
  border-top: 1px solid currentColor;
  background: var(--ink);
  color: var(--paper);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer > :last-child { justify-self: end; }

[data-reveal] { opacity: 0; transform: translateY(2rem); transition: opacity 800ms ease, transform 900ms var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .menu-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    align-content: center;
    gap: 1.5rem;
    padding: var(--gutter);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--serif);
    font-size: clamp(3rem, 13vw, 6rem);
    font-weight: 400;
    letter-spacing: -.03em;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
  }
  .menu-open .site-nav { z-index: 40; opacity: 1; pointer-events: auto; }
  .menu-toggle { position: relative; z-index: 60; }
  .header-cta { display: none; }
  .hero__bottom { grid-template-columns: 1fr auto; }
  .hero__index { display: none; }
  .manifesto { grid-template-columns: 1fr; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { min-height: auto; border-right: 0; border-bottom: 1px solid currentColor; }
  .feature h3 { margin-top: 3rem; }
}

@media (max-width: 600px) {
  .site-header { padding-top: 1rem; padding-bottom: 1rem; }
  .hero__content { padding-top: 7rem; }
  .hero h1 { font-size: clamp(4.7rem, 25vw, 7.5rem); }
  .hero__bottom { grid-template-columns: 1fr; }
  .round-link { width: 3.4rem; height: 3.4rem; }
  .section-head { grid-template-columns: auto 1fr; }
  .section-head span:last-child { display: none; }
  .split__media { min-height: 34rem; }
  .split__content { min-height: 34rem; padding: 2rem 1.25rem; }
  .cta-stage { grid-template-columns: 1fr; }
  .cta-stage .round-link { width: 5rem; height: 5rem; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .split__media img { transform: none !important; }
}