/* Debbie Patton memorial site
   Mobile-first. Full-color yard background with no tint.
   Dark frosted glass cards and white type, matching the reference.
   Baby blue is used only for small accents (buttons, links, rules).
   No icon fonts. Motion is disabled when the visitor prefers reduced motion. */

:root {
  --baby-blue: #9ec4e0;
  --baby-blue-btn: #8eb9d8;
  --baby-blue-btn-hover: #7aabd0;
  --baby-blue-line: rgba(158, 196, 224, 0.55);
  --ink: #f7fafc;
  --ink-soft: rgba(247, 250, 252, 0.86);
  --ink-muted: rgba(247, 250, 252, 0.72);
  --slate: #2a3340;
  --white: #ffffff;
  --glass: rgba(22, 34, 50, 0.26);
  --glass-fallback: rgba(22, 34, 50, 0.42);
  --font-serif: "Cormorant Garamond", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --content: 35rem;
  --page: 70rem;
  --fade: 1.35s;
  --gutter: 1.15rem;
  --radius: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
  max-width: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  /* Dark earth fallback so the page never flashes a light wash. */
  background: #1c2a1a;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Full-page yard in full color. position:fixed (not background-attachment:fixed)
   so iOS stays stable. No tint, wash, overlay, or radial. */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #1c2a1a;
  background-image: url("../images/yard.jpg?v=20261115e");
  background-image: image-set(
    url("../images/yard.webp?v=20261115e") type("image/webp"),
    url("../images/yard.jpg?v=20261115e") type("image/jpeg")
  );
  background-size: cover;
  background-position: 32% 45%;
  background-repeat: no-repeat;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

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

h1,
h2,
h3,
.footer-name,
.hero-dates,
.memory-name,
.wall-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--white);
}

h2 {
  margin: 0;
  font-size: clamp(1.85rem, 7vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

a {
  color: var(--baby-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1000;
  background: var(--slate);
  color: var(--white);
  padding: 0.7rem 1rem;
}

.skip-link:focus {
  top: 1rem;
}

.wrap,
.wrap.narrow {
  width: min(100% - (var(--gutter) * 2), var(--content));
  margin-inline: auto;
}

/* Dark glass cards. Opaque dark fallback, then blur when supported. */
.glass-card {
  background: var(--glass-fallback);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.45);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass-card {
    background: var(--glass);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

/* Hero: first screen is the yard plus the memorial card. No top nav. */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.75rem 5% 2rem;
}

.memorial-card {
  width: 100%;
  max-width: 35rem;
  padding: 1.45rem 1.25rem 1.6rem;
  text-align: center;
}

.hero-eyebrow {
  margin: 0 0 1.05rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.hero-portrait {
  width: min(78vw, 300px);
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(20, 28, 36, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  opacity: 0;
  transition: opacity var(--fade) ease-in-out;
}

.hero-slide.is-current {
  opacity: 1;
}

.memorial-card h1 {
  margin: 1.05rem 0 0.3rem;
  font-size: clamp(2rem, 8vw, 2.55rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--white);
}

.hero-dates {
  margin: 0 0 1.15rem;
  font-size: 0.98rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
}

.obituary {
  margin: 0 auto;
  max-width: 32rem;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink);
  padding: 0.45rem 0.35rem 0.2rem;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(10, 18, 28, 0) 0%,
    rgba(10, 18, 28, 0.2) 14%,
    rgba(10, 18, 28, 0.28) 100%
  );
}

.obituary p {
  margin: 0 0 0.9rem;
}

.obituary p:last-child {
  margin-bottom: 0;
}

/* Lower sections */

.section {
  padding: 0 0 1.75rem;
}

.section-kicker,
.footer-line {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.55);
}

.section-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--baby-blue);
}

.rule {
  width: 3.25rem;
  height: 1px;
  background: var(--baby-blue-line);
  margin: 0.85rem 0 1.25rem;
}

