/* Eturnal Rest -- obituary pages: the create form, the detail page, and the
   guestbook. Additive on top of tokens.css + base.css + info.css, and it
   deliberately reuses tribute.css for anything the memorial pages already
   solved (portrait, life dates, memory wall spacing).

   MOBILE FIRST, and not as a slogan. Nearly every visit to an obituary arrives
   from a text message or a Facebook post on a phone, often from someone in
   their seventies. Tap targets are finger-sized, the type does not shrink, and
   nothing important is behind a hover. */

/* ---- hero ---- */
.obit-hero {
  max-width: 640px;
}
.obit-portrait {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--space-4) 0 var(--space-5);
  box-shadow: var(--shadow-md);
  background: var(--blue-50);
}
.obit-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.obit-dates {
  color: var(--ink-2);
  margin: 0 0 var(--space-2);
}

/* ---- held notice ---- */
.obit-held {
  background: var(--blue-25);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  color: var(--ink-2);
  font-size: 0.95rem;
  margin: 0;
}

/* ---- services ---- */
.obit-services {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.obit-services h2 {
  margin-top: 0;
}
.obit-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.obit-service + .obit-service {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.obit-service p {
  margin: 0;
}
.obit-service__label {
  font-weight: 700;
  color: var(--ink);
}
.obit-service__when {
  color: var(--ink);
}
.obit-service__place,
.obit-service__address {
  color: var(--ink-2);
  font-size: 0.95rem;
}
/* Weeks later the times are history, so they fold away rather than leading a
   page somebody now visits to remember rather than to attend. */
.obit-services--past summary {
  cursor: pointer;
  color: var(--ink-2);
  padding: var(--space-3) 0;
}

/* ---- share ---- */
.obit-share {
  text-align: center;
  padding: var(--space-5) 0;
}
.obit-share__lede {
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
}
/* Holds the one Share button. The button ships hidden and web/js reveals it
   only where navigator.share exists, so on a desktop this row has no visible
   child. :has() keeps it from reserving space there; browsers without :has()
   fall back to the flat margin, which costs a few pixels and nothing else. */
.obit-share__row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.obit-share__row:has(> button:not([hidden])) {
  margin: var(--space-4) 0 0;
}

/* Copy link and Copy a message. Real actions, but not the ones most people
   want, so they read as text and not as a second pair of buttons competing
   with the logos above them. */
.obit-share__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
}
.obit-share__link {
  appearance: none;
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  /* Full 44px target without a visible box around it. */
  min-height: 44px;
}
.obit-share__link:hover,
.obit-share__link:focus-visible {
  color: var(--blue-700);
}
.obit-share__channels {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.obit-share__channels a {
  display: inline-block;
  /* 44px minimum touch target. These get tapped by people who are upset and
     not looking carefully. */
  min-height: 44px;
  line-height: 28px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.obit-share__channels a:hover,
.obit-share__channels a:focus-visible {
  border-color: var(--blue-600);
  color: var(--blue-700);
}

/* ---- share channels: the real brand marks ----
   2026-08-31. These were six identical grey text pills, which read as a row
   of buttons rather than as "send this to your sister on WhatsApp". People
   find the logo faster than they read the word.

   Scoped to a[data-share-channel] so the calendar row below, which has no
   channel attribute, keeps the plain pill it is supposed to have.

   The logos are CSS masks, not markup. Both share blocks already emit the
   same <a data-share-channel="..."> and both already load this stylesheet
   (the static memorial pages via src/_includes/tribute-share.njk, the
   dynamic page via shareHtml in functions/_obituary_render.js), so putting
   the icons here means ONE definition instead of two copies that drift.
   A mask also means the glyph takes its colour from background-color, so
   each brand is one custom property and not a second SVG.

   Tinted circle plus a brand-coloured glyph, not a saturated brand-filled
   circle. Recognisable at a glance, and it does not turn a memorial into a
   row of app-store buttons. */
@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
  .obit-share__channels a[data-share-channel] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 74px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    line-height: 1.25;
  }
  /* The circle. */
  .obit-share__channels a[data-share-channel]::before {
    content: "";
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--share-tint);
    transition:
      background 0.15s ease,
      transform 0.15s ease;
  }
  /* The logo, masked so background-color paints it. */
  .obit-share__channels a[data-share-channel]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translateX(-50%);
    background-color: var(--share-brand);
    -webkit-mask: var(--share-icon) center / 22px 22px no-repeat;
    mask: var(--share-icon) center / 22px 22px no-repeat;
  }
  .obit-share__channels a[data-share-channel]:hover,
  .obit-share__channels a[data-share-channel]:focus-visible {
    border-color: transparent;
    color: var(--ink-1);
  }
  .obit-share__channels a[data-share-channel]:hover::before,
  .obit-share__channels a[data-share-channel]:focus-visible::before {
    background: var(--share-tint-strong);
    transform: translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce) {
    .obit-share__channels a[data-share-channel]::before {
      transition: none;
    }
    .obit-share__channels a[data-share-channel]:hover::before,
    .obit-share__channels a[data-share-channel]:focus-visible::before {
      transform: none;
    }
  }
}

