:root {
  --ink: #103d35;
  --paper: #f5e6c8;
  --intro-panel: #06483d;
  --radius-lg: .25rem;
  --radius-md: .25rem;
  --scratch-one: #eaa51c;
  --scratch-two: #0a594b;
}
body { background: var(--paper); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; opacity: .13; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.invite-intro { background: #06483d; }
.invite-intro::before, .invite-intro::after { content: ""; position: absolute; z-index: 1; width: 30vmin; height: 60vmin; opacity: .14; background: repeating-linear-gradient(75deg, transparent 0 20px, #fff 21px 24px); }
.invite-intro::before { left: -6vmin; transform: rotate(-20deg); }
.invite-intro::after { right: -6vmin; transform: rotate(20deg); }
.intro-content h1 { font-size: clamp(3.2rem, 10vw, 6.2rem); text-transform: uppercase; }
.intro-orbit { border-style: dashed; }
.site-nav .brand-mark { border-radius: .2rem; transform: rotate(-3deg); }
.hero { min-height: min(980px, 100svh); background: #e99a12; }
.hero::after { background: linear-gradient(180deg, rgba(17,63,54,.1), transparent 48%, rgba(11,55,46,.34)); }
.hero-art { object-position: center center; }
.hero-inner { position: relative; z-index: 3; align-content: start; padding-top: clamp(8rem, 16vh, 11rem); }
.safari-mobile { position: absolute; z-index: 2; top: -3rem; width: clamp(10rem, 19vw, 17rem); pointer-events: none; transform-origin: 50% 0; filter: drop-shadow(0 1.2rem 1.2rem rgba(17,50,38,.3)); will-change: transform; }
.safari-mobile img { display: block; width: 100%; height: auto; }
.safari-mobile--left { left: -3.8rem; animation: safari-pendulum-left 6.8s ease-in-out infinite; }
.safari-mobile--right { top: -5rem; right: -4.2rem; width: clamp(8.5rem, 16vw, 14rem); opacity: .88; animation: safari-pendulum-right 7.7s ease-in-out infinite; }
@keyframes safari-pendulum-left { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(4.5deg); } }
@keyframes safari-pendulum-right { 0%,100% { transform: scaleX(-1) rotate(-4deg); } 50% { transform: scaleX(-1) rotate(5deg); } }
.hero-stamp { position: absolute; top: 21%; right: 8%; display: grid; width: 6.5rem; aspect-ratio: 1; place-items: center; border: 3px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 1000; letter-spacing: .12em; line-height: 1.2; text-align: center; transform: rotate(12deg); opacity: .72; }
.hero-title { max-width: 8ch; color: #fff7db; font-size: clamp(4.8rem, 15vw, 11rem); text-transform: uppercase; text-shadow: .04em .04em 0 var(--ink); }
.hero-title small { color: #173e36; text-shadow: none; }
.hero-age { border: 2px solid #103d35; border-radius: .2rem; background: var(--accent); color: #173e36; box-shadow: .35rem .35rem 0 #103d35; transform: rotate(-2deg); }
.hero-actions .button { border: 2px solid #153f36; border-radius: .2rem; background: #103d35; box-shadow: .3rem .3rem 0 var(--accent); }
.hero-actions .button--ghost { background: #f7d57d; color: #103d35; }
.marquee { padding: 1rem 0; border-block: 3px solid #103d35; background: var(--accent); color: #103d35; transform: none; }
.section-heading h2 { text-transform: uppercase; }
.details-section { background: #f5e6c8; }
.details-grid { gap: 1.25rem; }
.detail-card { border: 3px solid var(--ink); background: #fff2d6; box-shadow: .6rem .6rem 0 var(--ink); }
.detail-card:nth-child(1) { background: var(--accent); transform: rotate(-.8deg); }
.detail-card:nth-child(2) { background: var(--highlight); color: #fff7dc; transform: translateY(1rem) rotate(1deg); }
.detail-card:nth-child(3) { background: #76a47b; color: #0c372f; transform: rotate(-.6deg); }
.detail-no { border-bottom: 2px solid currentColor; padding-bottom: .7rem; }
.text-link { display: inline-block; margin-top: 1rem; border-bottom: 2px solid currentColor; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.countdown-section { border-block: 3px solid var(--ink); background: var(--primary); color: #fff3d7; }
.countdown-section .flip-card { --flip-card-bg: var(--accent); --flip-card-text: #123d35; border: 3px solid #123d35; border-radius: .2rem; box-shadow: .3rem .3rem 0 #123d35; }
.map-section { background: #f5e6c8; }
.map-layout { border: 3px solid var(--ink); border-radius: .25rem; background: var(--accent); box-shadow: .8rem .8rem 0 var(--ink); }
.map-copy h2 { text-transform: uppercase; }
.map-frame-wrap { border-left: 3px solid var(--ink); border-radius: 0; }
.save-date-section { background: var(--accent); }
.save-date-section h2 { text-transform: uppercase; }
.scratch-card { border: 3px solid var(--ink); background: #fff2d6; box-shadow: .45rem .45rem 0 var(--ink); }
.moments-section { overflow: hidden; background: #f8c945; }
.moments-section::before { content: ""; position: absolute; inset: 0; opacity: .09; background: repeating-radial-gradient(circle at 20% 20%, #173f35 0 2px, transparent 3px 32px); }
.moment-card { border: 3px solid var(--ink); background: #fff4d8; box-shadow: .55rem .55rem 0 var(--ink); }
.moment-card:nth-child(1) { transform: rotate(-1.5deg); }
.moment-card:nth-child(2) { transform: translateY(4rem) rotate(1.5deg); }
.moment-card:nth-child(3) { transform: rotate(-1deg); }
.moment-art { background: linear-gradient(145deg, #f1a524, #e16627); }
.moment-art-2 { background: repeating-linear-gradient(45deg, #0d574b 0 20px, #0a6c59 20px 40px); }
.moment-art-3 { background: radial-gradient(circle, #f2d870 0 8%, transparent 9%), #4d8c78; background-size: 80px 80px; }
.message-section { background: #103d35; color: #fff4d5; }
.message-section::before { content: "ROAR"; position: absolute; top: 50%; left: 50%; color: var(--accent); font-family: var(--display); font-size: min(30vw, 23rem); font-weight: 1000; letter-spacing: -.1em; opacity: .05; transform: translate(-50%,-50%) rotate(-5deg); }
.message-mark { border: 3px solid var(--accent); border-radius: .2rem; color: var(--accent); transform: rotate(5deg); }
.message-note { max-width: 36rem; margin: 1.5rem auto 0; color: rgba(255,244,213,.7); line-height: 1.7; }
.rsvp-section { padding-top: 5rem; background: #103d35; }
.rsvp-card { border: 3px solid #0d332d; background: var(--highlight); box-shadow: 1rem 1rem 0 var(--accent); }
.rsvp-card::after { content: "JOIN"; right: -1rem; color: #fff; font-family: var(--display); font-size: 12rem; font-weight: 1000; opacity: .08; transform: rotate(-7deg); }
.rsvp-card .button { border: 2px solid #103d35; border-radius: .2rem; }
.rsvp-card .button--accent { background: var(--accent); }
.site-footer { border-top: 3px solid #103d35; background: var(--accent); color: #103d35; }
.site-footer .brand-mark { border: 2px solid #103d35; border-radius: .2rem; }
.site-footer button { border: 0; background: transparent; color: inherit; font-weight: 800; }

html[data-variant="boy"] .moments-section { background: #78c9d4; }
html[data-variant="girl"] .moments-section { background: #ed9e91; }

@media (min-width: 900px) {
  .hero-inner { align-content: center; justify-items: start; padding-top: 6rem; text-align: left; }
  .hero-inner > *:not(.hero-stamp) { margin-left: 4%; }
  .hero-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .hero-stamp { top: 18%; right: 6%; width: 5rem; font-size: .58rem; }
  .hero-title { margin-top: 7vh; font-size: clamp(5rem, 22vw, 7.8rem); }
  .detail-card:nth-child(n), .moment-card:nth-child(n) { transform: none; }
  .map-layout { box-shadow: .4rem .4rem 0 var(--ink); }
  .map-frame-wrap { border-top: 3px solid var(--ink); border-left: 0; }
  .rsvp-card { box-shadow: .5rem .5rem 0 var(--accent); }
  .safari-mobile { top: 3rem; left: -4rem; width: 8.5rem; opacity: .75; }
  .safari-mobile--right { top: 5rem; right: -3.6rem; left: auto; width: 7.3rem; opacity: .68; }
}

@media (prefers-reduced-motion: reduce) { .safari-mobile { animation: none; } }