:root{
  --paper:#fbf4e6;
  --paper2:#f3e7d4;
  --ink:#1f1f1f;
  --muted: rgba(31,31,31,.68);

  --sage:#8ea79a;
  --sage2:#6f8f80;
  --blush:#d9b2a9;
  --butter:#f2d38a;

  --stroke: rgba(31,31,31,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.10);
  --radius: 18px;

  --sans: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hand: "Patrick Hand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body{
  width: 100%;
  overflow-x: clip;   /* modern */
}

@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; } /* fallback */
}

body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(142,167,154,.22), transparent 60%),
    radial-gradient(900px 520px at 98% 0%, rgba(217,178,169,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 30%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012), rgba(0,0,0,.012) 1px, transparent 1px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.008), rgba(0,0,0,.008) 1px, transparent 1px, transparent 9px),
    var(--paper);
}

/* Accessibility: skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:#000;
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:10px; }

/* Layout */
.wrap{ max-width:980px; margin:0 auto; padding:16px; }
.section{ margin-top:16px; }

.card{
  position: relative;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 18px;
  overflow: hidden;
}

/* “paper sheet” treatment */
.paper{
  background:
    linear-gradient(90deg, rgba(217,178,169,.20) 0 10px, transparent 10px),
    repeating-linear-gradient(0deg,
      rgba(31,31,31,.05) 0px,
      rgba(31,31,31,.05) 1px,
      transparent 1px,
      transparent 26px
    ),
    rgba(255,255,255,.72);
}

/* Torn-ish top edge (ONLY on .paper, not on .paper.card pseudo elements) */
.paper-edge{
  position:absolute;
  left:0; right:0; top:-8px;
  height:16px;
  background:
    radial-gradient(12px 8px at 10px 8px, rgba(31,31,31,.10), transparent 60%),
    radial-gradient(14px 9px at 40px 8px, rgba(31,31,31,.08), transparent 60%),
    radial-gradient(10px 7px at 80px 8px, rgba(31,31,31,.09), transparent 60%),
    radial-gradient(13px 8px at 120px 8px, rgba(31,31,31,.07), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), transparent);
  opacity:.55;
  pointer-events:none;
  z-index:1;
}

/* Tape on top-left of every paper card */
.paper.card{
  overflow: visible; /* allow tape to hang off */
}

/* top-left tape */
.paper.card::before{
  content:"";
  position:absolute;
  top:-30px;
  left:-18px;
  width:130px;
  height:36px;
  background: rgba(255,255,255,.46);
  border:1px solid rgba(0,0,0,.16);
  border-radius:6px;
  transform: rotate(-14deg);
  box-shadow: 0 6px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 8;
}

/* tape texture */
.paper.card::after{
  content:"";
  position:absolute;
  top:-30px;
  left:-18px;
  width:130px;
  height:36px;
  border-radius:6px;
  transform: rotate(-14deg);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.18) 2px,
      transparent 2px,
      transparent 6px
    );
  z-index: 9;
  pointer-events:none;
}

/* bottom-right tape element (add <div class="corner-tape" aria-hidden="true"></div> inside the section) */
.corner-tape{
  position:absolute;
  right:-12px;
  bottom:-20px;
  width:120px;
  height:34px;
  background: rgba(255,255,255,.46);
  border:1px solid rgba(0,0,0,.16);
  border-radius:6px;
  transform: rotate(168deg);
  box-shadow: 0 6px 12px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 8;
  opacity: .95;
}
.corner-tape::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.18) 2px,
      transparent 2px,
      transparent 6px
    );
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(251,244,230,.78);
  border-bottom: 1px solid rgba(31,31,31,.10);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  font-weight: 900;
  letter-spacing:.08em;
}
.brand-title{ font-weight: 900; letter-spacing:.02em; }
.brand-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }

