/* ===========================================================
   van Staden Wedding — design tokens
   Cape Winelands / Cap Classique aesthetic.
   Cream + butter + olive + gold. Warm, editorial, restrained.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Italianno&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---- Colour: base palette ---- */
  /* The curated palette is 6 colours: cream, paper, butter-soft, olive, gold, ink. */
  --cream:        #F4ECDC;   /* page background — off-white, warm */
  --paper:        #FAF6EC;   /* card surfaces — slightly lighter */
  --butter-soft:  #F8E9BE;   /* butter yellow — the accent */
  --butter:       #F8E9BE;   /* alias of butter-soft (saturated butter retired) */
  --olive:        #6E7449;   /* olive — headings, links, hairlines, footer */
  --olive-deep:   #6E7449;   /* alias of olive (deeper olive retired) */
  --olive-soft:   #8A8E6A;   /* faded olive — meta, disabled, readable */
  --gold:         #B7935A;   /* gold — TYPE ONLY (& ampersands etc) */
  --gold-deep:    #8E6F3D;   /* gold hover/active state */
  --ink:          #2B2A22;   /* warm near-black — body, dark surfaces */
  --ink-soft:     #5F5A4D;   /* secondary text, captions */

  /* ---- Colour: semantic ---- */
  --bg:           var(--cream);
  --surface:      var(--paper);
  --accent:       var(--butter);
  --accent-strong:var(--olive);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --link:         var(--olive);
  --link-hover:   var(--gold-deep);
  --footer-bg:    var(--olive);
  --hairline:     rgba(43, 42, 34, 0.12);
  --hairline-soft:rgba(43, 42, 34, 0.06);
  --on-dark:      var(--cream);

  /* RSVP state (kept as functional tokens — not part of the visible palette) */
  --yes:          var(--olive);
  --no:           #9B6B4C;     /* warm muted clay — never red */
  --maybe:        var(--gold-deep);

  /* ---- Type: families ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Garamond, 'Adobe Garamond Pro', serif;
  --font-script:  'Italianno', 'Snell Roundhand', cursive;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type: scale (fluid, magazine-style contrast) ---- */
  --fs-hero:        clamp(4rem, 11vw, 9rem);    /* hero phrase */
  --fs-display:     clamp(2.75rem, 6vw, 5rem);  /* page H1 */
  --fs-script:      clamp(3rem, 7vw, 6rem);     /* italic script */
  --fs-h1:          clamp(2rem, 3.5vw, 3rem);
  --fs-h2:          clamp(1.5rem, 2.5vw, 2.125rem);
  --fs-h3:          1.5rem;
  --fs-eyebrow:     0.75rem;                    /* small caps label */
  --fs-body:        1.0625rem;                  /* 17px */
  --fs-body-lg:     1.1875rem;
  --fs-caption:     0.8125rem;                  /* 13px */
  --fs-micro:       0.6875rem;                  /* 11px */

  /* ---- Type: line-height ---- */
  --lh-display:     1.05;
  --lh-script:      0.9;
  --lh-heading:     1.15;
  --lh-body:        1.6;
  --lh-tight:       1.3;

  /* ---- Type: tracking ---- */
  --tracking-tight:    -0.01em;
  --tracking-normal:    0em;
  --tracking-eyebrow:   0.22em;    /* small caps wide track */
  --tracking-button:    0.12em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 144px;

  /* ---- Radii ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---- Elevation (warm-neutral, never coloured) ---- */
  --shadow-1: 0 1px 2px rgba(43,42,34,.06), 0 2px 8px rgba(43,42,34,.04);
  --shadow-2: 0 6px 24px rgba(43,42,34,.10), 0 2px 6px rgba(43,42,34,.06);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.32, 0.04, 0.16, 1);
  --dur-quick: 200ms;
  --dur-base:  400ms;
  --dur-slow:  600ms;

  /* ---- Layout ---- */
  --container: 1280px;
  --reading:   640px;
  --nav-h:     72px;
}

/* ===========================================================
   Element base
   =========================================================== */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===========================================================
   Semantic typography
   =========================================================== */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.hero-phrase {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  color: var(--ink);
}
.script.gold { color: var(--gold); }
.script.olive { color: var(--olive); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--ink);
  max-width: 50ch;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--olive);
  margin: 0 0 var(--space-3);
  display: inline-block;
}

.caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-caption);
  color: var(--ink-soft);
}
.caption::before { content: "— "; }

.micro {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.amp {
  font-family: var(--font-display);
  font-weight: inherit;
  color: inherit;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 0.5px solid currentColor;
  transition: color var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft);
}
a:hover { color: var(--link-hover); border-bottom-width: 1px; }

/* ===========================================================
   Section divider — ornamental hairline
   =========================================================== */

hr.ornament {
  border: 0;
  height: 1px;
  background: var(--hairline);
  position: relative;
  margin: var(--space-8) auto;
  max-width: 360px;
  overflow: visible;
}
hr.ornament::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  background: var(--bg);
  padding: 0 14px;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.4em;
}
hr.ornament.dots::after { content: "· ◆ ·"; }

/* ===========================================================
   Buttons (rectangular, never pill)
   =========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  border: 1px solid var(--olive);
  border-radius: var(--radius-sm);
  background: var(--olive);
  color: var(--cream);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-quick) var(--ease-soft),
              border-color var(--dur-quick) var(--ease-soft),
              transform var(--dur-quick) var(--ease-soft),
              box-shadow var(--dur-quick) var(--ease-soft);
}
.btn:hover  { background: #5C6139; border-color: #5C6139; color: var(--cream); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: transparent; border-color: var(--olive); color: var(--olive); }

/* ===========================================================
   Form fields
   =========================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label, .field .label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--olive);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-soft);
  padding: 10px 0;
  color: var(--ink);
  border-radius: 0;
  transition: border-color var(--dur-quick) var(--ease-soft);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--olive);
}

/* ===========================================================
   Card
   =========================================================== */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* ===========================================================
   Sticky nav helper
   =========================================================== */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(244, 236, 220, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 var(--space-7);
  transition: border-color var(--dur-base) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav-bar.scrolled { border-bottom-color: var(--hairline); }

/* ===========================================================
   Reduced motion
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}