/* ─────────────────────────────────────────────────────────────
   CASEY & DYLAN — wedding brand
   Retheme from the couple's actual wedding palette card ("The Colors"):
   rosewood mauve, powder blue, sage, olive, and blush. Rosewood becomes the
   main brand color (buttons, the gumnut mark, script signatures); powder blue is
   the quiet ornament color (rules, borders); blush + olive/sage fill the
   existing "whisper of warmth" and "semantic good" roles, which already
   lived in that same rose/green family before this retheme.
   The Golden Gate Club sits in a eucalyptus grove in the Presidio and reads
   warm-wood-and-brass rather than ballroom-white, so a small antique-brass
   accent is kept for the few moments that should feel like a keepsake (the
   seal's date ring, a signature, a printed card) - separate from the couple's
   decor palette on purpose, since it's about the venue, not the wedding colors.
   Rebrand by editing the :root tokens below.
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Libre+Franklin:wght@400;500;600;700&family=Mrs+Saint+Delafield&display=swap');

:root {
  /* Paper + ink */
  --ivory:      #F2EEE4;  /* warm cream, the page ground */
  --ivory-2:    #E9E2D2;  /* slightly deeper cream, for wells / zebra rows */
  --paper:      #FCFAF5;  /* near-white, for cards floating above the cream */
  --ink:        #363C42;  /* deep warm charcoal, not pure black */
  --ink-soft:   #767C7F;
  --line:       #DCD2BD;
  --line-soft:  #E7E0CF;

  /* Rosewood mauve, the couple's main wedding color */
  --primary:    #A56575;
  --primary-dk: #774954;
  --primary-wash: #F6F0F1;
  --accent:     #BED2D9;  /* the palette's powder blue, for rules and quiet ornament */

  /* Blush, a whisper of warmth (hearts, wax-seal touches only); rosewood
     doubles as its deep tone since they're the same family in the palette */
  --petal:      #E8B9B1;
  --petal-dk:   #A56575;
  --petal-wash: #F5E0DC;

  /* Antique brass, spent sparingly on keepsake moments */
  --brass:      #AD8A50;
  --brass-dk:   #7C6134;
  --brass-wash: #F1E8D4;

  /* Semantic (kept distinct from the brand accent so status never gets lost
     in the palette) — now tuned from the couple's own olive/sage rather than
     a generic green, so "good" status still feels part of the same palette */
  --good:       #6A7142;
  --good-wash:  #E2E9D2;
  --warn:       #A15B3B;
  --warn-wash:  #F3E2D6;

  /* Type */
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --body:    'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:  'Mrs Saint Delafield', 'Segoe Script', cursive;

  /* One signature "hand-set" corner shape, reused deliberately everywhere a
     soft surface appears, instead of a uniform rounded-lg on every box. */
  --organic: 22px 26px 20px 25px;
  --organic-sm: 14px 17px 13px 16px;

  --shadow:    0 14px 36px -14px rgba(54, 60, 66, 0.28);
  --shadow-sm: 0 3px 14px -6px rgba(54, 60, 66, 0.24);
  --maxw: 560px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--primary-wash); color: var(--primary-dk); }

/* Backdrop: soft directional light plus a whisper of paper grain, so the
   cream reads as stationery rather than a flat CSS color. */
.bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 46% at 50% -6%, rgba(127,147,171,0.16), transparent 68%),
    radial-gradient(48% 40% at 104% 96%, rgba(173,138,80,0.08), transparent 70%),
    radial-gradient(46% 38% at -4% 88%, rgba(199,148,137,0.12), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.21 0 0 0 0 0.24 0 0 0 0 0.26 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--ivory);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 68px; }

