/* Guest-facing pages. Mobile first: most guests open this from WhatsApp.
   Sizes are in rem so larger phone text settings scale everything. */
:root { --bg: #faf7f2; --ink: #2f2b27; --muted: #6f675e; --line: #ddd4c7; --accent: #6e5d4b; --danger: #9c3b2a; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid;
  grid-template-columns: minmax(0, 32rem); justify-content: center; align-content: center; padding: 2rem 1.25rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 1.125rem; line-height: 1.5;
  background: var(--bg); color: var(--ink); text-align: center; }
h1 { font-weight: normal; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.1; margin: 0 0 .75rem; }
.amp { font-style: italic; color: var(--accent); }
.date { font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.place { color: var(--muted); margin: .25rem 0 0; }
.rule { width: 4rem; border: 0; border-top: 1px solid var(--line); margin: 2rem auto; }
.countdown { font-size: 1.1rem; margin: 0; }
.countdown strong { display: block; font-size: 3rem; font-weight: normal; line-height: 1.1; color: var(--accent); }
.note { color: var(--muted); }

/* Landing page: the save-the-date in the invitation's layout. The gold tree,
   the names in script, and the date set out as on the card: the month above,
   Saturday | 20 | 2027 between gold lines, the venue below. */
.landing-top { display: grid; justify-items: center; gap: .35rem; }
.landing-top .tree { width: clamp(9rem, 46vw, 13rem); height: auto; margin-bottom: .75rem; }
.landing-top h1 { margin: .1rem 0 .4rem; }
.eyebrow { font-family: var(--caps); font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; color: var(--green); margin: 0; }
.month { font-family: var(--caps); letter-spacing: .32em; text-transform: uppercase; font-size: .95rem; color: var(--green); margin: .5rem 0 0; }
.date3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem; font-family: var(--caps); color: var(--green); width: min(19rem, 100%); }
.date3 > span:not(.day) { font-size: .9rem; letter-spacing: .2em; text-transform: uppercase; padding: .35rem 0; border-block: 1px solid var(--gold); }
.date3 .day { font-size: 3rem; line-height: 1; }
.venue { font-family: var(--caps); letter-spacing: .14em; text-transform: uppercase; font-size: 1.15rem; color: var(--green); margin: .6rem 0 0; }
.landing-body { margin-top: 1.5rem; }
.landing-body .rule { margin: 1.5rem auto; }

/* Getting in: the code on the invitation first. Anyone who can't find theirs
   opens "Can't find your invitation?" and confirms their WhatsApp number. A
   number is typed as written, not spaced out in capitals like a code. */
input.phone { letter-spacing: normal; text-transform: none; }
.by-phone { margin-top: 1.5rem; }
.by-phone summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--accent);
  text-decoration: underline; cursor: pointer; font-size: 1rem; }
