/* The public face of the memorial: a calm page in lake blues and warm
   neutrals, set in serifs, read mostly by older guests on phones. Prose is
   serif; anything you fill in or press is sans — the story reads like a
   book, the form reads like a form. */

:root {
  --deep: #1c3a52;      /* deep lake — headings, primary button */
  --ink: #27323c;       /* body text, blue-grey ink */
  --soft: #5c6b77;      /* secondary text */
  --shell: #f7f4ee;     /* warm paper background */
  --card: #fffdf9;      /* raised surfaces */
  --mist: #edf2f5;      /* pale water tint — the service block */
  --line: #dcd9d0;      /* warm hairline */
  --water: #3c617e;     /* links */
  --red: #a8412f;
  --red-soft: #fbeeeb;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tap: 56px;
}

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

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font: 20px/1.6 var(--serif);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--deep); }
a { color: var(--water); }
a:focus-visible, input:focus-visible, textarea:focus-visible,
button:focus-visible, .choice-btn:focus-within {
  outline: 3px solid var(--water); outline-offset: 2px;
}

.page { max-width: 42rem; margin: 0 auto; padding: 0 1.25rem 3rem; }

/* --- hero ---------------------------------------------------------------- */

.hero { text-align: center; padding: 2.5rem 0 0; }
.portrait {
  width: 200px; height: 200px; object-fit: cover; border-radius: 50%;
  border: 5px solid var(--card); box-shadow: 0 4px 24px rgba(28, 58, 82, .18);
  background: var(--mist);
}
.eyebrow {
  font-family: var(--sans); font-size: .85rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--soft); margin: 1.4rem 0 .3rem;
}
.hero h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .4rem; }
.dates { font-size: 1.05rem; color: var(--soft); margin: 0; }

.horizon { margin: 1.5rem -1.25rem 0; }
.horizon svg { display: block; width: 100%; height: 70px; }
.horizon.low { margin-top: 2.5rem; }
.horizon.low svg { height: 40px; }

/* --- sections ------------------------------------------------------------ */

section { margin-top: 2.5rem; }
section h2 {
  font-size: 1.45rem; margin: 0 0 .9rem;
  padding-bottom: .45rem; border-bottom: 1px solid var(--line);
}
section p { margin: 0 0 1rem; }

/* --- the service block --------------------------------------------------- */

.service {
  background: var(--mist); border: 1px solid #dde6ec; border-radius: 16px;
  padding: 1.5rem 1.4rem; text-align: center;
}
.service h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: 1rem; }
.service-when { font-size: 1.35rem; line-height: 1.35; margin-bottom: .8rem; }
.service-time { color: var(--deep); font-weight: 600; }
.service-where { line-height: 1.5; }
.service-note { font-style: italic; color: var(--soft); font-size: .95rem; }
.service-details { color: var(--ink); margin-bottom: 0; }