/* On a phone six chips wrap 4 + 2 and read as a broken row. A 3-column grid
   makes it a deliberate 3 x 2 block instead. */
@media (max-width: 30rem) {
  .obit-share__channels:has(a[data-share-channel]) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: var(--space-3) var(--space-2);
  }
  .obit-share__channels a[data-share-channel] {
    width: 100%;
  }
}

/* One custom-property block per channel. Brand colours are the official
   marks, darkened where the published colour fails contrast on a light
   tint: WhatsApp ships #25D366 and Telegram #26A5E4, both too pale here. */
.obit-share__channels a[data-share-channel="sms"] {
  --share-brand: #5b6470;
  --share-tint: rgba(91, 100, 112, 0.1);
  --share-tint-strong: rgba(91, 100, 112, 0.18);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 9h10v2H7V9zm6 5H7v-2h6v2zm4-6H7V6h10v2z'/%3E%3C/svg%3E");
}
.obit-share__channels a[data-share-channel="whatsapp"] {
  --share-brand: #1da851;
  --share-tint: rgba(37, 211, 102, 0.14);
  --share-tint-strong: rgba(37, 211, 102, 0.24);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}
.obit-share__channels a[data-share-channel="facebook"] {
  --share-brand: #1877f2;
  --share-tint: rgba(24, 119, 242, 0.12);
  --share-tint-strong: rgba(24, 119, 242, 0.22);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.obit-share__channels a[data-share-channel="email"] {
  --share-brand: #5b6470;
  --share-tint: rgba(91, 100, 112, 0.1);
  --share-tint-strong: rgba(91, 100, 112, 0.18);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.obit-share__channels a[data-share-channel="telegram"] {
  --share-brand: #1d8dc4;
  --share-tint: rgba(38, 165, 228, 0.14);
  --share-tint-strong: rgba(38, 165, 228, 0.24);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
}
.obit-share__channels a[data-share-channel="linkedin"] {
  --share-brand: #0a66c2;
  --share-tint: rgba(10, 102, 194, 0.12);
  --share-tint-strong: rgba(10, 102, 194, 0.22);
  --share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Calendar row sits under the sharing chips and reads as a quieter, different
   kind of action. */
.obit-share__channels--cal {
  margin-top: var(--space-3);
}
.obit-share__channels--cal a {
  border-style: dashed;
  font-size: 0.9rem;
}
.obit-share__status {
  min-height: 1.4em;
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
  font-size: 0.9rem;
}
/* The clipboard fallback. Hidden until a copy fails, then revealed and
   selected so the text can still be taken with two taps. */
.obit-share__text {
  width: 100%;
  box-sizing: border-box;
  min-height: 8rem;
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}

/* ---- the printed program ---- */
.obit-program {
  margin: var(--space-5) 0 0;
  text-align: left;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-4);
}
.obit-program > summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.obit-program__body p {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0 0 var(--space-4);
}
.obit-program__qr {
  width: 168px;
  margin: 0 0 var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.obit-program__qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.obit-program__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---- story ---- */
.obit-story p {
  margin: 0 0 var(--space-4);
}

/* ---- memory wall ---- */
.obit-wall__intro {
  color: var(--ink-2);
}
.obit-wall {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
}
.obit-entry {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
}
.obit-entry:first-child {
  border-top: 0;
}
.obit-entry__author {
  font-weight: 700;
  margin: 0 0 var(--space-1);
  color: var(--ink);
}
.obit-entry__body {
  margin: 0;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.obit-entry__photo {
  margin: var(--space-3) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.obit-entry__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.obit-candle {
  font-size: 1.1em;
}
.obit-entry--pending {
  opacity: 0.7;
}

/* ---- forms (shared by the create page and the guestbook) ---- */
.obit-fieldset {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 0 0 var(--space-6);
  padding: var(--space-6) 0 0;
}
.obit-fieldset:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.obit-fieldset legend {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  margin: 0 0 var(--space-2);
}
.obit-fieldset legend em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.obit-field {
  display: block;
  margin: 0 0 var(--space-4);
}
.obit-field > span {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.obit-field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-3);
}
.obit-field .input {
  width: 100%;
  box-sizing: border-box;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus,
     which loses the person's place in a long form. */
  font-size: 16px;
  min-height: 48px;
}
.obit-field textarea.input {
  min-height: 160px;
  line-height: 1.6;
  resize: vertical;
}
.obit-field__note {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0 0 var(--space-4);
}
.obit-field-row {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .obit-field-row {
    grid-template-columns: 1fr 1fr;
  }
}
.obit-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
}
.obit-check input {
  margin-top: 3px;
  width: 20px;
  height: 20px;
  flex: none;
}

/* ---- photo picker ---- */
.obit-photo__input {
  position: absolute;
  left: -9999px;
}
.obit-photo__preview {
  margin: var(--space-4) 0 0;
}
.obit-photo__preview img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.obit-photo__remove {
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
}
.obit-photo__status {
  min-height: 1.4em;
  margin: var(--space-2) 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* ---- service repeater ---- */
/* btn--sm renders at 34px, which is under the 44px minimum and is being tapped
   by someone upset and not looking carefully. The button keeps its quiet
   size-small look and gets a finger-sized landing area. */
[data-add-service] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.obit-service-row {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
.obit-service-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.obit-service-row__remove {
  background: none;
  border: 0;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.9rem;
  padding: var(--space-2);
}

/* ---- actions and status ---- */
.obit-form__actions,
.obit-entry-form__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-5) 0 0;
}
.obit-form__status,
.obit-entry-form__status {
  min-height: 1.4em;
  margin: var(--space-3) 0 0;
  color: var(--ink-2);
}
.obit-form__status[data-tone="error"],
.obit-entry-form__status[data-tone="error"] {
  color: var(--accent-800);
}
.obit-form__legal {
  color: var(--ink-3);
  font-size: 0.85rem;
  margin: var(--space-5) 0 0;
}

/* ---- guestbook form ---- */
.obit-entry-form {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin: var(--space-6) 0 0;
}
.obit-entry-form__title {
  margin: 0 0 var(--space-4);
  font-size: 1.1rem;
}

/* ---- published confirmation ---- */
.obit-done {
  text-align: center;
  padding: var(--space-6) 0;
}
.obit-done__lede {
  color: var(--ink-2);
}
.obit-done__url {
  background: var(--blue-25);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  word-break: break-all;
  font-size: 1rem;
}
.obit-done__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--space-5) 0 0;
}
.obit-done__note,
.obit-done__status {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: var(--space-4) 0 0;
}

/* ---- keep exploring: the marketplace hand-off ---- */
/* Quiet on purpose, and absent entirely for the first 30 days after a death
   (functions/api/_obituary.js showMarketplaceBlock). This is a memorial, not a
   landing page, and the styling has to agree with that. */
.obit-explore {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-5);
}
.obit-explore h2 {
  font-size: 1.1rem;
  color: var(--ink-2);
}
.obit-explore p {
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ---- index extras ---- */
.tribute-list__place {
  color: var(--ink-3);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .obit-share__channels a {
    transition: none;
  }
}

/* ---- hub page ---------------------------------------------------------- */
/* The empty state is going to BE the live page for a while, so it gets real
   styling rather than looking like a failed query. */
.obit-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.obit-empty h2 {
  margin-top: 0;
  font-size: 1.25rem;
}
.obit-empty p {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.obit-faq h3 {
  font-size: 1.05rem;
  margin: var(--space-5) 0 var(--space-2);
}
.obit-faq h3:first-child {
  margin-top: 0;
}
.obit-faq p {
  margin: 0;
  line-height: 1.65;
}

/* ---- the index, full width -------------------------------------------
   A list of names is the one thing on this site that genuinely wants the whole
   page. At 2,009 entries a 720px column is a single endless stripe with
   two-thirds of the screen empty beside it, so the list flows into columns.

   .tribute-list is display:grid in tribute.css, and CSS multi-column is
   IGNORED on a grid container, so it has to be reset to block here. That is
   why the first attempt at this computed columnCount:4 and still rendered as
   one column. */
.obit-lede {
  max-width: 60ch;
}
.obit-index .tribute-list {
  display: block;
  columns: 1;
  column-gap: var(--space-7);
}
@media (min-width: 640px) {
  .obit-index .tribute-list {
    columns: 2;
  }
}
@media (min-width: 1000px) {
  .obit-index .tribute-list {
    columns: 3;
  }
}
@media (min-width: 1300px) {
  .obit-index .tribute-list {
    columns: 4;
  }
}
.obit-index .tribute-list li {
  /* A name must never be split across a column break. */
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--space-3);
}

/* Search, letter jump row, and group headings. These lived in an inline
   <style> block on the old /tributes/ index, which folded into this page. They
   are rewritten against the real design tokens rather than the
   var(--color-border, #d8d8d8) fallbacks they used, which never resolved. */
.tribute-search {
  margin: 0 0 var(--space-4);
  max-width: 30rem;
}
.tribute-search input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  /* 16px minimum or iOS Safari zooms the page on focus. */
  font-size: 16px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.tribute-search__status {
  margin: var(--space-2) 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}
.az-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}
.az-jump__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.az-jump__link:hover,
.az-jump__link:focus-visible {
  border-color: var(--blue-600);
  color: var(--blue-700);
}
/* Touch screens: the letters are hard to hit for our older visitors, so give
   each one a finger-sized landing area. */
@media (pointer: coarse) {
  .az-jump {
    gap: var(--space-2);
  }
  .az-jump__link {
    min-width: 2.6rem;
    min-height: 44px;
  }
}
.tribute-group {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 1.15rem;
  /* Clears the sticky header when a letter link jumps here. */
  scroll-margin-top: 5rem;
  /* Do not strand a heading at the foot of a column. */
  break-after: avoid;
  page-break-after: avoid;
}
.tribute-empty {
  color: var(--ink-3);
}

/* The questions read better in two columns than as one long scroll, once the
   page is wide enough for the measure to stay comfortable. */
@media (min-width: 900px) {
  .obit-faq--cols {
    columns: 2;
    column-gap: var(--space-8);
  }
  .obit-faq--cols h3,
  .obit-faq--cols p {
    break-inside: avoid;
  }
  .obit-faq--cols h3 {
    break-after: avoid;
  }
}