/* ── Masthead ─────────────────────────────────────────────────── */
.mast { text-align: center; padding: 22px 0 8px; }
.mast-row { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ── The mark ─────────────────────────────────────────────────────
   A one-line arch, echoing the Golden Gate Club's own arched windows,
   with a eucalyptus sprig hung from the keystone — venue and grove in
   one glyph. Four parts, each with its own ink so it reads as a small
   scene rather than a flat icon: .m-arch (rosewood, unfilled stroke),
   .m-thread + .m-dot (brass cord and pin), .m-leaf x2 (sage).

   PAINT LIVES IN THE MARKUP, NOT HERE. The lockups draw the glyph with
   <use href="#ic-mark">, and <use> clones into a shadow tree that
   document CSS selectors cannot reach — a rule like `.mark .m-arch`
   silently never matches, so every shape falls back to solid black.
   (That is exactly what the old gumnut mark was doing.) Only inherited
   properties cross that boundary, and this glyph needs three different
   inks, so the colors are presentation attributes on the shapes inside
   each <symbol id="ic-mark">. Rebranding the mark means editing those
   attributes plus assets/mark.svg — the tokens below do not drive it.

   Sizing is safe to do here (it applies to the outer <svg> host):
   .mark (admin header), .mark-hero (page mastheads), .seal (stamped in
   a brass ring with the date, for keepsakes). */
.mark { width: 62px; aspect-ratio: 48 / 62; height: auto; flex: none; }
.mark-hero { width: clamp(88px, 24vw, 116px); }

.seal { width: 128px; height: 128px; flex: none; }
/* The date text is a real child of the outer <svg>, not cloned content,
   so it is styleable from here. */
.seal text { font-family: var(--display); font-size: 15px; letter-spacing: 2.2px; fill: var(--brass-dk); }

.eyebrow {
  font-size: 11.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--brass-dk); font-weight: 600; margin-top: 14px;
}
.title { font-family: var(--display); font-size: clamp(32px, 8.6vw, 50px); line-height: 1.05; margin: 6px 0 4px; font-weight: 500; }
.title em { font-style: italic; color: var(--primary-dk); }
.subtitle { color: var(--ink-soft); font-size: 14.5px; }
.subtitle .venue { display: block; font-size: 12.5px; margin-top: 3px; letter-spacing: .2px; }

.rule { display: flex; align-items: center; gap: 10px; color: var(--brass); margin: 16px auto; max-width: 190px; }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rule .rule-mark { font-size: 13px; }

/* A phrase set in the signature accent, for the handful of moments that
   should feel written rather than typeset (never for body copy or anything
   under ~18px — the script is for a flourish, not for reading). */
.script { font-family: var(--script); font-weight: 400; line-height: 1; }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--organic); box-shadow: var(--shadow);
  padding: 22px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0; cursor: pointer; font-family: var(--body);
  font-weight: 600; font-size: 15.5px; border-radius: 999px;
  padding: 15px 22px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn .icon { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(1px) scale(0.995); }
.btn-primary:hover { background: var(--primary-dk); }
.btn-ghost { background: transparent; color: var(--primary-dk); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--ivory-2); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn:focus-visible, .link-btn:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--primary-dk); outline-offset: 2px;
}

/* ── Icon system (feather-weight line icons, replace every emoji) ── */
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; flex: none; }
.icon use, .icon path, .icon circle { vector-effect: non-scaling-stroke; }
.icon-line path, .icon-line circle { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-line .fill { fill: currentColor; stroke: none; }
.icon-btn {
  appearance: none; border: 1px solid var(--line); background: var(--paper); cursor: pointer;
  border-radius: 999px; width: 40px; height: 40px; display: inline-grid; place-items: center;
  color: var(--ink-soft); transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--ivory-2); color: var(--primary-dk); }

/* ── Guestbook note ───────────────────────────────────────────── */
.note-field {
  width: 100%; min-height: 100px; resize: vertical;
  font-family: var(--body); font-size: 15px; color: var(--ink); line-height: 1.55;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--organic-sm); background: #fff;
}
.note-field:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.note-saved {
  background: var(--primary-wash); border: 1px solid var(--line); border-radius: var(--organic-sm);
  padding: 18px 20px; text-align: left; position: relative;
}
.note-saved .msg { font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink); }
.note-saved .sig { font-family: var(--script); font-size: 22px; color: var(--primary-dk); margin-top: 6px; }
.link-btn { background: none; border: 0; color: var(--primary-dk); font-weight: 600; cursor: pointer; font-size: 13px; padding: 0; }

