/* The guest page: one long page, phone first. */
body { padding-bottom: 70px; }
.caps { text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; font-weight: 400; }
.art { position: absolute; pointer-events: none; }
.spark { position: absolute; pointer-events: none; color: var(--gold); line-height: 0; }

.hero { text-align: center; padding: 56px 20px 30px; max-width: 900px; margin: 0 auto; }
.hero .caps { color: var(--sage); }
.hero .arriving { color: var(--ink); margin-top: 8px; }
.names { font-family: var(--script); color: var(--sage); font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1; margin: 10px 0 0; }
h1 { font-family: var(--serif); font-weight: 600; color: var(--sage); font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: .12em; text-transform: uppercase; margin: 4px 0 0; }
.cloud-left { left: -30px; top: -14px; width: min(180px, 30vw); }
.cloud-long { right: -40px; top: 340px; width: min(290px, 34vw); }
.tink { right: -20px; top: 40px; width: min(170px, 26vw); }

.photos { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 30px auto 10px; max-width: 640px; }
.arch { width: min(340px, 70vw); border-radius: 200px 200px 14px 14px; overflow: hidden; border: 6px solid var(--card); box-shadow: 0 8px 30px rgba(60, 68, 55, .18); }
.arch img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 30% 40%; width: 100%; }
.polaroid { width: min(270px, 52vw); flex: none; margin: 0; background: var(--card); padding: 9px 9px 44px; transform: rotate(6deg) translate(-80px, 18px); box-shadow: 0 6px 20px rgba(60, 68, 55, .22); position: relative; z-index: 2; }
.polaroid figcaption { position: absolute; bottom: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: center; line-height: 1; padding-top: 2px; font-family: var(--script); font-size: 1.55rem; }
.peter { left: -150px; bottom: -10px; width: min(170px, 26vw); z-index: 3; }

.divider { width: 120px; height: 1px; background: var(--copper); margin: 18px auto; border: 0; }
.welcome { max-width: 560px; margin: 26px auto 0; font-size: 1.05rem; }
.welcome p { margin: 0 0 12px; }
.welcome .sign { font-family: var(--script); font-size: 2rem; color: var(--sage-dark); margin: 0; }

.fund { max-width: 760px; margin: 34px auto; background: var(--sage); color: var(--paper); border-radius: 18px; padding: 26px 28px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.fund h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; margin: 0 0 6px; color: #fff; }
.fund p { margin: 0; font-size: .95rem; }
.fund .btn, .dock .btn { background: var(--paper); color: var(--sage-dark); white-space: nowrap; }

.filters { position: sticky; top: 0; z-index: 5; background: rgba(244, 239, 229, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--paper2); padding: 10px 16px; }
.filters .row { max-width: 1100px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; align-items: center; padding: 3px 0; scrollbar-width: none; }
.filters .lbl { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.filters .toggle { margin-left: 10px; }

.section { max-width: 1100px; margin: 0 auto; padding: 34px 16px 0; }
.section h2 { font-family: var(--serif); font-weight: 600; color: var(--sage); font-size: 2rem; margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section h2 .need { font-family: var(--sans); font-weight: 400; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 16px; }
.card { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: 0 2px 10px rgba(60, 68, 55, .07); display: flex; flex-direction: column; gap: 8px; }
.card.idea { background: transparent; border: 1.5px dashed var(--gold); box-shadow: none; }
.card.claimed { opacity: .5; filter: grayscale(.7); }
.card h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.thumb { background: var(--paper2); border-radius: 10px; aspect-ratio: 4 / 3; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .85rem; }
.price { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.act { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.stepper { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; flex-wrap: wrap; }
.stepper .round { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sage); background: transparent; color: var(--sage-dark); }

.thanks { font-family: var(--script); font-size: 1.8rem; color: var(--sage); text-align: center; margin: 60px 16px 20px; }

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sage); color: var(--paper); padding: 10px 16px; display: flex; justify-content: center; align-items: center; gap: 14px; box-shadow: 0 -4px 18px rgba(0, 0, 0, .12); transform: translateY(110%); transition: transform .25s ease; }
.dock.show { transform: none; }
.dock b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.dock .long { font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

@media (max-width: 760px) {
  .fund { grid-template-columns: 1fr; text-align: center; margin: 34px 16px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card h3 { font-size: 1.1rem; }
  .photos { display: block; margin-bottom: 50px; }
  .arch { width: 60vw; margin-left: 17vw; }
  .polaroid { position: absolute; right: -6px; bottom: -40px; width: 47vw; transform: rotate(6deg); padding: 6px 6px 34px; }
  .polaroid figcaption { height: 34px; font-size: 1.2rem; }
  .tink { right: -2px; top: 116px; width: 76px; }
  .peter { left: -8px; bottom: -14px; width: 74px; }
  .cloud-left { left: -24px; top: -52px; width: 110px; }
  .cloud-long { right: -24px; top: 2px; width: 150px; }
  .dock { padding: 8px 12px; gap: 10px; justify-content: space-between; }
  .dock .long { display: none; }
  .dock b { font-size: 1.05rem; }
}