.lede {
  margin: 0 0 1.35rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.placeholder-note,
.demo-note {
  margin: 1.2rem 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.section .placeholder-note:last-child {
  margin-bottom: 0;
}

.section .glass-card,
.site-footer .glass-card {
  padding: 1.35rem 1.2rem 1.5rem;
}

/* Service details */

.detail-list,
.section .placeholder-note {
  padding: 0.15rem 0.2rem 0.2rem;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    rgba(10, 18, 28, 0) 0%,
    rgba(10, 18, 28, 0.16) 18%,
    rgba(10, 18, 28, 0.24) 100%
  );
}

.detail-list {
  margin: 0;
  padding: 0.15rem 0.2rem 0.2rem;
}

.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(158, 196, 224, 0.28);
}

.detail:last-of-type {
  border-bottom: 1px solid rgba(158, 196, 224, 0.28);
}

.detail dt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--white);
}

.detail dd {
  margin: 0;
  color: var(--ink-muted);
}

/* Form */

.memory-form {
  margin-top: 0.25rem;
  display: grid;
  gap: 1.1rem;
  position: relative;
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.field input,
.field textarea,
.btn {
  text-shadow: none;
}

.field input,
.field textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--white);
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  padding: 0.8rem 0.85rem;
  border-radius: 0.25rem;
}

.field input {
  min-height: 3rem;
}

.field textarea {
  resize: vertical;
  min-height: 9.5rem;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--baby-blue);
  outline-offset: 1px;
  border-color: var(--baby-blue-btn);
}

.btn {
  appearance: none;
  justify-self: stretch;
  width: 100%;
  border: 1px solid var(--baby-blue-btn-hover);
  background: var(--baby-blue-btn);
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 3rem;
  padding: 0.85rem 1.3rem;
  cursor: pointer;
  border-radius: 0.25rem;
}

.btn:hover,
.btn:focus-visible {
  background: var(--baby-blue-btn-hover);
}

.btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.form-status {
  margin: 0.15rem 0 0;
  min-height: 1.5em;
  color: var(--ink-muted);
  font-size: 0.98rem;
}

/* Memories wall: name left, comment right */

.memories-wall {
  margin-top: 2.15rem;
}

.wall-heading {
  margin: 0 0 0.35rem;
  font-size: clamp(1.55rem, 6vw, 2.1rem);
}

.demo-note {
  margin-top: 0.9rem;
  margin-bottom: 0.5rem;
}

.wall-empty {
  margin: 1rem 0 0;
  color: var(--ink-muted);
}

.memory-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.memory-item {
  display: grid;
  grid-template-columns: minmax(5.5rem, 32%) 1fr;
  gap: 0.45rem 0.85rem;
  align-items: start;
  padding: 1.05rem 0.95rem;
  margin: 0 0 0.65rem;
  background: rgba(16, 24, 34, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.4rem;
}

.memory-item:last-child {
  margin-bottom: 0;
}

.memory-name,
.memory-message {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.memory-name {
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--white);
}

.memory-message {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

/* Footer */

.site-footer {
  background: transparent;
  color: var(--ink);
  text-align: center;
  padding: 0 0 2.4rem;
  border: 0;
}

.site-footer .glass-card {
  padding: 1.5rem 1.2rem 1.4rem;
}

.footer-name {
  margin: 0;
  color: var(--white);
  font-size: 1.85rem;
  letter-spacing: 0.04em;
}

.footer-dates {
  margin: 0.35rem 0 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
}

.footer-line {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--baby-blue);
}

@media (max-width: 299px) {
  .memory-item {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

@media (min-width: 480px) {
  .btn {
    width: auto;
    justify-self: start;
  }

  .memory-item {
    grid-template-columns: minmax(6.5rem, 8.5rem) 1fr;
    gap: 0.6rem 1.1rem;
  }
}

@media (min-width: 760px) {
  :root {
    --gutter: 1.5rem;
  }

  .hero {
    padding: 3rem 1.5rem 3rem;
  }

  .memorial-card {
    width: 100%;
    max-width: 35rem;
    padding: 1.85rem 2.15rem 2rem;
  }

  .hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    margin-bottom: 1.2rem;
  }

  .hero-portrait {
    width: 300px;
  }

  .memorial-card h1 {
    font-size: 2.55rem;
    margin-top: 1.15rem;
  }

  .hero-dates {
    font-size: 1.05rem;
    margin-bottom: 1.35rem;
  }

  .obituary {
    font-size: 0.9375rem;
  }

  .section {
    padding: 0 0 2.15rem;
  }

  .section .glass-card,
  .site-footer .glass-card {
    padding: 1.85rem 2rem 2rem;
  }

  .detail {
    grid-template-columns: 14.5rem 1fr;
    gap: 0.75rem 1.5rem;
  }

  .memory-item {
    grid-template-columns: 11.5rem 1fr;
    gap: 0.75rem 1.5rem;
  }

  .memory-name {
    font-size: 1.2rem;
  }

  .wrap.narrow {
    width: min(100% - 3rem, var(--content));
  }

  .footer-name {
    font-size: 2.1rem;
  }
}

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

  .hero-slide {
    transition: none;
  }
}

/* Large-print, high-contrast pass (Nov 15): bigger type for older visitors,
   solid white text with a strong dark shadow so it reads over the glass cards. */
html {
  font-size: 125%;
}

.glass-card,
.glass-card p,
.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card dt,
.glass-card dd,
.glass-card li,
.glass-card label,
.glass-card span,
.hero-eyebrow,
.hero-dates,
.obituary,
.lede,
.placeholder-note,
.demo-note,
.wall-empty,
.footer-line,
.footer-dates,
.footer-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.6);
}

