:root {
  --ink: #171713;
  --paper: #e9e7df;
  --chalk: #f4f2ea;
  --muted: #858277;
  --line: rgba(23, 23, 19, .2);
  --amber: #cf7b3f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.nav {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 76px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--chalk);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.brand { display: flex; align-items: center; gap: 16px; font-weight: 700; }
.brand-index { display: grid; place-items: center; width: 40px; height: 26px; border: 1px solid currentColor; font-size: 9px; }
.nav nav { display: flex; gap: 34px; }
.nav nav a, .back-link { opacity: .7; transition: opacity .2s ease; }
.nav nav a:hover, .back-link:hover { opacity: 1; }

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--chalk);
}
.hero-media {
  position: absolute;
  inset: -3%;
  background: url("/assets/object-28465187-hero.png") center / cover no-repeat;
  animation: settle 1.8s cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 11, 11, .62), transparent 58%),
    linear-gradient(0deg, rgba(9, 10, 9, .72), transparent 52%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 4vw 6vh;
  animation: enter .9s .15s cubic-bezier(.16, 1, .3, 1) both;
}
.eyebrow, .section-label {
  margin: 0 0 28px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow { color: rgba(255, 255, 255, .72); }
h1, h2, p { margin-top: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.065em; line-height: .86; }
.hero h1 { margin: 0; font-size: clamp(72px, 12.8vw, 210px); }
.hero-bottom {
  width: 100%;
  margin-top: 4vh;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.hero-bottom p { max-width: 410px; margin: 0; font-size: 17px; line-height: 1.45; }
.text-link { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.text-link span { display: inline-block; margin-left: 20px; transition: transform .25s ease; }
.text-link:hover span { transform: translate(4px, 4px); }
.coordinates { position: absolute; z-index: 2; top: 110px; right: 4vw; margin: 0; text-align: right; font: 10px/1.7 monospace; letter-spacing: .1em; opacity: .62; }

.manifesto { padding: 150px 7vw 170px; }
.section-label { color: var(--muted); }
.manifesto h2, .material h2, .timeline h2 { margin: 0; font-size: clamp(58px, 8vw, 128px); }
.manifesto-copy {
  display: grid;
  grid-template-columns: 1.25fr .55fr;
  gap: 12vw;
  margin-top: 110px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.manifesto-copy p { margin-bottom: 0; }
.large-copy { font-size: clamp(24px, 3vw, 46px); line-height: 1.2; letter-spacing: -.035em; }
.manifesto-copy p:last-child { color: #656258; line-height: 1.7; }

.material {
  min-height: 90svh;
  padding: 130px 7vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10vw;
  background: #1a1a17;
  color: var(--chalk);
}
.material .section-label { color: #88877e; }
.material-list { margin: 30px 0 0; }
.material-list div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.17);
}
.material-list dt { color: #74736c; font: 11px monospace; }
.material-list dd { margin: 0; }
.material-list strong { display: block; margin-bottom: 12px; font-size: 24px; font-weight: 400; }
.material-list span { color: #99978f; line-height: 1.55; }

.timeline { padding: 150px 7vw 170px; }
.timeline-heading { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5vw; align-items: start; }
.timeline ol { list-style: none; margin: 120px 0 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li {
  display: grid;
  grid-template-columns: .4fr 1fr .6fr;
  padding: 25px 0;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.timeline li span { color: var(--muted); font: 12px monospace; }
.timeline li strong { font-size: 21px; font-weight: 400; }
.timeline li em { justify-self: end; color: var(--muted); font-size: 12px; font-style: normal; text-transform: uppercase; letter-spacing: .12em; }
.timeline li.active em { color: var(--amber); }

.opening {
  min-height: 84svh;
  padding: 12vh 7vw;
  display: grid;
  place-items: center;
  color: var(--chalk);
  background: #8c5d3b;
}
.opening-inner { width: 100%; }
.opening .section-label { color: rgba(255,255,255,.62); }
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 55px 0 45px;
  border-top: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.countdown span { min-width: 15%; }
.countdown b { display: block; font-size: clamp(50px, 9vw, 142px); font-weight: 400; letter-spacing: -.075em; line-height: .9; }
.countdown small { display: block; margin-top: 18px; opacity: .62; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.countdown i { margin-top: 1vw; opacity: .35; font-size: clamp(35px, 5vw, 70px); font-style: normal; }
.opening-note { max-width: 430px; margin: 34px 0 0 auto; color: rgba(255,255,255,.68); line-height: 1.6; }

footer {
  min-height: 120px;
  padding: 35px 4vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: #171713;
  color: #88877e;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
footer a { color: var(--chalk); }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.reveal.visible { opacity: 1; transform: none; }

.archive-page { min-height: 100svh; background: #1a1a17; color: var(--chalk); }
.nav-static { position: relative; }
.archive { min-height: calc(100svh - 76px); padding: 13vh 7vw 8vh; }
.archive h1 { max-width: 1200px; margin: 0; font-size: clamp(58px, 8vw, 130px); }
.archive > p:not(.section-label) { max-width: 560px; margin: 55px 0 80px; color: #9a988f; font-size: 18px; line-height: 1.7; }
.archive-meta { max-width: 760px; display: grid; grid-template-columns: .7fr 1fr .8fr; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.archive-meta span, .archive-meta em { color: #77766f; font-style: normal; }
.archive-meta em { text-align: right; }

@keyframes enter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (max-width: 760px) {
  .nav { height: 66px; padding: 0 20px; }
  .nav nav { display: none; }
  .hero-content { padding: 0 20px 5vh; }
  .hero h1 { font-size: clamp(66px, 22vw, 106px); line-height: .9; }
  .hero-bottom { align-items: flex-start; gap: 35px; flex-direction: column; }
  .coordinates { top: 92px; right: 20px; }
  .manifesto, .material, .timeline { padding: 90px 22px; }
  .manifesto-copy, .material, .timeline-heading { grid-template-columns: 1fr; }
  .manifesto-copy { gap: 40px; margin-top: 65px; }
  .material { gap: 60px; }
  .timeline ol { margin-top: 70px; }
  .timeline li { grid-template-columns: 55px 1fr; }
  .timeline li em { grid-column: 2; justify-self: start; margin-top: 8px; }
  .opening { padding: 90px 22px; }
  .countdown { gap: 5px; }
  .countdown b { font-size: clamp(42px, 14vw, 65px); }
  .countdown small { font-size: 8px; }
  .countdown i { display: none; }
  footer { align-items: flex-start; gap: 24px; flex-direction: column; }
  .back-link { display: none; }
  .archive { padding: 10vh 22px; }
  .archive-meta { grid-template-columns: 1fr; gap: 12px; }
  .archive-meta em { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}