.nav{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.nav a{
  color: var(--ink);
  text-decoration:none;
  font-weight: 900;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 14px;
}
.nav a:hover{ background: rgba(0,0,0,.06); }

.nav-cta{
  border:2px solid rgba(31,31,31,.45);
  background: rgba(242,211,138,.28);
}
.nav-cta:hover{
  background: rgba(242,211,138,.42);
}

/* Typography */
.hand{ font-family: var(--hand); }
.big{ font-size: clamp(42px, 6vw, 64px); margin: 6px 0 4px; line-height: 1; }
.lead{ font-size: 24px; margin: 6px 0 12px; color: rgba(18,18,18,.90); }
.body{ font-size: 16px; line-height: 1.7; color: rgba(18,18,18,.86); margin: 10px 0; }
.muted{ color: var(--muted); }
.small{ font-size: 26px; margin: 0 0 8px; }
.note{ font-size: 22px; margin-top: 12px; }

/* Hero top */
.hero{ position: relative; }
.paper-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.mini-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  font-family: var(--hand);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,31,31,.22);
  background: rgba(255,255,255,.78);
  transform: rotate(-.6deg);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.tag:nth-child(2){ transform: rotate(.8deg); background: rgba(142,167,154,.16); }
.tag:nth-child(3){ transform: rotate(-.2deg); background: rgba(217,178,169,.14); }

.paper-corner{
  width: 46px; height: 46px;
  border-top: 2px solid rgba(31,31,31,.25);
  border-right: 2px solid rgba(31,31,31,.25);
  border-top-right-radius: 14px;
  transform: rotate(2deg);
  opacity:.55;
}

/* Divider with doodle line */
.divider{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,31,31,.35), transparent);
  margin: 14px 0;
  position: relative;
}
.divider::after{
  content:"";
  width: 62px;
  height: 18px;
  position:absolute;
  left:50%;
  top:-10px;
  transform: translateX(-50%) rotate(-1deg);
  background: rgba(251,244,230,.92);
  border-radius: 999px;
  border: 1px solid rgba(31,31,31,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M10 15c10-10 20 10 30 0s20 10 30 0 20 10 40 0' fill='none' stroke='%236f8f80' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 90% 70%;
}

/* Map */
.map-frame{
  border: 2px solid rgba(31,31,31,.35);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.75);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  margin: 10px 0 12px;
}
.map-frame iframe{
  width:100%;
  height: 210px;
  border:0;
  display:block;
  filter: saturate(.92) contrast(.98);
}

/* Sticky note “pills” */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.pill{
  position: relative;
  border: 1px solid rgba(31,31,31,.18);
  border-radius: 14px;
  padding: 14px 12px 12px;
  background: rgba(242,211,138,.28);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  transform: rotate(-.6deg);
}
.pill:nth-child(2){ background: rgba(142,167,154,.22); transform: rotate(.5deg); }
.pill:nth-child(3){ background: rgba(217,178,169,.22); transform: rotate(-.2deg); }

/* little tape strip on each sticky */
.pill::before{
  content:"";
  position:absolute;
  top: -10px;
  left: 18px;
  width: 56px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,31,31,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  transform: rotate(-2deg);
}
.pill::after{
  content:"";
  position:absolute;
  right: 10px;
  top: 10px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.35);
  border-left: 1px solid rgba(31,31,31,.12);
  border-bottom: 1px solid rgba(31,31,31,.12);
  transform: rotate(45deg);
  border-bottom-left-radius: 4px;
  opacity:.8;
}

