/* ─────────────────────────────────────────────────────────────────────
   Sydney & Andrés — Wedding Website
   v2 brand concept · Tepoztlán · Apr 30 – May 2, 2027
   ───────────────────────────────────────────────────────────────────── */

/* Self-hosted brand fonts */
@font-face {
  font-family: 'Bristol';
  src: url('fonts/Bristol.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'LeJardinDuBonheur';
  src: url('fonts/LeJardinDuBonheur.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'OnlyYou';
  src: url('fonts/OnlyYouHandwritten.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'LesEnfantsDuParadis';
  src: url('fonts/LesEnfantsDuParadis.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'RandomHandwritten';
  src: url('fonts/RandomHandwritten.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'SimpleNotes';
  src: url('fonts/SimpleNotes.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'AHundredMiles';
  src: url('fonts/AHundredMiles.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Desyrel';
  src: url('fonts/Desyrel.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'LaBelleAurore';
  src: url('fonts/LaBelleAurore.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Unknow';
  src: url('fonts/Unknow.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'BethEllen';
  src: url('fonts/BethEllen.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'MadeInfinity';
  src: url('fonts/MadeInfinity-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}

/* Body from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap');

:root {
  /* v2 brand palette — sourced one-to-one from the brand concept */
  --olive:           #78710f;
  --olive-2:         #a4970d;   /* primary anchor */
  --golden-glow:     #e0da3a;   /* electric signature */
  --pine-teal:       #2d4535;
  --pale-sky:        #abcce1;   /* use once only */
  --oxidized-iron:   #9a2c1a;
  --flag-red:        #d50e12;   /* the joy — accent only */
  --rosy-copper:     #d54f3a;
  --night-bordeaux:  #410016;   /* deepest dark */
  --crimson-violet:  #691e3f;
  --parchment:       #F0E8D0;   /* the breath */
  --parchment-warm:  #E8DEBC;
  --ink:             #1E1C0A;   /* near-black, never pure */

  /* Extended scheme palette — page variety (D50E12 stays accent-only) */
  --wine:            #6D1727;   /* deep wine main */
  --deep-red:        #76151E;   /* oxblood main */
  --chartreuse:      #CBC62F;   /* muted citron accent */
  --sky-pale:        #B7D9FF;   /* pale sky accent */
  --slate-blue:      #263342;   /* deep slate main */
  --periwinkle:      #5475E7;   /* electric blue accent */
  --copper:          #CFA182;   /* warm copper accent */

  /* Type */
  --font-display:    'OnlyYou', 'LesEnfantsDuParadis', 'Bristol', 'Cormorant Garamond', Georgia, serif;
  --font-accent:     'Unknow', 'Cormorant Garamond', Georgia, serif;
  --font-labels:     'LaBelleAurore', 'BethEllen', 'Caveat', cursive;
  --font-body:       'MadeInfinity', 'Jost', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* Easing — slow, immersive, layered */
  --ease-arrive:     cubic-bezier(.16, 1, .3, 1);
  --ease-walk:       cubic-bezier(.2, .7, .2, 1);
  --dur-fast:        220ms;
  --dur-slow:        600ms;
  --dur-page:        900ms;

  /* Spacing */
  --gutter:          clamp(24px, 5vw, 80px);
  --section-y:       clamp(96px, 14vw, 192px);
  --measure:         62ch;
  --measure-narrow:  42ch;
}

/* ───── Reset & base ───── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* ───── Type utilities ───── */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.005em;
}
.subhead {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1.1;
}
.eyebrow {
  font-family: var(--font-labels);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--olive-2);
}
.body { font-family: var(--font-body); }

.amp {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--flag-red);
  font-weight: 400;
  margin: 0 0.06em;
}

/* Caps label — Jost SemiBold all-caps, the day-of signage voice */
.caps {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
}

/* ───── Section scaffolding ───── */
.section {
  padding: var(--section-y) var(--gutter);
}

/* Print-style rule */
hr.rule {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--olive) 35%, transparent);
  margin: 0;
}

/* Diamond divider — 5px golden glow */
.diamond-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  width: 100%;
}
.diamond-rule .line {
  flex: 1; max-width: 220px;
  height: 1px;
  background: color-mix(in srgb, var(--olive) 40%, transparent);
}
.diamond-rule .diamond {
  width: 7px; height: 7px;
  background: var(--golden-glow);
  transform: rotate(45deg);
}

/* ───── Button — Olive 2 with Flag Red hover border ───── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 13px 56px;
  background: var(--olive-2);
  color: var(--parchment);
  font-family: 'LaBelleAurore', cursive;
  font-size: 22px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background var(--dur-slow) var(--ease-walk),
              border-color var(--dur-fast) var(--ease-walk),
              transform var(--dur-fast) var(--ease-walk),
              box-shadow var(--dur-fast) var(--ease-walk);
}
.btn:hover {
  border-color: var(--flag-red);
  background: color-mix(in srgb, var(--olive-2) 92%, var(--flag-red));
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.btn--parchment {
  background: var(--parchment);
  color: var(--night-bordeaux);
}
.btn--parchment:hover {
  background: var(--parchment);
  border-color: var(--flag-red);
  color: var(--flag-red);
}
.btn--pill { /* pill is now the default .btn style */ }
.btn .arrow {
  width: 22px; height: 1px; background: currentColor; position: relative;
}
.btn .arrow::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ───── Banner — full-width illustrated divider band ───── */
.banner {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 9vw, 116px) var(--gutter);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 34px);
  letter-spacing: 0.04em;
  text-align: center;
}
.banner--olive   { background: var(--olive-2);        color: var(--golden-glow); }
.banner--pine    { background: var(--pine-teal);      color: var(--parchment); }
.banner--bordeaux{ background: var(--night-bordeaux); color: color-mix(in srgb, var(--parchment) 75%, transparent); }
.banner .dot { color: var(--golden-glow); margin: 0 0.55em; }
.banner--bordeaux .dot { color: var(--flag-red); }

/* ───── Image utilities ───── */
.photo {
  position: relative;
  background: var(--pine-teal);
  overflow: hidden;
}
.photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1400ms var(--ease-walk);
}
.photo:hover img { transform: scale(1.04); }

/* Home letter — two-photo cluster. Desktop stays as-is (stacked, full width).
   On mobile, shrink and overlap them like a scrapbook layout. */
@media (max-width: 640px) {
  .letter-photos {
    position: relative;
    display: block !important;
    width: 100%;
    height: 78vw;
    max-height: 460px;
    margin: 0 auto 8px;
    max-width: 380px;
  }
  .letter-photos .photo {
    position: absolute;
    width: 58%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    border: 4px solid var(--parchment);
  }
  .letter-photos .lp-a {
    top: 0;
    left: 0;
    transform: rotate(-2.5deg);
    z-index: 1;
  }
  .letter-photos .lp-b {
    bottom: 0;
    right: 0;
    transform: rotate(2.5deg);
    z-index: 2;
  }
}

/* Inset frame — 14px parchment mat with 1px olive border */
.photo--inset {
  padding: 14px;
  background: var(--parchment);
  border: 1px solid color-mix(in srgb, var(--olive) 30%, transparent);
}

/* ───── Home gallery (masonry) ───── */
.home-gallery {
  column-count: 4;
  column-gap: clamp(10px, 1.2vw, 18px);
  max-width: 1480px;
  margin: 0 auto;
}
.home-gallery figure {
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  break-inside: avoid;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--parchment) 8%, transparent);
}
.home-gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms var(--ease-walk), filter 700ms var(--ease-walk);
}
.home-gallery figure:hover img {
  transform: scale(1.04);
}
@media (max-width: 1100px) { .home-gallery { column-count: 3; } }
@media (max-width: 720px)  { .home-gallery { column-count: 2; } }
@media (max-width: 420px)  { .home-gallery { column-count: 2; } }

