/* ============================================================
   Cindy & Josh — 26 June 2027
   White roses, sage greenery, gold script, on white.

   Everything is themed from the tokens below. The SVG artwork
   in the HTML carries class names only, so recolouring the
   whole site — flowers included — happens right here.
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #ffffff;
  --bg-tint:   #f8f6f1;   /* alternating section band */
  --ink:       #33372f;
  --muted:     #6f7566;
  --rule:      rgba(51, 55, 47, 0.13);

  /* Gold */
  --gold:       #bf9a46;
  --gold-deep:  #a8842f;
  --gold-light: #e0c47f;

  /* Roses: white, shaded warm toward the core so they read on white.
     The step between layers has to be big enough to see, or the flower
     flattens into a pale blob. */
  --rose-1:    #ffffff;
  --rose-2:    #f9f3e8;
  --rose-3:    #efe4d0;
  --rose-4:    #e2d2b6;
  --rose-line: rgba(146, 125, 88, 0.62);

  /* Greenery */
  --leaf-1:    #93a681;
  --leaf-2:    #7d9170;
  --leaf-line: rgba(70, 87, 60, 0.45);

  /* Barely there — the crest is the focal point, this is only texture. */
  --pattern-opacity: 0.11;

  --script: "Pinyon Script", "Segoe Script", cursive;
  --serif:  "Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --sans:   "Optima", "Segoe UI", -apple-system, system-ui, sans-serif;

  --measure: 34rem;
  --wide:    64rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- Floral artwork ---------- */

/* Symbol library: must occupy no space on the page. */
.floral-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pattern-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: var(--pattern-opacity);
  pointer-events: none;
}

/* Rose: each layer a touch warmer than the one outside it, which is
   what gives a white flower depth against a white page. */
.p-outer { fill: var(--rose-1); stroke: var(--rose-line); stroke-width: 1.3; }
.p-mid   { fill: var(--rose-2); stroke: var(--rose-line); stroke-width: 1.1; }
.p-core  { fill: var(--rose-3); stroke: var(--rose-line); stroke-width: 1.0; }
.p-heart { fill: var(--rose-4); stroke: var(--rose-line); stroke-width: 0.9; }

.bud-body  { fill: var(--rose-2); stroke: var(--rose-line); stroke-width: 0.9; }
.bud-sepal { fill: none; stroke: var(--leaf-2); stroke-width: 1.3; stroke-linecap: round; }

.leaf-body { fill: var(--leaf-1); stroke: var(--leaf-line); stroke-width: 0.8; }
.leaf-rib  { fill: none; stroke: var(--leaf-line); stroke-width: 0.9; stroke-linecap: round; }
.leaf-stem { fill: none; stroke: var(--leaf-2); stroke-width: 1.5; stroke-linecap: round; }

.gold-stem { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; }
.gold-dot  { fill: var(--gold-light); stroke: var(--gold); stroke-width: 0.7; }
.gold-line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }

.gold-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  opacity: 0.55;
}

.gold-ring--outer { stroke-width: 0.9; opacity: 0.35; }


/* ---------- Hero crest ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.25rem 4.5rem;
}

.crest {
  /* One width drives both the wreath and the script inside it, so the
     names always sit correctly within the ring at every screen size. */
  --crest-w: min(92vw, 34rem);
  position: relative;
  width: var(--crest-w);
}

.wreath { display: block; width: 100%; height: auto; }

.crest-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Keep the script clear of the ring's inner edge. */
  padding: 0 18%;
}