/* Buttons */
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border: 2px solid rgba(31,31,31,.55);
  border-radius: 16px;
  padding: 12px 14px;
  text-decoration:none;
  font-weight: 900;
  color: var(--ink);
  background: rgba(255,255,255,.82);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
}
.btn:focus{ outline: 3px solid rgba(0,0,0,.35); outline-offset: 2px; }
.btn.ghost{ background: transparent; border-style:dashed; }
.btn.ghost:hover{ background:#000; color:#fff; }

/* Section layouts */
.two-col{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  align-items:start;
  margin-top: 10px;
}
.three-col{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

/* Boxes */
.box{
  border: 1px solid rgba(31,31,31,.18);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}

/* box washi strip */
.box::before{
  content:"";
  position:absolute;
  top: -10px;
  left: 18px;
  width: 78px;
  height: 24px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.55) 0 6px,
      rgba(255,255,255,.35) 6px 12px
    );
  border: 1px solid rgba(31,31,31,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  transform: rotate(-2deg);
  opacity: .9;
}

/* subtle corner doodle on boxes */
.box::after{
  content:"";
  position:absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  opacity: .35;
  background-repeat:no-repeat;
  background-size:contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M36 10c-4 7-1 14 6 18-7 1-13 6-14 13-3-7-10-10-18-6 5-6 7-13 2-20 7 4 14 2 19-5 0 8 5 12 13 10-6 4-8 9-8 15 6-4 11-4 17 1-8 1-12 5-12 13-3-7-8-10-16-9' fill='none' stroke='%236f8f80' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.note-card{
  border: 1px solid rgba(31,31,31,.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(242,211,138,.20);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transform: rotate(-.4deg);
}
.note-card:nth-child(2){ background: rgba(142,167,154,.18); transform: rotate(.35deg); }
.note-card:nth-child(3){ background: rgba(217,178,169,.18); transform: rotate(-.2deg); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.chip{
  border: 1px solid rgba(31,31,31,.20);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(142,167,154,.14);
  font-size: 13px;
  font-weight: 900;
}

.bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}
.link{ color: var(--ink); font-weight: 900; }
.link:hover{ text-decoration: underline; }

/* Timeline – scrapbook trail */
.timeline{
  list-style:none;
  padding: 0 0 0 32px;
  margin: 18px 0 0;
  position: relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 3px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.25),
      rgba(0,0,0,.25) 6px,
      transparent 6px,
      transparent 14px
    );
  border-radius: 2px;
  opacity: .35;
}
.timeline-item{
  position: relative;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 16px 16px 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items:start;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left: -34px;
  top: 22px;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border: 3px solid rgba(0,0,0,.45);
  border-radius: 50%;
}
.timeline-item::after{
  content:"";
  position:absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  opacity: .25;
  background: url("images/hearts.png") center/contain no-repeat;
}
.time{
  font-weight: 900;
  border: 2px solid rgba(0,0,0,.45);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.95);
  text-align:center;
  box-shadow: 0 8px 14px rgba(0,0,0,.08);
}
.event-title{ font-weight: 900; }
.event-desc{ color: var(--muted); margin-top: 4px; line-height:1.6; }

.timeline-note{
  font-family: var(--hand);
  font-size: 22px;
  margin-top: 18px;
  text-align: center;
  opacity: .85;
}

/* RSVP */
.rsvp-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 12px;
  margin-top: 10px;
}
.field{ margin-top: 10px; }

label{
  display:block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(18,18,18,.74);
}

input, select, textarea{
  width:100%;
  border: 2px solid rgba(31,31,31,.55);
  border-radius: 16px;
  padding: 12px 12px;
  font: 600 16px/1.2 var(--sans);
  background: rgba(255,255,255,.90);
}
textarea{ min-height: 120px; resize: vertical; }

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.row3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.hp{ display:none; }

.fine{
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

.status{
  display:none;
  margin-top: 10px;
  border: 2px dashed rgba(31,31,31,.45);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(255,255,255,.86);
  font-family: var(--hand);
  font-size: 22px;
}

/* FAQ */
.faq{
  border: 2px solid rgba(31,31,31,.45);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.86);
  margin-top: 10px;
}
.faq summary{ cursor:pointer; font-weight: 900; }
.faq p{ margin: 10px 0 0; }

/* Footer */
.footer{
  text-align:center;
  margin: 18px 0 30px;
}

/* Signoff */
.signoff{
  text-align:right;
  font-size: 26px;
  margin: 14px 0 0;
}
.maxline{
  display:inline-flex;
  align-items:flex-end;
  gap: 10px;
}
.doodle-paws{
  width: 52px;
  opacity: .85;
  transform: rotate(-8deg) translateY(6px);
}

