:root {
  --paper: #f1ede3;
  --ink: #151515;
  --accent: #d54a31;
  --line: rgba(21, 21, 21, 0.23);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --cell: clamp(2.4rem, 5.65vw, 5.95rem);
}

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

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 20; padding: .65rem .9rem; background: var(--ink); color: var(--paper); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; padding: 1.5rem var(--pad); border-bottom: 1px solid var(--line); }
.monogram, .footer-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -.055em; text-decoration: none; }
.header-meta { display: flex; gap: clamp(1rem, 3vw, 3rem); font-size: .68rem; line-height: 1.2; letter-spacing: .13em; text-transform: uppercase; }

.hero { position: relative; min-height: 100svh; overflow: hidden; padding: clamp(7rem, 12vh, 9rem) var(--pad) 2.25rem; border-bottom: 1px solid var(--ink); background: radial-gradient(circle at 68% 70%, rgba(213,74,49,.12), transparent 34%), var(--paper); }
.hero::after { content: ""; position: absolute; inset: auto -8% -25% 45%; height: 70%; background: radial-gradient(circle, rgba(213,74,49,.16), transparent 66%); pointer-events: none; }
.eyebrow, .section-number { position: relative; z-index: 2; margin: 0 0 clamp(1.75rem, 4vh, 3rem); font-size: .67rem; letter-spacing: .17em; text-transform: uppercase; }

.crossword { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(10, var(--cell)); grid-template-rows: repeat(5, var(--cell)); width: calc(var(--cell) * 10); max-width: 100%; margin-top: clamp(1rem, 2vh, 2rem); }
.crossword::before { content: ""; position: absolute; z-index: -1; top: calc(var(--cell) * .15); left: calc(var(--cell) * 6.45); width: calc(var(--cell) * 2.9); height: calc(var(--cell) * 4.45); border: 2px solid rgba(213,74,49,.2); border-radius: 50%; transform: rotate(-13deg); }
.crossword .the { position: absolute; top: -.3rem; left: .12rem; transform: translateY(-100%) rotate(-7deg) skewX(-5deg); color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 1.35vw, 1.35rem); font-style: italic; font-weight: 700; letter-spacing: .05em; }
.letter { display: grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--cell) * 1.24); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.12em; transform: skewX(-5deg); text-shadow: .045em .045em 0 rgba(213,74,49,.08); }
.p1 { grid-area: 1 / 1; } .a1 { grid-area: 1 / 2; } .r1 { grid-area: 1 / 3; } .a2 { grid-area: 1 / 4; }
.l1 { grid-area: 1 / 5; } .l2 { grid-area: 1 / 6; } .e1 { grid-area: 1 / 7; } .shared-l { grid-area: 1 / 8; }
.i1 { grid-area: 2 / 8; } .v1 { grid-area: 3 / 8; } .shared-e { grid-area: 4 / 8; } .s1 { grid-area: 5 / 8; }
.p2 { grid-area: 4 / 4; } .r2 { grid-area: 4 / 5; } .o1 { grid-area: 4 / 6; } .j1 { grid-area: 4 / 7; } .c1 { grid-area: 4 / 9; } .t1 { grid-area: 4 / 10; }

.progress-arrow { position: relative; z-index: -1; align-self: end; height: 4px; margin: 0 .15rem .2rem 0; background: var(--accent); box-shadow: 0 7px 0 rgba(213,74,49,.24); transform: rotate(-1.25deg) skewX(-10deg); transform-origin: left center; animation: draw-arrow 1.1s cubic-bezier(.2,.75,.25,1) both; }
.progress-arrow::before { content: ""; position: absolute; left: 0; top: -5px; width: 22%; height: 2px; background: rgba(213,74,49,.5); transform: rotate(-2deg); }
.progress-arrow::after { content: ""; position: absolute; right: -1px; bottom: -8px; width: 16px; height: 16px; border-top: 4px solid var(--accent); border-right: 4px solid var(--accent); transform: rotate(45deg); transform-origin: center; }
.parallel-arrow { grid-area: 1 / 1 / 2 / 9; }
.project-arrow { grid-area: 4 / 4 / 5 / 11; animation-delay: .16s; }
@keyframes draw-arrow { from { opacity: 0; transform: rotate(-1.25deg) skewX(-10deg) scaleX(.08); } to { opacity: 1; transform: rotate(-1.25deg) skewX(-10deg) scaleX(1); } }

.standfirst { position: absolute; z-index: 3; right: clamp(1.5rem, 7vw, 7rem); bottom: clamp(3rem, 8vh, 6rem); max-width: 31rem; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.1; letter-spacing: -.025em; }
.hero-note { position: absolute; right: var(--pad); top: 34%; z-index: 3; margin: 0; writing-mode: vertical-rl; font-size: .61rem; letter-spacing: .14em; text-transform: uppercase; }

.manifesto { padding: clamp(5rem, 11vw, 10rem) var(--pad); }
.manifesto-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.manifesto h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 5.7vw, 6.5rem); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.body-copy { max-width: 34rem; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.55; }
.body-copy p:first-child { margin-top: 0; } .body-copy p:last-child { margin-bottom: 0; }

.coming { position: relative; min-height: min(82rem, 92svh); overflow: hidden; background: var(--paper); color: var(--ink); border-bottom: 0; }
.coming::before { content: ""; position: absolute; inset: auto -8% -25% 45%; height: 78%; background: radial-gradient(circle, rgba(213,74,49,.14), transparent 67%); }
.effort-lines { position: absolute; top: -12%; right: 10%; bottom: -12%; display: flex; gap: clamp(.7rem, 1.2vw, 1.4rem); opacity: .2; transform: rotate(12deg) scale(1.18); }
.effort-lines span { width: clamp(.42rem, .75vw, .82rem); background: var(--accent); }
.effort-lines span:nth-child(2), .effort-lines span:nth-child(4) { transform: translateY(8vh); }
.coming-copy { position: relative; z-index: 2; display: flex; min-height: min(82rem, 92svh); flex-direction: column; justify-content: space-between; align-items: flex-start; padding: clamp(4rem, 8vw, 8rem) var(--pad); }
.section-number.light { color: rgba(21,21,21,.58); }
.coming h2 { margin: auto 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(5rem, 14vw, 14rem); font-weight: 400; line-height: .72; letter-spacing: -.075em; }
.coming h2 em { margin-left: .55em; color: var(--ink); font-weight: 400; }

footer { display: grid; grid-template-columns: 1.3fr 2fr .7fr; gap: 2rem; align-items: end; padding: 2.5rem var(--pad); font-size: .72rem; }
footer p { margin: 0; } .copyright { text-align: right; }

@media (max-width: 800px) {
  :root { --cell: 9.15vw; }
  .header-meta span:first-child, .hero-note { display: none; }
  .hero { min-height: 84svh; padding-top: 8rem; }
  .crossword { margin-top: clamp(2rem, 8vh, 5rem); }
  .letter { font-size: calc(var(--cell) * .78); }
  .standfirst { right: var(--pad); bottom: 3rem; left: var(--pad); max-width: 22rem; }
  .manifesto-copy { grid-template-columns: 1fr; }
  .coming, .coming-copy { min-height: 78svh; }
  .effort-lines { right: 4%; }
  .coming h2 { font-size: clamp(4.8rem, 24vw, 8rem); line-height: .78; }
  .coming-copy > p:last-child { margin-left: 0; }
  footer { grid-template-columns: 1fr; }
  .copyright { text-align: left; }
}

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