/* Anne Vyse-Vanderkuyl — memorial site.
   The palette, type, spacing and motion here are lifted directly from the
   approved design; the only additions are the states the static mockup could
   not have (upload control, lightbox, empty states, error messages), all built
   from the same tokens so they read as part of the same page. */

:root {
  --bg:          #f7f5f0;
  --hero-top:    #eef0e8;
  --card:        #fdfcf9;
  --line:        #e7e4da;
  --rule:        #c9cfbf;

  --ink:         #2e332c;
  --body:        #4d5548;
  --body-soft:   #3a4136;
  --muted:       #6d7566;
  --faint:       #a0a894;
  --eyebrow:     #7a8a6f;

  --green:       #5c7259;
  --green-dark:  #4a5e48;
  --green-link:  #3f5240;
  --focus:       #8a9a7c;
  --input-line:  #d4d6c8;

  --sage:        #a8b39a;
  --sage-light:  #b8c3a8;
  --sage-pale:   #c6cfb6;
  --rose:        #cfa094;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-card:  0 2px 14px rgba(62, 72, 54, 0.05);
  --shadow-msg:   0 2px 10px rgba(62, 72, 54, 0.04);
  --shadow-lift:  0 10px 26px rgba(62, 72, 54, 0.10);
  --shadow-photo: 0 10px 34px rgba(62, 72, 54, 0.16);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-link); text-decoration: underline; }

h1, h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); }

/* Visible only to screen readers — used for the honeypot label and section
   landmarks that the visual design carries by position alone. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- motion ---------- */

@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes growIn  { from { opacity: 0; transform: scale(0.88); }     to { opacity: 1; transform: scale(1); } }
@keyframes drift   { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(8deg); } 100% { transform: translateY(0) rotate(0deg); } }

/* Sections fade up as they scroll into view. The animation is a failsafe, not
   decoration: if site.js never arrives, every section still becomes visible a
   few seconds later rather than leaving the page looking empty. */
@keyframes revealFailsafe { to { opacity: 1; transform: none; } }

[data-reveal] {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Only the not-yet-revealed state is hidden and carries the failsafe, so that
   the animation cannot outrank the transition once script reveals a section. */
[data-reveal=""] {
  opacity: 0;
  transform: translateY(22px);
  animation: revealFailsafe 0.6s ease 6s both;
}
[data-reveal="in"] { opacity: 1; transform: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

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

.hero {
  position: relative;
  padding: 84px 24px 72px;
  text-align: center;
  background: linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%);
  overflow: hidden;
}
.hero__glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(133, 152, 120, 0.10) 0%, rgba(133, 152, 120, 0) 65%);
  pointer-events: none;
}
.hero__petals { position: absolute; inset: 0; pointer-events: none; }
.hero__petals span { position: absolute; animation: drift 11s ease-in-out infinite; }
.p1 { top: 18%; left: 12%;  color: var(--sage-light); opacity: .50; font-size: 18px; animation-duration: 9s; }
.p2 { top: 62%; left: 7%;   color: var(--sage-pale);  opacity: .40; font-size: 13px; animation-duration: 12s; animation-delay: 2s; }
.p3 { top: 42%; left: 18%;  color: var(--rose);       opacity: .65; font-size: 18px; animation-duration: 13s; animation-delay: 4s; }
.p4 { top: 48%; right: 19%; color: var(--rose);       opacity: .70; font-size: 21px; animation-duration: 10.5s; animation-delay: 2.5s; }
.p5 { top: 26%; right: 10%; color: var(--sage-light); opacity: .45; font-size: 15px; animation-duration: 10s; animation-delay: 1s; }
.p6 { top: 68%; right: 14%; color: var(--sage-pale);  opacity: .50; font-size: 20px; animation-duration: 11s; animation-delay: 3.5s; }

.hero__inner { position: relative; max-width: 640px; margin: 0 auto; }

.hero__eyebrow {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--eyebrow); margin-bottom: 30px;
  animation: fadeUp 0.8s ease 0.15s both;
}
.hero__frame {
  width: 208px; height: 208px; margin: 0 auto; padding: 7px;
  background: var(--card); border-radius: 50%; box-shadow: var(--shadow-photo);
  animation: growIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero__portrait {
  width: 194px; height: 194px; border-radius: 50%;
  object-fit: cover; display: block;
}
.hero__name {
  font-size: clamp(38px, 9vw, 56px); line-height: 1.1; margin: 32px 0 10px;
  animation: fadeUp 0.9s ease 0.65s both;
}
.hero__dates {
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--muted);
  animation: fadeUp 0.9s ease 0.85s both;
}
.hero__intro {
  max-width: 520px; margin: 0 auto; font-size: 18px; color: var(--body);
  text-wrap: pretty; animation: fadeUp 0.9s ease 1.2s both;
}