/* ---- doodles (ALWAYS absolute, never layout) ---- */
.doodle{
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* ===============================
   HERO RINGS – TOP RIGHT
   =============================== */

.doodle-rings{
  position: absolute;
  top: 10px;          /* move UP */
  right: 18px;        /* hug the corner */
  width: 140px;
  opacity: .30;
  transform: rotate(-8deg);
  z-index: 1;         /* behind tape, above paper */
  pointer-events: none;
}

.doodle-divider{
  display:flex;
  justify-content:center;
  margin: 18px 0 6px;
}
.doodle-divider img{
  width: 140px;
  opacity: .45;
  transform: rotate(-2deg);
}

/* floral heart decoration */
/* floral heart decoration (safe positioning) */
.doodle-floral{
  position:absolute;
  top: 10px;
  left: 10px;          /* ✅ safe on mobile */
  width: 130px;
  opacity: .35;
  transform: rotate(2deg);
}

/* On desktop, pin it to the right instead of using a huge left value */
@media (min-width: 900px){
  .doodle-floral{
    left: auto;
    right: 10px;
  }
}

/* Responsive */
@media (max-width: 920px){
  .grid-3{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .three-col{ grid-template-columns: 1fr; }
  .rsvp-grid{ grid-template-columns: 1fr; }
  .timeline-item{ grid-template-columns: 1fr; }
  .time{ text-align:left; }
}

@media (max-width: 540px){
  .doodle-rings{
    top: 86px;
    right: auto;
    left: 50%;
    width: 190px;
    transform: translateX(-50%) rotate(-3deg);
    opacity: .20;
  }

  .doodle-divider img{
    width: 170px;
    opacity: .45;
  }

  .doodle-floral{
    width: 110px;
    opacity: .28;
  }

  .paper.card::before,
  .paper.card::after{
    width: 100px;
    height: 28px;
    top: -24px;
    left: -14px;
  }

  .corner-tape{
    width: 90px;
    height: 28px;
    right: -6px;
    bottom: -12px;
  }
}

@media (max-width: 420px){
  .nav{ gap:6px; }
  .nav a{ padding: 7px 8px; }
  .tag{ font-size: 16px; }
}
/* ===============================
   FINAL POLISH OVERRIDES
   =============================== */

/* --- GLOBAL SPACING --- */
.section{
  margin-top: 32px; /* more space between big sections */
}

.paper.card{
  margin-bottom: 24px; /* space between stacked cards */
}

/* increase space between internal cards */
.two-col,
.three-col,
.rsvp-grid{
  gap: 18px;
}

/* ===============================
   TAPE (FIXED + NON-SHIFTING)
   =============================== */

/* remove any previous tape conflicts */
.paper.card::before,
.paper.card::after{
  pointer-events: none;
}

/* TOP-LEFT TAPE */
.paper.card::before{
  content:"";
  position:absolute;
  top:-28px;
  left:-18px;
  width:140px;
  height:38px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.35),
      rgba(255,255,255,.35) 6px,
      rgba(255,255,255,.18) 6px,
      rgba(255,255,255,.18) 12px
    );
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  transform: rotate(-14deg);
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 6;
}

/* BOTTOM-RIGHT TAPE (uses real element) */
.corner-tape{
  position:absolute;
  right:-16px;
  bottom:-22px;
  width:130px;
  height:36px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.35),
      rgba(255,255,255,.35) 6px,
      rgba(255,255,255,.18) 6px,
      rgba(255,255,255,.18) 12px
    );
  border:1px solid rgba(0,0,0,.18);
  border-radius:6px;
  transform: rotate(168deg);
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 6;
  opacity:.95;
}

/* ===============================
   DOODLES (SAFE OVERLAY)
   =============================== */

.doodle{
  position:absolute;
  pointer-events:none;
  user-select:none;
  display:block;
  z-index:2;
}

/* rings – NEVER affect layout */
.doodle-rings{
  top: 22px;
  right: 26px;
  width: 150px;
  opacity: .28;
  transform: rotate(-6deg);
}

/* paws near Max */
.doodle-paws{
  width: 90px;
  margin-left: 10px;
  transform: rotate(-8deg) translateY(6px);
  opacity: .85;
}

/* ===============================
   TIMELINE – MORE PERSONALITY
   =============================== */

.timeline{
  margin-top: 24px;
}

.timeline-item{
  margin-bottom: 26px; /* more air */
  padding: 18px;
  border-radius: 20px;
}

/* stagger the timeline slightly */
.timeline-item:nth-child(2){
  transform: translateX(6px) rotate(.3deg);
}
.timeline-item:nth-child(3){
  transform: translateX(-6px) rotate(-.3deg);
}

/* ===============================
   MOBILE FIXES
   =============================== */

