@font-face {
  font-family: 'Arapey';
  src: url('/fonts/arapey-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Arapey';
  src: url('/fonts/arapey-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Lauren's palette */
  --cream: #f8f4f1;
  --blue: #86a9b2;        /* artwork, borders, decoration */
  --stone: #e1ddd9;
  /* Deeper shades of the same blue, so small text is readable on a phone */
  --ink: #4f737d;         /* text on cream */
  --band: #537983;        /* details section background */
  --on-band: #fbf9f7;     /* text on the details section */
  --table: #ede7e2;       /* page background around the invite on bigger screens */
  --serif: 'Arapey', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font: 400 18px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased;
}

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

.caps {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* The whole guest page is one column, like the printed card */
/* On phones the page is edge to edge: the flowers run up behind the clock and battery,
   and over-scrolling shows cream at the top and blue at the bottom. */
@media (max-width: 540px) {
  html:has(body.guest-body) { background: linear-gradient(var(--cream) 50%, var(--band) 50%); }
  body.guest-body { background: transparent; }
  .guest-body .page { box-shadow: none; }
}
.page-foot { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
.blue > .band:last-child { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

.page {
  max-width: 540px;
  margin: 0 auto;
  background: var(--cream);
  min-height: 100vh;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(79 115 125 / 6%), 0 20px 60px rgb(79 115 125 / 10%);
}

/* ---------- Opening page ---------- */

.opener { position: relative; padding-bottom: 0; }

.opener-top { position: relative; isolation: isolate; }
.big-o { position: absolute; z-index: 1; top: 0; left: -3%; width: 34%; }
.flowers { display: block; width: 100%; position: relative; pointer-events: none; }
.flowers--top { z-index: 2; }

.names { width: 58%; margin: 3% auto 0; }

.date-line {
  margin: 4% 7% 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  line-height: 1.6;
  text-wrap: balance;
}
.date-line .part { white-space: nowrap; }
@media (max-width: 520px) {
  .date-line .part { display: block; }
  .date-line .dash { display: none; }
}
.date-line sup { font-size: 0.62em; letter-spacing: 0.05em; vertical-align: 0.55em; line-height: 0; }

.opener-bottom { position: relative; isolation: isolate; margin-top: 3%; }
.flowers--bottom {
  z-index: 1;
  /* the artwork is cut off flat at the bottom; fade it out so there's no hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* Nudge the L down so its flat base (row 1073 of 1116 in l.webp) sits exactly on the cream-to-blue line */
.big-l { position: absolute; z-index: 2; right: -1.5%; bottom: 0; width: 27%; transform: translateY(3.85%); }

/* ---------- RSVP ---------- */

.rsvp {
  padding: 8px 7% 44px;
  text-align: center;
}

.dear {
  margin: 22px 0 6px;
  font-style: italic;
  font-size: 27px;
  line-height: 1.2;
  text-wrap: balance;
}
.kindly { width: 62%; margin: 8px auto 6px; }
.reply-by { font-size: 14px; margin: 0 0 22px; }

.notice {
  background: #fff;
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: 14px 18px;
  margin: 0 0 22px;
  font-size: 17px;
}
.notice--error { border-color: #c98b8b; color: #8e3b3b; }

form { text-align: left; }

.guest {
  border: 0;
  border-top: 1px solid var(--stone);
  margin: 0;
  padding: 18px 0 20px;
}
.guest:last-of-type { border-bottom: 1px solid var(--stone); }
.guest legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 18px;
  text-align: center;
}
.guest.missing legend::after {
  content: 'Please choose one';
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #8e3b3b;
}

.choices { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; z-index: 1; opacity: 0; margin: 0; cursor: pointer; }
/* Buttons look raised, press in under your finger, and stay pressed in (and dimmed) once chosen */
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 54px;
  padding: 8px 24px;
  border: 1px solid var(--blue);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 3px 0 #c3d2d6, 0 5px 12px rgb(79 115 125 / 10%);
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.choice:active span {
  transform: translateY(3px);
  box-shadow: 0 0 0 #c3d2d6, inset 0 2px 5px rgb(0 0 0 / 14%);
}
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.choice input:checked + span {
  transform: translateY(3px);
  box-shadow: 0 0 0 transparent, inset 0 2px 7px rgb(0 0 0 / 24%);
}
.choice.yes input:checked + span { background: #45666f; border-color: #3d5c64; color: rgb(248 244 241 / 88%); }
.choice.no input:checked + span { background: #d9d3cd; border-color: #c4bdb6; color: rgb(79 115 125 / 85%); }
.choice input:checked + span::before {
  content: '✓';
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
}
.choice input:disabled + span { opacity: 0.75; cursor: default; }
.guest.missing .choice span { border-color: #c98b8b; }

/* Each person's dietary box. Without the page script everything simply shows. */
.diet { margin-top: 12px; }
.diet[hidden] { display: none; }
.diet-label { display: block; margin-bottom: 6px; font-size: 15px; }
.diet-toggle {
  display: none;
  background: none; border: 0; padding: 6px 0; margin: 0 auto;
  font: italic 400 16px var(--serif); color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.js .diet-toggle { display: block; }
.js .diet .diet-label, .js .diet textarea { display: none; }
.js .diet.is-open .diet-toggle { display: none; }
.js .diet.is-open .diet-label, .js .diet.is-open textarea { display: block; }
.diet-note { display: block; text-transform: none; letter-spacing: 0; font-size: 14px; font-style: italic; opacity: 0.85; margin-top: 2px; }
.edit-diet { margin-top: 8px; }

textarea, input:not([type]), input[type=text] {
  width: 100%;
  font: 400 17px/1.45 var(--serif);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 2px;
  padding: 10px 12px;
}
textarea:focus, input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
::placeholder { color: #8fa3a8; }

.btn {
  display: inline-block;
  font: 400 15px/1 var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--cream);
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  padding: 19px 24px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn {
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 3px 0 #3a5860;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.15s;
}
.btn:hover { background: #4a6c75; }
.btn:active, .btn.is-sending {
  transform: translateY(3px);
  box-shadow: 0 0 0 #3a5860, inset 0 2px 6px rgb(0 0 0 / 28%);
}
.btn.is-sending { background: #45666f; color: rgb(248 244 241 / 85%); pointer-events: none; }
form > .btn { width: 100%; margin-top: 26px; }

.love { width: 80%; margin: 36px auto 0; }

/* ---------- Thank you ---------- */

.thanks .eyebrow { font-size: 14px; margin: 6px 0 4px; }
.headline {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 24px;
  text-wrap: balance;
}
.summary { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.summary li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--stone);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 16px;
}
.summary li:first-child { border-top: 1px solid var(--stone); }
.small { font-size: 16px; }
.text-link { color: var(--ink); text-underline-offset: 3px; }

.pill {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 10px; border-radius: 99px;
}
.pill--yes { background: var(--ink); color: var(--cream); }
.pill--no { background: var(--stone); color: var(--ink); }
.pill--wait { border: 1px dashed var(--blue); color: var(--blue); }

/* ---------- Blue sections: the day and the details ---------- */

.blue {
  position: relative;
  isolation: isolate;
  background: var(--band);
  color: var(--on-band);
}
.band { padding: 34px 8% 60px; }
.band + .band { padding-top: 12px; }
.d-o, .d-l { position: absolute; z-index: -1; opacity: 0.14; pointer-events: none; }
.d-o { top: 28px; left: 6%; width: 46%; }
.d-l { bottom: 34px; right: 7%; width: 34%; }
.band-title { margin: 0 0 18px auto; }

.day-title { width: 66%; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li {
  position: relative;
  padding: 10px 0 10px 46px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
  line-height: 1.35;
}
.timeline .bloom { position: absolute; z-index: 1; left: 0; top: 50%; transform: translateY(-50%); width: 31px; }
/* each row draws its own piece of the line, so it blurs and sharpens with that row */
.timeline li::before {
  content: ''; position: absolute; z-index: 0; left: 15px; top: 0; bottom: 0; width: 1px;
  background: #e1ddd9;
}
.timeline li:first-child::before { top: 50%; }
.timeline li:last-child::before { bottom: 50%; }

.day-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 30px auto 0;
  max-width: 340px;
}
.btn-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgb(251 249 247 / 55%);
  border-radius: 3px;
  color: var(--on-band);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease-out, background-color 0.15s;
}
.btn-line svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.btn-line:hover { background: rgb(251 249 247 / 8%); }
.btn-line:active { transform: translateY(2px); background: rgb(0 0 0 / 10%); }
.btn-line:focus-visible { outline: 2px solid var(--on-band); outline-offset: 2px; }

.details { text-align: center; }
.details-title { width: 76%; }
.item { margin: 0 0 30px; }
.item:last-child { margin-bottom: 0; }
.item h3 {
  font-weight: 400; margin: 0 0 6px;
  text-transform: uppercase; letter-spacing: 0.24em; font-size: 21px;
}
.item p { margin: 0; font-size: 17px; line-height: 1.6; }

.page-foot {
  background: var(--band);
  color: var(--on-band);
  border-top: 1px solid rgb(251 249 247 / 20%);
  padding: 22px 8% 34px;
  text-align: center;
  font-size: 16px;
}
.page-foot p { margin: 0; }
.page-foot .text-link { color: var(--on-band); }

@media (max-width: 360px) {
  body { font-size: 17px; }
  .date-line { font-size: 12px; }
  .dear { font-size: 23px; }
  .choice span { font-size: 15px; }
  .timeline li { font-size: 15px; }
}

/* ---------- Scroll effects (only when site.js is running) ---------- */

/* A run of empty blue before anything appears, so the fade has room to breathe */
:root { --lead: 44vh; }
@supports (height: 1svh) { :root { --lead: 44svh; } }
.reveal .blue { padding-top: var(--lead); }
.reveal .d-o { top: calc(var(--lead) + 10px); }

/* Everything in the blue starts larger, blurred and low, and shrinks into place as it comes into focus */
.reveal .blue .band-title,
.reveal .blue .timeline li,
.reveal .blue .day-actions,
.reveal .blue .item {
  filter: blur(calc((1 - var(--p, 1)) * 16px));
  opacity: calc(0.1 + var(--p, 1) * 0.9);
  transform: translateY(calc((1 - var(--p, 1)) * 22px)) scale(calc(1 + (1 - var(--p, 1)) * 0.35));
}
.reveal .blue .band-title { transform-origin: 70% 50%; }
.reveal .blue .timeline li { transform-origin: 0% 50%; }
.reveal .blue .item { transform-origin: 50% 30%; }
.reveal .blue .day-actions { transform-origin: 50% 50%; }

/* The big O and L start oversized and blurred, and shrink into place as they sharpen */
.reveal .d-o,
.reveal .d-l {
  transform: scale(calc(1 + (1 - var(--s, 1)) * 0.9));
  filter: blur(calc((1 - var(--s, 1)) * 14px));
  opacity: calc(0.16 * (0.35 + var(--s, 1) * 0.65));
  will-change: transform, filter;
}
.reveal .d-o { transform-origin: 35% 40%; }
.reveal .d-l { transform-origin: 60% 70%; }

/* The cream-to-blue line is always a long, soft fade, never a hard edge. The blue's own background
   fades in from transparent (the cream page shows through), finishing before the first lettering arrives. */
.reveal .blue {
  --fade: calc(var(--lead) * 0.92);
  background:
    linear-gradient(to bottom,
      rgb(83 121 131 / 0) 0,
      rgb(83 121 131 / 0.06) calc(var(--fade) * 0.15),
      rgb(83 121 131 / 0.22) calc(var(--fade) * 0.32),
      rgb(83 121 131 / 0.5) calc(var(--fade) * 0.5),
      rgb(83 121 131 / 0.78) calc(var(--fade) * 0.68),
      rgb(83 121 131 / 0.94) calc(var(--fade) * 0.85),
      var(--band) var(--fade),
      var(--band) 100%);
}

/* ---------- Opening animation (class added by the small script in the page head) ---------- */
/* Same language as the blue section: things start large and blurred, then shrink into focus. */

.intro { --t: 1; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
.intro.intro-quick { --t: 0.5; } /* return visits get a quicker version */

.intro .opener .flowers--top    { animation: intro-down  calc(1.1s * var(--t)) var(--ease) 0s both; }
.intro .opener .big-o           { animation: intro-o     calc(1.2s * var(--t)) var(--ease) calc(0.1s * var(--t)) both; transform-origin: 0 0; }
.intro .opener .flowers--bottom { animation: intro-up    calc(1.1s * var(--t)) var(--ease) calc(0.15s * var(--t)) both; }
.intro .opener .big-l           { animation: intro-l     calc(1.2s * var(--t)) var(--ease) calc(0.2s * var(--t)) both; transform-origin: 100% 100%; }
.intro .opener .names           { animation: intro-focus calc(1.1s * var(--t)) var(--ease) calc(0.4s * var(--t)) both; }
.intro .opener .date-line       { animation: intro-fade  calc(0.8s * var(--t)) ease-out    calc(0.9s * var(--t)) both; }
/* whatever sits just below the opener (the RSVP, the thank-you, or the blue) settles in last */
.intro .opener + *               { animation: intro-fade  calc(0.9s * var(--t)) ease-out    calc(1.05s * var(--t)) both; }

@keyframes intro-down {
  from { transform: translateY(-8%); filter: blur(10px); opacity: 0; }
  to   { transform: none; filter: blur(0); opacity: 1; }
}
@keyframes intro-up {
  from { transform: translateY(8%); filter: blur(10px); opacity: 0; }
  to   { transform: none; filter: blur(0); opacity: 1; }
}
@keyframes intro-o {
  from { transform: scale(1.8); filter: blur(14px); opacity: 0; }
  to   { transform: none; filter: blur(0); opacity: 1; }
}
/* the L keeps its small nudge down (see .big-l) throughout */
@keyframes intro-l {
  from { transform: translateY(3.85%) scale(1.8); filter: blur(14px); opacity: 0; }
  to   { transform: translateY(3.85%); filter: blur(0); opacity: 1; }
}
@keyframes intro-focus {
  from { transform: scale(1.18); filter: blur(12px); opacity: 0; }
  to   { transform: none; filter: blur(0); opacity: 1; }
}
@keyframes intro-fade {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Admin ---------- */

.admin-body { background: var(--cream); font-size: 17px; }
.admin { max-width: 1100px; margin: 0 auto; padding: 28px 16px 60px; }
.admin-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-head h1 { font-weight: 400; font-size: 36px; margin: 0; letter-spacing: 0.04em; }
.admin-head h1 a { color: inherit; text-decoration: none; }
.eyebrow { font-size: 13px; margin: 0; }
.admin .notice { text-align: left; }
.muted { color: #7f979d; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 6px 0 8px; }
.stats div { background: #fff; border: 1px solid var(--stone); border-radius: 2px; padding: 16px; }
.stats .num { display: block; font-size: 40px; line-height: 1; }
.stats .lbl { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: #7f979d; }

.panel { background: #fff; border: 1px solid var(--stone); border-radius: 2px; padding: 16px 18px; margin: 18px 0; }
.panel summary { cursor: pointer; }
.stack { display: grid; gap: 14px; margin-top: 14px; max-width: 520px; }
.stack label { display: grid; gap: 6px; font-size: 16px; }
.admin .btn { box-shadow: none; }
.admin .btn:active { transform: none; }
.btn--small { padding: 13px 18px; font-size: 13px; letter-spacing: 0.18em; justify-self: start; }
.btn--tiny { padding: 8px 10px; font-size: 11px; letter-spacing: 0.12em; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--blue); }
.btn--ghost:hover { background: var(--cream); }
.btn--danger { background: #8e3b3b; }
.danger-zone summary { color: #8e3b3b; }

.filters { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.filters button {
  font: 400 13px var(--serif); text-transform: uppercase; letter-spacing: 0.12em;
  background: #fff; color: var(--ink); border: 1px solid var(--stone); border-radius: 2px; padding: 9px 14px; cursor: pointer;
}
.filters button.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--stone); }
.table th {
  text-align: left; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
  color: #7f979d; padding: 12px 14px; border-bottom: 1px solid var(--stone);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--stone); vertical-align: top; }
.person { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; }
.linkcell a:not(.btn) { color: var(--ink); }
.actions { display: flex; gap: 6px; margin-top: 6px; }

.edit-title { font-weight: 400; font-size: 28px; margin: 0 0 4px; }
.edit-guest { border: 0; border-top: 1px solid var(--stone); margin: 0; padding: 12px 0 0; }
.edit-guest legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.segs { clear: both; display: flex; gap: 8px; }
.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 16px; border: 1px solid var(--blue); border-radius: 2px; font-size: 15px; }
.seg input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-bottom: 1px solid var(--stone); padding: 8px 0; }
  .table tr[hidden] { display: none; }
  .table td { border: 0; padding: 6px 14px; }
  .table td::before {
    content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: #7f979d;
  }
}