.by-phone form { margin-top: .5rem; }
.lead { margin: 0 0 .25rem; font-size: 1.05rem; }
.remember { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.75rem; cursor: pointer; }
.remember input { width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0; flex: none; accent-color: var(--green); }
.who { border: 0; padding: 0; margin: 0 0 .25rem; }
.who legend { padding: 0; margin: 0 auto .25rem; }
.again { margin-top: 1.75rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Which build is live, so a deploy can be checked from the page itself. */
.build { text-align: center; margin: 2.5rem 0 0; font-size: .75rem; letter-spacing: .05em; color: var(--muted); opacity: .7; }

form { display: grid; gap: .75rem; margin-top: 1rem; }
label { font-size: 1rem; }
input { font: inherit; width: 100%; padding: .8rem 1rem; min-height: 3rem; text-align: center;
  letter-spacing: .15em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button { font: inherit; min-height: 3rem; padding: .7rem 1.2rem; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer; }
.error { color: var(--danger); margin: .5rem 0 0; }
a { color: var(--accent); }

ul.people { list-style: none; padding: 0; margin: .5rem 0 0; font-size: 1.2rem; }
.small { font-size: .9rem; }

/* RSVP form. Left-aligned inside the centred column: easier to read as a form. */
.rsvp { text-align: left; }
.rsvp h2 { font-weight: normal; font-size: 1.8rem; text-align: center; margin: 0 0 .5rem; }
.rsvp h3 { font-weight: normal; font-size: 1.35rem; margin: 1.5rem 0 .25rem; }
.rsvp > .note, .rsvp > p { text-align: center; }
.person { border-top: 1px solid var(--line); padding: 1rem 0 .5rem; }
.person:first-of-type { border-top: 0; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.choice legend { padding: 0; margin-bottom: .5rem; font-size: 1.1rem; }
.options { display: grid; gap: .5rem; }
.options.chips { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.option { position: relative; display: block; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option span { display: block; min-height: 3rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; line-height: 1.3; }
.option small { display: block; color: var(--muted); font-size: .85rem; }
.option input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.option input:checked + span small { color: #eee; }
.option input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.food { padding-left: .75rem; border-left: 3px solid var(--line); margin-bottom: .5rem; }
.field { display: grid; gap: .35rem; margin: 0 0 1rem; font-size: 1.05rem; }
input.text, textarea.text { text-align: left; letter-spacing: normal; text-transform: none; font: inherit; }
textarea.text { width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.rsvp button { width: 100%; margin-top: .5rem; }
.rsvp button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
button:disabled { opacity: .6; }
[hidden] { display: none !important; }

/* Info pages (/details). Left-aligned text under centred headings; every
   button and link is a full-height tap target. */
.details { text-align: center; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .5rem; margin: 1.5rem 0 .5rem; }
.nav a { display: inline-block; min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; text-decoration: none; font-size: 1rem; }
.info { text-align: left; border-top: 1px solid var(--line); padding: 1.5rem 0 .5rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.info h2 { font-weight: normal; font-size: 1.8rem; text-align: center; margin: 0 0 .75rem; }
.info h3 { font-weight: normal; font-size: 1.25rem; margin: 1.25rem 0 .25rem; }
.info p { margin: .5rem 0; }
.info .venue { font-size: 1.35rem; text-align: center; margin-bottom: 0; }
.info .venue + .note { text-align: center; margin-top: .25rem; }
.buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 8rem; min-height: 3rem; padding: .6rem 1rem;
  border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; text-align: center; }
.button.secondary, button.secondary { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.map button { width: 100%; }
.map iframe { width: 100%; height: 18rem; border: 0; border-radius: 8px; }
ol.schedule { list-style: none; padding: 0; margin: 0; }
ol.schedule li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
ol.schedule li:last-child { border-bottom: 0; }
.time { color: var(--accent); font-variant-numeric: tabular-nums; }
dl.times { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: .5rem 0; }
dl.times dt { margin: 0; } dl.times dd { margin: 0; color: var(--muted); text-align: right; }
.info details { border-bottom: 1px solid var(--line); padding: .25rem 0; }
.info summary { cursor: pointer; min-height: 2.75rem; padding: .6rem 0; }
.info details p { color: var(--ink); margin: 0 0 .75rem; }
ul.contacts { list-style: none; padding: 0; margin: .5rem 0; }
ul.contacts li { display: grid; gap: .1rem; padding: .5rem 0; }
.draft { background: #fff4e5; outline: 1px dashed #d8a657; outline-offset: .25rem; }
.draft-label { color: #7a4d0b; font-size: .9rem; text-align: center; }
.links { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }

/* Where to stay (/stay). A map and a card per place. */
figure.plan { margin: .75rem 0; }
figure.plan > svg { display: block; width: 100%; height: auto; }
figure.plan figcaption { text-align: center; }
.map-bg { fill: #fff; stroke: var(--line); }
.map-scale { stroke: var(--muted); stroke-width: 2; }
.map-label { fill: var(--muted); font-size: 11px; font-family: Georgia, serif; }
.map-venue { fill: var(--danger); font-size: 20px; }
.map-pin { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.map-n { fill: #fff; font-size: 10px; font-family: Georgia, serif; pointer-events: none; }
a:focus-visible .map-pin, a:hover .map-pin { fill: var(--ink); }
ul.cards { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .75rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .75rem 1rem; scroll-margin-top: 1rem; }
.card h4 { font-weight: normal; font-size: 1.2rem; margin: 0; display: flex; gap: .5rem; align-items: baseline; }
.card .num:not(:empty) { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .85rem; }
.card > .note { margin: .15rem 0 .35rem; }
ul.facts { list-style: none; padding: 0; margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .3rem; }
ul.facts li { font-size: .9rem; padding: .1rem .55rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.card .buttons { margin: .5rem 0 0; }

/* Photos of the day (/photos). */
.photos label.button { cursor: pointer; }
.photos .progress { width: 100%; }
ul.thumbs { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .35rem; }
ul.thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #fff; }

/* /stay, redone 2026-10-10: a wider page on a computer (list beside a map that
   stays put), a picture header, and place cards with a swipeable gallery. On a
   phone it is still one column: map, then the places. */
:root { --gold: #c9a227; --sage: #6f8a74; --sage-soft: #eef2ec; --shadow: 0 1px 2px rgba(47,43,39,.06), 0 6px 24px rgba(47,43,39,.07); }
body.wide-page { grid-template-columns: minmax(0, 68rem); align-content: start; padding-top: 1rem; }
.crumbs { margin: 0 0 .75rem; }
.hero { position: relative; margin: 0 0 1rem; border-radius: 16px; overflow: hidden; min-height: 15rem; display: grid; align-items: end;
  background: linear-gradient(160deg, #8fa392, #4f6152); color: #fff; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(20,18,15,.62)); }
.hero-text { position: relative; z-index: 1; padding: 2.5rem 1.25rem 1.25rem; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero h1 { color: #fff; margin: .1rem 0 .2rem; }
.hero .amp { color: #f3e7d3; }
.hero-names { margin: 0; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-sub { margin: 0; font-style: italic; opacity: .95; }
@media (min-width: 48rem) { .hero { min-height: 21rem; } .hero-text { padding: 3rem 2rem 1.75rem; } }

#stay { border-top: 0; margin-top: 0; padding-top: .5rem; }
/* The header says it already; the heading stays for screen readers. */
#stay > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nav:empty { display: none; }
#stay > p.intro { max-width: 40rem; margin: 0 auto .75rem; text-align: center; color: var(--muted); }
.stay-layout { display: grid; gap: 1rem; }
@media (min-width: 60rem) {
  .stay-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: start; }
  .stay-map { order: 2; position: sticky; top: 1rem; }
  .stay-list { order: 1; }
  .stay-map .live-map { height: calc(100vh - 6rem); min-height: 26rem; max-height: 46rem; }
}
.live-map { height: 20rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #e9e5dc; box-shadow: var(--shadow); }
figure.plan.live { margin: 0; }
figure.plan.live figcaption { margin-top: .35rem; }
.leaflet-container { font-family: Georgia, "Times New Roman", serif; }
.pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); font: 600 13px/1 Georgia, serif; transition: transform .15s, background .15s; }
.pin.lit, .leaflet-marker-icon:hover .pin, .leaflet-marker-icon:focus .pin { background: var(--ink); transform: scale(1.18); }
.pin.venue { background: #9c3b2a; font-size: 16px; }
.venue-label { font-family: Georgia, serif; font-size: 13px; border-radius: 6px; padding: 2px 8px; }
.pop { display: grid; gap: .2rem; font-family: Georgia, serif; font-size: 14px; }
.pop img { width: 100%; height: 96px; object-fit: cover; border-radius: 6px; margin-bottom: .2rem; }
.pop a { color: var(--accent); }
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-popup-content-wrapper { border-radius: 10px; }

.count-line { margin: .25rem 0 .5rem; }
.place-list h3 { font-size: 1.3rem; margin: 1.25rem 0 .5rem; color: var(--accent); }
.place-list h3:first-child { margin-top: .5rem; }
ul.cards { gap: 1rem; }
.card.place { padding: 0; overflow: hidden; border-radius: 14px; border-color: #e7dfd3; box-shadow: var(--shadow); }
.card.place .body { padding: .9rem 1.1rem 1rem; }
.card.place h4 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .2rem; display: block; }
.card.place p { margin: .45rem 0; }
.eyebrow { margin: 0 !important; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .45rem; font-size: .95rem; margin: .1rem 0 .5rem !important; }
.rating strong { font-size: 1.05rem; }
.rating a { color: var(--muted); }
.rating a.other { font-size: .88rem; }
.rating .dot { color: var(--line); }
.stars { position: relative; display: inline-block; color: #ddd4c7; letter-spacing: 1px; line-height: 1; }
.stars::before { content: "★★★★★"; }
.stars-on { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; color: var(--gold); white-space: nowrap; }
.card.place ul.facts li { background: var(--bg); }
ul.highlights { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .92rem; color: var(--ink); }
ul.highlights li::before { content: "✓ "; color: var(--sage); }
.card blockquote { margin: .75rem 0; padding: .65rem .9rem; background: var(--sage-soft); border-left: 3px solid var(--sage); border-radius: 0 8px 8px 0; }
.card blockquote p { margin: 0 !important; font-style: italic; }
.card blockquote footer { margin-top: .3rem; font-size: .85rem; color: var(--muted); }
.card blockquote footer a { color: var(--muted); }
.card.place .buttons { margin: .8rem 0 .2rem; }
.card.place .button { flex: 1 1 5rem; min-height: 2.9rem; font-size: 1rem; }
.card.place .button:first-child { flex-basis: 100%; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; margin: .5rem 0 0 !important; }
.more a, button.link { color: var(--accent); font-size: .95rem; }
button.link { background: none; border: 0; padding: 0; min-height: 2.25rem; line-height: inherit; font-family: inherit; text-decoration: underline; color: var(--accent); }

.gallery { position: relative; background: #e9e4da; aspect-ratio: 16 / 10; }
.gallery.empty { display: grid; place-items: center; background: linear-gradient(160deg, var(--sage-soft), #e4ddd0); color: var(--muted); font-style: italic; }
.gallery .track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery .track::-webkit-scrollbar { display: none; }
.gallery .shot { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0; cursor: zoom-in; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 1.6rem; line-height: 1; box-shadow: 0 1px 6px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s; }
.gallery .prev { left: .6rem; } .gallery .next { right: .6rem; }
.gallery:hover .arrow, .gallery .arrow:focus-visible { opacity: 1; }
@media (hover: none) { .gallery .arrow { display: none; } }
.gallery .count { position: absolute; right: .6rem; bottom: .6rem; padding: .1rem .55rem; border-radius: 999px; background: rgba(20,18,15,.6); color: #fff; font-size: .8rem; }
.gallery .badge-n { position: absolute; left: .7rem; top: .7rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid #fff; font-size: .9rem; box-shadow: 0 1px 6px rgba(0,0,0,.25); }

dialog.lightbox { border: 0; padding: 0; background: rgba(15,13,11,.94); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.lightbox::backdrop { background: rgba(15,13,11,.92); }
dialog.lightbox figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 3rem .5rem 1rem; }
dialog.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
dialog.lightbox figcaption { color: #eee; font-size: .9rem; padding-top: .6rem; display: grid; gap: .15rem; text-align: center; }
dialog.lightbox .credit { color: #aaa; font-size: .75rem; }
dialog.lightbox button { position: fixed; min-height: 0; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.9rem; line-height: 1; }
dialog.lightbox .close { top: .75rem; right: .75rem; }
dialog.lightbox .prev { left: .75rem; top: 50%; } dialog.lightbox .next { right: .75rem; top: 50%; }
.fine { text-align: center; max-width: 44rem; margin: 1.5rem auto 0 !important; }
#around, #weekend { max-width: 44rem; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .gallery .track { scroll-behavior: auto; } .pin { transition: none; } }

/* Tap targets. A finger needs about 44 px; links standing on their own line
   (the back links, a place's Directions and Maps, the review sites) get
   padding rather than bigger text, so they look the same but are easier to
   hit. The negative margin keeps the spacing around them as it was. */
.note > a:only-child, .crumbs a, .more a, .more .link, .rating a { display: inline-block; padding: .65rem .15rem; margin: -.4rem 0; }

/* ---- The invitation look (design A, chosen 2026-11-08) --------------------
   The whole guest site wears the invitation: ivory paper, a thin gold double
   frame round the screen, watercolour eucalyptus in the top-left and
   bottom-right corners, the gold tree, and the invitation's type (Cinzel
   capitals, Cormorant Garamond text, Pinyon Script for names). The art is cut
   from the save-the-date (public/art/). It sits here, after everything
   else, so the look can be read and changed in one place. */
:root { --bg: #f8f3ed; --ink: #2b2a26; --green: #23412f; --muted: #6b665c; --line: #e3d7c2; --accent: #23412f;
  --gold: #b8975a; --gold-soft: #d4bd8a;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --caps: Cinzel, "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --sprig-tl: clamp(9.5rem, 42vw, 15rem); --sprig-br: clamp(8.5rem, 36vw, 13rem); }
body { font-family: var(--serif); font-size: 1.25rem;
  background: url(/art/sprig-tl.webp) left top / var(--sprig-tl) auto no-repeat,
              url(/art/sprig-br.webp) right bottom / var(--sprig-br) auto no-repeat, var(--bg);
  padding-top: calc(var(--sprig-tl) * .62); padding-bottom: calc(var(--sprig-br) * .9); }
/* The frame: two gold lines round the screen, clear of the content. */
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 5; }
body::before { inset: .55rem; border: 1px solid var(--gold); }
body::after { inset: .8rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
@media (min-width: 48rem) { body::before { inset: 1rem; } body::after { inset: 1.3rem; } }

h1 { font-family: var(--script); font-weight: normal; color: var(--green); font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1.05; text-wrap: balance; }
h2, .rsvp h2 { font-family: var(--caps); font-weight: normal; color: var(--green); letter-spacing: .12em; font-size: 1.3rem; text-wrap: balance; }
.amp { font-style: normal; color: var(--gold); font-size: .8em; }
.date { font-family: var(--caps); color: var(--green); font-size: 1.05rem; letter-spacing: .22em; }
.place { font-style: italic; }
.note { color: var(--muted); }
/* The divider: a short gold line either side of a small gold heart. */
.rule { width: 9rem; height: 1rem; border: 0; overflow: visible; margin: 2rem auto;
  background: linear-gradient(var(--gold), var(--gold)) left center / 38% 1px no-repeat,
              linear-gradient(var(--gold), var(--gold)) right center / 38% 1px no-repeat; }
.rule::after { content: "\2665"; display: block; text-align: center; line-height: 1rem; font-size: .8rem; color: var(--gold); }
.countdown strong { font-family: var(--caps); color: var(--green); }
button, .button { font-family: var(--caps); letter-spacing: .1em; font-size: 1rem; background: var(--green); }
.button.secondary, button.secondary, .rsvp button.secondary { background: #fff; color: var(--green); border-color: var(--green); }
input, select, textarea { border-color: var(--gold-soft); }
input:focus-visible, button:focus-visible, a:focus-visible { outline-color: var(--gold); }
a, .by-phone summary { color: var(--green); }
.tree-sm { display: block; width: 6.5rem; height: auto; margin: 0 auto .5rem; }
.hero h1 { color: #fff; }
body.wide-page { padding-top: calc(var(--sprig-tl) * .95); }
/* Wide screens have empty margins, so both corners stay in view like the card.
   On a phone they scroll with the page, or the leaves would sit over the text. */
@media (min-width: 64rem) { body:not(.wide-page) { background-attachment: fixed; } }