@media (max-width: 600px){

  /* REMOVE the weird floating strip you circled */
  .paper::after{
    display:none;
  }

  /* simplify tape on mobile */
  .paper.card::before{
    width:90px;
    height:26px;
    top:-16px;
    left:-8px;
  }

  .corner-tape{
    width:90px;
    height:26px;
    right:-8px;
    bottom:-12px;
  }

  /* center rings on mobile */
  .doodle-rings{
    top: 88px;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 170px;
    opacity: .22;
  }

  /* more vertical breathing room */
  .section{
    margin-top: 28px;
  }
}

/* ===============================
   HANDCRAFTED TIMELINE (COLOUR)
   =============================== */

#timeline .timeline{
  padding-left: 42px;
  margin-top: 18px;
}

/* stitched “thread” line */
#timeline .timeline::before{
  left: 16px;
  width: 4px;
  opacity: 1;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(111,143,128,.55) 0 7px,
      transparent 7px 16px
    );
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}

/* little “knot” dots */
#timeline .timeline-item::before{
  left: -38px;
  top: 26px;
  width: 14px;
  height: 14px;
  border: 3px solid rgba(111,143,128,.75);
  background: rgba(251,244,230,.95);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
}

/* the cards themselves */
#timeline .timeline-item{
  border-radius: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 18px 34px rgba(0,0,0,.10);
  overflow: hidden;
  position: relative;
}

/* soft colour “paper wash” behind each item */
#timeline .timeline-item:nth-child(1){
  background:
    linear-gradient(0deg, rgba(242,211,138,.24), rgba(242,211,138,.24)),
    rgba(255,255,255,.86);
}
#timeline .timeline-item:nth-child(2){
  background:
    linear-gradient(0deg, rgba(142,167,154,.20), rgba(142,167,154,.20)),
    rgba(255,255,255,.86);
}
#timeline .timeline-item:nth-child(3){
  background:
    linear-gradient(0deg, rgba(217,178,169,.20), rgba(217,178,169,.20)),
    rgba(255,255,255,.86);
}

/* tiny washi tape strip inside the card */
#timeline .timeline-item::after{
  content:"";
  position:absolute;
  top: 10px;
  right: 14px;
  width: 54px;
  height: 18px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.55) 0 6px,
      rgba(255,255,255,.28) 6px 12px
    );
  border: 1px solid rgba(0,0,0,.10);
  opacity: .95;
  transform: rotate(6deg);
}

/* time becomes a “label sticker” */
#timeline .time{
  border-radius: 16px;
  border: 2px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
}

/* little coloured edge on time sticker */
#timeline .timeline-item:nth-child(1) .time{
  box-shadow: 0 10px 18px rgba(0,0,0,.10), inset 6px 0 0 rgba(242,211,138,.75);
}
#timeline .timeline-item:nth-child(2) .time{
  box-shadow: 0 10px 18px rgba(0,0,0,.10), inset 6px 0 0 rgba(142,167,154,.65);
}
#timeline .timeline-item:nth-child(3) .time{
  box-shadow: 0 10px 18px rgba(0,0,0,.10), inset 6px 0 0 rgba(217,178,169,.65);
}

/* give titles a little more “handmade” */
#timeline .event-title{
  font-family: var(--hand);
  font-size: 24px;
  letter-spacing: .2px;
}

/* subtle doodle hearts in the bottom corner (soft) */
#timeline .timeline-item .event{
  position: relative;
}
#timeline .timeline-item .event::after{
  content:"";
  position:absolute;
  right: 6px;
  bottom: -6px;
  width: 34px;
  height: 22px;
  opacity: .25;
  background: url("images/hearts.png") center/contain no-repeat;
  transform: rotate(-6deg);
}

/* MOBILE: keep it cute + readable */
@media (max-width: 600px){
  #timeline .timeline{
    padding-left: 28px;
  }
  #timeline .timeline::before{
    left: 10px;
  }
  #timeline .timeline-item::before{
    left: -28px;
  }
  #timeline .timeline-item{
    padding: 16px;
  }
  #timeline .time{
    text-align:left;
  }
}
#timeline .timeline-item:nth-child(1){ transform: rotate(-.4deg); }
#timeline .timeline-item:nth-child(2){ transform: rotate(.35deg) translateX(6px); }
#timeline .timeline-item:nth-child(3){ transform: rotate(-.3deg) translateX(-4px); }

