:root {
  --paper: #e9e6ee;
  --paper-deep: #ddd9e3;
  --ink: #1d2030;
  --muted: #5e6070;
  --moss: #4f654f;
  --moss-dark: #354638;
  --pink: #b9818d;
  --cream: #f1eff3;
  --line: rgba(29, 32, 48, 0.22);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
  --page: min(92vw, 1440px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--moss-dark); }
a:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
p { margin: 0 0 1.25em; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 0.98; margin: 0; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.4rem, 5.1vw, 5.8rem); }

.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 99; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header {
  width: var(--page);
  min-height: 94px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.wordmark { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; letter-spacing: .04em; }
nav { display: flex; gap: clamp(1rem, 2.6vw, 2.5rem); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; }
nav a { text-decoration: none; padding: .55rem 0; position: relative; }
nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--pink); }

.hero { width: var(--page); margin: 0 auto; min-height: 1040px; position: relative; padding: clamp(5rem, 10vw, 10rem) 0 8rem; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; }
.project-marker { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; color: var(--muted); position: absolute; left: 0; top: 8rem; display: flex; align-items: center; gap: 1rem; }
.project-marker span { display: inline-block; width: 2px; height: 38px; background: var(--pink); }
.hero-kicker { grid-column: 7 / 12; margin-bottom: 2rem; color: var(--moss-dark); text-transform: uppercase; letter-spacing: .17em; font-size: .7rem; }
.hero h1 { grid-column: 7 / 13; font-size: clamp(4.2rem, 8.5vw, 9.5rem); max-width: 9ch; align-self: start; }
.hero-intro { grid-column: 8 / 12; margin-top: 3.2rem; max-width: 37rem; font-size: 1.05rem; }
.hero-figure { grid-column: 1 / 9; margin: 7rem 0 0 3vw; position: relative; }
.hero-figure::before { content: ""; position: absolute; width: 30px; height: 30px; background: var(--pink); left: -3vw; top: 15%; }
.hero-figure img { width: 100%; background: var(--paper-deep); filter: saturate(.65) contrast(1.02); }
.hero-figure figcaption { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; margin-top: 1rem; font-size: .76rem; line-height: 1.45; max-width: 42rem; }
.hero-figure figcaption span { text-transform: uppercase; letter-spacing: .12em; color: var(--moss-dark); }
.hero-note { grid-column: 10 / 13; align-self: end; border-top: 1px solid var(--ink); padding-top: 1rem; margin-bottom: 4rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.4; }

.eyebrow { margin: 0 0 1.5rem; color: var(--moss-dark); text-transform: uppercase; letter-spacing: .18em; font-size: .69rem; font-weight: 700; }
.chapter { width: var(--page); margin: 0 auto; padding: clamp(7rem, 13vw, 13rem) 0; display: grid; grid-template-columns: 1.1fr 4fr 4fr; column-gap: 5vw; border-top: 1px solid var(--line); }
.section-number { font-family: var(--serif); font-size: clamp(4rem, 8vw, 9rem); line-height: .8; color: var(--pink); }
.chapter-heading h2 { max-width: 8ch; }
.chapter-copy { max-width: 38rem; padding-top: 5.2rem; }
.chapter-copy p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 5rem; line-height: .76; color: var(--moss); padding: .1rem .45rem 0 0; }
.margin-note { margin: 4rem 0 0 22%; padding: 1.2rem 0 1rem 1.5rem; border-left: 2px solid var(--pink); color: var(--muted); font-size: .85rem; line-height: 1.5; }
.margin-note strong { color: var(--ink); display: block; margin-bottom: .4rem; }

.narrow-text { width: min(88vw, 610px); margin: 3rem auto 10rem; padding: 2.5rem 0 5rem; border-bottom: 1px solid var(--line); }
.narrow-text h2 { font-size: clamp(2.5rem, 5vw, 4.7rem); margin-bottom: 3rem; }
.narrow-text p:not(.eyebrow) { font-family: var(--serif); font-size: 1.18rem; line-height: 1.72; }

.chapter-reflections { width: min(88vw, 1280px); margin-left: auto; margin-right: 4vw; grid-template-columns: 1fr 3fr 5fr; background: var(--paper-deep); padding-left: clamp(2rem, 5vw, 6rem); padding-right: clamp(2rem, 5vw, 6rem); border-top: none; }
.chapter-reflections .chapter-heading h2 { max-width: 7ch; }
.two-column-copy { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }

