/* Shared look for the online invitation and the printed card, taken from
   ref/base_design: warm paper, gold serif capitals, script ampersand,
   watercolour vines and the painted road of the day. */
:root {
  --paper: #f3ede1;
  --paper-2: #ece3d2;
  --ink: #4b4339;
  --ink-soft: #7d7062;
  --line: #c9ae84;
  --peach: #e8d6bc;
  --olive: #5d5c43;
  --gold: #a8884f;
  --coral: #b08a4e;
  --sage: #6f8a7d;
  --script: "Great Vibes", "Marck Script", cursive;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.55; }
p { margin: 0; }
img { max-width: 100%; }

.eyebrow { font-size: .8rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); font-weight: 600; line-height: 1.9; padding-left: .42em; }

.names {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 10vw, 2.9rem);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.08; margin: 10px 0 0;
  color: var(--gold); padding-left: .14em;
}
.names .amp {
  display: block; font-family: var(--script); text-transform: none; letter-spacing: 0;
  color: var(--coral); font-size: .95em; margin: 2px 0 4px;
}

h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 5.8vw, 1.55rem);
  letter-spacing: .3em; text-transform: uppercase; line-height: 1.3; margin: 0;
  text-wrap: balance; padding-left: .3em; color: var(--gold);
}

.date { margin-top: 18px; font-size: 1.6rem; font-weight: 600; letter-spacing: .28em; color: var(--coral); padding-left: .28em; }
.date small { display: block; letter-spacing: .32em; font-size: .72rem; font-weight: 500; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

.divider { width: 100%; display: flex; align-items: center; gap: 6px; color: var(--coral); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider svg { width: 78px; height: 26px; flex: none; }

.lede-i { letter-spacing: .2em; font-style: italic; font-size: .95rem; color: var(--ink-soft); }
.addr { font-size: .9rem; font-style: italic; color: var(--ink-soft); }
.muted-i { font-style: italic; color: var(--ink-soft); }

.vine { display: block; height: auto; aspect-ratio: 1500 / 520; pointer-events: none; }
.vine.flip { transform: rotate(180deg); }

/* Road of the day: event labels sit on the painting, sized in container units
   so they stay put at any width. */
.road {
  position: relative; aspect-ratio: 995 / 1030; container-type: inline-size;
  background: url("../assets/road.webp") center / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
.road .ev { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .4cqw; color: var(--ink); }
.road h3 { font-family: var(--serif); font-weight: 500; font-size: max(4.9cqw, 15px); line-height: 1.05; margin: 0; white-space: nowrap; }
.road .orn { display: flex; align-items: center; gap: 2cqw; width: 80%; margin-block: .3cqw; }
.road .orn::before, .road .orn::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.road .time { font-size: max(3.6cqw, 13px); font-weight: 600; letter-spacing: .08em; line-height: 1.1; color: var(--olive); font-variant-numeric: tabular-nums; }
.road a { white-space: nowrap; font-size: max(3cqw, 11.5px); color: var(--ink); text-decoration: none; letter-spacing: .03em; border-bottom: 1px solid transparent; }
.road a:hover, .road a:focus-visible { border-bottom-color: var(--line); outline: none; }
.e1 { left: 56.1%; width: 36.1%; top: 9.4%; }
.e2 { left: 5.4%; width: 38.2%; top: 46.1%; }
.e3 { left: 64%; width: 32.4%; top: 76.6%; }

.btn {
  display: inline-block; text-decoration: none; appearance: none; border: 0;
  background: var(--olive); color: #f6efe4; font-family: var(--serif); font-size: .95rem;
  letter-spacing: .06em; padding: 11px 26px; border-radius: 30px; cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }