/* ==========================================================================
   memorial.css — standalone stylesheet for the memorial page
   Intentionally separate from main.css, so editing one never disturbs the
   other. Light text on a dark translucent card over the sunset photograph.

   Why light-on-dark: a light card has to sit near-opaque (about 90%) to keep
   text legible over the photo. A dark card holds the same text contrast at
   roughly 72%, so nearly three times as much of the photograph reads through.
   Measured against the brightest region of the actual backdrop, body text is
   7.3:1 and the faintest text 5.1:1 — both clear of WCAG AA.

   To revert to the earlier warm-paper scheme, swap the palette block marked
   PALETTE below for the one in LIGHT PALETTE (kept at the end of this file).
   ========================================================================== */

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

/* The `hidden` attribute must beat the layout rules below — `[hidden]` in the
   UA stylesheet loses to any class selector that sets `display`. */
[hidden] { display: none !important; }

/* ---------- PALETTE ---------- */

:root {
  --card-rgb: 26, 30, 24;       /* the translucent card, over the photograph */
  --surround: #1A1E18;          /* backdrop fallback if the image fails */
  --qr-backing: #FFFFFF;        /* must stay white so the QR scans */

  --ink: #F0EDE4;               /* 7.3:1 through the card */
  --ink-soft: #C9CEC0;          /* 5.3:1 through the card */
  --sage: #B5D1B2;              /* 5.1:1 through the card — labels, links */
  --moss: #CFE6CC;              /* hover and focus, one step brighter */
  --btn-bg: #A7C9A3;
  --btn-text: #1A2417;          /* 8.7:1 on --btn-bg */

  --line: rgba(255, 255, 255, 0.16);
  --line-soft: rgba(255, 255, 255, 0.10);
  --raised: rgba(255, 255, 255, 0.05);

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --measure: 37rem;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--surround);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;         /* 17px — readable on a phone without zooming */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  padding: 0 1rem;
}

/* ---------- Backdrop ---------- */

/* A fixed layer rather than `background-attachment: fixed`, which iOS Safari
   renders unreliably. Decorative only — the markup marks it aria-hidden.
   Full-viewport at every width: because the card is translucent, the photo
   reads through the whole page rather than only above it.

   The two files are framed differently, not merely sized differently. A tall
   phone viewport crops a landscape photo hard from the sides, so the desktop
   crop — which places Marilyn at 17% across, clear of the centred card —
   would push her off-screen on a phone. The phone file is a taller crop
   centred on her instead. Changing one does not imply changing the other;
   see assets/memorial/README.md. */
.m-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('/assets/memorial/marilyn-backdrop-small.jpg');
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

/* A light wash settles the photo behind the content without hiding it. */
.m-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 30, 24, 0.10) 0%,
    rgba(26, 30, 24, 0.18) 55%,
    rgba(26, 30, 24, 0.38) 100%
  );
}

@media (min-width: 48rem) {
  .m-backdrop { background-image: url('/assets/memorial/marilyn-backdrop.jpg'); }
}

/* ---------- Layout ---------- */

.m-page {
  max-width: var(--measure);
  /* Enough of a drop that the photograph is seen clean before the card. */
  margin: clamp(4.5rem, 22vh, 13rem) auto 2rem;
  padding: 2.25rem 1.25rem 0.5rem;
  background: rgba(var(--card-rgb), 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 24px 60px rgba(0, 0, 0, 0.38);
}

/* Without backdrop blur the photo shows through sharp, so lean more opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .m-page { background: rgba(var(--card-rgb), 0.86); }
}

.m-section {
  padding: 2.25rem 0;
  border-top: 1px solid var(--line-soft);
}

/* Heading kept for screen-reader and outline structure, but not shown —
   used where the visible opening line already serves as the heading. */
.m-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.m-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1rem;
}

/* ---------- Header ---------- */

.m-header { text-align: center; padding-bottom: 2.25rem; }