.depth-section { background: var(--moss-dark); color: var(--cream); padding: clamp(7rem, 12vw, 12rem) max(4vw, calc((100vw - 1440px) / 2)); display: grid; grid-template-columns: 5fr 6fr; gap: clamp(4rem, 10vw, 10rem); align-items: start; }
.depth-section .eyebrow { color: #c9d0c5; }
.depth-copy { padding-top: 4rem; }
.depth-copy h2 { max-width: 9ch; margin-bottom: 3.5rem; }
.depth-copy p:not(.eyebrow) { max-width: 35rem; color: #e2e4df; }
.detail-plate { margin: 0; background: var(--paper); color: var(--ink); padding: clamp(1rem, 2.2vw, 2rem); position: relative; transform: translateY(6rem); }
.detail-plate img { width: 100%; }
.detail-plate figcaption { font-size: .75rem; line-height: 1.45; padding-top: 1rem; max-width: 36rem; }
.plate-mark { position: absolute; right: calc(100% + 1.2rem); top: 0; color: #c9d0c5; font-family: var(--serif); font-size: 1.2rem; writing-mode: vertical-rl; }

.chapter-camera { padding-top: 16rem; grid-template-columns: 1fr 4fr 3.5fr; }
.chapter-camera .chapter-copy { padding-top: 10rem; }
.composition-band { width: var(--page); margin: 0 auto 8rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 3rem 0 5rem; display: grid; grid-template-columns: 1fr 4fr 4fr; gap: 5vw; }
.composition-band .section-number { font-size: 4.5rem; }
.composition-band h2 { max-width: 10ch; }
.composition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding-top: 6rem; }

.final-check { width: min(90vw, 1150px); margin: 0 auto; padding: 5rem 0 11rem; display: grid; grid-template-columns: 4fr 5fr; gap: clamp(4rem, 10vw, 10rem); }
.check-heading { position: sticky; top: 3rem; align-self: start; }
.check-heading h2 { font-size: clamp(3rem, 6vw, 6.5rem); margin-bottom: 2.5rem; }
.check-heading > p:last-child { max-width: 29rem; }
.checklist { list-style: none; margin: 0; padding: 0; counter-reset: checks; }
.checklist li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist span { color: var(--pink); font-family: var(--serif); font-size: 1.3rem; }
.checklist strong { display: block; font-size: .73rem; text-transform: uppercase; letter-spacing: .13em; color: var(--moss-dark); margin-bottom: .25rem; }

.site-footer { background: var(--ink); color: var(--cream); min-height: 570px; padding: 5rem max(4vw, calc((100vw - 1440px) / 2)) 1rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6vw; border-top: 1px solid rgba(255,255,255,.28); padding-top: 1.5rem; }
.footer-top > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-top p { max-width: 26rem; margin: 0; }
.footer-top a { margin-bottom: .45rem; }
.footer-label { color: #abb7a6; text-transform: uppercase; letter-spacing: .16em; font-size: .65rem; margin-bottom: 1rem; }
.footer-name { font-family: var(--serif); font-size: clamp(5rem, 15.5vw, 14rem); line-height: .72; letter-spacing: -.055em; white-space: nowrap; text-align: center; color: #e6e2eb; }

.legal-main { min-height: 100vh; }
.legal-hero { width: var(--page); margin: 0 auto; min-height: 650px; padding: 9rem 0 7rem; position: relative; display: grid; grid-template-columns: repeat(12,1fr); gap: 2vw; }
.legal-hero .project-marker { top: 7rem; }
.legal-hero > .eyebrow { grid-column: 5 / 12; }
.legal-hero h1 { grid-column: 5 / 12; font-size: clamp(4rem, 8.5vw, 9rem); max-width: 9ch; }
.legal-lead { grid-column: 8 / 12; margin-top: 2rem; font-size: 1.08rem; }
.privacy-hero h1, .terms-hero h1 { max-width: 10ch; }
.legal-layout { width: var(--page); margin: 0 auto; padding: 7rem 0 11rem; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 6fr; gap: 8vw; }
.legal-index { display: grid; grid-template-columns: 2rem 1fr; align-content: start; gap: .7rem 1rem; position: sticky; top: 2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.legal-index span:nth-child(odd) { color: var(--pink); font-family: var(--serif); font-size: 1rem; }
.legal-copy { max-width: 800px; margin-left: auto; }
.legal-copy section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; border-top: 1px solid var(--line); padding: 3.5rem 0 5rem; }
.legal-copy section:first-child { border-top: 0; padding-top: 0; }
.legal-copy h2 { font-size: clamp(2.1rem, 3.5vw, 3.8rem); max-width: 8ch; }
.legal-copy address { font-style: normal; padding: 1.5rem 0 0 1.5rem; border-left: 2px solid var(--pink); }
.legal-copy section > p + p, .legal-copy section > p + address { grid-column: 2; }

@media (max-width: 900px) {
  .site-header { align-items: flex-start; padding: 1.4rem 0; }
  nav { flex-wrap: wrap; justify-content: flex-end; max-width: 70%; gap: .35rem 1rem; }
  .hero { min-height: auto; padding-top: 6rem; }
  .project-marker { display: none; }
  .hero-kicker { grid-column: 2 / 12; }
  .hero h1 { grid-column: 2 / 13; }
  .hero-intro { grid-column: 4 / 12; }
  .hero-figure { grid-column: 1 / 11; margin-top: 5rem; }
  .hero-note { grid-column: 9 / 13; }
  .chapter, .composition-band { grid-template-columns: 1fr 4fr; }
  .chapter-copy, .composition-grid { grid-column: 2; padding-top: 3rem; }
  .depth-section { grid-template-columns: 1fr; }
  .detail-plate { width: 80%; margin-left: auto; transform: translateY(2rem); }
  .chapter-camera { padding-top: 10rem; }
  .chapter-camera .chapter-copy { padding-top: 3rem; }
  .final-check { grid-template-columns: 1fr; }
  .check-heading { position: static; }
  .legal-hero > .eyebrow { grid-column: 3 / 12; }
  .legal-hero h1 { grid-column: 3 / 13; }
  .legal-lead { grid-column: 5 / 12; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-index { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  .site-header { min-height: 112px; }
  .wordmark { margin-top: .25rem; }
  nav { font-size: .64rem; max-width: 64%; }
  .hero { display: block; padding: 4rem 0 6rem; }
  .hero h1 { font-size: clamp(3.6rem, 18vw, 5.7rem); max-width: 8ch; margin-left: 12%; }
  .hero-kicker { margin-left: 12%; }
  .hero-intro { margin: 2.5rem 4% 0 22%; }
  .hero-figure { margin: 4rem 8% 0 0; }
  .hero-figure::before { left: auto; right: -9%; top: -1rem; width: 20px; height: 20px; }
  .hero-figure figcaption { display: block; margin-left: 8%; }
  .hero-figure figcaption span { display: block; margin-bottom: .5rem; }
  .hero-note { margin: 3rem 0 0 42%; }
  .chapter, .chapter-reflections, .composition-band { width: 92%; margin-left: auto; margin-right: auto; display: block; padding: 6rem 0; }
  .chapter-reflections { width: 94%; padding-left: 6%; padding-right: 6%; }
  .section-number { font-size: 4rem; margin-bottom: 2.5rem; }
  .chapter-copy { padding-top: 3rem; }
  .margin-note { margin-left: 12%; }
  .two-column-copy, .composition-grid { display: block; }
  .narrow-text { margin-bottom: 6rem; }
  .depth-section { padding-top: 6rem; padding-bottom: 7rem; }
  .depth-copy { padding-top: 0; }
  .detail-plate { width: 95%; transform: translateY(3rem); }
  .chapter-camera { padding-top: 9rem; }
  .composition-grid { padding-top: 3rem; }
  .final-check { padding: 3rem 0 7rem; gap: 2rem; }
  .checklist li { grid-template-columns: 2.3rem 1fr; gap: .8rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .site-footer { min-height: 500px; }
  .footer-name { font-size: 18vw; }
  .legal-hero { display: block; min-height: auto; padding: 5rem 8% 6rem; }
  .legal-hero h1 { font-size: 16vw; }
  .legal-lead { margin: 2.5rem 0 0 14%; }
  .legal-layout { padding: 5rem 0 7rem; }
  .legal-copy section { display: block; padding: 3rem 0 4rem; }
  .legal-copy h2 { margin-bottom: 2rem; }
}

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