/* --- buttons (sans: things you press) ------------------------------------ */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  min-height: var(--tap); padding: .7rem 1.4rem; border-radius: 12px;
  border: 1px solid var(--deep); background: var(--deep); color: #fff;
  text-decoration: none; cursor: pointer;
}
.button.quiet { background: var(--card); color: var(--deep); border-color: #c3cdd6; }
.button.primary { width: 100%; font-size: 19px; }

/* --- the story ----------------------------------------------------------- */

.story p { font-size: 1.02em; }
.obit { font-family: var(--sans); font-size: .95rem; }

/* --- the RSVP form (sans: the part you fill in) -------------------------- */

.rsvp {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem;
}
.rsvp h2 { border-bottom: 0; padding-bottom: 0; }
.rsvp-lede { color: var(--soft); }
.rsvp form { font-family: var(--sans); }

.field { display: block; margin: 0 0 1.2rem; }
.field > span {
  display: block; font-family: var(--sans); font-size: .95rem; font-weight: 600;
  color: var(--ink); margin-bottom: .4rem;
}
.field > span em { font-weight: 400; color: var(--soft); font-style: normal; }
input[type="text"], input[type="number"], textarea {
  width: 100%; font-family: var(--sans); font-size: 19px; color: var(--ink);
  padding: .75rem .8rem; border-radius: 10px; border: 1px solid #c9c5bb;
  background: #fff; min-height: 52px;
}
textarea { resize: vertical; line-height: 1.5; }
.field.narrow input { max-width: 9rem; }
.field-pair { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-pair .field { flex: 1 1 12rem; }

/* yes / no as two big buttons */
.choice { border: 0; padding: 0; margin: 0 0 1.2rem; }
.choice legend {
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  margin-bottom: .4rem; padding: 0;
}
.choice-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.choice-btn {
  flex: 1 1 11rem; display: flex; align-items: center; gap: .6rem;
  border: 2px solid #c9c5bb; border-radius: 12px; background: #fff;
  padding: .8rem .9rem; min-height: var(--tap); font-size: 18px;
  cursor: pointer;
}
.choice-btn input { width: 22px; height: 22px; accent-color: var(--deep);
  flex: 0 0 auto; margin: 0; }
.choice-btn:has(input:checked) { border-color: var(--deep); background: var(--mist); }

#attend-details[hidden] { display: none; }

.fineprint { font-family: var(--sans); font-size: .88rem; color: var(--soft);
  margin: -.4rem 0 1.2rem; }

.form-error {
  font-family: var(--sans); background: var(--red-soft);
  border: 1px solid #eccdc6; color: var(--red);
  padding: .7rem .8rem; border-radius: 10px;
}
.form-error[hidden] { display: none; }

/* honeypot: parked far off-canvas, skipped by keyboards and readers */
.hp { position: absolute; left: -6000px; top: 0; }

.thanks {
  background: var(--mist); border: 1px solid #dde6ec; border-radius: 12px;
  padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.thanks[hidden] { display: none; }
.thanks h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.thanks p:last-child { margin-bottom: 0; }

.cf-turnstile { margin: 0 0 1rem; }

/* --- quieter sections ---------------------------------------------------- */

.foot {
  text-align: center; margin-top: 2rem; color: var(--soft);
}
.foot .fineprint { margin: .4rem 0 0; }

/* --- gate + family (the app-ish pages stay sans) ------------------------- */

body.centered { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.25rem; font-family: var(--sans); font-size: 18px; }
.card-plain {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem 1.25rem; width: 100%; max-width: 26rem;
}
.card-plain h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.lede { color: var(--soft); margin: .25rem 0 1.25rem; }
.error {
  background: var(--red-soft); border: 1px solid #eccdc6; color: var(--red);
  padding: .6rem .75rem; border-radius: 10px; margin: 0 0 1rem;
}

.family { font-family: var(--sans); font-size: 17px; }
.family-head { padding-top: 2rem; }
.family-head h1 { font-size: 1.7rem; margin: 0 0 .3rem; }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .7rem; margin-top: 1rem; }
.total {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem .9rem; text-align: center;
}
.total strong { display: block; font-size: 1.7rem; color: var(--deep);
  font-variant-numeric: tabular-nums; }
.total span { font-size: .85rem; color: var(--soft); }

.family-tools { margin: 1.2rem 0; }

.table-scroll { overflow-x: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.replies { border-collapse: collapse; width: 100%; min-width: 56rem;
  font-size: .95rem; }
.replies th, .replies td { text-align: left; padding: .6rem .7rem;
  border-top: 1px solid var(--line); vertical-align: top; }
.replies thead th { border-top: 0; font-size: .82rem; color: var(--soft);
  text-transform: uppercase; letter-spacing: .05em; }
.replies tr.no td { color: var(--soft); }
.replies .name { font-weight: 600; white-space: nowrap; }
.rev { font-weight: 400; font-size: .78rem; color: var(--soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
  margin-left: .4rem; white-space: nowrap; }
.replies .when { white-space: nowrap; color: var(--soft); }
.row-tools { text-align: right; }
button.remove {
  font-family: var(--sans); font-size: .82rem; color: var(--red);
  background: none; border: 1px solid #eccdc6; border-radius: 8px;
  padding: .3rem .6rem; cursor: pointer; min-height: 36px;
}
.memory-row td { border-top: 0; padding-top: 0; }
.memory { margin: 0; font-family: var(--serif); color: var(--ink);
  border-left: 3px solid #dde6ec; padding-left: .8rem; }
.memory-label { font-family: var(--sans); font-size: .82rem; font-weight: 600;
  color: var(--soft); display: block; margin-bottom: .15rem; }

.family-config { background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 1.2rem; margin-top: 2rem; }
.family-config h2 { font-family: var(--sans); font-size: 1.05rem;
  border-bottom: 0; padding-bottom: 0; margin-bottom: .8rem; }

/* --- small screens ------------------------------------------------------- */

@media (max-width: 26rem) {
  .hero h1 { font-size: 1.7rem; }
  .portrait { width: 160px; height: 160px; }
  .service { margin-left: -.4rem; margin-right: -.4rem; }
}

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

@media print {
  :root { --shell: #fff; --card: #fff; }
  .rsvp, .foot, .horizon.low { display: none; }
}