@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Julius+Sans+One&display=swap');
/* Editorial wedding pages (the expo and the elopements page): headings in
   script, labels in the display sans, reading text in Garamond, on cream
   paper under the shared header. Layers on weddings.css, whose jacaranda
   accent tokens these --wex tokens match. */
:root {
  --wex-script: 'Dancing Script', 'Cormorant Garamond', cursive;
  --wex-sans: 'Julius Sans One', 'DM Sans', system-ui, sans-serif;
  --wex-serif: 'Cormorant Garamond', Georgia, serif;
  --wex-ink: #301934;
  --wex-bloom: #6F4685;
  --wex-bloom-deep: #553468;
  --wex-bloom-pale: #EFEAF6;
}

.wex-section { padding: clamp(56px, 8vw, 96px) 0; }
.wex-section--wash { background: var(--wex-bloom-pale); }
.wex-kicker { font-family: var(--rm-font-heading); font-style: italic; font-size: clamp(21px, 2.1vw, 26px); color: var(--wex-bloom); margin: 0 0 12px; }
/* Dancing Script carries a tall x-height for a script, so it is set smaller
   than a copperplate would be, with room left under it for the descenders. */
.wex-h2 { font-family: var(--wex-script); font-weight: 600; font-size: clamp(32px, 3.9vw, 48px); line-height: 1.25; color: var(--wex-ink); margin: 0 0 18px; max-width: 20ch; padding-bottom: .1em; }
.hr-subhero h1 { font-family: var(--wex-script); font-weight: 600; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.18; letter-spacing: 0; max-width: 16ch; padding-bottom: .12em; }
/* Place name as a small kicker line inside the H1 itself, not a separate
   eyebrow paragraph: it carries the search term without fighting the
   script face's 16ch width budget. */