.names {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0.01em;

  /* Pinyon Script's caps carry long swashes — the J alone descends ~31px at
     this size. The gradient below is clipped to the element's box, so any ink
     outside that box loses its paint and simply vanishes. The line-height and
     padding exist to keep the whole glyph inside the painted area. */
  line-height: 1.14;
  padding: calc(var(--crest-w) * 0.045) calc(var(--crest-w) * 0.03);

  /* Metallic gold. Falls back to flat gold where background-clip
     on text is unsupported. */
  color: var(--gold-deep);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .names {
    background: linear-gradient(155deg,
      var(--gold-light) 0%,
      var(--gold-deep)  28%,
      #efdaa6           48%,
      var(--gold-deep)  68%,
      var(--gold)       100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.names .name {
  display: block;
  font-size: calc(var(--crest-w) * 0.152);
}

.names .amp {
  display: block;
  font-size: calc(var(--crest-w) * 0.125);
  line-height: 1.1;
}

.when {
  margin: 2.25rem 0 0.5rem;
  max-width: 26rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.5;
}

.where {
  margin: 0 0 2.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.85rem 2.75rem;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-deep);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: #fff;
}


/* ---------- Sections ---------- */

.section {
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
  text-align: center;
}

/* Tinted bands span the viewport; their content stays centred. */
.section--tint {
  max-width: none;
  background: var(--bg-tint);
}

.section--tint > * {
  max-width: var(--wide);
  margin-inline: auto;
}

h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: 0.02em;
}

h3 {
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
}

.divider {
  margin: 1rem auto 2.5rem;
  max-width: 240px;
}

.divider svg { display: block; width: 100%; height: auto; }

.prose {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: left;
}

.prose p { margin: 0 0 1.25rem; }

.aside {
  max-width: var(--measure);
  margin: 2rem auto 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--muted);
}


/* ---------- Schedule ---------- */

.schedule {
  list-style: none;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.schedule li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.schedule li:last-child { border-bottom: 0; }

.schedule .time {
  padding-top: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.schedule .event {
  font-size: 0.92rem;
  color: var(--muted);
}

.schedule .event strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
}


/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  text-align: left;
}

.card {
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--rule);
}

.card p { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }

/* Placeholder note — delete these lines once the details are filled in. */
.todo {
  padding-left: 0.75rem;
  border-left: 2px solid var(--gold-light);
  font-style: italic;
  font-size: 0.85rem !important;
  opacity: 0.85;
}

a { color: var(--gold-deep); }


/* ---------- RSVP form ---------- */

.rsvp-form {
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  text-align: left;
}

.field { margin-bottom: 1.5rem; }

.field > label,
.field legend {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field .opt { text-transform: none; letter-spacing: 0; font-style: italic; }

fieldset.field { border: 0; padding: 0; margin-inline: 0; }

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

textarea { resize: vertical; }

.radio {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.radio input { margin-right: 0.6rem; }

/* Honeypot: off-screen for people, irresistible to bots. */
.hp { position: absolute; left: -9999px; }


/* ---------- Footer ---------- */

.footer {
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  background: #3c4237;
  color: #eef0ea;
}

.divider--onDark .leaf-body { fill: #b9c7aa; stroke: none; }
.divider--onDark .leaf-rib  { stroke: rgba(255, 255, 255, 0.35); }
.divider--onDark .p-outer,
.divider--onDark .p-mid,
.divider--onDark .p-core,
.divider--onDark .p-heart { stroke: rgba(60, 66, 55, 0.35); }

.footer-script {
  margin: 0.5rem 0 0;
  font-family: var(--script);
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.2;
  color: var(--gold-light);
}

.footer-meta {
  margin: 0.75rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 240, 234, 0.6);
}


/* ---------- Small screens ---------- */

@media (max-width: 30rem) {
  .schedule li { grid-template-columns: 1fr; gap: 0.25rem; }
  .schedule .time { padding-top: 0; }
  .crest-text { padding: 0 16%; }
}


/* ---------- Print ---------- */

@media print {
  .pattern-bg, .rsvp-form, .btn { display: none; }
  body { background: #fff; font-size: 12pt; }
  .hero { min-height: auto; }
  .footer { background: #fff; color: #000; }
  .footer-script { color: var(--gold-deep); }
}