:root {
  --espresso: #211814;
  --roast: #4a2e24;
  --cream: #f5eee2;
  --paper: #eee3d4;
  --teal: #2f756d;
  --teal-dark: #1f514c;
  --berry: #8d3651;
  --copper: #b87648;
  --line: rgba(33, 24, 20, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--espresso); font-family: "Manrope", sans-serif; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }

.site-header { position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px; color: var(--cream); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: .7rem; font-weight: 700; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 400; }
.header-link { padding: 11px 16px; border: 1px solid rgba(245, 238, 226, .55); border-radius: 100px; color: var(--cream); text-decoration: none; font-size: .78rem; font-weight: 600; backdrop-filter: blur(10px); transition: background .25s ease, color .25s ease; }
.header-link:hover { background: var(--cream); color: var(--espresso); }

.hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; background: var(--espresso); color: var(--cream); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { z-index: -2; object-fit: cover; object-position: 53% center; animation: breathe 12s ease-out both; }
.hero-shade { z-index: -1; background: linear-gradient(180deg, rgba(25, 15, 10, .22) 0%, rgba(25, 15, 10, .1) 38%, rgba(25, 15, 10, .92) 100%), linear-gradient(90deg, rgba(25, 15, 10, .48), transparent 84%); }
.hero-content { width: 100%; padding: 130px 20px 40px; }
.eyebrow, .section-label { font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: rgba(245, 238, 226, .78); }
.eyebrow span { width: 20px; height: 1px; background: var(--copper); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 25px; max-width: 950px; font-family: "Fraunces", serif; font-size: clamp(4rem, 19vw, 10rem); font-weight: 300; line-height: .78; letter-spacing: -.065em; }
h1 em { color: var(--paper); font-style: italic; font-weight: 300; }
.hero-content > p { max-width: 370px; margin-bottom: 30px; color: rgba(245, 238, 226, .78); font-size: 1rem; line-height: 1.65; }
.primary-cta, .map-cta { display: inline-flex; align-items: center; justify-content: space-between; text-decoration: none; font-size: .82rem; font-weight: 700; }
.primary-cta { min-width: 208px; padding: 15px 18px; border: 1px solid rgba(245, 238, 226, .65); border-radius: 100px; background: rgba(245, 238, 226, .08); color: var(--cream); backdrop-filter: blur(12px); transition: background .25s ease, color .25s ease; }
.primary-cta:hover { background: var(--cream); color: var(--espresso); }
.vertical-note { display: none; }

.manifesto { position: relative; padding: 90px 20px 110px; border-bottom: 1px solid var(--line); background: var(--cream); }
.section-label { margin-bottom: 58px; color: rgba(33, 24, 20, .55); }
.manifesto-copy h2 { margin-bottom: 32px; font-family: "Fraunces", serif; font-size: clamp(2.8rem, 13vw, 7rem); font-weight: 300; line-height: .92; letter-spacing: -.055em; }
.manifesto-copy h2 span { color: var(--teal); font-style: italic; }
.manifesto-copy p { max-width: 520px; margin-left: auto; color: rgba(33, 24, 20, .72); font-size: 1.06rem; line-height: 1.75; }
.stamp { width: 112px; height: 112px; margin-top: 54px; color: var(--teal-dark); }
.stamp svg { width: 100%; height: 100%; animation: spin 30s linear infinite; }
.stamp text { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 2.1px; fill: currentColor; }
.stamp-wave { fill: none; stroke: currentColor; stroke-width: 2; animation: spin 30s linear infinite reverse; transform-origin: center; }

.moments { display: grid; padding: 0 20px; background: var(--paper); }
.moment { min-height: 390px; padding: 44px 0 34px; border-bottom: 1px solid var(--line); }
.moment-number { font-family: "DM Mono", monospace; font-size: .7rem; color: var(--teal-dark); }
.moment-rule { width: 100%; height: 1px; margin: 16px 0 66px; background: var(--copper); transform-origin: left; }
.moment h3 { margin-bottom: 30px; font-family: "Fraunces", serif; font-size: 3.25rem; font-weight: 300; line-height: .88; letter-spacing: -.045em; }
.moment p { max-width: 330px; margin: 0; color: rgba(33, 24, 20, .65); font-size: .95rem; line-height: 1.7; }

