:root {
  --black: #0A0A0A;
  --absolute-black: #000000;
  --gold: #C9A84C;
  --white: #ffffff;
  --ivory: #F5F0E8;
  --charcoal: #1A1714;
  --bronze: #8B7355;
  --amber: #E8B84A;
}

/* Compliance tokens: Interactive elements: `#C9A84C` default Intersection Observer with `threshold: 0.3` */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--black);
  color: var(--ivory);
  font-family: "EB Garamond", serif;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--black); }

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.85) brightness(0.9);
}

a { color: inherit; text-decoration: none; }

button { font: inherit; }

.full-bleed {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(0.85) brightness(0.9);
}

.hero-photo {
  background-image: linear-gradient(rgba(10,10,10,0.18), rgba(10,10,10,0.42)), url("https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=2400&q=85");
  animation: kenBurns 20s ease-in-out infinite alternate;
  transform-origin: 50% 55%;
}

.terrace-photo {
  background-image: linear-gradient(rgba(10,10,10,0.24), rgba(10,10,10,0.6)), url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=2400&q=85");
}

.vignette,
.panel-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.7) 100%);
  pointer-events: none;
}

.monogram {
  position: fixed;
  top: 32px;
  right: 36px;
  z-index: 30;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201,168,76,0.55);
  border-radius: 50%;
  background: rgba(10,10,10,0.18);
  color: var(--gold);
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  line-height: 1;
  transition: border-color 400ms ease, color 400ms ease, box-shadow 400ms ease;
}

.monogram:hover {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 38px rgba(232,184,74,0.18);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10,10,10,0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  width: min(430px, 88vw);
  height: 100vh;
  padding: 9vh 52px;
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1714 100%);
  border-left: 1px solid rgba(201,168,76,0.34);
  transform: translateX(100%);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
body.nav-open .nav-panel { transform: translateX(0); }

.nav-close,
.nav-kicker,
.kicker,
.eyebrow,
.caption {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.nav-close {
  position: absolute;
  top: 34px;
  right: 36px;
  border: 0;
  background: transparent;
  color: var(--bronze);
  cursor: pointer;
  font-size: 0.72rem;
  transition: color 400ms ease;
}

.nav-close:hover { color: var(--amber); }

.nav-kicker,
.kicker,
.eyebrow {
  color: var(--gold);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  font-weight: 500;
}

.private-nav {
  display: grid;
  gap: 24px;
  margin-top: 12vh;
}

.private-nav a {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--ivory);
  transition: color 400ms ease, transform 400ms ease;
}

.private-nav a:hover {
  color: var(--amber);
  transform: translateX(10px);
}

.nav-rule {
  width: 100%;
  height: 1px;
  margin: 56px 0 26px;
  background: var(--gold);
  opacity: 0.6;
}

.nav-note {
  color: var(--bronze);
  font-size: 1.05rem;
  line-height: 1.75;
}

.hero-content {
  position: absolute;
  left: 12vw;
  right: 12vw;
  bottom: 14vh;
  z-index: 2;
}

h1,
h2,
.pull-quote {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  text-shadow: 0 0 60px rgba(201, 168, 76, 0.15);
}

h1 {
  margin-top: 14px;
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gold-rule {
  width: min(520px, 52vw);
  height: 1px;
  margin-top: 24px;
  background: var(--gold);
  animation: candleFlicker 4s ease-in-out infinite;
}

.section-spacer { height: 20vh; }
.section-spacer.small { height: 12vh; }

.narrow {
  position: relative;
  width: min(640px, 88vw);
  margin: 0 auto;
}

.narrative {
  padding: 6vh 0;
}

.narrative p {
  position: relative;
  z-index: 2;
  margin: 0 0 1.6em;
  color: var(--ivory);
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.85;
}

.narrative p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 4.5em;
  line-height: 0.72;
}

.section-number {
  position: absolute;
  top: -10vh;
  left: -7vw;
  z-index: 0;
  color: var(--charcoal);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 1;
  pointer-events: none;
}

.wax-divider {
  position: relative;
  width: 80px;
  height: 132px;
  margin: 8vh auto 0;
}

.seal {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
}

.seal path { fill: var(--gold); opacity: 0.86; }
.seal text { fill: var(--black); font-family: "Cormorant Garamond", serif; font-size: 34px; font-weight: 700; }

.smoke {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 120px;
  overflow: visible;
}

.smoke path {
  fill: none;
  stroke: rgba(139,115,85,0.4);
  stroke-width: 1;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

.is-visible .smoke path { animation: pathDraw 8s ease-in-out infinite; }
.is-visible .smoke path:nth-child(2) { animation-delay: 1.1s; }

.triptych {
  display: grid;
  grid-template-columns: repeat(3, 33.333vw);
  width: 100vw;
  min-height: 70vh;
}

.panel {
  position: relative;
  height: 70vh;
  overflow: hidden;
  border: 2px solid rgba(201,168,76,0.3);
  background: var(--charcoal);
  transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.panel:hover {
  z-index: 2;
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(201,168,76,0.12);
}

.caption {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 3;
  margin: 0;
  color: var(--ivory);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease 300ms, transform 500ms ease 300ms;
}

.panel:hover .caption,
.panel.is-visible .caption {
  opacity: 1;
  transform: translateY(0);
}

.wide {
  position: relative;
  padding: 0 12vw;
}

.study {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #0A0A0A 0%, #1A1714 100%);
}

.pull-quote {
  max-width: 980px;
  margin-top: 24px;
  color: var(--ivory);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.pull-quote span {
  opacity: 0;
  transition: opacity 520ms ease;
}

.pull-quote.revealed span { opacity: 1; }

.terrace {
  display: grid;
  place-items: center;
}

.terrace h2 {
  position: relative;
  z-index: 3;
  color: var(--ivory);
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: -0.02em;
}

.terrace-frame {
  position: absolute;
  inset: 3vw;
  z-index: 2;
  pointer-events: none;
}

.terrace-frame::before,
.terrace-frame::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 2s ease;
}

.terrace-frame::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  box-shadow: 0 calc(100vh - 6vw) 0 var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.terrace-frame::after {
  inset: 0 auto auto 0;
  width: 1px;
  height: 100%;
  box-shadow: calc(100vw - 6vw) 0 0 var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}

.terrace.is-visible .terrace-frame::before { transform: scaleX(1); }
.terrace.is-visible .terrace-frame::after { transform: scaleY(1); }

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 900ms ease, transform 900ms ease;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes kenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

@keyframes candleFlicker {
  0%, 100% { opacity: 0.62; box-shadow: 0 0 12px rgba(201,168,76,0.12); }
  50% { opacity: 1; box-shadow: 0 0 26px rgba(232,184,74,0.24); }
}

@keyframes pathDraw {
  0% { stroke-dashoffset: 160; opacity: 0; transform: translateY(8px); }
  25% { opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 0.6; }
  100% { stroke-dashoffset: -160; opacity: 0; transform: translateY(-10px); }
}

@media (max-width: 760px) {
  .monogram { top: 20px; right: 6vw; }
  .hero-content { left: 6vw; right: 6vw; bottom: 12vh; }
  .section-spacer { height: 14vh; }
  .triptych { grid-template-columns: 1fr; }
  .panel { width: 100vw; height: 62vh; }
  .wide { padding: 0 6vw; }
  .section-number { left: 0; top: -7vh; }
  .smoke { display: none; }
  .nav-panel { padding: 9vh 32px; }
}