/* Layout: one long scroll. Full-screen logo photo, then a deco-framed invitation panel (circle portrait left, text right), then a quiet sign-up and support panel. */
:root {
  --navy: #0c1a3e;
  --navy-deep: #081230;
  --gold: #e8a317;
  --gold-soft: #f2c14e;
  --gold-line: rgba(232, 163, 23, 0.55);
  --mist: #a9b5cf;
  --font-display: "Poiret One", "Jost", "Century Gothic", sans-serif;
  --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 6vw, 4rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

/* 1. Landing: logo and photo only */
.landing {
  position: relative;
  height: 100svh;
  min-height: 24rem;
  background: var(--navy-deep);
}
.landing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--gold);
  opacity: 0.85;
  animation: bob 2.4s ease-in-out infinite;
}
.cue svg { width: 1.6rem; height: 1.6rem; }
@keyframes bob { 50% { transform: translateY(0.4rem); } }

/* 2. Invitation panel */
.invite {
  position: relative;
  background: var(--navy);
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}
.frame {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  border: 1px solid var(--gold-line);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--gold);
  background: var(--navy);
  rotate: 45deg;
}
.frame::before { top: -0.4rem; left: 50%; margin-left: -0.35rem; }
.frame::after { bottom: -0.4rem; left: 50%; margin-left: -0.35rem; }

.portrait {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  border: 3px solid var(--gold);
  overflow: hidden;
  background: var(--navy-deep);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

.copy {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.9vw, 2.05rem);
  line-height: 1.65;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold);
}
.copy + .copy { margin-top: 2.25rem; }

@media (max-width: 48rem) {
  .frame { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .portrait { max-width: min(18rem, 80%); }
}

/* 3. Sign up, follow, support */
.join {
  background: var(--navy);
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 10vw, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}
.join::before {
  content: "";
  width: min(24rem, 60%);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.signup { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; width: min(34rem, 100%); }
.signup input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--gold-line);
  border-radius: 0;
  background: var(--navy-deep);
  color: #f4ecd8;
  font-family: var(--font-body);
  font-size: 1rem;
}
.signup input::placeholder { color: rgba(169, 181, 207, 0.7); }
.signup input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

.btn {
  display: inline-block;
  padding: 0.95rem 2rem;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: rgba(232, 163, 23, 0.16); }
.btn.big { padding: 1.3rem 2.75rem; font-size: 1rem; letter-spacing: 0.2em; border-width: 2px; max-width: 100%; text-align: center; }
.btn.solid { background: var(--gold); color: var(--navy-deep); }
.btn.solid:hover { background: var(--gold-soft); }

.social { display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.social a {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  color: var(--gold);
  transition: background 0.2s, border-color 0.2s;
}
.social a:hover { background: rgba(232, 163, 23, 0.16); border-color: var(--gold); }
.social svg { width: 1.45rem; height: 1.45rem; fill: currentColor; }

.hidden-field { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue { animation: none; }
  .btn, .social a { transition: none; }
}