/* the rule / heart / flower / heart / rule divider */
.divider {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0;
}
.divider__line { width: 56px; height: 1px; background: var(--rule); }
.divider__heart { color: var(--rose); font-size: 14px; }
.divider__flower { color: var(--sage); font-size: 15px; }
.hero .divider { animation: fadeUp 0.9s ease 1.05s both; }

/* ---------- shared section furniture ---------- */

.section { max-width: 680px; margin: 0 auto; padding: 64px 24px 8px; }
.section--wide { max-width: 920px; }
.section__title { font-size: 34px; margin: 0 0 22px; text-align: center; }
.section__title--tight { margin-bottom: 8px; }
.section__sub { text-align: center; color: var(--muted); margin: 0 0 6px; }
.section__note { text-align: center; color: var(--faint); font-size: 14px; margin: 0 0 30px; }
.section__sub:last-of-type { margin-bottom: 30px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(24px, 5vw, 40px) clamp(20px, 6vw, 44px);
  box-shadow: var(--shadow-card);
}
.card p { margin: 0 0 18px; text-wrap: pretty; }
.card p:last-of-type { margin-bottom: 0; }
.card__signature {
  margin-top: 26px; font-family: var(--serif); font-style: italic;
  font-size: 19px; color: var(--muted); text-align: right;
}

.empty-note {
  text-align: center; color: var(--faint); font-family: var(--serif);
  font-style: italic; font-size: 19px; padding: 26px 0;
}

/* ---------- celebration of life ---------- */

/* Given the card treatment of the obituary above it, this reads as the one
   thing on the page asking something of the visitor — a paler green panel,
   the same family as the memory form but quieter. */
.celebration {
  background: var(--hero-top);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 6vw, 44px);
  text-align: center;
}
.celebration__title { font-size: 30px; margin: 0 0 10px; }
.celebration__date {
  font-family: var(--serif); font-style: italic; font-size: 21px;
  color: var(--green); margin: 0 0 16px;
}
.celebration__invite {
  max-width: 480px; margin: 0 auto 24px; color: #5d6656; text-wrap: pretty;
}
.celebration__form {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: 480px; margin: 0 auto;
}
.celebration__form .field { flex: 1 1 240px; text-align: left; }
.celebration__form .btn { flex: 0 0 auto; }
.celebration__privacy {
  max-width: 440px; margin: 16px auto 0;
  font-size: 13px; color: var(--faint); text-wrap: pretty;
}
.celebration__thanks {
  font-family: var(--serif); font-style: italic; font-size: 21px;
  color: var(--green); margin: 8px 0 0;
}

/* ---------- gallery ---------- */

