:root {
  --cream: #fbf6ec;
  --ivory: #fffdf8;
  --ink: #1f2b1f;
  --ink-soft: #3b4636;
  --sage: #6f7d5c;
  --gold: #c9973a;
  --gold-light: #f3d58c;
  --gold-pale: #f8ecc9;
  --gold-deep: #9a6b1c;
  --gold-grad: linear-gradient(100deg, #a9761f 0%, #e7c46f 22%, #b8862c 42%, #f6e2a8 58%, #b07d26 78%, #d9ae55 100%);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --caps: 'Cinzel', 'Times New Roman', serif;
  --script: 'Great Vibes', cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--serif); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); line-height: 1.5;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── Sky ─────────────────────────────────────── */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -8%, rgba(255, 222, 150, 0.55), transparent 70%),
    linear-gradient(180deg, #fffaf0 0%, #fbf6ec 55%, #f7efdd 100%);
}
/* Light rays: a still layer sized to the screen (no mask, no animation) so
   iPhone Safari's graphics-memory budget isn't spent on a huge spinning layer. */
.rays {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 0%, transparent 0%, rgba(251, 246, 236, 0.55) 55%, #fbf6ec 85%),
    repeating-conic-gradient(from 160deg at 50% -10%, rgba(255, 236, 190, 0.5) 0deg 3deg, transparent 3deg 9deg);
  opacity: 0.8;
}
#dust { position: absolute; inset: 0; width: 100%; height: 100%; }

.leaf { position: fixed; z-index: 1; pointer-events: none; width: min(40vw, 480px); }
.l-tl { top: -6px; left: -18px; }
.l-br { bottom: -6px; right: -18px; transform: rotate(180deg); opacity: 0.85; }
@media (max-width: 700px) { .leaf { width: 64vw; } .l-tl { left: -24vw; } .l-br { right: -24vw; } }

.back {
  position: fixed; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: 14px;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 1rem 0.55rem 0.7rem; border-radius: 999px;
  background: rgba(255, 253, 246, 0.82); border: 1px solid rgba(201, 151, 58, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--gold-deep); text-decoration: none;
  transition: background 0.25s;
}
.back:hover { background: var(--gold-pale); }
.back svg { width: 16px; height: 16px; }

/* ── Intro ───────────────────────────────────── */
.eyebrow { font-family: var(--caps); font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.9rem); letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--sage); margin: 0; }
.script { font-family: var(--script); font-weight: 400; line-height: 1.3; }
.title, .outro-title {
  background: var(--gold-grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.intro { position: relative; z-index: 2; min-height: 78svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 16px 2rem; }
.title { font-size: clamp(5rem, 3rem + 12vw, 11rem); margin: -0.1em 0 -0.15em; padding: 0 0.2em; }
.divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.6rem auto 1rem; width: min(380px, 76vw); }
.divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider svg { width: 28px; height: 26px; }
.lede { font-style: italic; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); max-width: 30ch; margin: 0; color: var(--ink-soft); line-height: 1.35; text-wrap: balance; }
.hint { font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.3em; color: var(--gold-deep); margin: 1.6rem 0 0; }

/* ── Wall ────────────────────────────────────── */
main { position: relative; z-index: 2; overflow-x: clip; }
.wall {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 30px); align-items: start;
  max-width: 1320px; margin: 0 auto; padding: 1rem clamp(12px, 3vw, 40px) 6rem;
}
.col { display: flex; flex-direction: column; gap: clamp(12px, 2.2vw, 30px); }
.col:nth-child(even) { padding-top: clamp(30px, 7vw, 110px); }

