/* Matches the printed invitation: pale grey card, charcoal ink, thin corner brackets,
   tall high-contrast capitals, tracked small caps, a fine signature script,
   and watercolour roses in blush, sage and mauve. */

@font-face { font-family: "Italiana"; src: url("fonts/Italiana-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Tenor Sans"; src: url("fonts/TenorSans-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Ms Madi"; src: url("fonts/MsMadi-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --card: #F4EEED;      /* palette off-white, under the watercolour */
  --white: rgba(253, 250, 249, 0.82);  /* form cards: a little of the wash shows through */
  --ink: #2E2E2E;       /* the invitation's charcoal */
  --ink-soft: #5B5552;  /* warmed to sit on blush */
  --line: #DCCBC6;      /* misty pink */
  --blush: #EFD9D1;     /* palette blush */
  --pink: #B5717F;      /* deeper dusty rose, for small accents */
  --sage: #999B84;      /* palette sage */
  --danger: #9E2F3F;

  --display: "Italiana", "Didot", "Bodoni 72", serif;
  --body: "Tenor Sans", "Gill Sans", "Optima", sans-serif;
  --script: "Ms Madi", "Snell Roundhand", "Apple Chancery", cursive;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--card);
  position: relative;
  color: var(--ink);
  font: 400 1rem/1.75 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { max-width: 34rem; margin: 0 auto; padding: 0 1.75rem; }
main.narrow { padding-top: 3rem; }
a { color: var(--ink); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
p { margin: 0 0 1rem; }

/* The invitation's tracked capitals */
.caps, label, legend, dt, .button, th, .couple-caps {
  text-transform: uppercase; letter-spacing: .24em; font-size: .78rem; line-height: 2;
}
.script-heading {
  font: 400 clamp(3rem, 14vw, 4rem)/1 var(--script);
  margin: 0 0 1.25rem; color: var(--ink); letter-spacing: 0;
}
.lede { color: var(--ink-soft); margin: 0 auto 2rem; text-align: center; max-width: 28rem; }
.center { text-align: center; }
.hint { font-size: .9rem; color: var(--ink-soft); margin: .35rem 0 0; text-transform: none; letter-spacing: 0; line-height: 1.6; }
.optional { text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: .85rem; }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the invitation (hero) ---------- */
.invite { position: relative; padding: 2.5rem 0 3rem; }
.invite-florals {
  position: absolute; top: -1rem; right: -2.75rem;
  width: min(62vw, 22rem); height: auto; pointer-events: none;
}
.frame { position: relative; padding: 9.5rem 1.5rem 2.25rem 0; }
.frame::before, .frame::after { content: ""; position: absolute; border: 0 solid var(--ink); }
.frame::before { top: 0; left: 0; width: 46%; height: 6.75rem; border-top-width: 1.5px; border-left-width: 1.5px; }
.frame::after { right: 0; bottom: .9rem; width: 34%; height: 52%; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.lead { max-width: 17rem; position: relative; }
.names { margin: 1.5rem 0 1.75rem; font-weight: 400; }
.names .name {
  display: block; font: 400 clamp(3.2rem, 15.5vw, 5.6rem)/1 var(--display);
  text-transform: uppercase; letter-spacing: .015em;
}
.names .and {
  display: block; font: 400 clamp(2.6rem, 12vw, 4rem)/1 var(--script);
  margin: .55rem 0 .45rem -.15em;
}
.invite .caps { margin: 0 0 1.4rem; }
.invite .venue { margin-bottom: 1.6rem; }
.reception { font: 400 clamp(1.9rem, 8.5vw, 2.6rem)/1 var(--script); margin: 0; }
.invite-cta { display: flex; align-items: center; gap: 1.25rem; margin: 2.5rem 0 0; }
.countdown { color: var(--ink-soft); font-size: .9rem; }

@media (prefers-reduced-motion: no-preference) {
  .invite-florals { animation: drift-in 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .frame::before, .frame::after { animation: draw 1.2s ease .3s both; }
}
@keyframes drift-in { from { opacity: 0; transform: translate(.75rem, -.75rem); } }
@keyframes draw { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- buttons ---------- */
.button {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--card); font-family: var(--body);
  padding: 1.05rem 2.25rem; border-radius: 0; transition: background .2s;
}
.button:hover { background: #4A4A4A; color: var(--card); }
.button:disabled { opacity: .6; cursor: progress; }
.text-button {
  background: none; border: 0; padding: .25rem 0; cursor: pointer; font: inherit; font-size: .9rem;
  color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px;
}
.text-button:hover { color: var(--pink); }
.text-button.danger { color: var(--danger); }

/* ---------- content sections ---------- */
main > section { padding: 3rem 0; position: relative; }
main > section + section::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3rem; border-top: 1.5px solid var(--ink);
}
.details dl, .notes dl { margin: 0; display: grid; gap: 1.4rem; }
.details dt, .notes dt { color: var(--ink); margin-bottom: .1rem; }
.details dd, .notes dd { margin: 0; color: var(--ink-soft); }
.cal-links { margin: 1.75rem 0 0; color: var(--ink-soft); }
.note-intro { color: var(--ink); margin-bottom: 1.75rem; }

.schedule ol { list-style: none; margin: 0; padding: 0; position: relative; }
.schedule ol::before { content: ""; position: absolute; left: 5.25rem; top: .7rem; bottom: .7rem; width: 1px; background: var(--ink); opacity: .35; }
.schedule li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 2rem; padding: .55rem 0; position: relative; }
.schedule li::after {
  content: ""; position: absolute; left: calc(5.25rem - 3px); top: 1.15rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px var(--card);
}
.schedule time { text-align: right; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; padding-top: .2rem; font-variant-numeric: lining-nums; }
.schedule strong { font-weight: 400; display: block; }
.schedule span { display: block; font-size: .9rem; color: var(--ink-soft); }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .8rem 1.5rem .8rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); }

/* ---------- RSVP, styled like the reply card ---------- */
.rsvp .script-heading { text-align: center; font-size: clamp(4rem, 20vw, 5.5rem); margin-bottom: .5rem; }
.couple-caps { text-align: center; font-size: .9rem; letter-spacing: .3em; margin: 0 0 1.25rem; }
#rsvp-form { background: var(--white); border: 1px solid var(--line); padding: 2rem 1.35rem; }
.field { margin-bottom: 1.5rem; }
label { display: block; }
input, select, textarea {
  display: block; width: 100%; margin-top: .4rem; border-radius: 0;
  font: 400 1.05rem/1.4 var(--body); color: var(--ink);   /* 16px+ stops iOS zooming in */
  background: var(--card); border: 1px solid var(--line); padding: .75rem .85rem;
  text-transform: none; letter-spacing: 0;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 50%, calc(100% - .85rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(194,83,122,.15); }
textarea { resize: vertical; }
fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; min-width: 0; }
fieldset[hidden] { display: none; }
legend { padding: 0; margin-bottom: .6rem; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.choice legend { grid-column: 1 / -1; }
.choice-card { position: relative; letter-spacing: 0; text-transform: none; }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-card span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 4.5rem;
  padding: .75rem .5rem; cursor: pointer; border: 1px solid var(--line); background: var(--card);
  font: 400 1.75rem/1.05 var(--script); transition: border-color .15s, background .15s;
}
.choice-card input:checked + span { border-color: var(--ink); background: var(--blush); }
.choice-card input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }

.guest { border-left: 1.5px solid var(--ink); padding: .1rem 0 .1rem 1rem; margin: 1.1rem 0; }
.guest label { margin-bottom: .85rem; }
.guest-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.guest-num { font: 400 1.6rem/1.1 var(--script); }
.submit { width: 100%; margin-top: .5rem; }

.errors { border: 1px solid var(--danger); background: #FAF0F1; padding: .9rem 1.1rem; margin-bottom: 1.5rem; color: var(--danger); }
.errors p { margin: 0; }
.errors ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- thank you ---------- */
.thanks { position: relative; padding-top: 7rem !important; }
.thanks-florals { position: absolute; top: -3rem; right: -2.75rem; width: min(48vw, 15rem); height: auto; }
.thanks .script-heading { text-align: left; }
.thanks .lede { text-align: left; margin-left: 0; }
.thanks h2 { font: 400 .78rem/2 var(--body); text-transform: uppercase; letter-spacing: .24em; margin: 2rem 0 .5rem; }
.party-summary { list-style: none; padding: 0; margin: 0 0 2rem; }
.party-summary li { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.party-summary span { display: block; font-size: .9rem; color: var(--ink-soft); }
.edit-link { background: var(--white); border: 1px solid var(--line); padding: 1.35rem; margin: 2.5rem 0; }
.edit-link h2 { margin-top: 0; }
.copy-row { display: flex; gap: .75rem; align-items: center; }
.copy-row input { margin: 0; font-size: .85rem; }
.copy-row button { white-space: nowrap; }

.site-footer { text-align: center; padding: 3rem 1.75rem 2.75rem; color: var(--ink-soft); font-size: .9rem; }
.site-footer .rule { display: block; width: 3rem; margin: 0 auto 1.25rem; border-top: 1.5px solid var(--ink); }
.admin-page .site-footer p { display: none; }

/* ---------- admin ---------- */
.admin-page main.admin { max-width: 64rem; padding-top: 2rem; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-head .script-heading { margin: 0; }
.admin-actions { display: flex; align-items: center; gap: 1.25rem; }
.admin-actions form { margin: 0; }
.notice { background: var(--white); border-left: 2px solid var(--sage); padding: .7rem 1rem; }
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1.5rem 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.tally div { padding: 1rem 0; }
.tally dd { margin: 0; font: 400 2.4rem/1.2 var(--body); font-variant-numeric: lining-nums; }
.admin section { padding: 1.75rem 0; }
.admin section::before { display: none; }
.admin h2 { font: 400 2.2rem/1.1 var(--script); margin: 0 0 .75rem; }
.admin-grid { display: grid; gap: 0 3rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.dupes { background: var(--blush); border: 1px solid #DDBAC6; padding: 1.25rem 1.5rem !important; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .75rem; }
.table-head h2 { margin: 0; }
.search input { min-width: 14rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th { text-align: left; font-weight: 400; border-bottom: 1.5px solid var(--ink); padding: .5rem .75rem .5rem 0; }
td { vertical-align: top; border-bottom: 1px solid var(--line); padding: .75rem .75rem .75rem 0; }
td form { margin: 0; }
.mini td { padding: .45rem 0; }
.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.pill { display: inline-block; padding: .1rem .65rem; font-size: .8rem; white-space: nowrap; letter-spacing: .08em; }
.pill.yes { background: #E3EAE5; }
.pill.no { background: var(--blush); }
blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 1.5px solid var(--ink); }
blockquote cite { display: block; font-style: normal; font-size: .85rem; color: var(--ink-soft); }
.login { max-width: 20rem; }
.login .button { width: 100%; }

@media (min-width: 40rem) {
  #rsvp-form { padding: 2.5rem; }
  .invite-florals { right: -6rem; }
  .details dl > div, .notes dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; }
}

/* Tenor Sans has one weight, so emphasis comes from size rather than faux bold */
strong, b { font-weight: 400; }
.party-summary strong { font-size: 1.1rem; }
.replies strong { font-size: 1.02rem; }
@media (min-width: 40rem) { .invite .caps { font-size: .85rem; } }

/* Corner swag placement. The eucalyptus stem runs vertically at x=568 of the 640-wide
   artwork (568/640 = 0.8875), so this offset puts it exactly on the bracket's right line.
   The top line runs right until it ends beneath the peony (centre at x=292, 0.456 of the
   artwork, which works out to 0.4315 x artwork width in from the right edge). */
.invite { --fw: min(70vw, 24rem); }
@media (min-width: 40rem) { .invite { --fw: 28rem; } }
.invite-florals {
  z-index: 2;  /* flowers sit on top of the frame lines */
  top: -1.25rem; width: var(--fw);
  right: calc(0.75px - 0.1125 * var(--fw));
}
@media (min-width: 40rem) { .invite-florals { top: -2rem; } }
.frame { z-index: 1; }
.frame::before { width: calc(100% - 0.4315 * var(--fw)); }

/* Directions and calendar, between the notes and the RSVP */
.plan-links .link-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.button.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: .95rem 1.6rem; }
.button.outline:hover { background: var(--ink); color: var(--card); }
.plan-links { padding-top: 0 !important; }
.plan-links::before { display: none; }
.plan-links .link-row { display: grid; grid-template-columns: 1fr 1fr; }
.plan-links .button.outline { padding: .95rem .5rem; text-align: center; letter-spacing: .16em; }
@media (max-width: 22rem) { .plan-links .link-row { grid-template-columns: 1fr; } }
.plan-links .button.outline { display: flex; align-items: center; justify-content: center; letter-spacing: .12em; font-size: .74rem; padding: .95rem .4rem; }

/* ---------- watercolour background ----------
   A fixed layer rather than background-attachment: fixed, which iPhones ignore. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--card) url("watercolour.webp") center top / cover no-repeat;
}
@media (min-aspect-ratio: 1/1) {
  /* wide screens: let the washes frame the page edges rather than stretch */
  body::before { background-size: 100% auto; background-position: center top; }
}
input, select, textarea { background: rgba(255, 255, 255, 0.6); }
.choice-card span { background: rgba(255, 255, 255, 0.55); }
.schedule li::after { box-shadow: none; }
.pill.yes { background: #DFE0D5; }
.dupes { border-color: var(--mauve, #D3B2A6); }

/* The invitation's frame gets the same soft fill as the RSVP form card.
   The fill stops where the bottom-right bracket ends (0.9rem above the frame's bottom),
   and the text is inset so it sits inside the card like the form fields do. */
.frame {
  background: linear-gradient(var(--white), var(--white)) left top / 100% calc(100% - 0.9rem) no-repeat;
  padding-left: 1.35rem;
}
.frame .names .and { margin-left: -.35em; }
@media (min-width: 40rem) { .frame { padding-left: 2.5rem; } }

/* Wider screens: the flowers are larger, so give the opening line more room beneath them */
@media (min-width: 40rem) { .frame { padding-top: 15.75rem; } }

/* ---------- live dashboard ---------- */
.live-status { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.live-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
.live-status[data-state="fresh"] .dot { background: var(--pink); }
.live-status[data-state="offline"] .dot, .live-status[data-state="off"] .dot { background: #B9B0AD; }
@media (prefers-reduced-motion: no-preference) {
  .live-status:not([data-state="off"]):not([data-state="offline"]) .dot { animation: pulse 2.4s ease-in-out infinite; }
  .replies tr.is-new td { animation: arrive 4s ease-out; }
}
@keyframes pulse { 50% { opacity: .35; } }
@keyframes arrive { from { background: rgba(239, 217, 209, .95); } to { background: transparent; } }
.replies .diet { color: var(--pink); }
.table-head .search { margin: 0; }
.tally div { padding-right: 1rem; }