.glass-card p,
.glass-card dd,
.glass-card li,
.glass-card label,
.obituary,
.lede {
  font-weight: 600;
}

.obituary,
.lede,
.placeholder-note,
.demo-note,
.wall-empty,
.glass-card dd,
.glass-card li {
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero-eyebrow,
.section-kicker,
.footer-line {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.hero-dates {
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 600;
}

.memorial-card h1 {
  font-size: clamp(2.3rem, 11vw, 3rem);
  font-weight: 700;
}

.field input,
.field textarea {
  font-size: 1.05rem;
  color: #1a2230 !important;
  text-shadow: none !important;
}

.btn {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2230 !important;
  text-shadow: none !important;
}

@media (min-width: 760px) {
  .memorial-card h1 {
    font-size: 3.1rem;
  }
}

/* Memory wall on phones: name left, comment right, with a wide comment column. */
.memory-item {
  grid-template-columns: 28% 1fr;
  gap: 0.3rem 0.75rem;
  padding: 0.95rem 0.8rem;
}

.memory-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.glass-card .memory-message {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 480px) {
  .memory-item {
    grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  }
}

@media (min-width: 760px) {
  .memory-item {
    grid-template-columns: 11.5rem 1fr;
    gap: 0.75rem 1.5rem;
  }
}

/* ===== Nov 15 v2: memorial-card hero on the yard, light baby blue cards below =====
   Hero text sits directly on the full-color yard photo (no card, no overlay, no tint).
   Readability comes from solid white type and a strong dark text-shadow only. */

:root {
  --font-script: "Great Vibes", "Pinyon Script", "Snell Roundhand", cursive;
  --navy: #1b2a3a;
  --navy-soft: #2b3d52;
  --card-blue: rgba(226, 239, 250, 0.9);
  --card-blue-solid: #e2effa;
  --gold-1: #c9a24a;
  --gold-2: #f1d68a;
  --hero-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero {
  position: relative;
  align-items: center;
  padding: 2rem 5% 2.5rem;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
  text-align: center;
  color: #fff;
}

.hero-inner,
.hero-inner p,
.hero-inner h1 {
  color: #ffffff !important;
  text-shadow: var(--hero-shadow) !important;
}

.hero-dove {
  display: block;
  width: 4rem;
  height: auto;
  margin: 0 auto 0.35rem;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.hero-inner .hero-eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 10vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.1;
}

.hero-inner .hero-portrait {
  width: min(72vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 30%, #b88e3a 55%, var(--gold-2) 78%, var(--gold-1) 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.hero-inner .hero-slides {
  border-radius: 50%;
  overflow: hidden;
  background: #22303e;
  /* Safari: keep the crossfade clipped to the circle. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.hero-inner .hero-slide {
  object-position: center 30%;
}

.hero-inner h1 {
  margin: 0.85rem 0 0.25rem;
  font-family: var(--font-script);
  font-size: clamp(3rem, 15vw, 4.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-inner .hero-dates {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 600;
}

.hero-inner .hero-tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
}

.hero-floral {
  position: absolute;
  top: 0.6rem;
  width: 4.2rem;
  height: 4.2rem;
  color: rgba(255, 250, 236, 0.85);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  z-index: 0;
}

.hero-floral--left {
  left: 0.6rem;
}

.hero-floral--right {
  right: 0.6rem;
  transform: scaleX(-1);
}

@media (min-width: 760px) {
  .hero {
    padding: 3rem 1.5rem;
  }

  .hero-floral {
    width: 7rem;
    height: 7rem;
    top: 1.2rem;
  }

  .hero-floral--left { left: 1.2rem; }
  .hero-floral--right { right: 1.2rem; }

  .hero-inner .hero-portrait {
    width: 320px;
  }
}

/* Light baby blue cards over the yard. Navy, bold, no text-shadow. */
.section .glass-card,
.site-footer .glass-card {
  background: var(--card-blue) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

.section .glass-card,
.section .glass-card p,
.section .glass-card h2,
.section .glass-card h3,
.section .glass-card dt,
.section .glass-card dd,
.section .glass-card li,
.section .glass-card label,
.section .glass-card span,
.section .obituary,
.section .lede,
.section .placeholder-note,
.section .demo-note,
.section .wall-empty,
.site-footer .glass-card,
.site-footer .footer-name,
.site-footer .footer-dates,
.site-footer .footer-line {
  color: var(--navy) !important;
  text-shadow: none !important;
}

.section .glass-card h2,
.section .wall-heading,
.section .detail dt,
.site-footer .footer-name {
  font-weight: 700;
}

.section .section-kicker,
.site-footer .footer-line {
  color: #3d6f97 !important;
  font-weight: 700;
}

.section .rule {
  height: 2px;
  background: #8eb9d8;
}

.section .obituary,
.section .detail-list,
.section .placeholder-note {
  background: none;
  padding-left: 0;
  padding-right: 0;
}

.section .obituary {
  max-width: none;
}

.section .detail {
  border-top-color: rgba(27, 42, 58, 0.18);
}

.section .detail:last-of-type {
  border-bottom-color: rgba(27, 42, 58, 0.18);
}

.section .field input,
.section .field textarea {
  border: 1.5px solid #9bb6cc;
  background: #ffffff;
  color: var(--navy) !important;
}

.section .field input:focus,
.section .field textarea:focus {
  outline: 3px solid #5f97c2;
  border-color: #5f97c2;
}

.section .btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff !important;
  font-size: 1rem;
}

.section .btn:hover,
.section .btn:focus-visible {
  background: #2d4560;
}

.section .form-status {
  color: var(--navy) !important;
  font-weight: 700;
}

.section .memory-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(27, 42, 58, 0.14);
  grid-template-columns: 28% 1fr;
}

.section .memory-name {
  color: var(--navy) !important;
  font-weight: 700;
}

.section .glass-card .memory-message {
  color: var(--navy-soft) !important;
  font-weight: 600;
}

@media (min-width: 480px) {
  .section .memory-item {
    grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  }
}

@media (min-width: 760px) {
  .section .memory-item {
    grid-template-columns: 11.5rem 1fr;
  }
}

.section-remembrance {
  padding-top: 0;
}

.section .memory-name {
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 0.95rem;
}

.section .memory-item {
  grid-template-columns: 31% 1fr;
  gap: 0.3rem 0.65rem;
  padding: 0.95rem 0.7rem;
}

/* Readability pass for "In loving memory of" over the busy yard (Nov 15). */
.hero-inner .hero-eyebrow {
  font-size: clamp(2.5rem, 11.5vw, 3.6rem);
  padding: 0 0.5rem;
  -webkit-text-stroke: 1.1px #ffffff;
  paint-order: stroke fill;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 1),
    0 1px 3px rgba(0, 0, 0, 1),
    0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 14px rgba(0, 0, 0, 0.85),
    0 0 28px rgba(0, 0, 0, 0.7) !important;
}

/* ===== Nov 15 v3: static hero portrait and gallery card ===== */

.hero-inner .hero-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 35%;
  background: #22303e;
}

.section-gallery {
  padding-top: 0.5rem;
}

.gallery-card {
  padding: 1.25rem 1rem 1.35rem !important;
}

.gallery-card .section-kicker,
.gallery-card h2,
.gallery-card .rule {
  margin-left: 0.2rem;
}

.gallery-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  border-radius: 12px;
  overflow: hidden;
  background: #22303e;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 18px rgba(27, 42, 58, 0.28);
}

.gallery-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.gallery-slide.is-current {
  opacity: 1;
}

/* Soft blurred fill behind portrait or landscape photos, so nothing is cropped. */
.gallery-slide-bg {
  position: absolute;
  inset: -24px;
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(0.8);
  transform: scale(1.08);
}

.gallery-slide-img {
  position: relative;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.8rem 0.15rem 0.6rem;
}

.section .gallery-card .gallery-count {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.gallery-toggle {
  min-height: 2.6rem;
  min-width: 5.5rem;
  padding: 0.45rem 1.1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: #ffffff;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.gallery-toggle:hover,
.gallery-toggle:focus-visible {
  background: var(--navy);
  color: #ffffff;
}

.gallery-toggle:focus-visible,
.thumb-btn:focus-visible {
  outline: 3px solid #3d6f97;
  outline-offset: 2px;
}

.thumb-strip {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 0.35rem 0.25rem 0.55rem;
  scrollbar-width: thin;
}

.thumb-strip:not(.is-overflowing) {
  justify-content: center;
}

.thumb-btn {
  flex: 0 0 auto;
  width: 4.1rem;
  height: 4.1rem;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 10px;
  overflow: hidden;
  background: #22303e;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0.72;
  box-shadow: 0 2px 6px rgba(27, 42, 58, 0.25);
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.thumb-btn img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.thumb-btn.is-current {
  opacity: 1;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 2px var(--gold-2), 0 3px 8px rgba(27, 42, 58, 0.35);
}

@media (min-width: 760px) {
  .gallery-card {
    padding: 1.85rem 2rem 2rem !important;
  }

  .gallery-viewer {
    aspect-ratio: 1 / 1;
  }

  .thumb-btn {
    width: 4.75rem;
    height: 4.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slide,
  .thumb-btn {
    transition: none;
  }
}

/* ===== Nov 15 v4: see-through frosted glass cards (replaces baby blue) ===== */
.section .glass-card,
.site-footer .glass-card {
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .section .glass-card,
  .site-footer .glass-card {
    background: rgba(22, 34, 50, 0.55) !important;
  }
}

.section .glass-card,
.section .glass-card p,
.section .glass-card h2,
.section .glass-card h3,
.section .glass-card dt,
.section .glass-card dd,
.section .glass-card li,
.section .glass-card label,
.section .glass-card span,
.section .obituary,
.section .lede,
.section .placeholder-note,
.section .demo-note,
.section .wall-empty,
.section .gallery-card .gallery-count,
.site-footer .glass-card,
.site-footer .footer-name,
.site-footer .footer-dates,
.site-footer .footer-line {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.55) !important;
}

.section .section-kicker,
.site-footer .footer-line {
  color: #fff3d6 !important;
}

.section .rule {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
}

.section .gallery-toggle {
  text-shadow: none !important;
}


/* ===== Celebration of Life notify card ===== */
.notify-card .notify-intro {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 600;
}

.section .notify-card .btn {
  text-shadow: none !important;
  background: var(--navy);
  border: 2px solid var(--navy);
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 3.15rem;
}

.section .notify-card .btn:hover,
.section .notify-card .btn:focus-visible {
  background: #2d4560;
  border-color: #2d4560;
  outline: 3px solid #fff3d6;
  outline-offset: 2px;
}

.section .notify-card .btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.section .notify-card .field label {
  font-weight: 700;
}

.section .notify-card .field input {
  background: #ffffff;
  color: var(--navy) !important;
  text-shadow: none !important;
  font-size: 1.05rem;
  min-height: 3.15rem;
  border: 1.5px solid #9bb6cc;
}

.section .notify-card .field input:focus {
  outline: 3px solid #5f97c2;
  border-color: #5f97c2;
}

.section .notify-card .form-status,
.section .notify-card .notify-success {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(0, 0, 0, 0.55) !important;
  font-weight: 700;
  font-size: 1.05rem;
}

.section .notify-card .form-status.is-error {
  color: #ffe9a8 !important;
}

.notify-form {
  margin-top: 0.15rem;
}

#notify-open[hidden],
#notify-form[hidden],
#notify-success[hidden] {
  display: none;
}