/* ───── Pull quote ───── */
.pullquote {
  border-left: 3px solid var(--flag-red);
  padding: 4px 0 4px 28px;
  font-family: var(--font-accent);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: 0.002em;
  font-style: italic;
  color: var(--night-bordeaux);
  max-width: 28ch;
}
.pullquote cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-labels);
  font-style: normal;
  font-size: 17px;
  color: var(--olive-2);
}

/* ───── Form ───── */
.field {
  display: block;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--olive) 45%, transparent);
  background: transparent;
  padding: 16px 2px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-walk);
}
.field:focus { outline: none; border-bottom-color: var(--flag-red); }
.field-label {
  font-family: var(--font-labels);
  font-size: 16px;
  color: var(--olive-2);
  display: block;
  margin-bottom: 2px;
}

/* ───── Weekend day panels — each day owns its own background, fonts & text colors ─────
   Base look lives here; per-day overrides go under the #weekend-day-* ids below,
   so editing one day never touches the others. */
.day-panel { background: var(--parchment); color: rgb(205, 109, 94); }
.day-panel .day-label  { font-family: "Bristol"; font-size: 48px; color: rgb(161, 147, 14); }
.day-panel .day-title  { font-family: "LesEnfantsDuParadis"; font-size: clamp(36px, 4.4vw, 64px); color: rgb(77, 19, 26); }
.day-panel .day-kicker { font-family: var(--font-labels); font-size: 22px; color: rgb(218, 180, 164); }
.day-panel .day-body   { font-family: var(--font-body); font-size: 16px; color: rgb(125, 36, 31); }
.day-panel .day-time   { font-family: "RandomHandwritten"; font-size: 20px; color: rgb(65, 0, 22); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.day-panel .day-what   { font-family: "MadeInfinity"; font-size: 15px; color: rgb(125, 36, 31); }

/* Friday */
#weekend-day-friday   { background: var(--parchment); }
/* Saturday */
#weekend-day-saturday { background: var(--pine-teal); }
#weekend-day-saturday .day-what i.tbd { font-style: italic; color: rgba(240, 232, 208, 0.96); }
/* Sunday */
#weekend-day-sunday   { background: var(--olive-2); }
#weekend-day-sunday .day-what i.tbd { font-style: italic; color: rgb(252, 241, 218); }

/* "More details to come" placeholders read as plain text unless a day restyles them */
.day-panel .day-what i.tbd { font-style: normal; }

/* ───── Small text helpers ───── */
.muted { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.on-dark { color: var(--parchment); }
.on-dark .eyebrow { color: var(--golden-glow); }
.on-dark .muted { color: color-mix(in srgb, var(--parchment) 70%, transparent); }
.on-dark .pullquote { color: var(--parchment); }

/* ───── Selection ───── */
::selection { background: var(--golden-glow); color: var(--night-bordeaux); }

/* ─────────────────────────────────────────────────────────────────────
   Mobile / responsive
   Inline-styled grids are collapsed via these class hooks (!important is
   required to beat React inline styles). Breakpoint: 768px for layout,
   900px for the nav (handled in Nav.jsx).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-y: clamp(56px, 12vw, 104px);
    --gutter: clamp(18px, 5vw, 40px);
  }

  /* Collapse every two-column section layout into one stacked column.
     Also neutralizes the hard-coded width on the weekend day panels and
     resets RTL so the image always lands on top. */
  .r-2col {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    direction: ltr !important;
    gap: clamp(26px, 7vw, 44px) !important;
  }
  .r-2col > * { direction: ltr !important; }

  /* Explore collage → two even columns, each card its own cell */
  .r-collage { grid-template-columns: 1fr 1fr !important; }
  .r-collage > * { grid-column: auto !important; margin-top: 0 !important; }

  /* Travel facts grid → single column */
  .r-facts { grid-template-columns: 1fr !important; }

  /* RSVP rows (name pair, party-size) → stack */
  .r-stack { grid-template-columns: 1fr !important; gap: 26px !important; }

  /* Tighten the schedule time column on the weekend day panels */
  .day-panel div[style*="140px 1fr"] {
    grid-template-columns: 84px 1fr !important;
    gap: 14px !important;
  }
  .day-panel .day-time {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    overflow-wrap: anywhere !important;
  }

  /* Pull quote eases in a touch on small screens */
  .pullquote { padding-left: 18px; }
}

@media (max-width: 460px) {
  .r-collage { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  /* Stack & center the footer's bottom bar */
  .footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
}