:root {
  --ink: #092c2a;
  --ink-light: #164641;
  --cream: #f4eddd;
  --gold: #c7a45c;
  --gold-light: #e0c989;
  --muted: #8ea39a;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 35%, rgba(30, 92, 80, .42), transparent 35%),
    linear-gradient(135deg, #061b1b 0%, #092d2b 48%, #061a19 100%);
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle, black, transparent 78%);
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  opacity: .055;
  pointer-events: none;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.glow { position: fixed; border-radius: 50%; filter: blur(2px); opacity: .16; pointer-events: none; }
.glow-one { width: 420px; height: 420px; border: 1px solid var(--gold); left: -250px; top: 14%; animation: drift 9s ease-in-out infinite; }
.glow-two { width: 180px; height: 180px; background: var(--gold); right: -110px; bottom: 5%; filter: blur(100px); animation: drift 7s ease-in-out infinite reverse; }

.leaf-art { position: fixed; width: 180px; height: 310px; opacity: .13; pointer-events: none; z-index: 0; }
.leaf-left { left: -34px; bottom: 5%; transform: rotate(-16deg); }
.leaf-right { right: -36px; top: 11%; transform: rotate(164deg); }
.leaf-art::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 100%; background: linear-gradient(transparent, var(--gold), transparent); transform: rotate(13deg); transform-origin: bottom; }
.leaf-art span { position: absolute; width: 54px; height: 25px; border: 1px solid var(--gold); border-radius: 100% 0 100% 0; }
.leaf-art span:nth-child(1) { left: 42px; top: 55px; transform: rotate(-25deg); }
.leaf-art span:nth-child(2) { right: 25px; top: 105px; transform: rotate(35deg) scale(.9); }
.leaf-art span:nth-child(3) { left: 28px; top: 165px; transform: rotate(-31deg) scale(.8); }
.leaf-art span:nth-child(4) { right: 37px; top: 220px; transform: rotate(38deg) scale(.65); }

.page-shell { width: min(1240px, calc(100% - 64px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; }

.topbar { height: 100px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.05); }
.location { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.location i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.opening-label { color: var(--gold-light); }

.hero { flex: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(30px, 7vw, 110px); padding: 40px 0 70px; }

.logo-wrap { position: relative; display: grid; place-items: center; aspect-ratio: 1; isolation: isolate; }
.logo-wrap::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(199,164,92,.14), rgba(9,44,42,.04) 57%, transparent 70%); filter: blur(4px); animation: breathe 4s ease-in-out infinite; }
.logo { width: min(100%, 520px); position: relative; z-index: 2; filter: drop-shadow(0 25px 32px rgba(0,0,0,.28)); animation: float 5s ease-in-out infinite; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(199,164,92,.2); }
.orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); left: 50%; top: -4px; }
.orbit-one { width: 90%; height: 90%; animation: spin 18s linear infinite; }
.orbit-two { width: 72%; height: 72%; border-style: dashed; animation: spin 24s linear infinite reverse; }

.content { max-width: 620px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--gold-light); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow span { display: block; width: 34px; height: 1px; background: var(--gold); }
h1 { margin: 0; font: 600 clamp(52px, 6.1vw, 94px)/.87 "Cormorant Garamond", serif; letter-spacing: -.045em; }
h1 em { color: var(--gold-light); font-weight: 500; background: linear-gradient(100deg, #b88d45, #f3dda0 45%, #b88d45 80%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: goldShine 6s linear infinite; }
.intro { max-width: 540px; margin: 34px 0 38px; color: var(--muted); font-size: 14px; line-height: 1.9; }

.footer-note { display: flex; align-items: center; gap: 11px; margin-top: 26px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #7cc6a0; box-shadow: 0 0 0 rgba(124,198,160,.5); animation: pulse 2s infinite; }

footer { min-height: 72px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; color: #69847a; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.footer-mark { color: var(--gold); }

.reveal { opacity: 0; transform: translateY(22px); animation: reveal .9s ease forwards .1s; }
.delay-one { animation-delay: .35s; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { 50% { transform: translate(24px, -18px) scale(1.06); } }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .65; } }
@keyframes goldShine { to { background-position: 200% center; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(124,198,160,0); } 100% { box-shadow: 0 0 0 0 rgba(124,198,160,0); } }

@media (max-width: 820px) {
  .page-shell { width: min(100% - 38px, 620px); }
  .topbar { height: 76px; }
  .hero { grid-template-columns: 1fr; gap: 10px; padding: 10px 0 55px; text-align: center; }
  .logo-wrap { max-width: 330px; width: 78vw; margin: auto; }
  .content { margin: auto; }
  .eyebrow { justify-content: center; }
  h1 { font-size: clamp(47px, 14vw, 68px); }
  .intro { margin: 25px auto 30px; font-size: 13px; }
  .footer-note { justify-content: center; }
  .leaf-art { opacity: .07; }
}

@media (max-width: 480px) {
  .topbar { height: 66px; }
  .location, .opening-label { font-size: 8px; letter-spacing: .12em; }
  .hero { padding-top: 0; }
  .logo-wrap { width: 68vw; }
  .eyebrow { font-size: 9px; }
  footer { justify-content: center; }
  .footer-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}