/* Columns are capped as well as floored: with 1fr a single photograph stretched
   the full width of the page and got cropped into a letterbox strip. Capping the
   track keeps one photo the same size as one of four, and centring absorbs the
   leftover space. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
  gap: 16px;
}
/* On a phone one photo per row, full width, reads better than a centred stamp. */
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; }
}
.gallery__item {
  position: relative; height: 240px; margin: 0; padding: 0;
  border-radius: 6px; overflow: hidden; background: var(--hero-top);
  border: 1px solid var(--line);
  cursor: zoom-in; appearance: none; -webkit-appearance: none;
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.gallery__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery__item:hover img { transform: scale(1.04); }

/* Who shared the photograph, revealed on hover — and always shown on touch,
   where there is no hover to reveal it with. */
.gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 14px 13px; text-align: left;
  background: linear-gradient(180deg, rgba(46, 51, 44, 0) 0%, rgba(46, 51, 44, 0.78) 100%);
  color: #f7f5f0; font-size: 14px; line-height: 1.4; font-weight: 600;
  letter-spacing: 0.01em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.gallery__item:hover .gallery__caption,
.gallery__item:focus-visible .gallery__caption { opacity: 1; transform: none; }

@media (hover: none) {
  .gallery__caption { opacity: 1; transform: none; }
}

/* ---------- messages ---------- */

.messages { display: flex; flex-direction: column; gap: 18px; }

.message {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(20px, 4vw, 26px) clamp(18px, 5vw, 30px);
  box-shadow: var(--shadow-msg);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.message:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.message__text { margin: 0 0 14px; text-wrap: pretty; color: var(--body-soft); white-space: pre-line; }
.message__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid #efece3; padding-top: 12px;
}
.message__who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.message__name { font-weight: 600; font-size: 15px; color: var(--green); }
.message__meta { display: flex; align-items: baseline; gap: 8px; }
.message__date { font-size: 13px; color: var(--faint); }
.message__heart { font-size: 13px; color: var(--rose); }

.badge-pending {
  font-size: 12px; color: #b0a06a; background: #f5f0dd;
  border: 1px solid #e8dfbe; border-radius: 20px; padding: 1px 10px;
  white-space: nowrap;
}

/* ---------- share form ---------- */

.share { background: var(--hero-top); border-radius: 4px; padding: clamp(24px, 5vw, 40px) clamp(20px, 6vw, 44px); }
.share__title { font-size: 30px; margin: 0 0 6px; }
.share__sub { margin: 0 0 24px; color: #5d6656; }
.share__fields { display: flex; flex-direction: column; gap: 14px; }

.field {
  font-family: var(--sans); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--input-line); border-radius: 4px;
  background: var(--card); color: var(--ink); outline: none; width: 100%;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(138, 154, 124, 0.18); }
.field::placeholder { color: #9aa393; }
textarea.field { resize: vertical; min-height: 132px; }

.counter { font-size: 13px; color: var(--faint); text-align: right; margin: -6px 2px 0; }
.counter--over { color: #a8574a; }

/* upload control: a quiet dashed well until a photo is chosen */
.upload { display: flex; flex-direction: column; gap: 10px; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload__drop {
  display: flex; align-items: center; gap: 14px;
  border: 1px dashed var(--input-line); border-radius: 4px;
  background: rgba(253, 252, 249, 0.6); padding: 14px 16px;
  cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease;
}
.upload__drop:hover, .upload__drop.is-over { border-color: var(--focus); background: var(--card); }
.upload__input:focus-visible + .upload__drop { outline: 2px solid var(--focus); outline-offset: 2px; }
.upload__icon { width: 24px; height: 24px; color: var(--sage); flex: none; }
.upload__label { font-size: 15px; color: #5d6656; }
.upload__hint { display: block; font-size: 13px; color: var(--faint); }
.upload__preview { display: none; align-items: center; gap: 14px; }
.upload__preview.is-shown { display: flex; }
.upload__preview img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--line); flex: none; background: var(--card);
}
/* No decodable preview (HEIC): hide the frame rather than leave it empty. */
.upload__preview.has-no-thumb img { display: none; }
.upload__preview.has-no-thumb .upload__file::before {
  content: "✓ "; color: var(--green); font-weight: 600;
}
.upload__file { font-size: 14px; color: #5d6656; word-break: break-word; }
.upload__clear {
  font: inherit; font-size: 14px; background: none; border: none; padding: 0;
  color: var(--green); cursor: pointer; text-decoration: underline; margin-left: auto;
}

.share__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn {
  font-family: var(--sans); font-size: 16px; font-weight: 600;
  padding: 13px 30px; background: var(--green); color: var(--card);
  border: none; border-radius: 4px; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover:not(:disabled) {
  background: var(--green-dark); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(74, 94, 72, 0.25);
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

.share__status { color: var(--green); font-size: 15px; }
.share__error {
  background: #f7ebe7; border: 1px solid #e6cec6; color: #8c4f42;
  border-radius: 4px; padding: 12px 16px; font-size: 15px; margin: 0 0 18px;
}

/* ---------- footer ---------- */

.footer { max-width: 680px; margin: 0 auto; padding: 56px 24px 72px; text-align: center; }
.footer .divider { margin: 0 0 30px; }
.footer__donation { max-width: 480px; margin: 0 auto 10px; color: var(--body); text-wrap: pretty; }
.footer__link { font-weight: 600; }
.footer__quote {
  margin-top: 44px; font-family: var(--serif); font-style: italic;
  font-size: 20px; color: #8a927e;
}
.footer__family {
  margin-top: 28px; font-size: 13px; color: #b5bbab;
}
.footer__family a { color: #b5bbab; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 60; border: none; padding: 0;
  background: rgba(38, 42, 36, 0.92);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img {
  max-width: 92vw; max-height: 82vh; border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); background: var(--card);
}
.lightbox__caption {
  position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  padding: 0 24px;
}
.lightbox__credit { color: #e8e6de; font-size: 15px; font-weight: 600; }
/* The memory the photograph came with, clamped so a long one cannot creep up
   over the picture it belongs to. */
.lightbox__note {
  color: #bfc2b6; font-size: 14px; line-height: 1.5; margin: 4px auto 0;
  max-width: 620px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lightbox__note:empty { margin: 0; }
.lightbox__close {
  position: absolute; top: 18px; right: 22px; font-size: 30px; line-height: 1;
  background: none; border: none; color: #e8e6de; cursor: pointer; padding: 8px 12px;
}
.lightbox__close:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #e8e6de; font-size: 36px;
  padding: 12px 18px; cursor: pointer; opacity: 0.75;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__prev { left: 4px; }
.lightbox__next { right: 4px; }
@media (max-width: 560px) { .lightbox__nav { font-size: 28px; padding: 10px; } }