/* ── Venue Wi-Fi card ─────────────────────────────────────────── */
.wifi-card { padding: 16px 18px; margin-bottom: 18px; }
.wifi-row { display: flex; align-items: center; gap: 14px; }
.wifi-row > .icon-line { width: 26px; height: 21px; flex: none; color: var(--primary-dk); }
.wifi-info { min-width: 0; }
.wifi-label { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.wifi-name { font-family: var(--display); font-size: 19px; color: var(--ink); margin-top: 1px; }
.wifi-pass-row { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.wifi-pass-row span { font-size: 14px; color: var(--ink-soft); letter-spacing: .4px; }

.muted { color: var(--ink-soft); font-size: 14px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ── Status chips (shared by the admin dashboard) ────────────────
   Semantic state (good/warn) is kept visually distinct from the brand
   accent blue, so "hidden" or "revoked" never reads as just another
   brand-colored badge. */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.6;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.chip-muted { background: var(--ivory-2); color: var(--ink-soft); }
.chip-muted .chip-dot { background: var(--ink-soft); opacity: .45; }
.chip-good { background: var(--good-wash); color: var(--good); }
.chip-good .chip-dot { background: var(--good); }
.chip-warn { background: var(--warn-wash); color: var(--warn); }
.chip-warn .chip-dot { background: var(--warn); }
.chip-brand { background: var(--primary-wash); color: var(--primary-dk); }
.chip-brand .chip-dot { background: var(--primary); }

/* ── The pile: guest photos as small printed keepsakes, not app tiles ──
   A gently alternating rotation reads as "a pile someone assembled" while
   staying a real CSS grid, so it still scales and reflows with any count. */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-top: 18px;
  padding-top: 4px;
}
.tile {
  position: relative; background: var(--paper); padding: 6px 6px 20px;
  border-radius: 3px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease;
}
.tile:nth-child(5n+1) { transform: rotate(-2.4deg); }
.tile:nth-child(5n+2) { transform: rotate(1.6deg); }
.tile:nth-child(5n+3) { transform: rotate(-1deg); }
.tile:nth-child(5n+4) { transform: rotate(2.2deg); }
.tile:nth-child(5n+5) { transform: rotate(-1.8deg); }
.tile:hover, .tile:focus-within { transform: rotate(0deg) scale(1.03); z-index: 2; }
.tile .tape {
  position: absolute; top: -7px; left: 50%; width: 34px; height: 14px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(169,183,198,0.55); box-shadow: 0 1px 2px rgba(54,60,66,0.12);
}
.tile .photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--ivory-2); }
.tile .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .when {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  font-family: var(--display); font-style: italic; font-size: 12px; color: var(--ink-soft);
}
.tile .rm {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: var(--paper); color: var(--ink-soft); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; opacity: 0; transition: opacity .15s ease;
}
.tile:hover .rm, .tile:focus-within .rm, .tile .rm:focus-visible { opacity: 1; }
.tile .rm .icon { width: 13px; height: 13px; }

.tile.uploading .photo, .tile.failed .photo { display: grid; place-items: center; }
.tile .up-fill {
  position: absolute; left: 6px; right: 6px; bottom: 21px; height: 3px;
  background: var(--line-soft); border-radius: 2px; overflow: hidden;
}
.tile .up-fill i {
  display: block; height: 100%; width: 0%; background: var(--primary); transition: width .25s ease;
}
.tile .up-label {
  font-size: 11px; font-weight: 600; color: var(--primary-dk); text-align: center; padding: 0 4px; line-height: 1.3;
}
.tile.failed .photo { background: var(--petal-wash); }
.tile.failed { cursor: pointer; }
.tile.failed .up-label { color: var(--petal-dk); }
.tile.failed .icon { width: 18px; height: 18px; color: var(--petal-dk); }

@media (max-width: 380px) { .grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Toast ────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Sticky upload banner ─────────────────────────────────────── */
.up-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--ink); color: #fff; overflow: hidden;
  transform: translateY(-100%); transition: transform .3s ease;
  box-shadow: 0 6px 20px -8px rgba(54,60,66,0.5);
  padding-top: env(safe-area-inset-top, 0);
}
.up-banner.show { transform: translateY(0); }
.up-banner-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: rgba(255,255,255,0.14); transition: width .3s ease;
}
.up-banner-row {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; text-align: center;
}
.up-dots { display: inline-flex; gap: 4px; }
.up-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); opacity: .6; animation: updot 1.2s infinite ease-in-out; }
.up-dots i:nth-child(2) { animation-delay: .2s; }
.up-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes updot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .up-dots i { animation: none; opacity: .7; } }

/* Sparkle canvas overlay */
#sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 40; }

/* ── Thank-you overlay ────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center;
  background: rgba(242,238,228,0.95); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.thanks { text-align: center; padding: 30px; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.thanks .mast-row { margin-bottom: 4px; }
.thanks .heart { width: 40px; height: 38px; }
.thanks .heart path { stroke: var(--petal-dk); stroke-width: 1.8; fill: var(--petal-wash); }
.thanks h2 { font-family: var(--script); font-weight: 400; font-size: 56px; margin: 4px 0 6px; color: var(--primary-dk); line-height: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .thanks, .tile { animation: none !important; transition: none !important; }
}