/* ===============================
   REMOVE NOTEBOOK MARGIN LINE ON MOBILE
   =============================== */
@media (max-width: 600px){

  /* remove left notebook margin strip */
  .paper{
    background:
      /* REMOVE margin stripe */
      repeating-linear-gradient(0deg,
        rgba(31,31,31,.05) 0px,
        rgba(31,31,31,.05) 1px,
        transparent 1px,
        transparent 26px
      ),
      rgba(255,255,255,.72);
  }

  /* kill any guide/corner lines */
  .paper-corner,
  .paper::after{
    display: none !important;
  }
}

/* ===============================
   MOBILE HEADER CLEANUP
   =============================== */
@media (max-width: 720px){

  .site-header{
    padding: 6px 0;
  }

  .header-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .brand{
    gap: 8px;
  }

  .brand-mark{
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .brand-title{
    font-size: 15px;
  }

  .brand-sub{
    font-size: 11px;
  }

  .nav{
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .nav a{
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 12px;
  }

  .nav-cta{
    padding: 6px 10px;
    border-width: 1.5px;
    background: rgba(242,211,138,.35);
  }
}

@media (max-width: 720px){
  .site-header{
    backdrop-filter: blur(6px);
    background: rgba(251,244,230,.88);
  }
}

@media (max-width: 600px){
  .doodle-rings{
    top: 45px;
    right: 10px;
    width: 120px;
    opacity: .22;
  }
}

/* =========================
   Envelope Intro (Doodle Style)
   Matches your invite: paper + hand-drawn vibe
   ========================= */

.intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;

  /* same warm paper-y feel as your invite */
  background:
    radial-gradient(1200px 700px at 25% 15%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(900px 650px at 80% 25%, rgba(0,0,0,.04), transparent 65%),
    linear-gradient(180deg, #f7f7f3, #f0ebe3);
}

.intro[hidden]{ display:none; }

.intro-inner{
  width: min(820px, 100%);
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
}

.intro-skip{
  justify-self: end;
  border: 2px solid rgba(0,0,0,.65);
  background: rgba(255,255,255,.72);
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  font-family: "Nunito", system-ui, sans-serif;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  transform: rotate(-.6deg);
}

.intro-hint{
  margin: 0;
  font-size: 13px;
  opacity: .72;
}

/* button wrapper */
.envelopeBtn{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: min(560px, 100%);
  -webkit-tap-highlight-color: transparent;
}

/* envelope stage */
.envelope{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  transform: translateZ(0);
}

/* Handmade envelope base: thicker, doodle-y outline */
.env-base{
  position: absolute;
  inset: 14% 8% 10% 8%;
  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(600px 200px at 50% -20%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #edd2b7, #e2be9f);

  border: 3px solid rgba(0,0,0,.68);
  box-shadow: 0 20px 55px rgba(0,0,0,.18);

  /* subtle paper grain */
  background-image:
    radial-gradient(600px 200px at 50% -20%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #edd2b7, #e2be9f),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px);
}

/* “sketchy” inner stroke to feel hand-drawn */
.env-base::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 16px;
  border: 2px dashed rgba(0,0,0,.30);
  pointer-events:none;
  opacity:.55;
}

/* bottom triangle */
.env-bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  height:66%;
  clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, rgba(0,0,0,.10), transparent 45%) left/52% 100% no-repeat,
    linear-gradient(225deg, rgba(255,255,255,.20), transparent 45%) right/52% 100% no-repeat;
  border-top: 3px solid rgba(0,0,0,.18);
}

/* side flaps */
.env-left, .env-right{
  position:absolute;
  top:0; bottom:0;
  width:52%;
}
.env-left{
  left:0;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06));
  border-right: 3px solid rgba(0,0,0,.14);
}
.env-right{
  right:0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%, 100% 0);
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(255,255,255,.12));
  border-left: 3px solid rgba(0,0,0,.14);
}

/* top flap with “paper fold” + doodle outline */
.env-flap{
  position:absolute;
  left:0; right:0;
  top:-2%;
  height:64%;

  clip-path: polygon(0 0, 50% 80%, 100% 0);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform .75s cubic-bezier(.2,.9,.2,1);

  background:
    radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,.22), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));

  border-bottom: 3px solid rgba(0,0,0,.20);
  z-index: 6;
}