.space { padding: 100px 20px; background: var(--roast); color: var(--cream); }
.space-heading { margin-bottom: 62px; }
.space-heading .section-label { color: rgba(245, 238, 226, .55); }
.space-heading h2 { margin: 0; font-family: "Fraunces", serif; font-size: clamp(3rem, 14vw, 7.7rem); font-weight: 300; line-height: .87; letter-spacing: -.06em; }
.space-heading h2 span { color: #d4a17f; font-style: italic; }
.space-photo { margin: 0 0 52px; }
.space-photo img { width: 100%; display: block; background: #2e201b; object-fit: cover; filter: saturate(.78) contrast(1.03); }
.space-photo-wide img { aspect-ratio: 4 / 3; object-position: center 42%; }
.space-photo-tall { width: 82%; margin-left: auto; }
.space-photo-tall img { aspect-ratio: 3 / 4; object-position: center; }
.space-photo figcaption { padding-top: 13px; border-top: 1px solid rgba(245, 238, 226, .2); color: rgba(245, 238, 226, .58); font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.space-note { max-width: 470px; margin: 80px 0 0; color: rgba(245, 238, 226, .78); font-family: "Fraunces", serif; font-size: 1.65rem; font-weight: 300; line-height: 1.45; letter-spacing: -.025em; }

.location { min-height: 760px; position: relative; padding: 90px 20px 46px; overflow: hidden; background: var(--teal-dark); color: var(--cream); }
.location-grid { position: absolute; inset: 0; opacity: .07; background-image: linear-gradient(rgba(245,238,226,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(245,238,226,.5) 1px, transparent 1px); background-size: 56px 56px; }
.location::before { content: ""; position: absolute; width: 440px; height: 440px; top: -260px; right: -180px; border: 1px solid rgba(245, 238, 226, .16); border-radius: 50%; }
.location-content { position: relative; z-index: 1; width: 100%; }
.section-label.light { margin-bottom: 24px; color: rgba(245, 238, 226, .55); }
.location h2 { margin-bottom: 30px; font-family: "Fraunces", serif; font-size: clamp(4.2rem, 19vw, 8.4rem); font-weight: 300; line-height: .8; letter-spacing: -.065em; }
address { margin-bottom: 30px; color: rgba(245, 238, 226, .78); font-style: normal; font-size: 1rem; line-height: 1.7; }
.map-cta { width: 100%; padding: 18px 0 13px; border-bottom: 1px solid rgba(245,238,226,.65); color: var(--cream); }
.map-card { position: relative; z-index: 1; height: 390px; margin-top: 55px; overflow: hidden; border: 1px solid rgba(245, 238, 226, .42); border-radius: 5px; background: #ddd; box-shadow: 0 24px 65px rgba(9, 28, 26, .28); }
.map-card iframe { width: 100%; height: 100%; display: block; border: 0; filter: sepia(.12) saturate(.72) contrast(1.02); }
.map-label { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid rgba(245,238,226,.22); border-radius: 100px; background: var(--espresso); color: var(--cream); font-family: "DM Mono", monospace; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(10,10,9,.18); pointer-events: none; }
.map-label span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--copper); color: var(--cream); }

footer { padding: 66px 20px 24px; background: var(--espresso); color: var(--cream); }
.footer-brand { margin-bottom: 48px; }
footer > p { max-width: 250px; color: rgba(245, 238, 226, .5); font-size: .9rem; line-height: 1.65; }
.back-top { display: inline-flex; gap: 10px; margin: 25px 0 70px; color: #d4a17f; text-decoration: none; font-size: .82rem; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(245, 238, 226, .16); color: rgba(245, 238, 226, .38); font-family: "DM Mono", monospace; font-size: .58rem; text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

@keyframes breathe { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (min-width: 760px) {
  .site-header { padding: 28px 40px; }
  .brand { font-size: .8rem; }
  .brand-mark { width: 42px; height: 42px; }
  .hero-content { padding: 150px 6vw 8vh; }
  .hero-content > p { font-size: 1.08rem; }
  .vertical-note { display: block; position: absolute; right: 38px; bottom: 48px; margin: 0; writing-mode: vertical-rl; color: rgba(245, 238, 226, .52); font-family: "DM Mono", monospace; font-size: .6rem; letter-spacing: .15em; }
  .manifesto { padding: 130px 6vw 150px; }
  .manifesto-copy p { font-size: 1.18rem; }
  .stamp { position: absolute; left: 6vw; bottom: 70px; width: 130px; height: 130px; }
  .moments { grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 0 6vw 100px; }
  .moment { min-height: 490px; padding-top: 68px; }
  .moment-rule { margin-bottom: 106px; }
  .location { min-height: 720px; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr); gap: 7vw; align-items: end; padding: 100px 6vw 80px; }
  .location-content { max-width: 680px; }
  .map-cta { width: 340px; }
  .map-card { height: 560px; margin-top: 0; }
  footer { padding: 90px 6vw 30px; }
  .footer-bottom { margin-top: 20px; font-size: .65rem; }
}

@media (min-width: 1100px) {
  .hero-image { object-position: center 10%; }
  .manifesto-copy { display: grid; grid-template-columns: 1fr 350px; gap: 6vw; align-items: end; }
  .manifesto-copy h2 { margin-bottom: 0; }
  .manifesto-copy p { margin-bottom: 4px; }
  .moment h3 { font-size: 4.15rem; }
  .space { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px 7vw; padding: 140px 6vw; }
  .space-heading { grid-column: 1 / -1; }
  .space-photo { margin: 0; }
  .space-photo-wide img { aspect-ratio: 1.18 / 1; }
  .space-photo-tall { width: 100%; margin-top: 150px; }
  .space-note { grid-column: 1; margin: -40px 0 0; }
}