.card {
  position: relative; display: block; width: 100%; padding: clamp(6px, 0.9vw, 10px) clamp(6px, 0.9vw, 10px) clamp(18px, 2.6vw, 34px);
  background: var(--ivory); border: 1px solid rgba(201, 151, 58, 0.45); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 36px -22px rgba(110, 76, 20, 0.45), 0 2px 6px -2px rgba(110, 76, 20, 0.2);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), box-shadow 0.6s;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.card::after {
  content: ''; position: absolute; left: 50%; bottom: clamp(7px, 1vw, 12px); translate: -50% 0;
  width: 26px; height: 8px; opacity: 0.55;
  background: radial-gradient(circle at 25% 50%, var(--gold) 0 2px, transparent 2.5px), radial-gradient(circle at 50% 50%, var(--gold) 0 2px, transparent 2.5px), radial-gradient(circle at 75% 50%, var(--gold) 0 2px, transparent 2.5px);
}
.card:hover, .card:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 0 0 1px rgba(201, 151, 58, 0.7), 0 30px 50px -24px rgba(110, 76, 20, 0.6), 0 0 40px -6px rgba(255, 214, 130, 0.7); outline: none; z-index: 2; }
.card .ph { position: relative; overflow: hidden; background: linear-gradient(135deg, #f3ead6, #ebdfc4); }
/* Photos are always visible — never gated on a load event or animation. */
.card img { width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .card img { filter: sepia(0.25) saturate(0.85); transition: filter 0.8s; }
  .card:hover img { filter: none; }
}

.quote { padding: clamp(1.4rem, 3vw, 2.4rem) 1rem; text-align: center; }
.quote p { margin: 0; }
.quote .q { font-family: var(--script); font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.2; color: var(--gold-deep); }
.quote .s { font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.3em; color: var(--sage); margin-top: 0.6rem; }

/* More photos on the way (shown until the last batch is added) */
.more { display: flex; justify-content: center; gap: 10px; margin: -4rem 0 4rem; }
.more[hidden] { display: none; }
.more i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: 0.3; animation: pulse 1.2s ease-in-out infinite; }
.more i:nth-child(2) { animation-delay: 0.2s; }
.more i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse { 50% { opacity: 1; transform: scale(1.3); } }

/* ── Outro ───────────────────────────────────── */
.outro { position: relative; z-index: 2; text-align: center; padding: 2rem 16px 8rem; }
.outro-title { font-size: clamp(2.8rem, 2rem + 4vw, 5rem); margin: 0; padding: 0 0.2em; }
.outro-text { font-style: italic; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); color: var(--ink-soft); max-width: 30ch; margin: 0.4rem auto 1.8rem; }
.cta {
  display: inline-flex; padding: 1rem 2rem; border-radius: 999px; text-decoration: none;
  background: linear-gradient(100deg, #a9761f, #d9ae55 30%, #f3d58c 50%, #c9973a 70%, #a9761f); background-size: 200% 100%;
  color: #fffdf6; font-family: var(--caps); letter-spacing: 0.2em; font-size: 0.85rem; font-weight: 600;
  text-shadow: 0 1px 2px rgba(110, 72, 10, 0.5); box-shadow: 0 14px 30px -12px rgba(154, 107, 28, 0.7);
  transition: background-position 0.8s;
}
.cta:hover { background-position: 100% 0; }

/* ── Viewer ──────────────────────────────────── */
.viewer { position: fixed; inset: 0; z-index: 50; touch-action: none; }
.viewer[hidden] { display: none; }
.viewer-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(58, 38, 17, 0.94), rgba(16, 10, 5, 0.97) 75%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.viewer-stage { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 64px 12px 84px; }
.viewer-frame {
  position: relative; padding: 6px; border-radius: 6px;
  background: linear-gradient(135deg, #f6e2a8, #b8862c 30%, #f3d58c 55%, #a9761f 80%, #e9c977);
  box-shadow: 0 0 60px 6px rgba(255, 200, 110, 0.25), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  will-change: transform, opacity;
}
.viewer-img { display: block; max-width: min(92vw, 1400px); max-height: calc(100svh - 160px); width: auto; height: auto; border-radius: 3px; background: #2a1d0f; user-select: none; -webkit-user-drag: none; }
.viewer-ui { position: absolute; inset: 0; pointer-events: none; }
.viewer-count { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; margin: 0; font-family: var(--caps); letter-spacing: 0.3em; font-size: 0.78rem; color: rgba(246, 234, 208, 0.7); }
.viewer-count b { color: var(--gold-light); font-weight: 500; }
.vbtn {
  position: absolute; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(243, 213, 140, 0.55); background: rgba(30, 20, 10, 0.45); color: var(--gold-light);
  display: grid; place-items: center; transition: background 0.25s, transform 0.2s;
}
.vbtn:hover { background: rgba(201, 151, 58, 0.3); }
.vbtn:active { transform: scale(0.92); }
.vbtn svg { width: 22px; height: 22px; }
.vbtn.prev { left: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }
.vbtn.next { right: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }
.vbtn.close { top: max(10px, env(safe-area-inset-top)); right: 12px; width: 46px; height: 46px; }
@media (max-width: 700px) {
  .vbtn.prev, .vbtn.next { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); translate: 0 0; }
  .vbtn.prev { left: calc(50% - 64px); }
  .vbtn.next { right: calc(50% - 64px); }
  .viewer-stage { padding: 56px 8px 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
.viewing .back { visibility: hidden; }