/* wax seal: looks drawn + uses Patrick Hand */
.seal{
  position:absolute;
  left:50%;
  top:56%;
  transform: translate(-50%,-50%) rotate(-1.2deg);
  width:74px;
  height:74px;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 45%),
    linear-gradient(180deg, #c06b4b, #9e4f35);

  border: 3px solid rgba(0,0,0,.70);
  display:grid;
  place-items:center;
  box-shadow: 0 14px 22px rgba(0,0,0,.18);
  transition: transform .35s ease, opacity .35s ease;
  z-index: 7;
}
.seal .hand{
  color: rgba(255,255,255,.92);
  font-size: 24px;
  font-weight: 800;
  letter-spacing:.04em;
  line-height: 1;
}
.seal-doodle{
  position:absolute;
  width: 54px;
  height: auto;
  opacity: .22;
  filter: contrast(1.05);
}

/* letter = your “paper card” vibe */
.letter{
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: 12%;
  height: 74%;
  border-radius: 18px;
  overflow: hidden;

  background:
    radial-gradient(900px 260px at 50% -10%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #fffdf9, #fff);

  border: 3px solid rgba(0,0,0,.70);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);

  transform: translateY(18%) scale(.98) rotate(.3deg);
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .5s ease;
  z-index: 5;
}

/* torn-tape-ish corner detail */
.letter::before{
  content:"";
  position:absolute;
  top:10px; right:10px;
  width: 70px; height: 20px;
  background: rgba(0,0,0,.06);
  transform: rotate(8deg);
  border-radius: 6px;
  opacity: .55;
}

/* letter content uses your fonts */
.letterInner{
  height:100%;
  padding: clamp(16px, 3vw, 26px);
  display:grid;
  gap: 10px;
  align-content:start;
  text-align:left;
}

/* use your existing .hand + .body classes on the inside */
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(0,0,0,.72);
  background: rgba(0,0,0,.06);
  border: 2px solid rgba(0,0,0,.30);
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  transform: rotate(-.4deg);
}
.tag i{
  width:10px;height:10px;border-radius:999px;
  background: rgba(0,0,0,.75);
  display:inline-block;
}

.ctaRow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pillTiny{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.55);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 800;
  font-family: "Nunito", system-ui, sans-serif;
  transform: rotate(.2deg);
}
.btnTiny{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  border: 2px solid rgba(0,0,0,.70);
  background: rgba(255,255,255,.80);
  font-family: "Nunito", system-ui, sans-serif;
}
.btnTiny.primary{
  background: linear-gradient(180deg, #c06b4b, #9e4f35);
  color: rgba(255,255,255,.95);
}

/* doodles placed on envelope */
.intro-doodle{
  position:absolute;
  height:auto;
  pointer-events:none;
  opacity:.9;
  filter: contrast(1.05);
  z-index: 8;
}
.intro-floral{
  width: 130px;
  right: -22px;
  top: -18px;
  transform: rotate(10deg);
  opacity:.85;
}
.intro-rings{
  width: 90px;
  left: -16px;
  bottom: -10px;
  transform: rotate(-8deg);
  opacity:.85;
}

/* OPEN STATE */
.envelope.open .env-flap{ transform: rotateX(165deg); }
.envelope.open .seal{ opacity: .12; transform: translate(-50%,-50%) scale(.92) rotate(-1.2deg); }
.envelope.open .letter{ transform: translateY(-9%) scale(1) rotate(0deg); opacity: 1; }

/* subtle doodle wobble */
.envelope.wiggle{ animation: wiggle 3.0s ease-in-out infinite; }
@keyframes wiggle{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  45%{ transform: translateY(-2px) rotate(-.35deg); }
  55%{ transform: translateY(-2px) rotate(.35deg); }
}

@media (prefers-reduced-motion: reduce){
  .env-flap, .letter, .seal, .envelope.wiggle{ transition:none !important; animation:none !important; }
}


/* Ensure form + button sit above decorative layers */
.box,
form,
#rsvpForm,
.btn,
.status {
  position: relative;
  z-index: 5;
}