/* Shared pieces, ported from mockups/mock.css. Palette and type: research/design-brief.md section 2.
   Chapter layouts live in chapters.css (and ride.css). */
:root {
  --parchment: #FDEBC2; --parchment-light: #FBF0D0; --ink: #333E1C; --copper: #904B12;
  --leaf: #446212; --leaf-light: #8D9C38; --rose: #DE4658; --rose-soft: #E06D78; --blush: #F7C3AD;
  --jasmine: #FCF3DB; --sage: #B1A147; --sage-light: #DFD099; --gold: #E2B25B; --brass: #A95E0D;
  --ivory: #FEE8C3; --motif: #CA9A5C; --wood: #9D4D0B; --hair: #221716; --hair-light: #553931;
  --bridal: #B11E2B; /* suggested wedding red, to tune against the art */
  --script: "Alex Brush", "Great Vibes", cursive;
  --caps: "Cormorant Garamond", Georgia, serif;
  --fact: "Crimson Pro", "Libre Baskerville", Georgia, serif;
  --menu-h: 64px; /* what the fixed menu covers at the bottom; chapters keep content clear of it and of env(safe-area-inset-bottom) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-snap-type: y proximity; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #e9dfc8; color: var(--ink); font: 400 17px/1.35 var(--fact); -webkit-font-smoothing: antialiased; }
main { max-width: 430px; margin: 0 auto; background: var(--parchment); }
.chapter { min-height: 100svh; scroll-snap-align: start; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; }
:focus-visible { outline: 2px solid var(--bridal); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition: none !important; animation: none !important; }
}

/* ---------- surfaces ---------- */
.paper { background-color: var(--parchment);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .56 0 0 0 0 .29 0 0 0 0 .07 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% 25%, var(--parchment-light), var(--parchment) 62%, #F6DEA9 125%); }
/* floral arch cut from the engagement art: only its top and side flowers show */
.garland { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 390 / 240; pointer-events: none;
  background: url(/assets/art/engagement-plate.jpg) top center / 100% auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 58% 84% at 50% 100%, transparent 62%, #000 98%), linear-gradient(to bottom, #000 45%, transparent 96%); -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 58% 84% at 50% 100%, transparent 62%, #000 98%), linear-gradient(to bottom, #000 45%, transparent 96%); mask-composite: intersect; }
.abs { position: absolute; }

/* ---------- type ---------- */
.script { font-family: var(--script); font-weight: 400; line-height: 1.02; }
.caps { font: 700 12.5px/1.3 var(--caps); letter-spacing: .16em; text-transform: uppercase; }
.fact { font-family: var(--fact); font-weight: 700; }
.copper { color: var(--copper); }
.center { text-align: center; }
/* a wedding detail we do not have yet: always shown like this, never invented */
.tbc { display: inline-block; border: 1.5px dashed var(--copper); color: var(--copper); border-radius: 6px; padding: 0 7px;
  font: italic 500 15px/1.5 var(--fact); letter-spacing: 0; text-transform: none; background: rgba(255,255,255,.4); white-space: nowrap; vertical-align: 1px; }
.rule { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; line-height: 1; }
.rule::before, .rule::after { content: ""; width: 58px; height: 1px; background: currentColor; opacity: .75; }

/* ---------- controls ---------- */
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.top { position: absolute; z-index: 6; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: rgba(251,240,208,.94); border: 1px solid var(--gold); font: 600 15.5px var(--fact); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 999px;
  font: 700 17px var(--fact); background: var(--bridal); color: var(--jasmine); }
.btn--ghost { background: rgba(252,243,219,.7); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--leaf { background: var(--leaf); }
/* not yet: the target (venue, times, number, link) is still to come, so the control has no href and says so */
.btn[aria-disabled="true"], .round[aria-disabled="true"] { background: rgba(255,255,255,.35); color: var(--copper); box-shadow: none;
  border: 1.5px dashed var(--copper); cursor: not-allowed; }
.menu { position: fixed; z-index: 30; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; padding: 0 8px;
  background: rgba(251,240,208,.96); border: 1px solid var(--gold); border-radius: 999px; box-shadow: 0 3px 12px rgba(51,62,28,.14); }
.menu a { font: 700 12.5px/44px var(--caps); letter-spacing: .13em; text-transform: uppercase; padding: 0 clamp(9px, 3.4vw, 13px); white-space: nowrap; }
.menu a[aria-current] { color: var(--bridal); box-shadow: inset 0 -2px 0 var(--bridal); }
.hint { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }

/* ---------- city sticker (lands on the pannier at each stop) ---------- */
.sticker { display: grid; place-content: center; text-align: center; width: 70px; height: 70px; border-radius: 50%;
  background: var(--jasmine); color: var(--c, var(--rose)); border: 2px solid currentColor; outline: 1px dashed currentColor; outline-offset: -6px; transform: rotate(var(--r, -8deg)); }
.sticker b { font: 400 30px/.8 var(--script); }
.sticker span { font: 700 7px/1.2 var(--caps); letter-spacing: .1em; text-transform: uppercase; }
.sticker--empty { background: none; border-style: dashed; outline: 0; opacity: .55; }
.dot-sticker { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--c, var(--rose)); border: 1.5px solid var(--jasmine); }

/* ---------- compact event card (opens at a stop on the map) ---------- */
.ecard { background: var(--parchment-light); border: 1px solid var(--gold); border-radius: 22px; padding: 20px 20px 18px; box-shadow: 0 -6px 24px rgba(51,62,28,.14); }
.ecard .caps { color: var(--ink); opacity: .85; }
.ecard h2 { font: 400 46px/1 var(--script); color: var(--copper); margin: 4px 0 2px; }
.ecard .when { font: 700 23px/1.25 var(--fact); }
.callout { background: rgba(247,195,173,.42); border-left: 4px solid var(--rose); border-radius: 0 10px 10px 0; padding: 9px 12px; font-size: 16.5px; line-height: 1.32; }
.callout b { font-weight: 700; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.small { font-size: 14.5px; line-height: 1.35; opacity: .9; }