.wex-h1-kicker { display: block; font-family: var(--wex-sans); font-style: normal; font-size: clamp(13px, 1.2vw, 15px); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.86); margin: 0 0 10px; }
.wex-lede { font-family: var(--rm-font-body); font-size: 17px; line-height: 1.65; color: #3E463E; max-width: 54ch; margin: 0; }

/* Hero: a plum scrim instead of the generic dark one, and a save-the-date
   badge instead of a tracked-caps eyebrow. */
.wex-hero__scrim { background: linear-gradient(180deg, rgba(33,20,46,.1) 0%, rgba(33,20,46,.5) 55%, rgba(26,16,36,.88) 100%); }
/* The script heading is taller than the serif this hero was measured for, so
   the box grows with its content instead of the content backing up out of
   the top of it and under the header. */
.hr-subhero { height: auto; }
/* Clear the header with room to spare, so the date is never tucked under it
   on a short window. */
.hr-subhero__inner { padding-top: clamp(170px, 20vh, 215px); }
/* The weddings wordmark signs the hero. It ships as white artwork on a clear
   ground, so it sits on the photograph without a panel behind it. */
.wex-wordmark { display: block; width: clamp(260px, 32vw, 420px); height: auto; margin: 0 0 clamp(34px, 5vw, 52px); }
/* The date sits under the title, where the place chips used to. */
/* A translucent pill reads fine against the dark base of the scrim but
   washes out wherever the photo underneath is light, so the background
   carries enough of its own opacity to stay legible regardless of what
   sits behind it. */
.wex-badge { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 999px; background: rgba(18,11,25,.6); border: 1px solid rgba(255,255,255,.35); font-family: var(--rm-font-body); font-style: italic; font-size: clamp(15px, 1.4vw, 17.5px); letter-spacing: .04em; line-height: 1.3; color: #fff; margin: 18px 0 0; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.wex-cta { display: inline-flex; align-items: center; padding: 15px 32px; border-radius: 3px; background: var(--wex-bloom); color: #fff; font-family: var(--rm-font-ui); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.wex-cta:hover { background: var(--wex-bloom-deep); }
/* What the day is: a plain list beside one tall photo, not a card grid. */
.wex-whatday { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.wex-list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.wex-list li { display: flex; gap: 18px; align-items: flex-start; }
.wex-list__ring { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--wex-bloom); display: flex; align-items: center; justify-content: center; color: var(--wex-bloom); }
.wex-list__ring svg { width: 20px; height: 20px; }
.wex-list h3 { font-family: var(--rm-font-heading); font-weight: 500; font-size: 19px; margin: 0 0 4px; color: var(--wex-ink); }
.wex-list p { font-family: var(--rm-font-body); font-size: 15.5px; line-height: 1.55; color: #5B5B55; margin: 0; }
.wex-photo { position: relative; }
.wex-photo::before { content: ""; position: absolute; top: -16px; right: -16px; width: 72%; height: 72%; border: 2px solid var(--wex-bloom); border-radius: 3px; z-index: 0; }
.wex-photo img,
.wex-photo video { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 58%; border-radius: 3px; background: var(--wex-bloom-pale); }
@media (max-width: 860px) {
  .wex-whatday { grid-template-columns: 1fr; gap: 36px; }
  .wex-photo { max-width: 420px; margin: 0 auto; order: -1; }
}

/* Why November: one large photo with two stacked beside it, not a 3-up grid. */
.wex-collage { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; max-width: 1080px; margin: 40px auto 0; }
.wex-collage figure { margin: 0; border-radius: 3px; overflow: hidden; }
.wex-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wex-collage__main { grid-row: 1 / 3; }
.wex-collage__main img { aspect-ratio: 4/5; }
.wex-collage__a img, .wex-collage__b img { aspect-ratio: 16/9; }
@media (max-width: 760px) {
  .wex-collage { grid-template-columns: 1fr; grid-template-rows: auto; }
  .wex-collage__main { grid-row: auto; }
}

.wex-bloomhead .wex-h2, .wex-bloomhead .wex-lede { margin-inline: auto; }

/* A jacaranda garland hangs across the top of the bloom band, edge to edge.
   The band's top padding opens up so the words sit clear of the blossom. */
.wex-bloom { position: relative; overflow: hidden; padding-top: clamp(120px, 15vw, 250px); }
.wex-garland {
  position: absolute; top: 0; left: 0;
  width: 100%; height: auto;
  min-width: 820px;
  pointer-events: none;
  z-index: 0;
}
.wex-bloom > .hr-shell { position: relative; z-index: 1; }

/* One frame around the three clips, not a border each. */
.wex-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 44px auto 0; border: 2px solid var(--wex-bloom); border-radius: 3px; padding: clamp(14px, 1.6vw, 22px); }
@media (max-width: 560px) { .wex-strip { grid-template-columns: 1fr; max-width: 340px; gap: 16px; padding: 14px; } }
.wex-strip figure { margin: 0; border-radius: 3px; overflow: hidden; background: #fff; }
.wex-strip img, .wex-strip video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.wex-strip video { cursor: pointer; }

/* Register: an RSVP card, not another rounded shadow tile. The drive times
   sit here, where a couple is deciding whether the trip is worth it. */
.wex-rsvp { max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--rm-border, #E3D7CC); border-radius: 3px; overflow: hidden; }
.wex-rsvp__bar { height: 6px; background: var(--wex-bloom); }
.wex-rsvp__body { padding: clamp(30px, 4vw, 42px) clamp(28px, 4vw, 40px) 36px; text-align: left; }
.wex-rsvp__title { font-family: var(--wex-script); font-weight: 600; font-size: 34px; line-height: 1.25; margin: 0 0 8px; color: var(--wex-ink); }
.wex-rsvp__note { font-family: var(--rm-font-body); font-size: 15.5px; color: #7C7C72; margin: 0 0 24px; }
.wex-rsvp__privacy { font-family: var(--rm-font-body); font-size: 13.5px; color: #7C7C72; margin: 14px 0 0; }

/* Two supporting faces under the script. The sans is a display face on a
   small x-height, so it takes the short labels only; anything the reader has
   to read in sentences runs in the Garamond, which is already served. */
.wex-kicker, .wex-badge, .wex-list h3 {
  font-family: var(--wex-sans);
  font-style: normal;
}
.wex-kicker { letter-spacing: .18em; text-transform: uppercase; font-size: clamp(13px, 1.2vw, 15px); }
.wex-list h3 { font-size: 17px; letter-spacing: .04em; }

.wex-lede,
.wex-list p,
.wex-rsvp__note, .wex-rsvp__privacy,
.wex-alt p,
.hr-subhero__sub {
  font-family: var(--wex-serif);
}
/* Garamond runs small for its point size, so the reading sizes lift a step. */
.wex-lede { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.7; }
.wex-list p { font-size: 17px; line-height: 1.6; }
.wex-rsvp__note { font-size: 17px; }
.wex-alt p { font-size: 17px; line-height: 1.65; }
.hr-subhero__sub { font-size: clamp(18px, 2vw, 23px); line-height: 1.6; }

/* Venue tour: a quiet closing line, kept deliberately smaller than Register.
   The onward links are set as their own row of chips rather than left inline
   in a sentence, where the call-to-action's capitals made them shout. */
.wex-alt { text-align: center; }
.wex-alt p { font-family: var(--rm-font-body); font-size: 16px; color: #5B5B55; margin: 0 0 18px; }
.wex-alt__cta { display: inline-flex; align-items: center; font-family: var(--rm-font-ui); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wex-bloom); text-decoration: none; border-bottom: 1.5px solid var(--wex-bloom); padding-bottom: 2px; }
.wex-alt__cta:hover { color: var(--wex-bloom-deep); border-color: var(--wex-bloom-deep); }
.wex-alt__more { max-width: 780px; margin: clamp(38px, 5vw, 56px) auto 0; padding-top: clamp(30px, 4vw, 42px); border-top: 1px solid rgba(111, 70, 133, .22); }
.wex-alt__more p { margin: 0 0 16px; }
.wex-alt__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.wex-alt__links a { display: inline-flex; align-items: center; padding: 11px 20px; border: 1px solid rgba(111, 70, 133, .45); border-radius: 3px; font-family: var(--wex-sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--wex-bloom); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.wex-alt__links a:hover { background: var(--wex-bloom); border-color: var(--wex-bloom); color: #fff; }
