:root {
  --ink: #0a0a0a;
  --paper: #f0ede6;
  --paper-2: #e8e3da;
  --white: #f8f6f1;
  --muted: #7b766d;
  --line: rgba(10,10,10,.18);
  --max: 1440px;
  --pad: clamp(24px, 5vw, 78px);
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
::selection { background: #111; color: #fff; }

.nav {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  height: 66px;
  background: rgba(10,10,10,.9);
  backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.12);
}
.nav-mark {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 800;
}
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 40px); }
.nav-links a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .19em;
  font-weight: 700;
  opacity: .92;
}
.nav-links a:hover { opacity: .6; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #111;
  color: #fff;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.015);
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.03) 35%, rgba(0,0,0,.02) 60%, rgba(0,0,0,.68) 100%),
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 55%);
}
.hero-location {
  position: absolute;
  top: 112px;
  left: var(--pad);
  font-size: 10px;
  letter-spacing: .28em;
  font-weight: 700;
}
.hero-title {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -47%);
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(74px, 12vw, 205px);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-shadow: 0 3px 28px rgba(0,0,0,.12);
}
.hero-title span { display: block; }
.hero-title span:last-child { margin-top: .09em; }
.hero-scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .25em;
}
.hero-scroll .arrow { font-size: 22px; line-height: 1; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.section-pad { padding: clamp(90px, 11vw, 170px) var(--pad); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}
.eyebrow.light { color: rgba(255,255,255,.65); }

.statement {
  max-width: var(--max);
  margin: 0 auto;
}
.statement-lead {
  margin: 34px 0 80px;
  max-width: 1150px;
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 126px);
  line-height: .9;
  letter-spacing: -.045em;
}
.statement-grid {
  margin-left: auto;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.6;
}
.statement-grid p { margin: 0; }

.origin { background: var(--paper-2); }
.origin-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: start;
}
.origin-photo-wrap { position: relative; }
.origin-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.02); }
.photo-label { margin-top: 12px; font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.chapter-number { font-size: 10px; font-weight: 800; letter-spacing: .28em; margin-bottom: 22px; }
.origin-copy h2,
.chapter-head h2,
.dark-copy h2,
.identity h2,
.score-copy h2,
.beyond h2,
.elsewhere h2 {
  margin: 0 0 48px;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .95;
  font-size: clamp(52px, 6vw, 92px);
}
.origin-copy p,
.prose p,
.dark-copy p {
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.62;
  margin: 0 0 1.45em;
}
.serif-emphasis {
  font-family: var(--serif);
  font-size: clamp(31px, 3.1vw, 51px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em;
  margin: 1.2em 0 !important;
}

.quote-band {
  background: var(--ink);
  color: var(--white);
  padding: clamp(95px, 13vw, 200px) var(--pad);
}
.quote-band-inner { max-width: 1180px; margin: 0 auto; position: relative; }
.quote-mark { display: block; font-family: var(--serif); font-size: 110px; line-height: .5; opacity: .28; }
.quote-band p {
  margin: 25px 0 0;
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 110px);
  line-height: .96;
  letter-spacing: -.045em;
}

.attempts { max-width: var(--max); margin: 0 auto; }
.chapter-head { margin-bottom: 80px; }
.attempts-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(60px, 10vw, 160px); align-items: start; }
.attempts-copy { max-width: 680px; }
.attempts-side { border-top: 1px solid var(--ink); padding-top: 18px; min-height: 520px; display: flex; flex-direction: column; }
.side-note { font-size: 9px; font-weight: 800; letter-spacing: .24em; line-height: 1.5; }
.side-note.bottom { margin-top: auto; }
.side-big {
  margin-top: 48px;
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 86px);
  line-height: .83;
  letter-spacing: -.04em;
}

