/*
 * Kaye & Frank — shared styles.
 *
 * Committed to a single night-time world rather than offering a light theme:
 * the whole page is a sky with bats in it, and a "light mode" sky is a
 * different design, not a recoloured one.
 */

:root {
  --ground: #0b0712;   /* aubergine-black, not pure black */
  --plum: #3b2348;
  --bat: #08080d;      /* read by bats.js */
  --text: #f1e7d6;
  --text-dim: #a08fa8;
  --ember: #e8641a;
  --moon: #d9c08a;
  --hair: rgba(217, 192, 138, 0.22);

  --display: "Didot", "Bodoni 72", "Bodoni MT", Georgia, "Times New Roman", serif;
  --body: "Avenir Next", "Optima", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The sky: the bats' canvas sits under everything, full bleed. */
.sky {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  background: radial-gradient(ellipse at 50% 45%, #2a1c38 0%, #150e1e 55%, #07040b 100%);
  overflow: hidden;
}

.sky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sky > *:not(canvas) { position: relative; z-index: 2; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--moon);
  margin: 0 0 20px;
}

.names {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 11vw, 88px);
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.amp { color: var(--ember); font-style: italic; }

/* "Next Adventure" under the names, matching the link-preview card: the full
   phrase, with the hierarchy kept so the names still lead.

   text-indent compensates for letter-spacing, which adds a trailing space after
   the final letter that centring then counts as part of the line -- without it
   the words sit visibly left of centre. */
.subname {
  font-size: clamp(15px, 4vw, 32px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--moon);
  margin: 10px 0 0;
}

.rule {
  width: 60px;
  height: 1px;
  background: var(--hair);
  border: 0;
  margin: 28px auto;
}

.when {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0;
}

.tagline {
  margin: 18px auto 0;
  max-width: 34ch;
  color: var(--text-dim);
  font-size: 15px;
}

.cta {
  display: inline-block;
  margin-top: 34px;
  padding: 15px 30px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--hair);
  border-radius: 3px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cta:hover, .cta:focus-visible {
  background: var(--ember);
  border-color: var(--ember);
  color: #fff;
}

.footnote {
  margin-top: 40px;
  font-size: 12px;
  color: var(--text-dim);
}

.footnote a { color: var(--moon); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* Secondary nav under the homepage RSVP button — quiet links to menu/gifts. */
.secondary { margin-top: 20px; font-size: 13px; letter-spacing: 0.04em; color: var(--text-dim); }
.secondary a { color: var(--moon); text-decoration: none; }
.secondary a:hover, .secondary a:focus-visible { color: var(--ember); }

/* Shared footer nav — the same bar on every page so guests can move around
   from wherever they land. The current page is marked and not a link. */
.sitenav { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair);
           text-align: center; font-size: 13px; letter-spacing: 0.03em; }
.sitenav a { color: var(--moon); text-decoration: none; padding: 0 3px; }
.sitenav a:hover, .sitenav a:focus-visible { color: var(--ember); }
.sitenav .sep { color: var(--text-dim); margin: 0 7px; }
.sitenav [aria-current="page"] { color: var(--text-dim); pointer-events: none; }

/* A small contextual line that can sit just above the nav, without its own rule. */
.pagenote { text-align: center; color: var(--text-dim); font-size: 14px; line-height: 1.6;
            margin: 40px 0 0; }
.pagenote a { color: var(--moon); }
.pagenote .draft { display: block; font-size: 12px; font-style: italic; margin-top: 8px; opacity: .8; }