.m-portrait {
  display: block;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 auto 1.75rem;
  border-radius: 3px;
  background: var(--raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.30);
}

.m-name {
  font-family: var(--serif);
  font-size: clamp(2.125rem, 9vw, 2.875rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.m-dates {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.875rem;
  letter-spacing: 0.02em;
}

/* Music player at the end of the tribute. The frame keeps a 16:9 shape at any width. */
.m-music { margin-top: 2rem; text-align: center; }
.m-music-caption {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.m-music-frame {
  max-width: 17rem;             /* same width as the portrait */
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: var(--raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.m-nowrap { white-space: nowrap; }
.m-music-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.m-rule {
  width: 2.5rem;
  height: 1px;
  background: var(--sage);
  border: 0;
  margin: 1.5rem auto 0;
}

/* ---------- Tribute ---------- */

.m-tribute p { font-size: 1.125rem; line-height: 1.8; }
.m-tribute p + p { margin-top: 1.25rem; }
.m-tribute .m-lede {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.45;
}

/* ---------- Obituary ---------- */

.m-obituary p { font-size: 1.0625rem; }
.m-obituary p + p { margin-top: 1rem; }

/* ---------- Service details ---------- */

.m-details { margin: 0; }
.m-details > div {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.m-details > div:first-child { padding-top: 0; }
.m-details dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.1875rem;
}
.m-details dd { font-size: 1.0625rem; margin: 0; }

/* Marks any detail still awaiting confirmation. Remove the class from an
   element once its real value is in and it renders like everything else. */
.tbd { color: var(--ink-soft); font-style: italic; }

.m-note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 1.125rem;
}

/* ---------- Places to stay ---------- */

.m-places { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.m-places li {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.m-places li:first-child { padding-top: 0; }
.m-place-name { display: block; font-size: 1.0625rem; }
.m-place-note {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.125rem;
}

/* ---------- Contact ---------- */

.m-contact { list-style: none; margin: 1rem 0 0; padding: 0; }
.m-contact li + li { margin-top: 0.25rem; }
.m-contact a {
  display: inline-block;
  font-size: 1.0625rem;
  padding: 0.3rem 0;      /* a comfortable tap target on a phone */
}

/* ---------- Links and buttons ---------- */

a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--moss); }
a:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 2px;
}

.m-button {
  display: block;
  width: 100%;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.25rem;        /* comfortably past a 44px touch target */
  border-radius: 3px;
  transition: background 0.15s ease;
}
.m-button:hover { background: #BEDBBA; color: var(--btn-text); }
.m-button + .m-button { margin-top: 0.75rem; }

.m-button-quiet {
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  border: 1px solid var(--line);
}
.m-button-quiet:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  border-color: var(--sage);
}

/* ---------- Giving ---------- */

/* The .m-give-row wrapper supplies the space above; doubling it here left a
   3.5rem gap on a phone. */
.m-qr { margin-top: 0; text-align: center; }
.m-qr img {
  display: block;
  width: 9.5rem;
  height: auto;
  margin: 0 auto 0.625rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--qr-backing);   /* solid white, so it scans */
  padding: 0.5rem;
}
.m-qr figcaption { font-size: 0.8125rem; color: var(--ink-soft); }

/* The QR and the charity logo are both about giving, so they share a row
   rather than stair-stepping down the left edge at four different widths. */
.m-give-row { margin-top: 1.75rem; }

/* Charity attribution beneath the donate button. */
.m-org {
  display: block;
  margin-top: 1.75rem;
  text-align: center;
  text-decoration: none;
}
.m-org img {
  width: 11.5rem;
  height: auto;
  margin: 0 auto;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.m-org:hover img { opacity: 1; }
/* Swapped for the dark-ink logo on paper; see the print block. */
.m-print-only { display: none; }

/* ---------- Looking ahead ---------- */

.m-ahead {
  background: var(--raised);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--sage);
  border-radius: 3px;
  padding: 1.5rem 1.375rem;
}
.m-ahead p { font-size: 1.0625rem; }

/* ---------- Photographs ----------
   A CSS-only slideshow: a scroll-snapping strip, swiped on a phone and
   dragged or scrolled on a desktop. No JavaScript, so nothing to load and
   nothing to break. */

.m-slides {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Deliberately NOT `scroll-behavior: smooth`. The repositioning between
     photographs happens while the strip is invisible and must be instant;
     smooth scrolling animated it into view and looked like a jump. */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
/* One photograph at a time, at every width. */
.m-slides > figure {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
/* Family photographs are overwhelmingly phone portraits, and cropping them to
   a landscape frame cuts people out of the picture. So: a fixed-height box
   with `contain`, which shows every photograph whole whatever its shape. The
   photo floats on the card rather than sitting in a filled frame. */
.m-slides img {
  display: block;
  width: 100%;
  height: clamp(17rem, 54vh, 28rem);
  object-fit: contain;
  border-radius: 3px;
  background: transparent;
}
.m-slides figcaption {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  text-align: center;
}
/* Holds the hint and the injected pause control; wraps rather than crowding
   on a narrow phone. */
.m-slides-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

/* Injected by js/memorial-slideshow.js, so it only ever appears when there is
   actually something running to pause. */
.m-slides-toggle {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--sage);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.35rem 0.9rem;     /* keeps the tap target comfortably clickable */
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.m-slides-toggle:hover { color: var(--moss); border-color: var(--sage); }
.m-slides-toggle:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* ---------- Guest book ---------- */

.m-memories { margin-bottom: 2.25rem; }
.m-memories-list { list-style: none; margin: 0; padding: 0; }

.m-memory {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.m-memory:first-child { padding-top: 0; }
.m-memory-text {
  font-size: 1.0625rem;
  line-height: 1.75;
  white-space: pre-line;      /* keeps the writer's own line breaks */
}
.m-memory-name {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.m-memories-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}
.m-memories-count { font-size: 0.875rem; color: var(--ink-soft); }
.m-memories-foot .m-button { width: auto; min-width: 0; }

/* ---------- Guest book form ---------- */

.m-form { margin-top: 1.5rem; }

.m-field { margin-bottom: 1.125rem; }
.m-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.m-field-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }

.m-field-input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  /* Darker than the card rather than lighter: the card already lets the
     photograph through, and a pale field let it through twice over, leaving
     the text being typed hard to read. */
  background: rgba(10, 14, 9, 0.55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
}
.m-field-input:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 1px;
  border-color: transparent;
}
.m-field-text { resize: vertical; min-height: 7rem; line-height: 1.65; }

.m-field-count {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.m-field-count.is-close { color: #F0B9A8; }

.m-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.875rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.m-check input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.22rem;
  accent-color: var(--btn-bg);
}
.m-check label { cursor: pointer; }

/* The honeypot: off-screen rather than display:none, since some bots skip
   fields they can tell are hidden. */
.m-pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.m-form-status {
  display: block;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.m-form-status.is-error { color: #F0B9A8; }   /* 7.0:1 through the card */

/* ---------- Footer ---------- */

/* Screen: hidden. Print: restored — see the print block, where a sheet with
   no address on it would be orphaned. */
.m-footer {
  display: none;
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0 3rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.03em;
}

/* ---------- Wider screens ---------- */

@media (min-width: 40rem) {
  body { padding: 0 2rem; }
  .m-page { margin-top: 14vh; padding: 3.5rem 3rem 1rem; }
  .m-header { padding-bottom: 3rem; }
  .m-section { padding: 2.75rem 0; }
  .m-portrait { max-width: 19rem; }
  .m-button { display: inline-block; width: auto; min-width: 20rem; }
  .m-button + .m-button { margin-top: 0; margin-left: 0.75rem; }
}

/* ---------- Desktop ----------
   Below this width the page is a single column, which is right for a phone
   but reads as a phone layout on a large screen. From here the card widens
   and each section becomes two columns: its label in a gutter, the text
   beside it. The text column stays at a readable measure — widening the
   lines themselves would hurt, not help.

   The card cannot grow without limit: it sits over the photograph, and every
   extra rem of card is a rem less of Marilyn in the left margin. The widths
   below are chosen against the backdrop crop, which places her at 14% across.
   ---------------------------------------------------------------------- */

@media (min-width: 64rem) {
  :root {
    --gutter: 13rem;        /* label column, and the portrait's width */
    --gutter-gap: 2.5rem;
  }

  /* 3.5rem padding x2 + 13rem gutter + 2.5rem gap + 30rem measure */
  .m-page {
    max-width: 52.5rem;
    padding: 4rem 3.5rem 1.5rem;
  }

  /* Every section shares one column definition, so each label and every line
     of body text lines up on the same two edges. */
  .m-section {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    column-gap: var(--gutter-gap);
    align-items: start;
  }
  .m-label {
    grid-column: 1;
    margin-bottom: 0;
    text-align: right;
    line-height: 1.9;        /* optically aligns with the first line of text */
  }
  .m-section > :not(.m-label) { grid-column: 2; }

  /* Nothing spans back into the label gutter — not even the photographs.
     Letting the slideshow do that put it 300-odd pixels left of every line
     of text, which read as broken alignment on a wide screen.

     The content column is sized to the reading measure at each step below,
     rather than capping text inside a wider column. Capping left dead space
     to the right of every paragraph, which pushed the text block off-centre
     in the card — the second thing that looked wrong when maximized. With
     the column itself set to the measure, text, photographs and caption
     share both edges exactly. */

  /* The header stays centred at every width. It was briefly laid out with
     the portrait beside her name, which meant widening the window slid her
     photograph off to the left — the header should simply grow in place. */
  .m-header { padding-bottom: 3.5rem; }
  .m-portrait { max-width: 20rem; }
  .m-name { font-size: clamp(2.25rem, 3.4vw, 3rem); }

  /* A portrait photograph is narrower than the column, and centring it left
     its visible edge inset from every line of text. Pinned left instead, so
     the Memories section lines up like every other section. The caption row
     follows it. */
  .m-slides img { object-position: left center; }
  .m-slides-hint { justify-content: flex-start; }

  /* The tribute is the one section with no visible label, so its gutter was
     dead space and the passage sat hard against the right of the card. It
     spans the full width and centres instead, carrying on from the centred
     header above it. The opening line is centred with it; the paragraph
     stays left-aligned, because centred body copy is harder to read. */
  .m-tribute { grid-template-columns: minmax(0, 1fr); }
  .m-tribute > :not(.m-label) {
    grid-column: 1;
    max-width: 36rem;
    margin-inline: auto;
  }
  .m-tribute .m-lede { text-align: center; }

  /* One action at full column width, then QR and logo side by side beneath
     it. Previously these stacked left-aligned at 574 / 320 / 152 / 184 px,
     which read as a ragged pile with dead space beside it. */
  .m-button { display: block; width: 100%; min-width: 0; }
  .m-memories-foot .m-button { display: inline-block; width: auto; }
  .m-give-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .m-qr { margin-top: 0; text-align: left; }
  .m-qr img { margin-left: 0; margin-right: 0; }
  .m-org { margin-top: 0; text-align: left; }
  .m-org img { margin-left: 0; }

  .m-slides img { height: min(62vh, 34rem); }
}

@media (min-width: 90rem) {
  :root {
    --gutter: 16rem;
    --gutter-gap: 3rem;
  }
  /* 7rem padding + 16rem gutter + 3rem gap + 33rem measure */
  .m-page { max-width: 59rem; }
}

/* A maximized window on a large display. The card grows and the gutter with
   it, so the photographs get real size without the text column stretching
   past a comfortable line length — it stays capped at 34rem above. Still
   bounded by the backdrop: at this width Marilyn sits at 14% across, well
   clear of the card's left edge. */
@media (min-width: 120rem) {
  :root {
    --gutter: 20rem;
    --gutter-gap: 3rem;
  }
  /* 7rem padding + 20rem gutter + 3rem gap + 36rem measure */
  .m-page { max-width: 66rem; }
}

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

/* ==========================================================================
   PRINT — plain, legible, ink-light. For family who want the service details
   on paper; keeps the tribute-fund QR scannable off a printed copy.

   The palette is redefined here rather than overriding each rule, so every
   colour token flips to ink-on-paper in one place.
   ========================================================================== */

@media print {
  @page { margin: 16mm; }

  :root {
    --ink: #000000;
    --ink-soft: #333333;
    --sage: #000000;
    --moss: #000000;
    --btn-bg: transparent;
    --btn-text: #000000;
    --line: #999999;
    --line-soft: #CCCCCC;
    --raised: transparent;
    --surround: #FFFFFF;
  }

  html, body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11.5pt;
    line-height: 1.55;
    padding: 0;
  }

  .m-backdrop { display: none !important; }
  .m-page {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .m-name { font-size: 26pt; }
  .m-label { font-size: 8.5pt; }
  .m-tribute p, .m-details dd, .m-ahead p { font-size: 11.5pt; }
  .m-tribute .m-lede { font-size: 14pt; }

  .m-portrait { max-width: 2.6in; box-shadow: none; border: 1px solid #999999; }

  /* Buttons mean nothing on paper — print the destination instead. */
  .m-button {
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000;
    display: inline-block;
    width: auto;
    padding: 0.2rem 0.5rem;
  }
  .m-button + .m-button { margin: 0.4rem 0 0; }
  /* Any inline link in a paragraph, but not the buttons — they have their
     own rule below and would otherwise print the URL twice. */
  .m-button[href^="http"]::after,
  p a[href^="http"]:not(.m-button)::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    word-break: break-all;
  }
  /* Site-relative links need the domain prepended to be usable off paper. */
  .m-button[href^="/"]::after {
    content: " (marilynmunoz.com" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    word-break: break-all;
  }

  .m-ahead { border: 1px solid #999999; background: transparent; }
  .m-qr img { border: 1px solid #999999; background: #FFFFFF; }

  /* The screen logo is a white wordmark — invisible on paper. Swap it for the
     dark-ink version, which is hidden on screen. */
  .m-screen-only { display: none !important; }
  .m-print-only { display: block !important; }
  .m-org img { opacity: 1; }

  /* The whole Memories section carries .m-no-print in the markup, so the
     photographs, the caption and the section's own heading all come off
     paper together — see the note beside it in index.html. */

  /* Keep a section from splitting across a page break. */
  .m-section, .m-header, .m-ahead, .m-qr, .m-details > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .m-header, .m-label { break-after: avoid; page-break-after: avoid; }

  .m-footer { display: block; border-top: 1px solid #999999; color: #333333; }
  .m-slides-toggle { display: none !important; }
  .m-form, .m-memories-foot { display: none !important; }
  .m-no-print { display: none !important; }
}

/* ==========================================================================
   LIGHT PALETTE — the earlier warm-paper scheme, kept for easy reversion.
   Swap this block into the PALETTE block above, set `color-scheme: light`,
   change the card alpha from 0.72 to 0.90 (and the @supports fallback from
   0.86 to 0.95), darken the backdrop wash, and switch the OCRA logo in the
   markup to the `on-light` file.

   --card-rgb: 250, 247, 241;
   --surround: #2A2F26;
   --qr-backing: #FFFFFF;
   --ink: #343D33;
   --ink-soft: #57604F;
   --sage: #456546;
   --moss: #3C5A40;
   --btn-bg: #3C5A40;
   --btn-text: #FFFFFF;
   --line: #E3DCCD;
   --line-soft: #EFEAE0;
   --raised: rgba(255, 255, 255, 0.5);
   ========================================================================== */