.dark-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  color: var(--white);
  min-height: 900px;
}
.dark-photo { min-height: 780px; overflow: hidden; }
.dark-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; filter: grayscale(.18) contrast(1.04) brightness(.83); }
.dark-copy { padding: clamp(80px, 9vw, 150px) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.dark-copy a { color: #fff; }
.dark-copy h2 { color: #fff; }
.dark-copy .chapter-number { color: rgba(255,255,255,.55); }

.identity { max-width: var(--max); margin: 0 auto; }
.identity-top { display: flex; align-items: flex-start; gap: clamp(30px, 7vw, 110px); margin-bottom: 70px; }
.identity-top .chapter-number { margin-top: 8px; }
.identity-top h2 { margin-top: 18px; margin-bottom: 0; font-size: clamp(62px, 9vw, 132px); }
.identity-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(55px, 9vw, 135px); align-items: start; }
.identity-copy { max-width: 650px; }
.identity-collage { min-height: 820px; position: relative; }
.identity-collage img { position: absolute; object-fit: cover; box-shadow: 0 18px 50px rgba(0,0,0,.08); }
.collage-a { width: 68%; height: 62%; top: 0; right: 0; object-position: 50% 35%; }
.collage-b { width: 54%; height: 48%; left: 0; bottom: 0; object-position: center; }
.collage-word {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: 8%;
  font-family: var(--serif);
  font-size: clamp(45px, 5.5vw, 82px);
  line-height: .77;
  letter-spacing: -.035em;
  color: var(--white);
  mix-blend-mode: difference;
}

.score-story {
  background: #d9d4ca;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(55px, 9vw, 150px);
  padding: clamp(100px, 12vw, 190px) var(--pad);
}
.score-sticky { align-self: start; position: sticky; top: 120px; }
.score-label { font-size: 9px; font-weight: 800; letter-spacing: .23em; margin-bottom: 20px; }
.score-display {
  font-family: var(--serif);
  font-size: clamp(150px, 22vw, 360px);
  letter-spacing: -.08em;
  line-height: .72;
}
.score-display span { font-size: .25em; letter-spacing: -.03em; vertical-align: .16em; }
.score-copy { max-width: 700px; }
.score-copy h2 { margin-bottom: 55px; }

.beyond { max-width: var(--max); margin: 0 auto; }
.beyond-title { max-width: 940px; margin-bottom: 80px; }
.beyond-title h2 { margin-top: 25px; }
.beyond-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(55px, 9vw, 145px); align-items: center; }
.beyond-image-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.beyond-copy { max-width: 670px; }

.closing {
  position: relative;
  min-height: 100svh;
  background: #060606;
  color: #fff;
  overflow: hidden;
}
.closing-bg {
  position: absolute;
  inset: 0;
  opacity: .2;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.13), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(255,255,255,.08), transparent 28%);
}
.closing-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: clamp(110px, 12vw, 185px) var(--pad) 75px; }
.closing-columns { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(50px, 9vw, 140px); margin-top: 70px; }
.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(62px, 8vw, 126px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.045em;
}
.light-prose p { color: rgba(255,255,255,.78); }
.final-words {
  margin-top: clamp(110px, 15vw, 230px);
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
}
.final-words strong { font-weight: 400; color: #fff; }

.elsewhere { max-width: var(--max); margin: 0 auto; }
.elsewhere-head { display: grid; grid-template-columns: .35fr 1fr; gap: 40px; align-items: end; margin-bottom: 85px; }
.elsewhere-head h2 { margin: 0; }
.social-list { border-top: 1px solid var(--ink); }
.social-list a {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left .22s ease, opacity .22s ease;
}
.social-list a:hover { padding-left: 10px; opacity: .58; }
.social-list span { font-family: var(--serif); font-size: clamp(30px, 3vw, 46px); }
.social-list em { font-style: normal; font-size: 12px; letter-spacing: .05em; color: var(--muted); }
.social-list b { font-size: 22px; font-weight: 400; }

.footer {
  background: var(--ink);
  color: #fff;
  padding: 75px var(--pad) 35px;
}
.footer-name {
  font-family: var(--serif);
  font-size: clamp(68px, 12.8vw, 210px);
  line-height: .74;
  letter-spacing: -.06em;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 75px;
}
.footer-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.footer-meta a { color: #fff; text-decoration: none; }

@media (max-width: 900px) {
  .nav { height: 68px; }
  .nav-links { gap: 17px; }
  .nav-links a:nth-child(2), .nav-links a:nth-child(3) { display: none; }
  .hero-location { top: 92px; }
  .hero-title { font-size: clamp(69px, 19vw, 145px); line-height: .76; }
  .hero-photo { object-position: 51% center; }
  .statement-lead { margin-bottom: 55px; }
  .statement-grid,
  .origin-grid,
  .attempts-layout,
  .dark-story,
  .identity-grid,
  .score-story,
  .beyond-grid,
  .closing-columns,
  .elsewhere-head { grid-template-columns: 1fr; }
  .origin-grid { gap: 55px; }
  .origin-photo-wrap { max-width: 620px; }
  .attempts-side { min-height: 360px; }
  .dark-photo { min-height: 620px; }
  .dark-copy { padding-top: 85px; padding-bottom: 100px; }
  .identity-top { display: block; }
  .identity-top .chapter-number { margin-bottom: 35px; }
  .identity-collage { min-height: 680px; margin-top: 20px; }
  .score-sticky { position: static; }
  .score-display { font-size: clamp(150px, 46vw, 320px); }
  .closing-columns { margin-top: 45px; }
  .elsewhere-head { gap: 25px; }
  .social-list a { grid-template-columns: 1fr auto; }
  .social-list em { display: none; }
  .footer-name { white-space: normal; line-height: .82; }
}

@media (max-width: 560px) {
  :root { --pad: 20px; }
  .section-pad { padding-top: 82px; padding-bottom: 82px; }
  .nav-mark { font-size: 11px; }
  .nav-links a { font-size: 8.5px; }
  .hero-location { font-size: 8px; }
  .hero-scroll { font-size: 8px; }
  .hero-title { font-size: 22vw; }
  .statement-lead { font-size: 14.4vw; }
  .statement-grid { font-size: 17px; }
  .origin-copy h2,
  .chapter-head h2,
  .dark-copy h2,
  .identity h2,
  .score-copy h2,
  .beyond h2,
  .elsewhere h2 { font-size: 15vw; }
  .serif-emphasis { font-size: 9.3vw !important; }
  .quote-band p { font-size: 12.6vw; }
  .identity-top h2 { font-size: 17vw; }
  .identity-collage { min-height: 500px; }
  .collage-a { width: 71%; height: 60%; }
  .collage-b { width: 58%; height: 46%; }
  .collage-word { font-size: 11vw; }
  .score-story { padding-top: 90px; padding-bottom: 95px; }
  .score-display { font-size: 49vw; }
  .closing { min-height: auto; }
  .closing-inner { padding-top: 90px; }
  .closing h2 { font-size: 15vw; }
  .final-words { font-size: 12.5vw; margin-top: 105px; }
  .social-list span { font-size: 30px; }
  .footer { padding-top: 55px; }
  .footer-name { font-size: 19vw; text-align: left; margin-bottom: 55px; }
  .footer-meta { align-items: flex-start; gap: 15px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-scroll .arrow { animation: none; }
}