:root {
    /*
      Two golds, not one. Real foil gold (the crest averages #E7AB55)
      only reaches about 2:1 against cream — unreadable as text. These
      are the deepest tones that still read as gold while clearing
      WCAG: --gold-display at 3.4:1 on cream for large headings,
      --gold-label at 4.8:1 for small caps labels.
    */
    --gold-display: #9A7521;
    --gold-label: #7E5E1A;
    --olive: #556B2F;
    --olive-dark: #435525;
    --cream: #EAE5DB;
}

/*
  Typography follows the printed invitation: an engraved copperplate
  script for the names, and Garamond for everything else — often as
  letterspaced caps for labels.

  Two deliberate adjustments for screens. The root size is nudged up
  because Garamond runs optically smaller than Inter at the same px,
  and Tailwind's `font-light` is pinned back to 400: a 300-weight serif
  on a watercolour background is too faint to read comfortably outdoors
  on a phone.
*/
html { font-size: 16.5px; }
body { font-family: 'EB Garamond', Georgia, 'Times New Roman', serif; }
h1, h2, h3, h4, .serif-font { font-family: 'Cormorant Garamond', Georgia, serif; }
.cursive-font { font-family: 'Pinyon Script', 'Apple Chancery', cursive; }
.font-light { font-weight: 400; }

.custom-scrollbar::-webkit-scrollbar { height: 4px; width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(85, 107, 47, 0.2);
    border-radius: 20px;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.carousel-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/*
  The watercolour is a tall portrait, and a tall portrait cannot be both
  complete and large on a landscape screen. The wide venue image solves that: the
  source's blank upper half is trimmed away (nothing is lost — it was
  bare paper), which turns the artwork near-landscape, and its own paper
  is extended out to the sides. So it fills the screen AND stays whole.
  Phones get the untouched portrait instead, where that shape already fits.
*/
#bg-image {
    background-color: #FDF6EC;
    background-image: url('venue.294f8d00.jpg');
    background-size: cover;
    background-position: center center;
}
@media (max-width: 820px) {
    #bg-image {
        background-image: url('venue-portrait.5c95a718.jpg');
        background-position: center bottom;
    }
}

/* Every anchor target clears the sticky nav instead of hiding under it. */
section[id] { scroll-margin-top: 6.5rem; }

/* A visible focus ring everywhere, including on the sr-only radios below. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
    border-radius: 4px;
}
.on-dark:focus-visible { outline-color: #ffffff; }

/*
  Choice cards. These use the :checked + sibling pattern rather than
  Tailwind's has-[:checked], which needs :has() and is unsupported in
  Firefox before 121 — there the card gave no feedback at all.
  State is shown by a mark AND a colour, never colour alone.
*/
.opt { display: block; cursor: pointer; }
.opt-box {
    display: flex; align-items: center; gap: .75rem;
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    background: rgba(255,255,255,.5);
    transition: border-color .15s, background-color .15s;
}
.opt-box.is-centered { justify-content: center; }
.opt:hover .opt-box { background: rgba(255,255,255,.85); }
.opt input:checked + .opt-box {
    border-color: var(--olive);
    background: rgba(85,107,47,.08);
    box-shadow: inset 0 0 0 1px var(--olive);
}
.opt input:focus-visible + .opt-box {
    outline: 3px solid var(--olive);
    outline-offset: 2px;
}
.opt-mark {
    flex: 0 0 auto;
    width: 1.15rem; height: 1.15rem;
    border: 2px solid #94a3b8;
    border-radius: 999px;
    display: grid; place-items: center;
    transition: border-color .15s;
}
.opt-mark::after {
    content: "";
    width: .55rem; height: .55rem;
    border-radius: 999px;
    background: var(--olive);
    transform: scale(0);
    transition: transform .15s;
}
.opt input:checked + .opt-box .opt-mark { border-color: var(--olive); }
.opt input:checked + .opt-box .opt-mark::after { transform: scale(1); }
.opt input:checked + .opt-box .opt-label { color: var(--olive); font-weight: 600; }

/*
  Order of Events. Written as real CSS rather than Tailwind arbitrary
  values because the connector line has to start below each badge and
  stop at the last one — fiddly to express in utilities and easy to
  break later.
*/
.toe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
.toe-item {
    position: relative;
    display: grid;
    grid-template-columns: 2.9rem 1fr;
    column-gap: .85rem;
    align-items: start;
}
.toe-item::before {
    content: "";
    position: absolute;
    left: 1.45rem;
    top: 2.9rem;
    bottom: -1.15rem;
    width: 2px;
    margin-left: -1px;
    background: rgba(85, 107, 47, .22);
}
.toe-item:last-child::before { display: none; }
.toe-badge {
    position: relative;
    width: 2.9rem; height: 2.9rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(85, 107, 47, .28);
    color: var(--olive);
    display: grid; place-items: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.toe-badge svg { width: 1.65rem; height: 1.65rem; }
.toe-time {
    display: block;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--gold-label);
    font-variant-numeric: tabular-nums;
}
.toe-label {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem; line-height: 1.3;
    color: #0f172a;
    margin-top: .1rem;
}
.toe-desc {
    margin: .2rem 0 0;
    font-size: .8rem; line-height: 1.5; font-weight: 300;
    color: #475569;
}
@media (min-width: 640px) {
    .toe-desc { font-size: .85rem; }
    .toe-label { font-size: 1.12rem; }
}

/* Wedding Party — terracotta drawn from the printed guides (6.6:1 on the panel) */
:root { --terracotta: #964228; }
.party-term { color: var(--terracotta); }
.party-dot {
    flex: 0 0 auto; width: .45rem; height: .45rem; margin-top: .55rem;
    border-radius: 999px; background: var(--terracotta);
}
.party-swatch {
    display: block; width: 2.5rem; height: 2.5rem; border-radius: 999px;
    margin: 0 auto .4rem; box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.party-swatch-label {
    display: block; font-size: .6rem; letter-spacing: .06em;
    text-transform: uppercase; color: #475569; max-width: 4.5rem;
}

.code-display {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: .22em;
    font-variant-numeric: tabular-nums;
}

/* Honour a stated preference for less movement. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .carousel-container { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .bg-layer { display: none !important; }
    section { break-inside: avoid; }
}