:root {
  --paper: #fff8f8;
  --ink: #141414;
  --red: #c8281e;
  --red-bright: #e0393e;
  --pink: #f6cfcf;
  --muted: #5b5552;
  --hand: "Mynerve", "Comic Sans MS", cursive;
  --body: "Playpen Sans", system-ui, sans-serif;
  --wobble: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --maxw: 960px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); }

h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0; }

h2 {
  font-family: var(--hand);
  color: var(--red);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  text-align: center;
  margin-bottom: 1rem;
}

h3 { font-weight: 700; font-size: 1.2rem; margin-bottom: .4rem; }

/* hand-drawn frame */
.frame {
  border: 3px solid var(--ink);
  border-radius: var(--wobble);
  background: #fff;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}

.brand {
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand svg { display: block; height: 2.1rem; width: auto; }

.nav {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  justify-content: safe center;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
  padding: .2rem 0;
}
.nav a:hover, .nav a.active {
  color: var(--red);
  text-decoration: underline wavy var(--red) 1px;
  text-underline-offset: 5px;
}

.lang {
  flex: none;
  font: 600 .85rem var(--body);
  color: var(--ink);
  background: var(--pink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .2rem .7rem;
  cursor: pointer;
}

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1rem 1rem;
  text-align: center;
}

.kicker {
  font-family: var(--hand);
  color: var(--red);
  font-size: 1.3rem;
  margin: 0 0 .25rem;
}

.names {
  font-family: var(--hand);
  color: var(--red);
  font-size: clamp(2.8rem, 10vw, 5.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .35em;
}
.names .amp { color: var(--ink); }

.sub {
  font-family: var(--hand);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  margin: .25rem 0 1.5rem;
}
.sub .baby {
  display: block;
  color: var(--red);
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.15;
  margin-top: .15rem;
}

.patmos {
  width: 100%;
  mix-blend-mode: multiply;
  margin: 0 auto;
}

.calendar { margin: 1.5rem auto .5rem; max-width: 560px; }
.cal-month {
  font-weight: 600;
  letter-spacing: .15em;
  margin: 0 0 .5rem;
}
.cal-days {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}
.cal-days li {
  display: grid;
  justify-items: center;
  gap: .3rem;
}
.cal-days b { font-weight: 400; font-size: .7em; color: var(--muted); }
.cal-days .soft, .cal-days .mark {
  position: relative;
}
.cal-days .soft::after, .cal-days .mark::after {
  content: "";
  position: absolute;
  bottom: -.15em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: -1;
}
.cal-days .soft::after { border: 2px dashed var(--red); }
.cal-days .mark::after { background: var(--pink); }
.cal-days .mark { color: var(--red); font-weight: 700; }

.date-line {
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--red);
  margin: 1.5rem 0 1rem;
}
.date-line span:first-child { color: var(--ink); font-weight: 400; margin: 0 .3em; }

.countdown {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin: 0 0 1.75rem;
}
.countdown div {
  border: 2px solid var(--ink);
  border-radius: var(--wobble);
  min-width: 4.2rem;
  padding: .4rem .5rem;
  background: #fff;
}
.countdown strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.countdown span { font-size: .8rem; color: var(--muted); }

.btn {
  display: inline-block;
  font: 700 1.05rem var(--body);
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: var(--wobble);
  padding: .65rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:disabled { opacity: .6; cursor: wait; }

/* red dotted path between sections (Map of us) */
.trail {
  height: 90px;
  max-width: 220px;
  margin: 1rem auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cpath d='M20 5 C 120 5, 40 60, 140 55 S 210 85, 200 88' fill='none' stroke='%23e0393e' stroke-width='5' stroke-linecap='round' stroke-dasharray='0 13'/%3E%3C/svg%3E") center / contain no-repeat;
}
.trail:nth-of-type(even) { transform: scaleX(-1); }

/* ---------- sections ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.eyebrow {
  text-align: center;
  font-weight: 600;
  letter-spacing: .05em;
  margin: 0 0 .2rem;
  color: var(--muted);
}

.lead {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.map { padding: .75rem; overflow: hidden; }
.map img { mix-blend-mode: multiply; }

.card { padding: 1.25rem 1.4rem; }
.card p { margin: .35rem 0; }
.time { color: var(--red); font-weight: 600; }
.link { display: inline-block; margin-top: .4rem; font-weight: 600; }

#welcome .card { max-width: 560px; margin: 0 auto; text-align: center; }

.knot {
  width: min(100%, 640px);
  margin: 0 auto 1.5rem;
  mix-blend-mode: multiply;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  display: grid;
  gap: 2.5rem;
  position: relative;
}
.timeline li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.4rem;
  height: 2.3rem;
  border-left: 5px dotted var(--red-bright);
}
.timeline li { position: relative; text-align: center; }

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- RSVP ---------- */
.rsvp {
  max-width: 600px;
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}
.rsvp label { display: grid; gap: .3rem; font-weight: 600; }
.rsvp input:not([type=radio]):not([type=checkbox]), .rsvp textarea {
  font: 400 1rem var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px 4px 12px 5px;
  padding: .55rem .7rem;
  width: 100%;
}
.rsvp input:focus, .rsvp textarea:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
.rsvp fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .35rem; }
.rsvp legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.rsvp .choice { display: flex; align-items: center; gap: .55rem; font-weight: 400; cursor: pointer; }
.rsvp .choice input { accent-color: var(--red); width: 1.15rem; height: 1.15rem; margin: 0; }
.rsvp .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rsvp .if-yes { display: grid; gap: 1rem; }
.rsvp .if-yes[hidden] { display: none; }
.rsvp .btn { justify-self: center; margin-top: .5rem; }
.rsvp .invalid { border-color: var(--red) !important; background: #fff0f0 !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { text-align: center; margin: 0; min-height: 1.6em; font-weight: 600; }
.form-msg.ok { color: var(--red); font-family: var(--hand); font-size: 1.5rem; font-weight: 400; }
.form-msg.err { color: var(--red); }

/* ---------- FAQ ---------- */
.faq { max-width: 680px; margin: 0 auto; display: grid; gap: 1rem; }
.faq details { padding: .9rem 1.25rem; }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 1.5rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; color: var(--red); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: .6rem 0 0; }

/* ---------- footer ---------- */
.footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  margin-top: 2rem;
  border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}
.footer p { margin: .2rem 0; }
.names-sm { font-family: var(--hand); color: var(--red); font-size: 1.6rem; }

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .topbar { padding: .5rem .75rem; gap: .5rem; }
  .nav { gap: .8rem; justify-content: flex-start; }
  .countdown { gap: .4rem; }
  .countdown div { min-width: 0; flex: 1; max-width: 4.5rem; }
  .countdown strong { font-size: 1.3rem; }
  .card { padding: 1.1rem; }
  .rsvp { padding: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}