/* Fonts (Cormorant Garamond, Pinyon Script, Figtree) already loaded by
   base.css, which this page also links — no need to import them again.

   Deliberately restrained: no seal artwork, no photo backgrounds — this
   page only shows the typographic layer of the identity (names, color,
   type) so the full olive-branch seal stays a surprise for the real
   invitation. The .olive-divider below reuses the same section-separator
   already used across index.html, for visual continuity. */

body { min-height: 100vh; min-height: 100dvh; }

.cs-page {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  background: var(--color-bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-body); font-weight: 300; color: var(--color-ink);
  padding: 72px 24px; box-sizing: border-box;
}

.cs-grain {
  position: absolute; inset: -10%; opacity: .035; pointer-events: none;
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  /* transform, not background-position — stays on the compositor instead
     of forcing a repaint every frame. The -10% inset gives plenty of
     margin to translate within without exposing a bare edge. */
  will-change: transform;
  animation: cs-grain-drift 50s linear infinite;
}
@keyframes cs-grain-drift { to { transform: translate3d(-24px, -24px, 0); } }

/* Four corner marks instead of a full rectangle — reads as a deliberate
   mark, not a stock "bordered card" template. */
.cs-frame {
  --corner: rgba(75, 85, 64, .32);
  --len: 40px;
  position: absolute; left: clamp(16px, 4vw, 60px); top: clamp(16px, 4vw, 60px);
  right: clamp(16px, 4vw, 60px); bottom: clamp(16px, 4vw, 60px);
  background:
    linear-gradient(to right, var(--corner) 0 var(--len), transparent 0) no-repeat top left / var(--len) 1px,
    linear-gradient(to bottom, var(--corner) 0 var(--len), transparent 0) no-repeat top left / 1px var(--len),
    linear-gradient(to left, var(--corner) 0 var(--len), transparent 0) no-repeat top right / var(--len) 1px,
    linear-gradient(to bottom, var(--corner) 0 var(--len), transparent 0) no-repeat top right / 1px var(--len),
    linear-gradient(to right, var(--corner) 0 var(--len), transparent 0) no-repeat bottom left / var(--len) 1px,
    linear-gradient(to top, var(--corner) 0 var(--len), transparent 0) no-repeat bottom left / 1px var(--len),
    linear-gradient(to left, var(--corner) 0 var(--len), transparent 0) no-repeat bottom right / var(--len) 1px,
    linear-gradient(to top, var(--corner) 0 var(--len), transparent 0) no-repeat bottom right / 1px var(--len);
}

.cs-content { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 480px; }

.cs-kicker {
  margin: 0; font-family: var(--font-body); font-size: clamp(13px, 2vw, 15px);
  letter-spacing: .3em; text-transform: uppercase; color: var(--color-taupe-func);
  animation: rise 1s ease .1s both;
}
.cs-dots { display: inline-flex; margin-left: .15em; }
.cs-dots span {
  display: inline-block; font-size: 1.15em;
  animation: cs-dot-pulse 2.4s ease-in-out infinite; opacity: .2;
}
.cs-dots span:nth-child(2) { animation-delay: .35s; }
.cs-dots span:nth-child(3) { animation-delay: .7s; }
@keyframes cs-dot-pulse {
  0%, 100% { opacity: .2; color: var(--color-taupe-func); transform: translateY(0) scale(1); }
  50% { opacity: 1; color: var(--color-sage); transform: translateY(-2px) scale(1.25); }
}
.cs-title {
  margin: 30px 0 0; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(46px, 9vw, 80px); line-height: 1.05; letter-spacing: -.01em; color: var(--color-ink);
  animation: rise 1s ease .3s both;
}
.cs-amp {
  display: inline-block; font-style: italic; font-size: .6em; color: var(--color-sage);
  animation: cs-amp-breathe 3.6s ease-in-out infinite;
}
@keyframes cs-amp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
.cs-date {
  margin: 22px 0 0; font-family: var(--font-display); font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: .24em; text-transform: uppercase; color: var(--color-taupe-func);
  font-variant-numeric: tabular-nums; animation: rise 1s ease .45s both;
}
/* Section-separator: same markup/classes as the one in index.html
   (invitation.css), duplicated here because this page doesn't load
   invitation.css — keep both definitions in sync if the separator changes. */
.olive-divider { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 2px; width: 100%; }
.olive-divider-line {
  flex: 1; max-width: 80px; height: 1px; background: var(--color-line); transform-origin: center;
  animation: cs-line-breathe 4.5s ease-in-out infinite;
}
.olive-divider-sprig {
  width: 70px; opacity: .9; transform-origin: 50% 60%;
  animation: cs-sprig-sway 4.5s ease-in-out infinite;
}
@keyframes cs-sprig-sway {
  0%, 100% { transform: rotate(2.5deg) scale(1); }
  50% { transform: rotate(-2.5deg) scale(1.03); }
}
@keyframes cs-line-breathe {
  0%, 100% { transform: scaleX(1); opacity: .85; }
  50% { transform: scaleX(.9); opacity: .55; }
}
.cs-divider { margin-top: 30px; animation: rise 1s ease .55s both; }
.cs-tagline {
  margin: 22px 0 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.6vw, 23px); line-height: 1.55; color: #5C5A50;
  animation: rise 1s ease .7s both;
}
.cs-note {
  margin: 20px 0 0; font-family: var(--font-body); font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-taupe-func);
  font-variant-numeric: tabular-nums; animation: rise 1s ease .85s both;
}

/* Authorship signature, not a promo — deliberately outside the decorative
   frame (not inside its inset margin) and outside the entrance-animation
   choreography, so it doesn't compete with the couple's own content. */
.cs-credit {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  padding: 10px 14px; /* real tap target without growing the visible text */
  font-family: var(--font-body); font-size: 10px; letter-spacing: .08em;
  color: var(--color-taupe-light); text-decoration: none; opacity: .55;
  transition: opacity .25s var(--ease-premium);
}
.cs-credit:hover, .cs-credit:focus-visible { opacity: .9; }
.cs-credit:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 2px; }